/* ============================================================
   SABLE — global chrome
   ------------------------------------------------------------
   Header, nav, mega-menu, mobile panel, search, cart drawer,
   footer, product card. Everything here reads tokens from
   sbl-tokens.css — nothing here redefines a token.
   ============================================================ */

/* --- Skip link ------------------------------------------- */
.skip-to-content-link {
  position: absolute;
  top: -100%;
  left: var(--sbl-s-3);
  z-index: var(--sbl-z-modal);
  padding: var(--sbl-s-3) var(--sbl-s-4);
  background: var(--sbl-paper);
  color: var(--sbl-ink);
  font-size: var(--sbl-t-small);
  font-weight: 600;
  text-decoration: none;
}
.skip-to-content-link:focus {
  top: var(--sbl-s-3);
}

/* --- Shared icon button ------------------------------------ */
.sbl-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  min-height: 4.4rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--sbl-paper);
  cursor: pointer;
  position: relative;
}
.sbl-icon-btn svg {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}

/* ============================================================
   Header
   ============================================================ */
.sbl-header {
  position: sticky;
  top: 0;
  z-index: var(--sbl-z-header);
  background: var(--sbl-ink);
  border-bottom: var(--sbl-border);
}

.sbl-announce {
  background: var(--sbl-raise);
  border-bottom: 1px solid var(--sbl-line-soft);
}
.sbl-announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem;
  font-size: var(--sbl-t-micro);
  letter-spacing: var(--sbl-ls-label);
  text-transform: uppercase;
  color: var(--sbl-mute);
  text-align: center;
}
.sbl-announce__link {
  color: var(--sbl-mute);
  text-decoration: none;
}
.sbl-announce__link:hover {
  color: var(--sbl-paper);
}

.sbl-header__bar {
  transition: padding var(--sbl-dur) var(--sbl-ease);
}
.sbl-header__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 6.4rem;
  gap: var(--sbl-s-3);
  transition: min-height var(--sbl-dur) var(--sbl-ease);
}
.sbl-header.is-condensed .sbl-header__row {
  min-height: 5.2rem;
}

.sbl-header__left,
.sbl-header__right {
  display: flex;
  align-items: center;
  gap: var(--sbl-s-1);
  min-width: 0;
}
.sbl-header__right {
  justify-content: flex-end;
}
.sbl-header__centre {
  display: flex;
  justify-content: center;
}

.sbl-wordmark {
  font-size: var(--sbl-t-h3);
  font-weight: 600;
  letter-spacing: var(--sbl-ls-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sbl-paper);
  white-space: nowrap;
}
.sbl-wordmark--small {
  font-size: var(--sbl-t-body);
}

.sbl-wordmark__image {
  display: block;
  width: auto;
  height: 4rem;
}
.sbl-wordmark--small .sbl-wordmark__image {
  height: 2.8rem;
}
@media (max-width: 749px) {
  .sbl-wordmark__image {
    height: 3.2rem;
  }
}

.sbl-header__menu-toggle {
  display: inline-flex;
}
@media (min-width: 750px) {
  .sbl-header__menu-toggle {
    display: none;
  }
}

.sbl-cart-bubble {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sbl-signal);
  color: var(--sbl-ink);
  font-size: 1.0rem;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--sbl-radius-pill);
}
.sbl-cart-bubble[hidden] {
  display: none;
}

/* --- Desktop nav / mega-menu -------------------------------- */
.sbl-nav {
  display: none;
}
@media (min-width: 750px) {
  .sbl-nav {
    display: block;
  }
}
.sbl-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sbl-s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sbl-nav__item {
  position: static;
}
.sbl-nav__link,
.sbl-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sbl-s-1);
  min-height: 4.4rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--sbl-t-small);
  letter-spacing: var(--sbl-ls-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sbl-paper);
  cursor: pointer;
}
.sbl-nav__link:hover,
.sbl-nav__trigger:hover {
  color: var(--sbl-mute);
}
.sbl-nav__chevron svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  transition: transform var(--sbl-dur) var(--sbl-ease);
}
.sbl-nav__trigger[aria-expanded='true'] .sbl-nav__chevron svg {
  transform: rotate(180deg);
}

.sbl-nav__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--sbl-raise);
  border-bottom: var(--sbl-border);
  box-shadow: var(--sbl-shadow-lg);
}
.sbl-nav__panel[hidden] {
  display: none;
}
.sbl-nav__panel-list {
  list-style: none;
  margin: 0;
  padding: var(--sbl-s-5) var(--sbl-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sbl-s-2) var(--sbl-s-6);
  max-width: var(--sbl-maxw);
  margin-inline: auto;
}
.sbl-nav__panel-link {
  font-size: var(--sbl-t-body);
  text-decoration: none;
  color: var(--sbl-paper);
}
.sbl-nav__panel-link:hover {
  color: var(--sbl-signal);
}

/* --- Search --------------------------------------------- */
.sbl-search {
  border-top: 1px solid var(--sbl-line-soft);
  background: var(--sbl-raise);
}
.sbl-search[hidden] {
  display: none;
}
.sbl-search__inner {
  padding-block: var(--sbl-s-4);
}
.sbl-search__form-wrap {
  display: block;
}
.sbl-search__form {
  display: flex;
  align-items: center;
  gap: var(--sbl-s-2);
  border-bottom: var(--sbl-border);
}
.sbl-search__input {
  flex: 1;
  min-height: 4.8rem;
  background: transparent;
  border: 0;
  color: var(--sbl-paper);
  font: inherit;
  font-size: var(--sbl-t-h3);
}
.sbl-search__input::placeholder {
  color: var(--sbl-faint);
}
.sbl-search__input:focus {
  outline: none;
}
.sbl-search__results {
  padding-top: var(--sbl-s-4);
}
.sbl-search__hint {
  margin: 0 0 var(--sbl-s-2);
}
.sbl-search__fallback {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sbl-s-2) var(--sbl-s-5);
  list-style: none;
  margin: 0 0 var(--sbl-s-4);
  padding: 0;
}
.sbl-search__fallback a {
  text-decoration: none;
  color: var(--sbl-paper);
  font-size: var(--sbl-t-body);
}
.sbl-search__fallback a:hover {
  color: var(--sbl-signal);
}

.sbl-search__products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sbl-s-3);
  list-style: none;
  margin: 0 0 var(--sbl-s-3);
  padding: 0;
}
@media (min-width: 750px) {
  .sbl-search__products {
    grid-template-columns: repeat(4, 1fr);
  }
}
.sbl-search__product {
  display: flex;
  gap: var(--sbl-s-2);
  text-decoration: none;
  color: var(--sbl-paper);
}
.sbl-search__product-media {
  width: 6rem;
  flex: none;
}
.sbl-search__product-title {
  font-size: var(--sbl-t-small);
  display: block;
}
.sbl-search__product-price {
  font-size: var(--sbl-t-small);
  color: var(--sbl-mute);
  display: block;
}
.sbl-search__view-all {
  display: inline-block;
  margin-bottom: var(--sbl-s-4);
  font-size: var(--sbl-t-small);
  letter-spacing: var(--sbl-ls-label);
  text-transform: uppercase;
  color: var(--sbl-signal);
}

/* ============================================================
   Mobile nav panel
   ============================================================ */
.sbl-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--sbl-z-drawer);
  visibility: hidden;
}
.sbl-mobile-nav.is-open {
  visibility: visible;
}
.sbl-mobile-nav__overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--sbl-paper) 55%, transparent);
  opacity: 0;
  transition: opacity var(--sbl-dur) var(--sbl-ease);
}
.sbl-mobile-nav.is-open .sbl-mobile-nav__overlay {
  opacity: 1;
}
.sbl-mobile-nav__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(36rem, 88vw);
  background: var(--sbl-raise);
  border-right: var(--sbl-border);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--sbl-dur-slow) var(--sbl-ease);
}
.sbl-mobile-nav.is-open .sbl-mobile-nav__panel {
  transform: translateX(0);
}
.sbl-mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sbl-s-3) var(--sbl-s-4);
  border-bottom: var(--sbl-border);
}
.sbl-mobile-nav__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--sbl-s-2) var(--sbl-s-4);
}
.sbl-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sbl-mobile-nav__link,
.sbl-mobile-nav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5.2rem;
  font-size: var(--sbl-t-h3);
  text-decoration: none;
  color: var(--sbl-paper);
  border-bottom: 1px solid var(--sbl-line-soft);
  cursor: pointer;
  list-style: none;
}
.sbl-mobile-nav__summary::-webkit-details-marker {
  display: none;
}
.sbl-mobile-nav__sublist {
  list-style: none;
  margin: 0 0 var(--sbl-s-2);
  padding: 0 0 0 var(--sbl-s-3);
}
.sbl-mobile-nav__sublist a {
  display: flex;
  align-items: center;
  min-height: 4.4rem;
  font-size: var(--sbl-t-body);
  text-decoration: none;
  color: var(--sbl-mute);
}
.sbl-mobile-nav__sublist a:hover {
  color: var(--sbl-paper);
}
.sbl-mobile-nav__footer {
  padding: var(--sbl-s-4);
  border-top: var(--sbl-border);
}

/* ============================================================
   Cart drawer
   ============================================================ */
.sbl-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--sbl-z-drawer);
  visibility: hidden;
}
.sbl-drawer.is-open {
  visibility: visible;
}
.sbl-drawer__overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--sbl-paper) 55%, transparent);
  opacity: 0;
  transition: opacity var(--sbl-dur) var(--sbl-ease);
}
.sbl-drawer.is-open .sbl-drawer__overlay {
  opacity: 1;
}
.sbl-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(44rem, 92vw);
  background: var(--sbl-raise);
  border-left: var(--sbl-border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--sbl-dur-slow) var(--sbl-ease);
}
.sbl-drawer.is-open .sbl-drawer__panel {
  transform: translateX(0);
}
.sbl-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sbl-s-3) var(--sbl-s-4);
  border-bottom: var(--sbl-border);
}
.sbl-drawer__title {
  font-size: var(--sbl-t-h3);
  margin: 0;
}

.sbl-drawer__shipping {
  padding: var(--sbl-s-3) var(--sbl-s-4);
  border-bottom: var(--sbl-border);
}
.sbl-drawer__shipping[hidden] {
  display: none;
}
.sbl-drawer__shipping-text {
  display: flex;
  align-items: center;
  gap: var(--sbl-s-1);
  margin: 0 0 var(--sbl-s-2);
  font-size: var(--sbl-t-small);
  color: var(--sbl-paper);
}
.sbl-drawer__shipping-text svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: var(--sbl-good);
}
.sbl-drawer__shipping-track {
  height: 0.3rem;
  background: var(--sbl-line);
}
.sbl-drawer__shipping-fill {
  height: 100%;
  background: var(--sbl-signal);
  transition: width var(--sbl-dur-slow) var(--sbl-ease);
}

.sbl-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--sbl-s-4);
}
.sbl-drawer__empty {
  padding: var(--sbl-s-7) 0;
  text-align: center;
}
.sbl-drawer__empty-text {
  font-size: var(--sbl-t-h3);
  margin: 0 0 var(--sbl-s-4);
}
.sbl-drawer__empty-links {
  display: flex;
  flex-direction: column;
  gap: var(--sbl-s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sbl-drawer__empty-links .sbl-btn {
  width: 100%;
}

.sbl-drawer__items {
  list-style: none;
  margin: 0;
  padding: var(--sbl-s-3) 0;
}
.sbl-cart-item {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  gap: var(--sbl-s-3);
  padding: var(--sbl-s-3) 0;
  border-bottom: 1px solid var(--sbl-line-soft);
}
.sbl-cart-item__media {
  width: 8rem;
}
.sbl-cart-item__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sbl-cart-item__brand {
  margin: 0;
}
.sbl-cart-item__title {
  font-size: var(--sbl-t-body);
  text-decoration: none;
  color: var(--sbl-paper);
}
.sbl-cart-item__variant {
  margin: 0;
  font-size: var(--sbl-t-small);
  color: var(--sbl-mute);
}
.sbl-cart-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sbl-s-2);
  margin-top: auto;
}
.sbl-cart-item__price {
  font-size: var(--sbl-t-small);
  color: var(--sbl-paper);
}
.sbl-cart-item__remove {
  align-self: start;
}

.sbl-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: var(--sbl-border);
}
.sbl-qty-stepper button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  min-height: 3.2rem;
  background: none;
  border: 0;
  color: var(--sbl-paper);
  cursor: pointer;
}
.sbl-qty-stepper button svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: currentColor;
}
.sbl-qty-stepper[data-updating] {
  opacity: 0.5;
  pointer-events: none;
}
.sbl-qty-stepper span {
  min-width: 2.4rem;
  text-align: center;
  font-size: var(--sbl-t-small);
}

.sbl-drawer__error {
  color: var(--sbl-alert);
  font-size: var(--sbl-t-small);
  padding: var(--sbl-s-2) 0;
}
.sbl-drawer__error:empty {
  display: none;
}

.sbl-drawer__footer {
  padding: var(--sbl-s-4);
  border-top: var(--sbl-border);
}
.sbl-drawer__footer[hidden] {
  display: none;
}
.sbl-drawer__subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--sbl-t-h3);
  margin-bottom: var(--sbl-s-1);
}
.sbl-drawer__note {
  margin: 0 0 var(--sbl-s-3);
  font-size: var(--sbl-t-small);
  color: var(--sbl-mute);
}
.sbl-drawer__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--sbl-s-2);
}
.sbl-drawer__checkout {
  width: 100%;
}

/* ============================================================
   Product card (homepage + collection)
   ============================================================ */
.sbl-card {
  display: block;
  text-decoration: none;
  color: var(--sbl-paper);
}
.sbl-card__media {
  position: relative;
}
.sbl-card__image {
  transition: opacity var(--sbl-dur) var(--sbl-ease);
}
.sbl-card__image--secondary {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.sbl-card:hover .sbl-card__image--secondary {
  opacity: 1;
}
.sbl-card__badge {
  position: absolute;
  left: var(--sbl-s-2);
  bottom: var(--sbl-s-2);
  background: var(--sbl-raise);
}
.sbl-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: var(--sbl-s-2);
}
.sbl-card__brand {
  margin: 0;
}
.sbl-card__title {
  font-size: var(--sbl-t-body);
}
.sbl-card__price {
  font-size: var(--sbl-t-body);
  color: var(--sbl-mute);
}

/* ============================================================
   Footer
   ============================================================ */
.sbl-footer {
  border-top: var(--sbl-border);
  padding-block: var(--sbl-s-7);
}
.sbl-footer__top {
  display: grid;
  gap: var(--sbl-s-6);
  padding-bottom: var(--sbl-s-6);
}
@media (min-width: 750px) {
  .sbl-footer__top {
    grid-template-columns: 1.2fr 2fr;
  }
}
.sbl-footer__brand-text {
  max-width: var(--sbl-maxw-text);
  color: var(--sbl-mute);
  margin-top: var(--sbl-s-3);
}
.sbl-footer__social {
  display: flex;
  gap: var(--sbl-s-4);
  list-style: none;
  margin: var(--sbl-s-4) 0 0;
  padding: 0;
}
.sbl-footer__social a {
  text-decoration: none;
}

.sbl-footer__columns {
  display: grid;
  gap: var(--sbl-s-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 750px) {
  .sbl-footer__columns {
    grid-template-columns: repeat(3, 1fr);
  }
}
.sbl-footer__col-heading {
  margin: 0 0 var(--sbl-s-3);
}
.sbl-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sbl-s-2);
}
.sbl-footer__links a {
  text-decoration: none;
  color: var(--sbl-mute);
  font-size: var(--sbl-t-small);
}
.sbl-footer__links a:hover {
  color: var(--sbl-paper);
}
.sbl-footer__newsletter-text {
  color: var(--sbl-mute);
  font-size: var(--sbl-t-small);
  margin: 0 0 var(--sbl-s-3);
}
.sbl-footer__newsletter-form {
  display: flex;
  gap: var(--sbl-s-2);
  flex-wrap: wrap;
}
.sbl-footer__newsletter-input {
  flex: 1;
  min-width: 16rem;
  min-height: 4.4rem;
  padding: 0 var(--sbl-s-3);
  background: var(--sbl-raise);
  border: var(--sbl-border);
  color: var(--sbl-paper);
  font: inherit;
  font-size: var(--sbl-t-small);
}
.sbl-footer__newsletter-message {
  width: 100%;
  margin: var(--sbl-s-2) 0 0;
  font-size: var(--sbl-t-small);
  color: var(--sbl-good);
}

.sbl-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sbl-s-2) var(--sbl-s-4);
  padding-top: var(--sbl-s-5);
  font-size: var(--sbl-t-micro);
  color: var(--sbl-mute);
}
.sbl-footer__policies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sbl-s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sbl-footer__policies a {
  color: var(--sbl-mute);
}
.sbl-footer__payment {
  display: flex;
  gap: var(--sbl-s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sbl-footer__payment-icon {
  width: 3.2rem;
  height: auto;
}