/* ================================================================
   STANX — SHARED STYLESHEET
   Design tokens live at the top. Change the brand look from here.
   ================================================================ */

:root{
  /* Colour */
  --background:        #F8F7F5;
  --background-alt:    #F1EFEB;
  --foreground:         #161614;
  --muted:              #EFEDE8;
  --muted-foreground:   #71695f;
  --border:             #E2DFD8;
  --accent:             #161614;
  --accent-soft:        #4a463d;
  --sale:               #A23B2E;
  --success:            #3E6B52;
  --success-bg:         #E9F0EA;
  --warning:            #A9722F;
  --warning-bg:         #F5EDE1;
  --error:              #A23B2E;
  --error-bg:           #F5E7E3;
  --neutral-bg:         #EFEDE8;
  --surface:            #FFFFFF;
  --shadow: 0 18px 48px rgba(22,22,20,0.14);

  /* Type */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --radius: 2px;
  --container: 1240px;
  --gap: 1.5rem;

  --ease: cubic-bezier(.4,0,.2,1);
  --speed: 220ms;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------------- RESET ---------------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background: var(--background); color: var(--foreground);
  font-family: var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.1; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; padding:0; }
input,select,textarea{ font-family:inherit; font-size:1rem; }
img,svg{ display:block; max-width:100%; }
.icon{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible{ outline:2px solid var(--foreground); outline-offset:3px; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--foreground); color:var(--surface); padding:.75rem 1.25rem; z-index:200; font-size:.85rem; }
.skip-link:focus{ left:1rem; top:1rem; }
.wrap{ max-width: var(--container); margin:0 auto; padding:0 1.5rem; }

/* ---------------- ANNOUNCEMENT BAR ---------------- */
.announce{ background: var(--foreground); color: var(--surface); text-align:center; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; padding:.65rem 2.5rem; position:relative; }
.announce__close{ position:absolute; right:.85rem; top:50%; transform:translateY(-50%); font-size:1.1rem; line-height:1; color:var(--surface); opacity:.7; }
.announce__close:hover{ opacity:1; }
.announce[hidden]{ display:none; }

/* ---------------- HEADER ---------------- */
.header{ position:sticky; top:0; z-index:60; background:var(--background); border-bottom:1px solid transparent; transition:border-color var(--speed) var(--ease); }
.header.is-scrolled{ border-color: var(--border); box-shadow:0 1px 0 rgba(0,0,0,0.02); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.5rem; max-width:var(--container); margin:0 auto; }
.header__left{ display:flex; align-items:center; gap:1rem; }
.logo{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; letter-spacing:.16em; text-transform:uppercase; }
.nav{ display:none; }
.nav a{ font-size:.83rem; letter-spacing:.05em; text-transform:uppercase; font-weight:500; padding-bottom:2px; border-bottom:1px solid transparent; transition:border-color var(--speed) var(--ease); }
.nav a:hover, .nav a.is-active{ border-color: var(--foreground); }
.nav__sale{ color: var(--sale); }
.header__actions{ display:flex; align-items:center; gap:1.1rem; }
.icon-btn{ position:relative; display:flex; align-items:center; justify-content:center; padding:.25rem; }
.icon-btn:hover .icon{ opacity:.65; }
.cart-count{ position:absolute; top:-6px; right:-8px; background:var(--foreground); color:var(--surface); font-size:.62rem; font-weight:600; min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.cart-count[data-empty="true"]{ display:none; }
.search-bar{ border-top:1px solid var(--border); padding:1rem 1.5rem; display:flex; align-items:center; gap:1rem; max-width:var(--container); margin:0 auto; }
.search-bar[hidden]{ display:none; }
.search-bar input{ flex:1; border:none; background:none; font-size:1.05rem; padding:.4rem 0; border-bottom:1px solid var(--border); }
.search-bar input:focus{ outline:none; border-color:var(--foreground); }
@media (min-width:1024px){ .header__menu{ display:none; } .nav{ display:flex; gap:2.1rem; flex:1; justify-content:center; } }

/* ---------------- OVERLAY / DRAWERS ---------------- */
.overlay{ position:fixed; inset:0; background:rgba(20,19,17,0.4); opacity:0; visibility:hidden; transition:opacity var(--speed) var(--ease); z-index:70; }
.overlay.is-open{ opacity:1; visibility:visible; }

.mobile-nav{ position:fixed; top:0; left:0; height:100%; width:min(84vw,340px); background:var(--surface); z-index:80; padding:1.5rem; transform:translateX(-100%); transition:transform var(--speed) var(--ease); display:flex; flex-direction:column; gap:.25rem; }
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav__close{ align-self:flex-end; margin-bottom:1.5rem; }
.mobile-nav a{ padding:.9rem 0; border-bottom:1px solid var(--border); font-size:1rem; text-transform:uppercase; letter-spacing:.04em; }
.mobile-nav__foot{ margin-top:auto; padding-top:1.5rem; display:flex; gap:1.5rem; }

.cart-drawer{ position:fixed; top:0; right:0; height:100%; width:min(92vw,420px); background:var(--surface); z-index:80; transform:translateX(100%); transition:transform var(--speed) var(--ease); display:flex; flex-direction:column; }
.cart-drawer.is-open{ transform:translateX(0); }
.cart-drawer__header{ display:flex; align-items:center; justify-content:space-between; padding:1.5rem; border-bottom:1px solid var(--border); }
.cart-drawer__header h2{ font-size:1.1rem; text-transform:uppercase; letter-spacing:.06em; }
.cart-drawer__body{ flex:1; overflow-y:auto; padding:1.5rem; }
.cart-empty{ text-align:center; padding:3rem 1rem; color:var(--muted-foreground); }
.cart-empty .btn{ margin-top:1.25rem; }
.cart-item{ display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--border); }
.cart-item__media{ width:64px; height:80px; background:var(--muted); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.cart-item__media .icon{ width:22px; height:22px; color:var(--muted-foreground); }
.cart-item__info{ flex:1; display:flex; flex-direction:column; gap:.35rem; }
.cart-item__name{ font-size:.92rem; font-weight:500; }
.cart-item__meta{ font-size:.8rem; color:var(--muted-foreground); }
.cart-item__row{ display:flex; align-items:center; justify-content:space-between; }
.cart-item__remove{ font-size:.78rem; color:var(--muted-foreground); text-decoration:underline; text-underline-offset:2px; }
.cart-item__remove:hover{ color:var(--foreground); }
.cart-drawer__footer{ padding:1.5rem; border-top:1px solid var(--border); }
.cart-subtotal{ display:flex; justify-content:space-between; font-size:.95rem; margin-bottom:1rem; }
.cart-subtotal span:last-child{ font-weight:600; }
.cart-note{ font-size:.75rem; color:var(--muted-foreground); margin-top:.75rem; text-align:center; }

/* ---------------- BUTTONS ---------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.9rem 1.9rem; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; border-radius:var(--radius); transition:background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease); white-space:nowrap; }
.btn--primary{ background:var(--accent); color:var(--surface); border:1px solid var(--accent); }
.btn--primary:hover{ background:var(--accent-soft); border-color:var(--accent-soft); }
.btn--secondary{ background:transparent; color:var(--foreground); border:1px solid var(--foreground); }
.btn--secondary:hover{ background:var(--foreground); color:var(--surface); }
.btn--text{ padding:0; border:none; text-transform:none; letter-spacing:0; font-size:.95rem; font-weight:500; border-bottom:1px solid var(--foreground); border-radius:0; }
.btn--full{ width:100%; }
.btn--sm{ padding:.55rem 1.1rem; font-size:.72rem; }
.btn--ghost{ background:none; border:none; text-transform:none; letter-spacing:0; font-size:.85rem; text-decoration:underline; text-underline-offset:3px; padding:0; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------------- REVEAL ---------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 620ms var(--ease), transform 620ms var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------------- PLACEHOLDER IMAGE ---------------- */
.placeholder-image{ background:var(--muted); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; aspect-ratio:4/5; }
.placeholder-image .icon-hanger{ width:34%; color:var(--muted-foreground); opacity:.55; transition:transform 500ms var(--ease); }
.placeholder-image--hero{ aspect-ratio:4/5.4; }
.placeholder-image--wide{ aspect-ratio:16/8; }
.placeholder-image--square{ aspect-ratio:1/1; }
.product-card:hover .icon-hanger, .product-card--large:hover .icon-hanger, .gallery__main:hover .icon-hanger{ transform:scale(1.06); }

/* ---------------- HERO ---------------- */
.hero{ display:grid; gap:2.5rem; align-items:center; padding:3rem 1.5rem 3.5rem; max-width:var(--container); margin:0 auto; }
.eyebrow{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-foreground); margin-bottom:1.1rem; }
.hero h1{ font-size:clamp(2.1rem,6vw,3.6rem); }
.hero__sub{ margin-top:1.4rem; max-width:34ch; color:var(--accent-soft); font-size:1.02rem; }
.hero__ctas{ display:flex; align-items:center; gap:2rem; margin-top:2.1rem; flex-wrap:wrap; }
.hero__visual{ position:relative; }
.stamp{ position:absolute; bottom:-22px; left:-22px; width:96px; height:96px; background:var(--background); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.stamp svg{ position:absolute; inset:0; width:100%; height:100%; animation:spin 26s linear infinite; color:var(--foreground); }
.stamp__center{ font-family:var(--font-display); font-size:.85rem; font-weight:700; position:relative; z-index:1; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (min-width:860px){ .hero{ grid-template-columns:1fr 1fr; padding-top:4.5rem; padding-bottom:5rem; } }

/* ---------------- PAGE BANNER + BREADCRUMB (listing/detail pages) ---------------- */
.page-banner{ max-width:var(--container); margin:0 auto; padding:2.75rem 1.5rem 0; }
.breadcrumb{ font-size:.78rem; color:var(--muted-foreground); letter-spacing:.03em; margin-bottom:1rem; }
.breadcrumb a:hover{ color:var(--foreground); text-decoration:underline; text-underline-offset:3px; }
.page-banner h1{ font-size:clamp(1.8rem,4vw,2.4rem); }
.page-banner p{ margin-top:.6rem; color:var(--muted-foreground); max-width:52ch; }

/* ---------------- SECTIONS / GRIDS ---------------- */
.section{ padding:4.5rem 1.5rem; max-width:var(--container); margin:0 auto; }
.section-header{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2.25rem; gap:1rem; }
.section-header h2{ font-size:1.5rem; }
.section-link{ font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid var(--foreground); padding-bottom:2px; flex-shrink:0; }

.editorial-grid{ display:grid; gap:var(--gap); }
.editorial-grid__stack{ display:grid; gap:var(--gap); grid-template-columns:1fr 1fr; }
@media (min-width:860px){ .editorial-grid{ grid-template-columns:1.3fr 1fr; } .editorial-grid__stack{ grid-template-columns:1fr; } }

.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
@media (min-width:700px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .product-grid{ grid-template-columns:repeat(4,1fr); } }

.product-card{ display:flex; flex-direction:column; }
.product-card__media{ position:relative; display:block; }
.badge{ position:absolute; top:.75rem; left:.75rem; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:.3rem .55rem; background:var(--surface); color:var(--foreground); }
.badge--sale{ background:var(--sale); color:var(--surface); }
.product-card__body{ padding-top:.9rem; display:flex; flex-direction:column; gap:.4rem; }
.product-card--large .product-card__body{ padding-top:1.3rem; gap:.6rem; max-width:34ch; }
.product-card__name{ font-family:var(--font-display); font-size:.98rem; font-weight:600; }
.product-card--large .product-card__name{ font-size:1.35rem; }
.product-card__desc{ font-size:.85rem; color:var(--muted-foreground); }
.price{ display:flex; align-items:center; gap:.55rem; font-size:.92rem; font-weight:500; margin-top:.15rem; flex-wrap:wrap; }
.price__original{ color:var(--muted-foreground); text-decoration:line-through; font-weight:400; }
.price__sale{ color:var(--sale); font-weight:600; }
.product-card__body .btn{ margin-top:.65rem; }
.product-card--large .cta-row{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:.9rem; }

/* ---------------- SHOP / FILTER BAR ---------------- */
.shop-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:2rem 1.5rem 1rem; max-width:var(--container); margin:0 auto; }
.filter-chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.filter-chip{ font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; padding:.55rem 1.05rem; border:1px solid var(--border); border-radius:999px; transition:border-color var(--speed) var(--ease), background var(--speed) var(--ease); }
.filter-chip:hover{ border-color:var(--foreground); }
.filter-chip.is-active{ background:var(--foreground); color:var(--surface); border-color:var(--foreground); }
.shop-meta{ display:flex; align-items:center; gap:1rem; font-size:.85rem; color:var(--muted-foreground); }
.sort-select{ border:1px solid var(--border); background:var(--surface); padding:.55rem .8rem; font-size:.82rem; border-radius:var(--radius); }
.load-more{ display:flex; justify-content:center; padding:2.5rem 1.5rem 0; }

/* ---------------- PRODUCT DETAIL ---------------- */
.pdp{ display:grid; gap:2.5rem; max-width:var(--container); margin:0 auto; padding:2rem 1.5rem 4.5rem; }
.gallery__main{ margin-bottom:.75rem; }
.gallery__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.gallery__thumb{ aspect-ratio:4/5; background:var(--muted); display:flex; align-items:center; justify-content:center; border:1px solid transparent; cursor:pointer; }
.gallery__thumb.is-active{ border-color:var(--foreground); }
.gallery__thumb .icon-hanger{ width:44%; color:var(--muted-foreground); opacity:.5; }
.pdp__info h1{ font-size:clamp(1.6rem,3vw,2.1rem); }
.pdp__info .price{ font-size:1.15rem; margin-top:.6rem; }
.pdp__desc{ margin-top:1.1rem; color:var(--accent-soft); max-width:48ch; }
.variant-group{ margin-top:1.75rem; }
.variant-group__label{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-foreground); margin-bottom:.7rem; display:block; }
.variant-swatches{ display:flex; flex-wrap:wrap; gap:.6rem; }
.variant-swatch{ min-width:44px; padding:.55rem .4rem; text-align:center; border:1px solid var(--border); font-size:.85rem; transition:border-color var(--speed) var(--ease); }
.variant-swatch:hover{ border-color:var(--foreground); }
.variant-swatch.is-selected{ border-color:var(--foreground); background:var(--foreground); color:var(--surface); }
.qty-stepper{ display:inline-flex; align-items:center; border:1px solid var(--border); }
.qty-stepper button{ width:40px; height:44px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.qty-stepper button:hover{ background:var(--muted); }
.qty-stepper span{ width:40px; text-align:center; font-size:.95rem; }
.pdp__actions{ display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.pdp__actions .btn{ flex:1; min-width:160px; }
.pdp__meta-note{ margin-top:1.25rem; font-size:.82rem; color:var(--muted-foreground); }

.accordion{ margin-top:2.5rem; border-top:1px solid var(--border); }
.accordion__item{ border-bottom:1px solid var(--border); }
.accordion__trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 0; font-family:var(--font-display); font-weight:600; font-size:.95rem; text-align:left; }
.accordion__trigger .plus{ font-size:1.2rem; transition:transform var(--speed) var(--ease); }
.accordion__item.is-open .plus{ transform:rotate(45deg); }
.accordion__panel{ max-height:0; overflow:hidden; transition:max-height var(--speed) var(--ease); }
.accordion__panel p{ padding-bottom:1.2rem; color:var(--muted-foreground); font-size:.92rem; max-width:60ch; }

@media (min-width:860px){ .pdp{ grid-template-columns:1.1fr 1fr; padding-top:2.5rem; } }

/* ---------------- EDITORIAL BANNER ---------------- */
.editorial{ max-width:var(--container); margin:1rem auto 5rem; padding:0 1.5rem; }
.editorial blockquote{ margin:2rem auto 0; max-width:56ch; text-align:center; font-family:var(--font-display); font-size:clamp(1.25rem,2.6vw,1.8rem); font-weight:500; line-height:1.35; }
.editorial cite{ display:block; margin-top:1.1rem; font-style:normal; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-foreground); }

/* ---------------- NEWSLETTER ---------------- */
.newsletter{ background:var(--background-alt); padding:4.5rem 1.5rem; text-align:center; }
.newsletter h2{ font-size:1.6rem; }
.newsletter p{ margin-top:.8rem; color:var(--accent-soft); }
.newsletter__form{ display:flex; gap:.75rem; max-width:420px; margin:2rem auto 0; flex-wrap:wrap; justify-content:center; }
.newsletter__form input{ flex:1; min-width:220px; padding:.9rem 1rem; border:1px solid var(--border); background:var(--surface); }
.newsletter__form input:focus{ outline:none; border-color:var(--foreground); }

/* ---------------- FORMS (checkout / account / admin share these) ---------------- */
.form-grid{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
.form-field{ display:flex; flex-direction:column; gap:.4rem; }
.form-field--full{ grid-column:1 / -1; }
.form-field label{ font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-foreground); }
.form-field input, .form-field select, .form-field textarea{
  border:1px solid var(--border); background:var(--surface); padding:.85rem .95rem; font-size:.95rem; border-radius:var(--radius); width:100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--foreground); }
.form-field textarea{ resize:vertical; min-height:100px; }
.radio-card{ border:1px solid var(--border); padding:1rem; display:flex; align-items:flex-start; gap:.85rem; cursor:pointer; transition:border-color var(--speed) var(--ease); }
.radio-card:hover{ border-color:var(--foreground); }
.radio-card.is-selected{ border-color:var(--foreground); }
.radio-card input{ margin-top:.2rem; accent-color:var(--foreground); }
.radio-card__title{ font-weight:600; font-size:.92rem; }
.radio-card__desc{ font-size:.82rem; color:var(--muted-foreground); margin-top:.15rem; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

/* ---------------- CHECKOUT ---------------- */
.checkout{ max-width:var(--container); margin:0 auto; padding:2.5rem 1.5rem 5rem; display:grid; gap:2.5rem; }
.stepper{ display:flex; gap:1.5rem; margin-bottom:2.25rem; flex-wrap:wrap; }
.stepper__step{ display:flex; align-items:center; gap:.6rem; font-size:.82rem; letter-spacing:.03em; color:var(--muted-foreground); }
.stepper__num{ width:26px; height:26px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:600; }
.stepper__step.is-active{ color:var(--foreground); }
.stepper__step.is-active .stepper__num{ background:var(--foreground); color:var(--surface); border-color:var(--foreground); }
.stepper__step.is-done .stepper__num{ background:var(--success); border-color:var(--success); color:var(--surface); }
.checkout-step{ display:none; }
.checkout-step.is-active{ display:block; }
.checkout-actions{ display:flex; justify-content:space-between; margin-top:2rem; gap:1rem; flex-wrap:wrap; }
.order-summary{ background:var(--background-alt); padding:1.75rem; height:fit-content; }
.order-summary h2{ font-size:1.05rem; margin-bottom:1.25rem; text-transform:uppercase; letter-spacing:.04em; }
.order-summary__item{ display:flex; gap:.9rem; padding:.85rem 0; border-bottom:1px solid var(--border); }
.order-summary__item .placeholder-image{ width:56px; aspect-ratio:4/5; flex-shrink:0; }
.order-summary__item .icon-hanger{ width:60%; }
.order-summary__info{ flex:1; display:flex; flex-direction:column; gap:.2rem; font-size:.85rem; }
.order-summary__row{ display:flex; justify-content:space-between; font-size:.88rem; padding:.6rem 0; }
.order-summary__row--total{ font-weight:700; font-size:1rem; border-top:1px solid var(--border); margin-top:.4rem; padding-top:1rem; }
.order-summary__coupon{ display:flex; gap:.6rem; margin:1.1rem 0; }
.order-summary__coupon input{ flex:1; border:1px solid var(--border); padding:.65rem .8rem; font-size:.85rem; }
@media (min-width:960px){ .checkout{ grid-template-columns:1.4fr 1fr; } }

.confirmation{ text-align:center; max-width:520px; margin:0 auto; padding:3.5rem 1.5rem 5rem; }
.confirmation__icon{ width:64px; height:64px; border-radius:50%; background:var(--success-bg); color:var(--success); display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; }
.confirmation h1{ font-size:1.7rem; }
.confirmation p{ margin-top:.85rem; color:var(--muted-foreground); }
.confirmation__id{ margin-top:1.5rem; font-family:var(--font-display); font-weight:600; letter-spacing:.04em; }
.confirmation .btn{ margin-top:2.25rem; }
.demo-note{ display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; color:var(--warning); background:var(--warning-bg); padding:.5rem .9rem; border-radius:999px; margin-top:1.25rem; }

/* ---------------- ACCOUNT / AUTH ---------------- */
.auth{ max-width:440px; margin:0 auto; padding:3rem 1.5rem 5rem; }
.auth-tabs{ display:flex; border-bottom:1px solid var(--border); margin-bottom:2rem; }
.auth-tabs button{ flex:1; padding:1rem 0; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; font-weight:600; color:var(--muted-foreground); border-bottom:2px solid transparent; margin-bottom:-1px; }
.auth-tabs button.is-active{ color:var(--foreground); border-color:var(--foreground); }
.auth-panel{ display:none; }
.auth-panel.is-active{ display:block; }
.auth-panel form{ display:flex; flex-direction:column; gap:1.1rem; }
.auth-foot{ margin-top:1.5rem; font-size:.85rem; color:var(--muted-foreground); text-align:center; }

.account-shell{ max-width:var(--container); margin:0 auto; padding:2.5rem 1.5rem 5rem; display:grid; gap:2.5rem; }
.account-nav{ display:flex; flex-direction:column; gap:.25rem; }
.account-nav button{ text-align:left; padding:.85rem 1rem; font-size:.88rem; border-left:2px solid transparent; }
.account-nav button.is-active{ border-color:var(--foreground); font-weight:600; background:var(--background-alt); }
.account-panel{ display:none; }
.account-panel.is-active{ display:block; }
@media (min-width:860px){ .account-shell{ grid-template-columns:220px 1fr; } }

/* ---------------- TABLES / BADGES (shared with admin) ---------------- */
.table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.table th{ text-align:left; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-foreground); padding:.85rem .75rem; border-bottom:1px solid var(--border); font-weight:600; }
.table td{ padding:.9rem .75rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.table-wrap{ overflow-x:auto; }
.status{ display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; font-weight:600; padding:.3rem .65rem; border-radius:999px; }
.status--success{ background:var(--success-bg); color:var(--success); }
.status--warning{ background:var(--warning-bg); color:var(--warning); }
.status--error{ background:var(--error-bg); color:var(--error); }
.status--neutral{ background:var(--neutral-bg); color:var(--muted-foreground); }

/* ---------------- MODAL / TOAST (shared with admin) ---------------- */
.modal{ position:fixed; inset:0; z-index:120; display:none; align-items:flex-start; justify-content:center; padding:4vh 1.25rem; overflow-y:auto; }
.modal.is-open{ display:flex; }
.modal__panel{ background:var(--surface); width:100%; max-width:560px; box-shadow:var(--shadow); padding:2rem; }
.modal__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.modal__head h2{ font-size:1.1rem; }
.modal__foot{ display:flex; justify-content:flex-end; gap:1rem; margin-top:1.75rem; }

.toast{ position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(120%); background:var(--foreground); color:var(--surface); padding:.9rem 1.5rem; font-size:.85rem; border-radius:var(--radius); z-index:150; transition:transform var(--speed) var(--ease); }
.toast.is-visible{ transform:translateX(-50%) translateY(0); }

/* ---------------- FOOTER ---------------- */
.footer{ border-top:1px solid var(--border); padding:4rem 1.5rem 2rem; }
.footer__grid{ max-width:var(--container); margin:0 auto; display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:700px){ .footer__grid{ grid-template-columns:repeat(4,1fr); } }
.footer__col h3{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.1rem; color:var(--muted-foreground); font-weight:600; }
.footer__col li{ margin-bottom:.7rem; font-size:.9rem; }
.footer__col a:hover{ text-decoration:underline; text-underline-offset:3px; }
.footer__logo{ font-family:var(--font-display); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:1.2rem; }
.footer__tag{ margin-top:.85rem; font-size:.85rem; color:var(--muted-foreground); max-width:26ch; }
.footer__social{ display:flex; gap:1rem; margin-top:1.5rem; }
.footer__bottom{ max-width:var(--container); margin:3rem auto 0; padding-top:1.75rem; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.78rem; color:var(--muted-foreground); }
.footer__bottom a:hover{ color:var(--foreground); }
.footer__legal{ display:flex; gap:1.25rem; }