/* ============================================================
   SHINYVERSE — CLEAN COLLECTOR DESIGN SYSTEM
   Light editorial minimal. Space Grotesk + Inter.
   One token block. No !important wars. Replaces the old 8k monolith
   (backup: style.css.old-backup).
   ============================================================ */

:root{
  /* color */
  --bg:#FFFFFF;
  --bg-soft:#F8FAFC;
  --ink:#0F172A;
  --muted:#64748B;
  --accent:#5B4BC4;
  --accent-ink:#4A3CAD;
  --accent-soft:#EEECFA;
  --hairline:#E2E8F0;
  --success:#047857;
  --success-soft:#ECFDF5;
  --warn:#B45309;
  --warn-soft:#FFFBEB;
  --danger:#B91C1C;
  --danger-soft:#FEF2F2;
  --info-ink:#1E40AF;
  --info-soft:#EFF6FF;

  /* type */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  /* layout */
  --max-w:1280px;
  --gutter:clamp(20px,4vw,48px);
  --r-sm:6px;
  --r-md:10px;

  /* elevation */
  --shadow-hover:0 24px 48px -16px rgba(15,23,42,.14), 0 4px 12px -4px rgba(15,23,42,.06);
  --shadow-pop:0 12px 32px -8px rgba(15,23,42,.18);

  /* motion */
  --ease-out:cubic-bezier(.22,.68,.32,1);
  --ease-in-out:cubic-bezier(.45,.05,.55,.95);
  --t-fast:180ms;
  --t-med:300ms;
  --t-slow:500ms;
}

/* ============ BASE ============ */
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* the old purple gradient is gone on purpose */
body.theme-purple{background:var(--bg);background-color:var(--bg)}

h1,h2,h3,h4,h5,h6,.navbar-brand{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
}
h1,h2,h3{letter-spacing:-.03em}
p{line-height:1.7}
a{color:var(--accent-ink);text-decoration:none;transition:color var(--t-fast) var(--ease-out)}
a:hover{color:var(--ink)}
img{max-width:100%}

::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-soft)}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#94A3B8}

main.container,main.container-fluid{max-width:var(--max-w)}
main#page-content{padding-top:1rem;padding-bottom:2.5rem;min-height:60vh;animation:svPageIn .45s var(--ease-out) both}
@keyframes svPageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============ SHARED UTILITIES ============ */
/* uppercase micro label with hairline tail — the editorial signature */
.micro,.sv-micro{
  font-family:var(--font-display);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;align-items:center;gap:.75rem;
}
.micro .num,.sv-micro .num{color:var(--accent);font-variant-numeric:tabular-nums}
.micro::after,.sv-micro::after{content:"";height:1px;width:56px;background:var(--hairline)}

.price,.money{font-variant-numeric:tabular-nums}

/* scroll reveal (design.js adds .is-in) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.reveal.is-in{opacity:1;transform:translateY(0)}

/* section shells */
.sv-section{padding:clamp(28px,4.5vh,52px) 0}
.sv-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(1.4rem,3.5vh,2.1rem)}
.sv-section-title,
.sv-home-section-title{
  font-family:var(--font-display);
  font-size:clamp(1.75rem,3.2vw,2.5rem);
  letter-spacing:-.025em;line-height:1.1;font-weight:700;
  margin-top:.75rem;
}
.sv-section-sub,
.sv-home-section-sub{color:var(--muted);max-width:60ch}
.sv-section-link{display:inline-flex;align-items:center;gap:.45rem;font-size:.875rem;font-weight:600;color:var(--accent-ink);white-space:nowrap;padding:.5rem 0}
.sv-section-link svg{transition:transform var(--t-med) var(--ease-out)}
.sv-section-link:hover svg{transform:translateX(4px)}

/* page header for simple pages */
.sv-page-head{padding:clamp(2rem,6vh,4rem) 0 1.5rem;border-bottom:1px solid var(--hairline);margin-bottom:2.5rem}
.sv-page-head h1{font-size:clamp(2rem,4vw,3rem);margin:.75rem 0 .5rem}
.sv-page-head p{color:var(--muted);max-width:64ch;margin:0}

/* ============ NAVBAR ============ */
.theme-nav{
  position:sticky;top:0;z-index:1030;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
  padding:0;
}
.theme-nav > .container-fluid{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--gutter);
  min-height:72px;
}
.brand-logo{height:44px;width:auto}
.theme-nav .navbar-brand{display:flex;align-items:center;gap:.6rem;padding:0;margin:0}
/* wordmark is set in caps; caps need positive tracking, not the tight
   negative tracking used for mixed-case display type */
.sv-brand-name{font-family:var(--font-display);font-weight:700;font-size:1.1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.sv-brand-name em{font-style:normal;color:var(--accent)}

.theme-nav .nav-link{
  position:relative;
  font-size:.875rem;font-weight:500;color:var(--muted);
  padding:.5rem .1rem;
  white-space:nowrap;
  transition:color var(--t-fast) var(--ease-out);
}
.theme-nav .nav-link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--accent);
  transform:scaleX(0);transform-origin:right center;
  transition:transform var(--t-med) var(--ease-out);
}
.theme-nav .nav-link:hover{color:var(--ink)}
.theme-nav .nav-link:hover::after{transform:scaleX(1);transform-origin:left center}
.theme-nav .nav-link.sv-nav-active{color:var(--ink);font-weight:600}
.theme-nav .nav-link.sv-nav-active::after{transform:scaleX(1)}

.sv-live-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-right:.35rem;vertical-align:middle;
  animation:svPulse 1.8s var(--ease-in-out) infinite;
}
@keyframes svPulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(91,75,196,.35)}
  50%{opacity:.6;box-shadow:0 0 0 5px rgba(91,75,196,0)}
}

/* search pill */
.sv-desktop-search,.nav-search-sm{
  display:flex;align-items:center;gap:.4rem;
  border:1px solid var(--hairline);border-radius:99px;
  padding:0 .35rem 0 .9rem;height:44px;
  background:var(--bg);
  transition:border-color var(--t-fast) var(--ease-out);
}
.sv-desktop-search:focus-within,.nav-search-sm:focus-within{border-color:var(--accent)}
.sv-desktop-search .form-control,.nav-search-sm .form-control{
  border:none;outline:none;box-shadow:none;background:transparent;
  font-size:.85rem;height:100%;padding:0;min-width:150px;color:var(--ink);
}
.sv-desktop-search .form-control::placeholder,.nav-search-sm .form-control::placeholder{color:var(--muted)}
.btn-search,.search-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:99px;border:none;background:transparent;color:var(--muted);
  transition:color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out);
  cursor:pointer;
}
.btn-search:hover,.search-btn:hover{color:var(--ink);background:var(--bg-soft)}

/* icon buttons (cart etc.) */
.sv-icon-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-width:44px;height:44px;border-radius:99px;padding:0 .5rem;
  color:var(--ink);
  transition:background var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out);
}
.sv-icon-btn:hover{background:var(--bg-soft);color:var(--ink)}
.sv-icon-btn:active{transform:scale(.97)}
.sv-cart-count{
  position:absolute;top:1px;right:-2px;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--accent);color:#fff;
  font-size:.65rem;font-weight:700;line-height:18px;text-align:center;
  border-radius:99px;font-variant-numeric:tabular-nums;
}
.sv-cart-count:empty{display:none}
.sv-cart-count.bump{animation:svBump .45s var(--ease-out)}
@keyframes svBump{
  0%{transform:scale(1)}35%{transform:scale(1.45)}70%{transform:scale(.92)}100%{transform:scale(1)}
}

/* register / pill CTA in nav */
.sv-register-link{
  display:inline-flex;align-items:center;
  height:40px;padding:0 1.1rem;
  background:var(--ink);color:#fff;
  border-radius:99px;font-size:.85rem;font-weight:600;
  transition:background var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out);
}
.theme-nav .nav-link.sv-register-link{color:#fff;padding:0 1.1rem}
.theme-nav .nav-link.sv-register-link::after{display:none}
.sv-register-link:hover{background:var(--accent);color:#fff}
.sv-register-link:active{transform:scale(.97)}
.sv-logout-link{border:none;background:none}

/* staff shortcut in the storefront nav */
.theme-nav .nav-link.sv-staff-link{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .75rem;border:1px solid var(--hairline);border-radius:99px;
  color:var(--ink);font-weight:600;
}
.theme-nav .nav-link.sv-staff-link::after{display:none}
.theme-nav .nav-link.sv-staff-link:hover{border-color:var(--accent);color:var(--accent-ink)}

/* the storefront nav must never collide with the brand */
.theme-nav .navbar-brand{flex-shrink:0}
.theme-nav .sv-nav-left{min-width:0}

/* hamburger (light) */
.theme-nav .navbar-toggler{border:1px solid var(--hairline);border-radius:var(--r-sm);padding:.45rem .6rem}
.theme-nav .navbar-toggler:focus{box-shadow:none;outline:2px solid var(--accent);outline-offset:2px}
.theme-nav .navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%230F172A' stroke-width='2.4' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* dropdown */
.dropdown-menu,.sv-dropdown{
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-pop);
  padding:.5rem;
  background:var(--bg);
}
.dropdown-item{
  border-radius:var(--r-sm);
  font-size:.875rem;font-weight:500;color:var(--ink);
  padding:.55rem .8rem;
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
}
.dropdown-item:hover,.dropdown-item:focus{background:var(--accent-soft);color:var(--accent-ink)}
.dropdown-divider{border-color:var(--hairline);opacity:1}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);
  font-size:.9rem;font-weight:600;letter-spacing:.01em;
  border-radius:var(--r-sm);
  padding:.6rem 1.3rem;
  min-height:44px;
  border:1px solid transparent;
  transition:transform var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
  will-change:transform;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:none}

.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff;box-shadow:0 12px 24px -10px rgba(91,75,196,.45)}
.btn-primary:active{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}

.btn-secondary,.btn-light,.btn-outline-primary,.btn-outline-secondary,.btn-outline-dark{
  background:var(--bg);border:1px solid var(--hairline);color:var(--ink);
}
.btn-secondary:hover,.btn-light:hover,.btn-outline-primary:hover,.btn-outline-secondary:hover,.btn-outline-dark:hover{
  background:var(--bg);border-color:var(--ink);color:var(--ink);
}

.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-dark:hover{background:var(--accent);border-color:var(--accent);color:#fff}

.btn-success{background:var(--success);border-color:var(--success);color:#fff}
.btn-success:hover{background:#065F46;border-color:#065F46;color:#fff}

.btn-danger,.btn-outline-danger{background:var(--bg);border:1px solid var(--danger);color:var(--danger)}
.btn-danger:hover,.btn-outline-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}

.btn-warning{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.btn-warning:hover{background:var(--warn);border-color:var(--warn);color:#fff}

.btn-link{font-family:var(--font-body);color:var(--accent-ink);text-decoration:none;min-height:0}
.btn-link:hover{color:var(--ink)}

.btn-sm{min-height:36px;padding:.35rem .9rem;font-size:.8rem}
.btn-lg{min-height:52px;padding:.7rem 1.6rem;font-size:.95rem}

/* arrow that slides inside primary CTAs */
.btn .sv-arrow{transition:transform var(--t-med) var(--ease-out)}
.btn:hover .sv-arrow{transform:translateX(4px)}

/* ============ FORMS ============ */
.form-control,.form-select,textarea.form-control{
  border:1px solid var(--hairline);
  border-radius:var(--r-sm);
  min-height:44px;
  font-size:.95rem;
  color:var(--ink);
  background:var(--bg);
  transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out);
}
.form-control:focus,.form-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 .2rem rgba(91,75,196,.12);
}
.form-label{font-weight:600;font-size:.875rem;margin-bottom:.35rem}
.form-text{color:var(--muted);font-size:.8rem}
label{font-weight:500}

/* ============ CARDS (generic bootstrap) ============ */
.card{
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  background:var(--bg);
  transition:box-shadow var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out);
}
.card:hover{box-shadow:var(--shadow-hover)}
.card-header{background:var(--bg-soft);border-bottom:1px solid var(--hairline);font-family:var(--font-display);font-weight:600}
.card-footer{background:var(--bg-soft);border-top:1px solid var(--hairline)}

/* ============ PRODUCT CARD ============ */
.browse-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.5rem 1.25rem;
}
@media(max-width:1200px){.browse-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.browse-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phones keep 2 columns: 1-up wastes half the screen and makes scrolling endless */
@media(max-width:575.98px){.browse-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem .7rem}}
@media(max-width:359px){.browse-grid{grid-template-columns:1fr}}

.sv-product-card,.browse-card-container{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--bg);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  padding:1rem 1rem 1.25rem;
  transition:box-shadow var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out);
  transform-style:preserve-3d;
  will-change:transform;
}
.sv-product-card:hover{box-shadow:var(--shadow-hover);border-color:transparent}

.sv-product-media,.browse-card-img{
  position:relative;
  aspect-ratio:63/88;
  background:var(--bg-soft);
  border-radius:var(--r-sm);
  overflow:hidden;
  margin-bottom:1rem;
  display:flex;align-items:center;justify-content:center;
}
.sv-product-media img,.browse-card-img img{
  width:100%;height:100%;object-fit:contain;
  padding:.75rem;
  transition:transform 900ms var(--ease-out);
}
.sv-product-card:hover .sv-product-media img,
.sv-product-card:hover .browse-card-img img{transform:scale(1.04)}
.sv-product-placeholder{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;color:var(--muted);font-size:2rem;
}

.sv-title-row{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:.4rem .6rem;margin-bottom:.2rem;
  /* when the name genuinely cannot share the line, the badge drops below
     instead of being pushed outside the card */
  flex-wrap:wrap;
}
.sv-product-name{
  margin:0;font-size:1rem;line-height:1.3;
  /* flex children default to min-width:auto, so a long unbreakable product
     name ("Monkey.D.Luffy (ST29-001)…") refused to shrink and shoved the
     brand badge past the card edge */
  min-width:0;flex:1 1 8ch;
  overflow-wrap:anywhere;
}
.sv-product-name a{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;color:var(--ink);
}
.sv-product-name a:hover{color:var(--accent-ink)}

.sv-brand-mini-badge{
  flex-shrink:0;max-width:100%;
  font-family:var(--font-display);
  font-size:.62rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);
  background:var(--accent-soft);
  border-radius:4px;
  padding:.22rem .5rem;
  overflow-wrap:anywhere;
}

.sv-product-info{font-size:.8rem;color:var(--muted);margin-bottom:.6rem;display:grid;gap:.1rem}
.sv-product-info-row{display:flex;gap:.4rem}
.sv-product-info-row strong{color:var(--ink);font-weight:600}

.sv-price-box,.sv-price-main{display:flex;align-items:baseline;gap:.55rem;margin-bottom:.35rem}
.new-price,.sv-price-main{
  font-family:var(--font-display);
  font-size:1.15rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.old-price{font-size:.85rem;color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums}

/* stock states */
.sv-stock-line,.sv-low-stock{
  display:flex;align-items:center;gap:.45rem;
  font-size:.78rem;font-weight:500;color:var(--muted);
  margin-bottom:.9rem;
}
.sv-stock-line::before,.sv-low-stock::before{
  content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--muted);
}
.sv-stock-line.in{color:var(--success)}
.sv-stock-line.in::before{background:var(--success)}
.sv-stock-line.out{color:var(--muted)}
.sv-low-stock{color:var(--warn);font-weight:600}
.sv-low-stock::before{background:var(--warn)}

/* ribbons */
.sv-discount-ribbon,.sv-early-ribbon{
  position:absolute;top:.75rem;left:.75rem;z-index:2;
  font-family:var(--font-display);font-size:.7rem;font-weight:700;
  letter-spacing:.06em;
  border-radius:4px;padding:.25rem .55rem;
  font-variant-numeric:tabular-nums;
}
.sv-discount-ribbon{background:var(--accent);color:#fff}
.sv-early-ribbon{background:var(--ink);color:#fff}

/* wishlist */
.wishlist-float{position:absolute;top:.6rem;right:.6rem;z-index:2;margin:0}
.wishlist-btn{
  width:44px;height:44px;border-radius:99px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);
  border:1px solid var(--hairline);
  color:var(--muted);font-size:1rem;
  transition:color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);
  cursor:pointer;
}
.wishlist-btn:hover{color:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.wishlist-btn:active{transform:scale(.94)}
.wishlist-btn.active,.wishlist-btn[data-active="1"]{color:var(--accent);border-color:var(--accent)}

/* card actions */
.sv-product-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:auto}
/* the Add button lives inside a <form>; both must fill their grid cell */
.sv-product-actions form{width:100%;margin:0}
.sv-product-actions .btn{width:100%}
.sv-add-btn{
  background:var(--ink);color:#fff;border-color:var(--ink);
  font-size:.83rem;
}
.sv-add-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.sv-view-btn{
  background:var(--bg);border:1px solid var(--hairline);color:var(--muted);
  font-size:.83rem;
}
.sv-view-btn:hover{color:var(--ink);border-color:var(--ink);background:var(--bg)}
.sv-edit-btn{background:var(--bg);border:1px solid var(--hairline);color:var(--ink);font-size:.83rem}
.sv-edit-btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.sv-early-btn{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-soft);font-size:.83rem}

/* add-to-cart feedback states (design.js) */
.btn.is-adding{opacity:.7;pointer-events:none}
.btn.is-added,.btn.is-added:hover{
  background:var(--success);border-color:var(--success);color:#fff;
  animation:svAdded .35s var(--ease-out);
}
@keyframes svAdded{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}

/* VAT badge */
.sv-vat-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.75rem;font-weight:600;color:var(--success);
  background:var(--success-soft);
  border-radius:99px;padding:.3rem .8rem;
}

/* ============ ALERTS / TOASTS / BADGES ============ */
.alert{
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  font-size:.9rem;
  padding:.85rem 1.1rem;
}
.alert-success{background:var(--success-soft);border-color:#A7F3D0;color:var(--success)}
.alert-info{background:var(--info-soft);border-color:#BFDBFE;color:var(--info-ink)}
.alert-warning{background:var(--warn-soft);border-color:#FDE68A;color:var(--warn)}
.alert-danger,.alert-error{background:var(--danger-soft);border-color:#FECACA;color:var(--danger)}

.badge{font-family:var(--font-display);font-weight:600;letter-spacing:.04em}
.badge.bg-primary{background:var(--accent) !important}
.badge.bg-success{background:var(--success) !important}
.badge.bg-warning{background:var(--warn) !important;color:#fff}
.badge.bg-danger{background:var(--danger) !important}

.toast{border:1px solid var(--hairline);border-radius:var(--r-md);box-shadow:var(--shadow-pop)}

/* ============ MODALS ============ */
.modal-content{
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-pop);
}
.modal-header{border-bottom:1px solid var(--hairline)}
.modal-header .modal-title{font-family:var(--font-display);font-weight:700}
.modal-footer{border-top:1px solid var(--hairline)}
.modal-backdrop.show{opacity:.45}

/* ============ TABLES ============ */
.table{border-color:var(--hairline)}
.table thead th{
  font-family:var(--font-display);font-size:.75rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--hairline);
}
.table td{vertical-align:middle}

/* ============ PAGINATION ============ */
.pagination .page-link{
  border:1px solid var(--hairline);color:var(--ink);
  min-width:40px;text-align:center;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out);
}
.pagination .page-link:hover{background:var(--bg-soft);border-color:var(--ink);color:var(--ink)}
.pagination .page-item.active .page-link{background:var(--ink);border-color:var(--ink);color:#fff}

/* ============ FOOTER ============ */
.site-footer,.sv-site-footer{
  background:var(--bg-soft);
  border-top:1px solid var(--hairline);
  color:var(--ink);
  margin-top:2.5rem;
  padding:clamp(2.5rem,5vh,3.5rem) 0 0;
}
footer.site-footer:not(:first-of-type){display:none}
.sv-footer-grid{
  display:grid;
  grid-template-columns:1.5fr .8fr .8fr 1fr;
  gap:2.5rem;
  padding-bottom:3rem;
}
@media(max-width:900px){.sv-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.sv-footer-grid{grid-template-columns:1fr}}
.sv-footer-logo-row{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.sv-footer-logo{height:44px;width:auto}
.sv-footer-title{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase}
.sv-footer-subtitle{font-size:.8rem;color:var(--muted)}
.sv-footer-text{font-size:.875rem;color:var(--muted);max-width:36ch}
.sv-footer-social{display:flex;gap:.5rem;margin-top:1.1rem}
.sv-footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border:1px solid var(--hairline);border-radius:10px;
  color:var(--muted);
  transition:color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);
}
.sv-footer-social a:hover{color:var(--accent-ink);border-color:var(--accent)}
.sv-footer-col h6{
  font-family:var(--font-display);
  font-size:.6875rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.1rem;
}
.sv-footer-col a{
  display:block;
  font-size:.9rem;color:var(--ink);
  padding:.3rem 0;min-height:32px;
  transition:color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out);
}
.sv-footer-col a:hover{color:var(--accent-ink);transform:translateX(2px)}
.sv-footer-trust span{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--muted);padding:.3rem 0}
.sv-footer-trust svg{color:var(--success);flex-shrink:0}
.sv-footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--hairline);
  padding:1.25rem 0 1.5rem;
  font-size:.8rem;color:var(--muted);
}

/* ============ IMAGE PREVIEW MODAL ============ */
.card-img-clickable{cursor:zoom-in}
#imageModal .modal-content{background:transparent;border:none;box-shadow:none}
#imageModal img{border-radius:var(--r-md);box-shadow:var(--shadow-pop)}

/* ============ FILTER CHIPS (browse) ============ */
.sv-filter-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--hairline);border-radius:99px;
  background:var(--bg);
  font-size:.8rem;font-weight:500;color:var(--ink);
  padding:.35rem .9rem;
  transition:border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out);
}
.sv-filter-chip:hover{border-color:var(--ink)}
.sv-filter-chip.active{background:var(--ink);border-color:var(--ink);color:#fff}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
  .sv-product-card,.browse-card-container{transform:none !important}
}