/* ==========================================================================
   CSS VARIABLES - Single Source of Truth
   All column widths and table dimensions defined here
   ========================================================================== */

:root {
  /* ========================================================================
     RESPONSIVE BREAKPOINTS - Standardized (Mobile-First)
     ======================================================================== */
  --breakpoint-mobile: 480px;   /* Mobile portrait */
  --breakpoint-tablet: 768px;  /* Tablet */
  --breakpoint-desktop: 1024px; /* Desktop */

  /* ========================================================================
     BRAND COLORS
     ======================================================================== */
  --sale-red: #b91c1c;
  --sale-red-dark: #7f1d1d;
  --stock-green: #059669;

  /* ========================================================================
     COLUMN WIDTHS - Product Column (Critical for preventing mid-word breaks)
     Using rem for accessibility (respects user font size preferences)
     ======================================================================== */
  /* Use flexible width with min-width to allow proper wrapping at all sizes */
  --column-product-min-width-mobile: 12rem; /* 192px at 16px base - Reasonable minimum to prevent word breaks */
  --column-product-width-mobile: auto; /* Flexible - adapts to viewport */
  --column-product-min-width-desktop: 18rem; /* 288px - fixed desktop width for product column to ensure parity across categories */
  --column-product-width-desktop: 18rem; /* Fixed desktop width */
  --column-product-max-width: 18rem; /* Fixed desktop width (prevent expansion) */

  /* ========================================================================
     COLUMN WIDTHS - Other Columns (rem units for accessibility)
     ======================================================================== */
  --column-size-width: 5.625rem; /* 90px */
  --column-size-min-width: 5rem; /* 80px */
  --column-size-max-width: 6.25rem; /* 100px */

  --column-price-per-100ml-width: 6.875rem; /* 110px */
  --column-price-per-100ml-min-width: 5rem; /* 80px */
  --column-price-per-100ml-header-width: auto;

  --column-stock-width: 9rem; /* 144px */
  --column-stock-min-width: 7.5rem; /* 120px */
  --column-stock-max-width: 10rem; /* 160px */
  --column-stock-width-dynamic: var(--column-stock-width);
  --column-stock-min-width-dynamic: var(--column-stock-min-width);
  --column-stock-max-width-dynamic: var(--column-stock-max-width);

  --column-price-width: 6.25rem; /* 100px */
  --column-price-min-width: 5rem; /* 80px */
  --column-price-max-width: 7.5rem; /* 120px */

  /* Fixed column widths for skeleton layout */
  --col-product-width-mobile: 8.125rem; /* 130px - Reduced to fit viewport */
  --col-product-width-desktop: 16rem;
  --col-price100-width-mobile: 4.5rem;
  --col-price100-width-desktop: 5.5rem;
  --col-size-width-mobile: 3.75rem;
  --col-size-width-desktop: 4.5rem;
  --col-stock-width-mobile: 5.25rem; /* 84px - Reduced to fit viewport */
  --col-stock-width-desktop: 7rem;
  --col-price-total-width-mobile: 5rem;
  --col-price-total-width-desktop: 6.25rem;
  --col-type-width-mobile: 5rem;
  --col-type-width-desktop: 6rem;
  --col-alcohol-width-mobile: 4rem;
  --col-alcohol-width-desktop: 5rem;
  --col-sweetness-width-mobile: 4rem;
  --col-sweetness-width-desktop: 5rem;

  --column-type-width: 6.25rem; /* 100px */
  --column-type-min-width: 5rem; /* 80px */

  --column-style-width: 5.625rem; /* 90px */
  --column-style-min-width: 4.375rem; /* 70px */

  --column-alcohol-width: 4.375rem; /* 70px */
  --column-alcohol-min-width: 3.125rem; /* 50px */

  --column-sweetness-width: 5.625rem; /* 90px */
  --column-sweetness-min-width: 3.75rem; /* 60px */

  /* ========================================================================
     TABLE DIMENSIONS (rem units)
     ======================================================================== */
  --table-total-width-desktop: 85.625rem; /* 1370px - calculated total */
  --table-container-min-width-desktop: 85.625rem; /* 1370px */

  /* ========================================================================
     WORD BREAKING RULES - Prevent mid-word breaks
     ======================================================================== */
  --word-break-normal: normal;
  --overflow-wrap-break-word: break-word;
  --hyphens-none: none;

  /* ========================================================================
     TYPOGRAPHY - Web Standards (WCAG 2.2 Compliant)
     Base: 16px (1rem) for accessibility
     ======================================================================== */
  --font-size-base: 1rem; /* 16px - WCAG minimum for body text */
  --font-size-header: 0.9rem; /* 14.4px - Consistent header size */
  --font-size-cell: 0.85rem; /* 13.6px - Table cell text */
  --font-size-cell-small: 0.8rem; /* 12.8px - Compact cells */
  --font-size-cell-compact: 0.75rem; /* 12px - Ultra-compact */
  --font-size-discount: 0.7rem; /* 11.2px - Discount text */
  
  /* Responsive font sizes for specific breakpoints (converted from px to rem) */
  --font-size-13px: 0.8125rem; /* 13px - Mobile compact */
  --font-size-12-5px: 0.78125rem; /* 12.5px - Tablet compact */
  --font-size-11-5px: 0.71875rem; /* 11.5px - Landscape compact */
  --font-size-10-5px: 0.65625rem; /* 10.5px - Ultra-compact landscape */
  --font-size-10px: 0.625rem; /* 10px - Minimum readable size */
  
  /* Font weights - Semantic scale */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Line heights - 1.5x font size for readability (WCAG recommendation) */
  --line-height-base: 1.5;
  --line-height-tight: 1.4;
  --line-height-compact: 1.2;
  --line-height-tighter: 1.1;
  
  /* ========================================================================
     SPACING - 8-Point Grid System (0.5rem = 8px increments)
     ======================================================================== */
  /* Cell padding - Standard */
  --cell-padding-standard: 0.5rem 0.4rem; /* 8px 6.4px */
  --cell-padding-compact: 0.375rem 0.25rem; /* 6px 4px */
  --cell-padding-tight: 0.25rem 0.2rem; /* 4px 3.2px */
  --cell-padding-ultra-tight: 0.125rem 0.125rem; /* 2px 2px */
  
  /* Cell padding - Product column */
  --cell-padding-product: 0.4rem 0.3rem; /* 6.4px 4.8px */
  --cell-padding-product-compact: 0.3rem 0.25rem; /* 4.8px 4px */
  
  /* Header padding */
  --header-padding-standard: 0.5rem 0.5rem 0.75rem 0.5rem; /* Top Right Bottom Left */
  --header-padding-compact: 0.375rem 0.25rem 0.5rem 0.25rem;
  
  /* Gaps and margins */
  --gap-small: 0.125rem; /* 2px */
  --gap-medium: 0.25rem; /* 4px */
  --gap-standard: 0.5rem; /* 8px */
  --gap-large: 0.75rem; /* 12px */
}

/* ==========================================================================
   PRODUCT COLUMN MIXIN - Single source of truth for all Product column rules
   ========================================================================== */
.product-column-base {
  min-width: var(--column-product-min-width-mobile);
  width: var(--column-product-width-mobile);
  max-width: var(--column-product-max-width);
  text-align: left;
  padding: var(--cell-padding-product);
  word-break: var(--word-break-normal);
  overflow-wrap: var(--overflow-wrap-break-word);
  hyphens: var(--hyphens-none);
  white-space: normal;
  line-height: 1.4;
  overflow: visible;
  text-overflow: clip;
}

/* Desktop override - Mobile-first approach */
@media (min-width: 1024px) {
  .product-column-base {
    min-width: var(--column-product-min-width-desktop);
    width: var(--column-product-width-desktop);
  }
}

/* Mobile portrait tuning - keep stock column visible */
@media (max-width: 599px) {
  :root {
    --column-product-min-width-mobile: 8rem; /* 128px - frees horizontal space for Stock column */
    --column-product-max-width: 20rem; /* Prevent long names from pushing essential columns off-screen */
  }
}

/* iPhone SE and very small screens (375px and below) - ultra-compact */
@media (max-width: 375px) {
  :root {
    --column-product-min-width-mobile: 5.5rem; /* 88px - ultra-compact for iPhone SE */
    --column-product-max-width: 12rem; /* 192px - prevent excessive width */
  }
}