/* The shop's page layout. Colours, type and shared components are in Railcart.Core's css/theme.css. */

:root {
  --night-blue: #111d27;
  --sky-ink: #3d434a;
}

.container {
  width: min(83rem, 100% - clamp(2.5rem, 8vw, 7.5rem));
  margin-inline: auto;
}

/* Header: logo, search and actions, then the category navigation. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
}

.header-top {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.25rem;
  padding-block: 0.25rem;
}

.brand {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
}

.brand .logo {
  height: 1.875rem;
}

.brand-tagline {
  color: var(--muted-ink);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.search {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 32rem;
  margin-inline: auto;
}

.search .icon {
  position: absolute;
  top: 50%;
  left: 0.875rem;
  translate: 0 -50%;
  color: var(--ink-soft);
}

.search input {
  width: 100%;
  min-height: 44px;
  padding: 0.375rem 1rem 0.375rem 2.5rem;
  border: 0;
  border-radius: 2px;
  background: #eff1f3;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
}

.search input::placeholder {
  color: var(--muted-ink);
  opacity: 1;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.8125rem;
}

/* Mina sidor's header has no search to push the actions right. */
.header-actions-end {
  margin-left: auto;
}

.icon-back {
  scale: -1 1;
}

.header-note,
.header-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.header-action {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}

.header-action:disabled {
  cursor: not-allowed;
}

a.header-action {
  text-decoration: none;
}

a.header-action:hover {
  text-decoration: underline;
}

.cart-button {
  gap: 0.75rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--line-soft);
}

.cart-button span {
  font-weight: 600;
}

.header-nav {
  border-block: 1px solid var(--line-soft);
  background: #fafbfb;
}

.header-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.header-nav nav {
  min-width: 0;
}

.site-nav {
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

/* Where the customer is in Mina sidor's menu: a bar, not colour alone. */
.site-nav a[aria-current] {
  box-shadow: inset 0 -3px var(--accent);
  font-weight: 700;
}

.header-slogan {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Shared pieces. */

.button-outline {
  border-color: var(--night);
  background: transparent;
  color: var(--night);
}

.button-outline:hover {
  background: var(--surface);
}

/* Hero: the photo darkened on the left, where the copy sits. The worker is the photo's centre (its sky and dark
   edge are extended for that), kept at an offset from the page's centre so he stays between the copy and the aside
   at any width. The photo covers screens up to 2560 px wide; past that its sky fades into a matching grey. */

.hero {
  background:
    linear-gradient(to right, var(--night) calc(50% - 20rem), rgb(20 25 30 / 0) calc(50% + 6rem)),
    url("../img/hero.webp") calc(50% + min(19rem, 50vw - 28rem)) center / auto 100% no-repeat,
    linear-gradient(to right, var(--night) 50%, #bbc2d0 50%);
  color: #fff;
}

.hero-inner {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  min-height: 21.5rem;
}

.hero-copy {
  max-width: 54rem;
  padding-block: 2rem;
}

.hero .eyebrow {
  margin-bottom: 0.5rem;
  color: #c3c8cd;
}

.hero h1 {
  max-width: 14ch;
  margin-bottom: 0.375em;
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  line-height: 1.04;
}

.hero-lede {
  max-width: 23.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.75rem;
}

.hero-copy .button {
  min-width: 12.25rem;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-facts li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  line-height: 1.45;
}

.hero-facts .icon {
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 1.25;
}

.hero-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-block: 2rem;
  padding-left: 1.25rem;
  border-left: 1px solid rgb(61 67 74 / 0.6);
  color: var(--sky-ink);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  line-height: 1.9;
  text-transform: uppercase;
}

.hero-aside p {
  max-width: 7.5rem;
  margin: 0;
  color: #23282e;
}

.hero-aside span {
  display: block;
  color: var(--sky-ink);
}

.hero-aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-aside ul::before {
  content: "";
  display: block;
  width: 2rem;
  margin-bottom: 1.5rem;
  border-top: 1px solid currentColor;
}

/* Category cards. */

.categories {
  padding-block: 1.125rem 1.25rem;
}

.category-grid,
.product-grid,
.promise-grid {
  display: grid;
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.category-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
}

.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 8.25rem;
  padding: 1.375rem 1.25rem 1.125rem;
  overflow: hidden;
  background: var(--stone);
  text-decoration: none;
}

.category-card h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 0.125rem;
  font-size: 1.25rem;
}

.category-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

.category-card .icon {
  margin-top: auto;
}

/* The photo fades in from the left, so the card's own grey and the photo's backdrop meet without a seam. On a
   narrow card it is cropped from that faded side, never over the text. */
.category-card img {
  position: absolute;
  inset: 0 0 0 auto;
  height: 100%;
  width: auto;
  max-width: 60%;
  object-fit: cover;
  object-position: right center;
  mask-image: linear-gradient(to right, transparent, #000 25%);
}

/* A missing photo: the RAILeqmt mark on grey. On a category card it sits where the photo would, on the card's own
   grey. */
.photo-placeholder {
  display: grid;
  place-items: center;
  background: var(--stone);
}

.photo-placeholder .logo {
  width: 60%;
  height: auto;
  opacity: 0.4;
}

.category-card .photo-placeholder {
  position: absolute;
  inset: 0 0 0 auto;
  width: 45%;
  background: none;
}

/* Popular products. */

.products {
  padding-bottom: 1.25rem;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.section-head h2 {
  margin: 0;
  font-size: 1.125rem;
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  text-decoration: none;
}

.section-link .icon {
  width: 1rem;
  height: 1rem;
}

.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: 0.9375rem;
}

.product-card {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.875rem;
  height: 100%;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background: var(--surface);
  text-decoration: none;
}

.product-card img,
.product-card .photo-placeholder {
  align-self: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.product-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
  padding-top: 0.25rem;
}

.product-body p {
  margin: 0;
}

.product-brand {
  color: var(--muted-ink);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-name {
  margin: 0.25rem 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.4;
}

.product-sku {
  color: var(--muted-ink);
  font-size: 0.75rem;
}

.product-price {
  margin: 0.25rem 0 0;
  font-weight: 700;
}

.product-price span {
  color: var(--muted-ink);
  font-size: 0.75rem;
  font-weight: 400;
}

.product-price-large {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
}

.product-price-large span {
  font-size: 0.875rem;
}

.product-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.product-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.product-description {
  margin: 0 0 1.5rem;
}

.product-body .product-delivery {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.75rem;
}

.product-delivery .icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--ok);
}

.product-delivery .product-arrow {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  color: var(--ink);
}

/* The three promises. */

.promises {
  border-top: 1px solid var(--line-soft);
}

.promise-grid {
  grid-template-columns: repeat(3, 1fr);
}

.promise-grid li {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 1.5rem 1.75rem;
}

.promise-grid li + li {
  border-left: 1px solid var(--line-soft);
}

.promise-grid li:first-child {
  padding-left: 0;
}

.promise-grid .icon {
  width: 2.25rem;
  height: 2.25rem;
  stroke-width: 1.1;
  color: var(--ink-soft);
}

.promise-grid h3 {
  margin: 0.25rem 0 0.25rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
}

.promise-grid p {
  margin: 0;
  color: var(--muted-ink);
  font-size: 0.6875rem;
}

/* The closing band: the story on stone, the brand on night blue. */

.band {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.band-story,
.band-brand {
  min-height: 12.25rem;
  padding: 1.5rem clamp(1.25rem, 4vw, 3.75rem);
}

.band-story {
  background:
    url("../img/band-left.webp") right center / auto 100% no-repeat,
    #edeff2;
}

.band-story h2 {
  max-width: 12ch;
  margin-bottom: 0.25rem;
  font-size: clamp(1.5rem, 2.5vw, 1.75rem);
  line-height: 1.15;
}

.band-story p:not(.eyebrow) {
  max-width: 21rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

.band-story .button {
  min-height: 2.25rem;
  padding-block: 0.5rem;
}

.band-brand {
  background:
    linear-gradient(to right, var(--night-blue) 35%, rgb(17 29 39 / 0.2) 75%),
    url("../img/band-right.webp") right center / auto 100% no-repeat,
    var(--night-blue);
  color: #fff;
}

.band-brand .eyebrow {
  color: #c3c8cd;
}

.band-title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.1;
}

.band-title::after {
  content: "";
  display: block;
  width: 2.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid currentColor;
}

.band-words {
  margin: 0;
}

/* Inner pages: breadcrumbs and a heading, then the page's own content. */

.page-head {
  padding-block: 1.5rem 1rem;
}

.page-head h1 {
  margin-bottom: 0.25rem;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.1;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--muted-ink);
}

.product-page {
  display: grid;
  grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding-bottom: 3rem;
}

.product-photo {
  border: 1px solid var(--line-soft);
}

.product-photo img,
.product-photo .photo-placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.product-photo img {
  display: block;
}

.product-page h1 {
  margin: 0.25rem 0 1.5rem;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.15;
}

.product-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.5rem 1rem;
  margin: 0 0 1.5rem;
  padding-block: 1rem;
  border-block: 1px solid var(--line-soft);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.product-facts dt {
  color: var(--muted-ink);
}

.product-facts dd {
  margin: 0;
}

.prose {
  max-width: 42rem;
  padding-bottom: 3rem;
  line-height: 1.6;
}

.prose h2 {
  margin-top: 2rem;
  font-size: 1.25rem;
}

/* Account pages: sign-in, registration and Mina sidor. */

.account {
  max-width: 28rem;
  padding-bottom: 3rem;
  overflow-wrap: anywhere;
}

.account-wide {
  max-width: 64rem;
}

.account section {
  margin-bottom: 2rem;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-bottom: 1rem;
}

.notice {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Footer. */

.site-footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 2rem;
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer p {
  margin: 0;
  color: var(--muted-ink);
  font-size: 0.8125rem;
}

.logo-small {
  height: 1.25rem;
}

.error-page {
  padding-block: 6rem;
}

/* Narrower screens: the slogan, aside and header labels go first, then the search takes its own row. */

@media (max-width: 75rem) {
  .header-slogan,
  .hero-aside {
    display: none;
  }
}

@media (max-width: 62rem) {
  .header-note {
    display: none;
  }

  .hero {
    background:
      linear-gradient(rgb(20 25 30 / 0.85), rgb(20 25 30 / 0.85)),
      url("../img/hero.webp") center / cover no-repeat,
      var(--night);
  }

  .band,
  .product-page {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  .category-grid {
    grid-template-columns: 1fr;
  }

  .header-top {
    flex-wrap: wrap;
    gap: 0 1rem;
  }

  .header-actions {
    margin-left: auto;
    gap: 1rem;
  }

  .search {
    order: 1;
    flex-basis: 100%;
    max-width: none;
    margin-bottom: 0.5rem;
  }

  .band-story {
    background: #edeff2;
  }

  .promise-grid {
    grid-template-columns: 1fr;
  }

  .promise-grid li {
    padding-left: 0;
    border-left: 0;
  }

  .promise-grid li + li {
    border-top: 1px solid var(--line-soft);
  }
}

.add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.add-to-cart input {
  width: 5rem;
  padding: 0.5rem;
}

.order-table {
  width: 100%;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
}

.order-table th,
.order-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--line, #e2e4e7);
  text-align: left;
  vertical-align: top;
}

.order-table thead th {
  color: var(--muted-ink);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.quantity-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.quantity-form input {
  width: 4.5rem;
  padding: 0.375rem;
}

.amounts {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, max-content);
  gap: 0.25rem 1rem;
  margin: 0 0 1.5rem;
}

.amounts dd {
  margin: 0;
}

.amounts dt:last-of-type,
.amounts dd:last-of-type {
  font-weight: 700;
}