/**
 * BASHI Jewelry — WordPress / WooCommerce CSS Overrides
 *
 * This file adapts WooCommerce's default output to match
 * BASHI's existing CSS class architecture.
 *
 * RULE: Never modify the 12 core CSS files from the HTML theme.
 * Only add WooCommerce-specific adaptations here.
 *
 * Load order: LAST (after all 12 original CSS files).
 */

/* ════════════════════════════════════════════════════════════════════════
   1. WooCommerce notices → match BASHI toast/alert styling
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  border-radius: var(--radius-base);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: var(--text-base);
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

/* Centering these with flexbox (previous attempt) broke on mobile: a flex
   item defaults to min-width:auto, so the long validation sentence refused
   to shrink below its own single-line width and forced the whole box
   wider than the viewport -- the exact "message goes outside the screen,
   no left/right margin" bug. Plain text-align:center + an inline-block
   button lets the browser wrap the text normally at any width instead. */
.woocommerce-error li {
  display: block;
}

.woocommerce-message .button.wc-forward,
.woocommerce-error .button.wc-forward,
.woocommerce-info .button.wc-forward {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

.woocommerce-message { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); }
.woocommerce-error   { background: var(--color-error-bg);   color: var(--color-error);   border: 1px solid var(--color-error);   }
.woocommerce-info    { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning); }

.woocommerce-message::before,
.woocommerce-error li::before,
.woocommerce-info::before { content: none; }

/* ════════════════════════════════════════════════════════════════════════
   2. WooCommerce form fields → match BASHI form styling
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce form .form-row { margin-bottom: 16px; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-base);
  font-size: var(--text-base);
  font-family: var(--font-primary);
  color: var(--color-text);
  background: #fff;
  transition: border-color var(--transition-fast);
  outline: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--color-gold);
}

.woocommerce form .form-row label {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal);
  margin-bottom: 6px;
  display: block;
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════════════════
   3. WooCommerce buttons → match BASHI btn styles
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input[type="submit"],
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-base);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  background: var(--color-charcoal);
  color: #fff;
  border: 1.5px solid var(--color-charcoal);
  letter-spacing: var(--tracking-wide);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #fff;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #fff;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
}

/* ════════════════════════════════════════════════════════════════════════
   4. WooCommerce breadcrumb → match BASHI breadcrumb
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.woocommerce-breadcrumb a:hover { color: var(--color-gold); }

/* ════════════════════════════════════════════════════════════════════════
   5. WooCommerce price → match BASHI price__current / price__original
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce del bdi {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.woocommerce ins {
  text-decoration: none;
  font-weight: var(--weight-bold);
  color: var(--color-charcoal);
}

/* ════════════════════════════════════════════════════════════════════════
   6. WooCommerce product stars → match BASHI rating
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce .star-rating {
  color: var(--color-star);
  display: inline-flex;
  gap: 1px;
  font-size: 14px;
}

.woocommerce .star-rating span::before {
  color: var(--color-star);
}

/* ════════════════════════════════════════════════════════════════════════
   7. WooCommerce checkout page → use BASHI checkout layout
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce-checkout #payment {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: 20px;
}

.woocommerce-checkout #payment .payment_methods {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.woocommerce-checkout #payment .payment_methods li {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: 14px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.woocommerce-checkout #payment .payment_methods li.payment_method_cod input:checked ~ label,
.woocommerce-checkout #payment .payment_methods li input:checked + label {
  color: var(--color-gold);
}

/* The grid-template-columns above ties checkout.css's/responsive.css's
   mobile collapse (.payment-options at <=900px) on specificity: an ID
   selector always beats a bare class, so that collapse was silently never
   applying and forcing two payment cards into 1fr columns on phone-width
   screens — grid items don't shrink below their content's natural width
   by default, so that overflowed the whole page horizontally. Matching the
   ID-qualified selector here is what actually wins the cascade. */
@media (max-width: 900px) {
  .woocommerce-checkout #payment .payment_methods {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   8. WordPress admin bar adjustment
   ════════════════════════════════════════════════════════════════════════ */

.admin-bar .site-header,
.admin-bar .primary-nav { top: 32px; }

@media (max-width: 782px) {
  .admin-bar .site-header,
  .admin-bar .primary-nav { top: 46px; }
}

/* ════════════════════════════════════════════════════════════════════════
   9. Screen reader text (WordPress standard)
   ════════════════════════════════════════════════════════════════════════ */

.sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   10. WooCommerce account page → match BASHI account layout
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce { padding: 32px 0 56px; }

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  color: var(--color-gold);
  border-left-color: var(--color-gold);
  background: var(--color-gold-bg);
}

/* ════════════════════════════════════════════════════════════════════════
   11. WooCommerce tables → BASHI styling
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce table.shop_table th {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.woocommerce table.shop_table td {
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  color: var(--color-text);
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════════════
   12. WooCommerce login/register/lost-password → constrain to a card
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
  max-width: 440px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: 32px;
  box-shadow: var(--shadow-md);
}