/* Botões */
.tl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 16px; }
.tl-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; text-decoration: none; }
.tl-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.tl-btn--primary { min-width: 260px; height: 58px; padding: var(--space-btn-y) var(--space-btn-x); background: var(--paper); color: var(--ink); border: var(--border-button) solid var(--ink); border-radius: var(--radius-pill); font: 400 20px/30px var(--font-display); text-transform: uppercase; }
.tl-btn--primary:hover { background: var(--ink); color: var(--paper); }
.tl-btn--compact { height: 43px; padding: var(--space-btn-compact-y) var(--space-btn-compact-x); background: var(--ink); color: var(--paper); border: 0; border-radius: var(--radius-button-compact); font: 400 18px/23.4px var(--font-condensed); }
.tl-btn--hero { width: 110px; height: 40px; background: var(--paper); color: var(--ink); border: var(--border-button) solid var(--ink); border-radius: var(--radius-pill); box-shadow: var(--shadow-hard); font: 400 15px/21px var(--font-display); text-transform: uppercase; }

/* Cabeçalho */
.tl-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--space-header); padding: 0 var(--space-gutter); background: var(--chilli-red); color: var(--ink); box-sizing: border-box; }
.tl-wordmark { font: 400 20px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; line-height: .95; }
.tl-nav { display: flex; gap: 22px; align-items: center; }
.tl-nav a { color: var(--ink); text-decoration: none; font: 400 18px/22.5px var(--font-condensed); text-transform: uppercase; }
.tl-nav a:hover { text-decoration: underline; }
.tl-cart { position: relative; width: 22px; height: 26px; }
.tl-cart span { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font: 400 10px/1 var(--font-ui); color: var(--paper); }

/* Cartão de produto */
.tl-card { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 234px; text-align: center; }
.tl-card__media { width: 234px; height: 234px; border-radius: var(--radius-media); background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; overflow: hidden; font: 400 14px/1.3 var(--font-ui); }
.tl-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tl-card__title { font: 600 16px/20px var(--font-product); margin: 8px 0 0; }
.tl-card__price { font: 400 16px/24px var(--font-ui); margin: 0 0 12px; }

/* Seletor de quantidade */
.tl-qty { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.tl-qty__label { font: 400 14px/14px var(--font-ui); }
.tl-qty__ctrl { display: flex; align-items: center; gap: 0; }
.tl-qty__btn { width: 40px; height: 40px; border-radius: var(--radius-pill); border: var(--border-stepper) solid var(--mist); background: transparent; color: var(--ink); font: 300 26px/1 var(--font-ui); cursor: pointer; }
.tl-qty__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.tl-qty__val { width: 40px; text-align: center; font: 400 16px/25.6px var(--font-condensed); }

/* Breadcrumb */
.tl-crumbs { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; font: 400 16px/24px var(--font-ui); }
.tl-crumbs ol { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.tl-crumbs a { color: var(--ink); text-decoration: none; }
.tl-crumbs .sep { color: var(--chilli-red); }
.tl-crumbs [aria-current] { color: var(--chilli-red); }
.tl-pager { display: flex; gap: 10px; color: var(--muted); }
.tl-pager i { width: 3px; background: var(--chilli-red); align-self: stretch; }

/* Rodapé */
.tl-footer { background: var(--chilli-red); color: var(--ink); padding: 32px var(--space-gutter); display: grid; gap: 40px; }
.tl-footer__links { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 116px; row-gap: 8px; }
.tl-footer__links a { color: var(--ink); text-decoration: underline; font: 400 18px/22.5px var(--font-condensed); text-transform: uppercase; }
.tl-footer__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.tl-footer__legal { font: 400 15px/24px var(--font-display); }