/* MØHT retail storefront, extending the shared silver and charcoal palette. */
.shop-body {
  color-scheme: light;
  --bg: #f4f4f2;
  --panel: #fff;
  --text: #171717;
  --muted: #5e5d59;
  --line: #d3d2cf;
  --accent: #78633f;
  --button-bg: #171717;
  --button-text: #f4f4f2;
  --button-hover: #3a352d;
}
.shop-header, .shop-footer {
  color-scheme: dark;
  --text: #f4f4f2;
  --muted: #b4b2ad;
  --line: #343330;
  --accent: #c8b999;
  --button-bg: #dededb;
  --button-text: #171717;
  --button-hover: #f5f5f3;
  background: #090909;
  color: var(--text);
}
.shop-intro { padding-block: clamp(3rem, 5vw, 5rem) 0; }
.shop-intro .eyebrow { margin-bottom: 1.25rem; }
.shop-heading { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 3rem; }
.shop-heading h1 { font-size: clamp(2.4rem, 4.7vw, 4.75rem); letter-spacing: -.045em; line-height: 1.15; }
.shop-heading > p { max-width: 410px; justify-self: end; }
.shop-categories { display: flex; flex-wrap: wrap; gap: 1rem 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 2.5rem; padding-block: 1.25rem; }
.shop-categories a { display: inline-flex; align-items: center; gap: 1rem; font-size: .9375rem; }
.shop-categories a:last-child { margin-left: auto; }
.shop-categories span { font-size: .875rem; color: var(--accent); }
.shop-categories a:hover { text-decoration: underline; text-underline-offset: .3rem; }
.shop-catalog, .shop-oils { padding-block: 3rem; }
.shop-car { padding-block: 1rem 3rem; }
.car-detail-link { align-self: flex-start; margin-top: 1.25rem; }
.shop-section-head { display: flex; justify-content: space-between; align-items: end; gap: 3rem; margin-bottom: 2rem; }
.shop-section-head h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); }
.shop-section-head > p { max-width: 390px; }
.shop-body .product-visual { height: 295px; }
.shop-body .product-content { padding: 1.75rem; }
.shop-body .product-content > .button { margin-top: 0; }
.shop-body .product-description { min-height: 3.3em; }
.retail-price { margin: auto 0 1rem; color: var(--text); font-size: 1.1rem; font-weight: 500; }
.shop-body .button:disabled { cursor: default; }
.shop-oils { padding-bottom: 5rem; }
.oil-card { display: grid; grid-template-columns: 1fr 1fr; background: var(--panel); border: 1px solid var(--line); }
.oil-visual { display: grid; place-items: center; margin: 0; padding: 1.5rem; background: #fff; }
.oil-visual img { height: 440px; width: 100%; object-fit: contain; }
.oil-content { display: flex; flex-direction: column; padding: 3rem; }
.oil-content h3 { font-size: clamp(1.9rem, 3vw, 3rem); }
.oil-specs { margin-block: 1.5rem; border-block: 1px solid var(--line); padding-block: .75rem; }
.oil-specs > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .5rem; font-size: .9375rem; }
.oil-specs dt { color: var(--muted); }
.oil-specs dd { margin: 0; text-align: right; }
.purchase-section { background: #e8e8e5; border-block: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 6rem); }
.purchase-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; }
.purchase-grid > *, .shop-heading > *, .oil-card > * { min-width: 0; }
.selection-panel { align-self: start; }
.selection-panel h3 { font-size: 1.25rem; display: flex; justify-content: space-between; gap: 1rem; }
.selection-total { color: var(--accent); font-variant-numeric: tabular-nums; }
.selection-empty { margin-block: 1.5rem; padding-block: 1.5rem; border-block: 1px solid #b7b5af; }
.selection-empty a, .shop-body .form-note a { text-decoration: underline; text-underline-offset: .2rem; }
.selection-list { margin: 1.5rem 0 0; list-style: none; padding: 0; }
.selection-item { padding: 1rem 0; border-bottom: 1px solid #b7b5af; }
.selection-item:first-child { border-top: 1px solid #b7b5af; }
.selection-item-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.selection-item h4 { margin: 0; font-weight: 500; font-size: 1rem; }
.selection-remove { padding: .5rem; border: 0; background: transparent; color: var(--muted); font-size: .875rem; text-decoration: underline; text-underline-offset: .2rem; }
.selection-quantity { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; font-size: .875rem; color: var(--muted); }
.selection-quantity input { width: 90px; min-height: 44px; }
.selection-help { font-size: .875rem; margin-top: 1.5rem; }
.shop-body .fields label { color: #45433f; }
.shop-body input, .shop-body textarea { background: #fff; border-color: #8b877e; color: var(--text); }
.shop-body input::placeholder, .shop-body textarea::placeholder { color: #706c64; }
.shop-result { background: #f4f4f2; border-color: #8c7c5e; }
.shop-status { font-size: .875rem; color: var(--accent); min-height: 1.5em; margin-top: 1rem; }
.shop-error { color: #8b2c20; font-size: .9375rem; margin-top: .5rem; }
.shop-b2b { display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding-block: 4rem; }
.shop-b2b .eyebrow { margin-bottom: 1rem; }
.shop-b2b h2 { font-size: clamp(1.5rem, 2.5vw, 2.4rem); }
.shop-b2b p:not(.eyebrow) { max-width: 640px; margin-top: 1rem; }
.shop-b2b .button { flex-shrink: 0; }
.selection-bar { position: fixed; z-index: 30; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: min(620px, calc(100% - 2rem)); padding: 1rem 1.25rem; background: #090909; color: #f4f4f2; border: 1px solid #696762; box-shadow: 0 8px 28px #0002; }
.selection-bar p { color: inherit; display: flex; flex-direction: column; font-size: .9375rem; line-height: 1.5; }
.selection-bar p > span { color: #c0bcb3; font-size: .875rem; }
.selection-bar .button { background: #dededb; border-color: #dededb; color: #171717; flex-shrink: 0; }
.selection-bar a:focus-visible { outline-color: #c8b999; }
.has-selection { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
@media (max-width: 950px) {
  .shop-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .shop-heading > p { justify-self: start; max-width: 620px; }
  .purchase-grid { gap: 2rem; }
  .oil-content { padding: 2rem; }
  .oil-specs > div { flex-direction: column; gap: .25rem; }
  .oil-specs dd { text-align: left; }
}
@media (max-width: 760px) {
  .shop-categories { gap: 1rem 1.5rem; }
  .shop-categories a:last-child { width: 100%; margin-left: 0; }
  .shop-section-head, .shop-b2b { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .shop-body .product-description { min-height: 0; }
  .purchase-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-section-head > p { max-width: 100%; }
  .shop-body .fields { grid-template-columns: minmax(0, 1fr); }
  .oil-card { grid-template-columns: minmax(0, 1fr); }
  .oil-visual img { height: 340px; }
  .oil-content { padding: 1.75rem; }
  .shop-b2b .button { margin-top: 1rem; }
}
@media (max-width: 420px) {
  .shop-body .product-content { padding: 1.25rem; }
  .selection-bar { padding: .75rem; gap: .65rem; align-items: stretch; }
  .selection-bar .button { padding: .6rem .75rem; min-height: 44px; gap: .5rem; font-size: .875rem; }
  .selection-bar p { font-size: .875rem; }
  .selection-bar p > span { font-size: .8125rem; }
}