/* ============================================
   TEEZZY — Components
   ============================================ */

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .9rem 2rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover{ background: var(--color-accent-hover); transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(0,0,0,.35); }
.btn-secondary{ background: var(--color-primary); color:#fff; }
.btn-secondary:hover{ background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(0,0,0,.35); }
.btn-outline{ border-color: var(--color-border-strong); color: var(--color-text); }
.btn-outline:hover{ border-color: var(--color-text); transform: translateY(-2px); }
.btn-ghost{ color: var(--color-accent); padding: .5rem 0; position:relative; }
.btn-ghost::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .3s ease;
}
.btn-ghost:hover::after{ transform: scaleX(1); transform-origin: left; }
.btn-block{ width:100%; }
.btn-sm{ padding:.55rem 1.1rem; font-size:.7rem; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn:active{ transform: translateY(0); }

/* ---------- Cards ---------- */
.card{
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.35);
  border-color: var(--color-border-strong);
}
@media (max-width:560px){ .card{ padding:1.35rem; } }

/* ---------- Product Card ---------- */
.product-card{ position:relative; }
.product-card__img-wrap{
  position:relative;
  aspect-ratio: 3/4;
  background: var(--color-bg-alt);
  overflow:hidden;
  margin-bottom: .9rem;
}
.product-card__img-wrap img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.product-card:hover .product-card__img-wrap img{ transform: scale(1.06); }
.product-card__wishlist{
  position:absolute; top:.75rem; right:.75rem;
  width:34px; height:34px; border-radius:50%;
  background: rgba(11,20,32,.55); backdrop-filter: blur(4px);
  border:none; color:#fff; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}
.product-card__wishlist.is-active{ color: var(--color-accent); }

/* ---------- Wishlist heart: outline vs filled ----------
   Every wishlist-toggle button renders both a fa-regular (outline) and a
   fa-solid (filled) heart on top of each other; only one shows at a time,
   switched purely by whether the button carries .is-active - the same
   class wishlist.js already toggles on click, no JS changes needed. */
[data-wishlist-toggle] .wishlist-icon-filled{ display:none; }
[data-wishlist-toggle].is-active .wishlist-icon-filled{ display:inline-block; }
[data-wishlist-toggle].is-active .wishlist-icon-outline{ display:none; }
.product-card__badge{
  position:absolute; top:.75rem; left:.75rem;
  background: var(--color-primary); color:#fff;
  font-size: .65rem; letter-spacing:.08em; text-transform:uppercase;
  padding: .3rem .6rem;
}
.product-card__name{ font-size: .95rem; margin-bottom:.25rem; }
.product-card__price{ color: var(--color-accent); font-size:.9rem; }
.product-card__price .was{ color: var(--color-text-faint); text-decoration: line-through; margin-right:.5rem; font-size:.8rem; }
.product-price .was{ color: var(--color-text-muted); text-decoration: line-through; margin-right:.75rem; font-size:1.05rem; font-family: var(--font-body); }
@media (max-width:560px){
  .product-card__name{ font-size:.78rem; line-height:1.3; }
  .product-card__price{ font-size:.76rem; }
  .product-card__price .was{ font-size:.68rem; margin-right:.3rem; }
  .product-card__wishlist{ width:28px; height:28px; font-size:.85rem; top:.5rem; right:.5rem; }
  .product-card__badge{ font-size:.56rem; padding:.22rem .45rem; top:.5rem; left:.5rem; }
}

/* ---------- Badges / tags ---------- */
.badge{
  display:inline-block; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:999px;
  background: rgba(201,166,107,.12); color: var(--color-accent);
}
.badge-success{ background: rgba(76,140,107,.15); color: var(--color-success); }
.badge-danger{ background: rgba(180,69,58,.15); color: var(--color-danger); }
.badge-muted{ background: var(--color-bg-alt); color: var(--color-text-muted); }

/* ---------- Forms ---------- */
.field{ margin-bottom: 1.35rem; }
.field label{ display:block; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color: var(--color-text-muted); margin-bottom:.5rem; }
.field input, .field select, .field textarea{
  width:100%;
  background: var(--input-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  font-size:.92rem;
  transition: border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--color-accent);
}
.field textarea{ resize: vertical; min-height:120px; }
.field-hint{ font-size:.75rem; color: var(--color-text-faint); margin-top:.4rem; }
.static-value{
  width:100%; margin:0;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  font-size:.92rem;
}
.field-error{ font-size:.75rem; color: var(--color-danger); margin-top:.4rem; display:none; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: var(--color-danger); }
.field.has-error .field-error{ display:block; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

.checkbox-row{ display:flex; align-items:center; gap:.6rem; font-size:.85rem; color: var(--color-text-muted); }
.checkbox-row input{ width:auto; }

/* ---------- Tabs ---------- */
.tabs__list{ display:flex; gap:2rem; border-bottom:1px solid var(--color-border); margin-bottom:2rem; }
.tabs__btn{
  background:none; border:none; padding: .9rem 0; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--color-text-muted); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs__btn.is-active{ color: var(--color-text); border-color: var(--color-accent); }
.tabs__panel{ display:none; }
.tabs__panel.is-active{ display:block; }

/* ---------- Accordion ---------- */
.accordion-item{ border-bottom: 1px solid var(--color-border); }
.accordion-trigger{
  width:100%; background:none; border:none; color:var(--color-text);
  display:flex; justify-content:space-between; align-items:center;
  padding: 1.25rem 0; font-size:1rem; text-align:left;
}
.accordion-trigger .icon{ transition: transform .25s ease; color: var(--color-accent); }
.accordion-item.is-open .accordion-trigger .icon{ transform: rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
.accordion-panel__inner{ padding-bottom: 1.25rem; color: var(--color-text-muted); font-size:.92rem; }

/* ---------- Timeline (order tracking / production) ---------- */
.timeline{ position:relative; padding-left: 2.5rem; }
.timeline::before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:1px; background: var(--color-border); }
.timeline-step{ position:relative; padding-bottom: 2rem; }
.timeline-step::before{
  content:""; position:absolute; left:-2.5rem; top:2px; width:18px; height:18px; border-radius:50%;
  background: var(--color-bg-alt); border:2px solid var(--color-border-strong);
}
.timeline-step.is-complete::before{ background: var(--color-primary); border-color: var(--color-primary); }
.timeline-step.is-current::before{ background: var(--color-accent); border-color: var(--color-accent); }
.timeline-step h4{ font-family: var(--font-body); font-weight:600; font-size:.95rem; margin-bottom:.2rem; }
.timeline-step p{ font-size:.82rem; color: var(--color-text-faint); margin:0; }

/* ---------- Step indicator (checkout) ---------- */
.steps{ display:flex; align-items:center; justify-content:center; gap:.75rem; margin-bottom:3rem; flex-wrap:wrap; }
.steps__item{ display:flex; align-items:center; gap:.6rem; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--color-text-faint); }
.steps__num{ width:26px; height:26px; border-radius:50%; border:1px solid var(--color-border-strong); display:flex; align-items:center; justify-content:center; font-size:.75rem; flex-shrink:0; }
.steps__item.is-active{ color: var(--color-text); }
.steps__item.is-active .steps__num{ background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.steps__item.is-done .steps__num{ background: var(--color-primary); border-color: var(--color-primary); color:#fff; }
.steps__divider{ width:32px; height:1px; background: var(--color-border); }
@media (max-width:480px){
  .steps{ gap:.4rem; margin-bottom:2rem; }
  .steps__item{ font-size:.65rem; gap:.4rem; }
  .steps__divider{ width:14px; }
}

/* ---------- Toast ---------- */
.toast{
  position: fixed; bottom: 1.5rem; right: 1.5rem; left: 1.5rem; z-index: 500;
  max-width: 360px; margin-left: auto;
  background: var(--color-bg-elevated); border:1px solid var(--color-border-strong);
  padding: .9rem 1.5rem; border-radius: var(--radius-sm);
  font-size:.85rem; box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transform: translateY(20px); opacity:0; pointer-events:none;
  transition: all .25s ease;
}
@media (max-width:480px){
  .toast{ left:1rem; right:1rem; bottom:5.5rem; max-width:none; margin-left:0; }
}
.toast.is-visible{ transform: translateY(0); opacity:1; }
.toast.is-error{ border-color: var(--color-danger); }
.toast.is-success{ border-color: var(--color-success); }

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(0,0,0,.6); z-index:400;
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.modal-backdrop.is-open{ opacity:1; pointer-events:auto; }
.modal{ background: var(--color-bg-elevated); border:1px solid var(--color-border); max-width:420px; width:100%; padding:2rem; border-radius: var(--radius-md); }

.modal--newsletter{ max-width:460px; position:relative; text-align:center; padding:2.5rem 2.25rem; }
.modal__close{ position:absolute; top:.85rem; right:.9rem; background:none; border:none; color:var(--color-text-muted); font-size:1.4rem; line-height:1; padding:.25rem; }
.modal__close:hover{ color:var(--color-text); }
.modal--newsletter .eyebrow{ display:block; }
.modal--newsletter h2{ font-size:1.85rem; margin:.5rem 0 .75rem; }
.modal--newsletter > .text-muted{ font-size:.9rem; margin-bottom:1.5rem; }
.newsletter-modal__form{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; }
.newsletter-modal__input{
  flex:1; min-width:200px; background: var(--input-bg); border:1px solid var(--color-border); color: var(--color-text);
  padding:.85rem 1rem; border-radius: var(--radius-sm); font-size:.92rem;
}
.newsletter-modal__input:focus{ outline:none; border-color: var(--color-accent); }
.newsletter-modal__submit{ white-space:nowrap; }
.modal--newsletter .field-error{ display:block; text-align:center; margin-top:.65rem; min-height:0; }
.newsletter-modal__dismiss{ display:block; margin:1.35rem auto 0; background:none; border:none; color: var(--color-text-faint); font-size:.78rem; text-decoration:underline; }
.newsletter-modal__dismiss:hover{ color: var(--color-text-muted); }
@media (max-width:480px){
  .modal--newsletter{ padding:2rem 1.5rem; }
  .newsletter-modal__form{ flex-direction:column; }
}

/* ---------- Quantity stepper ---------- */
.qty-stepper{ display:inline-flex; align-items:center; border:1px solid var(--color-border-strong); }
.qty-stepper button{ background:none; border:none; color:var(--color-text); width:36px; height:36px; }
.qty-stepper input{ width:42px; text-align:center; background:none; border:none; color:var(--color-text); }

/* ---------- Empty state ---------- */
.empty-state{ text-align:center; padding: 5rem 1rem; }
.empty-state .icon{ font-size:3rem; margin-bottom:1rem; opacity:.4; }

/* ---------- Table (cart / account) ---------- */
.table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table{ width:100%; border-collapse:collapse; }
.data-table th{ text-align:left; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--color-text-faint); padding-bottom:1rem; border-bottom:1px solid var(--color-border); white-space:nowrap; }
.data-table td{ padding: 1.25rem 1rem 1.25rem 0; border-bottom:1px solid var(--color-border); vertical-align:middle; white-space:nowrap; }
@media (max-width:700px){
  .data-table{ min-width:560px; }
}

/* ---------- Pagination ---------- */
.pagination{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:3rem; flex-wrap:wrap;
}
.pagination__btn{
  min-width:38px; height:38px; padding:0 .6rem;
  display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--color-border-strong); color:var(--color-text-muted);
  font-size:.82rem; border-radius: var(--radius-sm); transition: all .2s ease;
}
.pagination__btn:hover:not(:disabled){ border-color: var(--color-accent); color: var(--color-text); }
.pagination__btn.is-active{ background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.pagination__btn:disabled{ opacity:.35; cursor:not-allowed; }
.pagination__nav{ font-size:.95rem; }
.pagination__ellipsis{ color: var(--color-text-faint); padding:0 .25rem; font-size:.82rem; }
@media (max-width:480px){
  .pagination{ gap:.35rem; margin-top:2rem; }
  .pagination__btn{ min-width:32px; height:32px; font-size:.75rem; }
}

/* ---------- Rating stars ---------- */
.stars{ color: var(--color-accent); letter-spacing:2px; font-size:.85rem; }