: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;
}

/*
 * Keep the content that follows the application (homepage context and footer)
 * below the first viewport while an asynchronous Store/tool route starts.
 * The grid lets the real header determine its own height; the route region
 * receives the remaining space without relying on a guessed pixel value.
 */
.v2-app-viewport {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  inline-size: 100%;
  min-block-size: 100vh;
  min-block-size: 100svh;
}

#v2-header,
#v2-root {
  min-inline-size: 0;
  min-block-size: 0;
}

/* Shared first-render loading layout for lazy custom routes and Ecwid. */
.v2-route-loading {
  box-sizing: border-box;
  width: min(1180px, calc(100% - 32px));
  min-block-size: 520px;
  margin: 22px auto 36px;
  color: #555555;
  font-family: var(--v2-font-family);
}

.v2-route-loading__status {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 650;
  text-align: center;
}

.v2-route-loading__toolbar,
.v2-route-loading__panel,
.v2-route-loading__card {
  position: relative;
  overflow: hidden;
  background: #f1f3f5;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
}

.v2-route-loading__toolbar::after,
.v2-route-loading__panel::after,
.v2-route-loading__card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.72) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: v2-loading-sheen 1.5s ease-in-out infinite;
  content: '';
}

.v2-route-loading__toolbar {
  block-size: 62px;
  margin-bottom: 18px;
}

.v2-route-loading__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.v2-route-loading__card {
  min-block-size: 210px;
}

.v2-route-loading--tool .v2-route-loading__grid {
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.7fr);
}

.v2-route-loading__panel {
  min-block-size: 390px;
}

.v2-route-tool-mount {
  min-inline-size: 0;
}

@keyframes v2-loading-sheen {
  to {
    transform: translateX(100%);
  }
}

@media (max-width: 760px) {
  .v2-route-loading {
    width: min(calc(100% - 24px), 640px);
    min-block-size: 560px;
    margin-top: 16px;
  }

  .v2-route-loading__grid,
  .v2-route-loading--tool .v2-route-loading__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2-route-loading--tool .v2-route-loading__panel:first-child {
    min-block-size: 180px;
  }

  .v2-route-loading__card {
    min-block-size: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-route-loading__toolbar::after,
  .v2-route-loading__panel::after,
  .v2-route-loading__card::after {
    animation: none;
  }
}

/* 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;
}

.v2-field-note {
  font-size: 11px;
  line-height: 1.2;
  color: #b94242;
  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('../assets/navigation/extrusions.webp');
  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('../assets/navigation/tnuts.webp');
  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('../assets/navigation/fasteners.webp');
  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('../assets/navigation/brackets.webp');
  background-color: #dbeafe; /* soft blue tint as placeholder */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;


}

/* Joining Plates module icon */
.v2-icon--joining-plates {
  background-image: url('../assets/navigation/joining-plates.webp');
  background-color: #fff3e0; /* soft orange tint, optional placeholder */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Frame Finish module icon */
.v2-icon--frame-finish {
  background-image: url('../assets/navigation/frame-finish.webp');
  background-color: #f0f0f0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Frame to Floor module icon */
.v2-icon--frame-to-floor {
  background-image: url('../assets/navigation/frame-to-floor.webp');
  background-color: #f0f0f0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Steel Tubes module icon */
.v2-icon--steel-tubes {
  background-image: url('../assets/navigation/steel-tubes.webp');
  background-color: #f0f0f0; /* soft gray tint, optional placeholder */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Complete Ecwid store icon */
.v2-icon--store {
  background-color: #fff3e0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004c93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8Z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E");
  background-size: 22px 22px;
  background-repeat: no-repeat;
  background-position: center;
}

/*
 * Ecwid lays itself out asynchronously. Keep its real mount in normal flow so
 * it can establish the final page height, while a loading layout overlays it
 * until Ecwid's OnPageLoaded signal confirms the first page is ready.
 */
.v2-store-screen {
  position: relative;
  min-block-size: 100%;
  width: 100%;
}

.v2-store-content[aria-hidden='true'] {
  visibility: hidden;
}

.v2-store-loading {
  position: absolute;
  z-index: 1;
  inset: 0 auto auto 50%;
  transform: translateX(-50%);
  background: #ffffff;
}

.v2-route-error {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(720px, calc(100% - 32px));
  margin: 32px auto;
  padding: 20px;
  color: #7a1f1f;
  background: #fff1f1;
  border: 1px solid #e7b7b7;
  border-radius: 8px;
  font-family: var(--v2-font-family);
  text-align: center;
}