/* Shared spacing and typography for the public storefront. */
:root {
  --shell-width: min(calc(30vw + 987px), calc(100% - 44.8px));
  --content-gutter: 32px;
}
.site-header, main, .admin-toolbar { width: var(--shell-width); }
main > .container, main > .benefits, main > .about,
.home-categories.container { width: calc(100% - 2 * var(--content-gutter)); max-width: none; }
.site-footer__inner { width: var(--shell-width); padding: 48px var(--content-gutter) 22px; }
.site-header .container { width: 100%; padding-inline: var(--content-gutter); }
.ui-icon, .header-selection-link svg { width: 22px; height: 22px; flex: 0 0 22px; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.header-main { min-height: 94px; }
.header-link, .cart-link, .header-selection-link { min-height: 44px; gap: 7px; }
.header-actions a { transition: color .18s ease, background .18s ease; }
.search { height: 46px; border-radius: 9px; }
.search button { display: grid; place-items: center; border-left: 0; }
.catalog-button, .header-dealer-button { min-height: 44px; border-radius: 8px; }
.catalog-button .ui-icon { width: 18px; height: 18px; flex-basis: 18px; }
.main-nav__item, .main-nav__login { font-size: 14px; }
.main-nav__inner { gap: 30px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid #a17c34; outline-offset: 4px;
}
.brand__logo-crop { width: 170px; height: 72px; }
.brand__logo { width: 220px; height: 110px; top: -16px; left: -26px; }

body:not(.has-site-background) .home-promo-backdrop { padding: 24px 0 12px; }
body:not(.has-site-background) .home-promo { width: calc(100% - 2 * var(--content-gutter)); }
.home-promo__slides { border-radius: 16px; box-shadow: none; background: #f4f2ee; }
.home-promo__link { position: absolute; inset: 0; display: block; }
.home-promo__slide > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-promo__copy { position: absolute; z-index: 2; top: 50%; left: clamp(30px, 6.5%, 90px); width: min(500px, 43%); color: #24272b; pointer-events: none; transform: translateY(-50%); }
.home-promo__copy h1 { margin: 0 0 12px; font-family: inherit; font-size: clamp(30px, 3.4vw, 48px); font-weight: 650; line-height: 1.08; letter-spacing: -.04em; }
.home-promo__copy p { margin: 0 0 22px; color: #4d5052; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.5; }
.home-promo__cta { display: inline-flex; min-height: 46px; align-items: center; gap: 14px; padding: 0 18px; border: 1px solid #34373a; border-radius: 8px; background: #34373a; color: #fff; font-size: 14px; font-weight: 600; }
.home-promo__cta span { color: #d8bd7d; }
.home-promo__arrow { width: 44px; height: 44px; box-shadow: 0 2px 8px #24272b10; }
.home-promo__dots { gap: 8px; bottom: 16px; }
.home-categories { padding-block: 28px 38px; }
.home-categories__heading, .home-products-heading { margin-bottom: 24px; }
.home-categories__heading h1, .home-products-heading h2, .section-heading h2 {
  font-family: inherit; font-size: clamp(23px, 2vw, 30px); font-weight: 650;
  line-height: 1.2; letter-spacing: -.035em;
}
.home-categories__controls a, .home-products-controls a { font-size: 14px; font-weight: 500; }
.home-categories__controls button, .home-products-controls button { width: 38px; height: 38px; }
.home-categories__track { gap: 20px; }
.home-category { flex-basis: 164px; transition: none; }
.home-category:hover { transform: none; }
.home-category img, .home-category__placeholder { width: 164px; height: 170px; flex-basis: 170px; border-radius: 12px; }
.home-category__visual { display: block; width: 164px; height: 170px; flex: 0 0 170px; overflow: hidden; border-radius: 12px; }
.home-category__visual { position: relative; }
.home-category__visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .28s cubic-bezier(.2,.75,.25,1); }
.home-category:hover .home-category__visual img { transform: scale(1.045); }
.home-category__visual::after { position: absolute; inset: 0; border-radius: inherit; background: #e5dbc535; mix-blend-mode: soft-light; content: ""; pointer-events: none; }
.home-category__visual .home-category__placeholder { width: 100%; height: 100%; }
/* This source photo includes white side margins; crop them inside the tile. */
.home-category__visual--sets img { transform: scale(1.36); border-radius: 0; }
.home-category:hover .home-category__visual--sets img { transform: scale(1.42); }
.home-category__name { margin-top: 13px; min-height: 44px; font-family: inherit; font-weight: 550; font-size: 15px; line-height: 1.45; }
.home-category:hover .home-category__name { color: #80652f; }
.home-products { padding-block: 26px 40px; }
.home-products-track { gap: 24px; align-items: stretch; }
.home-product-card { flex-basis: calc((100% - 72px) / 4); max-width: none; padding: 18px; border: 1px solid #efede8; border-radius: 12px; box-shadow: none; transition: border-color .2s ease; }
.home-product-card:hover { border-color: #c9b98e; box-shadow: none; }
.home-product-photo { height: 260px; margin-bottom: 24px; }
.home-product-photo img { height: 250px; max-width: 100%; }
.home-product-title { min-height: 72px; font-size: 16px; line-height: 1.5; font-weight: 550; }
.home-product-meta { font-size: 12px; color: #717473; }
.home-product-price-note { color: #747773; font-size: 12px; }
.home-product-card .product-selection-actions { flex-wrap: wrap; }
.home-product-card .product-selection-button { font-size: 12px; }
.button { min-height: 46px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.product-card:hover { transform: none; box-shadow: none; border-color: #c9b98e; }
.breadcrumbs { margin-bottom: 24px; color: #767973; font-size: 13px; line-height: 1.6; }
.page-shell { padding-top: 28px; }
.page-title-row h1 { font-family: inherit; font-size: clamp(28px, 2.5vw, 36px); font-weight: 650; }
.page-title-row p { font-size: 14px; line-height: 1.6; }
.sidebar-title { font-family: inherit; font-size: 16px; }
.category-sidebar__link { padding-block: 12px; font-size: 14px; color: #5b5e60; }
.category-sidebar__link:hover, .category-sidebar__link.is-active { color: #6e5524; background: #f7f4ed; }
.category-card--visual { border: 0; box-shadow: none; border-radius: 12px; }
.category-card--visual:hover { box-shadow: none; transform: none; }
.category-card--visual .category-card__image { filter: none; }
.category-card--visual .category-card__content b { font-family: inherit; font-weight: 550; color: #34363a; }
.catalog-toolbar > span:first-child b { font-family: inherit; font-size: 15px; }
.catalog-toolbar > span:first-child small, .catalog-toolbar__mode { font-size: 12px; }
.catalog-list-title { font-weight: 550; }
.catalog-list-meta, .catalog-list-specs dt, .catalog-list-stocks dt { color: #747773; }
.benefits { margin-block: 24px; padding: 36px; border-radius: 16px; }
.benefits .container { width: 100%; }
.benefits__layout { gap: 40px; }
.benefits__intro h2 { font-family: inherit; font-size: 30px; font-weight: 600; }
.benefits__intro p, .benefit p { font-size: 14px; line-height: 1.65; }
.benefit h3 { font-family: inherit; font-size: 16px; font-weight: 600; }
.about { padding-block: 40px 56px; }
.about h2 { font-family: inherit; font-size: 26px; font-weight: 600; }
.about p { font-size: 15px; }
.site-footer__column h2 { font-family: inherit; font-size: 15px; font-weight: 600; }
.site-footer__column > a:not(.site-footer__cta), .site-footer__intro p, .site-footer__contact p { font-size: 14px; line-height: 1.7; }
.site-footer__bottom { font-size: 12px; }
.site-footer__cta { min-height: 42px; border-radius: 8px; font-size: 13px; }

@media (min-width: 901px) and (max-width: 1200px) {
  .header-main { grid-template-columns: 170px 115px minmax(160px, 1fr); }
  .header-actions { grid-column: 1 / -1; justify-content: flex-end; padding-bottom: 16px; }
}
@media (max-width: 900px) {
  :root { --shell-width: calc(100% - 22.4px); --content-gutter: 16px; }
  .header-main { min-height: auto; }
  .benefits { padding: 26px; }
  .benefits__layout { grid-template-columns: 1fr; gap: 22px; }
  .about { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 650px) {
  :root { --shell-width: calc(100% - 19.6px); --content-gutter: 15px; }
  .header-main { grid-template-columns: 1fr 110px; gap: 10px; }
  .catalog-button { grid-row: 1; grid-column: 2; }
  .search { grid-row: 2; height: 44px; }
  .header-actions { grid-row: 3; gap: 12px; padding-top: 4px; }
  .header-dealer-button { padding-inline: 10px; font-size: 12px; }
  .brand__logo-crop { width: 140px; height: 60px; }
  .brand__logo { width: 184px; height: 92px; top: -13px; left: -23px; }
  .ui-icon, .header-selection-link svg { width: 20px; height: 20px; flex-basis: 20px; }
  .header-selection-link, .cart-link { position: relative; }
  .header-selection-link i, .cart-link i { position: absolute; right: -6px; top: 1px; min-width: 15px; width: auto; height: 15px; font-size: 9px; }
  .main-nav__item { font-size: 12px; }
  .main-nav__inner { gap: 20px; }
  .home-categories { padding-block: 22px 24px; }
  .home-categories__heading, .home-products-heading { gap: 12px; margin-bottom: 18px; }
  .home-categories__controls a { display: none; }
  .home-categories__controls button, .home-products-controls button { width: 32px; height: 32px; }
  .home-categories__track { gap: 14px; }
  .home-category { flex-basis: 140px; }
  .home-category img, .home-category__placeholder { width: 140px; height: 146px; flex-basis: 146px; }
  .home-category__visual { width: 140px; height: 146px; flex-basis: 146px; }
  .home-category__name { font-size: 14px; }
  .home-promo__copy { left: 18px; width: 53%; }
  .home-promo__copy h1 { margin-bottom: 7px; font-size: clamp(18px, 6vw, 24px); }
  .home-promo__copy p { margin-bottom: 10px; font-size: 11px; line-height: 1.35; }
  .home-promo__cta { min-height: 33px; gap: 8px; padding-inline: 10px; border-radius: 6px; font-size: 11px; }
  .home-products-track { gap: 14px; }
  .home-product-card { flex-basis: 250px; padding: 16px; }
  .home-products { padding-block: 22px 28px; }
  .benefits { padding: 24px 20px; }
  .benefits__intro h2 { font-size: 25px; }
  .site-footer__inner { gap: 28px 18px; padding-top: 32px; }
  .site-footer__intro, .site-footer__contact { grid-column: 1 / -1; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
