/* One Shot — Phase 0b UI layer, loaded after oneshot.css.
   Storefront pill + hero chooser, brand wall, and the quality-bar rules:
   uniform cards, aligned nav, fixed facet order. Same token set as oneshot.css. */

/* ================= storefront pill (header, after the logo) ================= */
html body .os-pill{position:relative;order:1;flex:none;margin-left:6px;}
html body .os-pill-btn{
  display:flex;align-items:center;gap:8px;height:42px;padding:0 12px 0 10px;
  background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r);
  color:var(--dark-ink);cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;
}
html body .os-pill-btn:hover,html body .os-pill.active .os-pill-btn{border-color:var(--accent);color:#fff;}
html body .os-pill .ic{width:22px;height:22px;color:var(--accent);display:inline-flex;flex:none;}
html body .os-pill .ic svg{width:100%;height:100%;}
html body .os-pill .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7;}
html body .os-pill-panel{
  display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:300px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 14px 34px rgba(0,0,0,.28);padding:8px;
}
html body .os-pill.active .os-pill-panel{display:block;}
html body .os-pill-panel .t{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 10px 8px;}
html body .os-pill-panel .row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r);color:var(--ink);text-decoration:none;}
html body .os-pill-panel .row:hover{background:var(--surface-2);color:var(--ink);text-decoration:none;}
html body .os-pill-panel .row.on{background:var(--surface-2);}
html body .os-pill-panel .row .ic{width:28px;height:28px;}
html body .os-pill-panel .row .tx{display:flex;flex-direction:column;flex:1;}
html body .os-pill-panel .row .nm{font-family:var(--display);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.04em;}
html body .os-pill-panel .row .sub{font-size:12.5px;color:var(--muted);}
html body .os-pill-panel .row .chk{color:var(--fit);font-weight:700;}

/* ================= hero chooser (home page, above the hero) ================= */
.os-chooser{background:var(--dark);color:var(--dark-ink);margin:0 calc(50% - 50vw);padding:40px 0 0;position:relative;}
.os-chooser .inner{max-width:1320px;margin:0 auto;padding:0 20px;position:relative;}
.os-chooser .eyebrow{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,30px);text-transform:uppercase;letter-spacing:.02em;color:#fff;margin:0 0 16px;}
.os-chooser .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.os-chooser .tile{
  display:flex;flex-direction:column;gap:5px;padding:20px 20px 18px;
  background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r);
  color:var(--dark-ink);text-decoration:none;position:relative;
  transition:border-color .15s,background .15s,transform .15s;
}
.os-chooser .tile:hover{border-color:var(--accent);background:var(--dark-3);color:#fff;transform:translateY(-2px);text-decoration:none;}
.os-chooser .tile.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}
.os-chooser .tile .ic{width:44px;height:44px;color:var(--accent);}
.os-chooser .tile .ic svg{width:100%;height:100%;}
.os-chooser .tile .nm{font-family:var(--display);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:.02em;color:#fff;line-height:1.05;margin-top:6px;}
.os-chooser .tile .sub{font-size:13.5px;color:var(--dark-muted);}
.os-chooser .tile .go{margin-top:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
.os-chooser .tile.on .go{color:var(--fit);}
/* the CMS hero follows on the same dark ground; close the gap so they read as one panel */
.os-chooser{padding-bottom:8px;}
.os-chooser + .os-hero{padding-top:40px;}

/* ================= brand wall + home strip ================= */
.os-brandwall .count{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;}
.os-brandwall .grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;}
.os-brandwall .tile{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 12px 12px;
  text-decoration:none;color:var(--ink-2);transition:border-color .15s,transform .15s;
}
.os-brandwall .tile:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-2px);text-decoration:none;}
.os-brandwall .frame{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:2/1;}
.os-brandwall .frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.os-brandwall .nm{font-size:12.5px;font-weight:500;text-align:center;line-height:1.2;}
.os-brandwall .tile.has .nm{color:var(--ink);}
.os-page-brands .os-lede{max-width:60ch;color:var(--ink-2);margin:0 0 22px;font-size:16px;}
.os-brandstrip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0 0 44px;}
.os-brandstrip .tile{display:flex;align-items:center;justify-content:center;aspect-ratio:2/1;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;transition:border-color .15s;}
.os-brandstrip .tile:hover{border-color:var(--accent);}
.os-brandstrip img{max-width:100%;max-height:100%;object-fit:contain;}

/* ================= card uniformity: same box, same frame, same anatomy ================= */
/* Locked 1:1 frame. Blank puts an inline height on .product-image-wrapper (from the image
   view config), which wins over padding-bottom, so the height is zeroed and the ratio comes
   from padding alone; the photo is then absolutely positioned and letterboxed inside it. */
html body .product-image-container{width:100% !important;}
html body .product-image-wrapper{
  padding-bottom:100% !important;height:0 !important;position:relative;overflow:hidden;display:block;
}
html body .product-image-photo{
  position:absolute !important;inset:0;margin:auto;
  width:100% !important;height:100% !important;max-width:100%;max-height:100%;object-fit:contain;
}
html body .product-item-photo{padding:8%;}
html body .product-item-link{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
html body .product-item-name{min-height:calc(14.5px * 1.35 * 2);}             /* two lines always reserved */
html body .product-item .os-brand{display:block;min-height:15px;}              /* one line always reserved */
html body .product-item [data-os-pill]{min-height:24px;}
html body .product-item .price-box{min-height:24px;}
html body .product-item .product-reviews-summary{display:none;}               /* until reviews ship (Phase 4) */

/* ================= nav: one row, one baseline ================= */
/* Blank's desktop sheet (styles-l.css, loaded after ours) restyles the SELECTED item with
   `.navigation .level0.active > .level-top` (and .has-active): display:inline-block plus a 3px
   underline. That selector outranks a plain `.level0 > .level-top` rule, so the selected label lost
   its vertical centring and jumped to the top of the bar. Every state is listed here so ours wins,
   and every state gets the same 3px bottom border (coloured only on hover/selected) so nothing
   changes size when an item is hovered or selected. */
@media (min-width:768px){
  html body .navigation ul{display:flex;flex-wrap:wrap;align-items:stretch;}
  html body .navigation .level0{display:flex;margin:0 2px 0 0;}
  html body .navigation .level0 > .level-top,
  html body .navigation .level0.active > .level-top,
  html body .navigation .level0.has-active > .level-top{
    display:inline-flex;align-items:center;box-sizing:border-box;height:48px;
    padding:0 14px !important;line-height:1;
    border-style:solid !important;border-width:0 0 3px !important;
  }
}

/* ================= layered nav: fixed facet order, right-aligned counts ================= */
/* blank renders facets as <dt class="filter-options-title"> + <dd class="filter-options-content">
   pairs inside dl.filter-options — there is no per-facet wrapper. garage.phtml tags BOTH halves
   with os-f-<slug>, and each pair shares an order value so it moves as a unit. */
html body dl.filter-options{display:flex;flex-direction:column;}
html body .filter-options-title,html body .filter-options-content{order:9;}
html body .os-f-fits-machines{order:1;}
html body .os-f-category{order:2;}
html body .os-f-brand{order:3;}
html body .os-f-price{order:4;}
html body .os-f-vehicle-type{order:5;}
html body .filter-options-content .item a{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
html body .filter-options-content .item .count{color:var(--muted);font-family:var(--mono);font-size:12px;margin-left:auto;}

/* ================= responsive ================= */
@media (max-width:1023px){
  .os-brandwall .grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .os-brandstrip{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:767px){
  html body .os-pill-btn .nm{display:none;}
  html body .os-pill-btn{padding:0 10px;}
  .os-chooser{padding-top:26px;}
  .os-chooser .tiles{grid-template-columns:1fr;gap:10px;}
  .os-chooser .tile{flex-direction:row;align-items:center;gap:14px;padding:14px 16px;}
  .os-chooser .tile .ic{width:32px;height:32px;}
  .os-chooser .tile .nm{font-size:19px;margin:0;}
  .os-chooser .tile .sub{display:none;}
  .os-chooser .tile .go{margin:0 0 0 auto;}
  .os-brandwall .grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .os-brandstrip{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
}

/* ================= photo tiles =================
   Every content tile on the home page carries a photo (generated locally, see repo/tools/imagegen).
   Frames are fixed with aspect-ratio and filled with object-fit:cover, so every tile in a row is the
   same box whatever the source — the same rule the product cards follow. Captions sit on a bottom
   gradient so they stay legible over any photo. A tile only gets .has-img when its file exists on the
   server; otherwise it keeps the original icon/topo styling. */
.os-chooser .tile .cap,.os-machines .cap,.os-styles .cap{display:flex;flex-direction:column;gap:4px;position:relative;z-index:2;}

/* storefront chooser — 3:2 */
.os-chooser .tile.has-img{padding:0;aspect-ratio:3/2;justify-content:flex-end;overflow:hidden;background:var(--dark-2);}
.os-chooser .tile.has-img .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.os-chooser .tile.has-img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,11,13,.92) 0%,rgba(10,11,13,.55) 38%,rgba(10,11,13,0) 68%);}
.os-chooser .tile.has-img .cap{padding:18px 20px;}
.os-chooser .tile.has-img .sub{color:#C9CCD1;}
.os-chooser .tile.has-img:hover{transform:none;}
.os-chooser .tile.has-img:hover .ph{transform:scale(1.04);}
.os-chooser .tile.has-img.on{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:none;}

/* shop by category — square studio shots on a light card */
.os-cats a.has-img{padding:0;min-height:0;gap:0;overflow:hidden;}
.os-cats a.has-img:hover{border-color:var(--accent);}
.os-cats a.has-img .im{display:block;height:auto;aspect-ratio:1/1;overflow:hidden;background:#EDEBE8;}
.os-cats a.has-img .im img{display:block;width:100%;height:100%;max-height:none;object-fit:cover;mix-blend-mode:normal;transition:transform .45s ease;}
.os-cats a.has-img:hover .im img{transform:scale(1.05);}
.os-cats a.has-img .nm{margin:0;padding:12px 14px 13px;border-top:1px solid var(--line);}

/* popular machines — 4:3 */
.os-machines a.has-img{position:relative;display:block;padding:0;aspect-ratio:4/3;overflow:hidden;}
.os-machines a.has-img .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.os-machines a.has-img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,11,13,.9) 0%,rgba(10,11,13,.4) 34%,rgba(10,11,13,0) 60%);}
.os-machines a.has-img .cap{position:absolute;left:16px;bottom:14px;gap:2px;}
.os-machines a.has-img .ar{position:absolute;right:14px;bottom:16px;z-index:2;}
.os-machines a.has-img .mk{color:#C9CCD1;}
.os-machines a.has-img:hover .ph{transform:scale(1.05);}

/* build it your way — 3:2 */
.os-styles a.has-img{padding:0;min-height:0;aspect-ratio:3/2;justify-content:flex-end;}
.os-styles a.has-img .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.os-styles a.has-img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,11,13,.9) 0%,rgba(10,11,13,.45) 36%,rgba(10,11,13,0) 62%);}
.os-styles a.has-img .cap{position:absolute;left:18px;right:18px;bottom:16px;}
.os-styles a.has-img .ds{color:#D2D5D9;}
.os-styles a.has-img:hover .ph{transform:scale(1.05);}

@media (max-width:767px){
  .os-chooser .tile.has-img{aspect-ratio:21/9;flex-direction:column;align-items:stretch;padding:0;}
  .os-chooser .tile.has-img .cap{flex-direction:row;align-items:baseline;gap:10px;padding:12px 14px;}
  .os-chooser .tile.has-img .nm{font-size:19px;margin:0;}
  .os-chooser .tile.has-img .go{margin:0 0 0 auto;}
  .os-machines{grid-template-columns:1fr 1fr;}
  .os-machines a.has-img .cap{left:12px;bottom:10px;}
  .os-machines a.has-img .md{font-size:17px;}
  .os-machines a.has-img .ar{right:10px;bottom:12px;}
  .os-styles a.has-img .cap{left:12px;right:12px;bottom:10px;}
  .os-styles a.has-img .nm{font-size:19px;}
  .os-styles a.has-img .ds{display:none;}
  .os-cats a.has-img .nm{padding:10px 12px;font-size:14px;}
}
@media (prefers-reduced-motion:reduce){
  .os-chooser .tile.has-img .ph,.os-machines a.has-img .ph,.os-styles a.has-img .ph,.os-cats a.has-img .im img{transition:none;}
  .os-chooser .tile.has-img:hover .ph,.os-machines a.has-img:hover .ph,.os-styles a.has-img:hover .ph,.os-cats a.has-img:hover .im img{transform:none;}
}