:root {
  /* V2 Color System (isolated from V1) */
  --v2-color-primary: #ff8a00;        /* Header background */
  --v2-color-on-primary: #ffffff;     /* Header text/icons */
  --v2-color-header-shadow: rgba(0, 0, 0, 0.12);
  --v2-color-header-text: #000000;  /* Header title/subtitle */
  --v2-color-header-icon: #000000;  /* Back button, future cart icon */
  --v2-color-table-border: #006064;
  --v2-color-table-header-bg: #f5f5f5;
  --v2-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* v2/core/base.css
   Core styling scaffold for V2 tool.
   Defines shared layout, typography, buttons, and placeholder visuals.
   All rules are scoped to v2-* classes to avoid leaking into V1.
*/

/* Typography + base container */
.v2-main-menu,
.v2-tool {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #222;
}

/* Shared body layout for modules */
.v2-tool__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 16px 24px;
  box-sizing: border-box;
}

/* Generic vertical spacing hook for sections inside tools */
.v2-tool__section {
  margin-bottom: 16px;
}

/* Placeholder content blocks used during scaffolding */
.v2-tool__placeholder {
  font-size: 13px;
  line-height: 1.4;
  color: #666;

  background: #fafafa;
  border: 1px dashed #dddddd;
  border-radius: 8px;

  padding: 12px;
  margin: 0;
}

/* Global inline field error message (shared across modules) */
.v2-field-error {
  font-size: 11px;
  line-height: 1.2;
  color: #b94242; /* red, matches existing out-of-stock semantics */
  margin-top: 4px;
}

/* Global: remove spinner arrows on numeric inputs (V2 tools only) */
.v2-tool input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

.v2-tool input[type="number"]::-webkit-outer-spin-button,
.v2-tool input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; /* Chrome, Safari, Edge */
  margin: 0;
}

/* ----------------------------------------------------- */
/* Global V2 input styling (opt-in via .v2-input class)  */
/* ----------------------------------------------------- */

.v2-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.2;

  color: #222;
  background-color: #ffffff;

  border: 1px solid #c7c7c7;
  border-radius: 6px;

  box-sizing: border-box;
}

.v2-input::placeholder {
  color: #999;
}

/* Compact variant for dense layouts like tables */
.v2-input--sm {
  padding: 6px 4px;
  font-size: 16px;
}

/* Focus state */
.v2-input:focus {
  outline: none;
  border-color: #006064;
  box-shadow: 0 0 0 1px rgba(0, 96, 100, 0.25);
}

/* Disabled state */
.v2-input[disabled],
.v2-input:disabled {
  background-color: #f5f5f5;
  border-color: #dddddd;
  color: #999;
  cursor: not-allowed;
}

/* Global table styling utilities (shared across all modules) */
.v2-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--v2-color-table-border);
}

.v2-table th,
.v2-table td {
  border: 1px solid var(--v2-color-table-border);
  padding: 6px;
}


.v2-table th {
  background: var(--v2-color-table-header-bg);
  font-weight: 600;
  text-align: center;
}

/* ----------------------------------------------------- */
/* Global V2 totals / summary table (T-Nut, Fastener)    */
/* ----------------------------------------------------- */

.v2-totals-table {
  width: 100%;
  table-layout: fixed;        /* Prevent column jitter when values update */
}

/* Even 3-column layout: Label | Value | Spacer/Value */
.v2-totals-table th,
.v2-totals-table td {
  text-align: left;
}

.v2-totals-table th:first-child,
.v2-totals-table td:first-child {
  text-align: left;
}

/* Make numeric values visually stable */
.v2-totals-table {
  font-variant-numeric: tabular-nums;
}

/* Core button styles */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid #d0d0d0;
  background: #ffffff;

  font-size: 14px;
  font-weight: 500;
  color: #222;

  cursor: pointer;
  text-decoration: none;

  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.v2-btn:hover {
  background: #f5f5f5;
  border-color: #c5c5c5;
}

.v2-btn:active {
  background: #e8e8e8;
  border-color: #b8b8b8;
}

/* Secondary buttons (e.g. Back to Filters) */
.v2-btn--secondary {
  background: #f7f7f7;
  border-color: #c7c7c7;
  color: #333;
}

.v2-btn--secondary:hover {
  background: #efefef;
  border-color: #006064;

}

/* Primary CTA (Add to Cart / Money Button) */
.v2-btn--money-button {
  background: #004C93;
  border-color: #004C93;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  height: 46px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.v2-btn--money-button:hover:not(.v2-btn--disabled):not([disabled]) {
  background: #003d7a; /* slightly darker */
  border-color: #003d7a;
}

.v2-btn--money-button:active:not(.v2-btn--disabled):not([disabled]) {
  background: #00376f;
  border-color: #00376f;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Disabled button state */
.v2-btn--disabled,
.v2-btn[disabled] {
  background: #f0f0f0;
  border-color: #dddddd;
  color: #aaaaaa;
  cursor: not-allowed;
  box-shadow: none;
}

/* Simple utility for horizontal scroll areas (e.g. carousels) */
.v2-scroll-h {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 8px;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.v2-scroll-h > * {
  scroll-snap-align: start;
}

/* Utility to center content vertically and horizontally */
.v2-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Utility: full-width buttons (mobile-first).
   Always 100% width of container.
   Desktop refinements, if needed, will be applied in module-level CSS. */
.v2-btn--full {
  width: 100%;
}

/* ----------------------------------------------------- */
/* Shared module icon semantics (used by multiple UIs)   */
/* ----------------------------------------------------- */
/*
  These classes define the *graphic* identity for each module
  (Extrusions, T Nuts, Fasteners, Brackets, etc.).

  Layout/size is handled by the context-specific wrappers:
    - .v2-pill__icon           (mobile main menu)
    - .v2-header__tab-icon     (desktop header tabs)

  To swap icons globally in future, only update the
  background-* rules here. Both mobile and desktop UIs will
  automatically pick up the new artwork.
*/

/* Base icon placeholder (in case no specific module class is applied) */
.v2-icon {
  background-color: #f0f0f0;
  border-radius: 4px;
}

/* Extrusions module icon */
.v2-icon--extrusions {
  background-image: url('../icon pictures/extrusions_mainmenu.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* T Nuts module icon */
.v2-icon--tnuts {
  /* TODO: replace with background-image: url('.../tnuts-icon.png'); */
  background-image: url('../icon pictures/tnuts_mainmenu.png');
  background-color: #dbeafe; /* soft blue tint as placeholder */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Fasteners module icon */
.v2-icon--fasteners {
  /* TODO: replace with background-image: url('.../fasteners-icon.png'); */
  background-image: url('../icon pictures/fasteners_mainmenu.jpeg');
  background-color: #e4ffe2; /* soft green tint as placeholder */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

}

/* Brackets module icon */
.v2-icon--brackets {
  /* TODO: replace with background-image: url('.../brackets-icon.png'); */
  background-image: url('../icon pictures/brackets_mainmenu.png');
  background-color: #dbeafe; /* soft blue tint as placeholder */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;


}