html {
  color-scheme: light dark;
}

html[data-color-scheme="light"] {
  color-scheme: light;
}

html[data-color-scheme="dark"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-color-scheme="light"]) {
    color-scheme: dark;
  }

  html:not([data-color-scheme="light"]) body,
  html:not([data-color-scheme="light"]) body.store-page {
    background: oklch(0.14 0.02 250);
    color: oklch(0.92 0.01 250);
  }

  html:not([data-color-scheme="light"]) :is(qasima-product, qasima-cart, qasima-checkout) {
    color-scheme: dark;
  }
}

html[data-color-scheme="dark"] :is(qasima-product, qasima-cart, qasima-checkout) {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: light-dark(oklch(0.98 0.01 250), oklch(0.14 0.02 250));
  color: light-dark(oklch(0.22 0.02 250), oklch(0.92 0.01 250));
}

body.store-page {
  color: inherit;
  background: light-dark(oklch(0.98 0.01 250), oklch(0.14 0.02 250));
}

.store-commerce-shell {
  display: block;
  box-sizing: border-box;
  min-height: 100dvh;
  padding: 1.5rem;
  max-width: 42rem;
  margin-inline: auto;
  color: inherit;
  background: inherit;
}

body.hub-site {
  background: light-dark(oklch(0.98 0.01 85), oklch(0.16 0.01 85));
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
}

@media (prefers-color-scheme: dark) {
  html:not([data-color-scheme="light"]) body.hub-site {
    background: oklch(0.16 0.01 85);
    color: oklch(0.94 0.01 85);
  }
}

html[data-color-scheme="dark"] body.hub-site {
  background: oklch(0.16 0.01 85);
  color: oklch(0.94 0.01 85);
}

.hub-page {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  box-sizing: border-box;
  container-type: inline-size;
  inline-size: 100%;
  max-inline-size: min(75rem, 100%);
  margin-inline: auto;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  background: light-dark(oklch(0.98 0.01 85), oklch(0.16 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.hub-sections {
  display: grid;
  gap: 0;
  min-inline-size: 0;
  padding-block-end: var(--hub-section-padding-block);
}

.hub-sections > q-hub-section-hero:first-child .hub-section-hero {
  border-radius: 0;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist/Geist/webfonts/Geist[wght].woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:host,
:root {
  color-scheme: var(--q-color-scheme, light dark);
  font-family: Geist, system-ui, sans-serif;

  /* 
  * all colorization should work by setting a single color (for merchant) -> --color-accent. all other colors should be derived, but may be overriden, if needed.
  * do not generate positive, warning, netagive - not worth it 
  * better to generate fixed values when generating a template
  */

  /* qasima colors */
  --color-canvas: light-dark(oklch(0.98 0 0), oklch(0.14 0 0));

  /* DEFAULTS (= QASIMA) */
  /* primary button variant */
  --color-accent: light-dark(oklch(0.2 0 0), oklch(0.95 0 0));

  /* not worth it to derive these from the accent variable */
  --color-positive: oklch(0.85 0.25 128);
  --color-positive-foreground: oklch(0.45 0.25 128);
  --color-warning: oklch(0.85 0.3 55);
  --color-warning-foreground: oklch(0.45 0.3 55);
  --color-info: light-dark(oklch(0.88 0.12 250), oklch(0.38 0.14 250));
  --color-info-foreground: light-dark(oklch(0.38 0.14 250), oklch(0.92 0.06 250));
  --color-negative: light-dark(oklch(0.55 0.3 30), oklch(0.35 0.35 30));
  --color-negative-foreground: light-dark(oklch(0.98 0.05 30), oklch(0.9 0.1 30));

  --color-overlay-hover: oklch(0 0 0 / 0.05);

  background-color: var(--color-canvas);

  /* --color-accent foreground derivation */
  /* this is more complex, because we don't know if the accent color is light or dark */
  /* browser native color derivation with manual shift */
  /* makes the contrast-color() think the source color is darker, otherwise it flips too early on C0.4+ */
  --color-accent-shift: 0.75;
  --color-accent-with-shift: oklch(from var(--color-accent) calc(l * var(--color-accent-shift)) c h);
  --color-accent-foreground: light-dark(oklch(0.98 0 0), oklch(0.15 0 0));

  /* --color-neutral derivation */
  --color-neutral: light-dark(
    oklch(from var(--color-accent) 0.95 calc(c * 0.1) h),
    oklch(from var(--color-accent) 0.35 calc(c * 0.1) h)
  );
  --color-neutral-foreground: light-dark(
    oklch(from var(--color-accent) 0.4 calc(c * 0.5) h),
    oklch(from var(--color-accent) 0.8 calc(c * 0.2) h)
  );
}

@supports (color: contrast-color(red)) {
  :host,
  :root {
    --color-accent-foreground: color-mix(
      in oklch shorter hue,
      contrast-color(var(--color-accent-with-shift)) 98%,
      var(--color-accent) 2%
    );
  }
}

/* page and embed hosts set data-color-scheme — cascades into nested q-* via --q-color-scheme */
:root[data-color-scheme="light"],
:host([data-color-scheme="light"]) {
  --q-color-scheme: light;
  color-scheme: light;
}

:root[data-color-scheme="dark"],
:host([data-color-scheme="dark"]) {
  --q-color-scheme: dark;
  color-scheme: dark;
}

:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-hero {
  .hub-section-hero {
    position: relative;
    overflow: clip;
    min-block-size: 16rem;
    border-radius: 0.375rem;
    color: oklch(0.98 0.01 85);
  }

  .hub-section-hero-compact {
    min-block-size: 11rem;
  }

  section.hub-section-hero.hub-section-hero-story {
    min-block-size: 22rem;
    inline-size: 100%;
  }

  section.hub-section-hero.hub-section-hero-story .hub-section-hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: clamp(0.75rem, 2.5vw, 1rem);
  }

  section.hub-section-hero.hub-section-hero-story .hub-section-hero-header {
    flex: 0 0 auto;
  }

  .hub-section-hero-inner > .hub-section-hero-story {
    display: grid;
    gap: 0.75rem;
    max-inline-size: 20rem;
    flex: 0 0 auto;
  }

  .hub-section-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-section-hero-shade {
    position: absolute;
    inset-inline: 0;
    pointer-events: none;
  }

  .hub-section-hero-shade-top {
    inset-block-start: 0;
    block-size: 40%;
    background: linear-gradient(to bottom, oklch(0.16 0.02 55 / 0.55), transparent);
  }

  .hub-section-hero-shade-bottom {
    inset-block-end: 0;
    block-size: 55%;
    background: linear-gradient(to top, oklch(0.16 0.02 55 / 0.7), transparent);
  }

  .hub-section-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.5rem;
    min-block-size: inherit;
    padding: var(--hub-section-padding-inline, clamp(0.875rem, 3.5vw, 1.25rem));
  }

  .hub-section-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .hub-section-hero-location,
  .hub-section-hero-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  .hub-section-hero-brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .hub-section-hero-brand-name {
    font-family: "Segoe Print", "Bradley Hand", "Snell Roundhand", cursive;
    font-size: 1.25rem;
    font-weight: 600;
  }

  .hub-section-hero-subtitle {
    font-size: 0.8rem;
    opacity: 0.85;
  }

  .hub-section-hero-logo {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    object-fit: cover;
  }

  .hub-section-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .hub-section-hero-langs {
    display: flex;
    gap: 0.25rem;
  }

  .hub-section-hero-lang {
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: 0.75rem;
    opacity: 0.75;
  }

  .hub-section-hero-lang-active {
    background: oklch(1 0 0 / 0.18);
    opacity: 1;
  }

  .hub-section-hero-account {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: inherit;
  }

  .hub-section-hero-title {
    margin: 0;
    font-size: clamp(1.75rem, 6vw, 2.25rem);
    line-height: 1.1;
  }

  .hub-section-hero-lede {
    margin: 0;
    opacity: 0.9;
  }

  .hub-section-hero-cta {
    margin-block-start: 0.25rem;
  }
}

:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-intro {
  .hub-section-intro-copy {
    display: grid;
    gap: 0.75rem;
  }

  .hub-section-intro-title {
    margin: 0;
    font-size: clamp(2.25rem, 9vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-wrap: balance;
  }

  .hub-section-intro-body {
    max-inline-size: min(42rem, 100%);
    margin: 0;
    color: light-dark(oklch(0.45 0.02 55), oklch(0.75 0.02 85));
    font-size: 0.9375rem;
    line-height: 1.45;
    text-wrap: pretty;
  }
}

:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-locations {
  .hub-section-locations {
    padding-inline-end: 0;
  }

  .hub-section-head {
    padding-inline-end: var(--hub-section-padding-inline);
  }

  .hub-section-locations-card {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.875rem;
    width: min(19rem, 88cqi);
    min-width: 0;
    padding: 0.875rem;
    border: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
    border-radius: 0.5rem;
    background: light-dark(oklch(0.98 0.005 85), oklch(0.22 0.01 85));
  }

  .hub-section-locations-card-media {
    width: 100%;
    height: 100%;
    min-block-size: 7rem;
    object-fit: cover;
    border-radius: 0.375rem;
  }

  .hub-section-locations-card-body {
    display: grid;
    align-content: start;
    gap: 0.375rem;
    min-width: 0;
  }

  .hub-section-locations-card-name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  .hub-section-locations-card-hours,
  .hub-section-locations-card-address {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    color: light-dark(oklch(0.45 0.02 55), oklch(0.75 0.02 85));
    font-size: 0.8125rem;

    .hub-icon {
      width: 0.875rem;
      height: 0.875rem;
      flex-shrink: 0;
    }
  }

  .hub-section-locations-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-start: 0.375rem;

    .hub-button {
      min-block-size: 2rem;
      padding-inline: 0.75rem;
      font-size: 0.75rem;
    }
  }
}

:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-links {
  .hub-section-title {
    margin-block-end: 1rem;
  }

  .hub-section-links-list {
    display: grid;
    gap: 0.75rem;
  }

  .hub-section-links-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
    border-radius: 999px;
    background: light-dark(oklch(0.98 0.005 85), oklch(0.22 0.01 85));
    color: inherit;
    font-size: 0.9375rem;
    text-decoration: none;

    .hub-icon {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
      opacity: 0.7;
    }
  }
}

:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-shop {
  .hub-section-shop {
    padding-inline-end: 0;
  }

  .hub-section-head {
    padding-inline-end: var(--hub-section-padding-inline);
  }

  .hub-section-shop-card {
    width: min(10.5rem, 58cqi);
    min-width: 0;
  }

  .hub-section-shop-media {
    position: relative;

    img,
    .hub-media-placeholder {
      display: block;
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 0.5rem;
    }
  }

  .hub-section-shop-cart {
    position: absolute;
    inset-inline-end: 0.625rem;
    inset-block-end: 0.625rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
    border-radius: 999px;
    background: light-dark(oklch(0.98 0.01 85), oklch(0.24 0.01 85));
    color: inherit;
    cursor: pointer;

    .hub-icon {
      width: 1rem;
      height: 1rem;
    }
  }

  .hub-section-shop-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-start: 0.625rem;
    font-size: 0.9375rem;
  }

  .hub-section-shop-price {
    color: light-dark(oklch(0.45 0.02 55), oklch(0.75 0.02 85));
  }
}

:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-faq {
  .hub-section-title {
    margin-block-end: 1rem;
  }

  .hub-section-faq-list {
    display: grid;
    gap: 0;
    border-block-start: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
  }

  .hub-section-faq-item {
    border-block-end: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
  }

  .hub-section-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    font-size: 1.0625rem;
    cursor: pointer;
    list-style: none;
  }

  .hub-section-faq-item summary::-webkit-details-marker {
    display: none;
  }

  .hub-section-faq-icons {
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }

  .hub-section-faq-icon-close {
    display: none;
  }

  .hub-section-faq-item[open] .hub-section-faq-icon-open {
    display: none;
  }

  .hub-section-faq-item[open] .hub-section-faq-icon-close {
    display: block;
  }

  .hub-section-faq-item p {
    margin: 0 0 1rem;
    color: light-dark(oklch(0.45 0.02 55), oklch(0.75 0.02 85));
    font-size: 0.9375rem;
    line-height: 1.5;
  }
}

:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-socials {
  .hub-section-title {
    margin-block-end: 1rem;
  }

  .hub-section-socials-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .hub-section-socials-link {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
  }
}

:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-contact {
  min-inline-size: 0;
  max-inline-size: 100%;

  .hub-section-title {
    margin-block-end: 1rem;
  }

  .hub-section-contact-form {
    display: grid;
    gap: 1rem;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .hub-section-contact-field {
    display: grid;
    gap: 0.5rem;
    min-inline-size: 0;
  }

  .hub-section-contact-label {
    font-size: 0.9375rem;
  }

  .hub-section-contact-input {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
    border-radius: 0.5rem;
    background: light-dark(oklch(0.98 0.005 85), oklch(0.22 0.01 85));
    color: inherit;
    font: inherit;
  }

  .hub-section-contact-textarea {
    resize: vertical;
    min-block-size: 7rem;
  }
}

/* published hub/store pages scroll on the document — wins over inlined manage app shell css */
html {
  block-size: auto;
  overflow: auto;
  overscroll-behavior: auto;
}

body {
  block-size: auto;
  overflow: visible;
  overscroll-behavior: auto;
}