/* OilsPortal v0.38.2 · Public UI Consistency & Component Unification */
:root[data-site-theme]{
  --ui-radius-card:24px;
  --ui-radius-panel:28px;
  --ui-radius-control:13px;
  --ui-control-h:44px;
  --ui-gap:12px;
  --ui-shadow:0 14px 36px rgba(22,40,58,.07);
}

/* Common public width. Old pages used 1080/1180/920 randomly. */
body > .wrap,
body > .shell,
body > .s{
  width:min(1180px,calc(100% - 36px))!important;
}

/* One header language everywhere: rounded rectangles, not half links / half buttons. */
[data-site-header-nav]{
  gap:8px!important;
}
[data-site-header-nav] a{
  min-height:38px!important;
  padding:0 11px!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  background:transparent!important;
  text-decoration:none!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1!important;
}
[data-site-header-nav] a:hover{
  border-color:var(--line)!important;
  background:color-mix(in srgb,var(--panel) 92%,var(--accent) 8%)!important;
  transform:translateY(-1px);
}
[data-site-header-nav] a[aria-current="page"]{
  border-color:color-mix(in srgb,var(--accent) 44%,var(--line))!important;
  background:color-mix(in srgb,var(--panel) 88%,var(--accent) 12%)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 7%,transparent);
}
[data-site-header-nav] a[href="/account"],
[data-site-header-nav] a[href="/cart"]{
  border-color:var(--line)!important;
  background:color-mix(in srgb,var(--panel) 95%,var(--accent) 5%)!important;
}

/* Hero/intro panels. */
body .hero{
  margin:0 0 20px!important;
  padding:clamp(28px,4vw,46px)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--ui-radius-panel)!important;
  background:
    radial-gradient(circle at 96% 0,color-mix(in srgb,var(--accent) 7%,transparent),transparent 34%),
    var(--panel)!important;
  box-shadow:var(--ui-shadow)!important;
  overflow:hidden;
}
body .hero h1{
  margin-top:12px!important;
}

/* Forms/search/filter controls share the same geometry. */
form.search,
.search,
.filters,
.filter-panel{
  gap:10px!important;
}
form.search{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:stretch!important;
}
form.search input,
form.search select,
.filters input,
.filters select,
.filter-panel input,
.filter-panel select,
.catalog-filters input,
.catalog-filters select{
  min-height:var(--ui-control-h)!important;
  padding:0 14px!important;
  border:1px solid var(--line)!important;
  border-radius:var(--ui-radius-control)!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  line-height:1.2!important;
}
form.search button,
.filters button,
.filter-panel button,
.catalog-filters button,
.button,
.btn{
  min-height:var(--ui-control-h)!important;
  padding:0 15px!important;
  border:1px solid var(--line)!important;
  border-radius:var(--ui-radius-control)!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  font-weight:800!important;
  line-height:1.1!important;
  text-decoration:none!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
form.search button:hover,
.filters button:hover,
.filter-panel button:hover,
.catalog-filters button:hover,
.button:hover,
.btn:hover{
  border-color:color-mix(in srgb,var(--accent) 40%,var(--line))!important;
  background:color-mix(in srgb,var(--panel) 91%,var(--accent) 9%)!important;
}

/* Filter tabs/chips: rounded rectangles with breathing room. */
.categories,
.chips,
.tabs,
.res{
  gap:8px!important;
}
.categories a,
.chip,
.tabs a,
.tabs button,
.filter-chip,
.filter-pill{
  min-height:36px!important;
  padding:0 12px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-decoration:none!important;
  font-weight:700!important;
  line-height:1.1!important;
}
.categories a:hover,
.chip:hover,
.tabs a:hover,
.tabs button:hover,
.filter-chip:hover,
.filter-pill:hover{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line))!important;
  background:color-mix(in srgb,var(--panel) 91%,var(--accent) 9%)!important;
}

/* Shared surfaces. */
.card,
.news-card,
.course-card,
.collection-card,
.section,
.info,
.panel,
.filter-panel,
.filters,
.empty,
.gate,
.access-card,
.notification-card{
  border-radius:var(--ui-radius-card)!important;
}
.grid{
  gap:18px!important;
}
.empty,
.info{
  padding:22px!important;
  border:1px solid var(--line)!important;
  background:var(--panel)!important;
}

/* Footer is one component too. */
[data-site-footer-nav]{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px 18px!important;
}
[data-site-footer-nav] a,
[data-site-footer-nav] button{
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  color:var(--muted)!important;
  font:inherit!important;
  line-height:1.4!important;
  text-decoration:none!important;
}
[data-site-footer-nav] a:hover,
[data-site-footer-nav] button:hover{
  color:var(--text)!important;
  text-decoration:underline!important;
}

/* Focus consistency. */
[data-site-header-nav] a:focus-visible,
form.search input:focus-visible,
form.search select:focus-visible,
form.search button:focus-visible,
.button:focus-visible,
.btn:focus-visible,
.categories a:focus-visible,
.chip:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 24%,transparent)!important;
  outline-offset:2px!important;
}

@media(max-width:1180px){
  [data-site-header-nav]{justify-content:flex-start!important}
}
@media(max-width:720px){
  body > .wrap,
  body > .shell,
  body > .s{width:min(100% - 24px,1180px)!important}
  [data-site-header-nav] a{
    min-height:36px!important;
    padding:0 10px!important;
    font-size:12.5px!important;
  }
  body .hero{padding:24px 18px!important;border-radius:20px!important}
  form.search{grid-template-columns:1fr!important}
  form.search button{width:100%!important}
}

/* Catalog/news pagination and filter buttons use the same component language. */
.filter-actions{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
.filter-submit,
.filter-reset,
.page-button,
.active-filter{
  min-height:38px!important;
  padding:0 12px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-decoration:none!important;
  font-weight:750!important;
  line-height:1.1!important;
}
.filter-submit:hover,
.filter-reset:hover,
.page-button:hover,
.active-filter:hover{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line))!important;
  background:color-mix(in srgb,var(--panel) 91%,var(--accent) 9%)!important;
}
.chip.active,
.page-button.active,
.active-filter{
  border-color:color-mix(in srgb,var(--accent) 48%,var(--line))!important;
  background:color-mix(in srgb,var(--panel) 86%,var(--accent) 14%)!important;
}
.pagination{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}

/* v0.39.1 service offer polish */
.card .featured{white-space:nowrap}.service-offer-note{color:var(--muted);font-size:12px}