/* ============================================
   GBM Salon PRO — WooCommerce Style Overrides
   ============================================ */

/* WooCommerce Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--sp-bg-card) !important;
  border: 1px solid var(--sp-border) !important;
  border-left: 4px solid var(--sp-accent) !important;
  color: var(--sp-text-primary) !important;
  padding: 16px 20px !important;
  border-radius: var(--border-radius-md) !important;
  margin-bottom: var(--space-md) !important;
}

.woocommerce-error {
  border-left-color: var(--sp-error) !important;
}

.woocommerce-message a,
.woocommerce-info a {
  color: var(--sp-accent) !important;
}

/* WooCommerce Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: var(--sp-accent) !important;
  color: var(--sp-text-on-accent) !important;
  border: none !important;
  border-radius: var(--border-radius-pill) !important;
  padding: 12px 32px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--sp-accent-light) !important;
  transform: translateY(-2px) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--sp-accent) !important;
}

/* Cart Table */
.woocommerce table.shop_table {
  border: 1px solid var(--sp-border) !important;
  border-radius: var(--border-radius-md) !important;
  overflow: hidden !important;
  border-collapse: separate !important;
}

.woocommerce table.shop_table th {
  background: var(--sp-bg-secondary) !important;
  color: var(--sp-text-primary) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-color: var(--sp-border) !important;
  padding: 14px 16px !important;
}

.woocommerce table.shop_table td {
  background: var(--sp-bg-card) !important;
  color: var(--sp-text-primary) !important;
  border-color: var(--sp-border) !important;
  padding: 14px 16px !important;
}

.woocommerce table.shop_table td a {
  color: var(--sp-text-primary) !important;
}

.woocommerce table.shop_table td a:hover {
  color: var(--sp-accent) !important;
}

/* Cart Totals */
.woocommerce .cart-collaterals .cart_totals {
  background: var(--sp-bg-card) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: var(--border-radius-md) !important;
  padding: var(--space-md) !important;
}

/* Checkout Form */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection {
  background: var(--sp-bg-secondary, #fcfcfc) !important;
  border: 1px solid var(--sp-border, #ede9e5) !important;
  color: var(--sp-text-primary, #2b2520) !important;
  padding: 12px 14px !important;
  border-radius: var(--border-radius-sm, 8px) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  outline: none !important;
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder,
.woocommerce form .form-row input.input-text::-webkit-input-placeholder,
.woocommerce form .form-row textarea::-webkit-input-placeholder,
.woocommerce form .form-row input.input-text:-moz-placeholder,
.woocommerce form .form-row textarea:-moz-placeholder,
.woocommerce form .form-row input.input-text::-moz-placeholder,
.woocommerce form .form-row textarea::-moz-placeholder,
.woocommerce form .form-row input.input-text:-ms-input-placeholder,
.woocommerce form .form-row textarea:-ms-input-placeholder {
  color: #1a1a1a !important;
  opacity: 1 !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--sp-accent) !important;
  box-shadow: 0 0 0 3px rgba(196, 149, 122, 0.15) !important;
}

.woocommerce form .form-row label {
  color: var(--sp-text-secondary) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* My Account */
.woocommerce-MyAccount-navigation ul li a {
  color: var(--sp-text-secondary) !important;
  padding: 12px 16px !important;
  display: block !important;
  border-bottom: 1px solid var(--sp-border) !important;
  transition: all 0.3s ease !important;
}

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

/* Quantity Input */
.woocommerce .quantity .qty {
  background: var(--sp-bg-tertiary) !important;
  border: 1px solid var(--sp-border) !important;
  color: var(--sp-text-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  padding: 8px !important;
  width: 60px !important;
}

/* Remove default WC image styling */
.woocommerce div.product div.images {
  margin-bottom: 0 !important;
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--sp-accent) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0 !important;
  margin: 0 0 var(--space-md) !important;
  border-bottom: 1px solid var(--sp-border) !important;
  display: flex !important;
  gap: var(--space-md) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--sp-text-muted) !important;
  padding: 12px 0 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--sp-accent) !important;
  border-bottom: 2px solid var(--sp-accent) !important;
}

/* ============================================
   CART PAGE
   ============================================ */
.sp-cart-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.sp-cart-items-wrap {
  width: 100%;
}

.sp-cart-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--sp-border);
}

.sp-cart-item-image {
  width: 100px;
  height: 100px;
  background: var(--sp-bg-card);
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.sp-cart-item-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sp-cart-item-info {
  flex: 1;
}

.sp-cart-item-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.sp-cart-item-ref {
  font-size: 11px;
  color: var(--sp-text-muted);
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.sp-cart-item-color {
  font-size: 12px;
  color: var(--sp-text-secondary);
  margin-bottom: 8px;
}

.sp-cart-item-price {
  font-weight: 700;
  color: var(--sp-accent);
}

.sp-cart-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm);
}

.sp-cart-qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid var(--sp-border);
  border-radius: var(--border-radius-pill);
  overflow: hidden;
}

.sp-qty-btn {
  width: 32px;
  height: 32px;
  background: var(--sp-bg-tertiary);
  border: none;
  color: var(--sp-text-primary);
  font-size: 16px;
  cursor: pointer;
}

.sp-qty-input {
  width: 40px;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--sp-text-primary);
  font-size: 14px;
  font-weight: 600;
  -moz-appearance: textfield;
}

.sp-qty-input::-webkit-outer-spin-button,
.sp-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sp-cart-item-subtotal {
  font-size: 18px;
  font-weight: 700;
}

.sp-cart-remove-btn {
  color: var(--sp-text-muted);
}

.sp-cart-remove-btn:hover {
  color: var(--sp-error);
}

/* Sidebar */
.sp-cart-sidebar {
  width: 100%;
}

.sp-cart-delivery-section {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.sp-cart-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: var(--space-xl);
}

.sp-cart-field-row {
  display: flex;
  gap: 16px;
}

.sp-cart-field-row > * {
  flex: 1;
}

.sp-cart-input, .sp-cart-select, .sp-cart-textarea {
  width: 100%;
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  color: #000000 !important;
  padding: 16px;
  border-radius: var(--border-radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: var(--transition);
}

.sp-cart-input::placeholder,
.sp-cart-textarea::placeholder,
.sp-cart-input::-webkit-input-placeholder,
.sp-cart-textarea::-webkit-input-placeholder,
.sp-cart-input:-moz-placeholder,
.sp-cart-textarea:-moz-placeholder,
.sp-cart-input::-moz-placeholder,
.sp-cart-textarea::-moz-placeholder,
.sp-cart-input:-ms-input-placeholder,
.sp-cart-textarea:-ms-input-placeholder {
  color: #555555 !important;
  opacity: 1 !important;
}

.sp-cart-input:focus, .sp-cart-select:focus, .sp-cart-textarea:focus {
  border-color: #000000 !important;
}

.sp-cart-textarea {
  min-height: 100px;
  resize: vertical;
}

.sp-cart-shipping-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-shipping-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 15px;
}

.sp-radio {
  width: 20px;
  height: 20px;
  accent-color: var(--sp-accent);
}

.sp-shipping-price {
  font-weight: 600;
  color: var(--sp-text-secondary);
}

.sp-cart-summary {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.sp-summary-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--sp-text-secondary);
}

.sp-summary-line span:last-child {
  color: var(--sp-text-primary);
  font-weight: 600;
}

.sp-summary-divider {
  height: 1px;
  background: var(--sp-border);
  margin: var(--space-md) 0;
}

.sp-summary-total {
  font-size: 20px;
  color: var(--sp-text-primary);
}

.sp-summary-total span:last-child {
  color: var(--sp-accent);
  font-size: 24px;
}

.sp-cart-trust {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-md);
  border: 1px solid var(--sp-border-light);
  border-radius: var(--border-radius-md);
}

.sp-cart-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--sp-text-secondary);
}

.sp-sticky-checkout {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--sp-bg-secondary);
  border-top: 1px solid var(--sp-border);
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

/* ============================================
   CHECKOUT PAGE — Premium GBM-style
   ============================================ */
body.woocommerce-checkout,
body.woocommerce-cart {
  background-color: #f8f6f5 !important;
}

.sp-checkout-page {
  padding-top: 40px;
  padding-bottom: 100px;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Progress Steps */
.sp-checkout-steps {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 60px;
  justify-content: center;
}
.sp-step {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sp-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sp-bg-tertiary, #f0ece8);
  color: var(--sp-text-muted, #888);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-body);
}
.sp-step.active .sp-step-num {
  background: var(--sp-text-primary, #2b2520);
  color: #fff;
}
.sp-step-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-text-muted, #888);
  font-family: var(--font-body);
}
.sp-step.active .sp-step-label {
  color: var(--sp-text-primary, #2b2520);
}
.sp-step-line {
  flex: 1;
  height: 1px;
  background: var(--sp-border, #ede9e5);
  max-width: 100px;
}

/* Checkout Grid Layout */
.sp-checkout-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: start;
}
.sp-checkout-section {
  background: var(--sp-bg-card, #fff);
  border: 1px solid var(--sp-border, #ede9e5);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
.sp-checkout-section-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--sp-text-primary, #2b2520);
  font-family: var(--font-body);
}

/* Summary Sidebar */
.sp-checkout-summary-inner {
  background: var(--sp-bg-tertiary, #f5f2ef);
  border-radius: 24px;
  padding: 40px;
  position: sticky;
  top: 120px;
}
.sp-summary-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--sp-text-primary, #2b2520);
  font-family: var(--font-body);
}

/* Order Items */
.sp-order-item {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  align-items: center;
}
.sp-order-item-image {
  width: 64px;
  height: 64px;
  background: var(--sp-bg-card, #fff);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--sp-border, #ede9e5);
}
.sp-order-item-image img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}
.sp-order-item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: var(--sp-text-primary, #2b2520);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-order-item-info {
  flex: 1;
  min-width: 0;
}
.sp-order-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--sp-text-primary, #2b2520);
  display: block;
  line-height: 1.4;
}
.sp-order-item-meta {
  display: block;
  font-size: 12px;
  color: var(--sp-text-muted, #888);
  margin-top: 4px;
}
.sp-order-item-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--sp-text-primary, #2b2520);
  flex-shrink: 0;
}

/* Summary Rows */
.sp-summary-divider {
  height: 1px;
  background: var(--sp-border, #ede9e5);
  margin: 20px 0;
}
.sp-summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--sp-text-primary, #2b2520);
  font-family: var(--font-body);
}
.sp-summary-total {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid var(--sp-text-primary, #2b2520);
  font-size: 20px;
  font-weight: 800;
}

/* Payment Section */
.sp-payment-section .wc_payment_methods {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sp-payment-section .wc_payment_methods li {
  padding: 12px 16px;
  border: 1px solid var(--sp-border, #ede9e5);
  border-radius: 12px;
  margin-bottom: 8px;
  background: var(--sp-bg-card, #fff);
  transition: border-color 0.2s;
}
.sp-payment-section .wc_payment_methods li:hover,
.sp-payment-section .wc_payment_methods li.active {
  border-color: var(--sp-accent, #c4957a);
}

/* Place Order Button */
.sp-place-order {
  margin-top: 24px;
}
.sp-btn-place-order {
  width: 100%;
  padding: 18px 32px;
  background: var(--sp-text-primary, #2b2520);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}
.sp-btn-place-order:hover {
  background: var(--sp-accent, #c4957a);
  transform: translateY(-2px);
}

/* Secure Note */
.sp-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--sp-text-muted, #aaa);
  margin-top: 24px;
  font-family: var(--font-body);
}

/* Force Block Checkout Text & Placeholders to Black */
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout select,
.wc-block-checkout textarea,
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-combobox input {
  color: #000000 !important;
  background-color: #ffffff !important;
}

/* Block Checkout labels & placeholders */
.wc-block-checkout label,
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-checkout .wc-block-components-text-input__label,
.wc-block-checkout .components-placeholder,
.wc-block-checkout .components-input-control__label {
  color: #000000 !important;
  opacity: 1 !important;
}

/* Input placeholders */
.wc-block-checkout ::placeholder,
.wc-block-checkout input::placeholder,
.wc-block-checkout textarea::placeholder,
.wc-block-checkout .wc-block-components-text-input input::placeholder,
.wc-block-components-text-input input::placeholder {
  color: #555555 !important;
  opacity: 1 !important;
}

/* ============================================
   THANK YOU PAGE
   ============================================ */
.sp-thankyou-box {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  text-align: center;
}

.sp-thankyou-icon {
  margin-bottom: var(--space-md);
}

.sp-order-details-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  text-align: left;
}

.sp-order-detail-card {
  background: var(--sp-bg-tertiary);
  padding: var(--space-md);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--sp-border-light);
}

.sp-order-detail-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--sp-text-muted);
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.sp-order-detail-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.sp-order-items-table {
  text-align: left;
  margin-bottom: var(--space-2xl);
}

.sp-order-items-table table {
  width: 100%;
  border-collapse: collapse;
}

.sp-order-items-table th {
  padding: 16px;
  border-bottom: 1px solid var(--sp-border);
  color: var(--sp-text-secondary);
  font-weight: 500;
}

.sp-order-items-table td {
  padding: 16px;
  border-bottom: 1px solid var(--sp-border-light);
}

/* ============================================
   MY ACCOUNT
   ============================================ */
.sp-auth-layout {
  max-width: 1000px;
  margin: 0 auto;
}

.sp-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.sp-auth-card {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  padding: var(--space-2xl);
  border-radius: var(--border-radius-lg);
}

.sp-form-group {
  margin-bottom: var(--space-md);
}

.sp-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text-secondary);
  margin-bottom: 8px;
}

.sp-form-input {
  width: 100%;
  background: var(--sp-bg-tertiary);
  border: 1px solid var(--sp-border-light);
  color: var(--sp-text-primary);
  padding: 14px 16px;
  border-radius: var(--border-radius-md);
  font-family: var(--font-body);
  transition: var(--transition);
}

.sp-form-input:focus {
  border-color: var(--sp-accent);
  outline: none;
}

.sp-account-layout {
  display: flex;
  gap: var(--space-2xl);
}

.sp-account-sidebar {
  width: 280px;
  flex-shrink: 0;
}

.sp-account-user {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--sp-border);
}

.sp-account-avatar img {
  border-radius: 50%;
  border: 2px solid var(--sp-accent);
}

.sp-account-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-account-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--sp-text-secondary);
  border-radius: var(--border-radius-md);
  transition: var(--transition);
}

.sp-account-nav-link svg {
  stroke: currentColor;
}

.sp-account-nav-link:hover, .sp-account-nav-link.is-active {
  background: var(--sp-bg-card);
  color: var(--sp-accent);
}

.sp-account-content {
  flex: 1;
}

.sp-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.sp-dashboard-card {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  padding: var(--space-xl);
  border-radius: var(--border-radius-lg);
  transition: var(--transition);
}

.sp-dashboard-card:hover {
  border-color: var(--sp-accent);
  transform: translateY(-5px);
}

.sp-dashboard-card h3 {
  margin: var(--space-sm) 0 var(--space-xs);
  font-family: var(--font-body);
  font-size: 18px;
}

.sp-dashboard-card p {
  font-size: 14px;
}

.sp-orders-table-wrap {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.sp-orders-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.sp-orders-table th {
  background: var(--sp-bg-tertiary);
  padding: 16px;
  color: var(--sp-text-secondary);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sp-orders-table td {
  padding: 16px;
  border-bottom: 1px solid var(--sp-border);
}

.sp-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--border-radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--sp-bg-tertiary);
  color: var(--sp-text-secondary);
}

.sp-status-processing { background: rgba(196, 149, 122, 0.2); color: var(--sp-accent); }
.sp-status-completed { background: rgba(39, 168, 96, 0.2); color: var(--sp-success); }
.sp-status-cancelled { background: rgba(196, 30, 58, 0.2); color: var(--sp-error); }

/* ============================================
   SEARCH OVERLAY
   ============================================ */
.sp-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 11, 10, 0.98);
  z-index: 9999;
  display: flex;
  justify-content: center;
  padding-top: 10vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sp-search-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.sp-search-overlay-inner {
  width: 100%;
  max-width: 800px;
  padding: 0 var(--space-lg);
  position: relative;
}

.sp-search-close {
  position: absolute;
  top: -40px;
  right: var(--space-lg);
  background: none;
  border: none;
  color: var(--sp-text-primary);
  cursor: pointer;
  transition: var(--transition);
}

.sp-search-close:hover {
  color: var(--sp-accent);
  transform: rotate(90deg);
}

.sp-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--sp-border);
  padding-bottom: 16px;
}

.sp-search-input-wrap svg {
  margin-right: 16px;
}

.sp-search-input-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--sp-text-primary);
  font-size: clamp(20px, 3vw, 32px);
  font-family: var(--font-body);
  outline: none;
}

.sp-search-results {
  margin-top: var(--space-2xl);
}

.sp-search-results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.sp-search-result-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: var(--border-radius-md);
  transition: var(--transition);
}

.sp-search-result-item:hover {
  background: var(--sp-bg-card);
}

.sp-search-result-image {
  width: 60px;
  height: 60px;
  background: var(--sp-bg-tertiary);
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-search-result-image img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.sp-toast-container {
  position: fixed;
  bottom: var(--space-lg);
  left: var(--space-lg);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-toast {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  color: var(--sp-text-primary);
  padding: 16px 20px;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(-120%);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-size: 14px;
  font-weight: 500;
}

.sp-toast.show {
  transform: translateX(0);
}

.sp-toast-success svg {
  color: var(--sp-success);
}

.sp-toast-error svg {
  color: var(--sp-error);
}

.sp-loader {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(196, 149, 122, 0.3);
  border-top-color: var(--sp-accent);
  border-radius: 50%;
  animation: sp-spin 1s linear infinite;
}

@keyframes sp-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 991px) {
  .sp-cart-layout, .sp-checkout-layout, .sp-account-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
  }
  .sp-cart-sidebar, .sp-checkout-order-review, .sp-account-sidebar {
    width: 100% !important;
  }
  .sp-checkout-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .sp-checkout-summary-inner {
    position: static !important;
  }
  .sp-auth-grid {
    grid-template-columns: 1fr;
  }
  .sp-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .sp-order-details-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Mobile padding and layout fixes */
  .sp-checkout-page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .sp-cart-field-row {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .sp-cart-delivery-section,
  .sp-cart-summary {
    padding: 20px !important;
  }
  .sp-checkout-steps {
    gap: 8px !important;
    margin-bottom: 30px !important;
  }
  .sp-step-label {
    display: none !important;
    color: #2b2520 !important;
  }
  .sp-step.active .sp-step-label {
    display: inline !important;
    font-size: 13px !important;
    color: #2b2520 !important;
  }
  .sp-step-num {
    background: #e6ddd5 !important;
    color: #2b2520 !important;
  }
  .sp-step.active .sp-step-num {
    background: #2b2520 !important;
    color: #fff !important;
  }
  .sp-step-line {
    max-width: 40px !important;
    background: #e6ddd5 !important;
  }
}

/* Ensure desktop wrapper matches clean content width */
@media (min-width: 992px) {
  .sp-checkout-grid {
    max-width: 1160px;
    margin: 0 auto;
  }
}

/* Responsive Table & Single Product Grid Styles */
.sp-single-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}

@media (max-width: 768px) {
  .sp-single-product-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  /* Scrollable cart & checkout tables */
  .woocommerce table.shop_table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .woocommerce-cart-form {
    overflow-x: auto;
  }

  /* ===== WooCommerce Blocks Checkout — Mobile Responsive ===== */

  /* Stack multi-column form rows (first/last name, city/state, etc.) */
  .wc-block-components-address-form__row,
  .wc-block-checkout__billing-fields .wc-block-components-address-form__row,
  .wc-block-checkout__shipping-fields .wc-block-components-address-form__row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .wc-block-components-address-form__row > div,
  .wc-block-components-address-form__row > .wc-block-components-text-input,
  .wc-block-components-address-form__row > .wc-block-components-combobox {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    margin-bottom: 12px !important;
  }

  /* Classic WooCommerce form rows */
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last,
  .woocommerce-page form .form-row-first,
  .woocommerce-page form .form-row-last {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-right: 0 !important;
  }

  /* Checkout main layout — stack billing + order review */
  .sp-checkout-layout {
    flex-direction: column !important;
    gap: var(--space-lg) !important;
  }
  .sp-checkout-billing,
  .sp-checkout-order-review {
    width: 100% !important;
    flex-shrink: 1 !important;
  }

  /* Ensure all inputs/selects take full width */
  .wc-block-components-text-input input,
  .wc-block-components-text-input textarea,
  .wc-block-components-combobox .components-combobox-control,
  .wc-block-components-combobox input,
  .wc-block-components-country-input input,
  .wc-block-components-state-input input,
  .wc-block-components-state-input select,
  .wc-block-checkout input[type="text"],
  .wc-block-checkout input[type="email"],
  .wc-block-checkout input[type="tel"],
  .wc-block-checkout select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Order summary panel — full width */
  .wc-block-components-order-summary,
  .wc-block-components-totals-wrapper,
  .wc-block-checkout__sidebar {
    width: 100% !important;
  }

  /* Payment options — full width & readable */
  .wc-block-components-radio-control,
  .wc-block-components-payment-method-label {
    width: 100% !important;
  }

  /* Place order button — full width on mobile */
  .wc-block-components-checkout-place-order-button,
  .wc-block-checkout__actions button,
  #place_order {
    width: 100% !important;
    padding: 16px !important;
    font-size: 15px !important;
  }

  /* Checkout heading size adjustments */
  .sp-checkout-billing h2,
  .sp-checkout-order-review h2,
  .wc-block-checkout h2,
  .wc-block-components-checkout-step__heading {
    font-size: 20px !important;
  }

  /* Reduce padding on checkout container */
  .wc-block-checkout,
  .wp-block-woocommerce-checkout {
    padding: 0 12px !important;
  }

  /* Contact info + shipping sections — full width */
  .wc-block-checkout__contact-fields,
  .wc-block-checkout__billing-fields,
  .wc-block-checkout__shipping-fields,
  .wc-block-checkout__payment-method {
    width: 100% !important;
  }

  /* Checkout steps layout — stack them */
  .wc-block-checkout__form,
  .wc-block-checkout__main {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fix the two-column checkout grid from WooCommerce Blocks */
  .wp-block-woocommerce-checkout .wc-block-checkout__main,
  .wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  .wp-block-woocommerce-checkout {
    flex-wrap: wrap !important;
  }
  .sp-checkout-page .sp-page-title {
    font-size: 32px !important;
  }
  .sp-checkout-section, .sp-checkout-summary-inner {
    padding: 24px !important;
  }
  .sp-checkout-steps {
    overflow-x: auto;
    padding-bottom: 15px;
    justify-content: flex-start !important;
  }
  .sp-step-label {
    white-space: nowrap;
  }
}

/* Single Product Qty & Add to Cart Styling */
.sp-product-qty-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  align-items: center;
}
.sp-product-qty-select {
  display: flex;
  align-items: center;
  border: 1px solid var(--sp-border);
  border-radius: var(--border-radius-pill);
  overflow: hidden;
  background: transparent;
}
.sp-product-qty-row .sp-ajax-add-to-cart {
  flex: 1;
}

@media (max-width: 576px) {
  .sp-product-qty-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }
  .sp-product-qty-select {
    width: 100%;
    justify-content: space-between;
  }
  .sp-product-qty-select button {
    flex: 1;
  }
  .sp-product-qty-row .sp-ajax-add-to-cart {
    width: 100%;
  }
}

/* WooCommerce Breadcrumb Responsive Fix */
.woocommerce-breadcrumb {
  font-size: 11px !important;
  color: var(--sp-text-muted) !important;
  margin-bottom: var(--space-md) !important;
  line-height: 1.6 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: normal !important;
  word-break: break-word !important;
  padding: 0 !important;
}
.woocommerce-breadcrumb a {
  color: var(--sp-text-muted) !important;
  text-decoration: none !important;
}
.woocommerce-breadcrumb a:hover {
  color: var(--sp-accent) !important;
}

/* Single Product Page Mobile Responsiveness Fix */
.sp-single-product-grid > div {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {
  .sp-single-product-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
}