/* ==========================================================================
   Storefront — katalog, product card, PDP, category view (Phase 5).
   Translated from the Tailwind classes in katalog.tsx / product-card.tsx /
   proizvod/$slug.tsx / category-view.tsx. No hardcoded colors or sizes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: breadcrumb, pills, tables
   -------------------------------------------------------------------------- */
.breadcrumb { font-size: 0.875rem; color: var(--muted-foreground); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb__sep { padding-inline: 0.5rem; }
.breadcrumb__current { color: var(--foreground); }

.pill {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--card);
  padding: 0.5rem 1rem;
  font-size: 0.875rem; font-weight: 500;
  color: var(--muted-foreground);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.pill:hover { color: var(--foreground); }

.table-wrap { margin-top: 0.75rem; overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.spec-table { min-width: 26.25rem; }
.data-table { min-width: 26.25rem; }
.data-table--wide { min-width: 32.5rem; }

.spec-table tr,
.data-table tbody tr { border-bottom: 1px solid var(--border); }
.spec-table tr:last-child,
.data-table tbody tr:last-child { border-bottom: 0; }
.data-table thead tr { border-bottom: 1px solid var(--border); }

.spec-table th {
  width: 50%;
  padding: 0.625rem 1rem 0.625rem 0;
  text-align: left; font-weight: 500;
  color: var(--muted-foreground);
}
.spec-table td { padding-block: 0.625rem; font-weight: 500; color: var(--foreground); }

.data-table th {
  padding: 0.625rem 1rem 0.625rem 0;
  text-align: left; font-weight: 500;
  color: var(--muted-foreground);
}
.data-table th:last-child { padding-right: 0; }
.data-table td { padding: 0.625rem 1rem 0.625rem 0; color: var(--muted-foreground); }
.data-table td:last-child { padding-right: 0; }
.data-table__lead { font-weight: 500; color: var(--foreground); }

.icon--primary { color: var(--primary); }
.icon--star { color: var(--primary); fill: var(--primary); }

/* --------------------------------------------------------------------------
   RUO notice
   -------------------------------------------------------------------------- */
.ruo-notice {
  display: flex; gap: 0.75rem;
  padding: 1.25rem;
  font-size: 0.75rem; line-height: 1.6;
  color: var(--muted-foreground);
}
.ruo-notice__icon { margin-top: 0.125rem; color: var(--primary); }
.ruo-notice__body { min-width: 0; display: grid; gap: 0.5rem; }
.ruo-notice__body strong { color: var(--foreground); }
.ruo-notice--spaced { margin-top: 2rem; }
.ruo-notice--page-end { margin-top: 3rem; }

/* --------------------------------------------------------------------------
   Product grid + card
   -------------------------------------------------------------------------- */
/* The two ways out of /korpa, which is a full page away from browsing because
   this design has no cart drawer (docs/04 §3): an icon-only back arrow and
   "Nastavi kupovinu". */
.cart-nav { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--card);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.back-link--icon { padding: 0.5rem; }

/* Required, not belt-and-braces: `display: inline-flex` above outranks the UA
   stylesheet's `[hidden] { display: none }`, so without this the back arrow
   renders before main.js has decided whether there is anywhere to go back to.
   Same trap as .verify-result in Phase 9. */
.back-link[hidden] { display: none; }

.back-link:hover { color: var(--foreground); border-color: var(--primary); }

.product-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.product-card { display: flex; flex-direction: column; padding: 1.25rem; }
.product-card[hidden] { display: none; }

.product-card__media {
  position: relative;
  display: grid; place-items: center;
  margin-bottom: 1.25rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-image: linear-gradient(to bottom, var(--secondary), var(--card));
}
.product-card__grid {
  position: absolute; inset: 0;
  border-radius: var(--radius-md);
  opacity: 0.6;
}
.product-card__image {
  position: relative;
  height: 100%; width: 100%;
  object-fit: contain;
  padding: 1rem;
  transition: transform 0.3s ease;
}
.product-card__media:hover .product-card__image { transform: scale(1.05); }

.product-card__purity { position: absolute; top: 0.75rem; right: 0.75rem; letter-spacing: 0.08em; }
.product-card__stock { position: absolute; top: 0.75rem; left: 0.75rem; letter-spacing: 0.08em; }
.product-card__stock--out { background-color: var(--destructive); color: var(--destructive-foreground); }

.product-card__eyebrow { letter-spacing: 0.16em; }
.product-card__title {
  margin-top: 0.375rem;
  font-size: 1.125rem; font-weight: 600;
}
.product-card__title a:hover { color: var(--primary); }
.product-card__size { color: var(--muted-foreground); }

.product-card__blurb {
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.875rem; line-height: 1.6;
  color: var(--muted-foreground);
}

.product-card__foot {
  margin-top: auto;
  padding-top: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
}
.product-card__pricing { min-width: 0; }
.product-card__price { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.25rem; }
.product-card__price--ask { font-size: 1.125rem; }
.product-card__price-rsd { display: block; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); }
.product-card__reviews {
  display: flex; align-items: center; gap: 0.25rem;
  padding-top: 0.625rem;
  font-size: 0.75rem; color: var(--muted-foreground);
}
.product-card__cta { flex-shrink: 0; padding: 0.5rem 1rem; }

/* --------------------------------------------------------------------------
   Katalog
   -------------------------------------------------------------------------- */
.katalog__body { padding-block: 2rem; }

.katalog__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.katalog__filters[hidden] { display: none; }

.katalog__search { position: relative; width: 100%; min-width: 14rem; flex: 1 1 auto; }
@media (min-width: 640px) { .katalog__search { width: auto; max-width: 20rem; } }
.katalog__search-icon {
  position: absolute; left: 1rem; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted-foreground);
}
.katalog__search-input { padding: 0.5rem 2.5rem 0.5rem 2.75rem; }
.katalog__search-input::-webkit-search-cancel-button { display: none; }
.katalog__search-clear {
  position: absolute; right: 0.75rem; top: 50%;
  transform: translateY(-50%);
  border-radius: var(--radius-full);
  padding: 0.375rem;
  color: var(--muted-foreground);
}
.katalog__search-clear:hover { color: var(--foreground); }
.katalog__search-clear[hidden] { display: none; }

.katalog__select {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--card);
  padding: 0.5rem 1rem;
  font-size: 0.875rem; font-weight: 500;
  color: var(--muted-foreground);
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.katalog__select:focus { border-color: var(--primary); }
.katalog__select.is-active {
  border-color: var(--primary);
  background-color: var(--primary-soft);
  color: var(--foreground);
}
.katalog__select--sort { color: var(--foreground); }

.katalog__sort { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground); }

.katalog__reset {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--card);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem; font-weight: 500;
  color: var(--muted-foreground);
  transition: color 0.15s ease;
}
.katalog__reset:hover { color: var(--foreground); }
.katalog__reset[hidden] { display: none; }

.katalog__count { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
.katalog__body .product-grid { margin-top: 1rem; }

.katalog__empty { margin-top: 1rem; padding: 2rem; text-align: center; }
.katalog__empty[hidden] { display: none; }
.katalog__empty-text { font-size: 0.875rem; color: var(--muted-foreground); }
.katalog__empty .btn { margin-top: 1rem; padding: 0.625rem 1.5rem; }

.katalog__seo { margin-top: 3rem; display: grid; gap: 1rem; }
@media (min-width: 1024px) { .katalog__seo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.katalog__seo-card { padding: 2rem; }
@media (min-width: 1024px) { .katalog__seo-card--wide { grid-column: span 2; } }
.katalog__seo-title { font-size: 1.5rem; font-weight: 600; }
.katalog__seo-lead { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.katalog__seo-text { margin-top: 1rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.katalog__seo-text--fine { font-size: 0.75rem; }
.katalog__cat-pills { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* --------------------------------------------------------------------------
   Category view
   -------------------------------------------------------------------------- */
.category-view__intro-section { padding-block: 3rem; }
.category-view__intro { margin-top: 2rem; padding: 1.5rem; }
@media (min-width: 640px) { .category-view__intro { padding: 2rem; } }
.category-view__intro-title { font-size: 1.5rem; font-weight: 600; }
.category-view__intro-body { margin-top: 1rem; color: var(--muted-foreground); }

.category-view__guides { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1.25rem; }
.category-view__guides .eyebrow { display: block; margin-bottom: 0.75rem; letter-spacing: 0.16em; }
.category-view__guide-list { display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .category-view__guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.category-view__guide-link {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.875rem; font-weight: 500;
  color: var(--primary);
}
.category-view__guide-link:hover { text-decoration: underline; }

.category-view__products { padding-bottom: 3rem; }
.category-view__section-title { margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600; }
.category-view__products .product-grid { gap: 1.25rem; }

.category-view__faq-section { max-width: 56rem; padding-bottom: 5rem; }
.category-view__faq { display: grid; gap: 1rem; }
.category-view__faq-item { padding: 1.25rem; }
.category-view__faq-q { font-size: 1.125rem; font-weight: 600; }
.category-view__faq-a { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.category-view__links { margin-top: 2rem; font-size: 0.875rem; color: var(--muted-foreground); }
.category-view__links a { font-weight: 500; color: var(--primary); }
.category-view__links a:hover { text-decoration: underline; }
.category-view__links-sep { padding-inline: 0.5rem; }

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */
.product { padding-top: 2.5rem; padding-bottom: 3rem; }

.product__top { margin-top: 1.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .product__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.product__media { display: grid; place-items: center; padding: 1.5rem; }
.product__media-grid { position: absolute; inset: 0; opacity: 0.6; }
.product__image { position: relative; max-height: 26.25rem; width: 100%; object-fit: contain; }

.product__info { padding: 1.5rem; }
@media (min-width: 640px) { .product__info { padding: 2rem; } }
.product__title {
  margin-top: 0.5rem;
  font-size: 1.875rem; font-weight: 600;
  letter-spacing: -0.025em;
}
@media (min-width: 640px) { .product__title { font-size: 2.25rem; } }
.product__size { color: var(--muted-foreground); }
.product__meta {
  margin-top: 0.75rem;
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: var(--muted-foreground);
}
.product__price { margin-top: 1.25rem; font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; }
.product__price-rsd { font-size: 1.125rem; font-weight: 500; color: var(--muted-foreground); }
.product__payment-note { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.product__payment-note strong { color: var(--foreground); }

.product__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.product__actions .btn { padding: 0.75rem 1.5rem; }
.product__cart-form { margin: 0; }
.product__sold-out { color: var(--muted-foreground); cursor: default; }

.product__lab {
  margin-top: 1.5rem;
  display: grid; gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background-color: var(--muted);
  padding: 1.25rem;
}
@media (min-width: 640px) {
  .product__lab { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
}
.product__lab-logo { height: 2.5rem; width: 2.5rem; border-radius: var(--radius-full); object-fit: contain; }
.product__lab-body { min-width: 0; }
.product__lab-title { font-size: 0.875rem; font-weight: 600; }
.product__lab-meta { font-size: 0.75rem; color: var(--muted-foreground); }
.product__lab-meta a { font-weight: 600; color: var(--foreground); }
.product__lab-meta a:hover { color: var(--primary); }
.product__lab-cta { padding: 0.5rem 1rem; }

.product__trust {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: grid; gap: 0.75rem;
  font-size: 0.875rem; color: var(--muted-foreground);
}
@media (min-width: 640px) { .product__trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.product__trust li { display: flex; align-items: center; gap: 0.5rem; }
.product__ruo-micro { margin-top: 1rem; font-size: 0.75rem; color: var(--muted-foreground); }

.product__section { margin-top: 1.5rem; padding: 1.5rem; }
@media (min-width: 640px) { .product__section { padding: 2rem; } }
.product__section-title { font-size: 1.5rem; font-weight: 600; }
.product__sub-title { margin-top: 1.5rem; font-size: 1.125rem; font-weight: 600; }
.product__sub-title--spaced { margin-top: 2rem; }
.product__description { margin-top: 1rem; max-width: 48rem; }
.product__note { margin-top: 0.5rem; max-width: 48rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.product__note--link { margin-top: 1rem; }
.product__note--link a { font-weight: 500; color: var(--primary); }
.product__note--link a:hover { text-decoration: underline; }

.product__guides { margin-top: 1rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .product__guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.product__guides a { font-size: 0.875rem; font-weight: 500; color: var(--primary); }
.product__guides a:hover { text-decoration: underline; }

.product__refs { margin-top: 1rem; display: grid; gap: 0.625rem; font-size: 0.875rem; }
@media (min-width: 640px) { .product__refs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.product__refs li { display: flex; gap: 0.5rem; }
.product__refs .icon { margin-top: 0.125rem; }
.product__refs a { color: var(--muted-foreground); }
.product__refs a:hover { color: var(--primary); }
.product__ref-source { display: block; font-size: 0.75rem; opacity: 0.7; }

.product__related { margin-top: 3rem; }
.product-grid--related { margin-top: 1.5rem; }
@media (min-width: 1024px) { .product-grid--related { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   Prose blocks — imported product descriptions (extractor HTML)
   -------------------------------------------------------------------------- */
.prose-blocks { font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
.prose-blocks > * + * { margin-top: 1rem; }
.prose-blocks strong { color: var(--foreground); }
.prose-blocks a { color: var(--primary); }
.prose-blocks a:hover { text-decoration: underline; }
.prose-blocks h3 {
  margin-top: 1.5rem;
  font-size: 1.125rem; font-weight: 600;
  color: var(--foreground);
}
@media (min-width: 640px) { .prose-blocks h3 { font-size: 1.25rem; } }
.prose-blocks h4 {
  margin-top: 1.25rem;
  font-size: 1rem; font-weight: 600;
  color: var(--foreground);
}
.prose-blocks ul, .prose-blocks ol { display: grid; gap: 0.5rem; padding-left: 0.25rem; }
.prose-blocks ul li { position: relative; padding-left: 1rem; }
.prose-blocks ul li::before {
  content: "";
  position: absolute; left: 0; top: 0.6875rem;
  width: 0.375rem; height: 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--primary);
}
.prose-blocks ol { counter-reset: peptidi-ol; }
.prose-blocks ol li { position: relative; padding-left: 1.5rem; counter-increment: peptidi-ol; }
.prose-blocks ol li::before {
  content: counter(peptidi-ol) ".";
  position: absolute; left: 0;
  font-weight: 600;
  color: var(--primary);
}
.prose-blocks table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.prose-blocks thead tr,
.prose-blocks tbody tr { border-bottom: 1px solid var(--border); }
.prose-blocks tbody tr:last-child { border-bottom: 0; }
.prose-blocks th {
  padding: 0.625rem 1rem 0.625rem 0;
  text-align: left; font-weight: 500;
  color: var(--muted-foreground);
}
.prose-blocks td { padding: 0.625rem 1rem 0.625rem 0; }
.prose-blocks blockquote {
  border-left: 2px solid var(--primary);
  padding-left: 1rem;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   WooCommerce notices (add-to-cart feedback until Phase 6 makes it AJAX)
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin: 0 0 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-xl);
  background-color: var(--card);
  box-shadow: var(--shadow-soft);
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
}
.woocommerce-error { border-left-color: var(--destructive); }
.woocommerce-message .button,
.woocommerce-info .button {
  order: 2;
  border-radius: var(--radius-full);
  background-color: var(--ink); color: var(--ink-foreground);
  padding: 0.375rem 1rem;
  font-size: 0.8125rem; font-weight: 600;
}

/* --------------------------------------------------------------------------
   Shared: page intro, notice cards, order totals, quantity stepper, notices
   Used by /korpa, /naplata and the order-received screen (Phase 6).
   -------------------------------------------------------------------------- */
.page-intro__title { margin-top: 0.75rem; font-size: 1.875rem; font-weight: 600; }
@media (min-width: 640px) { .page-intro__title { font-size: 2.25rem; } }
.page-intro__lead {
  margin-top: 0.5rem;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.notice-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--primary);
  background-color: var(--primary-soft);
  padding: 1rem;
}
.notice-card__icon { margin-top: 0.125rem; color: var(--primary); }
.notice-card__text { font-size: 0.875rem; line-height: 1.65; }

.order-totals { margin-top: 1.25rem; display: grid; gap: 0.75rem; font-size: 0.875rem; }
.order-totals__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.order-totals__label { color: var(--muted-foreground); }
.order-totals__value { font-weight: 500; }
.order-totals__row--discount { color: var(--primary); }
.order-totals__row--discount .order-totals__label { color: inherit; }
.order-totals__remove {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-decoration: underline;
}
.order-totals__remove:hover { color: var(--foreground); }
.order-totals__note { font-size: 0.75rem; line-height: 1.65; color: var(--muted-foreground); }
.order-totals__row--total { border-top: 1px solid var(--border); padding-top: 0.75rem; }
.order-totals__row--total .order-totals__label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
}
.order-totals__grand { text-align: right; }
.order-totals__grand-eur {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}
.order-totals__grand-rsd { display: block; font-size: 0.875rem; color: var(--muted-foreground); }

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background-color: var(--card);
}
.qty-stepper__btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  color: var(--muted-foreground);
}
.qty-stepper__btn:hover { color: var(--foreground); }
.qty-stepper__value {
  width: 2.25rem;
  border: 0;
  background: none;
  padding: 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-stepper__value::-webkit-outer-spin-button,
.qty-stepper__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper--sm .qty-stepper__btn { width: 1.75rem; height: 1.75rem; }
.qty-stepper--sm .qty-stepper__value { width: 1.75rem; font-size: 0.75rem; }

.trust-list { margin-top: 1.5rem; display: grid; gap: 0.5rem; font-size: 0.75rem; color: var(--muted-foreground); }
.trust-list__item { display: flex; align-items: center; gap: 0.5rem; }

/* WooCommerce notices — the only markup on these pages we do not author. */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin-bottom: 1rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 0.875rem 1.125rem;
  font-size: 0.875rem;
  line-height: 1.6;
  list-style: none;
}
.woocommerce-message { border-color: var(--primary); background-color: var(--primary-soft); }
.woocommerce-info { border-color: var(--border); background-color: var(--secondary); }
.woocommerce-error { border-color: var(--destructive); background-color: oklch(0.577 0.245 27.325 / 0.08); }
.woocommerce-error li + li { margin-top: 0.375rem; }
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a { font-weight: 600; color: var(--primary); text-decoration: underline; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: 0.5rem; font-weight: 600; text-decoration: underline; }

/* --------------------------------------------------------------------------
   /korpa (korpa.tsx)
   -------------------------------------------------------------------------- */
.cart-page { padding-block: 3rem; }
.cart-page__body { margin-top: 2rem; }
.cart-page__body.is-busy { opacity: 0.55; pointer-events: none; }

.cart-page__grid { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1024px) { .cart-page__grid { grid-template-columns: minmax(0, 1fr) 22.5rem; } }

.cart-items { padding: 0.5rem; }
@media (min-width: 640px) { .cart-items { padding: 1rem; } }

.cart-progress { border-bottom: 1px solid var(--border); padding: 0.5rem 0.75rem 1rem; }
.cart-progress__text { font-size: 0.875rem; color: var(--muted-foreground); }
.cart-progress__text strong { color: var(--foreground); font-weight: 600; }
.cart-progress__track {
  margin-top: 0.75rem;
  height: 0.5rem;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-full);
  background-color: var(--secondary);
}
.cart-progress__bar {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  width: var(--cart-progress, 0%);
  transition: width 0.5s ease;
}

.cart-items__list > .cart-row + .cart-row { border-top: 1px solid var(--border); }
.cart-items__update { padding: 0.75rem; }

.cart-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem;
}
@media (min-width: 640px) {
  .cart-row { grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; }
}
.cart-row__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-image: linear-gradient(to bottom, var(--secondary), var(--card));
}
.cart-row__image { height: 100%; width: 100%; object-fit: contain; padding: 0.5rem; }
.cart-row__body { min-width: 0; }
.cart-row__eyebrow { letter-spacing: 0.16em; }
.cart-row__title { margin-top: 0.125rem; font-size: 1rem; font-weight: 600; }
.cart-row__title a:hover { color: var(--primary); }
.cart-row__size { color: var(--muted-foreground); }
.cart-row__meta { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
.cart-row__actions { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.75rem; }
.cart-row__remove {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.cart-row__remove:hover { color: var(--foreground); }
.cart-row__price {
  grid-column: span 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}
@media (min-width: 640px) {
  .cart-row__price { grid-column: span 1; display: block; border-top: 0; padding-top: 0; text-align: right; }
}
.cart-row__price-eur { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.cart-row__price-rsd { display: block; font-size: 0.875rem; color: var(--muted-foreground); }

.cart-summary { padding: 1.5rem; }
.cart-summary__title { font-size: 1.25rem; font-weight: 600; }
.cart-summary__cta { display: flex; width: 100%; margin-top: 0.5rem; padding-block: 0.75rem; }
.cart-summary__cta:first-of-type { margin-top: 1.5rem; }
.cart-summary__cta--muted { color: var(--muted-foreground); }
.cart-summary__cta--muted:hover { color: var(--foreground); }

.cart-coupon { margin-top: 1.25rem; }
.cart-coupon__label,
.checkout-coupon__toggle {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-foreground);
}
.cart-coupon__row { margin-top: 0.5rem; display: flex; gap: 0.5rem; }
.cart-coupon__field,
.checkout-coupon__field { position: relative; flex: 1 1 auto; min-width: 0; }
.cart-coupon__icon,
.checkout-coupon__icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted-foreground);
}
.cart-coupon__input,
.checkout-coupon__input { padding: 0.5rem 0.75rem 0.5rem 2.5rem; }
.cart-coupon__submit,
.checkout-coupon__submit { flex-shrink: 0; padding-inline: 1rem; }
.cart-coupon__submit:hover,
.checkout-coupon__submit:hover { color: var(--primary); }

.cart-empty { padding: 2.5rem; text-align: center; }
.cart-empty__icon { margin-inline: auto; color: var(--muted-foreground); }
.cart-empty__text { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-foreground); }
.cart-empty__cta { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   /naplata (naplata.tsx)
   -------------------------------------------------------------------------- */
.checkout-page { padding-block: 3rem; }
.checkout-page__notices:empty { display: none; }
.checkout-page__grid { margin-top: 2rem; display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1024px) { .checkout-page__grid { grid-template-columns: minmax(0, 1fr) 26.25rem; } }
.checkout-page__main { display: grid; gap: 1rem; align-content: start; }

.checkout-card { padding: 1.5rem; overflow: visible; }
.checkout-card__title { font-size: 1.25rem; font-weight: 600; }

.checkout-fields { margin-top: 1.25rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .checkout-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checkout-fields--notes { margin-top: 1.25rem; }
.checkout-fields__note { font-size: 0.75rem; color: var(--muted-foreground); }
.checkout-fields__note,
.checkout-fields__account,
.peptidi-field--wide,
.checkout-optional { grid-column: 1 / -1; }

.peptidi-field { min-width: 0; }
.peptidi-field label,
.checkout-fields label:not(.checkbox):not(.checkout-checkbox):not(.sr-only) {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.peptidi-field .woocommerce-input-wrapper { display: block; }
.checkout-fields .input-text,
.checkout-fields select,
.checkout-fields textarea {
  margin-top: 0.375rem;
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--radius-xl);
  background-color: var(--card);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.checkout-fields .input-text:focus,
.checkout-fields select:focus,
.checkout-fields textarea:focus { border-color: var(--primary); }
.checkout-fields textarea { min-height: 5.5rem; resize: vertical; }
.checkout-fields abbr.required { border: 0; color: var(--destructive); text-decoration: none; }
.checkout-fields .woocommerce-invalid .input-text,
.checkout-fields .woocommerce-invalid select { border-color: var(--destructive); }

.peptidi-field__error { display: block; margin-top: 0.375rem; font-size: 0.75rem; color: var(--destructive); }
.peptidi-field__error[hidden] { display: none; }

.checkout-optional__toggle {
  justify-self: start;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}
.checkout-optional__toggle:hover { text-decoration: underline; }
.checkout-optional__toggle[hidden],
.checkout-optional__field[hidden] { display: none; }

.checkout-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}
.checkout-checkbox .input-checkbox {
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--primary);
}
.checkout-checkbox a { font-weight: 600; color: var(--primary); text-decoration: underline; }
.woocommerce-account-fields .create-account { margin-top: 0.75rem; }

.payment-methods { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.payment-method__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.payment-method__card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.payment-method__card:hover { border-color: var(--primary); }
.payment-method__input:checked + .payment-method__card { border-color: var(--primary); background-color: var(--primary-soft); }
.payment-method__input:focus-visible + .payment-method__card { outline: 2px solid var(--ring); outline-offset: 2px; }
.payment-method__icon { margin-top: 0.125rem; color: var(--primary); }
.payment-method__body { min-width: 0; }
.payment-method__title { display: block; font-weight: 600; }
.payment-method__desc { margin-top: 0.25rem; display: block; font-size: 0.75rem; color: var(--muted-foreground); }
.payment-methods__noscript { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-foreground); }

.payment-panel { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.payment-panel[hidden] { display: none; }
.payment-steps { display: grid; gap: 1rem; }
.payment-steps__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.payment-steps__num {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--primary-soft);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}
.payment-steps__text { font-size: 0.875rem; line-height: 1.65; color: var(--muted-foreground); }
.payment-steps__text strong { color: var(--foreground); font-weight: 600; }

.checkout-warning {
  margin-top: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--secondary);
  padding: 0.75rem;
}
.checkout-warning__text { font-size: 0.75rem; line-height: 1.65; color: var(--muted-foreground); }
.checkout-warning__text strong { color: var(--foreground); font-weight: 600; }
.checkout-warning__text a { font-weight: 600; color: var(--primary); text-decoration: underline; }

.checkout-summary { padding: 1.5rem; overflow: visible; }
@media (min-width: 1024px) { .checkout-page__aside { position: sticky; top: 6rem; } }

.checkout-review__items { margin-top: 1.25rem; }
.checkout-review__item { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.75rem; }
.checkout-review__item + .checkout-review__item { border-top: 1px solid var(--border); }
.checkout-review__media {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--secondary);
}
.checkout-review__media img { height: 100%; width: 100%; object-fit: contain; padding: 0.25rem; }
.checkout-review__body { min-width: 0; flex: 1 1 auto; }
.checkout-review__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
}
.checkout-review__body .qty-stepper { margin-top: 0.375rem; }
.checkout-review__price { font-size: 0.875rem; font-weight: 600; }

.checkout-coupon { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.checkout-coupon__toggle { letter-spacing: normal; text-transform: none; font-size: 0.875rem; color: var(--primary); }
.checkout-coupon__toggle:hover { text-decoration: underline; }
.checkout-coupon__toggle[hidden] { display: none; }
.checkout-coupon__form { display: flex; gap: 0.5rem; }
.checkout-coupon__form[hidden] { display: none; }

.checkout-review .order-totals { border-top: 1px solid var(--border); padding-top: 1rem; }
.checkout-terms { margin-top: 1.25rem; }
.checkout-terms .checkout-checkbox { font-size: 0.75rem; }
.checkout-review__submit { display: flex; width: 100%; margin-top: 1.25rem; padding-block: 0.75rem; }
.checkout-review__ruo {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* WooCommerce's own login / register forms — plugin markup, kept in the design's
   clothes. The checkout login reminder uses them, and so does /nalog until
   Phase 7 replaces that page outright. */
.woocommerce-form {
  margin-bottom: 1rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.5rem;
}
.woocommerce-form .form-row + .form-row { margin-top: 0.75rem; }
.woocommerce-form label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.woocommerce-form .input-text {
  margin-top: 0.375rem;
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--radius-xl);
  background-color: var(--card);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
}
.woocommerce-form .button {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  background-color: var(--ink);
  color: var(--ink-foreground);
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.woocommerce-form .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 0.5rem; }
.woocommerce-form .lost_password { margin-top: 0.75rem; font-size: 0.875rem; }
.woocommerce-form .lost_password a { color: var(--primary); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Order received
   -------------------------------------------------------------------------- */
.order-received { padding-block: 3rem; }
.order-received__card { margin-top: 2rem; padding: 1.5rem; }
.order-received__lead { font-size: 0.875rem; line-height: 1.65; color: var(--muted-foreground); }
.order-received__lead strong { color: var(--foreground); }
.order-received__actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.order-received__facts {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
@media (min-width: 640px) { .order-received__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.order-received__fact .eyebrow { display: block; margin-bottom: 0.25rem; letter-spacing: 0.16em; }
.order-received__fact strong { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.order-received__rsd { display: block; font-size: 0.75rem; color: var(--muted-foreground); }
.order-received__instructions { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.65; color: var(--muted-foreground); }
.order-received__instructions p + p { margin-top: 0.75rem; }

.order-received .woocommerce-order-details,
.order-received .woocommerce-customer-details { margin-top: 2rem; }
.order-received .woocommerce-order-details__title,
.order-received .woocommerce-column__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.order-received .woocommerce-table--order-details,
.order-received .woocommerce-table--order-details th,
.order-received .woocommerce-table--order-details td { text-align: left; }
.order-received .woocommerce-table--order-details {
  margin-top: 1rem;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.order-received .woocommerce-table--order-details th,
.order-received .woocommerce-table--order-details td {
  border-bottom: 1px solid var(--border);
  padding: 0.625rem 1rem 0.625rem 0;
}
.order-received .woocommerce-table--order-details tfoot th { color: var(--muted-foreground); font-weight: 500; }
.order-received address { margin-top: 0.75rem; font-style: normal; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }

.woocommerce-form .woocommerce-privacy-policy-text,
.woocommerce-form .woocommerce-form-register__email-text {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.woocommerce-form .woocommerce-privacy-policy-text a { color: var(--primary); text-decoration: underline; }
.woocommerce-form .button { margin-top: 1rem; }

.u-columns { display: grid; gap: 1rem; }
@media (min-width: 768px) { .u-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.u-column1 > h2, .u-column2 > h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; }

/* --------------------------------------------------------------------------
   Loyalty redemption box (peptidi-loyalty plugin, checkout order summary)
   -------------------------------------------------------------------------- */
.loyalty-redeem { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.loyalty-redeem__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-foreground);
}
.loyalty-redeem__balance { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.loyalty-redeem__balance strong { color: var(--foreground); }
.loyalty-redeem__select {
  margin-top: 0.5rem;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--card);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  outline: none;
}
.loyalty-redeem__select:focus { border-color: var(--primary); }
.loyalty-redeem__note { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.6; color: var(--muted-foreground); }

/* --------------------------------------------------------------------------
   /nalog — login + registration (nalog.tsx)
   -------------------------------------------------------------------------- */
.account-page { max-width: 64rem; padding-block: 3rem; }
@media (min-width: 1024px) { .account-page { padding-block: 4rem; } }
.account-page__notices:empty { display: none; }
.account-page__grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .account-page__grid { grid-template-columns: minmax(0, 1fr) 23.75rem; } }

.account-page__title { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; }
.account-page__lead {
  margin-top: 0.5rem;
  max-width: 36rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.account-tabs {
  margin-top: 1.5rem;
  display: inline-flex;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 0.25rem;
}
.account-tabs__pill {
  border-radius: var(--radius-full);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.account-tabs__pill:hover { color: var(--foreground); }
.account-tabs__pill.is-active { background-color: var(--primary); color: var(--primary-foreground); }

.account-benefits {
  margin-top: 1.5rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--primary-soft);
  background-color: var(--primary-soft);
  padding: 1.25rem;
}
@media (min-width: 640px) { .account-benefits { padding: 1.5rem; } }
.account-benefits[hidden] { display: none; }
.account-benefits__title { font-size: 1rem; font-weight: 600; }
.account-benefits__list { margin-top: 1rem; display: grid; gap: 0.75rem; font-size: 0.875rem; }
@media (min-width: 640px) { .account-benefits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.account-benefits__item { display: flex; gap: 0.75rem; }
.account-benefits__icon { margin-top: 0.125rem; color: var(--primary); }
.account-benefits__label { display: block; font-weight: 600; }
.account-benefits__text { color: var(--muted-foreground); }

.account-form {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.25rem;
}
@media (min-width: 640px) { .account-form { padding: 1.5rem; } }
.account-form[hidden] { display: none; }
.account-form__row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .account-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.account-field { display: grid; gap: 0.375rem; }
.account-field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}
.account-field .input { width: 100%; }
.account-field__hint { font-size: 0.75rem; line-height: 1.5; color: var(--muted-foreground); }
.account-field__hint[hidden] { display: none; }
.account-field__error { font-size: 0.75rem; font-weight: 500; color: var(--destructive); }
.account-field__error[hidden] { display: none; }
.account-field [aria-invalid="true"] { border-color: var(--destructive); }

.account-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.account-remember { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); }
.account-remember .input-checkbox { width: 1rem; height: 1rem; accent-color: var(--primary); }
.account-form__link { font-weight: 500; color: var(--primary); }
.account-form__link:hover { text-decoration: underline; }
.account-form__submit { margin-top: 0.25rem; justify-content: center; padding-block: 0.75rem; }

.account-aside {
  height: fit-content;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--primary-soft);
  padding: 1.5rem;
}
.account-aside__title { font-size: 1.125rem; font-weight: 600; }
.account-aside__list { margin-top: 1rem; display: grid; gap: 1rem; font-size: 0.875rem; line-height: 1.6; }
.account-aside__item { display: flex; gap: 0.75rem; }
.account-aside__icon { margin-top: 0.125rem; color: var(--primary); }

/* --------------------------------------------------------------------------
   /profil — the loyalty dashboard (profil.tsx)
   -------------------------------------------------------------------------- */
.profil-page { max-width: 64rem; padding-block: 2.5rem; }
@media (min-width: 1024px) { .profil-page { padding-block: 3.5rem; } }
.profil-page__notices:empty { display: none; }

.profil-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.profil-head__title { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; }
.profil-head__email { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.profil-head__logout { gap: 0.5rem; }

.profil-stats { margin-top: 2rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .profil-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.profil-stat {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.25rem;
}
.profil-stat--accent { background-color: var(--primary-soft); }
.profil-stat__value { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; }
.profil-stat__label { font-size: 0.875rem; color: var(--muted-foreground); }

.profil-progress {
  margin-top: 1rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.25rem;
}
.profil-progress__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.profil-progress__lead { font-size: 0.875rem; font-weight: 600; }
.profil-progress__rule { font-size: 0.75rem; color: var(--muted-foreground); }
.profil-progress__track {
  margin-top: 0.75rem;
  height: 0.5rem;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-full);
  background-color: var(--secondary);
}
.profil-progress__bar {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  width: var(--peptidi-progress, 0%);
  transition: width 0.5s ease;
}

.profil-tiers { margin-top: 1rem; display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .profil-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.profil-tier {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--background);
  padding: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.profil-tier.is-current { border-color: var(--primary); background-color: var(--primary-soft); }
.profil-tier__name { font-weight: 600; color: var(--foreground); }
.profil-tier__perk { margin-top: 0.25rem; }

.profil-page__grid { margin-top: 2rem; display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) { .profil-page__grid { grid-template-columns: minmax(0, 1fr) 22.5rem; } }

.profil-form {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.25rem;
}
@media (min-width: 640px) { .profil-form { padding: 1.5rem; } }
.profil-form__title { font-size: 1.125rem; font-weight: 600; }
.profil-form__fields { margin-top: 1rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .profil-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.account-field--wide { grid-column: 1 / -1; }
.profil-form__submit { margin-top: 1.25rem; padding-block: 0.75rem; }
.profil-form__note { margin-top: 0.75rem; font-size: 0.75rem; color: var(--muted-foreground); }
.profil-form__note a { color: var(--primary); text-decoration: underline; }

.profil-side { display: grid; gap: 1rem; align-content: start; }
.profil-history,
.profil-links {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.25rem;
}
@media (min-width: 640px) { .profil-history { padding: 1.5rem; } }
.profil-history__title,
.profil-links__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}
.profil-history__list { margin-top: 1rem; display: grid; gap: 0.75rem; }
.profil-history__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}
.profil-history__item:last-child { border-bottom: 0; padding-bottom: 0; }
.profil-history__desc { font-size: 0.875rem; font-weight: 500; }
.profil-history__date { margin-top: 0.125rem; font-size: 0.75rem; color: var(--muted-foreground); }
.profil-history__points { flex-shrink: 0; font-size: 0.875rem; font-weight: 600; }
.profil-history__points.is-positive { color: var(--primary); }
.profil-history__points.is-negative { color: var(--destructive); }
.profil-history__empty { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-foreground); }

.profil-links__list { margin-top: 1rem; display: grid; gap: 0.5rem; font-size: 0.875rem; }
.profil-links__list a { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); }
.profil-links__list a:hover { color: var(--foreground); }

/* --------------------------------------------------------------------------
   WooCommerce's own account endpoints (orders, addresses, account details)
   -------------------------------------------------------------------------- */
.account-endpoint { padding-block: 3rem; }
.account-endpoint__grid { margin-top: 2rem; display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .account-endpoint__grid { grid-template-columns: 14rem minmax(0, 1fr); } }

.account-nav__list { display: grid; gap: 0.25rem; }
.account-nav__link {
  display: block;
  border-radius: var(--radius-full);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.account-nav__link:hover { background-color: var(--secondary); color: var(--foreground); }
.account-nav__item.is-active > .account-nav__link { background-color: var(--primary-soft); color: var(--accent-foreground); }

.account-endpoint__content { min-width: 0; font-size: 0.875rem; line-height: 1.65; }
.account-endpoint__content h2,
.account-endpoint__content h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; }
.account-endpoint__content p { margin-bottom: 0.75rem; }
.account-endpoint__content a { color: var(--primary); }
.account-endpoint__content a:hover { text-decoration: underline; }

.woocommerce-orders-table,
.woocommerce-table--order-details,
.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
}
.woocommerce-orders-table th,
.woocommerce-orders-table td,
.shop_table th,
.shop_table td {
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1rem 0.75rem 0;
}
.woocommerce-orders-table th { font-weight: 600; color: var(--muted-foreground); }
.woocommerce-orders-table .button,
.account-endpoint__content .button,
.account-endpoint__content button[type="submit"] {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  background-color: var(--ink);
  color: var(--ink-foreground);
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.woocommerce-orders-table .button:hover,
.account-endpoint__content .button:hover { opacity: 0.9; }
.account-endpoint__content .woocommerce-Address { margin-bottom: 1.5rem; }
.account-endpoint__content address { font-style: normal; line-height: 1.7; color: var(--muted-foreground); }
.account-endpoint__content .woocommerce-Addresses { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .account-endpoint__content .woocommerce-Addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.account-endpoint__content .form-row { margin-bottom: 0.875rem; }
.account-endpoint__content label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.account-endpoint__content .input-text,
.account-endpoint__content select {
  margin-top: 0.375rem;
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--radius-xl);
  background-color: var(--card);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
}
.account-endpoint__content fieldset { border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1rem; margin-block: 1rem; }
.account-endpoint__content legend { padding-inline: 0.5rem; font-weight: 600; }