/* PODSACH Design System — component styles (extracted from ds-bundle.js for static rendering) */

/* ── Badge ──────────────────────────────────────────────────── */
.pds-badge{
  display:inline-flex; align-items:center; gap:0.35em;
  font-family:var(--font-sans); font-weight:var(--weight-bold);
  font-size:var(--text-xs); line-height:1; letter-spacing:var(--tracking-wide);
  padding:0.4em 0.75em; border-radius:var(--radius-pill); white-space:nowrap;
}
.pds-badge--brand{ background:var(--surface-brand-tint); color:var(--pink-700); }
.pds-badge--gradient{ background:var(--gradient-brand); color:#fff; }
.pds-badge--neutral{ background:var(--ink-100); color:var(--ink-700); }
.pds-badge--success{ background:var(--success-50); color:var(--success-700); }
.pds-badge--warning{ background:var(--warning-50); color:var(--warning-700); }
.pds-badge--danger{ background:var(--danger-50); color:var(--danger-700); }
.pds-badge--info{ background:var(--info-50); color:var(--info-700); }
.pds-badge__dot{ width:0.5em; height:0.5em; border-radius:50%; background:currentColor; }

/* ── Button ─────────────────────────────────────────────────── */
.pds-btn{
  --_pad-y:0.7em; --_pad-x:1.4em; --_fs:var(--text-base);
  display:inline-flex; align-items:center; justify-content:center; gap:0.6em;
  font-family:var(--font-sans); font-weight:var(--weight-bold); font-size:var(--_fs);
  line-height:1; letter-spacing:var(--tracking-tight);
  padding:var(--_pad-y) var(--_pad-x); border-radius:var(--radius-pill);
  border:1.5px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
             background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
  -webkit-user-select:none; user-select:none;
}
.pds-btn:focus-visible{ outline:none; box-shadow:var(--ring-brand); }
.pds-btn[disabled]{ opacity:0.5; cursor:not-allowed; pointer-events:none; }
.pds-btn--sm{ --_fs:var(--text-sm); --_pad-y:0.6em; --_pad-x:1.1em; }
.pds-btn--lg{ --_fs:var(--text-md); --_pad-y:0.85em; --_pad-x:1.8em; }
.pds-btn--block{ display:flex; width:100%; }

.pds-btn--primary{ background:var(--gradient-brand); color:var(--action-fg); box-shadow:var(--shadow-brand-sm); }
.pds-btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-brand); }
.pds-btn--primary:active{ transform:translateY(0) scale(0.98); box-shadow:var(--shadow-brand-sm); }

.pds-btn--secondary{ background:var(--ink-900); color:#fff; }
.pds-btn--secondary:hover{ background:var(--ink-800); transform:translateY(-1px); }
.pds-btn--secondary:active{ transform:translateY(0) scale(0.98); }

.pds-btn--outline{ background:transparent; color:var(--pink-600); border-color:var(--border-brand); }
.pds-btn--outline:hover{ background:var(--surface-brand-tint); }
.pds-btn--outline:active{ transform:scale(0.98); }

.pds-btn--ghost{ background:transparent; color:var(--text-secondary); }
.pds-btn--ghost:hover{ background:var(--surface-muted); color:var(--text-primary); }
.pds-btn--ghost:active{ transform:scale(0.98); }

@media (prefers-reduced-motion: reduce){ .pds-btn{ transition:none; } .pds-btn:hover{ transform:none; } }

/* ── ProductCard ─────────────────────────────────────────────── */
.pds-product{
  display:flex; flex-direction:column; background:var(--surface-card);
  border-radius:var(--radius-xl); border:1px solid var(--border-default);
  box-shadow:var(--shadow-sm); overflow:hidden; font-family:var(--font-sans);
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.pds-product:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.pds-product__media{
  position:relative; aspect-ratio:1/1; background:var(--surface-subtle);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.pds-product__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pds-product__ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:var(--gradient-brand-soft); color:#fff;
}
.pds-product__ph i, .pds-product__ph svg{ width:34%; height:34%; opacity:0.85; stroke-width:1.4; }
.pds-product__badge{ position:absolute; top:0.75rem; left:0.75rem; }
.pds-product__body{ padding:var(--space-4) var(--space-4) var(--space-5); display:flex; flex-direction:column; gap:0.35rem; }
.pds-product__name{ font-size:var(--text-base); font-weight:var(--weight-semibold); color:var(--text-primary); line-height:var(--leading-snug); }
.pds-product__row{ display:flex; align-items:baseline; justify-content:space-between; margin-top:0.1rem; }
.pds-product__price{ font-size:var(--text-lg); font-weight:var(--weight-extrabold); color:var(--text-primary); }
.pds-product__meta{ font-size:var(--text-xs); color:var(--text-muted); }
@media (prefers-reduced-motion: reduce){ .pds-product:hover{ transform:none; } }
.pds-product--link{ cursor:pointer; }
.pds-product--link:focus-visible{ outline:none; box-shadow:var(--ring-brand); border-color:var(--border-brand); }

/* ── Modal ───────────────────────────────────────────────────── */
@keyframes pds-modal-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pds-modal-out{ from{ opacity:1; } to{ opacity:0; } }
@keyframes pds-panel-in{ from{ opacity:0; transform:translateY(12px) scale(0.97); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes pds-panel-out{ from{ opacity:1; transform:translateY(0) scale(1); } to{ opacity:0; transform:translateY(12px) scale(0.97); } }
.pds-modal{ display:none; position:fixed; inset:0; z-index:999; align-items:center; justify-content:center; padding:1rem; }
.pds-modal.is-open{ display:flex; animation:pds-modal-in var(--dur-slow) var(--ease-out) forwards; }
.pds-modal.is-open .pds-modal__panel{ animation:pds-panel-in var(--dur-slow) var(--ease-out) forwards; }
.pds-modal.is-closing{ display:flex; animation:pds-modal-out var(--dur-base) var(--ease-standard) forwards; }
.pds-modal.is-closing .pds-modal__panel{ animation:pds-panel-out var(--dur-base) var(--ease-standard) forwards; }
.pds-modal__backdrop{ position:absolute; inset:0; background:rgba(20,20,51,0.6); backdrop-filter:blur(4px); }
.pds-modal__panel{
  position:relative; z-index:1; background:var(--surface-card);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); overflow:hidden; overflow-y:auto;
  width:100%; max-width:860px; max-height:90vh; display:flex; flex-direction:column;
}
.pds-modal__close{
  position:absolute; top:0.75rem; right:0.75rem; z-index:3;
  width:2.25rem; height:2.25rem; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,0.9); box-shadow:var(--shadow-sm); color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease-standard);
}
.pds-modal__close:hover{ background:#fff; color:var(--text-primary); }
.pds-modal__close i{ width:1rem; height:1rem; }
/* top two-column: image + content */
.pds-modal__top{ display:flex; align-items:stretch; }
.pds-modal__media{ flex:none; width:300px; background:var(--surface-subtle); display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.pds-modal__media img{ width:100%; height:auto; max-height:100%; object-fit:contain; display:block; }
.pds-modal__content{ flex:1; padding:2rem 1.75rem; display:flex; flex-direction:column; gap:1rem; min-width:0; }
.pds-modal__title{ font-size:var(--text-2xl); font-weight:var(--weight-extrabold); color:var(--text-primary); margin:0; }
.pds-modal__price{ font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-secondary); letter-spacing:var(--tracking-wide); text-transform:uppercase; margin:0; }
.pds-modal__price-val{ font-size:var(--text-2xl); font-weight:var(--weight-extrabold); color:var(--pink-500); margin-left:0.4em; }
.pds-modal__cta-wrap{ display:flex; flex-direction:column; gap:0.4rem; }
.pds-modal__cta-text{ font-size:var(--text-sm); color:var(--text-secondary); margin:0; }
.pds-modal__sec-title{ font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--text-primary); margin:0 0 0.5rem; }
.pds-modal__desc-line{ font-size:var(--text-sm); color:var(--text-primary); line-height:var(--leading-relaxed); margin:0.15rem 0; }
/* sizes row */
.pds-modal__sizes{ display:flex; align-items:center; gap:1rem; padding:1rem 1.75rem; border-top:1px solid var(--border-subtle); flex-wrap:wrap; }
.pds-modal__sizes-label{ font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--text-primary); white-space:nowrap; }
.pds-modal__sizes-pills{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.pds-modal__pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.35em 0.75em; border-radius:var(--radius-sm); border:1.5px solid var(--border-default);
  font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-primary);
  background:var(--surface-card); min-width:2.5rem;
}
/* bottom info panel */
.pds-modal__info{ background:var(--surface-subtle); border-top:1px solid var(--border-subtle); padding:1.5rem 1.75rem; }
.pds-modal__info-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.pds-modal__info-col{
  padding:0 1.25rem; display:flex; flex-direction:column; gap:0.3rem;
  border-right:1px solid var(--border-subtle);
}
.pds-modal__info-col:first-child{ padding-left:0; }
.pds-modal__info-col:last-child{ border-right:none; }
.pds-modal__info-col i{ width:1.1rem; height:1.1rem; color:var(--pink-500); }
.pds-modal__info-label{ font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--text-primary); margin:0; }
.pds-modal__info-val{ font-size:var(--text-sm); color:var(--text-secondary); margin:0; }
.pds-modal__disclaimer{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border-subtle); }
.pds-modal__dis-label{ font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--text-primary); margin:0 0 0.25rem; }
.pds-modal__dis-val{ font-size:var(--text-sm); color:var(--text-secondary); margin:0; line-height:var(--leading-relaxed); }
@media(max-width:640px){
  .pds-modal__top{ flex-direction:column; }
  .pds-modal__media{ width:100%; height:240px; }
  .pds-modal__content{ padding:1.25rem 1rem; }
  .pds-modal__sizes{ padding:1rem; }
  .pds-modal__info{ padding:1.25rem 1rem; }
  .pds-modal__info-cols{ grid-template-columns:1fr; gap:1rem; }
  .pds-modal__info-col{ border-right:none; border-bottom:1px solid var(--border-subtle); padding:0 0 1rem; }
  .pds-modal__info-col:last-child{ border-bottom:none; padding-bottom:0; }
}