/* Rakson storefront and catalogue */
.storefront {
  --ink: #17251f;
  --night: #15211c;
  --paper: #f6f7f2;
  --white: #fff;
  --lime: #d9f76b;
  --muted: #47574c;
  --border: #d9e1d5;
  --green: #2a6544;
  --green-dark: #224631;
  --wash: #edf1e8;
  --gutter: clamp(1.2rem, 4.45vw, 4.25rem);
  --wrap: 1510px;
}

html:has(.storefront) { scroll-padding-top: 4.6rem; }
.storefront .site-header {
  position: sticky;
  inset-block-start: .5rem;
  z-index: 5;
  width: min(calc(100% - 2rem), 76rem);
  margin-inline: auto;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: rgb(246 247 242 / .7);
  backdrop-filter: blur(12px);
  color: var(--ink);
}
.storefront .site-header.is-scrolled { box-shadow: 0 .3rem 1.1rem #101f1814; }
.storefront .header-inner { min-height: 3.75rem; padding-inline: clamp(.8rem, 2vw, 1.7rem); }
.storefront .site-menu { gap: clamp(.9rem, 2.6vw, 2.75rem); }
.storefront .site-menu a { color: inherit; }
.storefront .site-menu a:is(:hover, [aria-current]) { color: var(--green); text-decoration: underline; text-underline-offset: .45rem; }
.storefront .site-header .brand-mark { background: var(--green-dark); }
.storefront .site-header .brand-mark::after { background: var(--paper); }
.storefront .site-header .wordmark-dot { color: var(--green); }
.storefront .site-header :focus-visible, .storefront .hero :focus-visible, .storefront .distribution :focus-visible, .storefront .projects :focus-visible { outline-color: var(--green); }
.storefront .header-quote { border-color: #bfd368; }
.storefront .button { border-radius: .32rem; }
.storefront .button-dark { background: var(--green-dark); }
.storefront .button-dark:hover { background: #316647; }
.storefront .button-outline { color: var(--ink); border-color: #9dae9f; background: transparent; }
.storefront .button-outline:hover { background: #e7eee2; border-color: var(--green); }

.storefront .hero { min-height: 0; color: var(--ink); background: var(--paper); overflow: visible; }
.storefront .hero-inner { display: grid; grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); align-items: center; gap: clamp(1.7rem, 4.2vw, 4.75rem); padding-block: clamp(1.7rem, 4vw, 4.2rem); }
.storefront .hero-copy { max-width: 42rem; }
.storefront .hero h1 { margin: .85rem 0 1.25rem; font-size: clamp(2.9rem, 4.85vw, 5.65rem); line-height: .94; letter-spacing: -.055em; word-spacing: .07em; }
.storefront .hero h1 em { display: block; color: var(--green); }
.storefront .hero-description { max-width: 34rem; color: var(--muted); font-size: clamp(.96rem, 1.3vw, 1.16rem); }
.storefront .hero-actions { gap: .65rem; margin-top: 1.45rem; }
.storefront .hero-brands { color: var(--green-dark); }
.storefront .hero-brands:hover, .storefront .hero-brands span { color: var(--green); }
.hero-visual { margin: 0; position: relative; isolation: isolate; min-width: 0; aspect-ratio: 1.24; overflow: hidden; border-radius: .5rem; background: #d9dcd3; }
.hero-visual picture, .hero-visual img { width: 100%; height: 100%; }
.hero-visual img { object-fit: cover; object-position: 67% 50%; }
.hero-visual figcaption { position: absolute; bottom: .85rem; left: .85rem; padding: .37rem .58rem; color: var(--white); background: #17251fea; border-radius: .15rem; font-size: .7rem; }
.hero-visual figcaption span { padding-inline: .2rem; color: var(--lime); }

.catalogue-metrics { background: var(--green-dark); color: var(--white); }
.catalogue-metrics-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 0; }
.catalogue-metrics-inner div { display: flex; flex-direction: column-reverse; justify-content: center; gap: .1rem; padding-block: .95rem; }
.catalogue-metrics-inner div + div { padding-inline-start: clamp(.6rem, 3vw, 2.75rem); border-left: 1px solid #6e8775; }
.catalogue-metrics-inner dt { font-size: clamp(.67rem, 1.22vw, .84rem); color: #eff6ef; }
.catalogue-metrics-inner dd { margin: 0; color: var(--lime); font: 800 clamp(1.25rem, 3vw, 2.5rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }

.storefront .distribution { padding-block: clamp(1.8rem, 3.4vw, 3.4rem); color: var(--ink); background: #e9eee4; border-color: var(--border); }
.storefront .distribution-heading { align-items: center; }
.storefront .distribution-heading h2 { font-size: clamp(1.95rem, 3.15vw, 3.5rem); word-spacing: .05em; }
.storefront .distribution-heading p { color: var(--muted); }
.storefront .distribution-brand { min-height: 0; padding: 0; gap: 0; overflow: hidden; color: var(--ink); background: var(--white); border-color: #d3dbd0; border-radius: .38rem; }
.storefront .distribution-brand:hover { background: #f1f7ea; border-color: var(--green); }
.distribution-logo { height: clamp(4.2rem, 7.5vw, 6.5rem); display: flex; align-items: center; justify-content: center; padding: .75rem; background: var(--white); }
.distribution-logo img { width: 100%; max-width: 8.6rem; height: 3.7rem; max-height: 100%; object-fit: contain; }
.distribution-logo-dark { background: #233a2d; }
.distribution-logo-dark img { height: 5.2rem; }
.distribution-logo-bg img { height: 4.45rem; }
.storefront .distribution-action { display: flex; justify-content: space-between; align-items: center; gap: .25rem; padding: .65rem .75rem; border-top: 1px solid var(--border); color: var(--green-dark); }

.storefront .catalogue .section-head h2, .storefront .projects h2, .storefront .contact h2 { font-size: clamp(2.45rem, 5.15vw, 5.25rem); word-spacing: .06em; }
.storefront .catalogue .section-head a { font-weight: 690; text-decoration-color: #779b78; text-underline-offset: .16em; }
.storefront .family-nav a { background: #e8eee3; color: var(--green-dark); border-color: #cddbc9; padding: .54rem .75rem; }
.storefront .family-nav a:hover { background: var(--lime); }
.storefront .category-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .95rem; }
.storefront .category-card, .storefront .catalogue-assist { grid-column: span 4; border-radius: .48rem; overflow: hidden; }
.storefront .category-card:is(#electrical-panels, #changeover-switches) { grid-column: span 6; }
.storefront .category-card { background: var(--white); }
.storefront .category-copy { padding: clamp(1.02rem, 2vw, 1.55rem); }
.category-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--border); }
.category-actions a { color: var(--green-dark); font-size: .82rem; font-weight: 740; text-decoration: none; }
.category-actions a:first-child { text-decoration: underline; text-underline-offset: .2em; }
.category-actions a:hover { text-decoration: underline; }
.storefront .catalogue-assist { grid-column: span 12; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.35rem; min-height: 0; background: #e6efdb; }
.storefront .catalogue-assist p { max-width: none; }
.storefront .assist-mark { margin: 0; }
.storefront .assist-mark::after { background: #e6efdb; }
.storefront .projects { background: #e7ede3; color: var(--ink); border-block: 1px solid var(--border); }
.storefront .projects-visual { border-radius: .45rem; border-color: #b8c5b6; }
.storefront .projects-visual::after { display: none; }
.storefront .projects .hero-eyebrow { color: var(--green); }
.storefront .projects-copy > p:not(.eyebrow), .storefront .steps span { color: var(--muted); }
.storefront .steps li { border-color: #c6d2c2; }
.storefront .steps li::before { color: var(--green); }
.storefront .contact-card { padding: .2rem 1.3rem; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--green); border-radius: .3rem; }
.storefront .contact-row:last-child { border-bottom: 0; }
.storefront .site-footer { background: var(--green-dark); }

@media (prefers-reduced-motion: no-preference) {
  .storefront .site-header { transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }
}

@media (max-width: 1240px) {
  .storefront .header-quote { display: none; }
  .js .storefront .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: .22rem;
    background: transparent;
    color: inherit;
  }
  .storefront .nav-toggle > span:first-child { width: .95rem; height: 2px; background: currentColor; box-shadow: 0 -.31rem 0 currentColor, 0 .31rem 0 currentColor; }
  .js .storefront .site-menu:not([data-open]) { display: none; }
  .js .storefront .site-menu[data-open] {
    position: absolute;
    inset: 100% 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-height: calc(100dvh - 4.5rem);
    padding: .55rem clamp(.8rem, 2vw, 1.7rem) .85rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border);
    border-radius: .45rem;
    background: var(--paper);
    box-shadow: 0 .8rem 1.7rem #101f1824;
  }
  .js .storefront .site-menu[data-open] a {
    display: flex;
    align-items: center;
    min-height: 2.85rem;
    padding: .45rem .1rem;
    color: var(--ink);
    font-size: .95rem;
  }
  .js .storefront .site-menu[data-open] a + a { border-top: 1px solid var(--border); }
  .js .storefront .site-menu[data-open] a:is(:hover, :focus-visible, [aria-current]) { color: var(--green); }
}

@media (min-width: 861px) {
  .storefront .category-card:is(#electrical-panels, #changeover-switches) .category-image { aspect-ratio: 1.55; }
}

@media (max-width: 860px) {
  .storefront .hero-inner { grid-template-columns: 1fr; padding-top: 2.35rem; }
  .storefront .hero h1 { max-width: 13ch; font-size: clamp(3.2rem, 8vw, 5.3rem); }
  .hero-visual { aspect-ratio: 1.55; }
  .storefront .distribution-heading { align-items: flex-start; }
  .storefront .category-card { grid-column: span 6; }
}

@media (max-width: 680px) {
  .storefront .site-header { width: calc(100% - 1rem); }
  .storefront .header-inner { min-height: 3.4rem; padding-block: .2rem; }
  .storefront .nav-toggle { border-color: #b1c1b1; color: var(--ink); }
  .storefront .hero-inner { gap: 1.3rem; padding-block: 1.85rem 1.25rem; }
  .storefront .hero h1 { font-size: clamp(2.62rem, 10.2vw, 4.8rem); }
  .hero-visual { aspect-ratio: 1.32; }
  .distribution-logo { height: 4.5rem; }
}

@media (max-width: 455px) {
  .storefront .category-card, .storefront .category-card:is(#electrical-panels, #changeover-switches) { grid-column: span 12; }
  .storefront .category-card .category-image { aspect-ratio: 1.12; }
  .storefront .catalogue-assist { grid-template-columns: 1fr; }
  .storefront .hero-actions .button { font-size: .76rem; }
}