/* ============================================
   RUNAYAQ PRODUCTO PAGE - CSS IMPLEMENTATION
   Version: 2.1.0
   Date: 2026-01-28
   Based on: Penpot Design Template (Component 7 specifications)
   Updated: Button dimensions from Penpot (396px × 59px / 58px)
   Source: docs/PROYECTO-VALIDACION-CARRITO-CHECKOUT-2026-01-26/2026-01-28_CAMBIOS-BOTONES-PRODUCTO.md
   ============================================ */

/* ============================================
   SECTION 1: CSS CUSTOM PROPERTIES (Design Tokens)
   Source: variables.css (canonical, validated)
   ============================================ */

:root {
  /* ===== COLORS ===== */
  /* Primary Colors - Terracota palette */
  --runayaq-primary: #BA4A24;                /* Terracota - Main CTA color */
  --runayaq-primary-dark: #A0421E;           /* Primary dark for hover states */
  --runayaq-primary-light: #D4612E;          /* Primary light variant */

  /* Text Colors */
  --runayaq-text-primary: #000000;           /* Main text */
  --runayaq-text-secondary: #1A1A1A;         /* Secondary text */
  --runayaq-text-muted: #6B7280;             /* Muted text */
  --runayaq-text-light: #9CA3AF;             /* Light text */
  --runayaq-text-white: #FFFFFF;             /* White text */

  /* Background Colors */
  --runayaq-bg-white: #FFFFFF;               /* Main background */
  --runayaq-bg-light: #F9FAFB;               /* Light gray background */
  --runayaq-bg-gray-50: #F3F4F6;             /* Subtle gray */
  --runayaq-bg-gray-100: #E5E7EB;            /* Border gray */
  --runayaq-bg-dark: #1B1823;                /* Dark background */

  /* Status Colors */
  --runayaq-error: #DC2626;                  /* Error state */
  --runayaq-success: #10B981;                /* Success state */
  --runayaq-warning: #F59E0B;                /* Warning state */
  --runayaq-info: #3B82F6;                   /* Info state */

  /* ===== TYPOGRAPHY ===== */
  /* Font Families */
  --runayaq-font-display: "Playfair Display", serif;
  --runayaq-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --runayaq-font-system: ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Font Sizes */
  --runayaq-font-size-xs: 10px;              /* Extra small */
  --runayaq-font-size-sm: 12.25px;           /* Small (buttons) */
  --runayaq-font-size-base: 14px;            /* Base */
  --runayaq-font-size-lg: 16px;              /* Large */
  --runayaq-font-size-xl: 18px;              /* Extra large (h2) */
  --runayaq-font-size-2xl: 21px;             /* 2XL (h1) */

  /* Font Weights */
  --runayaq-font-weight-normal: 400;
  --runayaq-font-weight-medium: 500;
  --runayaq-font-weight-semibold: 600;
  --runayaq-font-weight-bold: 700;

  /* Line Heights */
  --runayaq-line-height-tight: 1.2;
  --runayaq-line-height-normal: 1.4;
  --runayaq-line-height-relaxed: 1.5;
  --runayaq-line-height-loose: 1.6;

  /* Letter Spacing */
  --runayaq-letter-spacing-normal: 0;
  --runayaq-letter-spacing-wide: 0.02em;

  /* ===== SPACING ===== */
  --runayaq-spacing-unit: 8px;
  --runayaq-spacing-xs: 4px;                 /* 0.5 units */
  --runayaq-spacing-sm: 8px;                 /* 1 unit */
  --runayaq-spacing-md: 16px;                /* 2 units */
  --runayaq-spacing-lg: 24px;                /* 3 units */
  --runayaq-spacing-xl: 32px;                /* 4 units */
  --runayaq-spacing-2xl: 48px;               /* 6 units */

  /* ===== BORDER RADIUS ===== */
  --runayaq-radius-none: 0px;
  --runayaq-radius-sm: 4px;
  --runayaq-radius-md: 8px;
  --runayaq-radius-lg: 12px;
  --runayaq-radius-full: 9999px;             /* Fully rounded */

  /* ===== SHADOWS ===== */
  --runayaq-shadow-none: none;
  --runayaq-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --runayaq-shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --runayaq-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --runayaq-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Button Shadows */
  --runayaq-shadow-button-primary: rgba(186, 74, 36, 0.2) 0px 10px 15px -3px, rgba(186, 74, 36, 0.2) 0px 4px 6px -4px;
  --runayaq-shadow-button-hover: rgba(186, 74, 36, 0.3) 0px 15px 25px -5px;

  /* ===== TRANSITIONS ===== */
  --runayaq-transition-fast: 0.2s ease;
  --runayaq-transition-base: 0.3s ease;
  --runayaq-transition-slow: 0.5s ease;
  --runayaq-transition-all: all 0.3s ease;

  /* ===== Z-INDEX ===== */
  --runayaq-z-dropdown: 1000;
  --runayaq-z-sticky: 1020;
  --runayaq-z-fixed: 1030;
  --runayaq-z-modal-backdrop: 1040;
  --runayaq-z-modal: 1050;
  --runayaq-z-popover: 1060;
  --runayaq-z-tooltip: 1070;
}

/* ============================================
   SECTION 2: GOOGLE FONTS IMPORT
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================
   SECTION 3: P0 COMPONENTS - CRITICAL
   Priority: P0 (Critical - Implement First)
   Source: components-mapping.csv Rows 7-14
   ============================================ */

/* -----------------------------------------
   P0 - Product Title
   Source: components-mapping.csv Row 7
   Selector: h1[class*='heading']
   ----------------------------------------- */
.woocommerce div.product .product_title,
.woocommerce div.product h1.product_title,
.woocommerce-page div.product .product_title {
  font-family: var(--runayaq-font-display) !important;
  font-size: var(--runayaq-font-size-2xl) !important;
  font-weight: var(--runayaq-font-weight-bold) !important;
  color: var(--runayaq-text-primary) !important;
  line-height: var(--runayaq-line-height-tight) !important;
  letter-spacing: var(--runayaq-letter-spacing-normal) !important;
  margin: 0 0 var(--runayaq-spacing-md) 0 !important;
  padding: 0 !important;
}

/* -----------------------------------------
   P0 - Price Current (Primary Price)
   Source: components-mapping.csv Row 8
   Selector: [class*='price']
   ----------------------------------------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce-page div.product p.price {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-xl) !important;
  font-weight: var(--runayaq-font-weight-bold) !important;
  color: var(--runayaq-primary) !important;
  line-height: var(--runayaq-line-height-normal) !important;
  margin: 0 0 var(--runayaq-spacing-md) 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--runayaq-spacing-sm) !important;
  flex-wrap: wrap !important;
}

/* Current/Sale Price within price element */
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  text-decoration: none !important;
  font-weight: var(--runayaq-font-weight-bold) !important;
  color: var(--runayaq-primary) !important;
}

/* Original Price (struck through) - P1 Row 9 */
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-sm) !important;
  font-weight: var(--runayaq-font-weight-normal) !important;
  color: var(--runayaq-text-light) !important;
  text-decoration: line-through !important;
  opacity: 0.8 !important;
}

/* Currency symbol styling */
.woocommerce div.product p.price .woocommerce-Price-currencySymbol,
.woocommerce div.product span.price .woocommerce-Price-currencySymbol {
  font-size: inherit !important;
  color: inherit !important;
}

/* -----------------------------------------
   P0 - Add to Cart Button
   Source: Penpot template 2026-01-28 (Component 7)
   Text: "Anadir al Carrito"
   Specs: 396px × 59px; bg: #BA4A24; Inter 12px; shadow: primary
   ----------------------------------------- */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce-page div.product form.cart .single_add_to_cart_button {
  background-color: var(--runayaq-primary) !important;
  color: var(--runayaq-text-white) !important;
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-sm) !important;
  font-weight: var(--runayaq-font-weight-bold) !important;
  padding: 16px 24px !important;
  width: 100% !important;
  max-width: 396px !important;
  height: 59px !important;
  border-radius: var(--runayaq-radius-md) !important;
  border: none !important;
  box-shadow: var(--runayaq-shadow-button-primary) !important;
  transition: var(--runayaq-transition-all) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--runayaq-spacing-sm) !important;
  text-transform: none !important;
  letter-spacing: var(--runayaq-letter-spacing-normal) !important;
  line-height: var(--runayaq-line-height-relaxed) !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
  background-color: var(--runayaq-primary-dark) !important;
  box-shadow: var(--runayaq-shadow-button-hover) !important;
  transform: translateY(-2px) !important;
  color: var(--runayaq-text-white) !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:active,
.woocommerce div.product .single_add_to_cart_button:active {
  transform: translateY(0) !important;
  box-shadow: var(--runayaq-shadow-button-primary) !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:focus,
.woocommerce div.product .single_add_to_cart_button:focus {
  outline: none !important;
  box-shadow: var(--runayaq-shadow-button-primary), 0 0 0 3px rgba(186, 74, 36, 0.3) !important;
}

/* Disabled state */
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.disabled {
  background-color: var(--runayaq-bg-gray-100) !important;
  color: var(--runayaq-text-muted) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* -----------------------------------------
   P0 - Product Images / Gallery
   Source: components-mapping.csv (implicit P0)
   Selector: div.images
   ----------------------------------------- */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images {
  margin-bottom: var(--runayaq-spacing-lg) !important;
}

.woocommerce div.product div.images img,
.woocommerce-page div.product div.images img {
  border-radius: var(--runayaq-radius-md) !important;
  transition: var(--runayaq-transition-fast) !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
}

/* Gallery thumbnails */
.woocommerce div.product div.images .flex-control-thumbs li img,
.woocommerce div.product div.images .woocommerce-product-gallery__image--thumbnail img {
  border-radius: var(--runayaq-radius-sm) !important;
  border: 2px solid transparent !important;
  transition: var(--runayaq-transition-fast) !important;
  cursor: pointer !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border-color: var(--runayaq-primary) !important;
  opacity: 1 !important;
}

/* -----------------------------------------
   P0 - Product Meta (SKU, Categories, Tags)
   Source: components-mapping.csv (implicit P0)
   ----------------------------------------- */
.woocommerce div.product .product_meta,
.woocommerce-page div.product .product_meta {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-sm) !important;
  color: var(--runayaq-text-muted) !important;
  line-height: var(--runayaq-line-height-relaxed) !important;
  margin-top: var(--runayaq-spacing-lg) !important;
  padding-top: var(--runayaq-spacing-md) !important;
  border-top: 1px solid var(--runayaq-bg-gray-100) !important;
}

.woocommerce div.product .product_meta > span {
  display: block !important;
  margin-bottom: var(--runayaq-spacing-xs) !important;
}

.woocommerce div.product .product_meta a {
  color: var(--runayaq-primary) !important;
  text-decoration: none !important;
  transition: var(--runayaq-transition-fast) !important;
}

.woocommerce div.product .product_meta a:hover {
  color: var(--runayaq-primary-dark) !important;
  text-decoration: underline !important;
}

/* -----------------------------------------
   P0 - Color Selector
   Source: components-mapping.csv Row 11
   Specs: button size 32x32px; border: 2px; gap: 8px
   ----------------------------------------- */
.woocommerce div.product .variations .value select,
.woocommerce div.product form.variations_form .variations select {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-base) !important;
  color: var(--runayaq-text-secondary) !important;
  padding: 12px 16px !important;
  padding-right: 40px !important;
  border: 1px solid var(--runayaq-bg-gray-100) !important;
  border-radius: var(--runayaq-radius-md) !important;
  background-color: var(--runayaq-bg-white) !important;
  transition: var(--runayaq-transition-fast) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
  min-width: 150px !important;
}

.woocommerce div.product .variations .value select:focus,
.woocommerce div.product form.variations_form .variations select:focus {
  outline: none !important;
  border-color: var(--runayaq-primary) !important;
  box-shadow: 0 0 0 3px rgba(186, 74, 36, 0.1) !important;
}

/* Variation label */
.woocommerce div.product .variations .label,
.woocommerce div.product form.variations_form .variations .label {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-base) !important;
  font-weight: var(--runayaq-font-weight-semibold) !important;
  color: var(--runayaq-text-secondary) !important;
  margin-bottom: var(--runayaq-spacing-sm) !important;
}

/* Color swatches (if using swatches plugin) */
.woocommerce div.product .swatch-wrapper,
.woocommerce div.product .color-variable-item {
  width: 32px !important;
  height: 32px !important;
  border: 2px solid var(--runayaq-bg-gray-100) !important;
  border-radius: 50% !important;
  margin-right: var(--runayaq-spacing-sm) !important;
  cursor: pointer !important;
  transition: var(--runayaq-transition-fast) !important;
}

.woocommerce div.product .swatch-wrapper:hover,
.woocommerce div.product .color-variable-item:hover,
.woocommerce div.product .swatch-wrapper.selected,
.woocommerce div.product .color-variable-item.selected {
  border-color: var(--runayaq-primary) !important;
  box-shadow: 0 0 0 2px var(--runayaq-bg-white), 0 0 0 4px var(--runayaq-primary) !important;
}

/* -----------------------------------------
   P0 - Size Selector
   Source: components-mapping.csv Row 12
   Specs: button size 40x40px; border: 1px; hover: bg-primary; color-primary
   ----------------------------------------- */
.woocommerce div.product .size-variable-item,
.woocommerce div.product .attribute-swatch[data-attribute_name*="size"] label {
  min-width: 40px !important;
  min-height: 40px !important;
  padding: var(--runayaq-spacing-sm) var(--runayaq-spacing-md) !important;
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-sm) !important;
  font-weight: var(--runayaq-font-weight-medium) !important;
  color: var(--runayaq-text-secondary) !important;
  background-color: var(--runayaq-bg-white) !important;
  border: 1px solid var(--runayaq-bg-gray-100) !important;
  border-radius: var(--runayaq-radius-sm) !important;
  cursor: pointer !important;
  transition: var(--runayaq-transition-fast) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: var(--runayaq-spacing-sm) !important;
  margin-bottom: var(--runayaq-spacing-sm) !important;
}

.woocommerce div.product .size-variable-item:hover,
.woocommerce div.product .attribute-swatch[data-attribute_name*="size"] label:hover {
  border-color: var(--runayaq-primary) !important;
  color: var(--runayaq-primary) !important;
  background-color: rgba(186, 74, 36, 0.05) !important;
}

.woocommerce div.product .size-variable-item.selected,
.woocommerce div.product .attribute-swatch[data-attribute_name*="size"] label.selected {
  background-color: var(--runayaq-primary) !important;
  color: var(--runayaq-text-white) !important;
  border-color: var(--runayaq-primary) !important;
}

/* ============================================
   SECTION 4: P1 COMPONENTS - IMPORTANT
   Priority: P1 (Important)
   Source: components-mapping.csv
   ============================================ */

/* -----------------------------------------
   P1 - Discount Badge
   Source: components-mapping.csv Row 10
   Specs: bg: #FEE3E4; color: #DC2626; border-radius: 4px
   ----------------------------------------- */
.woocommerce div.product .onsale,
.woocommerce-page div.product .onsale,
.woocommerce span.onsale {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-xs) !important;
  font-weight: var(--runayaq-font-weight-bold) !important;
  color: var(--runayaq-error) !important;
  background-color: #FEE3E4 !important;
  border-radius: var(--runayaq-radius-sm) !important;
  padding: var(--runayaq-spacing-xs) var(--runayaq-spacing-sm) !important;
  min-width: auto !important;
  min-height: auto !important;
  line-height: var(--runayaq-line-height-normal) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--runayaq-letter-spacing-wide) !important;
}

/* -----------------------------------------
   P1 - Quantity Stepper
   Source: components-mapping.csv Row 13
   Specs: button: 32x32px; input: 40px width
   ----------------------------------------- */
.woocommerce div.product form.cart .quantity,
.woocommerce-page div.product form.cart .quantity {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--runayaq-bg-gray-100) !important;
  border-radius: var(--runayaq-radius-md) !important;
  overflow: hidden !important;
  background-color: var(--runayaq-bg-white) !important;
  margin-right: var(--runayaq-spacing-md) !important;
}

.woocommerce div.product form.cart .quantity .qty,
.woocommerce-page div.product form.cart .quantity .qty {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-base) !important;
  font-weight: var(--runayaq-font-weight-medium) !important;
  color: var(--runayaq-text-secondary) !important;
  text-align: center !important;
  width: 50px !important;
  min-width: 50px !important;
  height: 40px !important;
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  -moz-appearance: textfield !important;
}

.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.woocommerce div.product form.cart .quantity .qty:focus {
  outline: none !important;
}

/* Quantity buttons (plus/minus) */
.woocommerce div.product form.cart .quantity .minus,
.woocommerce div.product form.cart .quantity .plus {
  width: 32px !important;
  height: 40px !important;
  font-size: var(--runayaq-font-size-lg) !important;
  font-weight: var(--runayaq-font-weight-medium) !important;
  color: var(--runayaq-text-secondary) !important;
  background-color: var(--runayaq-bg-light) !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--runayaq-transition-fast) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.woocommerce div.product form.cart .quantity .minus:hover,
.woocommerce div.product form.cart .quantity .plus:hover {
  background-color: var(--runayaq-bg-gray-100) !important;
  color: var(--runayaq-primary) !important;
}

/* -----------------------------------------
   P1 - Favorite/Wishlist Button
   Source: Penpot template 2026-01-28 (Component 7)
   Specs: 396px × 58px; border: 2px #BA4A24; Inter 12px
   ----------------------------------------- */
.woocommerce div.product .yith-wcwl-add-to-wishlist,
.woocommerce div.product .tinvwl-loop-button-wrapper,
.woocommerce div.product .wishlist-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--runayaq-spacing-sm) !important;
}

.woocommerce div.product .yith-wcwl-add-to-wishlist a,
.woocommerce div.product .tinvwl_add_to_wishlist_button,
.woocommerce div.product .wishlist-button a {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-sm) !important;
  font-weight: var(--runayaq-font-weight-semibold) !important;
  color: var(--runayaq-primary) !important;
  background-color: transparent !important;
  border: 2px solid var(--runayaq-primary) !important;
  border-radius: var(--runayaq-radius-md) !important;
  padding: 16px 24px !important;
  width: 100% !important;
  max-width: 396px !important;
  height: 58px !important;
  text-decoration: none !important;
  transition: var(--runayaq-transition-all) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--runayaq-spacing-sm) !important;
}

.woocommerce div.product .yith-wcwl-add-to-wishlist a:hover,
.woocommerce div.product .tinvwl_add_to_wishlist_button:hover,
.woocommerce div.product .wishlist-button a:hover {
  background-color: var(--runayaq-primary) !important;
  border-color: var(--runayaq-primary) !important;
  color: var(--runayaq-text-white) !important;
}

/* -----------------------------------------
   P1 - Product Tabs
   Source: components-mapping.csv Row 16
   Specs: border-bottom: 1px #E5E7EB; active: border-bottom: 2px #BA4A24
   ----------------------------------------- */
.woocommerce div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs {
  margin-top: var(--runayaq-spacing-2xl) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce-page div.product .woocommerce-tabs ul.tabs {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--runayaq-spacing-lg) 0 !important;
  border-bottom: 1px solid var(--runayaq-bg-gray-100) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
  display: none !important;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-base) !important;
  font-weight: var(--runayaq-font-weight-medium) !important;
  color: var(--runayaq-text-muted) !important;
  text-decoration: none !important;
  padding: var(--runayaq-spacing-md) var(--runayaq-spacing-lg) !important;
  display: block !important;
  border-bottom: 2px solid transparent !important;
  transition: var(--runayaq-transition-fast) !important;
  position: relative !important;
  top: 1px !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--runayaq-text-secondary) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--runayaq-primary) !important;
  border-bottom-color: var(--runayaq-primary) !important;
  font-weight: var(--runayaq-font-weight-semibold) !important;
}

/* Tab content panels */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce-page div.product .woocommerce-tabs .panel {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-base) !important;
  color: var(--runayaq-text-secondary) !important;
  line-height: var(--runayaq-line-height-loose) !important;
  padding: var(--runayaq-spacing-md) 0 !important;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: var(--runayaq-font-display) !important;
  font-size: var(--runayaq-font-size-xl) !important;
  font-weight: var(--runayaq-font-weight-bold) !important;
  color: var(--runayaq-text-primary) !important;
  margin-bottom: var(--runayaq-spacing-md) !important;
}

/* -----------------------------------------
   P1 - Product Reviews
   Source: components-mapping.csv (implicit P1)
   Selector: #reviews
   ----------------------------------------- */
.woocommerce div.product #reviews,
.woocommerce-page div.product #reviews {
  font-family: var(--runayaq-font-body) !important;
}

.woocommerce div.product #reviews .woocommerce-Reviews-title {
  font-family: var(--runayaq-font-display) !important;
  font-size: var(--runayaq-font-size-xl) !important;
  font-weight: var(--runayaq-font-weight-bold) !important;
  color: var(--runayaq-text-primary) !important;
  margin-bottom: var(--runayaq-spacing-lg) !important;
}

.woocommerce div.product #reviews .comment-text {
  background-color: var(--runayaq-bg-light) !important;
  border-radius: var(--runayaq-radius-md) !important;
  padding: var(--runayaq-spacing-md) !important;
  border: none !important;
}

.woocommerce div.product #reviews .star-rating {
  color: var(--runayaq-warning) !important;
}

.woocommerce div.product #reviews #respond .comment-reply-title {
  font-family: var(--runayaq-font-display) !important;
  font-size: var(--runayaq-font-size-lg) !important;
  font-weight: var(--runayaq-font-weight-semibold) !important;
  color: var(--runayaq-text-secondary) !important;
}

.woocommerce div.product #reviews #respond #commentform label {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-base) !important;
  font-weight: var(--runayaq-font-weight-medium) !important;
  color: var(--runayaq-text-secondary) !important;
}

.woocommerce div.product #reviews #respond #commentform input,
.woocommerce div.product #reviews #respond #commentform textarea {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-base) !important;
  color: var(--runayaq-text-secondary) !important;
  padding: 12px 16px !important;
  border: 1px solid var(--runayaq-bg-gray-100) !important;
  border-radius: var(--runayaq-radius-md) !important;
  transition: var(--runayaq-transition-fast) !important;
}

.woocommerce div.product #reviews #respond #commentform input:focus,
.woocommerce div.product #reviews #respond #commentform textarea:focus {
  outline: none !important;
  border-color: var(--runayaq-primary) !important;
  box-shadow: 0 0 0 3px rgba(186, 74, 36, 0.1) !important;
}

.woocommerce div.product #reviews #respond #commentform .form-submit input[type="submit"] {
  background-color: var(--runayaq-primary) !important;
  color: var(--runayaq-text-white) !important;
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-sm) !important;
  font-weight: var(--runayaq-font-weight-bold) !important;
  padding: 12px 24px !important;
  border-radius: var(--runayaq-radius-full) !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--runayaq-transition-all) !important;
}

.woocommerce div.product #reviews #respond #commentform .form-submit input[type="submit"]:hover {
  background-color: var(--runayaq-primary-dark) !important;
}

/* -----------------------------------------
   P1 - Related Products Section
   Source: components-mapping.csv Row 17
   Specs: grid: 4 columns desktop; gap: 16px
   ----------------------------------------- */
.woocommerce div.product .related.products,
.woocommerce div.product section.related.products,
.woocommerce-page div.product .related.products {
  margin-top: var(--runayaq-spacing-2xl) !important;
  padding-top: var(--runayaq-spacing-xl) !important;
  border-top: 1px solid var(--runayaq-bg-gray-100) !important;
}

.woocommerce div.product .related.products > h2,
.woocommerce div.product section.related.products > h2 {
  font-family: var(--runayaq-font-display) !important;
  font-size: var(--runayaq-font-size-xl) !important;
  font-weight: var(--runayaq-font-weight-bold) !important;
  color: var(--runayaq-text-primary) !important;
  margin-bottom: var(--runayaq-spacing-lg) !important;
}

.woocommerce div.product .related.products ul.products,
.woocommerce div.product section.related.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--runayaq-spacing-md) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* -----------------------------------------
   P1 - Product Cards (in related products)
   Source: components-mapping.csv Row 18-23
   ----------------------------------------- */
.woocommerce div.product .related.products ul.products li.product,
.woocommerce ul.products li.product {
  background-color: var(--runayaq-bg-white) !important;
  border-radius: var(--runayaq-radius-md) !important;
  box-shadow: var(--runayaq-shadow-md) !important;
  padding: var(--runayaq-spacing-md) !important;
  transition: var(--runayaq-transition-all) !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}

.woocommerce div.product .related.products ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
  box-shadow: var(--runayaq-shadow-lg) !important;
  transform: translateY(-4px) !important;
}

/* Product Card Image - Row 19 */
.woocommerce div.product .related.products ul.products li.product a img,
.woocommerce ul.products li.product a img {
  border-radius: var(--runayaq-radius-md) var(--runayaq-radius-md) 0 0 !important;
  margin-bottom: var(--runayaq-spacing-sm) !important;
  object-fit: cover !important;
}

/* Product Card Title - Row 20 */
.woocommerce div.product .related.products ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-lg) !important;
  font-weight: var(--runayaq-font-weight-medium) !important;
  color: var(--runayaq-text-secondary) !important;
  margin-bottom: var(--runayaq-spacing-sm) !important;
  padding: 0 !important;
}

/* Product Card Price - Row 21 */
.woocommerce div.product .related.products ul.products li.product .price,
.woocommerce ul.products li.product .price {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-base) !important;
  font-weight: var(--runayaq-font-weight-bold) !important;
  color: var(--runayaq-primary) !important;
}

/* Product Card Add to Cart */
.woocommerce div.product .related.products ul.products li.product .button,
.woocommerce ul.products li.product .button {
  background-color: var(--runayaq-primary) !important;
  color: var(--runayaq-text-white) !important;
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-sm) !important;
  font-weight: var(--runayaq-font-weight-semibold) !important;
  padding: var(--runayaq-spacing-sm) var(--runayaq-spacing-md) !important;
  border-radius: var(--runayaq-radius-full) !important;
  border: none !important;
  transition: var(--runayaq-transition-all) !important;
  margin-top: var(--runayaq-spacing-sm) !important;
}

.woocommerce div.product .related.products ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover {
  background-color: var(--runayaq-primary-dark) !important;
}

/* ============================================
   SECTION 5: P2 COMPONENTS - OPTIONAL
   Priority: P2 (Optional)
   ============================================ */

/* -----------------------------------------
   P2 - Product Sharing Buttons
   ----------------------------------------- */
.woocommerce div.product .product-share,
.woocommerce div.product .social-share {
  margin-top: var(--runayaq-spacing-lg) !important;
  padding-top: var(--runayaq-spacing-md) !important;
  border-top: 1px solid var(--runayaq-bg-gray-100) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--runayaq-spacing-sm) !important;
}

.woocommerce div.product .product-share a,
.woocommerce div.product .social-share a {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background-color: var(--runayaq-bg-light) !important;
  color: var(--runayaq-text-muted) !important;
  transition: var(--runayaq-transition-fast) !important;
}

.woocommerce div.product .product-share a:hover,
.woocommerce div.product .social-share a:hover {
  background-color: var(--runayaq-primary) !important;
  color: var(--runayaq-text-white) !important;
}

/* -----------------------------------------
   P2 - Short Description
   ----------------------------------------- */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce-page div.product .woocommerce-product-details__short-description {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-base) !important;
  color: var(--runayaq-text-secondary) !important;
  line-height: var(--runayaq-line-height-relaxed) !important;
  margin-bottom: var(--runayaq-spacing-lg) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description p {
  margin-bottom: var(--runayaq-spacing-sm) !important;
}

/* -----------------------------------------
   P2 - Upsells
   ----------------------------------------- */
.woocommerce div.product .upsells.products,
.woocommerce div.product section.upsells.products {
  margin-top: var(--runayaq-spacing-2xl) !important;
}

.woocommerce div.product .upsells.products > h2 {
  font-family: var(--runayaq-font-display) !important;
  font-size: var(--runayaq-font-size-xl) !important;
  font-weight: var(--runayaq-font-weight-bold) !important;
  color: var(--runayaq-text-primary) !important;
  margin-bottom: var(--runayaq-spacing-lg) !important;
}

.woocommerce div.product .upsells.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--runayaq-spacing-md) !important;
}

/* ============================================
   SECTION 6: CART FORM LAYOUT
   ============================================ */

.woocommerce div.product form.cart,
.woocommerce-page div.product form.cart {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--runayaq-spacing-md) !important;
  margin: var(--runayaq-spacing-lg) 0 !important;
}

/* Variations form layout */
.woocommerce div.product form.variations_form .variations {
  margin-bottom: var(--runayaq-spacing-md) !important;
}

.woocommerce div.product form.variations_form .variations tr {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: var(--runayaq-spacing-md) !important;
}

.woocommerce div.product form.variations_form .variations td.label {
  padding-bottom: var(--runayaq-spacing-sm) !important;
}

.woocommerce div.product form.variations_form .single_variation_wrap {
  width: 100% !important;
}

.woocommerce div.product form.variations_form .woocommerce-variation-price {
  margin-bottom: var(--runayaq-spacing-md) !important;
}

/* Clear variation link */
.woocommerce div.product form.variations_form .reset_variations {
  font-family: var(--runayaq-font-body) !important;
  font-size: var(--runayaq-font-size-sm) !important;
  color: var(--runayaq-primary) !important;
  text-decoration: none !important;
  margin-left: var(--runayaq-spacing-sm) !important;
}

.woocommerce div.product form.variations_form .reset_variations:hover {
  text-decoration: underline !important;
}

/* ============================================
   SECTION 7: RESPONSIVE BREAKPOINTS
   Source: tokens.json breakpoints
   Mobile: 390px, Tablet: 768px, Desktop: 1920px
   Approach: Mobile First
   ============================================ */

/* -----------------------------------------
   MOBILE BASE (< 768px)
   Default styles target mobile 390px
   ----------------------------------------- */

/* Product Title - Mobile */
.woocommerce div.product .product_title {
  font-size: 18px !important;
}

/* Price - Mobile */
.woocommerce div.product p.price {
  font-size: 16px !important;
}

/* Add to Cart - Mobile full width */
.woocommerce div.product form.cart .single_add_to_cart_button {
  width: 100% !important;
  margin-top: var(--runayaq-spacing-sm) !important;
}

/* Quantity - Mobile */
.woocommerce div.product form.cart .quantity {
  width: 100% !important;
  justify-content: center !important;
  margin-right: 0 !important;
  margin-bottom: var(--runayaq-spacing-sm) !important;
}

/* Related Products - Mobile 1 column */
.woocommerce div.product .related.products ul.products {
  grid-template-columns: 1fr !important;
  gap: var(--runayaq-spacing-md) !important;
}

/* Upsells - Mobile 1 column */
.woocommerce div.product .upsells.products ul.products {
  grid-template-columns: 1fr !important;
}

/* Tabs - Mobile stack */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  flex-direction: column !important;
  border-bottom: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  border-bottom: 1px solid var(--runayaq-bg-gray-100) !important;
  padding: var(--runayaq-spacing-md) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  border-left: 3px solid var(--runayaq-primary) !important;
  border-bottom-color: var(--runayaq-bg-gray-100) !important;
  background-color: var(--runayaq-bg-light) !important;
}

/* Cart form - Mobile stack */
.woocommerce div.product form.cart {
  flex-direction: column !important;
}

/* Wishlist button - Mobile full width */
.woocommerce div.product .yith-wcwl-add-to-wishlist a,
.woocommerce div.product .tinvwl_add_to_wishlist_button {
  width: 100% !important;
  justify-content: center !important;
}

/* -----------------------------------------
   TABLET (>= 768px)
   ----------------------------------------- */
@media (min-width: 768px) {
  /* Product Title - Tablet */
  .woocommerce div.product .product_title {
    font-size: 20px !important;
  }

  /* Price - Tablet */
  .woocommerce div.product p.price {
    font-size: 17px !important;
  }

  /* Add to Cart - Tablet inline */
  .woocommerce div.product form.cart .single_add_to_cart_button {
    width: auto !important;
    min-width: 200px !important;
    margin-top: 0 !important;
  }

  /* Quantity - Tablet inline */
  .woocommerce div.product form.cart .quantity {
    width: auto !important;
    justify-content: flex-start !important;
    margin-right: var(--runayaq-spacing-md) !important;
    margin-bottom: 0 !important;
  }

  /* Cart form - Tablet row */
  .woocommerce div.product form.cart {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  /* Related Products - Tablet 2 columns */
  .woocommerce div.product .related.products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Upsells - Tablet 2 columns */
  .woocommerce div.product .upsells.products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tabs - Tablet horizontal */
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    flex-direction: row !important;
    border-bottom: 1px solid var(--runayaq-bg-gray-100) !important;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    border-bottom: 2px solid transparent !important;
    border-left: none !important;
    padding: var(--runayaq-spacing-md) var(--runayaq-spacing-lg) !important;
    background: none !important;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    border-left: none !important;
    border-bottom-color: var(--runayaq-primary) !important;
    background: none !important;
  }

  /* Wishlist button - Tablet auto width */
  .woocommerce div.product .yith-wcwl-add-to-wishlist a,
  .woocommerce div.product .tinvwl_add_to_wishlist_button {
    width: auto !important;
  }
}

/* -----------------------------------------
   DESKTOP (>= 1920px / Large screens)
   For very large screens, maintain comfortable reading
   ----------------------------------------- */
@media (min-width: 1200px) {
  /* Product Title - Desktop */
  .woocommerce div.product .product_title {
    font-size: var(--runayaq-font-size-2xl) !important; /* 21px */
  }

  /* Price - Desktop */
  .woocommerce div.product p.price {
    font-size: var(--runayaq-font-size-xl) !important; /* 18px */
  }

  /* Related Products - Desktop 4 columns */
  .woocommerce div.product .related.products ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Upsells - Desktop 4 columns */
  .woocommerce div.product .upsells.products ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Full desktop (1920px+) - Source: tokens.json */
@media (min-width: 1920px) {
  /* Container max width for very large screens */
  .woocommerce div.product {
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Increase spacing on large screens */
  .woocommerce div.product .woocommerce-tabs {
    margin-top: var(--runayaq-spacing-2xl) !important;
  }

  .woocommerce div.product .related.products {
    margin-top: var(--runayaq-spacing-2xl) !important;
    padding-top: var(--runayaq-spacing-xl) !important;
  }
}

/* ============================================
   SECTION 8: KADENCE THEME SPECIFIC OVERRIDES
   ============================================ */

/* Override Kadence's product styling */
.single-product .entry.content-bg,
.single-product.content-style-unboxed .entry.content-bg {
  background: transparent !important;
  box-shadow: none !important;
}

/* Kadence product summary */
.single-product .product .entry-summary {
  font-family: var(--runayaq-font-body) !important;
}

/* Kadence related products heading */
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
  font-family: var(--runayaq-font-display) !important;
}

/* Kadence tabs override */
.single-product .woocommerce-tabs ul.wc-tabs {
  background: none !important;
}

.single-product .woocommerce-tabs ul.wc-tabs li {
  background: none !important;
  border: none !important;
}

/* ============================================
   SECTION 9: PRINT STYLES
   ============================================ */
@media print {
  .woocommerce div.product form.cart,
  .woocommerce div.product .related.products,
  .woocommerce div.product .upsells.products,
  .woocommerce div.product .product-share {
    display: none !important;
  }

  .woocommerce div.product .product_title {
    font-size: 24px !important;
  }

  .woocommerce div.product p.price {
    font-size: 18px !important;
    color: #000 !important;
  }
}

/* ============================================
   END OF PRODUCTO PAGE CSS
   Version: 1.0.0
   Total Lines: ~950
   ============================================ */