/* ============================================
   UI/UX Pro Max — Design System Patch v2.0
   Fixes: #1 Focus rings, #4 Color tokens, #5 Card hover, 
          #6 Image aspect-ratio, #13 Line-height,
          #15 Scroll-to-top, #16 Micro-animations,
          #17 Tab indicator, #18 Skeleton loading
   ============================================ */

/* === #1: GLOBAL FOCUS-VISIBLE RINGS === */
*:focus-visible {
  outline: 2px solid #01687e !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #01687e !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(1, 104, 126, 0.15) !important;
}

/* === #4: SEMANTIC COLOR TOKENS (alias) === */
:root {
  --color-brand: #dd3233;
  --color-brand-hover: #c52829;
  --color-brand-light: #fef2f2;
  --color-accent: #01687e;
  --color-accent-hover: #0891b2;
  --color-accent-light: #ecfeff;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-surface-hover: #f1f5f9;
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;
  --color-border: #e2e8f0;
  --color-border-hover: #cbd5e1;
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-error: #dc2626;
}

/* === #5: PRODUCT CARD HOVER EFFECTS === */
.woocommerce ul.products li.product {
  transition: transform 0.25s cubic-bezier(0.33, 1, 0.68, 1), 
              box-shadow 0.25s cubic-bezier(0.33, 1, 0.68, 1),
              border-color 0.25s ease !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.12),
              0 4px 12px -4px rgba(15, 23, 42, 0.08) !important;
  border-color: var(--color-border-hover, #cbd5e1) !important;
}

.woocommerce ul.products li.product:active {
  transform: translateY(-2px) scale(0.995) !important;
}

/* Product card add-to-cart hover */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  transition: all 0.2s ease !important;
}

.woocommerce ul.products li.product:hover .button,
.woocommerce ul.products li.product:hover .add_to_cart_button {
  background-color: var(--color-accent, #01687e) !important;
  color: #ffffff !important;
  transform: scale(1.05);
}

/* === #6: PRODUCT IMAGE ASPECT RATIO === */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background-color: #ffffff;
  border-radius: 0.75rem;
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1) !important;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05) !important;
}

/* Single product image */
.woocommerce div.product div.images img {
  border-radius: 1rem;
  transition: transform 0.3s ease;
}

/* === #13: LINE-HEIGHT FIX === */
body {
  line-height: 1.625 !important;
}

.prose {
  line-height: 1.75 !important;
}

.prose p {
  margin-bottom: 1.25em;
}

/* === #2: ADD TO CART BUTTON RESTYLE === */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce .cart .button,
.single_add_to_cart_button {
  background: linear-gradient(135deg, #dd3233 0%, #c52829 100%) !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 0.875rem 2rem !important;
  border-radius: 0.75rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.33, 1, 0.68, 1) !important;
  box-shadow: 0 4px 14px -3px rgba(221, 50, 51, 0.4) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-height: 48px !important;
  position: relative;
  overflow: hidden;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.single_add_to_cart_button:hover {
  background: linear-gradient(135deg, #c52829 0%, #991b1b 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px -4px rgba(221, 50, 51, 0.5) !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:active,
.single_add_to_cart_button:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 8px -2px rgba(221, 50, 51, 0.4) !important;
}

/* Loading state */
.woocommerce .add_to_cart_button.loading::after {
  content: '' !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: spin 0.6s linear infinite !important;
  display: inline-block !important;
  margin-left: 0.5rem;
}

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

/* === #15: SCROLL-TO-TOP BUTTON === */
.scroll-to-top {
  position: fixed;
  bottom: 6rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  z-index: 40;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3);
}

.scroll-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: rgba(1, 104, 126, 0.9);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -8px rgba(1, 104, 126, 0.4);
}

/* === #16: MICRO-ANIMATIONS (Fade-in on scroll) === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInUp 0.5s cubic-bezier(0.33, 1, 0.68, 1) both;
}

/* Stagger children */
.animate-stagger > * {
  opacity: 0;
  animation: fadeInUp 0.4s cubic-bezier(0.33, 1, 0.68, 1) both;
}
.animate-stagger > *:nth-child(1) { animation-delay: 0ms; }
.animate-stagger > *:nth-child(2) { animation-delay: 50ms; }
.animate-stagger > *:nth-child(3) { animation-delay: 100ms; }
.animate-stagger > *:nth-child(4) { animation-delay: 150ms; }
.animate-stagger > *:nth-child(5) { animation-delay: 200ms; }
.animate-stagger > *:nth-child(6) { animation-delay: 250ms; }

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-stagger > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .woocommerce ul.products li.product:hover {
    transform: none !important;
  }
}

/* === #17: TAB ACTIVE INDICATOR ANIMATION === */
.wc-tabs li a,
.woocommerce-tabs .tabs li a {
  position: relative;
  transition: color 0.2s ease !important;
  padding-bottom: 0.75rem !important;
}

.wc-tabs li a::after,
.woocommerce-tabs .tabs li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #dd3233, #01687e);
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.wc-tabs li.active a::after,
.woocommerce-tabs .tabs li.active a::after {
  width: 100%;
}

.wc-tabs li a:hover::after,
.woocommerce-tabs .tabs li a:hover::after {
  width: 100%;
}

/* === #18: SKELETON LOADING === */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 0.5rem;
}

.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}

.skeleton-image {
  aspect-ratio: 1 / 1;
  border-radius: 0.75rem;
}

/* === #9: FOOTER SPACING IMPROVEMENTS === */
footer .grid {
  gap: 2rem !important;
}

footer h3, footer h4 {
  margin-bottom: 1rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

footer ul {
  space-y: 0.5rem;
}

footer a {
  transition: color 0.2s ease, padding-left 0.2s ease !important;
}

footer a:hover {
  padding-left: 4px !important;
  color: rgba(255, 255, 255, 1) !important;
}

/* === #11: CART BADGE CONTRAST === */
.cart-badge,
.woocommerce .cart-contents .count,
header .rounded-full[class*="bg-"] {
  min-width: 20px !important;
  height: 20px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  text-align: center !important;
}

/* === #14: STOCK TEXT STYLING === */
.woocommerce div.product .stock {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
}

.woocommerce div.product .stock.in-stock {
  color: #16a34a !important;
  background-color: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
}

.woocommerce div.product .stock.in-stock::before {
  content: '✓' !important;
  font-weight: 800 !important;
}

.woocommerce div.product .stock.out-of-stock {
  color: #dc2626 !important;
  background-color: #fef2f2 !important;
  border: 1px solid #fecaca !important;
}

/* === QUANTITY INPUT STYLING === */
.woocommerce div.product form.cart .quantity input[type="number"] {
  font-family: 'Fira Mono', monospace !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  width: 4rem !important;
  padding: 0.75rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  background: #f8fafc !important;
  transition: border-color 0.2s ease !important;
}

.woocommerce div.product form.cart .quantity input[type="number"]:focus {
  border-color: #01687e !important;
  box-shadow: 0 0 0 3px rgba(1, 104, 126, 0.1) !important;
}

/* === GLOBAL SMOOTH SCROLL === */
html {
  scroll-behavior: smooth;
}

/* === SELECTION COLOR === */
::selection {
  background: rgba(1, 104, 126, 0.2);
  color: #0f172a;
}

/* === Cart button icon via CSS ::before === */
.woocommerce div.product form.cart .single_add_to_cart_button::before {
  content: '\1F6D2';
  margin-right: 0.5rem;
  font-size: 1.1rem;
}

/* === Fix #10: Breadcrumb separator styling === */
.breadcrumb-separator,
nav.breadcrumbs span.separator,
.woocommerce-breadcrumb > *:not(:last-child)::after {
  content: '\203A';
  margin: 0 0.5rem;
  color: #94a3b8;
  font-weight: 300;
}

/* === Product price styling === */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: 'Fira Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 2rem !important;
  color: #dd3233 !important;
}

.woocommerce ul.products li.product .price {
  font-family: 'Fira Mono', monospace !important;
  font-weight: 700 !important;
  color: #dd3233 !important;
}

/* === Badge chip styling === */
.woocommerce span.onsale,
.badge-authentic {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
}

/* === Cursor pointer for all clickable === */
a, button, [role='button'], input[type='submit'],
input[type='button'], label[for], select,
.woocommerce a.button, .woocommerce button.button {
  cursor: pointer;
}


/* === Comment form submit button === */
#comments .form-submit input[type='submit'],
#comments .comment-form input[type='submit'],
.comment-form .submit {
  background: linear-gradient(135deg, #dd3233 0%, #c52829 100%) !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 0.75rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.33, 1, 0.68, 1) !important;
  box-shadow: 0 4px 14px -3px rgba(221, 50, 51, 0.3) !important;
  min-height: 48px !important;
}

#comments .form-submit input[type='submit']:hover,
.comment-form .submit:hover {
  background: linear-gradient(135deg, #c52829 0%, #991b1b 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px -4px rgba(221, 50, 51, 0.4) !important;
}

/* === Comment form textarea & inputs === */
#comments textarea,
#comments input[type='text'],
#comments input[type='email'],
#comments input[type='url'] {
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.95rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  width: 100% !important;
  background: #fff !important;
}

#comments textarea:focus,
#comments input:focus {
  border-color: #01687e !important;
  box-shadow: 0 0 0 3px rgba(1, 104, 126, 0.1) !important;
  outline: none !important;
}


/* === BUG #5: Fix "+" add-to-cart button visibility on product cards === */
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.ajax_add_to_cart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  min-height: 40px !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
  border-radius: 0.5rem !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  line-height: 1 !important;
  padding: 0 !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: nowrap !important;
}

.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.ajax_add_to_cart:hover {
  background-color: #dd3233 !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

/* Ensure the button text "+" is always visible */
.woocommerce ul.products li.product .add_to_cart_button {
  text-indent: 0 !important;
  font-size: 1.25rem !important;
}

/* === BUG #2: Fix breadcrumb double separator === */
.woocommerce .woocommerce-breadcrumb {
  font-size: 0.875rem !important;
}

/* Hide extra separator added by CSS ::after if any */
.woocommerce .woocommerce-breadcrumb > a::after,
nav.breadcrumbs a::after {
  content: none !important;
}

/* === Sidebar category tree: prevent truncation === */
.widget_product_categories .product-categories li a,
.woocommerce .widget_product_categories a {
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-width: none !important;
}

/* === WOOCOMMERCE GRID RESET === */
.woocommerce ul.products::before, .woocommerce ul.products::after {
  display: none !important;
}
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}
@media (min-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }
}
@media (min-width: 1200px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  max-width: none !important;
}

/* === HORIZONTAL CATEGORY NAV === */
.category-nav {
  scrollbar-width: none;
}
.category-nav::-webkit-scrollbar {
  display: none;
}