/* ============================================================
   SupaClon3s — static-site additions.

   The five sbl-*.css files are the SABLE theme's own stylesheets,
   copied verbatim. They were authored to sit on top of Dawn's
   base.css, which this site does not ship — so §1 replaces the
   handful of Dawn base rules they actually depend on (notably the
   62.5% root: every rem in those files is authored against 10px).

   §2 onwards is new: the pages Shopify used to provide (cart,
   checkout, policies) and the search results list.
   ============================================================ */

/* --- 1. Base ------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; }

/* The theme's chrome is built from custom elements (<sbl-header>, <sbl-nav>,
   <sbl-cart-drawer>, <sbl-pdp-app>). Unknown elements are inline by default,
   which leaves the sticky header without a painted background — Dawn's base.css
   used to block them. */
sbl-header,
sbl-nav,
sbl-cart-drawer,
sbl-pdp-app { display: block; }

img,
svg,
video { max-width: 100%; }

img { height: auto; }

h1, h2, h3, h4, h5, h6, p, figure { margin: 0 0 var(--sbl-s-3); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button { font: inherit; }

html.sbl-scroll-lock,
html.sbl-scroll-lock body { overflow: hidden; }

:focus-visible { outline: 2px solid var(--sbl-signal); outline-offset: 2px; }

/* --- 2. Simple content pages -------------------------------- */

.sbl-page {
  padding-block: var(--sbl-s-7) var(--sbl-s-9);
  min-height: 50vh;
}

.sbl-page__title {
  font-size: var(--sbl-t-h1);
  margin-bottom: var(--sbl-s-5);
}

.sbl-page--prose .sbl-prose { max-width: var(--sbl-maxw-text); }

.sbl-prose p,
.sbl-prose li { color: var(--sbl-mute); line-height: var(--sbl-lh-body); }
.sbl-prose h2 { font-size: var(--sbl-t-h2); margin-top: var(--sbl-s-6); }
.sbl-prose h3 { font-size: var(--sbl-t-h3); margin-top: var(--sbl-s-5); }
.sbl-prose ul { margin: 0 0 var(--sbl-s-4) var(--sbl-s-4); }
.sbl-prose li { list-style: disc; margin-bottom: var(--sbl-s-2); }
.sbl-prose a { color: var(--sbl-signal); }
.sbl-prose strong { color: var(--sbl-paper); }

/* --- 3. Cart page ------------------------------------------- */

.sbl-cartpage .sbl-drawer__items {
  display: grid;
  gap: var(--sbl-s-4);
  padding-bottom: var(--sbl-s-5);
  border-bottom: var(--sbl-border);
}

.sbl-cartpage__totals {
  max-width: 42rem;
  margin-left: auto;
  padding-top: var(--sbl-s-4);
}

.sbl-cartpage__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sbl-s-3);
  padding: var(--sbl-s-2) 0;
  font-size: var(--sbl-t-small);
  color: var(--sbl-mute);
}

.sbl-cartpage__row--total {
  padding-top: var(--sbl-s-3);
  border-top: var(--sbl-border);
  font-size: var(--sbl-t-body);
  color: var(--sbl-paper);
  font-weight: 500;
}

.sbl-cartpage__checkout { width: 100%; margin-top: var(--sbl-s-4); }

.sbl-cartpage__note {
  margin-top: var(--sbl-s-3);
  font-size: var(--sbl-t-micro);
  color: var(--sbl-mute);
}

/* --- 4. Checkout -------------------------------------------- */

.sbl-checkout__grid {
  display: grid;
  gap: var(--sbl-s-6);
  align-items: start;
}

@media (min-width: 990px) {
  .sbl-checkout__grid { grid-template-columns: 1fr 38rem; gap: var(--sbl-s-8); }
  .sbl-checkout__summary { position: sticky; top: 10rem; }
}

.sbl-checkout__lede {
  padding: var(--sbl-s-4);
  background: var(--sbl-raise-2);
  border-left: 2px solid var(--sbl-signal);
  font-size: var(--sbl-t-small);
  color: var(--sbl-paper);
}

.sbl-checkout__fieldset {
  margin: 0 0 var(--sbl-s-6);
  padding: 0;
  border: 0;
}

.sbl-checkout__fieldset legend { margin-bottom: var(--sbl-s-3); padding: 0; }

.sbl-field { margin-bottom: var(--sbl-s-3); }

.sbl-field label {
  display: block;
  margin-bottom: var(--sbl-s-1);
  font-size: var(--sbl-t-small);
  color: var(--sbl-mute);
}

.sbl-field input,
.sbl-field textarea {
  width: 100%;
  min-height: 4.8rem;
  padding: var(--sbl-s-2) var(--sbl-s-3);
  background: var(--sbl-raise);
  border: var(--sbl-border);
  color: var(--sbl-paper);
  font: inherit;
  font-size: var(--sbl-t-body);
}

.sbl-field textarea { min-height: 9rem; padding-top: var(--sbl-s-3); resize: vertical; }

.sbl-field input:focus-visible,
.sbl-field textarea:focus-visible { border-color: var(--sbl-signal); }

.sbl-checkout__submit { width: 100%; margin-top: var(--sbl-s-2); }

.sbl-checkout__small {
  margin-top: var(--sbl-s-3);
  font-size: var(--sbl-t-micro);
  color: var(--sbl-mute);
}
.sbl-checkout__small a { color: var(--sbl-signal); }

.sbl-checkout__error {
  padding: var(--sbl-s-3);
  border: 1px solid var(--sbl-alert);
  color: var(--sbl-alert);
  font-size: var(--sbl-t-small);
}

.sbl-checkout__summary {
  padding: var(--sbl-s-5);
  background: var(--sbl-raise);
  border: var(--sbl-border);
}

.sbl-checkout__summary-title { font-size: var(--sbl-t-h3); margin-bottom: var(--sbl-s-4); }

.sbl-checkout__items {
  display: grid;
  gap: var(--sbl-s-4);
  margin-bottom: var(--sbl-s-4);
  padding-bottom: var(--sbl-s-4);
  border-bottom: var(--sbl-border);
}

.sbl-checkout__item {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: var(--sbl-s-3);
  align-items: start;
}

.sbl-checkout__item img { display: block; width: 100%; object-fit: cover; background: var(--sbl-raise-2); }
.sbl-checkout__item p { margin: 0; }
.sbl-checkout__item-title { font-size: var(--sbl-t-small); }
.sbl-checkout__item-meta { font-size: var(--sbl-t-micro); color: var(--sbl-mute); }
.sbl-checkout__item-price { font-size: var(--sbl-t-small); }

.sbl-checkout__empty { text-align: center; color: var(--sbl-mute); }

.sbl-checkout__done {
  max-width: var(--sbl-maxw-text);
  padding: var(--sbl-s-6);
  background: var(--sbl-raise);
  border: var(--sbl-border);
}

.sbl-checkout__done h2 { font-size: var(--sbl-t-h2); }
.sbl-checkout__ref { font-size: var(--sbl-t-body); }
.sbl-checkout__ref strong { letter-spacing: 0.06em; }

/* --- 5. Search ---------------------------------------------- */

.sbl-searchpage__form {
  display: flex;
  gap: var(--sbl-s-2);
  max-width: 52rem;
  margin-bottom: var(--sbl-s-5);
}

.sbl-searchpage__form .sbl-search__input {
  flex: 1;
  min-height: 4.8rem;
  padding: 0 var(--sbl-s-3);
  background: var(--sbl-raise);
  border: var(--sbl-border);
  color: var(--sbl-paper);
  font: inherit;
}

.sbl-searchpage__count {
  margin-bottom: var(--sbl-s-4);
  font-size: var(--sbl-t-small);
  color: var(--sbl-mute);
}

.sbl-search__hits { display: grid; gap: var(--sbl-s-2); margin-top: var(--sbl-s-3); }

.sbl-search__hits a {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--sbl-s-3);
  align-items: center;
  padding: var(--sbl-s-2);
  text-decoration: none;
}

.sbl-search__hits a:hover { background: var(--sbl-raise-2); }
.sbl-search__hits img { display: block; width: 100%; object-fit: cover; background: var(--sbl-raise-2); }
.sbl-search__hits span span { display: block; font-size: var(--sbl-t-small); }
.sbl-search__none { padding: var(--sbl-s-3); font-size: var(--sbl-t-small); color: var(--sbl-mute); }

/* --- 6. Footer fixes ---------------------------------------- */

/* The contact column carries a full email address; without these it sets the
   grid's min-content width and pushes the page into horizontal scroll. */
.sbl-footer__col { min-width: 0; }

.sbl-footer__newsletter .sbl-btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

/* --- 7. Collection toolbar ---------------------------------- */

/* The Shopify toolbar had two buttons that opened sheets; this one carries
   real <select>s (sort + brand + size), so it has to survive 375px. */
.sbl-collection__toolbar { flex-wrap: wrap; }

.sbl-collection__toolbar-actions {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  overflow-x: auto;
  scrollbar-width: none;
}
.sbl-collection__toolbar-actions::-webkit-scrollbar { display: none; }

select.sbl-collection__toolbar-btn {
  flex: 0 0 auto;
  max-width: 15rem;
  padding-right: var(--sbl-s-2);
  border-color: var(--sbl-line);
  background: var(--sbl-raise);
}

.sbl-footer__email {
  display: inline-block;
  overflow-wrap: anywhere;
  color: var(--sbl-signal);
  font-size: var(--sbl-t-small);
}


/* --- 8. Brand mark sizing ----------------------------------- */

/* Bigger than the theme's text wordmark ever was, so the logo reads as the
   brand rather than a badge. The header row grows to match; it shrinks again
   with the condensed header on scroll. */
.sbl-wordmark__image { height: 5.2rem; }
.sbl-wordmark--small .sbl-wordmark__image { height: 3.6rem; }

@media (max-width: 749px) {
  .sbl-wordmark__image { height: 4.4rem; }
}

.sbl-header__row { min-height: 7.6rem; }
.sbl-header.is-condensed .sbl-header__row { min-height: 6rem; }
.sbl-header.is-condensed .sbl-wordmark__image { height: 4.2rem; }

@media (max-width: 749px) {
  .sbl-header.is-condensed .sbl-wordmark__image { height: 3.6rem; }
}

/* --- 9. Typeface sets --------------------------------------- */

/* Five pairings, switched by the picker in the corner (fonts.js writes
   data-font on <html>). `--sbl-font` is the body face and comes from
   sbl-tokens.css; `--sbl-font-display` is new and drives headings, buttons
   and nav — the parts that should carry the logo's character. */
:root {
  --sbl-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --sbl-font: "Nunito Sans", var(--sbl-fallback);
  --sbl-font-display: "Bungee", var(--sbl-fallback);
}

html[data-font="street"] {
  --sbl-font: "Nunito Sans", var(--sbl-fallback);
  --sbl-font-display: "Bungee", var(--sbl-fallback);
}
html[data-font="bubble"] {
  --sbl-font: "Baloo 2", var(--sbl-fallback);
  --sbl-font-display: "Baloo 2", var(--sbl-fallback);
}
html[data-font="chunky"] {
  --sbl-font: "Poppins", var(--sbl-fallback);
  --sbl-font-display: "Luckiest Guy", var(--sbl-fallback);
}
html[data-font="soft"] {
  --sbl-font: "Outfit", var(--sbl-fallback);
  --sbl-font-display: "Fredoka", var(--sbl-fallback);
}
html[data-font="tech"] {
  --sbl-font: "Space Grotesk", var(--sbl-fallback);
  --sbl-font-display: "Space Grotesk", var(--sbl-fallback);
}

h1, h2, h3, h4, h5, h6,
.sbl-btn,
.sbl-nav__link,
.sbl-nav__trigger,
.sblx-hero__heading,
.sblx-categories__title,
.sbl-collection__title,
.sbl-pdp__title,
.sbl-drawer__title,
.sbl-page__title,
.sblx-marquee__item,
.sbl-card__price,
.sbl-pdp__price {
  font-family: var(--sbl-font-display);
}

/* Display faces run heavy and tall; ease the tracking and let the caps breathe. */
h1, h2, h3, .sblx-hero__heading, .sbl-page__title, .sbl-collection__title, .sbl-pdp__title {
  letter-spacing: 0;
  line-height: 1.18;
}

.sbl-btn { letter-spacing: 0.06em; }

/* --- 10. Font picker (preview tool) ------------------------- */

.sbl-fontpick {
  position: fixed;
  left: var(--sbl-s-3);
  bottom: var(--sbl-s-3);
  z-index: 60;
  font-family: var(--sbl-fallback);
}

.sbl-fontpick__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sbl-s-2);
  min-height: 4rem;
  padding: 0 var(--sbl-s-3);
  background: var(--sbl-paper);
  color: var(--sbl-ink);
  border: 0;
  border-radius: var(--sbl-radius-pill, 999px);
  box-shadow: var(--sbl-shadow, 0 2px 10px rgba(0,0,0,.2));
  font-size: var(--sbl-t-small);
  cursor: pointer;
}

.sbl-fontpick__panel {
  position: absolute;
  left: 0;
  bottom: 4.8rem;
  width: 24rem;
  padding: var(--sbl-s-3);
  background: var(--sbl-raise);
  border: var(--sbl-border);
  box-shadow: var(--sbl-shadow-lg, 0 10px 30px rgba(0,0,0,.25));
}

.sbl-fontpick__panel[hidden] { display: none; }

.sbl-fontpick__hint {
  margin: 0 0 var(--sbl-s-2);
  font-size: var(--sbl-t-micro);
  color: var(--sbl-mute);
}

.sbl-fontpick__option {
  display: block;
  width: 100%;
  padding: var(--sbl-s-2);
  margin-bottom: var(--sbl-s-1);
  background: none;
  border: 1px solid transparent;
  text-align: left;
  color: var(--sbl-paper);
  cursor: pointer;
}

.sbl-fontpick__option:hover { background: var(--sbl-raise-2); }
.sbl-fontpick__option[aria-pressed="true"] { border-color: var(--sbl-signal); }
.sbl-fontpick__name { display: block; font-size: 1.8rem; line-height: 1.2; }
.sbl-fontpick__meta { display: block; font-size: var(--sbl-t-micro); color: var(--sbl-mute); font-family: var(--sbl-fallback); }