/*
 * Tectronis reusable UI system.
 * Prefix t- keeps component styles independent from WooCommerce and plugins.
 */
:root {
  --t-ink: #0b1f36;
  --t-ink-900: #071522;
  --t-navy: #102c4a;
  --t-electric: #0873c2;
  --t-electric-hover: #005f9f;
  --t-cyan: #22d3ee;
  --t-mint: #a8eee8;
  --t-silver: #a8b5c2;
  --t-muted: #5a6b7d;
  --t-line: #d7e2ec;
  --t-soft: #e9f1f7;
  --t-surface: #f5f8fb;
  --t-white: #fff;
  --t-success: #147d64;
  --t-success-soft: #e5f5f0;
  --t-warning: #8a5b00;
  --t-warning-soft: #fff4d6;
  --t-error: #b42318;
  --t-error-soft: #fff0ee;
  --t-info-soft: #e6f3fb;
  --t-radius-sm: .5rem;
  --t-radius-md: .75rem;
  --t-radius-lg: 1rem;
  --t-radius-xl: 1.25rem;
  --t-shadow-sm: 0 .25rem .8rem rgba(11,31,54,.08);
  --t-shadow-md: 0 1rem 2.5rem rgba(11,31,54,.12);
  --t-shadow-lg: 0 1.5rem 4rem rgba(11,31,54,.18);
  --t-ease: 220ms ease;
  --t-content: 1180px;
}

.t-stack { display: grid; gap: var(--t-stack-gap, 1rem); }
.t-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-cluster-gap, .75rem); }
.t-grid { display: grid; grid-template-columns: repeat(var(--t-columns, 3), minmax(0, 1fr)); gap: var(--t-grid-gap, 1rem); }
.t-surface { border: 1px solid var(--t-line); border-radius: var(--t-radius-lg); background: var(--t-white); }
.t-dark-section {
  background:
    radial-gradient(circle at 82% 12%, rgba(34,211,238,.16), transparent 24rem),
    linear-gradient(145deg, var(--t-navy), var(--t-ink-900));
  color: var(--t-white);
}
.t-dark-section :is(h1,h2,h3,h4) { color: var(--t-white); }
.t-dark-section p { color: rgba(255,255,255,.74); }

/* Buttons */
.t-button,
.wp-block-button__link,
.woocommerce :is(a.button,button.button,input.button),
.wc-block-components-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border: 1px solid transparent;
  border-radius: var(--t-radius-md);
  padding: .78rem 1.1rem;
  background: var(--t-ink);
  color: var(--t-white);
  font: inherit;
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-ease), background var(--t-ease), border-color var(--t-ease), box-shadow var(--t-ease), transform var(--t-ease);
}
.t-button:hover,
.wp-block-button__link:hover,
.woocommerce :is(a.button,button.button,input.button):hover,
.wc-block-components-button:hover {
  background: var(--t-electric-hover);
  color: var(--t-white);
  box-shadow: var(--t-shadow-sm);
  transform: translateY(-1px);
}
.t-button--secondary,
.wp-block-button.is-style-tectronis-outline .wp-block-button__link {
  border-color: var(--t-ink);
  background: transparent;
  color: var(--t-ink);
}
.t-button--secondary:hover,
.wp-block-button.is-style-tectronis-outline .wp-block-button__link:hover {
  background: var(--t-ink);
  color: var(--t-white);
}
.t-button--quiet { border-color: var(--t-line); background: var(--t-white); color: var(--t-ink); }
.t-button--quiet:hover { border-color: var(--t-electric); background: var(--t-info-soft); color: var(--t-ink); }
.t-button--danger { background: var(--t-error); }
.t-button--icon { width: 44px; padding: 0; }
.t-button[disabled],
.t-button[aria-disabled="true"] { opacity: .52; pointer-events: none; }
.t-button.is-loading { position: relative; color: transparent; pointer-events: none; }
.t-button.is-loading::after {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: var(--t-white);
  border-radius: 50%;
  content: "";
  animation: t-spin .7s linear infinite;
}

/* Form controls */
.t-field { display: grid; gap: .45rem; }
.t-label { color: var(--t-ink); font-size: .875rem; font-weight: 650; }
.t-help { margin: 0; color: var(--t-muted); font-size: .78rem; line-height: 1.45; }
.t-input,
.t-select,
.t-textarea,
.woocommerce :is(input.input-text,select,textarea),
.wc-block-components-text-input input,
.wc-block-components-combobox-control input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #b8c7d5;
  border-radius: var(--t-radius-sm);
  background: var(--t-white);
  color: var(--t-ink);
  font: inherit;
  line-height: 1.4;
  padding: .72rem .85rem;
  transition: border-color var(--t-ease), box-shadow var(--t-ease), background var(--t-ease);
}
.t-textarea,
.woocommerce textarea { min-height: 8rem; resize: vertical; }
.t-input::placeholder,
.t-textarea::placeholder { color: var(--t-muted); opacity: 1; }
.t-input:hover,
.t-select:hover,
.t-textarea:hover { border-color: #8295a8; }
.t-input:focus,
.t-select:focus,
.t-textarea:focus,
.woocommerce :is(input.input-text,select,textarea):focus {
  border-color: var(--t-electric);
  outline: 2px solid var(--t-electric);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(8,115,194,.14);
}
.t-field.is-error :is(.t-input,.t-select,.t-textarea),
:is(.t-input,.t-select,.t-textarea)[aria-invalid="true"] { border-color: var(--t-error); background: var(--t-error-soft); }
.t-field.is-success :is(.t-input,.t-select,.t-textarea) { border-color: var(--t-success); }
.t-field__message { margin: 0; font-size: .78rem; }
.t-field.is-error .t-field__message { color: var(--t-error); }
.t-field.is-success .t-field__message { color: var(--t-success); }

/* Badges */
.t-badge {
  display: inline-flex;
  min-height: 1.7rem;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--t-line);
  border-radius: 999px;
  padding: .2rem .55rem;
  background: var(--t-soft);
  color: var(--t-navy);
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.t-badge--accent { border-color: rgba(8,115,194,.28); background: var(--t-info-soft); color: #005f9f; }
.t-badge--success { border-color: rgba(20,125,100,.28); background: var(--t-success-soft); color: #0c664f; }
.t-badge--warning { border-color: rgba(138,91,0,.28); background: var(--t-warning-soft); color: #6f4900; }
.t-badge--error { border-color: rgba(180,35,24,.25); background: var(--t-error-soft); color: #912018; }

/* Cards */
.t-card,
.wp-block-group.is-style-tectronis-card,
.woocommerce ul.products li.product {
  overflow: hidden;
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-lg);
  background: var(--t-white);
  box-shadow: 0 0 0 rgba(11,31,54,0);
}
.t-card { display: grid; }
.t-card__media { overflow: hidden; background: var(--t-soft); aspect-ratio: 4 / 3; }
.t-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--t-ease); }
.t-card__body { display: grid; gap: .8rem; padding: 1.25rem; }
.t-card__title { margin: 0; color: var(--t-ink); font-size: 1.1rem; line-height: 1.3; }
.t-card__meta { color: var(--t-muted); font-size: .8rem; }
.t-card__price { color: var(--t-ink); font-size: 1.2rem; font-weight: 700; }
.t-card--interactive { transition: transform var(--t-ease), border-color var(--t-ease), box-shadow var(--t-ease); }
.t-card--interactive:hover { border-color: #a9c8de; box-shadow: var(--t-shadow-md); transform: translateY(-3px); }
.t-card--interactive:hover .t-card__media img { transform: scale(1.025); }
.wp-block-group.is-style-tectronis-card { padding: clamp(1.25rem, 3vw, 2rem); }
.wp-block-group.is-style-tectronis-dark-section { padding: clamp(2rem, 6vw, 5rem); background: linear-gradient(145deg,var(--t-navy),var(--t-ink-900)); color: var(--t-white); }

/* Dropdown uses native details for progressive enhancement. */
.t-dropdown { position: relative; }
.t-dropdown > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-sm);
  padding: .65rem .8rem;
  background: var(--t-white);
  color: var(--t-ink);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.t-dropdown > summary::-webkit-details-marker { display: none; }
.t-dropdown > summary::after { content: "⌄"; transition: transform var(--t-ease); }
.t-dropdown[open] > summary::after { transform: rotate(180deg); }
.t-dropdown__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + .45rem);
  min-width: 14rem;
  max-width: min(22rem, calc(100vw - 2rem));
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-md);
  padding: .45rem;
  background: var(--t-white);
  box-shadow: var(--t-shadow-md);
}
.t-dropdown__menu a { display: flex; min-height: 42px; align-items: center; border-radius: .4rem; padding: .6rem .7rem; color: var(--t-ink); text-decoration: none; }
.t-dropdown__menu a:hover { background: var(--t-soft); }

/* Native dialog modal */
.t-modal {
  width: min(36rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  border: 1px solid rgba(215,226,236,.9);
  border-radius: var(--t-radius-xl);
  padding: 0;
  background: var(--t-white);
  color: var(--t-ink);
  box-shadow: var(--t-shadow-lg);
}
.t-modal::backdrop { background: rgba(7,21,34,.72); backdrop-filter: blur(4px); }
.t-modal__header,
.t-modal__body,
.t-modal__footer { padding: 1.25rem; }
.t-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--t-line); }
.t-modal__header h2 { margin: 0; font-size: 1.35rem; }
.t-modal__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; border-top: 1px solid var(--t-line); }

/* Alerts and status messages */
.t-alert {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: start;
  gap: .75rem;
  border: 1px solid #a9c8de;
  border-radius: var(--t-radius-md);
  padding: .9rem 1rem;
  background: var(--t-info-soft);
  color: var(--t-ink);
}
.t-alert p { margin: 0; color: inherit; }
.t-alert--success { border-color: #8bc9b8; background: var(--t-success-soft); }
.t-alert--warning { border-color: #e3c36f; background: var(--t-warning-soft); }
.t-alert--error,
.woocommerce-error { border-color: #efaaa4; background: var(--t-error-soft); color: #781b15; }
.t-alert__dismiss { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: currentColor; cursor: pointer; }
.t-alert__dismiss:hover { background: rgba(11,31,54,.08); }

/* Breadcrumbs */
.t-breadcrumbs,
.woocommerce .woocommerce-breadcrumb {
  color: var(--t-muted);
  font-size: .8rem;
}
.t-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.t-breadcrumbs li:not(:last-child)::after { margin-left: .35rem; color: var(--t-silver); content: "/"; }
.t-breadcrumbs a,
.woocommerce .woocommerce-breadcrumb a { color: #496075; text-decoration: none; }
.t-breadcrumbs a:hover { color: var(--t-electric-hover); }

/* Pagination */
.t-pagination,
.woocommerce nav.woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: .45rem; border: 0; margin: 0; padding: 0; list-style: none; }
.t-pagination a,
.t-pagination span,
.woocommerce nav.woocommerce-pagination ul li :is(a,span) {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-sm);
  background: var(--t-white);
  color: var(--t-ink);
  text-decoration: none;
}
.t-pagination [aria-current="page"],
.woocommerce nav.woocommerce-pagination ul li span.current { border-color: var(--t-ink); background: var(--t-ink); color: var(--t-white); }

/* Tabs */
.t-tabs { display: grid; gap: 1rem; }
.t-tabs__list { display: flex; overflow-x: auto; gap: .35rem; border-bottom: 1px solid var(--t-line); scrollbar-width: thin; }
.t-tabs__tab {
  min-height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: .7rem .85rem;
  background: transparent;
  color: var(--t-muted);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.t-tabs__tab:hover { color: var(--t-ink); }
.t-tabs__tab[aria-selected="true"] { border-bottom-color: var(--t-electric); color: var(--t-ink); }
.t-tabs__panel { padding-block: .5rem; }
.t-tabs__panel[hidden] { display: none; }

/* Accordion */
.t-accordion { display: grid; gap: .65rem; }
.t-accordion__item,
.wp-block-details.is-style-tectronis-accordion {
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-md);
  background: var(--t-white);
}
.t-accordion__item > summary,
.wp-block-details.is-style-tectronis-accordion > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  color: var(--t-ink);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.t-accordion__item > summary::-webkit-details-marker,
.wp-block-details.is-style-tectronis-accordion > summary::-webkit-details-marker { display: none; }
.t-accordion__item > summary::after,
.wp-block-details.is-style-tectronis-accordion > summary::after { color: var(--t-electric); content: "+"; font-family: "IBM Plex Mono", monospace; font-size: 1.25rem; }
.t-accordion__item[open] > summary::after,
.wp-block-details.is-style-tectronis-accordion[open] > summary::after { content: "−"; }
.t-accordion__content,
.wp-block-details.is-style-tectronis-accordion > :not(summary) { padding: 0 1rem 1rem; }

/* Empty, error and success states */
.t-state {
  display: grid;
  min-height: 15rem;
  place-items: center;
  align-content: center;
  gap: .7rem;
  border: 1px dashed #afc0cf;
  border-radius: var(--t-radius-lg);
  padding: 2rem;
  background: rgba(255,255,255,.65);
  text-align: center;
}
.t-state__icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 50%; background: var(--t-soft); color: var(--t-electric-hover); font-size: 1.4rem; }
.t-state h2,
.t-state h3 { margin: 0; }
.t-state p { max-width: 34rem; margin: 0; }
.t-state--error { border-color: #efaaa4; background: var(--t-error-soft); }
.t-state--success { border-color: #8bc9b8; background: var(--t-success-soft); }

/* Skeleton/loading state */
.t-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: .4rem;
  background: #dfe8ef;
  color: transparent !important;
  user-select: none;
}
.t-skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.66), transparent);
  content: "";
  transform: translateX(-100%);
  animation: t-shimmer 1.35s ease-in-out infinite;
}
.t-skeleton--text { min-height: .9rem; }
.t-skeleton--title { width: 68%; min-height: 1.4rem; }
.t-skeleton--media { min-height: 12rem; }

/* Light commerce surfaces */
.woocommerce :is(.woocommerce-cart-form,.cart_totals,.woocommerce-checkout-review-order,.woocommerce-form-login,.woocommerce-form-coupon),
:is(.wc-block-cart,.wc-block-checkout) {
  border-color: var(--t-line);
  border-radius: var(--t-radius-lg);
  background: var(--t-white);
  color: var(--t-ink);
}
.woocommerce table.shop_table { overflow: hidden; border-color: var(--t-line); border-radius: var(--t-radius-md); background: var(--t-white); }
.woocommerce table.shop_table th { background: var(--t-soft); color: var(--t-ink); }
.woocommerce .products { color: var(--t-ink); }
.woocommerce ul.products li.product { padding: 1rem; transition: border-color var(--t-ease), box-shadow var(--t-ease), transform var(--t-ease); }
.woocommerce ul.products li.product:hover { border-color: #a9c8de; box-shadow: var(--t-shadow-md); transform: translateY(-3px); }

/* Gutenberg block variants */
.wp-block-image.is-style-tectronis-frame img { border: 1px solid var(--t-line); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow-sm); }
.wp-block-table.is-style-tectronis-table { overflow-x: auto; }
.wp-block-table.is-style-tectronis-table table { border: 1px solid var(--t-line); border-radius: var(--t-radius-md); background: var(--t-white); }
.wp-block-table.is-style-tectronis-table thead { background: var(--t-soft); }

/* Reveal is enabled only when JS is available. */
.t-js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 420ms ease, transform 420ms ease; }
.t-js [data-reveal].is-visible { opacity: 1; transform: none; }

@keyframes t-spin { to { transform: rotate(360deg); } }
@keyframes t-shimmer { to { transform: translateX(100%); } }

@media (max-width: 800px) {
  .t-grid { --t-columns: 2; }
}

@media (max-width: 520px) {
  .t-grid { --t-columns: 1; }
  .t-button:not(.t-button--icon) { width: 100%; }
  .t-modal__footer { flex-direction: column-reverse; }
  .t-modal__footer .t-button { width: 100%; }
  .t-alert { grid-template-columns: auto minmax(0,1fr); }
  .t-alert__dismiss { grid-column: 2; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .t-js [data-reveal] { opacity: 1; transform: none; }
}