/* =========================================================
   LEGACY / BASE ELEMENT STYLES
========================================================= */

html, body {
  scroll-behavior: smooth;
  width: 100%;
  position: relative;
}

textarea { font-family: Courier New; }
td { font-family: Arial; font-size: 10pt; }
a { text-decoration: none; }


/* =========================================================
   HEADER / NAV (STICKY WIDESCREEN ALIGNED CHASSIS)
========================================================= */

.header {
  display: block;
  width: 100%;
  position: relative;
  z-index: 9999;
}

/* Base layout config handles mobile and standard desktop monitors */
.top-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  /* CRITICAL STRUCTURAL ADJUSTMENT: Fixed height replaces loose padding blocks.
     This guarantees the header boundary never shifts or jitters during window resizing. */
  height: 62px; 
  padding: 0 32px; 
  
  width: 100% !important;
  max-width: 100% !important; 
  margin: 0 auto;
  box-sizing: border-box;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
  
  transition: padding-left 0.15s ease, padding-right 0.15s ease;
}

/* EXPANDED WIDESCREEN CORRIDOR LOCK */
@media (min-width: 1680px) {
  .top-nav {
    padding-left: calc((100vw - 1680px) / 2 + 12px) !important;
    padding-right: calc((100vw - 1680px) / 2 + 32px) !important;
  }
}

.nav-logo { 
  height: 38px; 
  width: auto;
  object-fit: contain;
}

/* Polished typography baseline metrics for desktop links */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%; /* Spans the full height of the top navigation bar */
}

.nav-group { 
  position: relative; 
  display: flex;
  align-items: center;
  height: 34px;        /* Shortens the trigger zone box cleanly */
  padding: 0 4px;
}

.desktop-nav a, 
.desktop-nav span {
  font-size: 16px;
  font-weight: 600;
  color: #1f2420;
  text-decoration: none !important;
  cursor: pointer;
  transition: color 0.15s ease;
  letter-spacing: -0.2px;
}

.desktop-nav a:hover,
.nav-group:hover > span {
  color: #1b4b25; 
}

/* =========================================================
    PREMIUM DROPDOWN PANELS ARCHITECTURE (GAP-REPAIR FIX)
========================================================= */

/* Forces the panel open instantly on hover */
.nav-group:hover .nav-dropdown { 
  display: block !important; 
}

/* Your beautifully centered card structure with absolute coordinate locking */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100% !important;        /* Snaps perfectly flush to the bottom edge of the nav column grid */
  left: 50%;                    
  transform: translateX(-50%); 
  background: #ffffff;
  border: 1px solid #e2e8f0;   
  width: max-content;          
  min-width: 140px;            
  border-radius: 6px;          
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); 
  z-index: 999999 !important;   
  padding: 6px 0 !important;   
  margin-top: 14px;             /* Safe padding alignment maps panel back flush to the 62px border */
}

/* SOLID INTERACTIVE COVERAGE BRIDGE
   Since the parent container now fills the entire header height, this clean safety layer
   completely blocks underlying page frames from interrupting the cursor tracking path. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -22px;          /* Stretches up through your 2px margin gap directly into the header bar zone */
  left: -18px;         /* HORIZONTAL SAFETY LANE: Spreads the hover footprint 20px to the left side invisibly */
  right: -18px;        /* HORIZONTAL SAFETY LANE: Spreads the hover footprint 20px to the right side invisibly */
  bottom: -10px;       /* Deep vertical safety curtain prevents drops if a cursor overshoots the card base */
  background: transparent !important; 
  z-index: -1;         /* CRITICAL: Sits behind the dropdown text so links remain 100% clickable */
}

/* Balanced typographic links */
.nav-dropdown a {
  display: block;
  margin: 0 !important;
  padding: 10px 20px;          
  color: #64748b !important;   
  font-size: 13.5px;
  font-weight: 600;            
  text-align: center;          
  white-space: nowrap;
  background-color: transparent !important;
  transition: color 0.15s ease;
}

/* Clear text-only transformation with baseline underline offset */
.nav-dropdown a:hover {
  color: #1b4b25 !important;   
  text-decoration: underline !important; 
  text-underline-offset: 4px;            
}

.hamburger {
  display: none;
  font-size: 26px;
  background: none;
  border: none;
}


/* =========================================================
   DESKTOP CART PILL BADGE (PROPORTIONAL MICRO-ALIGNMENT)
========================================================= */
.desktop-nav .nav-group:last-child {
  margin-left: -6px !important; 
  padding-right: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.desktop-nav .nav-group:last-child a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 34px !important; 
  height: 34px !important;
  text-decoration: none !important;
}

.desktop-nav .nav-group:last-child img {
  height: 24px !important; 
  width: auto !important;
  vertical-align: middle !important;
  position: relative !important;
  top: 3px !important; 
  z-index: 1 !important;
  transition: none !important;
}

.desktop-nav .nav-group:last-child a:hover img {
  transform: none !important;
}

#field1 {
  position: absolute !important;
  top: 50% !important;
  margin-top: -15px !important; /* Locks metrics directly to the vertical center line of the truck icon */
  right: -3px !important;        /* Pulls badge tightly onto the right edge of the flatbed wheel rail */
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: #1b4b25 !important;
  min-width: 15px !important;
  height: 15px !important;
  padding: 0 3px !important;
  border-radius: 99px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}


/* =========================================================
   MOBILE NAV & RESPONSIVE BREAKPOINT SYSTEM
========================================================= */

.sku-right-nav-mobile {
  display: none;
}

@media (max-width: 1200px) {
  .desktop-nav { 
    display: none !important; 
  }
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100% !important; 
  height: 100%;
  background: #fff;
  padding: 24px !important;
  box-sizing: border-box !important; 
  overflow-y: auto;
  transition: right 0.3s ease;
  z-index: 9999;
}

/* =========================================================
   BASE LAYOUT
========================================================= */

.dls-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 40px 24px;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  color: #222;
}

a {
  color: #1b4b25;
  text-decoration: underline;
}

/* =========================================================
   SKU TOP GRID (PHASE 1 STRUCTURE ONLY)
========================================================= */

.sku-breadcrumb {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #2c5e3f;
}

.sku-breadcrumb a {
  text-decoration: none;
  color: #2c5e3f;
}

.sku-breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-sep {
  margin: 0 8px;
  color: #8a8a8a;
  font-weight: 500;
}

.sku-top-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)      /* left image */
    minmax(0, 420px)   /* purchase */
    285px;             /* right rail */
  gap: 16px;
  align-items: start;
}

/* Left column (image + yard card stacked) */
.sku-left-col {
  display: grid;
  grid-template-rows: auto auto;
  gap: 16px;
  align-content: start;
}

.sku-middle-col {
  display: grid;
  grid-auto-rows: min-content;
  gap: 16px;
}

/* Shared card styling (reuse visual language) */
.sku-card {
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  padding: 28px;
}

/* Image card tweaks only */
.sku-image-card {
  padding: 0;
}

/* Boise yard / reviews card */
.sku-yard-card h3 {
  font-size: 18px;
  margin-top: 8px;
}

.sku-yard-card .rating {
  font-weight: 600;
  margin-bottom: 6px;
}

.sku-yard-card .reviews-link {
  font-size: 14px;
}

/* Collapse behavior */
@media (max-width: 1200px) {
  .sku-top-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   STOCK AVAILABILITY
========================= */

/* =========================
   STOCK AVAILABILITY (PRIMARY SIGNAL)
========================= */

.sku-stock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px 0;
  font-size: 15px;
  color: #1b4b25;
}

/* Green check icon */
.stock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1f8f3a;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.stock-text {
  line-height: 1.3;
}

.stock-text strong {
  font-weight: 700;
}


/* =========================================================
   BULK DISCOUNT CARD (STANDOUT, NOT "SALE" ENERGY)
========================================================= */

.sku-bulk-discount-card {
  /* Subtle confidence tint + strong structure */
  background: linear-gradient(180deg, rgba(27, 75, 37, 0.06), rgba(27, 75, 37, 0.02));
  border: 1px solid rgba(27, 75, 37, 0.16);
  position: relative;
  overflow: hidden;
  
  /*  NEW BREATHING ROOM OFFSET */
  scroll-margin-top: 24px;
}

/* Left accent bar (quiet authority) */
.sku-bulk-discount-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: #1b4b25;
  opacity: 0.85;
}


.bulk-card-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

.bulk-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(27, 75, 37, 0.10);
  border: 1px solid rgba(27, 75, 37, 0.18);
  white-space: nowrap;
}

/* Simple icon (no external libs) */
.bulk-badge-icon {
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
  transform: rotate(-12deg);
}
.bulk-badge-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #1b4b25;
  border-radius: 4px;
  clip-path: polygon(0 20%, 72% 20%, 100% 50%, 72% 80%, 0 80%);
  opacity: 0.95;
}
.bulk-badge-icon::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  left: 5px;
  top: 7px;
  opacity: 0.9;
}

.bulk-badge-text {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: #1b4b25;
}

.bulk-title {
  margin: 0;
  font-size: 18px;
  color: #1b4b25;
  
}

.bulk-subtitle {
  margin: 6px 0 0 0;
  font-size: 13px;
  color: #2f3b33;
  line-height: 1.35;
}

.bulk-tier-table {
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.65);
}

.bulk-tier-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.bulk-tier-row:first-child {
  border-top: none;
}

.bulk-tier-head {
  background: rgba(27, 75, 37, 0.08);
  font-weight: 700;
  color: #1b4b25;
}

.bulk-tier-col {
  font-size: 14px;
  color: #222;
}

.bulk-tier-col-right {
  text-align: right;
  white-space: nowrap;
}

.bulk-tier-note {
  margin-top: 4px;
  font-size: 12px;
  color: #56625a;
}

.bulk-price {
  font-weight: 800;
  font-size: 16px;
  color: #1b4b25;
}

.bulk-unit {
  font-size: 12px;
  color: #546059;
  margin-left: 4px;
}

.bulk-tier-best {
  background: rgba(27, 75, 37, 0.06);
}

.bulk-footnote {
  margin: 12px 0 0 0;
  font-size: 12.5px;
  color: #37433b;
  line-height: 1.45;
}

/* Small-screen safety: keep table clean */
@media (max-width: 480px) {
  .bulk-card-header {
    grid-template-columns: 1fr;
  }
  .bulk-badge {
    width: fit-content;
  }
}


/* =========================================================
   CRITICAL GRID SHRINK FIX (PREVENT OVERLAP)
========================================================= */

.sku-left-col,
.sku-middle-col,
.sku-image-card,
.media-gallery {
  min-width: 0;
}


/* =========================================================
   DESKTOP GRID LAYOUT
========================================================= */

.dls-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 285px;
  gap: 16px;
}

/* =========================================================
   SKU PAGE NEUTRALIZE LEGACY LAYOUT GRID
   (Restore balanced width & centering)
========================================================= */

.sku-page .dls-layout {
  display: block;
}

/* PAGES WITHOUT SIDEBAR (Home, Contact, Return Policy, etc.) */
.no-sidebar .dls-layout {
  display: block;
}



/* =========================================================
   HERO
========================================================= */

.hero {
  text-align: center;
  margin-bottom: 64px;
}

.hero h1 {
  font-size: 28px;
  color: #1b4b25;
  margin-bottom: 12px;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h2 {
  font-size: 23px;
  margin: 40px 0 18px;
}

h3 {
  font-size: 18px;
  margin: 26px 0 14px;
  color: #1b4b25;
}

/* =========================================================
   SECTION SPACING (CONTENT PAGES)
========================================================= */

.dls-main > section {
  padding: 18px 0;
}

.dls-main h2 {
  margin-top: 16px;
  margin-bottom: 8px;
}



/* =========================================================
   SIDEBAR
========================================================= */

/* Right column vertical stack (nav + standalone cards) */
.right-col-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dls-sidebar {
  margin-top: 0;
}

.sidebar-rail {
  background: #fafafa;
  padding: 28px 26px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.sidebar-section + .sidebar-section { margin-top: 28px; }

.sidebar-section h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.sidebar-section ul {
  list-style: disc;
  padding-left: 18px;
}

/* =========================================================
   RESPONSIVE LAYOUT BREAKPOINT (1200px)
========================================================= */

/* =========================
   SKU NAV MOBILE DUPLICATE
========================= */

/* Hide mobile copy by default */
.sku-nav-mobile {
  display: none;
}


@media (max-width: 1200px) {
  .dls-layout { grid-template-columns: 1fr; }
  .dls-sidebar { margin-top: 40px; }
  .sku-nav-mobile {
    display: block;
    margin: 16px 0 24px;
  }
  
  /* Hide original SKU nav on mobile */
  .sku-nav:not(.sku-nav-mobile) {
    display: none;
  }
  
  .sku-right-col { display: none; }
  
  .sku-right-nav-mobile {
    display: block;
    margin: 40px 0 20px 0;
  }
  
  .sku-card {
    padding: 20px;
  }
}

/* =========================================================
   IMAGE GALLERY BASE (ALL SCREENS)
========================================================= */

.media-gallery {
  max-width: 100%;
  margin: 4px 0;
  padding: 24px;
  box-sizing: border-box;
}

.gallery-shell {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f5f5f5;
  overflow: hidden;
}

.gallery-track {
  display: flex;
  height: 100%;
  width: 100%;
  flex-wrap: nowrap;
  transition: transform 0.35s ease;
}

.gallery-item {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

.gallery-controls button {
  font-size: 22px;
  padding: 4px 14px;
  cursor: pointer;
}

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.gallery-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bbb;
  cursor: pointer;
}

.gallery-dot.active { background: #333; }

/* =========================================================
   IMAGE VIEWER (DESKTOP ONLY)
========================================================= */

/* =========================================================
   DESKTOP ONLY (>=1201px)
========================================================= */
@media (min-width: 1201px) {

  /* Hide ALL mobile slider pieces on desktop */
  .gallery-shell,
  .gallery-track,
  .gallery-controls,
  .gallery-dots,
  .gallery-arrow {
    display: none !important;
  }

  /* Desktop hero + thumbs ON */
  .hd-hero,
  .hd-thumbs {
    display: block;
  }
}


/* =========================================================
   MOBILE / 1-COLUMN (<=1200px)
========================================================= */
@media (max-width: 1200px) {

  /* Kill desktop gallery */
  .hd-hero,
  .hd-thumbs {
    display: none !important;
  }

  /* Enable slider */
  .gallery-shell { display: block !important; }
  .gallery-track { display: flex !important; }   /* <-- CRITICAL */
  .gallery-dots  { display: flex !important; }   /* better than block */
  .gallery-arrow { display: grid !important; }   /* so arrows show on mobile */

  /* Make slider visually smaller and calmer */
  .gallery-shell {
    width: 86%;
    max-width: 520px;
    margin: 0 auto;
  }

  /* Flatten ONLY the image card on mobile */
  .sku-image-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  
  .sku-left-col,
  .sku-middle-col {
    gap: 12px;
  }
}



/* Arrow buttons overlayed on the slider (Apple-ish) */
.gallery-shell {
  position: relative;
  border-radius: 14px;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 55px;
  height: 55px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.85);
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.gallery-arrow-left {
  left: -40px;
}

.gallery-arrow-right {
  right: -40px;
}



.gallery-frame {
  position: relative;
  overflow: visible;
}



@media (max-width: 480px) {
  /* Fix 1: Centers the entire project container block to generate equal side whitespace */
  .project-gallery .media-gallery {
    margin: 0 auto !important;
  }

  .gallery-arrow {
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
    background: #ffffff !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; 
  }
  
  /* Fix 2: Slides buttons out to straddle the frame line beautifully using the new side buffers */
  .gallery-arrow-left {
    left: -18px !important; 
  }
  
  .gallery-arrow-right {
    right: -18px !important; 
  }
}



  /* Hero image */
  .hd-hero {
    padding: 8px;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    margin-bottom: 20px;
    overflow: hidden;
  }

  .hd-hero img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 560px;
    object-fit: contain;
  }

  /* Thumbnails */
.hd-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 104px));
  gap: 10px;
  width: 100%;
}

.hd-thumbs img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;

  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  background: #f5f5f5;
  padding: 4px;
  box-sizing: border-box;
}


  .hd-thumbs img.active,
  .hd-thumbs img:hover {
    border-color: #000;
    background: #fff;
}


/* =========================================================
   SKU PURCHASE BLOCK (PRICE + QUANTITY)
========================================================= */

.sku-purchase-block {
  margin-top: 20px;
  display: grid;
  gap: 18px;
}

/* Price row */
.sku-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sku-price {
  font-size: 28px;
  font-weight: 700;
  color: #1b4b25;
}

.sku-unit {
  font-size: 14px;
  color: #555;
}

/* Quantity */
.sku-qty-row label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

/* BUY ROW: quantity + add to cart */
.sku-buy-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

/* tighter quantity selector */
.qty-compact {
  display: flex;
  align-items: center;
}

.qty-compact input {
  width: 52px;
  text-align: center;
}

/* keep add-to-cart strong but not massive */
.sku-primary-btn {
  flex: 1;
  min-height: 44px;
}


.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
  background: #fff;
}

.qty-control input {
  width: 64px;
  height: 44px;
  text-align: center;
  border: none;
  font-size: 16px;
  outline: none;
}

.qty-btn {
  width: 44px;
  height: 44px;
  font-size: 20px;
  border: none;
  background: #f3f3f3;
  cursor: pointer;
  line-height: 1;
}

.qty-btn:hover {
  background: #e6e6e6;
}

/* CTA */
.sku-cta-row {
  margin-top: 4px;
}

.sku-primary-btn {
  width: 100%;
  height: 48px;
  border-radius: 10px;
  border: none;
  background: #1b4b25;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.sku-primary-btn:hover {
  background: #1f8f3a; /* brighter, confident green */
}



/* =========================================================
   EXPANDABLE SECTIONS (SKU DETAIL DIVIDERS)
========================================================= */

.dls-expandable {
  border-top: 1px solid #e3e3e3;
}

.dls-expandable details {
  border-bottom: 1px solid #e3e3e3;
}

.dls-expandable summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303030;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dls-expandable summary::-webkit-details-marker {
  display: none;
}

.dls-expandable summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #1b4b25;
  transition: transform 0.2s ease;
}


/* Open state */
.dls-expandable details[open] summary::after {
  transform: rotate(180deg);
}

/* Content */
.dls-expandable .expandable-content {
  padding: 0 0 20px 0;
  color: #303030;
  line-height: 1.7;
}

/* Optional: tighter lists */
.dls-expandable ul {
  margin: 8px 0 0 18px;
}

/* ===============================================
   LOWE'S-STYLE QUANTITY CONTROL (BUG-FIXED V2)
================================================ */

.qty-lowes {
  display: flex;
  align-items: center;
  height: 40px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

/* Minus and Plus Buttons */
.qty-lowes-btn {
  width: 44px; /* Widened target so your thumb hits it easily */
  height: 40px;
  border: none;
  background: #f6f6f6;
  font-size: 18px;
  cursor: pointer;
  color: #333;
  
  /* Kills the rapid double-tap zoom glitch instantly */
  touch-action: manipulation; 
}

.qty-lowes-btn:hover {
  background: #eaeaea;
}

/* Number Text Box Input */
.qty-lowes-input {
  width: 42px;
  height: 40px;
  border: none;
  text-align: center;
  
  /* Bumping to 16px stops Chrome & Safari from forcing an auto-zoom on click */
  font-size: 16px; 
  outline: none;
}

/* Remove default browser spinner arrows */
.qty-lowes-input::-webkit-outer-spin-button,
.qty-lowes-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-lowes-input[type=number] {
  -moz-appearance: textfield;
}

/* The Row holding the selector and the Green Button */
.sku-buy-row {
  display: flex;
  gap: 16px; /* Pushes the green button further away to protect fat fingers */
}

.sku-primary-btn {
  flex: 1;
  height: 40px;
  font-size: 15px;
  font-weight: 600;
}

/* MOBILE-ONLY BOISE YARD CARD */
.sku-yard-card-mobile {
  display: none;
}

@media (max-width: 1200px) {
  .sku-yard-card-mobile {
    display: block;
    background: #fafafa;
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    padding: 20px;
    margin: 16px 0;
  }
}

/* =========================================================
   HOME PAGE PROJECT GALLERY (SIMPLE)
========================================================= */

.project-gallery {
  padding: 40px 0;
}

.project-gallery .media-gallery {
  max-width: 800px;
  margin-left: 0;       /* left-justified */
  margin-right: auto;
}


.project-gallery .gallery-shell {
  border-radius: 18px;
  aspect-ratio: 4 / 3;
}

.project-gallery .gallery-item img {
  border-radius: 18px;
  object-fit: cover;
}

.project-caption {
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  color: #444;
  line-height: 1.4;
}

.project-gallery .gallery-track {
  flex-direction: row;
}




/* =========================================================
   HOME PAGE PROJECT GALLERY DESKTOP OVERRIDE
========================================================= */

@media (min-width: 1201px) {

  .project-gallery .gallery-shell { 
    display: block !important; 
  }

  .project-gallery .gallery-track { 
    display: flex !important;      /* keep horizontal row */
  }

  .project-gallery .gallery-dots { 
    display: flex !important;      /* keep dots horizontal */
    justify-content: center;
  }

  .project-gallery .gallery-arrow { 
    display: grid !important;      /* keep your arrows */
  }

}


/* =========================================
   PROJECT GALLERY DESKTOP ARROW NUDGE ONLY
   (do not affect mobile)
========================================= */

@media (min-width: 1201px) {
  .project-gallery .gallery-arrow-left {
    left: -77px !important;
  }

  .project-gallery .gallery-arrow-right {
    right: -77px !important;
  }
}

/* =========================================
   PROJECT GALLERY DESKTOP ARROW BREATHING ROOM
========================================= */

@media (min-width: 1201px) {
  .project-gallery .media-gallery {
    margin-left: 35px;
  }
}

/* =========================================
   PROJECT GALLERY SLIDE CAPTION
========================================= */

.project-caption {
  text-align: center;
  margin-top: 16px;
  line-height: 1.35;
}

.project-caption-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1b4b25;
}

.project-caption-location {
  margin-top: 2px;
  font-size: 13px;
  color: #555;
}

/* =========================================================
   LUMBERYARD CALLOUT (CATEGORY PAGES)
========================================================= */

.lumberyard-callout{
  border-left:5px solid #1b4b25;
  background:#f6f8f6;
  padding:16px 18px;

  margin-top:16px;     /* space from heading */
  margin-bottom:12px;  /* space before next section */

  border-radius:4px;
  max-width:760px;
}


.lumberyard-callout strong{
  font-size:17px;
  color:#1b4b25;
}

.lumberyard-callout p{
  margin:4px 0 6px 0;
}

.lumberyard-callout a{
  font-weight:600;
  text-decoration:none;
  color:#1b4b25;
}

.lumberyard-callout a:hover{
  text-decoration:underline;
}

.hidden {
  display: none !important;
}

.cart-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
  opacity: 0;
  transition: opacity 320ms ease;
}

.cart-scrim:not(.hidden) {
  opacity: 1;
}

/* =========================================================
   FIXED ADD TO CART DRAWER (MOBILE-OPTIMIZED)
========================================================= */

.cart-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 34vw);
  min-width: 360px;
  max-width: 100%; 
  box-sizing: border-box; 
  background: #ffffff;
  z-index: 9999;
  
  /*  RECALIBRATED DEFENSIVE BARRIERS */
  transform: translateX(105%);          /* Slides it a tiny bit further away to guarantee a clean off-screen gap */
  visibility: hidden;                   /* Tells iOS to completely stop tracking text width layers when shut */
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), visibility 420ms !important;
  
  box-shadow: -8px 0 28px rgba(0,0,0,0.22);
  padding: 22px;
  overflow-y: auto;
  will-change: transform;
}

/* Ensure it wakes up and registers on screen instantly when the trigger class is present */
.cart-sheet.show {
  transform: translateX(0) !important;
  visibility: visible !important;
}

.cart-sheet.closing {
  transform: translateX(105%) !important;
  visibility: hidden !important;
  transition: transform 320ms ease, visibility 320ms ease !important;
}

.cart-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e5e5;
}

.cart-sheet-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
  color: #1b4b25;
}

.checkmark {
  color: #1f8f3a;
  font-weight: 900;
}

.cart-sheet-close {
  font-size: 30px;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 1;
}

.cart-sheet-body {
  padding: 20px 0;
}

.cart-sheet-name {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 8px;
  overflow-wrap: break-word !important; /* Forces layout bounding boxes to break long word blocks */
  word-break: break-word !important;    /* Absolute safeguard for legacy iOS WebKit webview frames */
}

.cart-sheet-qty,
.cart-sheet-line,
.cart-sheet-subtotal {
  font-size: 14px;
  margin-bottom: 7px;
  color: #333;
}

.cart-sheet-footer {
  position: sticky;
  bottom: -22px;
  background: #ffffff;
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
}

.cart-sheet-subtotal {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 12px;
}

.cart-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-secondary,
.btn-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}

.btn-secondary {
  background: #f3f3f3;
  border: 1px solid #cccccc;
  color: #222;
}

.btn-primary {
  background: #1b4b25;
  color: white;
  border: 1px solid #1b4b25;
}

@media (max-width: 900px) {
  .cart-sheet {
    width: min(460px, 88vw);
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .cart-sheet {
    width: 100vw !important;            /* Clean, edge-locked full-width on phone screens */
    max-width: 100vw !important;        /* Strict safety boundary prevents blowout drift */
    padding: 16px;
  }

  .cart-sheet-actions {
    grid-template-columns: 1fr; 
    gap: 12px;
  }
}

/* =========================================================
   SKU GLOBAL RESPONSIVE REORDERING (MEDIUM & MOBILE <=1200px)
========================================================= */
@media (max-width: 1200px) {
  .sku-middle-col {
    display: flex !important;
    flex-direction: column !important;
  }

  .sku-middle-card {
    order: 1 !important;
  }

  .sku-bulk-discount-card {
    order: 2 !important;
    margin-top: 4px !important;
  }

  .sku-yard-card-mobile {
    order: 3 !important;
  }
}

/* =========================================================
   DYNAMIC LUMBER SOLUTIONS - SYSTEM CHECKOUT ENGINE V11
   (Premium open-air layout spacing & perfect width snaps)
========================================================= */

/* Ensure the notice container block expands to full column track width */
.dls-container:has(form[action="/checkout"]) .hero {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

/* Ensure the header text retains clean spacing alignment metrics */
.dls-container:has(form[action="/checkout"]) .hero h1 {
  font-size: 28px !important;
  color: #1b4b25 !important;
  margin: 0 0 16px 0 !important; 
  line-height: 1.2 !important;
}

/* 2. RECONSTRUCT FULFILLMENT INPUT FIELDS */
#deliveryAddress {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

#deliveryAddress label.hero-sub {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 700;
  font-size: 14px;
  color: #222;
}

#deliveryAddress input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 44px;
  border: 1px solid #cccccc;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 16px; 
  box-sizing: border-box;
}

#deliveryAddress select {
  width: 100%;
  height: 44px;
  border: 1px solid #cccccc;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 16px;
  background-color: #ffffff;
  box-sizing: border-box;
}

/* 3. MOBILE TABLE BREAKDOWN (TARGETING SCREENS <= 768px) */
@media (max-width: 768px) {
  main.dls-main section[style*="background:#f7f7f7"],
  main.dls-main section[style*="background: #f7f7f7"] {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  main.dls-main table, 
  main.dls-main thead, 
  main.dls-main tbody, 
  main.dls-main th, 
  main.dls-main td, 
  main.dls-main tr {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  main.dls-main thead {
    display: none !important;
  }

  main.dls-main tr[class^="SclRw"] {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04) !important; 
    padding: 16px !important; 
    margin-bottom: 16px !important; 
    position: relative;
    overflow: hidden;
    text-align: left !important;
  }

  main.dls-main tr[class^="SclRw"] font {
    font-size: 14px !important;
  }

  main.dls-main tr[class^="SclRw"] td:nth-of-type(1) {
    display: none !important;
  }

  main.dls-main tr[class^="SclRw"] td:nth-of-type(3) {
    display: block !important;
    text-align: center !important;
    width: calc(100% + 32px) !important; 
    margin: -16px -16px 14px -16px !important; 
    background: rgba(27, 75, 37, 0.06) !important; 
    padding: 12px 16px !important; 
    border-bottom: 1px solid rgba(27, 75, 37, 0.12) !important; 
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1b4b25 !important; 
    line-height: 1.4;
    position: relative !important;
  }
  
  main.dls-main tr[class^="SclRw"] td:nth-of-type(3) font {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1b4b25 !important;
  }

  main.dls-main tr[class^="SclRw"] td:nth-of-type(4),
  main.dls-main tr[class^="SclRw"] td:nth-of-type(5) {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin-right: 16px !important;
    margin-bottom: 6px !important;
    vertical-align: middle !important;
  }
  
  main.dls-main tr[class^="SclRw"] td input[type="number"] {
    height: 34px !important;
    width: 52px !important;
    border: 1px solid #cccccc !important;
    border-radius: 6px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700;
    box-sizing: border-box;
    margin: 0 4px !important;
  }
  
  main.dls-main tr[class^="SclRw"] td:nth-of-type(4)::before {
    content: "Qty: ";
    font-weight: 600;
    color: #555;
  }

  main.dls-main tr[class^="SclRw"] td:nth-of-type(6) {
    display: block !important;
    clear: both !important;
    text-align: left !important;
    font-size: 14px !important;
    color: #444 !important;
    margin-bottom: 4px !important;
    padding: 2px 0 !important;
  }
  main.dls-main tr[class^="SclRw"] td:nth-of-type(6)::before {
    content: "Item Weight: ";
    font-weight: 600;
    color: #555;
  }
  main.dls-main tr[class^="SclRw"] td:nth-of-type(6)::after {
    content: " Lbs";
  }

  main.dls-main tr[class^="SclRw"] td:nth-of-type(7),
  main.dls-main tr[class^="SclRw"] td:nth-of-type(8) {
    display: inline-block !important;
    width: auto !important;
    font-size: 14px !important;
    margin-bottom: 12px !important; 
  }
  main.dls-main tr[class^="SclRw"] td:nth-of-type(7)::before {
    content: "Rate: $";
    font-weight: 600;
    color: #555;
  }
  main.dls-main tr[class^="SclRw"] td:nth-of-type(7) font {
      font-weight: 700;
  }

  main.dls-main tr[class^="SclRw"] td:nth-of-type(9) {
    display: block !important;
    text-align: right !important;
    font-size: 15px !important; 
    font-weight: normal !important; 
    margin-top: 4px;
    padding-top: 12px !important;
    border-top: 1px dashed #eef2ef !important; 
  }
  main.dls-main tr[class^="SclRw"] td:nth-of-type(9)::before {
    content: "Line Total: $";
    font-size: 15px !important; 
    font-weight: normal !important; 
    color: #444 !important; 
  }
  main.dls-main tr[class^="SclRw"] td:nth-of-type(9) font {
    font-size: 15px !important; 
  }

  main.dls-main tr[class^="SclRw"] td:nth-of-type(2) {
    text-align: left !important;
    position: absolute !important;
    bottom: 14px !important; 
    left: 16px !important;
    width: auto !important;
    z-index: 10;
    top: auto !important;
    right: auto !important;
  }
  main.dls-main tr[class^="SclRw"] td:nth-of-type(2) input[type="SUBMIT"] {
    background: #f4f4f5;
    color: #4b5563;
    border: 1px solid #d1d5db;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
  }

  main.dls-main tr[class^="SclRw"] font[color="red"],
  main.dls-main tr[class^="SclRw"] font[style*="red"] {
    color: #222 !important;
  }

  main.dls-main tr[class^="SclRw"]:has(font[color="red"]),
  main.dls-main tr[class^="SclRw"]:has(font[style*="red"]) {
    position: relative !important;
  }

  /* Defensive barrier: Prevents length numbers from slamming into the badge on narrow 360px viewports */
  main.dls-main tr[class^="SclRw"]:has(font[color="red"]) td:nth-of-type(5),
  main.dls-main tr[class^="SclRw"]:has(font[style*="red"]) td:nth-of-type(5) {
    margin-right: 78px !important;
  }

  main.dls-main tr[class^="SclRw"]:has(font[color="red"]) td:nth-of-type(3)::before,
  main.dls-main tr[class^="SclRw"]:has(font[style*="red"]) td:nth-of-type(3)::before {
    content: "Discount Applied" !important;       
    display: block !important;
    text-align: center !important;                 
    position: absolute !important;
    top: 100% !important;
    margin-top: 12px !important;
    bottom: auto !important;
    right: 10px !important;
    width: 68px !important;                        
    box-sizing: border-box !important;
    background: rgba(255, 0, 0, 0.05) !important;  
    color: red !important;                         
    border: 1px solid rgba(255, 0, 0, 0.15) !important; 
    padding: 6px 4px !important;                  
    border-radius: 8px !important;
    font-size: 10.5px !important;                  
    line-height: 1.3 !important;                    
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
  }

  main.dls-main tr:has(.SclFldDatLightBlue) {
    background: #eef2ef !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  main.dls-main tr:has(.SclFldDatLightBlue) td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    position: static !important;
    height: auto !important;
  }
  
  main.dls-main tr:has(.SclFldDatLightBlue) td:empty,
  main.dls-main tr:has(.SclFldDatLightBlue) td:nth-of-type(1),
  main.dls-main tr:has(.SclFldDatLightBlue) td:nth-of-type(2),
  main.dls-main tr:has(.SclFldDatLightBlue) td:nth-of-type(4),
  main.dls-main tr:has(.SclFldDatLightBlue) td:nth-of-type(6) {
    display: none !important;
  }
  
  /* Restores your original, clean horizontal layout for standard mobile screens */
main.dls-main tr:has(.SclFldDatLightBlue) td:nth-of-type(5),
main.dls-main tr:has(.SclFldDatLightBlue) td:nth-of-type(7) {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 18px !important; 
  color: #222 !important; 
  font-weight: 700 !important; 
}

/*  MICRO-BREAKPOINT: Splitting the label text into 2 lines on screens under 360px wide */
@media (max-width: 360px) {
  /* 1. Pulls the single-line price down to align perfectly with the bottom line of text */
  main.dls-main tr:has(.SclFldDatLightBlue) td:nth-of-type(7) {
    align-items: flex-end !important;
  }

  /* 2. Overrides the label text string to split onto two lines using a CSS carriage return (\A) */
  main.dls-main tr:has(.SclFldDatLightBlue) td:nth-of-type(7)::before {
    content: "Product Total\A Before Tax:" !important;
    white-space: pre-line !important; /* Forces the browser to process and render the line break */
    line-height: 1.3 !important;
    text-align: left !important;
  }
}
  
  main.dls-main tr:has(.SclFldDatLightBlue) td font,
  main.dls-main tr:has(.SclFldDatLightBlue) td::before,
  main.dls-main tr:has(.SclFldDatLightBlue) td::after {
    font-size: inherit !important;
    font-weight: 700 !important; 
    color: #222 !important; 
  }

  main.dls-main tr:has(.SclFldDatLightBlue) td:nth-of-type(5) {
    justify-content: flex-start !important;
  }
  main.dls-main tr:has(.SclFldDatLightBlue) td:nth-of-type(5)::before {
    margin-right: auto !important;
  }
  
  main.dls-main tr:has(.SclFldDatLightBlue) td:nth-of-type(7) font::before {
    content: "$" !important;
    font-weight: 700 !important;
  }

  main.dls-main table tr:nth-last-of-type(2):has(.SclFldDatLightBlue) {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    border: 1px solid rgba(27, 75, 37, 0.15) !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 16px 16px 5px 16px !important; 
  }
  main.dls-main table tr:nth-last-of-type(2):has(.SclFldDatLightBlue) td:nth-of-type(3) b {
    font-size: 0 !important;
    display: block !important;
  }
  main.dls-main table tr:nth-last-of-type(2):has(.SclFldDatLightBlue) td:nth-of-type(3) b font {
    font-size: 13px !important;
    color: red !important;
    font-weight: 700 !important;
    display: block !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
  }
  main.dls-main table tr:nth-last-of-type(2):has(.SclFldDatLightBlue) td:nth-of-type(5)::before {
    content: "Total Weight:";
  }
  main.dls-main table tr:nth-last-of-type(2):has(.SclFldDatLightBlue) td:nth-of-type(5)::after {
    content: " Lbs";
  }
  main.dls-main table tr:nth-last-of-type(2):has(.SclFldDatLightBlue) td:nth-of-type(7)::before {
    content: "Product Total Before Tax:";
  }
  
  main.dls-main table tr:nth-last-of-type(2):has(.SclFldDatLightBlue) + tr {
    margin-top: -6px !important; 
    border: 1px solid rgba(27, 75, 37, 0.15) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    margin-bottom: 16px !important;
    padding: 5px 16px 16px 16px !important; 
  }
  main.dls-main table tr:nth-last-of-type(2):has(.SclFldDatLightBlue) + tr td:nth-of-type(3) {
    display: none !important;
  }
  main.dls-main table tr:nth-last-of-type(2):has(.SclFldDatLightBlue) + tr td:nth-of-type(7) font {
    font-size: 18px !important;  
  }
  main.dls-main table tr:nth-last-of-type(2):has(.SclFldDatLightBlue) + tr td:nth-of-type(7)::before {
    content: "Shipment Cost:";
    font-size: 18px;            
  }
  
  main.dls-main table tr:last-of-type:not(:nth-last-of-type(2):has(.SclFldDatLightBlue) + tr) {
    margin-top: 24px !important;
    border: 1px solid rgba(27, 75, 37, 0.15) !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    padding: 16px !important;
  }
  main.dls-main table tr:last-of-type:not(:nth-last-of-type(2):has(.SclFldDatLightBlue) + tr) td:nth-of-type(3) b {
    font-size: 0 !important;
    display: block !important;
  }
  main.dls-main table tr:last-of-type:not(:nth-last-of-type(2):has(.SclFldDatLightBlue) + tr) td:nth-of-type(3) b font {
    font-size: 13px !important;
    color: red !important;
    font-weight: 700 !important;
    display: block !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
  }
  main.dls-main table tr:last-of-type:not(:nth-last-of-type(2):has(.SclFldDatLightBlue) + tr) td:nth-of-type(5)::before {
    content: "Total Weight:";
  }
  main.dls-main table tr:last-of-type:not(:nth-last-of-type(2):has(.SclFldDatLightBlue) + tr) td:nth-of-type(5)::after {
    content: " Lbs";
  }
  main.dls-main table tr:last-of-type:not(:nth-last-of-type(2):has(.SclFldDatLightBlue) + tr) td:nth-of-type(7)::before {
    content: "Product Total Before Tax:";
    font-size: 18px; 
  }

  main.dls-main section > div[style*="display:flex"] {
    flex-direction: column-reverse !important;
    gap: 14px !important;
    align-items: stretch !important;
    margin-top: 20px !important;
  }
  main.dls-main section > div[style*="display:flex"] .btn-primary {
    width: 75% !important;     
    display: flex !important;   
    justify-content: center !important; 
    align-items: center !important;     
    margin: 0 auto !important;  
    height: 50px !important;            
    font-size: 21px !important;         
    font-weight: 700 !important;        
    letter-spacing: 0.3px !important;   
  }
}

/* CART MOBILITY POLISH */
@media (max-width: 768px) {
  main.dls-main tr[class^="SclRw"] td:nth-of-type(5) font {
    font-size: 0 !important;
  }
  
  main.dls-main tr[class^="SclRw"] td:nth-of-type(5) input {
    font-size: 15px !important;
    margin: 0 2px !important; 
  }

  main.dls-main tr[class^="SclRw"] td:nth-of-type(4)::before {
    content: "Qty: " !important;
    font-weight: 600 !important;
    color: #555555 !important;
    font-size: 14px !important;
  }

  main.dls-main tr[class^="SclRw"] td:nth-of-type(4) {
    margin-right: -3px !important; 
  }

  main.dls-main tr[class^="SclRw"] td:nth-of-type(5)::before {
    content: "Length: " !important;
    font-weight: 600 !important;
    color: #555555 !important;
    font-size: 14px !important;
    margin-left: 3px !important; 
  }

  main.dls-main tr[class^="SclRw"] td:nth-of-type(5)::after {
    content: " Ft" !important;
    font-weight: 600 !important;
    color: #555555 !important;
    font-size: 14px !important;
    margin-left: 1px !important; 
  }
}

/* =========================================================
   DYNAMIC LUMBER SOLUTIONS - CHECKOUT DATA ENTRY OVERHAUL
========================================================= */

/* 1. Establish the clean, spacious container card (Zero top margin) */
main.dls-main form[action="/checkout"] {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  padding: 28px !important;
  margin: 0 0 28px 0 !important; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important; 
  width: 100% !important;
  box-sizing: border-box !important; 
}

/* 2. Style input labels to look clean, uniform, and bold */
main.dls-main form[action="/checkout"] label {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #222222 !important;
  display: block !important;
  margin-top: 10px !important;
  margin-bottom: 2px !important;
}

main.dls-main form[action="/checkout"] label.hero-sub {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. Transform the inputs into uniform, high-end fields */
main.dls-main form[action="/checkout"] input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;      
  height: 44px !important;
  border: 1px solid #cccccc !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  transition: border-color 0.15s ease !important;
}

main.dls-main form[action="/checkout"] input[type="text"]:focus {
  border-color: #1b4b25 !important; 
  outline: none !important;
}

/* 4. Clean up the Action Buttons to match your premium main CTA style */
main.dls-main form[action="/checkout"] button[type="submit"] {
  background: #1b4b25 !important;
  color: #ffffff !important;
  border: 1px solid #1b4b25 !important;
  min-height: 44px !important;
  padding: 12px 28px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  width: fit-content !important;
  margin-top: 18px !important;
  text-transform: none !important;
  transition: background-color 0.15s ease !important;
}

main.dls-main form[action="/checkout"] button[type="submit"]:hover {
  background: #1f8f3a !important;
}

@media (max-width: 768px) {
  main.dls-main form[action="/checkout"] {
    padding: 20px !important;
    margin-top: 14px !important;
  }
}

/* =========================================================
   CHECKOUT BACK-TO-CART LINK STYLING
========================================================= */

.back-link-wrapper {
  margin-bottom: 14px;
  display: block;
}

.checkout-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #666666 !important; 
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: color 0.15s ease !important;
}

.checkout-back-link:hover {
  color: #1b4b25 !important; 
  text-decoration: underline !important;
}

/* =========================================================
   CART PAGE BACK-TO-SHOPPING LINK
========================================================= */
.cart-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #666666 !important; 
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: color 0.15s ease !important;
  margin-bottom: 10px !important;
}

.cart-back-link:hover {
  color: #1b4b25 !important; 
  text-decoration: underline !important;
}

/* =========================================================
   DYNAMIC LUMBER SOLUTIONS - WIDESCREEN CHECKOUT ENGINE
========================================================= */

@media (min-width: 1201px) {
  .dls-container:has(form[action="/checkout"]) {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 24px !important;
  }

  .dls-layout:has(form[action="/checkout"]) {
    grid-template-columns: 420px 640px !important; 
    gap: 24px !important; /*  FIX: Narrowed center corridor pulls panels tightly together */
    justify-content: center !important;
    align-items: start !important;
  }

  /* COLUMN TRACK SNAP: Natively forces left column layout bounds to tightly lock */
  .dls-layout:has(form[action="/checkout"]) main.dls-main,
  .dls-layout:has(form[action="/checkout"]) main.dls-main form[action="/checkout"],
  .dls-layout:has(form[action="/checkout"]) ul.hero-sub {
    width: 420px !important;
    max-width: 420px !important;
  }
}

/* =========================================================
   CHECKOUT SIDEBAR MANIFEST CARD OVERHAUL (ISOLATED)
========================================================= */

.dls-layout:has(form[action="/checkout"]) .dls-sidebar {
  background: transparent !important; 
  border: none !important;             
  box-shadow: none !important;         
  padding: 0 !important;               
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar section[style*="background"] {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar table, 
.dls-layout:has(form[action="/checkout"]) .dls-sidebar thead, 
.dls-layout:has(form[action="/checkout"]) .dls-sidebar tbody, 
.dls-layout:has(form[action="/checkout"]) .dls-sidebar th, 
.dls-layout:has(form[action="/checkout"]) .dls-sidebar td, 
.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar thead {
  display: none !important; 
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] {
  position: relative !important;
  background: #fafafa !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  text-align: left !important;
  line-height: 1.4 !important; 
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(1) {
  display: none !important;
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(2) {
  display: block !important;
  width: 100% !important;
  font-size: 13.5px !important; 
  font-weight: 700 !important;
  color: #222222 !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  margin: 0 0 4px 0 !important;
  border: none !important;
  white-space: nowrap !important; 
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(3),
.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(4),
.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(6),
.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(7) {
  display: inline !important;
  width: auto !important;
  font-size: 12.5px !important;
  color: #222222 !important; 
  padding: 0 !important;
  margin: 0 !important;
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(3)::before { content: "Qty: "; font-weight: 600; }
.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(4) { margin-left: 2px !important; }
.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(6)::before { content: " @ " !important; font-weight: 500; }
.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(7) { margin-left: 2px !important; }

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(5) {
  display: none !important; 
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(8) {
  position: absolute !important;
  right: 16px !important;
  bottom: 12px !important;
  width: auto !important;
  text-align: right !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #222222 !important;
  padding: 0 !important;
  border: none !important;
}
.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(8)::before {
  content: "Total: $" !important; 
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #666666 !important;
  margin-right: 2px !important;
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(4):has(input[type="hidden"]),
.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(5):empty {
  display: none !important;
}

/* =========================================================
   FINANCIAL REPORT SUMMARY RECEIPT (PERFECTLY ALIGNED)
========================================================= */

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr:has(.SclFldDatLightBlue) {
  display: flex !important;
  justify-content: space-between !important; 
  align-items: center !important;
  padding: 8px 16px !important; 
  border-bottom: 1px dashed #e5eae5 !important;
  background: transparent !important;
  margin: 0 !important;
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr:has(.SclFldDatLightBlue) td {
  display: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr:has(.SclFldDatLightBlue) td:has(b),
.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr:has(.SclFldDatLightBlue) td[align="right"]:last-of-type {
  display: flex !important;
  width: auto !important;
  font-size: 13px !important;
  color: #444444 !important;
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr:has(.SclFldDatLightBlue) td b {
  font-weight: 500 !important;
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr:has(.SclFldDatLightBlue) td font {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #222222 !important;
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr:has(.SclFldDatLightBlue) td[align="right"]:last-of-type font::before {
  content: "$" !important;
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td font[color="red"],
.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr:has(.SclFldDatLightBlue):not(:last-of-type) td font[color="red"],
.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr:has(.SclFldDatLightBlue):not(:last-of-type) td:has(font[color="red"]) b {
  color: red !important;
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr:has(.SclFldDatLightBlue):last-of-type {
  border-top: 2px solid #222222 !important; 
  border-bottom: none !important;
  padding-top: 14px !important;
  margin-top: 10px !important;
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr:has(.SclFldDatLightBlue):last-of-type td:has(b) b {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1b4b25 !important;
}

.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr:has(.SclFldDatLightBlue):last-of-type td[align="right"]:last-of-type font,
.dls-layout:has(form[action="/checkout"]) .dls-sidebar tr:has(.SclFldDatLightBlue):last-of-type td[align="right"]:last-of-type font[color="red"] {
  font-size: 22px !important; 
  font-weight: 800 !important;
  color: #222222 !important; 
}

@media (max-width: 1200px) {
  /* 1. Convert the main layout chassis into a vertical flex stack */
  .dls-layout:has(form[action="/checkout"]) {
    display: flex !important;           
    flex-direction: column !important;  
    gap: 24px !important;
  }
  
  /* 2. Dissolve the main container box so its children can sort inline */
  .dls-layout:has(form[action="/checkout"]) main.dls-main {
    display: contents !important; 
  }

  /* POSITION 1: Return to Cart, Checkout Header, & Pickup notice box */
  .dls-layout:has(form[action="/checkout"]) .hero {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* POSITION 2: Itemized material manifest cards & totals summary receipt */
  .dls-layout:has(form[action="/checkout"]) .dls-sidebar {
    order: 2 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; 
    width: 100% !important;
    max-width: 100% !important;
  }

  /* POSITION 3: Customer personal info entry form fields card box */
  .dls-layout:has(form[action="/checkout"]) form[action="/checkout"] {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 14px !important;
  }

  /* POSITION 4: Secure Stripe credit card element form portal block */
  .dls-layout:has(form[action="/checkout"]) #payment-form {
    order: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Keep your clean responsive mobile item table card styles intact */
  .dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(2) {
    white-space: normal !important;
    margin-bottom: 8px !important;
  }
  
  .dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] {
    padding: 16px !important;
  }

  .dls-layout:has(form[action="/checkout"]) .dls-sidebar tr[class^="SclRw"] td:nth-of-type(8) {
    position: static !important;
    display: block !important;
    width: 100% !important;
    text-align: right !important; 
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px dashed #e2e8e2 !important; 
  }
}

/* =========================================================
   Location CATEGORY GRIDS
========================================================= */
.category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.category-card {
  width: 260px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.category-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  transition: none !important;
}

/* Hover pop animations completely disabled to prevent tacky movement elements */
.category-card a:hover img {
  transform: none !important;
  box-shadow: none !important;
}

.category-card h3 {
  margin: 12px 0 6px 0 !important;
  color: #1b4b25;
}

.category-card p {
  font-size: 0.9em;
  color: #555;
  margin: 0;
  line-height: 1.4;
}

/* Mobile Responsive Realignment (Screens <= 768px) */
@media (max-width: 768px) {
  .category-grid {
    gap: 30px; 
    padding: 0 15px;
  }
  
  .category-card {
    width: 100% !important;   
    max-width: 340px !important; 
    margin: 0 auto !important;   
  }
  
  .category-card img {
    height: 200px; 
  }
}

/* =========================================================
    MOBILE-ONLY FROSTED GLASS STICKY HEADER SYSTEM
========================================================= */
@media (max-width: 1200px) {
  
  /* 1. COMPACT EDGE-TO-EDGE TRUE FROSTED GLASS TRACK */
  .top-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    height: 56px !important;              /* Taller vertical corridor profile (+20%) */
    padding: 0 20px !important;            /* Pulls assets 8px further away from viewport frame lines */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    
    /* Frosted Glass Core Engine Effects */
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important; /* iOS Native WebKit Safetynet */
    
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01) !important;
  }

  /* 2. LOGO PROFILE HEIGHT CONTROLLER (Retained proportions) */
  .nav-logo {
    height: 28px !important;               /* Sits short, sharp, and centered in the 56px track */
    width: auto !important;
    object-fit: contain !important;
    background-color: transparent !important; 
  }

  /* 3. RIGHT-ALIGNED INTERFACE TOOLS CONTAINER */
  .mobile-nav-tools {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;                  /* Wider horizontal buffer track blocks finger misclicks */
    height: 100% !important;
    
    transform: translateY(2px) !important; /* Drops the entire right block down 2px to balance top/bottom whitespace */
  }

  /* 4. FLATBED TRUCK CLICK ZONE */
  .mobile-cart-wrap {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    text-decoration: none !important;
    height: 36px !important;
    width: 36px !important;
    justify-content: center !important;
  }

  .mobile-cart-wrap img {
    height: 29px !important;               /* Upscaled truck graphic asset (+15%) */
    width: auto !important;    
  }

  /* 5. FLOATING PILL ITEM COUNTER BADGE */
  #field2 {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: #1b4b25 !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 3px !important;
    border-radius: 99px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -2px !important;                  /* Recalibrated offset to anchor nicely on the 29px truck */
    right: -4px !important;
    box-sizing: border-box !important;
    border: 1px solid #ffffff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
  }

  /* 6. ENLARGED NATIVE HAMBURGER INTERFACE */
  .hamburger {
    display: flex !important;              /* Flex layout forces explicit alignment matrix */
    align-items: center !important;
    justify-content: center !important;
    font-size: 34px !important;            /* Upscaled typography line weights (+20%) */
    color: #1f2420 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    line-height: 1 !important;             /* Eliminates line height padding overrides inside iOS */
    height: 36px !important;
    width: 36px !important;
    background: none !important;
    border: none !important;
  }
}

/* =========================================================
    DEFENSIVE DESKTOP HIDING (KEEPS MOBILE TOOLS IN CHECK)
========================================================= */
.mobile-nav-tools {
  display: none;
}

/* =========================================================
    AUTOMATED CART BADGE EMPTY-STATE INJECTION
========================================================= */
#field1:empty::before, 
#field2:empty::before {
  content: "0" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================================
   MOBILE VIEWPORT DRIFT PROTECTION (IPHONE ENGINE FIX)
========================================================= */
@media (max-width: 520px) {
  body {
    overflow-x: hidden !important;
    position: relative;
  }
  .dls-container {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* =========================================================
   DYNAMIC ERROR OVERRIDE (SURGICAL ALERT FIX)
========================================================= */
#deliveryAddress span span a {
  color: #b30000 !important;             /* Deep Alert Red Text */
  background-color: #fff0f0 !important;   /* Soft Pink Warning Box */
  border: 1px solid #ffb3b3 !important;  /* Clean Red Border */
  font-weight: 800 !important;
  padding: 1px 4px !important;           /* Tight defensive padding */
  border-radius: 4px !important;         /* Matches your UI language */
  text-decoration: none !important;      /* Kills standard link underlines */
}

/* =========================================================
   GLOBAL SKU ZOOM IMMUNIZATION SAFETY NET
========================================================= */
@media (max-width: 1200px) {
  /* Forces EVERY input field in the buying zone (Pieces, Length, Quantities) to 16px to kill all auto-zooming */
  .sku-purchase-block input,
  .sku-buy-row input,
  .qty-compact input,
  .qty-lowes-input {
    font-size: 16px !important;
  }
}

/* =========================================================
   UX FIX: SCORING RULES EXCLUSIVELY FOR STANDARD LUMBER (LMB)
========================================================= */
@media (max-width: 1200px) {
  /* TARGET ONLY CORES: This targets single-row setups on standard 
     dimensional wood, completely ignoring engineered text clusters */
  body .sku-purchase-block:not(:has(#dsgCd[value="IJOIST"])):not(:has(#dsgCd[value="LVL"])):not(:has(#dsgCd[value="GLM"])) .sku-buy-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    margin-left: -1px !important; /* Perfect left justification baseline alignment */
    padding-left: 0 !important;
    gap: 27px !important; 
  }

  /* Keep core selector inputs uniform across all product tracks */
  body .qty-lowes {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    flex-shrink: 0 !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  
  body .qty-lowes-input {
    height: 44px !important;
    font-size: 16px !important;
  }

  /* Target buttons on standard single-row layouts specifically */
  body .sku-purchase-block:not(:has(#dsgCd[value="IJOIST"])):not(:has(#dsgCd[value="LVL"])):not(:has(#dsgCd[value="GLM"])) .sku-primary-btn {
    flex: none !important;
    width: 106px !important; /* Your exact calibrated button footprint */
    height: 44px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* =========================================================
     CLEANUP RULES FOR ENGINEERED STRUCTURAL PAGES (I-JOISTS & BEAMS)
     ========================================================= */

  /* Fix the flex container row layout properties natively */
  body .sku-purchase-block:has(#dsgCd[value="IJOIST"]) .sku-buy-row:first-of-type,
  body .sku-purchase-block:has(#dsgCd[value="LVL"]) .sku-buy-row:first-of-type,
  body .sku-purchase-block:has(#dsgCd[value="GLM"]) .sku-buy-row:first-of-type {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Forces them to stay side-by-side on one clean line */
    align-items: center !important;
    justify-content: flex-start !important; /* Aligns the data pairs compactly to the left */
    gap: 8px !important; /* Perfect tight layout gap between text labels and field boxes */
    margin-left: 0 !important;
    padding-left: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #222 !important;
  }

  /* SQUASH INVISIBLE FLEX ITEMS (ENGINEERED ONLY): 
     Hides the empty spans specifically on these pages so it cannot 
     shift the layout on your standard dimensional lumber pages. */
  body:has(#dsgCd[value="IJOIST"]) #qtyMsgContainer:empty,
  body:has(#dsgCd[value="IJOIST"]) #lngMsgContainer:empty,
  body:has(#dsgCd[value="LVL"]) #qtyMsgContainer:empty,
  body:has(#dsgCd[value="LVL"]) #lngMsgContainer:empty,
  body:has(#dsgCd[value="GLM"]) #qtyMsgContainer:empty,
  body:has(#dsgCd[value="GLM"]) #lngMsgContainer:empty {
    display: none !important;
  }

  /* TARGET THE parent wrappers: Lock container width so boxes stay compact 
     and naturally sit right next to their corresponding labels */
  body .sku-purchase-block:has(#dsgCd[value="IJOIST"]) .sku-buy-row:first-of-type .qty-lowes,
  body .sku-purchase-block:has(#dsgCd[value="LVL"]) .sku-buy-row:first-of-type .qty-lowes,
  body .sku-purchase-block:has(#dsgCd[value="GLM"]) .sku-buy-row:first-of-type .qty-lowes {
    width: 52px !important; 
    min-width: 52px !important; /* FIX: Locks the minimum size */
    max-width: 52px !important; /* FIX: Stops it from stretching into a wide rectangle */
    height: 40px !important;
    flex-shrink: 0 !important;
    margin-right: 16px !important; /* Generates perfect breathing room before the word "Length" begins */
  }

  /* Stabilize the input texts inside the frames */
  body .sku-purchase-block:has(#dsgCd[value="IJOIST"]) .qty-lowes-input,
  body .sku-purchase-block:has(#dsgCd[value="LVL"]) .qty-lowes-input,
  body .sku-purchase-block:has(#dsgCd[value="GLM"]) .qty-lowes-input {
    width: 100% !important;
    max-width: 52px !important; /* FIX: Stops the inner input from stretching out */
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 16px !important;
  }

  /* Keep engineered Add to Cart buttons balanced inside the container layout framing */
  body .sku-purchase-block:has(#dsgCd[value="IJOIST"]) .sku-primary-btn,
  body .sku-purchase-block:has(#dsgCd[value="LVL"]) .sku-primary-btn,
  body .sku-purchase-block:has(#dsgCd[value="GLM"]) .sku-primary-btn {
    width: 100% !important;
    max-width: 280px !important;
    height: 44px !important;
    margin: 8px 0 0 0 !important;
  }
}

/* =========================================================
   DLS PREMIUM DYNAMIC FULFILLMENT WIDGET CLASSES
========================================================= */

.dls-fulfillment-widget {
  margin-top: 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.dls-fulfillment-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.dls-fulfillment-card {
  flex: 1;
  min-width: 280px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: start;
  gap: 12px;
  box-sizing: border-box;
}

.dls-fulfillment-icon-wrap {
  color: #1b4b25;
  margin-right: 2px;
  font-size: 20px;
  line-height: 1;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: -2px;
}

.dls-fulfillment-content {
  flex-grow: 1;
}

.dls-fulfillment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.dls-fulfillment-title {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.5px;
}

.dls-fulfillment-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

/* Unified Light Green Badge Style for Both Cards */
.dls-fulfillment-badge.badge-free,
.dls-fulfillment-badge.badge-flat {
  background-color: rgba(27, 75, 37, 0.08);
  color: #1b4b25;
  border: 1px solid rgba(27, 75, 37, 0.15);
}

.dls-fulfillment-date-label {
  font-size: 14px;
  font-weight: 800;
  color: #111;
  display: block;
  margin-top: 6px;
  line-height: 1.4;
}

.dls-fulfillment-date {
  color: #1b4b25;
  font-size: 16px;
  display: block;
  margin-top: 2px;
}

.dls-fulfillment-bullets {
  margin: 6px 0 0 0;
  padding-left: 16px;
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
  list-style-type: disc;
}

.dls-fulfillment-bullets li {
  margin-bottom: 4px;
}

.dls-fulfillment-bullets li:last-child {
  margin-bottom: 0;
}

/* =========================================================
   DYNAMIC LUMBER SOLUTIONS - CART FULFILLMENT SELECTOR WIDGET
========================================================= */

.dls-fulfillment-selection-zone {
  margin-bottom: 20px;
}

.dls-radio-label {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #222222 !important;
  cursor: pointer;
  margin-right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dls-cart-widget-panel {
  margin: 16px auto 10px auto;
  padding: 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.01);
  text-align: left;
  max-width: 100%;
  box-sizing: border-box;
}

.dls-widget-primary-row {
  font-weight: 700;
  color: #1b4b25;
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.4;
}

.dls-widget-date {
  text-decoration: none;
}

.dls-widget-muted {
  font-weight: 400;
  font-size: 13px;
  color: #666666;
  margin-left: 2px;
}

.dls-widget-secondary-row {
  font-size: 14px;
  color: #4a5568;
  font-weight: 600;
}

.dls-widget-error-row {
  color: #b30000;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
}

/* =========================================================
   DYNAMIC LUMBER SOLUTIONS - RESPONSIVE DIVIDER ENGINE
========================================================= */

/* Default state: Hide completely on widescreen/desktop views */
.dls-mobile-divider {
  display: none;
}

/* Tablet and Mobile viewports: Turn on the elegant divider line */
@media (max-width: 1200px) {
  .dls-mobile-divider {
    display: block;
    border-top: 1px solid #e2e8f0;
    margin: 28px 0; /* Expanded symmetric cushion solves the congestion loop */
    width: 100%;
    height: 0;
  }
}