/* ==========================================================================
   Components: buttons, header, menu, drawer, cards, forms, footer
   ========================================================================== */

/* --------------------------------------------------------------- Buttons */

.btn {
  --btn-invert-text: var(--allium-mist);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 56px;
  padding: 10px 24px;
  border: 0.5pt solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--ff-ui);
  font-size: var(--fs-btn);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-strong);
  transition: background-color var(--dur-3) var(--ease-ui),
    color var(--dur-3) var(--ease-ui), border-color var(--dur-3) var(--ease-ui);
}

[data-theme="light"] .btn {
  --btn-invert-text: var(--allium-navy);
}

.btn--solid {
  background: var(--allium-blue);
  border-color: var(--allium-blue);
  color: var(--white);
}

.btn--solid:hover {
  background: var(--allium-navy);
  border-color: var(--allium-navy);
}

.btn--outline {
  border-color: currentColor;
}

.btn--outline:hover {
  background: var(--color-strong);
  color: var(--btn-invert-text);
}

/* the page you're on, in a row of page links (e.g. the policy pills) */
.btn--outline[aria-current="page"] {
  background: var(--allium-blue);
  border-color: var(--allium-blue);
  color: var(--white);
}

.btn--white {
  background: var(--white);
  border-color: var(--white);
  color: var(--allium-blue);
}

.btn--white:hover {
  background: var(--allium-navy);
  border-color: var(--allium-navy);
  color: var(--white);
}

.btn--small {
  min-height: 48px;
  padding: 8px 20px;
}

.btn--full {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.btn__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0.5pt solid currentColor;
  border-radius: 50%;
}

.btn__icon svg {
  width: 16px;
  height: 16px;
}

/* Arrow that slides out from behind the label on hover */
.btn--arrow .btn__icon {
  margin-left: -56px;
  opacity: 0;
  transition: margin var(--dur-3) var(--ease-ui), opacity var(--dur-3) var(--ease-ui);
}

.btn--arrow:hover .btn__icon,
.btn--arrow:focus-visible .btn__icon {
  margin-left: 0;
  opacity: 1;
}

.btn--lead {
  gap: var(--space-3);
}

.btn--lead .btn__icon {
  width: 28px;
  height: 28px;
  border: 0;
  margin: 0;
  opacity: 1;
}

.btn--lead .btn__icon svg {
  width: 20px;
  height: 20px;
}

/* Small round control (carousel arrows, close buttons) */
.icon-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  color: var(--allium-navy);
  box-shadow: var(--shadow);
  transition: transform var(--dur-3) var(--ease-ui), opacity var(--dur-3) var(--ease-ui);
}

.icon-btn:hover {
  transform: scale(1.06);
}

.icon-btn[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------- Pills */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 16px;
  border-radius: var(--r-pill);
  background: var(--color-soft);
  color: var(--color-heading);
  font-size: var(--fs-tiny);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pill--line {
  background: none;
  border: 0.5pt solid var(--color-line);
}

.pill--new {
  background: var(--color-accent);
  color: var(--white);
}

/* Underline link that redraws on hover */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform var(--dur-5) var(--ease-line);
}

.link-underline:hover::after {
  animation: link-redraw var(--dur-5) var(--ease-line);
}

@keyframes link-redraw {
  0% {
    transform: scaleX(1);
    transform-origin: right;
  }
  50% {
    transform: scaleX(0);
    transform-origin: right;
  }
  51% {
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.link-quiet {
  transition: color var(--dur-3) var(--ease-ui), opacity var(--dur-3) var(--ease-ui);
}

.link-quiet:hover {
  color: var(--color-heading);
}

/* --------------------------------------------------------------- Announcement */

.announce {
  position: absolute;
  inset: 0 0 auto;
  height: 300px;
  z-index: calc(var(--z-header) - 2);
  pointer-events: none;
  background: linear-gradient(rgba(4, 37, 81, 0.28), rgba(4, 37, 81, 0));
}

.announce__text {
  margin-top: 32px;
  text-align: center;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.62);
}

body:not([data-hero="true"]) .announce {
  display: none;
}

@media (max-width: 1024px) {
  .announce {
    display: none !important;
  }
}

/* --------------------------------------------------------------- Header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding-inline: var(--page-pad);
  transition: height var(--dur-3) var(--ease-ui);
}

.site-header.is-sticky {
  height: var(--header-h-sticky);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  width: 100%;
}

.header__logo img {
  height: var(--logo-h);
  width: auto;
  transition: height var(--dur-3) var(--ease-ui), filter var(--dur-3) var(--ease-ui);
}

.site-header.is-sticky .header__logo img {
  height: var(--logo-h-sticky);
}

[data-theme="light"] .header__logo img {
  filter: brightness(0) invert(1);
}

.header__side {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.header__group {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 49px;
  padding: 14px 32px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--allium-slate-900);
  box-shadow: 0 8px 24px rgba(4, 37, 81, 0.06);
}

.header__group--icons {
  gap: var(--space-6);
  padding-inline: 28px;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.header__nav a {
  font-size: var(--fs-nav);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--allium-slate-900);
  transition: opacity var(--dur-3) var(--ease-ui);
}

.header__nav a:hover {
  opacity: 0.6;
}

.header__has-sub {
  position: relative;
}

.header__has-sub > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header__has-sub > a svg {
  width: 10px;
  height: 10px;
  transition: transform var(--dur-3) var(--ease-ui);
}

.header__sub {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  translate: -50% 0;
  min-width: 232px;
  padding: 20px 24px;
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all var(--dur-3) var(--ease-ui);
}

.header__has-sub:hover .header__sub,
.header__has-sub:focus-within .header__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.header__has-sub:hover > a svg {
  transform: rotate(180deg);
}

.header__sub a {
  font-size: var(--fs-small);
  text-transform: uppercase;
  white-space: nowrap;
}

.header__icon {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--allium-slate-900);
  transition: opacity var(--dur-3) var(--ease-ui);
}

.header__icon:hover {
  opacity: 0.6;
}

.header__icon svg {
  width: 18px;
  height: 18px;
}

.header__count {
  position: absolute;
  top: -8px;
  right: -12px;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: 9px;
  background: var(--allium-blue);
  color: var(--white);
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  opacity: 0;
  transform: scale(0.6);
  transition: all var(--dur-3) var(--ease-ui);
}

.header__count.is-visible {
  opacity: 1;
  transform: none;
}

/* Phone tab bar (client's mobile reference) - hidden from tablet up */
.tabbar {
  display: none;
}

@media (max-width: 767px) {
  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }

  .tabbar {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-header);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: var(--allium-blue);
    box-shadow: 0 -8px 24px rgba(4, 37, 81, 0.18);
  }

  .tabbar__item {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding-block: 4px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  .tabbar__item[aria-current="page"] {
    color: var(--white);
  }

  .tabbar__item svg {
    width: 22px;
    height: 22px;
  }

  .tabbar__item .header__count {
    top: 0;
    right: calc(50% - 22px);
    background: var(--white);
    color: var(--allium-blue);
  }
}

.burger {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 49px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--allium-slate-900);
  box-shadow: 0 8px 24px rgba(4, 37, 81, 0.06);
}

.burger__lines {
  display: grid;
  gap: 5px;
  width: 32px;
}

.burger__lines span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-3) var(--ease-ui), width var(--dur-3) var(--ease-ui);
}

.burger__lines span:last-child {
  width: 22px;
  margin-left: auto;
}

.burger:hover .burger__lines span:last-child {
  width: 32px;
}

.header__icon {
  flex: 0 0 auto;
}

.header__icon svg {
  min-width: 18px;
}

/* Phones: logo + two icons + burger must fit in ~343px */
@media (max-width: 767px) {
  .header__side {
    gap: var(--space-2);
  }

  .header__group--icons {
    gap: 18px;
    padding: 14px 18px;
    min-height: 48px;
  }

  .header__group--icons [href="wishlist.html"] {
    display: none;
  }

  .burger {
    min-height: 48px;
    padding: 14px 18px;
  }

  .burger__lines {
    width: 26px;
  }

  .burger__lines span:last-child {
    width: 18px;
  }
}

/* --------------------------------------------------------------- Mega menu */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-top);
  visibility: hidden;
}

.menu.is-open {
  visibility: visible;
}

.menu__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-backdrop);
  opacity: 0;
}

.menu__panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--allium-blue);
  clip-path: inset(0 0 0 100%);
  overflow-y: auto;
  --menu-rule: rgba(255, 255, 255, 0.26);
}

.menu__aside {
  background: var(--allium-navy);
  color: var(--allium-mist);
  padding: calc(var(--header-h) - 20px) var(--page-pad) var(--space-8);
  clip-path: inset(0 100% 0 0);
}

.menu__main {
  color: var(--white);
  padding: var(--space-8) var(--page-pad) var(--space-10);
  display: grid;
  gap: var(--space-8);
  align-content: start;
}

.menu__title {
  font-family: var(--ff-display);
  font-size: var(--fs-menu-title);
  line-height: var(--lh-tight);
  color: inherit;
  margin-bottom: var(--space-5);
}

.menu__title--caps {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Ruled menu, as on the reference site: a hairline under every entry. */
.menu__list {
  display: grid;
  gap: 0;
  margin-bottom: var(--space-7);
  border-top: 1px solid var(--menu-rule);
}

.menu__list li {
  border-bottom: 1px solid var(--menu-rule);
}

.menu__list a {
  font-family: var(--ff-soft);
  font-size: var(--fs-h3);
  line-height: 1;
  transition: opacity var(--dur-3) var(--ease-ui), transform var(--dur-3) var(--ease-ui);
  display: block;
  padding: var(--space-4) 0;
}

.menu__list a:hover {
  opacity: 0.72;
  transform: translateX(6px);
}

.menu__tagline {
  display: none;
}

.menu__thumbs {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}

.menu__thumbs::-webkit-scrollbar {
  display: none;
}

.menu__thumb {
  flex: 0 0 auto;
  width: 122px;
  text-align: center;
}

.menu__thumb figure {
  height: 152px;
  margin-bottom: var(--space-3);
  border-radius: var(--r-capsule) var(--r-capsule) 0 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 45%);
  mask-image: linear-gradient(to top, transparent 0%, #000 45%);
}

.menu__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-image);
}

.menu__thumb:hover img {
  transform: scale(var(--hover-scale));
}

.menu__thumb figcaption,
.menu__thumb span {
  font-family: var(--ff-soft);
  font-size: 20px;
  line-height: 1.4;
}

.menu__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* other menu text that inherited the page's dark colour on the blue panel */
.menu__aside .btn {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.6);
}

.menu__aside .btn:hover,
.menu__aside .btn:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--allium-navy);
}

.menu__columns h4 {
  color: rgba(255, 255, 255, 0.7);
}

/* the menu panel is blue - pills read in white (client feedback: black was
   not readable), filling white on hover */
.menu__pills .btn {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.6);
}

.menu__pills .btn:hover,
.menu__pills .btn:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--allium-blue);
}

.menu__pills .btn svg {
  color: currentColor;
}

.menu__columns {
  display: grid;
  gap: var(--space-6);
}

.menu__columns h4 {
  font-family: var(--ff-soft);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  opacity: 0.7;
  margin-bottom: var(--space-3);
}

.menu__columns ul {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--menu-rule);
}

.menu__columns li {
  border-bottom: 1px solid var(--menu-rule);
}

.menu__columns a {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--fs-body);
}

.menu__close {
  position: absolute;
  top: 28px;
  right: var(--page-pad);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

.menu__close svg {
  width: 20px;
  height: 20px;
}

@media (min-width: 1025px) {
  .menu__panel {
    grid-template-columns: 480px 1fr;
  }

  .menu__aside {
    display: grid;
    grid-template-columns: 274px 110px;
    gap: var(--space-5);
    align-content: start;
    padding: 120px 0 var(--space-8) var(--page-pad);
  }

  .menu__tagline {
    display: grid;
    place-items: center;
  }

  .menu__tagline span {
    font-family: var(--ff-display);
    font-size: 40px;
    letter-spacing: 4px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.2;
    rotate: -90deg;
  }

  .menu__main {
    padding: 140px var(--page-pad) var(--space-10);
    gap: 60px;
  }

  .menu__thumbs {
    gap: var(--space-8);
    overflow: visible;
  }

  .menu__columns {
    grid-template-columns: repeat(3, 174px);
    gap: 120px;
  }
}

/* --------------------------------------------------------------- Drawer (mini cart) */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-top);
  visibility: hidden;
}

.drawer.is-open {
  visibility: visible;
}

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-backdrop);
  opacity: 0;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(500px, 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--allium-slate-900);
  transform: translateX(100%);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-line-soft);
}

.drawer__title {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.drawer__foot {
  padding: var(--space-6);
  border-top: 1px solid var(--color-line-soft);
  display: grid;
  gap: var(--space-4);
}

.drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.drawer__total {
  font-family: var(--ff-soft);
  font-size: var(--fs-h3);
  color: var(--allium-slate-900);
}

.cart-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-4);
  align-items: center;
}

.cart-line__thumb {
  width: 64px;
  height: 80px;
  border-radius: var(--r-capsule);
  overflow: hidden;
  background: var(--color-soft);
}

.cart-line__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-line__name {
  font-family: var(--ff-soft);
  font-size: var(--fs-h4);
  color: var(--allium-slate-900);
  line-height: 1.2;
}

.cart-line__meta {
  font-size: var(--fs-small);
  color: var(--color-meta);
}

.cart-line__remove {
  font-size: var(--fs-small);
  color: var(--color-meta);
  text-decoration: underline;
}

/* --------------------------------------------------------------- Quantity stepper */

.qty {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 56px;
  padding-inline: 6px;
  border: 0.5pt solid var(--color-line);
  border-radius: var(--r-pill);
}

.qty button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background-color var(--dur-3) var(--ease-ui);
}

.qty button:hover {
  background: var(--color-soft);
}

.qty button svg {
  width: 14px;
  height: 14px;
}

.qty input {
  width: 34px;
  border: 0;
  background: none;
  text-align: center;
  font-size: var(--fs-body);
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --------------------------------------------------------------- Product card */

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card__thumb {
  position: relative;
  width: 80%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-capsule);
  overflow: hidden;
  background: var(--color-soft);
  margin-bottom: var(--space-5);
}

.product-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-image);
}

.product-card:hover .product-card__thumb img {
  transform: scale(var(--hover-scale));
}

.product-card__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 22%;
  background: var(--white);
}

.product-card__placeholder img {
  object-fit: contain;
  opacity: 0.85;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.product-card__title {
  font-family: var(--ff-soft);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.product-card__title a {
  transition: opacity var(--dur-3) var(--ease-ui);
}

.product-card__title a:hover {
  opacity: 0.7;
}

.product-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* the client's short spec lines: first line is the action, second who it suits */
.product-card__spec {
  display: grid;
  gap: 2px;
}

.product-card__spec li:first-child {
  color: var(--color-heading);
  font-weight: 500;
}

.product-card__soon {
  font-family: var(--ff-soft);
  font-size: var(--fs-h4);
  color: var(--color-meta);
}

.product-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--gutter);
  margin-top: auto;
  padding-top: var(--space-5);
}

.price {
  font-family: var(--ff-soft);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--color-heading);
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  color: var(--color-meta);
}

/* Five stars, with a half star when the average falls between two. */
.stars {
  display: inline-flex;
  gap: 2px;
  line-height: 0;
  --star-color: #f5a623;
  --star-empty: rgba(30, 41, 59, 0.2);
}

.stars__star {
  position: relative;
  display: inline-block;
  width: var(--star-size, 18px);
  height: var(--star-size, 18px);
}

.stars__star svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stars__star svg:first-child {
  color: var(--star-empty);
}

.stars__star svg:last-child {
  color: var(--star-color);
  clip-path: inset(0 100% 0 0);
}

.stars__star[data-fill="full"] svg:last-child {
  clip-path: inset(0 0 0 0);
}

.stars__star[data-fill="part"] svg:last-child {
  clip-path: inset(0 calc(100% - var(--fill, 50%)) 0 0);
}

[data-theme="light"] .stars {
  --star-empty: rgba(255, 255, 255, 0.32);
}

.rating-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-meta);
}

.rating-line:hover {
  color: var(--color-heading);
}

.rating svg {
  width: 14px;
  height: 14px;
  color: var(--allium-blue);
}

[data-theme="light"] .rating svg {
  color: var(--white);
}

/* --------------------------------------------------------------- Info / feature cards */

.info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--r-pill);
  background: var(--color-soft);
  height: 100%;
}

.info-card__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.icon-label {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-heading);
}

.icon-label svg {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
}

/* --------------------------------------------------------------- Forms */

.field {
  display: grid;
  gap: 6px;
}

.field > label {
  font-size: var(--fs-small);
  color: var(--color-meta);
}

.field input,
.field textarea,
.field select {
  height: 56px;
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  background: none;
  color: var(--color-heading);
  transition: border-color var(--dur-3) var(--ease-ui);
}

.field textarea {
  height: auto;
  min-height: 98px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-meta);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}

.field.has-error input,
.field.has-error textarea {
  border-bottom-color: #b42318;
}

.field__error {
  font-size: var(--fs-small);
  color: #b42318;
  min-height: 0;
}

.form-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .form-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-grid__full {
    grid-column: 1 / -1;
  }
}

.form-group__title {
  font-family: var(--ff-soft);
  font-size: var(--fs-h3);
  color: var(--color-heading);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line-soft);
  margin-bottom: var(--space-5);
}

.checkbox {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-small);
  cursor: pointer;
}

.checkbox input {
  appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--color-line);
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  transition: all var(--dur-3) var(--ease-ui);
}

.checkbox input:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.checkbox input:checked::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  rotate: -45deg;
  translate: 0 -1px;
}

.file-field {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.file-field input {
  display: none;
}

.form-note {
  font-size: var(--fs-small);
  color: var(--color-meta);
}

.form-success {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--r-pill);
  background: var(--color-soft);
}

/* --------------------------------------------------------------- Custom select */

.select {
  position: relative;
  display: inline-block;
  min-width: 220px;
}

.select select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  height: 56px;
  padding: 0 24px;
  border: 0.5pt solid var(--color-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-nav);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-heading);
}

.select__button svg {
  width: 12px;
  height: 12px;
  transition: transform var(--dur-3) var(--ease-ui);
}

.select.is-open .select__button svg {
  transform: rotate(180deg);
}

.select__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: var(--z-content);
  padding: 8px;
  border: 0.5pt solid var(--color-line);
  border-radius: var(--r-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all var(--dur-3) var(--ease-ui);
}

.select.is-open .select__list {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.select__list button {
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  text-align: left;
  font-size: var(--fs-small);
  text-transform: uppercase;
  color: var(--color-heading);
  transition: background-color var(--dur-3) var(--ease-ui);
}

.select__list button:hover,
.select__list button[aria-selected="true"] {
  background: var(--color-soft);
}

/* --------------------------------------------------------------- Accordion */

.accordion__item {
  border-bottom: 1px solid var(--color-line-soft);
}

.accordion__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-5) 0;
  text-align: left;
  font-family: var(--ff-soft);
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--color-heading);
}

.accordion__icon {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-3) var(--ease-ui);
}

.accordion__icon::after {
  rotate: 90deg;
}

.accordion__item.is-open .accordion__icon::after {
  transform: scaleX(0);
}

.accordion__panel {
  overflow: hidden;
  height: 0;
}

.accordion__panel > div {
  padding-bottom: var(--space-5);
  max-width: 760px;
}

/* --------------------------------------------------------------- Custom cursor */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--z-top) + 2);
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  background: var(--white);
  color: var(--allium-navy);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur-3) ease-out, transform var(--dur-3) ease-out;
}

.cursor.is-visible {
  opacity: 1;
  transform: none;
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* --------------------------------------------------------------- Toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  translate: -50% 0;
  z-index: calc(var(--z-top) + 3);
  padding: 14px 28px;
  border-radius: var(--r-pill);
  background: var(--allium-navy);
  color: var(--white);
  font-size: var(--fs-small);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  transition: all var(--dur-3) var(--ease-ui);
  pointer-events: none;
}

.toast.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------- Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-top);
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--page-pad);
  background: rgba(4, 37, 81, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) var(--ease-ui), visibility var(--dur-3);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: min(1100px, 100%);
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--r-md);
}

.lightbox__nav {
  position: absolute;
  inset: auto 0 32px;
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: var(--page-pad);
}

/* --------------------------------------------------------------- Search overlay */

.search {
  position: fixed;
  inset: 0;
  z-index: var(--z-top);
  background: var(--allium-navy);
  color: var(--white);
  padding: calc(var(--header-h) - 20px) var(--page-pad) var(--space-8);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) var(--ease-ui), visibility var(--dur-3);
  overflow-y: auto;
}

.search.is-open {
  opacity: 1;
  visibility: visible;
}

.search__field {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: var(--space-4);
}

.search__field input {
  flex: 1;
  border: 0;
  background: none;
  font-family: var(--ff-display);
  font-size: var(--fs-menu-title);
  color: var(--white);
}

.search__field input:focus {
  outline: none;
}

.search__field input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.search__results {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.search__result {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-4);
  align-items: center;
}

.search__result figure {
  width: 64px;
  height: 80px;
  border-radius: var(--r-capsule);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.search__result img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------- Footer */

/* Client reference layout: brand + contact | Shop | About us | Support |
   newsletter, then copyright + social icons. Stacks on tablet and phone. */

.site-footer {
  position: relative;
  padding: var(--space-9) var(--page-pad) var(--space-6);
  background: transparent;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--gutter);
}

.footer__brand,
.footer__news {
  grid-column: 1 / -1;
}

.footer__brand {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.footer__logo img {
  width: 230px;
  height: auto;
}

.footer__contact {
  display: grid;
  gap: var(--space-2);
  font-style: normal;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 30ch;
}

/* the firm's trademarks under the Allium logo */
.footer__marks {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.footer__marks-title {
  font-size: var(--fs-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-meta);
}

.footer__marks ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--space-3) var(--space-6);
}

.footer__marks li {
  display: grid;
  line-height: 1.15;
}

.footer__mark-name {
  font-family: var(--ff-soft);
  font-size: 19px;
  font-weight: 600;
  color: var(--allium-blue);
}

.footer__mark-tag {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-meta);
}

.footer__contact a {
  color: var(--color-heading);
  transition: color var(--dur-3) var(--ease-ui);
}

.footer__contact a:hover {
  color: var(--color-accent);
}

.footer__nav h4,
.footer__news h4 {
  font-family: var(--ff-soft);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--color-heading);
  margin-bottom: var(--space-4);
}

.footer__nav ul {
  display: grid;
  gap: var(--space-3);
}

.footer__nav a {
  color: var(--color-text);
  transition: color var(--dur-3) var(--ease-ui);
}

.footer__nav a:hover {
  color: var(--color-accent);
}

.footer__news {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.footer__news h4 {
  margin-bottom: 0;
}

.footer__news p {
  color: var(--color-text);
  max-width: 34ch;
}

/* pill email field with a round submit button inside it */
.footer__form {
  position: relative;
  margin-top: var(--space-2);
  max-width: 420px;
}

.footer__form .field input {
  width: 100%;
  height: 60px;
  padding: 0 72px 0 var(--space-5);
  border-radius: var(--r-capsule);
  border: 0.5pt solid var(--color-line);
  background: var(--white);
}

.footer__form button {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--white);
  transition: background-color var(--dur-3) var(--ease-ui), transform var(--dur-3) var(--ease-ui);
}

.footer__form button:hover {
  background: var(--color-accent-deep);
  transform: rotate(-45deg);
}

.footer__form button svg {
  width: 18px;
  height: 18px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line-soft);
  font-size: var(--fs-small);
  color: var(--color-meta);
}

.footer__social {
  display: flex;
  gap: var(--space-3);
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0.5pt solid var(--color-line);
  color: var(--color-heading);
  transition: background-color var(--dur-3) var(--ease-ui), color var(--dur-3) var(--ease-ui);
}

.footer__social a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--white);
}

.footer__social svg {
  width: 18px;
  height: 18px;
}

/* phones: brand on top, link columns two across, newsletter below;
   tablets: the three link columns side by side */
@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .footer__grid {
    grid-template-columns: 1.3fr 0.8fr 0.8fr 0.9fr 1.4fr;
    gap: var(--gutter);
  }

  .footer__brand,
  .footer__news {
    grid-column: auto;
  }
}

/* newsletter card used on the shop page */
.newsletter {
  padding: var(--space-5);
  border-radius: var(--r-pill);
  background: var(--color-soft);
  display: grid;
  gap: var(--space-2);
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.newsletter__form .field {
  flex: 1 1 240px;
}

@media (min-width: 1025px) {
  .newsletter {
    padding: var(--space-8);
  }
}