.display-heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-display);
  line-height: var(--line-height-tight);
}

.eyebrow,
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--color-cyan);
  font-family: var(--font-ui);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  line-height: 1.35;
  text-transform: uppercase;
}

.section-eyebrow::after {
  width: 5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
  content: "";
}

.text-metallic-silver,
.text-metallic-blue {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.text-metallic-silver { background-image: var(--gradient-metallic-silver); }
.text-metallic-blue { background-image: var(--gradient-metallic-blue); }
.text-muted { color: var(--color-text-muted); }
.text-small { font-size: var(--font-size-small); }
.caption { color: var(--color-text-muted); font-size: var(--font-size-caption); }
.type-display { font-family: var(--font-heading); font-weight: var(--font-weight-black); }
.type-ui { font-family: var(--font-ui); }
.type-body { font-family: var(--font-body); }
.type-medium { font-weight: var(--font-weight-medium); }
.type-semibold { font-weight: var(--font-weight-semibold); }
.type-bold { font-weight: var(--font-weight-bold); }
.product-spec { color: var(--color-cyan); font-family: var(--font-ui); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; text-transform: uppercase; }

.button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
input[type="submit"] {
  position: relative;
  display: inline-flex;
  min-height: var(--button-height-md);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.72rem 1.25rem;
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-button);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base), color var(--transition-base), transform var(--transition-fast);
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
input[type="submit"]:hover { color: var(--color-white); transform: translateY(-1px); }
.button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active,
input[type="submit"]:active { transform: translateY(0); }
.button:focus-visible { outline-offset: 3px; }
.button[disabled],
.button.is-disabled,
.button[aria-disabled="true"] { cursor: not-allowed; filter: grayscale(0.65); opacity: 0.45; pointer-events: none; }
.button.is-loading { color: transparent; pointer-events: none; position: relative; }
.button.is-loading::after { position: absolute; width: 1.15rem; height: 1.15rem; border: 2px solid rgb(255 255 255 / 35%); border-top-color: var(--color-white); border-radius: 50%; animation: syntide-spin 0.7s linear infinite; content: ""; }
.button--primary,
.woocommerce a.button.button--primary,
.woocommerce button.button.button--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
input[type="submit"] {
  --button-surface: var(--gradient-primary-cta);
  --button-border-fill: var(--gradient-button-border-primary);
  overflow: hidden;
  background: var(--button-surface) padding-box, var(--button-border-fill) border-box;
  box-shadow: 0 9px 24px rgb(13 94 193 / 20%);
  isolation: isolate;
}

.button--primary::before,
.woocommerce a.button.button--primary::before,
.woocommerce button.button.button--primary::before,
.woocommerce a.button::before,
.woocommerce button.button::before {
  position: absolute;
  z-index: 0;
  top: -45%;
  bottom: -45%;
  left: -35%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgb(222 248 255 / 38%), transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-180%) skewX(-20deg);
  transition: transform var(--motion-slow) var(--ease-emphasized), opacity var(--motion-fast) var(--ease-standard);
}

.button--primary:hover::before,
.button--primary:focus-visible::before,
.woocommerce a.button.button--primary:hover::before,
.woocommerce a.button.button--primary:focus-visible::before,
.woocommerce button.button.button--primary:hover::before,
.woocommerce button.button.button--primary:focus-visible::before,
.woocommerce a.button:hover::before,
.woocommerce a.button:focus-visible::before,
.woocommerce button.button:hover::before,
.woocommerce button.button:focus-visible::before {
  opacity: 0.72;
  transform: translateX(650%) skewX(-20deg);
}

.button--primary:hover,
.button--primary:focus-visible,
.woocommerce a.button.button--primary:hover,
.woocommerce a.button.button--primary:focus-visible,
.woocommerce button.button.button--primary:hover,
.woocommerce button.button.button--primary:focus-visible,
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus-visible,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:focus-visible,
.woocommerce input.button.alt:hover,
.woocommerce input.button.alt:focus-visible,
.woocommerce #respond input#submit.alt:hover,
.woocommerce #respond input#submit.alt:focus-visible,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
input[type="submit"]:hover {
  --button-surface: var(--gradient-primary-cta-hover);
  background: var(--button-surface) padding-box, var(--button-border-fill) border-box;
  box-shadow: 0 11px 27px rgb(19 113 218 / 27%);
  color: var(--color-white);
}

.button--primary:active,
.woocommerce a.button.button--primary:active,
.woocommerce button.button.button--primary:active,
.woocommerce a.button.alt:active,
.woocommerce button.button.alt:active,
.woocommerce input.button.alt:active,
.woocommerce #respond input#submit.alt:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active,
input[type="submit"]:active {
  --button-surface: var(--gradient-primary-cta-active);
  background: var(--button-surface) padding-box, var(--button-border-fill) border-box;
  box-shadow: 0 5px 14px rgb(8 64 137 / 22%);
  color: var(--color-white);
}

.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt.disabled:hover,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt:disabled[disabled]:hover,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt.disabled:hover,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled:hover,
.woocommerce input.button.alt:disabled[disabled],
.woocommerce input.button.alt:disabled[disabled]:hover,
.woocommerce #respond input#submit.alt.disabled,
.woocommerce #respond input#submit.alt.disabled:hover,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce #respond input#submit.alt:disabled:hover,
.woocommerce #respond input#submit.alt:disabled[disabled],
.woocommerce #respond input#submit.alt:disabled[disabled]:hover {
  --button-surface: var(--gradient-primary-cta);
  --button-border-fill: var(--gradient-button-border-primary);
  background: var(--button-surface) padding-box, var(--button-border-fill) border-box;
  color: var(--color-white);
}

.button--secondary,
.woocommerce a.button.button--secondary,
.woocommerce button.button.button--secondary {
  --button-surface: var(--gradient-button-secondary);
  --button-border-fill: var(--gradient-button-border-secondary);
  overflow: hidden;
  background: var(--button-surface) padding-box, var(--button-border-fill) border-box;
  box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
  white-space: nowrap;
}
.button--secondary:hover,
.button--secondary:focus-visible,
.woocommerce a.button.button--secondary:hover,
.woocommerce a.button.button--secondary:focus-visible,
.woocommerce button.button.button--secondary:hover,
.woocommerce button.button.button--secondary:focus-visible {
  --button-surface: var(--gradient-button-secondary-hover);
  --button-border-fill: var(--gradient-button-border-secondary-hover);
  box-shadow: 0 8px 24px rgb(17 104 189 / 13%);
}
.woocommerce a.button.button--secondary::before,
.woocommerce button.button.button--secondary::before { content: none; }
.button--tertiary { min-height: auto; border: 0; padding: var(--space-2) 0; background: transparent; color: var(--color-primary); }
.button--tertiary:hover { color: var(--color-cyan); }
.button--block { width: 100%; }
.button--sm,
.syntide-button--sm,
.woocommerce a.button.button--sm,
.woocommerce button.button.button--sm { min-height: var(--button-height-sm); padding: 0.6rem 1rem; font-size: 0.6875rem; }
.button--md,
.syntide-button--md,
.woocommerce a.button.button--md,
.woocommerce button.button.button--md { min-height: var(--button-height-md); padding: 0.72rem 1.25rem; font-size: 0.75rem; }
.button--lg,
.syntide-button--lg,
.woocommerce a.button.button--lg,
.woocommerce button.button.button--lg { min-height: var(--button-height-lg); padding: 0.85rem 1.5rem; font-size: 0.8125rem; }

.button--primary,
.button--secondary,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
input[type="submit"] {
  border: 1px solid transparent;
  border-radius: 0;
  clip-path: polygon(
    var(--button-cut) 0,
    calc(100% - var(--button-cut)) 0,
    100% var(--button-cut),
    100% calc(100% - var(--button-cut)),
    calc(100% - var(--button-cut)) 100%,
    var(--button-cut) 100%,
    0 calc(100% - var(--button-cut)),
    0 var(--button-cut)
  );
}

.button--primary:focus-visible,
.button--secondary:focus-visible,
button.button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #respond input#submit:focus-visible,
input[type="submit"]:focus-visible {
  filter: drop-shadow(0 0 0.28rem rgb(82 204 241 / 52%));
}

.icon-button {
  position: relative;
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0;
  background: transparent;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.icon-button:hover { border-color: var(--color-border); background: var(--color-surface); color: var(--color-cyan); }
.icon { width: 1.35rem; height: 1.35rem; }

.card,
.product-card,
.category-card,
.information-card,
.feature-card {
  position: relative;
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 2vw, 2rem);
  background: var(--gradient-surface), var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.syntide-interactive-card { transition: border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); }

.syntide-card {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(82 117 145 / 48%);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgb(9 22 34 / 94%), rgb(2 6 11 / 98%));
  box-shadow: 0 14px 34px rgb(0 0 0 / 22%);
  color: var(--color-text);
  text-decoration: none;
}

.syntide-card-media {
  position: relative;
  display: block;
  width: 100%;
  flex: none;
  overflow: hidden;
  background: radial-gradient(circle at 50% 58%, rgb(22 124 198 / 14%), transparent 62%), #03070b;
}

.syntide-card-media picture { display: block; width: 100%; height: 100%; }
.syntide-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  transition: transform var(--transition-base);
}
.syntide-card-media.has-custom-image img { object-fit: cover; object-position: var(--syntide-card-focal, center); }
.syntide-card:hover .syntide-card-media img,
.syntide-card:focus-visible .syntide-card-media img { transform: scale(1.02); }

.syntide-card-body { position: relative; display: grid; flex: 1; align-content: start; padding: clamp(1.15rem, 1.35vw, 1.45rem); text-align: left; }
.syntide-card-title { margin: 0; color: var(--color-metallic-silver); font-family: var(--font-heading); font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); line-height: 1.2; }
.syntide-card-description { margin: .6rem 0 0; color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--font-size-small); line-height: 1.55; }

.card:hover,
.product-card:hover,
.category-card:hover,
.feature-card:hover,
.syntide-interactive-card:hover,
.syntide-interactive-card:focus-within { border-color: rgb(82 204 241 / 48%); background-color: var(--color-surface-hover); box-shadow: 0 14px 38px rgb(10 84 151 / 15%); transform: translateY(-2px); }

.syntide-cut-card.syntide-cut-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--card-border);
  clip-path: polygon(
    var(--card-cut) 0,
    calc(100% - var(--card-cut)) 0,
    100% var(--card-cut),
    100% calc(100% - var(--card-cut)),
    calc(100% - var(--card-cut)) 100%,
    var(--card-cut) 100%,
    0 calc(100% - var(--card-cut)),
    0 var(--card-cut)
  );
}

.syntide-cut-card.syntide-cut-card::before {
  position: absolute;
  z-index: 0;
  inset: 1px;
  background: var(--card-surface);
  clip-path: polygon(
    var(--card-cut-inner) 0,
    calc(100% - var(--card-cut-inner)) 0,
    100% var(--card-cut-inner),
    100% calc(100% - var(--card-cut-inner)),
    calc(100% - var(--card-cut-inner)) 100%,
    var(--card-cut-inner) 100%,
    0 calc(100% - var(--card-cut-inner)),
    0 var(--card-cut-inner)
  );
  content: "";
  pointer-events: none;
}

.syntide-cut-card.syntide-cut-card > * { position: relative; z-index: 1; }
.syntide-cut-card.syntide-cut-card > .syntide-card-media { width: calc(100% - 2px); margin: 1px 1px 0; }
.syntide-cut-card.syntide-cut-card:hover,
.syntide-cut-card.syntide-cut-card:focus-visible,
.syntide-cut-card.syntide-cut-card:focus-within { background: var(--card-border-hover); }
.syntide-cut-card.syntide-cut-card:hover::before,
.syntide-cut-card.syntide-cut-card:focus-visible::before,
.syntide-cut-card.syntide-cut-card:focus-within::before { background: var(--card-surface-hover); }
.product-card__media { display: grid; aspect-ratio: 4 / 5; place-items: center; margin-bottom: var(--space-5); overflow: hidden; background: radial-gradient(circle, rgb(22 124 198 / 15%), transparent 58%); }
.product-card__price { color: var(--color-metallic-silver); font-family: var(--font-body); font-weight: var(--font-weight-semibold); }
.feature-card__icon,
.icon-container { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; border: var(--border-strong); border-radius: var(--radius-md); margin-bottom: var(--space-5); background: rgb(22 124 198 / 8%); color: var(--color-cyan); }

.sa-home-icon {
  display: grid;
  width: var(--icon-frame-size);
  height: var(--icon-frame-size);
  place-items: center;
  border: 1px solid rgb(82 204 241 / 55%);
  border-radius: 50%;
  margin: 0 auto;
  background: radial-gradient(circle, rgb(22 124 198 / 16%), transparent 68%);
  box-shadow: 0 0 28px rgb(22 124 198 / 13%);
  color: var(--color-cyan);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.sa-home-icon svg,
.sa-home-icon__image { width: var(--icon-glyph-size); height: var(--icon-glyph-size); object-fit: contain; object-position: center; }
.sa-home-icon__image { display: block; }

.syntide-interactive-card:hover .sa-home-icon,
.syntide-interactive-card:focus-within .sa-home-icon {
  border-color: rgb(82 204 241 / 72%);
  box-shadow: 0 0 34px rgb(22 124 198 / 22%);
}

.sa-home-icon.syntide-icon-frame--hex {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: rgb(82 204 241 / 64%);
  clip-path: polygon(25% 5%, 75% 5%, 98% 50%, 75% 95%, 25% 95%, 2% 50%);
}

.sa-home-icon.syntide-icon-frame--hex::before {
  position: absolute;
  z-index: 0;
  inset: 1px;
  background: radial-gradient(circle, rgb(22 124 198 / 18%), transparent 67%), #040a10;
  clip-path: inherit;
  content: "";
}

.sa-home-icon.syntide-icon-frame--hex > * { position: relative; z-index: 1; }

.syntide-split-artwork .syntide-hero__background-image,
.syntide-split-artwork .sa-home-section__background-image {
  object-fit: contain;
  object-position: right center;
}

.syntide-split-artwork .syntide-mobile-visual__image {
  object-fit: contain;
  object-position: center;
}

@media (min-width: 701px) and (max-width: 900px) {
  .syntide-split-artwork .syntide-hero__background-image,
  .syntide-split-artwork .sa-home-section__background-image { object-position: center; }
}

.syntide-link-arrow [data-syntide-arrow] { display: inline-block; transition: transform var(--transition-fast); }
.syntide-link-arrow:hover [data-syntide-arrow],
.syntide-link-arrow:focus-visible [data-syntide-arrow] { transform: translateX(3px); }

.syntide-reveal-ready [data-syntide-reveal] {
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease-standard), transform var(--motion-slow) var(--ease-emphasized);
  will-change: opacity, transform;
}
.syntide-reveal-ready [data-syntide-reveal="fade-up"] { transform: translateY(1.2rem); }
.syntide-reveal-ready [data-syntide-reveal="scale"] { transform: scale(0.985); }
.syntide-reveal-ready [data-syntide-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; }

.badge,
.pill,
.stock-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.7rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.badge--primary { border-color: rgb(46 157 210 / 45%); background: rgb(46 157 210 / 12%); color: var(--color-cyan); }
.stock-status--in-stock { color: var(--color-success); }
.stock-status--out-of-stock { color: var(--color-error); }

.divider { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--color-border-strong), transparent); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); font-weight: 700; text-decoration: none; }
.text-link:hover { color: var(--color-cyan); }

.breadcrumbs { color: var(--color-text-muted); font-size: var(--font-size-small); }
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.breadcrumbs__list li + li::before { margin-right: var(--space-2); color: var(--color-border-strong); content: "/"; }
.breadcrumbs a { color: inherit; text-decoration: none; }

.navigation.pagination .nav-links,
.woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; margin: var(--space-12) 0 0; padding: 0; }
.page-numbers { display: grid; min-width: 2.75rem; height: 2.75rem; place-items: center; border: var(--border-thin); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.page-numbers.current,
.page-numbers:hover { border-color: var(--color-primary); background: rgb(22 124 198 / 15%); color: var(--color-cyan); }

.field,
.form-row { display: grid; gap: var(--space-2); }
.field__label,
label { color: var(--color-metallic-silver); font-family: var(--font-body); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  min-height: 3.25rem;
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  background: #070c12;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
textarea { min-height: 9rem; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%); background-position: calc(100% - 1rem) 1.4rem, calc(100% - 0.65rem) 1.4rem; background-repeat: no-repeat; background-size: 0.35rem 0.35rem; padding-right: 2.5rem; }
input:focus,
select:focus,
textarea:focus { border-color: var(--color-focus); box-shadow: 0 0 0 3px rgb(82 204 241 / 10%); outline: 0; }
input[aria-invalid="true"],
.field.is-error input,
.field.is-error textarea { border-color: var(--color-error); }
.field__error { color: var(--color-error); font-size: var(--font-size-small); }
.field__help { color: var(--color-text-muted); font-size: var(--font-size-small); }
input[type="checkbox"],
input[type="radio"] { width: 1.1rem; height: 1.1rem; accent-color: var(--color-primary); }
.search-form { display: flex; align-items: stretch; gap: var(--space-3); }
.search-form .field { flex: 1; }

.quantity-control,
.quantity { display: inline-flex; align-items: stretch; border: var(--border-thin); border-radius: var(--radius-sm); overflow: hidden; }
.quantity-control button { width: 2.75rem; border: 0; background: var(--color-surface); color: var(--color-text); }
.quantity input.qty { width: 4rem; min-height: 2.75rem; border: 0; border-inline: var(--border-thin); border-radius: 0; padding-inline: 0.25rem; text-align: center; }
.price { color: var(--color-metallic-silver); font-family: var(--font-body); font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); }

.notice,
.alert,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border: var(--border-thin);
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  background: rgb(22 124 198 / 8%);
  color: var(--color-text);
  list-style: none;
}
.notice--success,
.alert--success { border-left-color: var(--color-success); }
.notice--warning,
.alert--warning { border-left-color: var(--color-warning); }
.notice--error,
.alert--error,
.woocommerce-error { border-left-color: var(--color-error); }

.accordion { border-top: var(--border-thin); }
.accordion__item { border-bottom: var(--border-thin); }
.accordion__trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-4); border: 0; padding: var(--space-5) 0; background: transparent; color: var(--color-text); font-weight: 700; text-align: left; }
.accordion__trigger::after { width: 0.6rem; height: 0.6rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; content: ""; transform: rotate(45deg); transition: transform var(--transition-base); }
.accordion__trigger[aria-expanded="true"]::after { transform: rotate(225deg); }
.accordion__panel { padding-bottom: var(--space-6); color: var(--color-text-muted); }

.tabs__list { display: flex; gap: var(--space-2); overflow-x: auto; border-bottom: var(--border-thin); }
.tabs__tab { border: 0; border-bottom: 2px solid transparent; padding: var(--space-4) var(--space-5); background: transparent; color: var(--color-text-muted); white-space: nowrap; }
.tabs__tab[aria-selected="true"] { border-bottom-color: var(--color-primary); color: var(--color-cyan); }
.tabs__panel { padding-block: var(--space-6); }

.dialog-shell {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  display: grid;
  place-items: center;
}
.dialog-shell[hidden] { display: none; }
.dialog-shell__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 72%); backdrop-filter: blur(6px); }
.dialog-shell__panel { position: relative; z-index: 1; width: min(calc(100% - (var(--gutter) * 2)), 44rem); max-height: calc(100vh - (var(--gutter) * 2)); overflow-y: auto; border: var(--border-strong); border-radius: var(--radius-md); padding: var(--space-8); background: var(--color-bg-elevated); box-shadow: var(--shadow-lg); }
.dialog-shell__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.dialog-shell__header > * { margin-bottom: 0; }
.dialog-shell--offcanvas { place-items: stretch end; }
.dialog-shell--offcanvas .dialog-shell__panel { width: min(100%, 30rem); height: 100%; max-height: none; border-block: 0; border-right: 0; border-radius: 0; }
.popup-shell { animation: syntide-dialog-in 180ms ease both; }
.offcanvas-panel { animation: syntide-offcanvas-in 220ms ease both; }
.account-popup-shell,
.mini-cart-shell,
.search-popup-shell { color: var(--color-text); }
.account-popup-shell { width: min(100%, 24rem); border: var(--border-strong); border-radius: var(--radius-md); padding: var(--space-6); background: var(--color-bg-elevated); box-shadow: var(--shadow-md); }
.mini-cart-shell { display: grid; gap: var(--space-4); }
.search-popup-shell { width: min(100%, 44rem); }

.dropdown,
.menu-item-has-children { position: relative; }
.dropdown__panel,
.sub-menu { position: absolute; z-index: var(--z-dropdown); top: calc(100% + var(--space-2)); left: 0; min-width: 15rem; visibility: hidden; border: var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-2); background: var(--color-bg-elevated); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(-0.35rem); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); }
.dropdown.is-open .dropdown__panel,
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: translateY(0); }

.tooltip { position: relative; }
.tooltip::after { position: absolute; z-index: var(--z-toast); bottom: calc(100% + var(--space-2)); left: 50%; width: max-content; max-width: 16rem; visibility: hidden; border: var(--border-thin); border-radius: var(--radius-xs); padding: var(--space-2) var(--space-3); background: var(--color-bg-elevated); color: var(--color-text); box-shadow: var(--shadow-sm); content: attr(data-tooltip); font-size: var(--font-size-caption); opacity: 0; transform: translate(-50%, 0.25rem); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); }
.tooltip:hover::after,
.tooltip:focus-visible::after { visibility: visible; opacity: 1; transform: translate(-50%, 0); }

@keyframes syntide-spin { to { transform: rotate(360deg); } }
@keyframes syntide-dialog-in { from { opacity: 0; transform: translateY(1rem) scale(0.99); } }
@keyframes syntide-offcanvas-in { from { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .button--primary::before,
  .woocommerce a.button::before,
  .woocommerce button.button::before { display: none; }
  .syntide-reveal-ready [data-syntide-reveal] { opacity: 1 !important; transform: none !important; }
  .syntide-link-arrow [data-syntide-arrow] { transform: none !important; }
}