/*
Theme Name: JuiceLuxe
Theme URI: https://digitonica.net
Author: AL AMIN
Author URI: https://digitonica.net
Description: Luxury minimalist WooCommerce theme for JuiceLuxe, designed and developed by DIGITONICA.
Version: 2.4.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: juiceluxe
*/

:root {
  /* Typography Scale */
  --font-family-primary: Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 13px;
  --font-size-lg: 13.33px;
  --font-size-xl: 14px;
  --font-size-2xl: 16px;
  --font-size-3xl: 17px;
  --font-size-4xl: 18px;
  --font-size-hero: clamp(24px, 4vw, 36px);
  
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.2;
  --line-height-base: 1.35;
  --line-height-relaxed: 1.6;

  /* Color Palette */
  --color-surface-base: #000000;
  --color-surface-canvas: #FFFFFF;
  --color-surface-subtle: #F5F5F5;
  --color-surface-alt: #F2F2F0;
  --color-surface-disabled: #E0E0E0;
  
  --color-text-primary: #000000;
  --color-text-secondary: #121212;
  --color-text-tertiary: #FFFFFF;
  --color-text-inverse: #8C8C8C;
  --color-text-muted: #666666;
  
  --color-border-default: #8C8C8C;
  --color-border-subtle: #E8E5E0;
  --color-border-light: #F0EDE8;
  --color-border-focus: #000000;
  
  --color-accent-gold: #C5A059;
  --color-feedback-error: #D32F2F;
  --color-feedback-success: #2E7D32;

  /* Spacing Scale */
  --space-1: 3px;
  --space-2: 4px;
  --space-3: 5.5px;
  --space-4: 5.8px;
  --space-5: 7.5px;
  --space-6: 8px;
  --space-7: 10px;
  --space-8: 12px;
  --space-layout-sm: 16px;
  --space-layout-md: 24px;
  --space-layout-lg: 32px;
  --space-layout-xl: 48px;
  --space-layout-2xl: 64px;

  /* Container & Header Sizes */
  --container-width: 1440px;
  --container-padding: 24px;
  --header-height: 70px;
  --ticker-height: 32px;

  /* Radius & Shadows */
  --radius-none: 0px;
  --radius-xs: 9px;
  --radius-sm: 999px;
  --radius-card: 12px;
  
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-overlay: 0 10px 30px rgba(0, 0, 0, 0.2);

  /* Transitions */
  --motion-duration-instant: 100ms;
  --motion-duration-fast: 150ms;
  --motion-duration-smooth: 250ms;
  --motion-timing-default: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Two-Line Variation Pills */
.gtj-variant-pills-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.gtj-size-pill {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 54px !important;
  padding: 7px 14px !important;
  background-color: #F6F6F7 !important;
  border: 1px solid #EBEBED !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

.gtj-size-pill .gtj-pill-top {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  letter-spacing: 0.02em !important;
}

.gtj-size-pill .gtj-pill-sub {
  display: block !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #71717A !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

.gtj-size-pill:hover:not(.is-disabled) {
  border-color: #000000 !important;
  background-color: #ECECED !important;
}

.gtj-size-pill.is-active {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #FFFFFF !important;
}

.gtj-size-pill.is-active .gtj-pill-top {
  color: #FFFFFF !important;
}

.gtj-size-pill.is-active .gtj-pill-sub {
  color: #A1A1AA !important;
}

.gtj-size-pill.is-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  background-color: #FAFAFA !important;
  border-color: #EBEBED !important;
  text-decoration: line-through !important;
}

.gtj-custom-size-link {
  margin-top: 14px !important;
  margin-bottom: 6px !important;
}

.gtj-custom-size-link a {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #111111 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: color 0.15s ease !important;
}

.gtj-custom-size-link a:hover {
  color: #71717A !important;
}

/* Card Quick Size Tooltip Badge */
.gtj-quick {
  overflow: visible !important;
}

.gtj-quick__sizes {
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-top: 12px !important;
  margin-top: -12px !important;
}

.gtj-quick-var-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.gtj-quick-tip-badge {
  position: absolute !important;
  bottom: calc(100% + 5px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(4px) !important;
  background-color: #000000 !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
  z-index: 99 !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

.gtj-quick-tip-badge::after {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  margin-left: -3px !important;
  border-width: 3px 3px 0 3px !important;
  border-style: solid !important;
  border-color: #000000 transparent transparent transparent !important;
}

.gtj-quick-var-btn:hover .gtj-quick-tip-badge {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}