:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
.site-main {
  
  display: flex;
  flex-direction: column;
  background: var(--base-ultra-light);
  color: var(--base-ultra-dark);
  --link-color: currentColor;
  --link-color-hover: currentColor;
}
.script {
  
  display: block;
  margin: 0;
  font-family: "Galada", cursive;
  font-weight: 400;
  font-size: var(--_script-size, calc(var(--h2) * 1.15));
  line-height: 1;
  letter-spacing: 0;
  color: var(--_script-color, var(--primary));
}
.clay-texture {
  
  background-color: var(--_clay-bg, var(--primary));
  background-image: radial-gradient(color-mix(in srgb, var(--white) 9%, transparent) 1px, transparent 1.5px);
  background-size: 22px 22px;
}
.tap-target {
  
  display: inline-block;
  padding-block: calc(var(--space-xs) / 2);
  margin-block: calc(var(--space-xs) / -2);
}
.section-head {
  
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-inline-size: 46rem;
  &[data-align="center"] { align-items: center; text-align: center; margin-inline: auto; }
  &[data-tone="light"] { --_heading-color: var(--white); --_script-color: var(--accent-light); --_head-text: color-mix(in oklch, var(--white) 86%, var(--primary)); }
}
.section-head__title {
  
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--_heading-color, var(--base-ultra-dark));
  text-wrap: balance;
  font-size: var(--_size, var(--h2));
}
.section-head__text {
  
  margin: 0;
  font-size: var(--text-m);
  line-height: 1.65;
  color: var(--_head-text, var(--base-dark));
}
.btn {
  
  --btn-font-size: var(--text-m);
  --btn-font-weight: 700;
  --btn-padding-block: calc(var(--space-s) * 0.95);
  --btn-padding-inline: calc(var(--space-m) * 1.05);
  --btn-border-radius: 999px;
  --btn-border-width: 2px;
  --btn-min-width: 0;
  --btn-line-height: 1.2;
  --btn-text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-xs) * 1.2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 300ms cubic-bezier(.2, .7, .2, 1), color 300ms, border-color 300ms, box-shadow 300ms, translate 300ms cubic-bezier(.2, .7, .2, 1);
  &:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  @media (hover: hover) { &:hover { --_shift: 3px 0; translate: 0 -2px; box-shadow: 0 18px 40px color-mix(in srgb, var(--base-ultra-dark) 14%, transparent); } }
  @media (max-width: 48em) { white-space: normal; }
}
.btn--clay {
  
  &.btn {
    --btn-background: var(--primary);
    --btn-background-hover: var(--primary-hover);
    --btn-border-color: var(--primary);
    --btn-border-color-hover: var(--primary-hover);
    --btn-text-color: var(--white);
    --btn-text-color-hover: var(--white);
  }
}
.btn--light {
  
  &.btn {
    --btn-background: var(--white);
    --btn-background-hover: var(--primary-ultra-light);
    --btn-border-color: var(--white);
    --btn-border-color-hover: var(--primary-ultra-light);
    --btn-text-color: var(--primary-dark);
    --btn-text-color-hover: var(--primary-dark);
  }
}
.btn--ghost {
  
  &.btn {
    --btn-background: transparent;
    --btn-background-hover: color-mix(in srgb, var(--white) 14%, transparent);
    --btn-border-color: color-mix(in srgb, var(--white) 70%, transparent);
    --btn-border-color-hover: var(--white);
    --btn-text-color: var(--white);
    --btn-text-color-hover: var(--white);
  }
}
.btn--line {
  
  &.btn {
    --btn-background: transparent;
    --btn-background-hover: var(--primary);
    --btn-border-color: var(--primary);
    --btn-border-color-hover: var(--primary);
    --btn-text-color: var(--primary-dark);
    --btn-text-color-hover: var(--white);
  }
}
.btn--block {
  
  &.btn { inline-size: 100%; }
}
.site-header {
  
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: color-mix(in srgb, var(--base-ultra-light) 94%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--base-light);
  --link-color: currentColor;
  --link-color-hover: currentColor;
}
.site-header__top {
  
  display: var(--_top-display, flex);
  justify-content: center;
  padding-block: calc(var(--space-xs) * 1.1);
  padding-inline: var(--gutter);
  background: var(--primary-dark);
  font-size: var(--text-s);
  color: color-mix(in oklch, var(--white) 88%, var(--primary));
  @media (max-width: 48em) { --_top-display: none; }
}
.site-header__top-inner {
  
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-m);
}
.site-header__top-group {
  
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
}
.site-header__top-item {
  
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: inherit;
  transition: color 300ms;
  @media (hover: hover) { &:is(a):hover { color: var(--white); } }
}
.site-header__bar {
  
  display: flex;
  justify-content: center;
  padding-block: var(--space-s);
  padding-inline: var(--gutter);
}
.site-header__bar-inner {
  
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
}
.site-header__logo {
  
  display: block;
  line-height: 0;
  border-radius: 4px;
  &:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
}
.site-header__logo-image {
  
  display: block;
  inline-size: var(--_logo-size, 15rem);
  block-size: auto;
  border-radius: 0;
  @media (max-width: 48em) { --_logo-size: 11.5rem; }
}
.site-header__nav {
  
  display: var(--_nav-display, block);
  margin-inline-start: auto;
  @media (max-width: 64em) { --_nav-display: none; }
}
.site-header__menu {
  
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header__link {
  
  position: relative;
  display: inline-block;
  padding: var(--space-xs) var(--space-s);
  font-weight: 700;
  font-size: var(--text-s);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--_nav-color, var(--base-ultra-dark));
  transition: color 300ms;
  &::after {
    content: "";
    position: absolute;
    inset-inline: var(--space-s);
    inset-block-end: 2px;
    block-size: 2px;
    border-radius: 2px;
    background: var(--primary);
    scale: var(--_nav-line, 0) 1;
    transform-origin: left;
    transition: scale 300ms cubic-bezier(.2, .7, .2, 1);
  }
  &[aria-current="page"] { --_nav-color: var(--primary); --_nav-line: 1; }
  &:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
  @media (hover: hover) { &:hover { --_nav-color: var(--primary); --_nav-line: 1; } }
}
.site-header__actions {
  
  display: var(--_actions-display, flex);
  @media (max-width: 64em) { --_actions-display: none; }
}
.site-header__mobile {
  
  display: var(--_mobile-display, none);
  align-items: center;
  gap: var(--space-xs);
  @media (max-width: 64em) { --_mobile-display: flex; }
}
.site-header__icon-btn {
  
  display: inline-grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--_ib-bg, var(--primary));
  color: var(--_ib-color, var(--white));
  font-size: var(--text-l);
  cursor: pointer;
  &[data-variant="soft"] { --_ib-bg: var(--primary-ultra-light); --_ib-color: var(--primary-dark); }
  &[data-variant="ghost"] { --_ib-bg: color-mix(in srgb, var(--white) 14%, transparent); }
  &:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
}
.site-header__panel {
  
  position: fixed;
  inset: 0;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100dvh;
  max-block-size: none;
  margin: 0;
  padding: var(--space-m) var(--gutter) var(--space-xl);
  border: 0;
  overflow-y: auto;
  --_clay-bg: var(--primary-dark);
  color: var(--white);
  opacity: 0;
  translate: 0 -16px;
  transition: opacity 0.28s ease, translate 0.28s ease, display 0.28s allow-discrete, overlay 0.28s allow-discrete;
  &:popover-open {
    display: flex; flex-direction: column; gap: var(--space-l);
    opacity: 1; translate: 0 0;
    @starting-style { opacity: 0; translate: 0 -16px; }
  }
  @media (prefers-reduced-motion: reduce) { transition: none; translate: none; }
}
.site-header__panel-top {
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}
.site-header__panel-logo {
  
  display: block;
  line-height: 0;
  padding: var(--space-xs) var(--space-s);
  border-radius: calc(var(--radius) * 2);
  background: var(--base-ultra-light);
}
.site-header__panel-menu {
  
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
}
.site-header__panel-link {
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-m);
  border-block-end: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
  font-family: var(--heading-font-family);
  font-weight: 700;
  font-size: var(--h4);
  text-decoration: none;
  color: var(--white);
  &[aria-current="page"] { color: var(--accent-light); }
}
.site-header__panel-actions {
  
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.site-header__panel-meta {
  
  margin: 0;
  font-size: var(--text-s);
  line-height: 1.6;
  color: color-mix(in oklch, var(--white) 80%, var(--primary));
}
.site-footer {
  
  display: flex;
  justify-content: center;
  padding-block: calc(var(--section-space-m) * 1.1) var(--space-l);
  padding-inline: var(--gutter);
  background: var(--base-ultra-dark);
  color: color-mix(in oklch, var(--white) 78%, var(--base-ultra-dark));
  --link-color: currentColor;
  --link-color-hover: currentColor;
}
.site-footer__inner {
  
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.site-footer__top {
  
  display: grid;
  grid-template-columns: var(--_footer-cols, 1.4fr 1fr 1fr);
  gap: var(--space-xl);
  @media (max-width: 64em) { --_footer-cols: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 48em) { --_footer-cols: minmax(0, 1fr); }
}
.site-footer__brand {
  
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  @media (max-width: 64em) { grid-column: 1 / -1; }
}
.site-footer__logo {
  
  display: inline-block;
  align-self: flex-start;
  line-height: 0;
  padding: var(--space-s) var(--space-m);
  border-radius: calc(var(--radius) * 2);
  background: var(--base-ultra-light);
}
.site-footer__logo-image {
  
  display: block;
  inline-size: 13rem;
  block-size: auto;
  border-radius: 0;
}
.site-footer__about {
  
  margin: 0;
  max-inline-size: 34ch;
  font-size: var(--text-s);
  line-height: 1.7;
}
.site-footer__col {
  
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.site-footer__title {
  
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: 700;
  font-size: var(--text-s);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}
.site-footer__list {
  
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__link {
  
  font-size: var(--text-s);
  text-decoration: none;
  color: inherit;
  transition: color 300ms;
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (hover: hover) { &:hover { color: var(--accent-light); } }
}
.site-footer__text {
  
  margin: 0;
  font-size: var(--text-s);
  line-height: 1.7;
}
.site-footer__bottom {
  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block-start: var(--space-l);
  border-block-start: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  font-size: var(--text-xs);
}
.site-footer__copy {
  
  margin: 0;
}
.site-footer__meta {
  
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}
.site-footer__small-link {
  
  text-decoration: none;
  color: inherit;
  @media (hover: hover) { &:hover { color: var(--accent-light); } }
}
.hero {
  
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  min-block-size: var(--_hero-min, min(82vh, 46rem));
  padding-block: calc(var(--section-space-l) * 1.1);
  padding-inline: var(--gutter);
  overflow: hidden;
  color: var(--white);
  @media (max-width: 48em) { --_hero-min: 0; }
}
.hero__media {
  
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  border-radius: 0;
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--_hero-shade, linear-gradient(100deg, color-mix(in srgb, var(--base-ultra-dark) 88%, transparent) 0%, color-mix(in srgb, var(--base-ultra-dark) 62%, transparent) 48%, color-mix(in srgb, var(--base-ultra-dark) 18%, transparent) 100%));
  }
  @media (max-width: 48em) { --_hero-shade: color-mix(in srgb, var(--base-ultra-dark) 74%, transparent); }
}
.hero__image {
  
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 0;
}
.hero__inner {
  
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xl);
}
.hero__content {
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  max-inline-size: 40rem;
}
.hero__script {
  
  --_script-size: calc(var(--h1) * 1.25);
  --_script-color: var(--accent-light);
}
.hero__title {
  
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--_heading-color, var(--base-ultra-dark));
  text-wrap: balance;
  --_heading-color: var(--white);
  font-size: var(--h1);
}
.hero__lead {
  
  margin: 0;
  max-inline-size: 36rem;
  font-size: var(--text-l);
  line-height: 1.55;
  color: color-mix(in oklch, var(--white) 90%, var(--primary));
}
.hero__actions {
  
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  padding-block-start: var(--space-xs);
}
.hero__facts {
  
  display: grid;
  grid-template-columns: var(--_facts-cols, repeat(3, minmax(0, 1fr)));
  gap: var(--space-m);
  max-inline-size: 52rem;
  margin: 0;
  padding: 0;
  list-style: none;
  @media (max-width: 48em) { --_facts-cols: minmax(0, 1fr); }
}
.hero__fact {
  
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline-start: var(--space-s);
  border-inline-start: 3px solid var(--accent);
}
.hero__fact-value {
  
  font-family: var(--heading-font-family);
  font-weight: 700;
  font-size: var(--h4);
  color: var(--white);
}
.hero__fact-label {
  
  font-size: var(--text-s);
  line-height: 1.5;
  color: color-mix(in oklch, var(--white) 82%, var(--primary));
}
.intro {
  
  display: flex;
  justify-content: center;
  padding-block: var(--_section-space, calc(var(--section-space-m) * 1.2));
  padding-inline: var(--gutter);
  scroll-margin-block-start: 6rem;
}
.intro__inner {
  
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--_intro-cols, minmax(0, 5fr) minmax(0, 7fr));
  align-items: center;
  gap: var(--_intro-gap, calc(var(--space-xxl) * 1.2));
  @media (max-width: 64em) { --_intro-cols: minmax(0, 1fr); --_intro-gap: var(--space-xl); }
}
.intro__media {
  
  position: relative;
  margin: 0 var(--space-l) var(--space-l) 0;
  max-inline-size: var(--_intro-media-max, none);
  border-radius: 0;
  &::before {
    content: "";
    position: absolute;
    inset: var(--space-l) calc(var(--space-l) * -1) calc(var(--space-l) * -1) var(--space-l);
    z-index: 0;
    border: 2px solid var(--primary-light);
    border-radius: calc(var(--radius) * 6);
  }
  @media (max-width: 64em) { --_intro-media-max: 28rem; }
}
.intro__image {
  
  position: relative;
  z-index: 1;
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) * 6);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--base-ultra-dark) 14%, transparent);
}
.intro__badge {
  
  position: absolute;
  z-index: 2;
  inset-block-end: calc(var(--space-l) * -1);
  inset-inline-start: calc(var(--space-l) * -1);
  display: grid;
  place-content: center;
  inline-size: 8.5rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--primary);
  color: var(--white);
  text-align: center;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--base-ultra-dark) 14%, transparent);
  rotate: -8deg;
  @media (max-width: 48em) { inset-inline-start: calc(var(--space-s) * -1); }
}
.intro__badge-value {
  
  --_script-size: calc(var(--h2) * 1.05);
  --_script-color: var(--white);
}
.intro__badge-label {
  
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.intro__content {
  
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.intro__text {
  
  margin: 0;
  font-size: var(--text-m);
  line-height: 1.7;
  color: var(--_text-color, var(--base-dark));
}
.intro__list-title {
  
  margin: 0;
  padding-block-start: var(--space-xs);
  font-weight: 700;
  font-size: var(--text-m);
  color: var(--base-ultra-dark);
}
.intro__chips {
  
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  
  display: inline-flex;
  align-items: center;
  padding: calc(var(--space-xs) * 0.8) var(--space-s);
  border: 1px solid var(--primary-light);
  border-radius: 999px;
  background: var(--white);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--primary-dark);
}
.features {
  
  display: flex;
  justify-content: center;
  padding-block: var(--_section-space, calc(var(--section-space-m) * 1.2));
  padding-inline: var(--gutter);
  background: var(--base-light);
}
.features__inner {
  
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.features__grid {
  
  display: grid;
  grid-template-columns: var(--_feat-cols, repeat(4, minmax(0, 1fr)));
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  @media (max-width: 64em) { --_feat-cols: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 40em) { --_feat-cols: minmax(0, 1fr); }
}
.features__item {
  
  display: flex;
}
.features__note {
  
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  margin: 0;
  font-size: var(--text-m);
  font-weight: 600;
  text-align: center;
  color: var(--secondary-dark);
}
.feature-card {
  
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  inline-size: 100%;
  padding: var(--space-l);
  border-radius: calc(var(--radius) * 4);
  background: var(--base-ultra-light);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--base-ultra-dark) 6%, transparent);
  translate: var(--_lift, 0 0);
  transition: translate 300ms cubic-bezier(.2, .7, .2, 1), box-shadow 300ms;
  @media (hover: hover) { &:hover { --_lift: 0 -4px; box-shadow: 0 18px 40px color-mix(in srgb, var(--base-ultra-dark) 14%, transparent); } }
}
.feature-card__icon {
  
  order: -1;
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--primary-ultra-light);
  color: var(--primary);
  font-size: var(--text-xl);
}
.feature-card__title {
  
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--_heading-color, var(--base-ultra-dark));
  text-wrap: balance;
  font-size: var(--h4);
}
.feature-card__text {
  
  margin: 0;
  font-size: var(--text-s);
  line-height: 1.65;
  color: var(--base-dark);
}
.history {
  
  display: flex;
  justify-content: center;
  padding-block: var(--_section-space, calc(var(--section-space-m) * 1.2));
  padding-inline: var(--gutter);
}
.history__inner {
  
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--_hist-cols, minmax(0, 7fr) minmax(0, 5fr));
  align-items: start;
  gap: var(--_hist-gap, calc(var(--space-xxl) * 1.2));
  @media (max-width: 64em) { --_hist-cols: minmax(0, 1fr); --_hist-gap: var(--space-xl); }
}
.history__content {
  
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.history__text {
  
  margin: 0;
  font-size: var(--text-m);
  line-height: 1.7;
  color: var(--_text-color, var(--base-dark));
}
.history__aside {
  
  position: var(--_hist-pos, sticky);
  inset-block-start: 8rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  @media (max-width: 64em) { --_hist-pos: static; }
}
.history__media {
  
  margin: 0;
  border-radius: 0;
}
.history__image {
  
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: calc(var(--radius) * 6);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--base-ultra-dark) 14%, transparent);
}
.history__stat {
  
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-l);
  border-radius: calc(var(--radius) * 4);
  --_clay-bg: var(--secondary);
  color: var(--white);
}
.history__stat-value {
  
  --_script-size: calc(var(--h1) * 1.2);
  --_script-color: var(--accent-light);
}
.history__stat-label {
  
  margin: 0;
  font-size: var(--text-s);
  line-height: 1.55;
  color: color-mix(in oklch, var(--white) 90%, var(--secondary));
}
.history__quote {
  
  margin: 0;
  padding: var(--space-m) var(--space-l);
  border-inline-start: 4px solid var(--primary);
  border-radius: 0 calc(var(--radius) * 3) calc(var(--radius) * 3) 0;
  background: var(--primary-ultra-light);
  font-size: var(--text-l);
  line-height: 1.55;
  font-weight: 600;
  color: var(--primary-dark);
}
.products {
  
  display: flex;
  justify-content: center;
  padding-block: var(--_section-space, calc(var(--section-space-m) * 1.2));
  padding-inline: var(--gutter);
  background: var(--secondary-ultra-light);
}
.products__inner {
  
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.products__head {
  
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-l);
}
.products__grid {
  
  display: grid;
  grid-template-columns: var(--_prod-cols, repeat(4, minmax(0, 1fr)));
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  @media (max-width: 64em) { --_prod-cols: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 48em) { --_prod-cols: repeat(2, minmax(0, 1fr)); }
}
.products__item {
  
  display: flex;
}
.product-card {
  
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  overflow: hidden;
  border-radius: calc(var(--radius) * 4);
  background: var(--white);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--base-ultra-dark) 6%, transparent);
  translate: var(--_lift, 0 0);
  transition: translate 300ms cubic-bezier(.2, .7, .2, 1), box-shadow 300ms;
  &:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
  @media (hover: hover) { &:hover { --_lift: 0 -4px; --_zoom: 1.06; --_zoom-op: 1; box-shadow: 0 18px 40px color-mix(in srgb, var(--base-ultra-dark) 14%, transparent); } }
}
.product-card__media {
  
  order: -1;
  position: relative;
  margin: 0;
  aspect-ratio: var(--_ratio, 1);
  overflow: hidden;
  border-radius: 0;
  background: var(--base-light);
}
.product-card__image {
  
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 0;
  scale: var(--_zoom, 1);
  transition: scale 600ms cubic-bezier(.2, .7, .2, 1);
}
.product-card__zoom {
  
  position: absolute;
  inset-block-start: var(--space-s);
  inset-inline-end: var(--space-s);
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 92%, transparent);
  color: var(--primary-dark);
  opacity: var(--_zoom-op, 0);
  transition: opacity 300ms;
  @media (hover: none) { opacity: 1; }
}
.product-card__body {
  
  padding: var(--space-s) var(--space-m) var(--space-m);
}
.product-card__title {
  
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--_heading-color, var(--base-ultra-dark));
  text-wrap: balance;
  font-size: var(--text-m);
  font-weight: 600;
  line-height: 1.35;
}
.product-card__link {
  
  text-decoration: none;
  color: inherit;
  &::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  &:focus-visible { outline: none; }
}
.lightbox {
  
  position: fixed;
  inset: 0;
  z-index: 100;
  display: var(--_lb-display, none);
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m) var(--gutter);
  background: color-mix(in srgb, var(--base-ultra-dark) 94%, transparent);
  color: var(--white);
  &:target { --_lb-display: flex; }
}
.lightbox__bar {
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}
.lightbox__title {
  
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--_heading-color, var(--base-ultra-dark));
  text-wrap: balance;
  --_heading-color: var(--white);
  font-size: var(--h5);
}
.lightbox__tools {
  
  display: flex;
  align-items: center;
  gap: var(--space-m);
}
.lightbox__count {
  
  font-size: var(--text-s);
  color: color-mix(in oklch, var(--white) 75%, var(--base-ultra-dark));
}
.lightbox__btn {
  
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 12%, transparent);
  color: var(--white);
  font-size: var(--text-l);
  text-decoration: none;
  transition: background-color 300ms;
  &:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  @media (hover: hover) { &:hover { background: var(--primary); } }
}
.lightbox__stage {
  
  flex: 1;
  min-block-size: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-m);
  @media (max-width: 48em) { gap: var(--space-xs); }
}
.lightbox__figure {
  
  display: flex;
  justify-content: center;
  align-items: center;
  block-size: 100%;
  min-block-size: 0;
  margin: 0;
  border-radius: 0;
}
.lightbox__image {
  
  display: block;
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  border-radius: calc(var(--radius) * 2);
}
.cta-band {
  
  display: flex;
  justify-content: center;
  padding-block: var(--_section-space, calc(var(--section-space-m) * 1.2));
  padding-inline: var(--gutter);
  color: var(--white);
}
.cta-band__inner {
  
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}
.cta-band__content {
  
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-inline-size: 40rem;
}
.cta-band__script {
  
  --_script-size: var(--h2);
  --_script-color: var(--accent-light);
}
.cta-band__title {
  
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--_heading-color, var(--base-ultra-dark));
  text-wrap: balance;
  --_heading-color: var(--white);
  font-size: var(--h2);
}
.cta-band__text {
  
  margin: 0;
  font-size: var(--text-m);
  line-height: 1.6;
  color: color-mix(in oklch, var(--white) 90%, var(--primary));
}
.cta-band__actions {
  
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.page-title {
  
  display: flex;
  justify-content: center;
  padding-block: var(--_section-space, calc(var(--section-space-m) * 1.2));
  padding-inline: var(--gutter);
  --_section-space: var(--section-space-m);
  --_clay-bg: var(--secondary);
  color: var(--white);
}
.page-title__inner {
  
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.page-title__script {
  
  --_script-size: calc(var(--h2) * 1.1);
  --_script-color: var(--accent-light);
}
.page-title__title {
  
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--_heading-color, var(--base-ultra-dark));
  text-wrap: balance;
  --_heading-color: var(--white);
  font-size: var(--h1);
}
.page-title__lead {
  
  margin: 0;
  max-inline-size: 44rem;
  font-size: var(--text-l);
  line-height: 1.55;
  color: color-mix(in oklch, var(--white) 88%, var(--secondary));
}
.breadcrumb {
  
  padding-block-end: var(--space-xs);
}
.breadcrumb__list {
  
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-s);
  color: color-mix(in oklch, var(--white) 80%, var(--secondary));
}
.breadcrumb__item {
  
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  &:not(:last-child)::after { content: "/"; opacity: 0.6; }
  &[aria-current="page"] { color: var(--white); font-weight: 600; }
}
.breadcrumb__link {
  
  text-decoration: none;
  color: inherit;
  @media (hover: hover) { &:hover { color: var(--white); text-decoration: underline; } }
}
.gallery {
  
  display: flex;
  justify-content: center;
  padding-block: var(--_section-space, calc(var(--section-space-m) * 1.2));
  padding-inline: var(--gutter);
}
.gallery__inner {
  
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.gallery__filters {
  
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  @media (max-width: 48em) {
    flex-direction: column;
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.25s ease, translate 0.25s ease, display 0.25s allow-discrete;
    @starting-style { opacity: 0; translate: 0 -8px; }
    .gallery__filter-box:not(:has(.gallery__filter-switch:checked)) & { display: none; opacity: 0; translate: 0 -8px; }
  }
  @media (prefers-reduced-motion: reduce) { transition: none; }
}
.filter-chip {
  
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: calc(var(--space-xs) * 1.1) var(--space-m);
  border: 1px solid var(--_fc-border, var(--base-light));
  border-radius: 999px;
  background: var(--_fc-bg, var(--white));
  color: var(--_fc-color, var(--base-ultra-dark));
  font-size: var(--text-s);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 300ms, color 300ms, border-color 300ms;
  &:has(:checked) { --_fc-bg: var(--primary); --_fc-border: var(--primary); --_fc-color: var(--white); --_fc-count: color-mix(in srgb, var(--white) 22%, transparent); }
  &:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
  @media (hover: hover) { &:hover { --_fc-border: var(--primary); } }
  @media (max-width: 48em) { inline-size: 100%; justify-content: space-between; border-radius: calc(var(--radius) * 3); }
}
.filter-chip__input {
  
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.filter-chip__count {
  
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.6em;
  padding-inline: 0.4em;
  border-radius: 999px;
  background: var(--_fc-count, var(--base-light));
  font-size: var(--text-xs);
}
.gallery__grid {
  
  columns: var(--_gal-cols, 3);
  column-gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  @media (max-width: 64em) { --_gal-cols: 2; }
  @media (max-width: 30em) { --_gal-cols: 1; }
}
.gallery__item {
  
  display: var(--_gi-display, flex);
  break-inside: avoid;
  margin-block-end: var(--space-m);
  .gallery:has(.filter-chip__input[value="posoda"]:checked) &:not([data-cat="posoda"]) { --_gi-display: none; }
  .gallery:has(.filter-chip__input[value="peka"]:checked) &:not([data-cat="peka"]) { --_gi-display: none; }
  .gallery:has(.filter-chip__input[value="svetila"]:checked) &:not([data-cat="svetila"]) { --_gi-display: none; }
  .gallery:has(.filter-chip__input[value="figuralika"]:checked) &:not([data-cat="figuralika"]) { --_gi-display: none; }
  .gallery:has(.filter-chip__input[value="delavnica"]:checked) &:not([data-cat="delavnica"]) { --_gi-display: none; }
}
.contact {
  
  display: flex;
  justify-content: center;
  padding-block: var(--_section-space, calc(var(--section-space-m) * 1.2));
  padding-inline: var(--gutter);
}
.contact__inner {
  
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--_contact-cols, minmax(0, 7fr) minmax(0, 5fr));
  gap: var(--space-xl);
  align-items: start;
  @media (max-width: 64em) { --_contact-cols: minmax(0, 1fr); }
}
.contact__cards {
  
  display: grid;
  grid-template-columns: var(--_cc-cols, repeat(2, minmax(0, 1fr)));
  gap: var(--space-m);
  @media (max-width: 40em) { --_cc-cols: minmax(0, 1fr); }
}
.contact-card {
  
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-l);
  border-radius: calc(var(--radius) * 4);
  background: var(--_cc-bg, var(--white));
  color: var(--_cc-color, var(--base-ultra-dark));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--base-ultra-dark) 6%, transparent);
  text-decoration: none;
  translate: var(--_lift, 0 0);
  transition: translate 300ms cubic-bezier(.2, .7, .2, 1), box-shadow 300ms;
  &[data-wide="true"] { grid-column: 1 / -1; }
  &[data-variant="clay"] { --_cc-bg: var(--primary); --_cc-color: var(--white); --_cc-icon-bg: color-mix(in srgb, var(--white) 16%, transparent); --_cc-icon: var(--white); --_cc-label: color-mix(in oklch, var(--white) 85%, var(--primary)); }
  &:is(a):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  @media (hover: hover) { &:is(a):hover { --_lift: 0 -4px; box-shadow: 0 18px 40px color-mix(in srgb, var(--base-ultra-dark) 14%, transparent); } }
}
.contact-card__icon {
  
  order: -1;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  aspect-ratio: 1;
  margin-block-end: var(--space-xs);
  border-radius: 999px;
  background: var(--_cc-icon-bg, var(--primary-ultra-light));
  color: var(--_cc-icon, var(--primary));
  font-size: var(--text-l);
}
.contact-card__label {
  
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--_cc-label, var(--secondary));
}
.contact-card__value {
  
  font-family: var(--heading-font-family);
  font-weight: 700;
  font-size: var(--h4);
  line-height: 1.3;
  /* anywhere (not break-word) also lowers the min-content width → the long e-mail never widens the grid */
  overflow-wrap: anywhere;
}
.contact-card__link {
  
  text-decoration: none;
  color: inherit;
  &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  &:focus-visible { outline: none; }
}
.contact-card__note {
  
  margin: 0;
  font-size: var(--text-s);
  line-height: 1.6;
}
.contact__visit {
  
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-xl);
  border-radius: calc(var(--radius) * 4);
  background: var(--base-light);
}
.contact__visit-title {
  
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--_heading-color, var(--base-ultra-dark));
  text-wrap: balance;
  font-size: var(--h3);
}
.contact__visit-text {
  
  margin: 0;
  font-size: var(--text-m);
  line-height: 1.7;
  color: var(--_text-color, var(--base-dark));
}
.contact__people {
  
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}
.legal {
  
  display: flex;
  justify-content: center;
  padding-block: var(--_section-space, calc(var(--section-space-m) * 1.2));
  padding-inline: var(--gutter);
}
.legal__inner {
  
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  max-inline-size: 48rem;
}
.legal__section {
  
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.legal__title {
  
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--_heading-color, var(--base-ultra-dark));
  text-wrap: balance;
  font-size: var(--h4);
}
.legal__text {
  
  margin: 0;
  font-size: var(--text-m);
  line-height: 1.7;
  color: var(--_text-color, var(--base-dark));
}
.error-page {
  
  display: flex;
  justify-content: center;
  padding-block: var(--_section-space, calc(var(--section-space-m) * 1.2));
  padding-inline: var(--gutter);
  --_section-space: var(--section-space-xl);
  --_clay-bg: var(--secondary);
  color: var(--white);
}
.error-page__inner {
  
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}
.error-page__code {
  
  --_script-size: calc(var(--h1) * 2);
  --_script-color: var(--accent-light);
}
.error-page__title {
  
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--_heading-color, var(--base-ultra-dark));
  text-wrap: balance;
  --_heading-color: var(--white);
  font-size: var(--h1);
}
.error-page__text {
  
  margin: 0;
  max-inline-size: 40rem;
  font-size: var(--text-l);
  line-height: 1.55;
  color: color-mix(in oklch, var(--white) 88%, var(--secondary));
}
.error-page__links {
  
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.glyph {
  
  display: inline-block;
  inline-size: var(--_icon-size, 1em);
  block-size: var(--_icon-size, 1em);
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
  translate: var(--_shift, 0 0);
  transition: translate 300ms cubic-bezier(.2, .7, .2, 1);
}
.glyph--phone {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.8.7%202.7a2%202%200%200%201-.5%202.1L8%209.8a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.7.7a2%202%200%200%201%201.7%202z%22%2F%3E%3C%2Fsvg%3E");
}
.glyph--mail {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%207l9%206%209-6%22%2F%3E%3C%2Fsvg%3E");
}
.glyph--pin {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-7-6.2-7-11.5A7%207%200%200%201%2019%209.5C19%2014.8%2012%2021%2012%2021z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229.5%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E");
}
.glyph--arrow {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
}
.glyph--arrow-left {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2012H5M11%206l-6%206%206%206%22%2F%3E%3C%2Fsvg%3E");
}
.glyph--menu {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%208h14M5%2012h14M5%2016h10%22%2F%3E%3C%2Fsvg%3E");
}
.glyph--close {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206%206%2018%22%2F%3E%3C%2Fsvg%3E");
}
.glyph--expand {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%203h6v6M9%2021H3v-6M21%203l-7%207M3%2021l7-7%22%2F%3E%3C%2Fsvg%3E");
}
.glyph--award {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M8.5%2014%207%2022l5-3%205%203-1.5-8%22%2F%3E%3C%2Fsvg%3E");
}
.glyph--brush {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18.5%202.5l3%203-9.2%209.2-3-3z%22%2F%3E%3Cpath%20d%3D%22M9.3%2011.7c-3%200-4.3%202-4.3%204.1%200%201.6-.9%202.6-2.5%202.9%201.7%202.4%207.6%202.6%208.8-.9.5-1.6.3-3.3-.9-4.4%22%2F%3E%3C%2Fsvg%3E");
}
.glyph--shield {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v6c0%204-3%207-7%209-4-2-7-5-7-9V6z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");
}
.glyph--vase {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%203h6M10%203v3.5C10%208%206%209.5%206%2014c0%204%202.7%207%206%207s6-3%206-7c0-4.5-4-6-4-7.5V3%22%2F%3E%3Cpath%20d%3D%22M6.6%2012.5h10.8%22%2F%3E%3C%2Fsvg%3E");
}
.glyph--stall {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010l2-6h14l2%206%22%2F%3E%3Cpath%20d%3D%22M3%2010c0%201.4%201.3%202.5%203%202.5S9%2011.4%209%2010c0%201.4%201.3%202.5%203%202.5s3-1.1%203-2.5c0%201.4%201.3%202.5%203%202.5s3-1.1%203-2.5%22%2F%3E%3Cpath%20d%3D%22M5%2012.5V20h14v-7.5M10%2020v-4h4v4%22%2F%3E%3C%2Fsvg%3E");
}
.to-top {
  
  position: fixed;
  inset-inline-end: var(--_tt-x, var(--space-l));
  inset-block-end: var(--_tt-y, var(--space-l));
  z-index: 40;
  display: grid;
  place-items: center;
  inline-size: var(--_tt-size, 3.25rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--_tt-bg, var(--primary));
  box-shadow: 0 18px 40px color-mix(in srgb, var(--base-ultra-dark) 14%, transparent);
  color: var(--white);
  text-decoration: none;
  --_icon-size: 1.25rem;
  opacity: var(--_tt-o, 1);
  visibility: var(--_tt-v, visible);
  translate: 0 var(--_tt-ty, 0);
  transition: background-color 300ms;
  @supports (animation-timeline: scroll()) {
    --_tt-o: 0; --_tt-v: hidden; --_tt-ty: 12px;
    animation: bj-appear linear both;
    animation-timeline: scroll(root);
    animation-range: 100vh 120vh;
  }
  @media (hover: hover) { &:hover { --_tt-bg: var(--primary-dark); --_shift: 0 -3px; } }
  &:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  /* smooth only for this button: ACSS sets html:focus-within { scroll-behavior: auto }, and Safari doesn't focus
     clicked links → also on :hover/:active (tap). Lightbox :target jumps stay instant. */
  @media (prefers-reduced-motion: no-preference) { :root:has(&:hover, &:focus, &:active) { scroll-behavior: smooth; } }
  @media (max-width: 48em) { --_tt-x: var(--space-m); --_tt-y: var(--space-m); --_tt-size: 3rem; }
}
.glyph--arrow-up {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019V5M6%2011l6-6%206%206%22%2F%3E%3C%2Fsvg%3E");
}
.gallery__filter-box {
  
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.gallery__filter-toggle {
  
  display: none;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--base-light);
  border-radius: calc(var(--radius) * 3);
  background: var(--white);
  font-size: var(--text-s);
  font-weight: 600;
  cursor: pointer;
  &:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
  @media (max-width: 48em) { display: flex; }
}
.gallery__filter-switch {
  
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gallery__filter-label {
  
  color: var(--secondary);
}
.gallery__filter-current {
  
  color: var(--primary-dark);
  &::after { content: var(--_current, "Vse"); }
  .gallery:has(.filter-chip__input[value="posoda"]:checked) & { --_current: "Posoda"; }
  .gallery:has(.filter-chip__input[value="peka"]:checked) & { --_current: "Za peko"; }
  .gallery:has(.filter-chip__input[value="svetila"]:checked) & { --_current: "Lestenci in lučke"; }
  .gallery:has(.filter-chip__input[value="figuralika"]:checked) & { --_current: "Figuralika"; }
  .gallery:has(.filter-chip__input[value="delavnica"]:checked) & { --_current: "Delavnica"; }
}
.gallery__filter-chevron {
  
  margin-inline-start: auto;
  rotate: var(--_chev, 0deg);
  transition: rotate 300ms cubic-bezier(.2, .7, .2, 1);
  .gallery__filter-toggle:has(:checked) & { --_chev: 180deg; }
}
.glyph--chevron-down {
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
}
.legal__optout {
  
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  cursor: pointer;
  margin-block-start: var(--space-xs);
  padding: var(--space-s);
  border: 1px solid var(--base-light);
  border-radius: calc(var(--radius) * 3);
  background: var(--white);
  font-size: var(--text-m);
  line-height: 1.6;
  color: var(--base-dark);
  accent-color: var(--primary);
}
.legal__optout-check {
  
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
  margin: 0.2em 0 0;
}
.legal__optout-text {
  
  min-inline-size: 0;
}