/*
 * Shared components, mirroring the helmet CSS of the design mocks
 * (design/shop/*.dc.html) so later screens copy rules instead of re-deriving
 * them. Prefixed tt- to stay clear of WoodMart and WooCommerce class names.
 */

/* --- Surfaces ----------------------------------------------------------- */
.tt-on-green {
  color: var(--tt-on-green);
}

.tt-section {
  padding: var(--tt-section-y-sub) var(--tt-section-x);
}

.tt-section--tight {
  padding-top: clamp(32px, 4vw, 56px);
}

.tt-section--alt {
  background: var(--tt-cream-alt);
}

.tt-section--white {
  background: var(--tt-white);
  border-top: var(--tt-hairline) solid var(--tt-border);
  border-bottom: var(--tt-hairline) solid var(--tt-border);
}

.tt-section--forest {
  background: var(--tt-forest-3);
  color: var(--tt-on-green);
}

.tt-wrap {
  max-width: var(--tt-container);
  margin-inline: auto;
}

.tt-wrap--text {
  max-width: var(--tt-container-text);
  margin-inline: auto;
}

/* --- Section head: kicker + heading left, lede or link right ------------ */
.tt-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.tt-head .tt-lede {
  margin-top: 0;
  max-width: var(--tt-measure-lede-narrow);
}

/* --- Type --------------------------------------------------------------- */
.tt-kicker {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-kicker);
  letter-spacing: var(--tt-tracking-kicker);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--tt-royal);
  margin: 0;
}

.tt-kicker--green,
.tt-on-green .tt-kicker {
  color: var(--tt-sage-1);
}

.tt-h2 {
  font-family: var(--tt-display);
  font-weight: 500;
  font-size: var(--tt-size-title);
  line-height: var(--tt-lh-tight);
  margin: 18px 0 0;
  color: var(--tt-ink);
  text-wrap: balance;
}

.tt-h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--tt-royal);
}

.tt-on-green .tt-h2 {
  color: var(--tt-cream-hi);
}

.tt-on-green .tt-h2 em {
  color: var(--tt-sage-3);
}

.tt-h2--cta {
  font-size: var(--tt-size-title-cta);
  line-height: 1.03;
}

.tt-lede {
  font-family: var(--tt-sans);
  font-weight: 300;
  font-size: var(--tt-size-lede);
  line-height: var(--tt-lh-lede);
  color: var(--tt-ink-2);
  max-width: var(--tt-measure-lede);
  margin: 22px 0 0;
}

.tt-on-green .tt-lede {
  color: var(--tt-on-green);
}

.tt-caption,
.tt-count {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-caption);
  text-transform: uppercase;
  color: var(--tt-ink-3);
  font-weight: 400;
}

.tt-more {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-nav);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--tt-ink-2);
  border-bottom: var(--tt-hairline) solid var(--tt-btn-outline);
  padding-bottom: 6px;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--tt-motion-chip) var(--tt-ease), border-color var(--tt-motion-chip) var(--tt-ease);
}

.tt-more:hover,
.tt-more:focus-visible {
  color: var(--tt-ink);
  border-color: var(--tt-ink);
}

/* --- Pill buttons ------------------------------------------------------- */
.tt-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 15px 32px;
  border-radius: var(--tt-radius-pill);
  font-family: var(--tt-sans);
  font-size: var(--tt-size-button);
  font-weight: 500;
  letter-spacing: var(--tt-tracking-button);
  text-transform: uppercase;
  line-height: 1.2;
  border: var(--tt-hairline) solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--tt-motion-chip) var(--tt-ease), border-color var(--tt-motion-chip) var(--tt-ease), color var(--tt-motion-chip) var(--tt-ease);
}

.tt-pill:hover,
.tt-pill:focus-visible {
  text-decoration: none;
}

.tt-pill--cream {
  background: var(--tt-cream);
  color: var(--tt-ink);
}

.tt-pill--cream:hover,
.tt-pill--cream:focus-visible {
  background: var(--tt-white);
  color: var(--tt-ink);
}

.tt-pill--outline-cream {
  border-color: var(--tt-outline-cream-55);
  color: var(--tt-cream);
}

.tt-pill--outline-cream:hover,
.tt-pill--outline-cream:focus-visible {
  border-color: var(--tt-cream);
  color: var(--tt-cream);
}

.tt-pill--forest {
  background: var(--tt-forest-1);
  color: var(--tt-cream);
}

.tt-pill--forest:hover,
.tt-pill--forest:focus-visible {
  background: var(--tt-forest-3);
  color: var(--tt-cream);
}

.tt-pill--outline {
  border-color: var(--tt-btn-outline);
  color: var(--tt-ink);
}

.tt-pill--outline:hover,
.tt-pill--outline:focus-visible {
  border-color: var(--tt-ink);
  color: var(--tt-ink);
}

.tt-pill--wide {
  padding: 16px 38px;
}

.tt-pill:focus-visible {
  outline: 2px solid var(--tt-royal);
  outline-offset: 3px;
}

.tt-buttons {
  display: flex;
  gap: var(--tt-gap-buttons);
  flex-wrap: wrap;
}

/* --- Filter chips -------------------------------------------------------- */
.tt-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-caption);
  text-transform: uppercase;
  font-weight: 500;
  padding: 11px 22px;
  min-height: var(--tt-tap-target);
  border-radius: var(--tt-radius-pill);
  border: var(--tt-hairline) solid var(--tt-chip-outline);
  color: var(--tt-ink-2);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--tt-motion-chip) var(--tt-ease), color var(--tt-motion-chip) var(--tt-ease), border-color var(--tt-motion-chip) var(--tt-ease);
}

.tt-chip:hover,
.tt-chip:focus-visible {
  border-color: var(--tt-ink-2);
  color: var(--tt-ink-2);
  text-decoration: none;
}

.tt-chip.is-active,
.tt-chip[aria-current] {
  background: var(--tt-forest-1);
  color: var(--tt-cream);
  border-color: var(--tt-forest-1);
}

/* --- Grids --------------------------------------------------------------- */
.tt-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tt-card-min)), 1fr));
  gap: var(--tt-gap-cards);
  margin-top: var(--tt-head-gap);
}

/* --- Info card (Podloge, Detalji štampe) --------------------------------- */
.tt-card {
  background: var(--tt-white);
  border: var(--tt-hairline) solid var(--tt-border);
  display: flex;
  flex-direction: column;
}

.tt-card__img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--tt-cream-alt);
}

.tt-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tt-motion-zoom) var(--tt-ease);
}

.tt-card:hover .tt-card__img img {
  transform: scale(1.05);
}

.tt-card__body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.tt-card--text {
  padding: 28px 32px 32px;
}

.tt-card h4,
.tt-card .tt-card__title {
  font-family: var(--tt-display);
  font-weight: 500;
  font-size: var(--tt-size-card-title-s);
  line-height: 1.1;
  margin: 0;
  color: var(--tt-ink);
}

.tt-card p {
  font-family: var(--tt-sans);
  font-weight: 300;
  font-size: var(--tt-size-body-s);
  line-height: var(--tt-lh-copy);
  color: var(--tt-ink-2);
  margin: 0;
}

.tt-card--text p {
  margin-top: 10px;
}

.tt-card__mono {
  font-family: var(--tt-mono);
  font-size: var(--tt-size-chip);
  letter-spacing: var(--tt-tracking-mono);
  text-transform: uppercase;
  color: var(--tt-ink-3);
  margin: 0 0 14px;
}

.tt-card__foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: var(--tt-hairline) solid var(--tt-rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.tt-card__price {
  font-family: var(--tt-display);
  font-size: var(--tt-size-price-foot);
  color: var(--tt-royal);
}

/* --- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tt-card__img img,
  .tt-pill,
  .tt-chip,
  .tt-more {
    transition: none;
  }

  .tt-card:hover .tt-card__img img {
    transform: none;
  }
}