/**
 * My Time — WooCommerce CSS Overrides
 * Ensures WC-generated markup inherits luxury design system.
 */

/* ============================================================
   GLOBAL WC RESETS
   ============================================================ */
.woocommerce,
.woocommerce-page {
  color: var(--text);
}

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

/* ============================================================
   WC FORM FIELDS
   ============================================================ */
.woocommerce .form-row label,
.woocommerce-checkout .form-row label {
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  display: block;
  font-weight: 400;
}

.woocommerce .form-row input,
.woocommerce .form-row select,
.woocommerce .form-row textarea,
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  padding: var(--space-4) !important;
  font-size: var(--text-sm) !important;
  border-radius: var(--radius-sm) !important;
  width: 100%;
  outline: none !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  transition: border-color var(--duration-fast) var(--ease) !important;
}

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

.woocommerce .form-row input::placeholder { color: var(--text-muted) !important; }

/* Select arrow */
.woocommerce .form-row select,
.woocommerce-checkout .form-row select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: var(--space-8) !important;
}

/* Checkbox & Radio */
.woocommerce .form-row input[type="checkbox"],
.woocommerce .form-row input[type="radio"] {
  accent-color: var(--accent);
  width: auto;
  padding: 0;
}

/* ============================================================
   WC BUTTONS
   ============================================================ */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  padding: var(--space-4) var(--space-8) !important;
  border-radius: var(--btn-radius) !important;
  background: var(--accent) !important;
  color: #000 !important;
  border: 1px solid var(--accent) !important;
  cursor: pointer !important;
  transition: all var(--duration) var(--ease) !important;
  text-decoration: none;
  box-shadow: none !important;
  outline: none;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: var(--shadow-glow) !important;
  transform: translateY(-1px);
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--text) !important;
  color: var(--bg) !important;
  border-color: var(--text) !important;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

/* Disabled state */
.woocommerce #respond input#submit:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ============================================================
   WC BREADCRUMBS
   ============================================================ */
.woocommerce .woocommerce-breadcrumb {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  background: none;
  margin: 0 !important;
}

.woocommerce .woocommerce-breadcrumb a { color: var(--text-muted); transition: color var(--duration-fast) var(--ease); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--accent); }

/* ============================================================
   WC NOTICES
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-success {
  padding: var(--space-4) var(--space-6) !important;
  margin-bottom: var(--space-6) !important;
  font-size: var(--text-sm) !important;
  border-radius: var(--radius-sm) !important;
  border-top: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-4) !important;
}

.woocommerce-message {
  background: rgba(201,168,76,0.1) !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  color: var(--accent) !important;
}

.woocommerce-error {
  background: rgba(231,76,60,0.1) !important;
  border: 1px solid rgba(231,76,60,0.3) !important;
  color: #e74c3c !important;
}

.woocommerce-info {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}

/* ============================================================
   WC PRODUCT LOOP
   ============================================================ */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--space-4) !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

@media (min-width: 768px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (min-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}

.woocommerce ul.products li.product {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--card-radius) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease) !important;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ============================================================
   WC STAR RATINGS
   ============================================================ */
.woocommerce .star-rating {
  color: var(--accent) !important;
  font-size: 12px !important;
}

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

/* ============================================================
   WC PAGINATION
   ============================================================ */
.woocommerce nav.woocommerce-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-16);
}

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
  border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  display: flex;
  border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  transition: all var(--duration-fast) var(--ease) !important;
  text-decoration: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000 !important;
}

/* ============================================================
   WC ACCOUNT PAGES
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-8);
}

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

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--bg-tertiary);
  color: var(--accent);
}

/* ============================================================
   WC ORDERS TABLE
   ============================================================ */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.woocommerce table.shop_table thead th {
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.woocommerce table.shop_table tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ============================================================
   WC PAYMENT METHODS
   ============================================================ */
#payment .payment_methods {
  list-style: none;
  padding: 0;
  margin: 0;
}

#payment .payment_methods li {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  transition: border-color var(--duration-fast) var(--ease);
}

#payment .payment_methods li:has(input:checked),
#payment .payment_methods li.wc_payment_method:has(.input-radio:checked) {
  border-color: var(--accent);
}

#payment .payment_methods li label {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  cursor: pointer !important;
  font-size: var(--text-sm) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
}

#payment .payment_methods input[type="radio"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

#payment .payment_box {
  padding: var(--space-4) 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ============================================================
   WC ORDER TOTALS
   ============================================================ */
.shop_table.order_details tfoot tr th,
.shop_table.order_details tfoot tr td {
  padding: var(--space-3) var(--space-4) !important;
}

.shop_table tr.order-total th,
.shop_table tr.order-total td {
  font-size: var(--text-xl) !important;
  font-family: var(--font-serif) !important;
  border-top: 1px solid var(--border) !important;
}

/* ============================================================
   WC PRODUCT SINGLE — WC TABS
   ============================================================ */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: none; /* We replace with custom tabs */
}

.woocommerce div.product .woocommerce-tabs .panel {
  display: none !important;
}

/* ============================================================
   WC VARIATIONS
   ============================================================ */
.variations_form table.variations {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: var(--space-6);
}

.variations_form table.variations th {
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
  padding-bottom: var(--space-2);
  text-align: left;
}

.variations_form .reset_variations {
  font-size: var(--text-xs);
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease);
}

.variations_form .reset_variations:hover { color: var(--text); }

/* WC out of stock */
.out-of-stock { color: var(--text-muted) !important; }

.stock {
  font-size: var(--text-xs) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.in-stock { color: var(--accent) !important; }

/* ============================================================
   WC REVIEWS / COMMENTS
   ============================================================ */
.woocommerce #reviews #comments ol.commentlist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce #reviews #comments ol.commentlist li {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border);
}

.woocommerce #reviews #comments ol.commentlist li .comment_container {
  display: flex;
  gap: var(--space-4);
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
  border-radius: var(--radius-full);
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

/* Review form */
.woocommerce #reviews #review_form_wrapper {
  margin-top: var(--space-8);
}

.woocommerce #reviews #review_form textarea {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-4) !important;
  resize: vertical;
}

/* ============================================================
   WC CART — COUPON ROW
   ============================================================ */
.coupon input[type="text"] {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  padding: var(--space-3) var(--space-4) !important;
  font-size: var(--text-sm) !important;
  border-radius: var(--radius-sm) !important;
  outline: none !important;
}

.coupon input[type="text"]:focus {
  border-color: var(--accent) !important;
}

/* ============================================================
   WC CHECKOUT — SHIP TO DIFFERENT ADDRESS
   ============================================================ */
#ship-to-different-address label {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  cursor: pointer !important;
  font-size: var(--text-sm) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
}

#ship-to-different-address input[type="checkbox"] {
  accent-color: var(--accent);
}

/* ============================================================
   WC LOST PASSWORD & AUTH FORMS
   ============================================================ */
.woocommerce-form-login,
.woocommerce-form-register {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: var(--space-8);
  border-radius: var(--radius);
  max-width: 500px;
  margin-inline: auto;
}

.woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ============================================================
   SELECT2 OVERRIDES (used by WC)
   ============================================================ */
.select2-container--default .select2-selection--single {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  height: auto !important;
  padding: var(--space-3) var(--space-4) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.5 !important;
  padding: 0 !important;
}

.select2-dropdown {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
}

.select2-results__option {
  padding: var(--space-3) var(--space-4) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-secondary) !important;
}

.select2-results__option--highlighted[aria-selected] {
  background: var(--bg-tertiary) !important;
  color: var(--text) !important;
}

.select2-results__option[aria-selected="true"] {
  background: rgba(201,168,76,0.1) !important;
  color: var(--accent) !important;
}