/* ==========================================================================
   TABLE COLUMNS
   Price/100mL, Size, Stock, Price column styles
   NOTE: Product column handled by product-column.css
   ========================================================================== */

/* Fixed column widths via colgroup */
/* CRITICAL: Must override table-responsive.css's table-layout: auto !important */
table.col-locked-table td:nth-child(2),
table.col-locked-table th:nth-child(2),
table.col-locked-table td:nth-child(3),
table.col-locked-table th:nth-child(3),
table.col-locked-table td:nth-child(4),
table.col-locked-table th:nth-child(4),
table.col-locked-table td:nth-child(5),
table.col-locked-table th:nth-child(5),
table.col-locked-table td:nth-child(6),
table.col-locked-table th:nth-child(6),
table.col-locked-table td:nth-child(7),
table.col-locked-table th:nth-child(7),
table.col-locked-table td:nth-child(8),
table.col-locked-table th:nth-child(8) {
  text-align: center !important;
}

table.col-locked-table td:nth-child(1),
table.col-locked-table th:nth-child(1) {
  text-align: left !important;
}

.table-column-group .col-product,
.table-column-group .col-price-per-100,
.table-column-group .col-size,
.table-column-group .col-stock,
.table-column-group .col-price-total,
.table-column-group .col-type,
.table-column-group .col-alcohol,
.table-column-group .col-sweetness {
  min-width: auto;
  max-width: none;
}

.table-column-group .col-product {
  width: var(--col-product-width-mobile) !important;
  min-width: var(--col-product-width-mobile) !important;
  max-width: var(--col-product-width-mobile) !important;
}
.table-column-group .col-price-per-100 {
  width: var(--col-price100-width-mobile) !important;
  min-width: var(--col-price100-width-mobile) !important;
  max-width: var(--col-price100-width-mobile) !important;
}
.table-column-group .col-size {
  width: var(--col-size-width-mobile) !important;
  min-width: var(--col-size-width-mobile) !important;
  max-width: var(--col-size-width-mobile) !important;
}
.table-column-group .col-stock {
  width: var(--col-stock-width-mobile) !important;
  min-width: var(--col-stock-width-mobile) !important;
  max-width: var(--col-stock-width-mobile) !important;
}
.table-column-group .col-price-total {
  width: var(--col-price-total-width-mobile) !important;
  min-width: var(--col-price-total-width-mobile) !important;
  max-width: var(--col-price-total-width-mobile) !important;
}
.table-column-group .col-type {
  width: var(--col-type-width-mobile) !important;
  min-width: var(--col-type-width-mobile) !important;
  max-width: var(--col-type-width-mobile) !important;
}
.table-column-group .col-alcohol {
  width: var(--col-alcohol-width-mobile) !important;
  min-width: var(--col-alcohol-width-mobile) !important;
  max-width: var(--col-alcohol-width-mobile) !important;
}
.table-column-group .col-sweetness {
  width: var(--col-sweetness-width-mobile) !important;
  min-width: var(--col-sweetness-width-mobile) !important;
  max-width: var(--col-sweetness-width-mobile) !important;
}

@media (min-width: 768px) {
  .table-column-group .col-product {
    width: var(--col-product-width-desktop) !important;
    min-width: var(--col-product-width-desktop) !important;
    max-width: var(--col-product-width-desktop) !important;
  }
  .table-column-group .col-price-per-100 {
    width: var(--col-price100-width-desktop) !important;
    min-width: var(--col-price100-width-desktop) !important;
    max-width: var(--col-price100-width-desktop) !important;
  }
  .table-column-group .col-size {
    width: var(--col-size-width-desktop) !important;
    min-width: var(--col-size-width-desktop) !important;
    max-width: var(--col-size-width-desktop) !important;
  }
  .table-column-group .col-stock {
    width: var(--col-stock-width-desktop) !important;
    min-width: var(--col-stock-width-desktop) !important;
    max-width: var(--col-stock-width-desktop) !important;
  }
  .table-column-group .col-price-total {
    width: var(--col-price-total-width-desktop) !important;
    min-width: var(--col-price-total-width-desktop) !important;
    max-width: var(--col-price-total-width-desktop) !important;
  }
  .table-column-group .col-type {
    width: var(--col-type-width-desktop) !important;
    min-width: var(--col-type-width-desktop) !important;
    max-width: var(--col-type-width-desktop) !important;
  }
  .table-column-group .col-alcohol {
    width: var(--col-alcohol-width-desktop) !important;
    min-width: var(--col-alcohol-width-desktop) !important;
    max-width: var(--col-alcohol-width-desktop) !important;
  }
  .table-column-group .col-sweetness {
    width: var(--col-sweetness-width-desktop) !important;
    min-width: var(--col-sweetness-width-desktop) !important;
    max-width: var(--col-sweetness-width-desktop) !important;
  }
}

table.col-locked-table :is(th, td):nth-child(1) {
  width: var(--col-product-width-mobile) !important;
  min-width: var(--col-product-width-mobile) !important;
  max-width: var(--col-product-width-mobile) !important;
}
table.col-locked-table :is(th, td):nth-child(2) {
  width: var(--col-price100-width-mobile) !important;
  min-width: var(--col-price100-width-mobile) !important;
  max-width: var(--col-price100-width-mobile) !important;
}
table.col-locked-table :is(th, td):nth-child(3) {
  width: var(--col-size-width-mobile) !important;
  min-width: var(--col-size-width-mobile) !important;
  max-width: var(--col-size-width-mobile) !important;
}
table.col-locked-table :is(th, td):nth-child(4) {
  width: var(--col-stock-width-mobile) !important;
  min-width: var(--col-stock-width-mobile) !important;
  max-width: var(--col-stock-width-mobile) !important;
}
table.col-locked-table :is(th, td):nth-child(5) {
  width: var(--col-price-total-width-mobile) !important;
  min-width: var(--col-price-total-width-mobile) !important;
  max-width: var(--col-price-total-width-mobile) !important;
}
table.col-locked-table :is(th, td):nth-child(6) {
  width: var(--col-type-width-mobile) !important;
  min-width: var(--col-type-width-mobile) !important;
  max-width: var(--col-type-width-mobile) !important;
}
table.col-locked-table :is(th, td):nth-child(7) {
  width: var(--col-alcohol-width-mobile) !important;
  min-width: var(--col-alcohol-width-mobile) !important;
  max-width: var(--col-alcohol-width-mobile) !important;
}
table.col-locked-table :is(th, td):nth-child(8) {
  width: var(--col-sweetness-width-mobile) !important;
  min-width: var(--col-sweetness-width-mobile) !important;
  max-width: var(--col-sweetness-width-mobile) !important;
}

@media (min-width: 768px) {
  table.col-locked-table :is(th, td):nth-child(1) {
    width: var(--col-product-width-desktop) !important;
    min-width: var(--col-product-width-desktop) !important;
    max-width: var(--col-product-width-desktop) !important;
  }
  table.col-locked-table :is(th, td):nth-child(2) {
    width: var(--col-price100-width-desktop) !important;
    min-width: var(--col-price100-width-desktop) !important;
    max-width: var(--col-price100-width-desktop) !important;
  }
  table.col-locked-table :is(th, td):nth-child(3) {
    width: var(--col-size-width-desktop) !important;
    min-width: var(--col-size-width-desktop) !important;
    max-width: var(--col-size-width-desktop) !important;
  }
  table.col-locked-table :is(th, td):nth-child(4) {
    width: var(--col-stock-width-desktop) !important;
    min-width: var(--col-stock-width-desktop) !important;
    max-width: var(--col-stock-width-desktop) !important;
  }
  table.col-locked-table :is(th, td):nth-child(5) {
    width: var(--col-price-total-width-desktop) !important;
    min-width: var(--col-price-total-width-desktop) !important;
    max-width: var(--col-price-total-width-desktop) !important;
  }
  table.col-locked-table :is(th, td):nth-child(6) {
    width: var(--col-type-width-desktop) !important;
    min-width: var(--col-type-width-desktop) !important;
    max-width: var(--col-type-width-desktop) !important;
  }
  table.col-locked-table :is(th, td):nth-child(7) {
    width: var(--col-alcohol-width-desktop) !important;
    min-width: var(--col-alcohol-width-desktop) !important;
    max-width: var(--col-alcohol-width-desktop) !important;
  }
  table.col-locked-table :is(th, td):nth-child(8) {
    width: var(--col-sweetness-width-desktop) !important;
    min-width: var(--col-sweetness-width-desktop) !important;
    max-width: var(--col-sweetness-width-desktop) !important;
  }
}

/* Column 5: Price - Consistent across all categories */
.table-container th:nth-child(5),
.table-container td:nth-child(5),
#beer-table th:nth-child(5),
#beer-table td:nth-child(5),
#wine-table th:nth-child(5),
#wine-table td:nth-child(5),
#spirits-table th:nth-child(5),
#spirits-table td:nth-child(5),
#cider-table th:nth-child(5),
#cider-table td:nth-child(5),
th:nth-child(5),
td:nth-child(5) {
  padding-left: var(--gap-medium, 0.25rem) !important;
  padding-right: var(--gap-medium, 0.25rem) !important;
  text-align: center !important;
  white-space: nowrap !important; /* Never break prices mid-number */
  word-break: keep-all !important; /* Never break numbers */
  overflow-wrap: normal !important; /* Don't break mid-number */
}

th:nth-child(2), td:nth-child(2),
th:nth-child(3), td:nth-child(3) {
  padding-left: var(--gap-small, 0.125rem);
  padding-right: var(--gap-small, 0.125rem);
}

/* Headers inherit from table-headers.css, cells use standard cell size */
td:nth-child(2), td:nth-child(3) {
  font-size: var(--font-size-cell, 0.85rem);
}

/* Column 2: Price/100mL - Center-aligned - Consistent across all categories */
.table-container th:nth-child(2),
.table-container td:nth-child(2),
#beer-table th:nth-child(2),
#beer-table td:nth-child(2),
#wine-table th:nth-child(2),
#wine-table td:nth-child(2),
#spirits-table th:nth-child(2),
#spirits-table td:nth-child(2),
#cider-table th:nth-child(2),
#cider-table td:nth-child(2),
th:nth-child(2),
td:nth-child(2) {
  text-align: center !important; /* Center-align */
  min-width: 75px !important;
  width: 90px !important;
  max-width: 100px !important;
  font-variant-numeric: tabular-nums !important; /* Better number alignment */
}

th:nth-child(2) {
  white-space: nowrap !important; /* Headers never wrap */
  overflow: visible !important; /* Headers never truncate */
  text-overflow: clip !important;
  /* font-size inherited from table-headers.css (0.9rem) */
}

td:nth-child(2) {
  white-space: normal !important; /* Allow vertical stacking for price/100mL */
  word-break: keep-all !important; /* Never break numbers */
  overflow-wrap: break-word !important; /* Allow wrapping for discount text */
  overflow: visible !important; /* Never truncate */
  text-overflow: clip !important; /* Never show ellipsis */
  font-size: var(--font-size-cell, 0.85rem);
}

/* Column 3: Size - Headers never wrap/truncate, cells stay on one line (no mid-number breaks), center-aligned - Consistent across all categories */
.table-container th:nth-child(3),
.table-container td:nth-child(3),
#beer-table th:nth-child(3),
#beer-table td:nth-child(3),
#wine-table th:nth-child(3),
#wine-table td:nth-child(3),
#spirits-table th:nth-child(3),
#spirits-table td:nth-child(3),
#cider-table th:nth-child(3),
#cider-table td:nth-child(3),
th:nth-child(3),
td:nth-child(3) {
  text-align: center !important; /* Center-align */
  min-width: 65px !important;
  font-variant-numeric: tabular-nums !important; /* Better number alignment */
}

th:nth-child(3) {
  white-space: nowrap !important; /* Headers never wrap */
  overflow: visible !important; /* Headers never truncate */
  text-overflow: clip !important;
  width: auto !important; /* Headers expand to show full text */
  max-width: none !important;
}

td:nth-child(3) {
  word-break: keep-all !important; /* Never break numbers or units */
  overflow-wrap: normal !important; /* Don't break mid-number */
  overflow: visible !important; /* Never truncate */
  text-overflow: clip !important; /* Never show ellipsis */
  width: 75px !important;
  font-size: var(--font-size-cell-small, 0.8rem);
  max-width: 100px !important;
}

/* Allow inline pack size to display properly - keep on one line */
td:nth-child(3) .size-pack {
  white-space: nowrap !important; /* Keep on one line */
}

/* Single item sizes should stay on one line */
td:nth-child(3):not(:has(.size-pack)) {
  white-space: nowrap !important; /* Prevent line breaks in single item sizes */
}

/* Vertical pack size display with centered quantity and styled volume */
td:nth-child(3) .size-pack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  white-space: normal !important; /* Allow vertical stacking */
  vertical-align: top !important;
  line-height: var(--line-height-tighter, 1.1) !important;
  gap: var(--gap-small, 0.125rem) !important;
  width: 100% !important; /* Take full width of cell */
  height: auto !important; /* Allow height to expand */
  min-height: auto !important; /* Allow height to expand */
  max-height: none !important; /* Allow height to expand */
  font-weight: normal !important; /* Reset to prevent inheritance to children */
}

.size-pack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  white-space: normal !important; /* Allow vertical stacking */
  vertical-align: top !important;
  line-height: var(--line-height-tighter, 1.1) !important;
  gap: var(--gap-small, 0.125rem) !important;
  width: 100% !important; /* Take full width of cell */
  height: auto !important; /* Allow height to expand */
  min-height: auto !important; /* Allow height to expand */
  max-height: none !important; /* Allow height to expand */
}

.size-pack__quantity,
td:nth-child(3) .size-pack__quantity,
td .size-pack__quantity,
.size-pack .size-pack__quantity {
  font-weight: 300 !important; /* Light weight to contrast with bold volume */
  font-size: var(--font-size-cell-small, 0.8rem) !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  text-align: center !important;
  opacity: 0.85 !important; /* Slightly lighter to make volume stand out */
}

.size-pack__volume,
td:nth-child(3) .size-pack__volume,
td .size-pack__volume,
.size-pack .size-pack__volume,
table td .size-pack__volume,
.table-container td .size-pack__volume,
td:nth-child(3) .size-pack .size-pack__volume,
.size-pack > .size-pack__volume,
table.col-locked-table td:nth-child(3) .size-pack .size-pack__volume {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 800 !important; /* ExtraBold to ensure visibility */
  font-size: var(--font-size-cell-small, 0.8rem) !important;
  color: #000 !important; /* Dark color for bold text */
  white-space: nowrap !important;
  line-height: 1.1 !important;
  text-align: center !important;
  /* Force bold - prevent inheritance from parent */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Expanded availability cell - base styles */
td.availability-cell.availability-expanded,
.table-container td.availability-cell.availability-expanded,
#beer-table td.availability-cell.availability-expanded,
#wine-table td.availability-cell.availability-expanded,
#spirits-table td.availability-cell.availability-expanded,
#cider-table td.availability-cell.availability-expanded,
.table-container table td.availability-cell.availability-expanded,
table td.availability-cell.availability-expanded {
  white-space: normal !important;
  word-break: normal !important; /* Never break mid-word - only at word boundaries */
  overflow-wrap: break-word !important; /* Break at word boundaries, never mid-word */
  hyphens: none !important; /* Disable hyphenation */
  position: relative !important;
  z-index: 10 !important; /* Ensure expanded cell is above other content */
}

/* When availability cell is expanded, shrink product column to fit - NO horizontal scroll */
.table-container:has(td.availability-cell.availability-expanded),
.table-container.has-expanded-cell {
  overflow-x: hidden !important; /* NO horizontal scroll - shrink product column instead */
  overflow-y: visible !important; /* Allow vertical growth */
}

/* Shrink product column when availability cell is expanded to prevent horizontal scroll */
/* Keep table fixed layout to constrain width when cell is expanded */
table:has(td.availability-cell.availability-expanded),
table.has-expanded-cell,
.table-container:has(td.availability-cell.availability-expanded) table,
.table-container.has-expanded-cell table {
  table-layout: fixed !important; /* Keep fixed layout to constrain table width */
  width: 100% !important; /* Keep table within container */
  max-width: 100% !important; /* Never exceed container width */
  min-width: 100% !important; /* But maintain minimum table width */
}

/* Column 4: Stock - Headers never wrap/truncate, cells stay on one line - Consistent across all categories */
.table-container th:nth-child(4),
.table-container td:nth-child(4),
#beer-table th:nth-child(4),
#beer-table td:nth-child(4),
#wine-table th:nth-child(4),
#wine-table td:nth-child(4),
#spirits-table th:nth-child(4),
#spirits-table td:nth-child(4),
#cider-table th:nth-child(4),
#cider-table td:nth-child(4),
th:nth-child(4),
td:nth-child(4) {
  text-align: center !important; /* Center-align */
  padding-left: var(--gap-medium, 0.25rem) !important;
  padding-right: var(--gap-medium, 0.25rem) !important;
  min-width: var(--column-stock-min-width-dynamic, var(--column-stock-min-width, 7.5rem)) !important;
  width: var(--column-stock-width-dynamic, var(--column-stock-width, 9rem)) !important;
  max-width: var(--column-stock-max-width-dynamic, var(--column-stock-max-width, 10rem)) !important;
}

th:nth-child(4) {
  white-space: nowrap !important; /* Headers never wrap */
  overflow: visible !important; /* Headers never truncate */
  text-overflow: clip !important;
}

td:nth-child(4) {
  color: #000000 !important; /* BLACK - Maximum contrast, ensure stock column text is NOT faded */
  white-space: nowrap !important; /* Prevent "Check nearby" from breaking */
  word-break: keep-all !important; /* Never break links */
  overflow-wrap: normal !important;
  overflow: visible !important; /* Never truncate */
  text-overflow: clip !important; /* Never show ellipsis */
  z-index: 999 !important; /* Ensure column 4 is above ANY overlays */
  position: relative !important; /* Enable z-index */
  opacity: 1 !important; /* Ensure full opacity */
  filter: none !important; /* Remove any filters that might make it appear faded */
  text-shadow: none !important; /* Remove any text shadow that might make it appear faded */
  -webkit-text-fill-color: #000000 !important; /* WebKit text fill color - ensure not faded */
  mix-blend-mode: normal !important; /* Prevent any blend mode that might fade text */
}

/* CRITICAL: Override column 4 width for expanded availability cells - MUST come after column 4 rules */
/* Base rule - will be overridden by media queries */
td:nth-child(4).availability-cell.availability-expanded,
.table-container td:nth-child(4).availability-cell.availability-expanded,
#beer-table td:nth-child(4).availability-cell.availability-expanded,
#wine-table td:nth-child(4).availability-cell.availability-expanded,
#spirits-table td:nth-child(4).availability-cell.availability-expanded,
#cider-table td:nth-child(4).availability-cell.availability-expanded,
.table-container table td:nth-child(4).availability-cell.availability-expanded,
table td:nth-child(4).availability-cell.availability-expanded {
  min-width: 9.75rem !important; /* 156px - Enough for "ubc wesbrook vill: 1" */
  max-width: 9.75rem !important; /* 156px - Constrain to fit */
  width: 9.75rem !important; /* Force exact width - no auto */
  white-space: normal !important; /* Allow wrapping for store names */
  word-break: normal !important; /* Never break mid-word */
  overflow-wrap: break-word !important; /* Break at word boundaries only */
  box-sizing: border-box !important; /* Include padding in width calculation */
}

/* Safari iOS renders fonts wider - need extra space */
@supports (-webkit-touch-callout: none) {
  td:nth-child(4).availability-cell.availability-expanded,
  .table-container td:nth-child(4).availability-cell.availability-expanded,
  #beer-table td:nth-child(4).availability-cell.availability-expanded,
  #wine-table td:nth-child(4).availability-cell.availability-expanded,
  #spirits-table td:nth-child(4).availability-cell.availability-expanded,
  #cider-table td:nth-child(4).availability-cell.availability-expanded,
  .table-container table td:nth-child(4).availability-cell.availability-expanded,
  table td:nth-child(4).availability-cell.availability-expanded {
    min-width: 10.5rem !important; /* 168px - Extra space for Safari iOS wider font rendering */
    max-width: 10.5rem !important; /* 168px - Constrain to fit */
    width: 10.5rem !important; /* Force exact width */
  }
  
  /* Shrink product column even more on Safari iOS to make room */
}

.price-combined {
  text-align: center !important;
}

.price-combo {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  gap: var(--gap-medium, 0.25rem);
}

.price-combo__total {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  gap: 0.05rem;
}

.price-current {
  font-weight: var(--font-weight-bold, 700);
  color: #111827;
  font-size: var(--font-size-base, 1rem);
  white-space: nowrap !important; /* Never break prices mid-number */
  word-break: keep-all !important; /* Never break numbers */
  overflow-wrap: normal !important; /* Don't break mid-number */
}

.price-current--sale {
  color: #b91c1c !important; /* red-700 */
}

.price-regular {
  color: #94a3b8;
  font-size: 0.8rem;
  text-decoration: line-through;
  white-space: nowrap !important; /* Never break prices mid-number */
  word-break: keep-all !important; /* Never break numbers */
  overflow-wrap: normal !important; /* Don't break mid-number */
}

.price-combo__per-ml {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  gap: 0.1rem;
  font-size: var(--font-size-cell, 0.85rem);
  color: #4b5563;
}

.price-per-ml__value {
  font-weight: 600;
  color: #111827;
  font-size: var(--font-size-cell, 0.85rem); /* Explicit size for consistency */
  white-space: nowrap !important; /* Never break prices mid-number */
  word-break: keep-all !important; /* Never break numbers */
  overflow-wrap: normal !important; /* Don't break mid-number */
}

.price-per-ml__regular {
  color: #94a3b8;
  text-decoration: line-through;
  font-size: var(--font-size-cell-compact, 0.75rem);
  font-weight: 500;
  white-space: nowrap !important; /* Never break prices mid-number */
  word-break: keep-all !important; /* Never break numbers */
  overflow-wrap: normal !important; /* Don't break mid-number */
}

.price-combo__per-ml .price-per-ml__value--sale {
  color: #b91c1c !important; /* red-700 */
  font-weight: 600;
}

/* Price/100mL column - allow vertical stacking */
.price-per-100ml-column {
  white-space: normal !important;
  text-align: center !important;
  overflow: visible !important;
  word-wrap: break-word !important;
}

/* Ensure price-combo__total in price/100mL column stacks vertically */
.price-per-100ml-column .price-combo__total {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  gap: 0.05rem;
}

/* Ensure individual per-100mL spans are block-level and center-aligned
   This fixes cases where the regular or single price value renders left due
   to inherited inline formatting or other rules. */
.price-per-100ml-column .price-per-ml__regular,
.price-per-100ml-column .price-per-ml__value {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 0.85rem !important; /* Explicit size for price-per-ml__value */
}

.price-per-100ml-column .price-per-ml__regular {
  font-size: 0.75rem !important; /* Explicit size for price-per-ml__regular */
}

/* Discount container for Price/100mL column */
.price-per-100ml-column .price-per-ml__discount {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  gap: 0.15rem;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.price-per-100ml-column .price-per-ml__discount-text {
  font-size: var(--font-size-discount, 0.7rem) !important;
  color: #111827; /* Black for better readability and visual hierarchy */
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  white-space: normal !important;
  word-break: normal !important; /* Only break at word boundaries - never mid-word */
  overflow-wrap: break-word !important; /* Break at word boundaries when necessary, never mid-word */
  max-width: 100% !important; /* Ensure it doesn't exceed column width */
  width: 100% !important; /* Take full width of container */
}