/* USA Made Products: directory.css. One stylesheet for every state page and every national category page.
   Built 2026-10-17 from state-theme.css, state-page.css, national.css and amazon-cards.css, in that order.
   Keep the order: national rules must come after the shared page rules, and the Amazon button rule must
   outrank ".row .desc p" from the page section. Colors live in section 1 only. */

/* ===== 1. Theme: colors and base text ===== */
:root{
  --brand:#0033aa;        /* main blue: hero, headings, borders, buttons */
  --brand-dark:#002277;   /* top bar, headings */
  --accent:#9f9fff;       /* lavender-blue lines and focus ring */
  --star:#ffea00;         /* yellow: state outline stroke, box edges */
  --ground:#001a5c;       /* footer background */
  --tint:#ceebfd;         /* page background, state outline fill */
  --card:#ffffff;         /* listing cards, breadcrumb bar */
  --ink:#222222;          /* body text */
  --muted:#555555;        /* secondary text */
  --line:#9f9fff;        /* card borders */
  --on-brand:#ffffff;     /* text on blue */
  --lead:#dbe7ff;         /* intro sentence in the hero */
  --footer-text:#e6efe8;  /* footer text */
  --thumb-bg:#e8e4dc;     /* behind a snapshot while it loads */
  --white:#ffffff;
}

/* Text size. 93.75% of the browser's own size = 15px by default, and still follows a reader's browser setting.
   Everything sized in rem (headings, notes, footer) scales with this one number. */
html{font-size:93.75%;scroll-behavior:smooth}
body{margin:0;background:var(--tint);color:var(--ink);font:400 1rem/1.5 Arial,Helvetica,sans-serif}

/* ===== 2. Shared page layout: intro, listing rows, snapshots, affiliate buttons, footer ===== */
.state-intro{background:var(--card);border-left:6px solid var(--brand);padding:14px 18px;margin:0 0 22px}
.state-intro p{margin:0 0 .7rem}
.state-intro p:last-child{margin:0}
.state-intro:empty{display:none}
#la-cards img{max-width:100%;height:auto;display:block}
section.cat{margin:0 0 34px}
section.cat h2{font:700 1.6rem/1.2 Arial,Helvetica,sans-serif;margin:0 0 .6rem;color:var(--brand-dark);border-bottom:3px solid var(--brand);padding-bottom:.3rem}
section.sub{margin:0 0 30px 22px;padding-left:16px;border-left:4px solid var(--accent)}
section.sub h3{font:700 1.3rem/1.2 Arial,Helvetica,sans-serif;margin:0 0 .5rem;color:var(--brand-dark)}
.cat-desc{max-width:75ch;margin:0 0 1rem;color:var(--muted)}
.cat-desc p{margin:0 0 .6rem}
.rows{display:flex;flex-direction:column;gap:18px}
.row{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--brand);display:flow-root;padding:16px 20px;text-align:left}
.row .thumb{float:left;width:280px;margin:0 20px 10px 0}
#la-cards .row .thumb img{width:280px;max-width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--thumb-bg);border:1px solid var(--line)}
.row h2,.row h3,.row h4{font:700 1.25rem/1.25 Arial,Helvetica,sans-serif;margin:0 0 .5rem;overflow-wrap:anywhere}
.row .desc p{margin:0 0 .7rem}
.row .desc address{font-style:normal;font-size:.92rem;color:var(--muted);margin:0 0 .7rem}
.row .desc address::before{content:"Location: ";font-weight:700}
.row .visit{display:inline-block;font-weight:700;color:var(--brand);text-decoration:underline}
@media (max-width:640px){section.sub{margin-left:8px;padding-left:10px}.row .thumb{float:none;width:100%;max-width:280px;margin:0 0 12px}#la-cards .row .thumb img{width:100%}}
/* Retailer (affiliate) links inside a listing description. The anchor is the button, so the whole pill is clickable. */
.retailers{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0;clear:both}
.retailers .link a{display:block;min-width:110px;padding:12px 24px;border-radius:9999px;text-align:center;font-weight:600;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.1);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.retailers .link a:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.retailers .amz a{background:#f8bd19;color:#111}
.retailers .amz a:hover{background:#f59e0b}
.retailers .wrt a{background:#0071ce;color:#fff}
.retailers .wrt a:hover{background:#004b9f}
.retailers .adv a{background:#b6121b;color:#fff}
.retailers .adv a:hover{background:#8f0e15}
.retailers .disclosure{font-size:.85rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.retailers .link a{transition:none}.retailers .link a:hover{transform:none}}
.national-box{background:var(--card);border:2px solid var(--brand);border-left:8px solid var(--star);padding:14px 18px;margin:24px 0 0}
.national-box:empty{display:none}
.add-site{margin-top:30px;background:var(--card);border:2px solid var(--brand);border-top:8px solid var(--star);padding:16px}
.add-site h2{margin:0 0 .4rem;font:700 1.35rem/1.2 Arial,Helvetica,sans-serif;color:var(--brand-dark)}
.add-site p{margin:.3rem 0 .9rem;font-size:.95rem;color:var(--muted)}
.add-site .btn{display:inline-block;background:var(--brand);color:var(--on-brand);padding:.55rem 1rem;font-weight:700;text-decoration:none;border-radius:3px}
.list-meta{margin:0 0 .8rem;font-size:.95rem;color:var(--muted)}
.aff-note{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--star);padding:10px 14px;margin:0 0 22px;font-size:.95rem}
.aff-note p{margin:0}
.disclosures{margin:34px 0 0;font-size:.9rem;color:var(--muted)}
.disclosures h2{margin:0 0 .5rem;font:700 1.1rem/1.2 Arial,Helvetica,sans-serif;color:var(--brand-dark)}
.disclosures p{margin:0 0 .7rem}
.neighbors{max-width:1000px;margin:0 auto 40px;padding:0 20px}
.neighbors h2{font:700 1.2rem Arial,Helvetica,sans-serif;color:var(--brand-dark)}
.neighbors ul{list-style:none;margin:0;padding:0;display:flex;gap:.6rem;flex-wrap:wrap}
.neighbors a{display:inline-block;padding:.35rem .9rem;border:2px solid var(--brand);text-decoration:none;font-weight:600}
.neighbors a:hover{background:var(--brand);color:var(--on-brand)}
footer{background:var(--ground);color:var(--footer-text);padding:28px 0;font-size:.95rem}
footer .in{max-width:1000px;margin:auto;padding:0 20px}
footer a{color:var(--white)}

/* ===== 3. National category pages: subcategory cards, hub layout with sidebar, lower blocks ===== */
.rows:empty{display:none}
.row[id]{scroll-margin-top:12px}
/* Section headings: "Browse by type" and the listings heading. The listings heading text comes from |l=...| in the
   category description; the template prints nothing without it. Hidden if the page has no listings of its own. */
.sec-h{font:700 1.35rem/1.25 Arial,Helvetica,sans-serif;color:var(--brand-dark);margin:0 0 12px}
.main:not(:has(.rows>.row)) .list-h{display:none}
/* Subcategory cards (name, count, description); the whole card is clickable through the name link */
.subcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.subcard{position:relative;padding:14px 16px;border:2px solid var(--brand);background:var(--card);color:var(--ink)}
.subcard:hover,.subcard:focus-within{border-color:var(--brand-dark);background:var(--tint)}
.subcard h3{margin:0 0 6px;font:700 1.15rem/1.25 Arial,Helvetica,sans-serif;color:var(--brand-dark)}
.subcard h3 a{color:inherit;text-decoration:none}
.subcard h3 a::after{content:"";position:absolute;inset:0}
.subcard h3 a:focus-visible{outline:none}
.subcard:has(h3 a:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.subcard .count{font-size:.85rem;font-weight:400;color:var(--muted)}
.subcard .subdesc{margin:0;font-size:.95rem;color:var(--muted)}
/* Page layout (template v8). Listings come first; the side column (.side) follows and holds "Browse by type" (pages
   with subcategories) and "More in <section>" (pages two or more levels down).
   900px and wider: when the page has listings, the side column becomes a sticky right-hand sidebar and the page widens
   to 1200px. Narrower: the side column sits below the listings, with a "Browse all N types" link under the intro on hubs.
   A page with no listings of its own (vehicles.html) keeps the full-width cards.
   aside.subs is the v7 markup; those selectors can go once every page is built with v8. */
.lay-main{min-width:0}
.side:not(:has(*)){display:none}
.layout>:is(.side,.subs){margin:30px 0 0}
.main:not(:has(.rows>.row)) .layout>:is(.side,.subs){margin-top:0}
.side>*+*{margin-top:28px}
#subs-h,#sect-h{scroll-margin-top:12px}
.browse-jump{display:none;margin:0 0 22px;font-weight:700}
@media (max-width:899px){.main:has(.side>*,aside.subs):has(.rows>.row) .browse-jump{display:block}}
/* "More in <section>": the section's types, current page marked, the open branch's own types indented */
.sect-nav ul{list-style:none;margin:0;padding:0}
.sect-nav>ul{border:2px solid var(--brand);background:var(--card)}
.sect-nav a{display:block;padding:8px 14px;border-top:1px solid var(--line);text-decoration:none;font-weight:600;color:var(--brand-dark)}
.sect-nav>ul>li:first-child>a{border-top:0}
.sect-nav a:hover{background:var(--tint)}
.sect-nav ul ul a{padding-left:30px;font-weight:400}
.sect-nav [aria-current=page]{background:var(--tint);box-shadow:inset 5px 0 0 var(--brand)}
.sect-nav .count{font-weight:400;font-size:.85rem;color:var(--muted)}
@media (min-width:900px){
body:has(.layout>.side>*,.layout>aside.subs):has(.rows>.row) :is(.topbar .in,.sections .in,.hero .in,#la-breadcrumbs,.main,footer .in){max-width:1200px}
.layout:has(>.side>*,>aside.subs):has(.rows>.row){display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:32px;align-items:start}
.layout:has(.rows>.row)>:is(.side,.subs){margin:0;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto}
.layout:has(.rows>.row)>:is(.side,.subs) .subcards{grid-template-columns:1fr;gap:0;border:2px solid var(--brand);background:var(--card)}
.layout:has(.rows>.row)>:is(.side,.subs) .subcard{border:0;border-bottom:1px solid var(--line);padding:9px 14px}
.layout:has(.rows>.row)>:is(.side,.subs) .subcard:last-child{border-bottom:0}
.layout:has(.rows>.row)>:is(.side,.subs) .subcard h3{font-size:1rem;margin:0}
.layout:has(.rows>.row)>:is(.side,.subs) .subcard:has(h3 a:focus-visible){outline-offset:-3px}
.layout:has(.rows>.row)>:is(.side,.subs) .subdesc{display:none}
.layout:has(.rows>.row)>:is(.side,.subs) .sect-nav a{padding:7px 14px;font-size:.95rem}
.layout:has(.rows>.row)>:is(.side,.subs) .sect-nav ul ul a{padding-left:28px}
}
/* Source line under each listing (national listings carry "Source: ..., checked MM/YYYY") */
.row .desc .src{font-size:.85rem;color:var(--muted)}
/* "Also listed under" line on featured hub listings: jump links to the company on each subcategory page */
.row .desc .also{font-size:.95rem;padding-top:.5rem;border-top:1px solid var(--line)}
/* Category description: the intro box hides when the description holds only the hidden <template> part */
.state-intro:not(:has(*)){display:none}
/* Extra blocks from the category description (after <hr class=split>), shown below the listings */
.cat-more{margin:34px 0 0}
.cat-more>*{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--brand);padding:16px 20px;margin:0 0 22px}
.cat-more h2{font:700 1.35rem/1.25 Arial,Helvetica,sans-serif;color:var(--brand-dark);margin:0 0 .7rem}
.cat-more h3{font:700 1.1rem/1.3 Arial,Helvetica,sans-serif;margin:1rem 0 .4rem}
.cat-more p{margin:0 0 .7rem}
.cat-more>*>:last-child{margin-bottom:0}
.cat-more table{display:block;overflow-x:auto;border-collapse:collapse;font-size:.92rem;max-width:100%}
.cat-more th,.cat-more td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.cat-more th{background:var(--tint)}
.cat-more ul{margin:0 0 .7rem;padding-left:1.2rem}
.cat-more details{margin:0 0 .5rem}
.cat-more summary{font-weight:700;cursor:pointer}
.cat-more ul.cols{columns:2 260px;column-gap:28px}
.cat-more ul.cols li{break-inside:avoid;margin:0 0 .45rem}

/* ===== 4. Amazon product pictures ===== */
.amz-card{
  --amz-thumb: 120px;        /* picture size when showing pictures only (square box) */
  --amz-img: 110px;          /* picture size when showing title + brand (data-show="text") */
  --amz-gap: 12px;           /* space between pictures */
  --amz-tile: 260px;         /* minimum tile width in text mode */
  margin:.9rem 0 1.1rem;    /* bottom space keeps the Amazon button off the "Visit website" link */
}
/* pictures only (default) */
.amz-thumbs{display:flex;flex-wrap:wrap;gap:var(--amz-gap)}
.amz-thumb{display:block;padding:6px;background:#fff;border:1px solid var(--line,#d5dde6);border-radius:4px}
.amz-thumb:hover{border-color:var(--brand,#1f4e8c)}
.amz-thumb:focus-visible,.amz-item:focus-visible{outline:3px solid var(--accent,#c8a13b);outline-offset:2px}
.amz-thumb .amz-img{display:block;width:var(--amz-thumb);height:var(--amz-thumb);object-fit:contain}
/* pictures with text (data-show="text") */
.amz-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--amz-tile),1fr));gap:var(--amz-gap)}
.amz-item{
  display:flex;align-items:center;gap:12px;padding:10px;
  background:var(--white,#fff);border:1px solid var(--line,#d5dde6);border-radius:4px;
  color:var(--ink,#1b2733);text-decoration:none;
}
.amz-item:hover{border-color:var(--brand,#1f4e8c)}
.amz-item .amz-img{flex:none;width:var(--amz-img);height:var(--amz-img);object-fit:contain;background:#fff}
.amz-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.amz-title{
  font-weight:600;font-size:.9rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.amz-brand{font-size:.8rem;color:var(--muted,#5a6b7b)}
.amz-cta{font-size:.82rem;font-weight:700;color:var(--brand,#1f4e8c)}
/* Amazon pill button: the text link under the pictures, and the plain link shown when no pictures load */
/* three classes outrank state-page.css ".row .desc p{margin:0 0 .7rem}" so the button keeps its space below the pictures */
.amz-card .amz-thumbs + .amz-more,
.row .desc .amz-card .amz-more{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:1.1rem 0 0;padding:0}
.amz-card .amz-more .amz-note{display:inline;margin:0;font-weight:400}
.amz-more a,.amz-card>a{
  display:inline-block;min-width:110px;padding:12px 24px;border-radius:9999px;
  background:#f8bd19;color:#111;text-align:center;font-weight:600;font-size:.95rem;text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.amz-more a:hover,.amz-card>a:hover{background:#f59e0b;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.amz-more a:focus-visible,.amz-card>a:focus-visible{outline:3px solid var(--accent,#c8a13b);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.amz-more a,.amz-card>a{transition:none}.amz-more a:hover,.amz-card>a:hover{transform:none}}
.amz-note{display:block;margin-top:.4rem;font-size:.78rem;color:var(--muted,#5a6b7b)}
@media (max-width:520px){
  .amz-card{--amz-thumb:92px;--amz-img:84px;--amz-tile:100%}
}