/* =========================================================================
   CACTUS CONTAINERS — Catalog layer
   Interior page hero + accessory / add-on cards.
   Loads AFTER styles.css + cinematic.css. Uses existing tokens only.
   ========================================================================= */

/* =======================  INTERIOR PAGE HERO  ======================= */
.page-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(80% 130% at 88% 0%,rgba(87, 118, 86,.30),transparent 60%),
    radial-gradient(60% 120% at 0% 100%,rgba(59,110,165,.20),transparent 62%);
}
.page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(79,194,180,.55),transparent);
}
.page-hero .container{position:relative;z-index:4;padding-block:clamp(38px,5.6vw,68px)}
.page-hero h1{
  font-family:var(--font-display);font-weight:900;color:#fff;
  font-size:clamp(30px,4.6vw,52px);letter-spacing:-.03em;line-height:1.04;margin-top:16px;
}
.page-hero h1 em{font-style:normal;color:var(--sage-400)}
.page-hero .lead{color:rgba(255,255,255,.78);margin-top:16px;max-width:58ch}
.page-hero .ph-inner{max-width:760px}

/* breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.55);margin-bottom:20px}
.crumbs a{color:rgba(255,255,255,.66);transition:color .2s}
.crumbs a:hover{color:#fff}
/* aria-hidden in the markup, but still rendered text: .28 was 2.52:1 on --ink. */
.crumbs .sep{color:rgba(255,255,255,.5)}
.crumbs [aria-current="page"]{color:var(--sage-400);font-weight:600}

/* =======================  AVAILABILITY NOTICE  ======================= */
.acc-notice{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.acc-note{
  display:flex;gap:16px;align-items:flex-start;padding:22px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.acc-note .n-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.acc-note .n-ico svg{width:21px;height:21px}
.acc-note.live{border-color:rgba(87, 118, 86,.34)}
.acc-note.live .n-ico{background:rgba(87, 118, 86,.11);color:var(--sage-700)}
.acc-note.call .n-ico{background:var(--ink);color:var(--sage-400)}
.acc-note h3{font-size:16.5px}
.acc-note p{margin-top:7px;font-size:14.5px;color:var(--muted);line-height:1.55}

/* =======================  ACCESSORY CARDS  ======================= */
.acc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.acc-card{display:flex;flex-direction:column;overflow:hidden}

.acc-media{
  position:relative;aspect-ratio:16/10;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--ink-2) 0%,var(--ink) 100%);
}
.acc-media .acc-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.17;filter:grayscale(1) contrast(1.06);
  transition:transform .6s var(--ease),opacity .6s var(--ease);
}
.acc-card:hover .acc-media .acc-bg{transform:scale(1.06);opacity:.26}
.acc-media::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(115% 100% at 50% 0%,rgba(87, 118, 86,.26),transparent 64%);
}
.acc-ico{
  position:relative;z-index:2;width:66px;height:66px;border-radius:17px;
  display:grid;place-items:center;color:var(--sage-400);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  transition:transform .35s var(--ease),color .35s,border-color .35s;
}
.acc-ico svg{width:31px;height:31px}
.acc-card:hover .acc-ico{transform:translateY(-3px)}
.acc-flag{position:absolute;top:12px;left:12px;z-index:3}
.chip.live{color:#fff;background:rgba(87, 118, 86,.94);border-color:rgba(255,255,255,.24)}

.acc-body{padding:20px;display:flex;flex-direction:column;flex:1}
.acc-cat{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--sage-600)}
.acc-card h3{font-size:17.5px;margin-top:7px;line-height:1.2}
.acc-desc{margin-top:9px;font-size:14.5px;color:var(--muted);line-height:1.55}
.acc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:auto;padding-top:16px;border-top:1px dashed var(--line);
}
.acc-price{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--text);line-height:1.05}
.acc-price small{display:block;font-family:var(--font-body);font-size:12px;font-weight:500;color:var(--muted);margin-top:4px;letter-spacing:0}
.acc-btn{padding:11px 17px;font-size:14.5px;border-radius:9px}
.acc-btn svg{width:16px;height:16px}

/* the one product that is live for online sale */
.acc-card.is-live{border-color:rgba(87, 118, 86,.42);box-shadow:0 0 0 3px rgba(87, 118, 86,.09),var(--shadow-sm)}
.acc-card.is-live:hover{box-shadow:0 0 0 3px rgba(87, 118, 86,.12),var(--shadow)}
.acc-card.is-live .acc-media{background:linear-gradient(140deg,var(--sage-900) 0%,var(--ink) 100%)}
.acc-card.is-live .acc-ico{color:#fff;background:rgba(87, 118, 86,.38);border-color:rgba(79,194,180,.48)}
.acc-card.is-live .acc-price small{color:var(--sage-700);font-weight:600}

/* section head with a trailing meta chip */
.sec-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;max-width:100%}
.sec-head-row .lead{margin-top:14px}

/* =======================  RESPONSIVE  ======================= */
@media(max-width:1024px){
  .acc-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .acc-notice{grid-template-columns:1fr}
}
@media(max-width:640px){
  .acc-grid{grid-template-columns:1fr}
  .acc-media{aspect-ratio:16/9}
  .page-hero .lead{max-width:none}
}


/* =========================================================================
   CONTAINER CATALOG  (containers.html)
   Sticky per-yard price switcher · filter/sort bar · catalog card actions.
   Reuses .page-hero / .crumbs above. Existing tokens only — no new colors.
   ========================================================================= */

:root{
  --hdr:76px;          /* header.site .nav min-height — sticky offset for the locbar */
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* trust stats sitting inside the interior hero */
.page-hero .hero-trust{margin-top:clamp(24px,3vw,34px);padding-top:22px;gap:clamp(18px,3vw,34px)}
.page-hero .hero-trust .ht b{font-size:clamp(21px,2.4vw,26px)}

/* =======================  STICKY YARD PRICE SWITCHER  ======================= */
.locbar{position:sticky;top:var(--hdr);z-index:40;color:#fff;
  background:rgba(18,21,24,.95);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.9)}
.locbar-inner{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);flex-wrap:wrap;
  padding-block:12px;min-height:64px}
.locbar-lead{display:flex;align-items:center;gap:14px;min-width:0}
.locbar-label{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage-400);white-space:nowrap}

/* segmented control */
.segment{position:relative;display:flex;gap:2px;padding:4px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13)}
.seg-thumb{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:9px;opacity:0;
  background:var(--sage-700);box-shadow:0 8px 18px -8px rgba(87, 118, 86,.95);
  transition:transform .34s var(--ease),width .34s var(--ease),opacity .2s}
.segment.ready .seg-thumb{opacity:1}
.seg-btn{position:relative;z-index:1;border:none;background:transparent;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:14.5px;color:rgba(255,255,255,.72);
  padding:9px 19px;border-radius:9px;white-space:nowrap;transition:color .25s var(--ease)}
.seg-btn:hover{color:#fff}
.seg-btn.is-active{color:#fff}
.seg-btn:focus-visible{outline:2px solid var(--sage-400);outline-offset:2px}
/* fallback before JS measures the thumb (and if JS never runs) */
.segment:not(.ready) .seg-btn.is-active{background:var(--sage-700)}

/* ZIP delivery estimate, paired with the switcher */
.locbar-zip{display:flex;align-items:center;gap:9px}
.locbar-zip input{width:130px;padding:10px 13px;border-radius:9px;font-family:inherit;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);
  color:#fff;font-size:14.5px;letter-spacing:.06em}
/* .42 white on this field was 3.93:1; .60 is 6.45:1. Placeholder text is text. */
.locbar-zip input::placeholder{color:rgba(255,255,255,.60);letter-spacing:.02em}
/* outline:none removed — the global :focus-visible ring in styles.css draws
   here now. The border/background tint stays as the typing affordance. */
.locbar-zip input:focus{border-color:var(--sage-400);background:rgba(255,255,255,.12)}
.locbar-zip .btn{padding:10px 17px;font-size:14.5px}
.locbar-zip .btn-ghost{color:#fff;border-color:rgba(255,255,255,.24)}
.locbar-zip .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.09)}

.locbar-note{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.4;
  color:rgba(255,255,255,.55);margin-left:auto}
.locbar-note svg{width:14px;height:14px;color:var(--sage-400);flex-shrink:0}
.locbar-note b{color:rgba(255,255,255,.88);font-weight:600}

/* ZIP response line, below the sticky bar */
.zip-msg{display:none;margin-top:18px;padding:13px 16px;border-radius:var(--radius-sm);
  font-size:14.5px;line-height:1.55;color:var(--text);
  background:rgba(87, 118, 86,.09);border:1px solid rgba(87, 118, 86,.22)}
.zip-msg.show{display:block}
.zip-msg.is-warn{background:var(--sand-2);border-color:var(--line-2);color:var(--muted)}
.zip-msg a{color:var(--sage-600);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.zip-msg .zip-fine{color:var(--muted-2);font-size:13px}

/* Delivered total, injected under each card's yard price once a ZIP is entered */
.catalog-grid .price .delivered{display:block;margin-top:9px;padding-top:9px;
  border-top:1px dashed var(--line-2);font-family:var(--font-display);font-size:17px;
  font-weight:700;line-height:1.25;letter-spacing:0;color:var(--sage-700);
  animation:priceIn .34s var(--ease)}
.catalog-grid .price .delivered small{display:block;margin-top:2px;font-size:11.5px;
  font-weight:500;line-height:1.45;letter-spacing:0;color:var(--muted)}
.catalog-grid .price .delivered.is-quote{color:var(--blue);font-size:15px}
.catalog-grid .price.is-call .delivered{display:none}

/* =======================  FILTER + SORT BAR  ======================= */
.filterbar{background:var(--sand);border-bottom:1px solid var(--line)}
.filterbar-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:18px}
.fchips{display:flex;gap:9px;flex-wrap:wrap;min-width:0}
.fchip{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:14.5px;
  font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;
  background:var(--paper);border:1.5px solid var(--line-2);border-radius:100px;
  padding:9px 16px;transition:all .22s var(--ease)}
.fchip:hover{border-color:var(--sage-600);color:var(--sage-700);transform:translateY(-1px)}
.fchip .fcount{font-size:12px;font-weight:700;color:var(--muted-2);background:var(--sand-2);
  border-radius:100px;padding:1px 7px;transition:all .22s}
.fchip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.fchip.is-active .fcount{background:rgba(255,255,255,.17);color:#fff}
.fchip:focus-visible{outline:2px solid var(--sage-600);outline-offset:2px}

.sortwrap{margin-left:auto;display:flex;align-items:center;gap:10px}
.sortwrap label{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.sortwrap select{appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit;
  font-size:14.5px;color:var(--text);padding:10px 36px 10px 14px;border-radius:9px;
  border:1.5px solid var(--line-2);
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586067' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  background-size:13px}
.sortwrap select:focus{border-color:var(--sage-600)}

/* =======================  RESULTS + GRID  ======================= */
.results-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:26px}
.rl-count{font-size:14.5px;color:var(--muted)}
.rl-count b{color:var(--text);font-family:var(--font-display);font-size:16.5px}
.rl-yard{font-size:13.5px;color:var(--muted)}
.rl-yard b{color:var(--sage-600);font-weight:600}   /* sage-700 on --sand is 4.48:1 */

.catalog-grid{margin-top:0;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.prod.is-hidden{display:none}

/* catalog card: price block spans the card, two actions underneath */
.catalog-grid .prod-foot{display:block;padding-top:14px}
.catalog-grid .price{line-height:1.15}
.catalog-grid .price .amt{display:inline-block}
.catalog-grid .price.is-call .amt{font-size:19px;color:var(--blue)}
.catalog-grid .price small{margin-top:4px}
@keyframes priceIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.catalog-grid .price .amt.flash{animation:priceIn .4s var(--ease)}

.prod-actions{display:grid;grid-template-columns:1fr auto;gap:9px;margin-top:14px}
.prod-actions .btn{padding:12px 14px;font-size:14.5px}
.prod-actions .btn-call{color:var(--muted);border-color:var(--line-2);background:transparent}
.prod-actions .btn-call:hover{color:var(--text);border-color:var(--ink);background:var(--sand)}

/* Texas Flag marker — steel blue from the existing palette */
.chip.flag{color:#fff;background:var(--blue);border-color:var(--blue)}

.no-results{display:none;text-align:center;padding:64px 24px;background:var(--paper);
  border:1px dashed var(--line-2);border-radius:var(--radius)}
.no-results.show{display:block}
.no-results h3{font-size:20px}
.no-results p{margin-top:8px;color:var(--muted);font-size:15px}

/* =======================  RESPONSIVE  ======================= */
@media(max-width:1080px){
  .locbar-note{width:100%;margin-left:0;order:5}
}
@media(max-width:720px){
  .locbar-inner{gap:9px;padding-block:9px;min-height:0}
  .locbar-label{display:none}
  .locbar-lead,.locbar-zip{width:100%}
  .segment{width:100%}
  .seg-btn{flex:1;padding:9px 4px;font-size:13.5px}
  .locbar-zip input{flex:1;width:auto;min-width:0}
  .locbar-note{display:none}          /* yard + delivery note stays visible in .rl-yard */
  .sortwrap{margin-left:0;width:100%}
  .sortwrap select{flex:1;min-width:0}
  .filterbar-inner{gap:14px;padding-block:15px}
  .fchip{font-size:13.5px;padding:8px 13px}
}
@media(max-width:400px){
  .seg-btn{padding:9px 2px;font-size:12.5px}
  .prod-actions{grid-template-columns:1fr}
}


/* =========================================================================
   SMALL-SCREEN HEADER FIT (catalog pages)
   The header's nav-right (search + phone + quote CTA + menu) overflows the
   viewport under ~560px and forces a horizontal scrollbar. Trim it down so
   interior pages never scroll sideways on a 375px phone.
   ========================================================================= */
@media(max-width:560px){
  header.site .nav{gap:14px}
  header.site .nav-right{gap:10px}
  header.site .nav-right .btn-primary{display:none}   /* CTA lives in-page + topbar phone */
  header.site .nav .logo img{height:38px}
}
@media(max-width:400px){
  header.site .nav-right .icon-btn[aria-label="Search"]{display:none}
}