@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ===== RESET ===== */

*{ box-sizing:border-box; }

:root{
  --bg-base:#fff8f5;
  --bg-grad-1:#fff8f2;
  --bg-grad-2:#ffeae1;
  --bg-grad-3:#f7f6ff;
  --surface-light:rgba(255,255,255,.72);
  --surface-border:rgba(255,255,255,.65);
  --text-glow:
    0 0 1px rgba(255,255,255,.75),
    0 0 8px rgba(196,23,29,.12),
    0 0 16px rgba(255,138,67,.09);
}

html{
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:'Inter', Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 8% -5%, rgba(196,23,29,.14), transparent 58%),
    radial-gradient(900px 700px at 95% 10%, rgba(255,145,74,.16), transparent 60%),
    linear-gradient(140deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 45%, var(--bg-grad-3) 100%);
  background-color:var(--bg-base);
  color:#111;
  transition:background-color .35s, color .35s;
  min-height:100vh;
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
  text-shadow:var(--text-glow);
}

body::before,
body::after{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:-1;
}

body::before{
  width:460px;
  height:460px;
  left:-140px;
  top:35vh;
  border-radius:50%;
  background:radial-gradient(circle, rgba(196,23,29,.16), rgba(196,23,29,0) 72%);
  filter:blur(8px);
  animation:blobDriftA 14s ease-in-out infinite alternate;
  will-change:transform;
}

body::after{
  width:540px;
  height:540px;
  right:-180px;
  top:8vh;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,138,67,.18), rgba(255,138,67,0) 72%);
  filter:blur(10px);
  animation:blobDriftB 16s ease-in-out infinite alternate;
  will-change:transform;
}

/* ===== PAGE OPEN ANIMATION ===== */

body.preload{
  opacity:0;
  transform:translateY(30px);
}

body.loaded{
  opacity:1;
  transform:none;
  transition:opacity 1.3s ease, transform 1.3s ease;
}

.assemble-piece{
  opacity:0;
  filter:blur(6px);
  transform:
    translate3d(var(--assemble-x, 0), var(--assemble-y, 36px), 0)
    scale(var(--assemble-s, .975))
    rotate(var(--assemble-r, 0deg));
  transform-origin:center center;
  will-change:transform, opacity, filter;
}

body.loaded .assemble-piece{
  opacity:1;
  filter:blur(0);
  transform:translate3d(0, 0, 0) scale(1) rotate(0deg);
  transition:
    opacity 1.1s ease,
    filter 1.35s ease,
    transform 1.8s cubic-bezier(.16,.86,.22,1);
  transition-delay:var(--assemble-delay, 0ms);
}

@keyframes blobDriftA{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(56px,-46px,0) scale(1.15); }
}

@keyframes blobDriftB{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(-64px,58px,0) scale(1.18); }
}

@keyframes riseIn{
  from{
    opacity:0;
    transform:translateY(26px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes softPulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(196,23,29,.26); }
  50%{ box-shadow:0 0 0 10px rgba(196,23,29,0); }
}

.reveal-on-scroll{
  opacity:0;
  filter:blur(3px);
  transition:
    opacity .75s ease,
    transform .85s cubic-bezier(.2,.7,.15,1),
    filter .85s ease;
  animation:none !important;
}

.reveal-on-scroll[data-reveal="left"]{
  transform:translate3d(-42px, 12px, 0) scale(.985);
}

.reveal-on-scroll[data-reveal="right"]{
  transform:translate3d(42px, 12px, 0) scale(.985);
}

.reveal-on-scroll[data-reveal="up"]{
  transform:translate3d(0, 44px, 0) scale(.985);
}

.reveal-on-scroll.is-visible{
  opacity:1;
  filter:blur(0);
  transform:translate3d(0, 0, 0) scale(1);
}

.interactive-lift{
  transform-style:preserve-3d;
  transition:transform .22s ease, box-shadow .22s ease;
  will-change:transform;
}

.interactive-lift[data-tilt-active="1"]{
  transform:perspective(920px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px);
}

/* curtain open */

#pageCurtain{
  position:fixed;
  inset:0;
  background:#111;
  z-index:9999;
  transform:scaleY(1);
  transform-origin:top;
  transition:transform 1.6s ease;
  will-change:transform;
}

body.loaded #pageCurtain{
  transform:scaleY(0);
}

#scrollProgress{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:3px;
  transform-origin:left center;
  transform:scaleX(0);
  background:linear-gradient(90deg, #c4171d, #ff8a43 55%, #ffce8f);
  box-shadow:0 0 14px rgba(196,23,29,.5);
  z-index:4000;
  pointer-events:none;
}

.cursor-spotlight{
  position:fixed;
  width:280px;
  height:280px;
  left:0;
  top:0;
  border-radius:50%;
  pointer-events:none;
  z-index:1200;
  opacity:0;
  transform:translate3d(-50%, -50%, 0);
  transition:opacity .2s ease;
  background:radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 68%);
  mix-blend-mode:soft-light;
}

body.spotlight-on .cursor-spotlight{
  opacity:1;
}

body.all-products-page{
  background:#f6f7fb !important;
  background-image:none !important;
  text-shadow:none !important;
}

body.all-products-page::before,
body.all-products-page::after{
  display:none !important;
  content:none !important;
}

body.dark.all-products-page{
  background:#0f1520 !important;
  background-image:none !important;
}

/* ===== HEADER ===== */

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:1400;
  padding:28px 40px;
  border-bottom:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
}

.logo img{
  height:126px;
}

.nav{
  display:flex;
  align-items:center;
}

.nav a{
  margin:0 14px;
  text-decoration:none;
  font-weight:600;
  color:#333;
}

.auth-welcome-item{
  margin:0 12px;
  font-weight:700;
  color:#8d1f19;
  white-space:nowrap;
}

.auth-signout-btn{
  margin-left:10px;
  border:1px solid rgba(196,23,29,.35);
  background:rgba(255,255,255,.85);
  color:#8d1f19;
  font-weight:700;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
}

.auth-signout-btn:hover{
  background:#c4171d;
  color:#fff;
}

#searchInput{
  padding:11px 14px;
  border-radius:9px;
  border:1px solid #ccc;
  width:240px;
}

.header-actions{
  display:flex;
  gap:10px;
}

/* ===== MOBILE NAV ===== */

.mobile-nav{
  position:fixed;
  right:0;
  top:0;
  height:100vh;
  width:260px;
  background:white;
  padding:40px 30px;
  display:flex;
  flex-direction:column;
  gap:18px;
  transform:translateX(100%);
  transition:transform .35s ease;
  box-shadow:-6px 0 20px rgba(0,0,0,.15);
  z-index:2000;
}

.mobile-nav a{
  text-decoration:none;
  font-weight:700;
  font-size:18px;
  padding:14px 16px;
  border-radius:12px;
  background:#f3f4f7;
  color:#1a1a1a;
  transition:.2s ease;
  border:1px solid #e3e6ec;
}

.mobile-nav a:hover{
  background:#c4171d;
  color:white;
  transform:translateX(6px);
  box-shadow:0 8px 18px rgba(196,23,29,.25);
}

.mobile-nav.open{
  transform:translateX(0);
}

.mobile-nav .auth-welcome-item{
  display:block;
  padding:12px 14px;
  border-radius:12px;
  background:#fff3ef;
  border:1px solid #ffd7cb;
  margin:4px 0;
}

.mobile-nav .auth-signout-btn{
  width:100%;
  margin:0;
  padding:13px 14px;
  font-size:16px;
}

/* ===== MOBILE MENU BACKDROP ===== */

#menuBackdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:1500;
}

#menuBackdrop.show{
  opacity:1;
  pointer-events:auto;
}

/* ===== MOBILE MENU CLOSE BUTTON ===== */

.menu-close{
  align-self:flex-end;
  font-size:20px;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid #ddd;
  background:white;
  margin-bottom:10px;
}

.menu-close:hover{
  background:#c4171d;
  color:white;
  transform:scale(1.08);
}

body.dark .menu-close{
  background:#1a1f2a;
  border:1px solid #2a3242;
  color:#e6eaf2;
}

body.dark .menu-close:hover{
  background:#ff4d4d;
  color:white;
}

/* ===== HERO ===== */

.hero{
  position:relative;
  --hero-mx:0;
  --hero-my:0;
  padding:100px 40px;
  min-height:540px;
  overflow:hidden;
  color:#fff;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.35), rgba(0,0,0,.45));
  z-index:1;
}

.hero-montage{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  z-index:0;
}

.hero-panel{
  position:relative;
  overflow:hidden;
}

.hero-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:translate3d(0,0,0) scale(1.02);
  transition:transform .65s cubic-bezier(.2,.7,.1,1);
}

.hero-panel-left img{ object-position:left center; }
.hero-panel-center img{ object-position:center center; }
.hero-panel-right img{ object-position:right center; }

.hero[data-parallax-enabled="true"] .hero-panel-left img{
  transform:translate3d(calc(var(--hero-mx) * -14px), calc(var(--hero-my) * -10px), 0) scale(1.08);
}

.hero[data-parallax-enabled="true"] .hero-panel-center img{
  transform:translate3d(calc(var(--hero-mx) * -7px), calc(var(--hero-my) * -6px), 0) scale(1.06);
}

.hero[data-parallax-enabled="true"] .hero-panel-right img{
  transform:translate3d(calc(var(--hero-mx) * 14px), calc(var(--hero-my) * -10px), 0) scale(1.08);
}

.hero-panel:not(:last-child)::after{
  content:"";
  position:absolute;
  top:0;
  right:-1px;
  width:36px;
  height:100%;
  background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.24));
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:720px;
  animation:riseIn .9s ease .1s both;
}

.hero-welcome{
  margin:0 0 10px;
  font-weight:800;
  font-size:18px;
  color:#ffd9d0;
  letter-spacing:.02em;
}

.hero-content h1{
  font-size:46px;
  margin-bottom:14px;
}

.hero-content p{
  font-size:18px;
  color:#f1f1f1;
}

.hero-buttons{
  display:flex;
  gap:16px;
  margin-top:26px;
}

@media (max-width: 1100px){
  .hero{
    min-height:460px;
  }

  .hero-montage{
    grid-template-columns:1fr;
  }

  .hero-panel-center,
  .hero-panel-right{
    display:none;
  }

  .hero-content{
    max-width:560px;
  }
}

.btn-primary{
  background:#c4171d;
  color:white;
  border:none;
  padding:14px 22px;
  border-radius:10px;
  cursor:pointer;
  animation:softPulse 4.2s ease-in-out infinite;
}

.btn-outline{
  background:none;
  border:2px solid #c4171d;
  color:#c4171d;
  padding:14px 22px;
  border-radius:10px;
  cursor:pointer;
}

/* ===== CATEGORIES ===== */

.categories{
  padding:80px 40px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}

.card{
  background:var(--surface-light);
  border:1px solid var(--surface-border);
  backdrop-filter:blur(5px);
  padding:34px;
  border-radius:14px;
  font-weight:600;
  transition:.25s;
  animation:riseIn .65s ease both;
  text-decoration:none;
  color:inherit;
  display:block;
}

.categories .card{
  cursor:pointer;
  transition:transform .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.categories .card:focus-visible{
  outline:3px solid rgba(196,23,29,.35);
  outline-offset:3px;
}

.categories .card:hover{
  transform:translateY(-4px);
  background:#c4171d;
  border-color:#c4171d;
  color:#fff;
  box-shadow:0 10px 22px rgba(196,23,29,.3);
}

body.dark .categories .card:hover{
  background:#ff4d4d;
  border-color:#ff4d4d;
  color:#111;
  box-shadow:0 10px 22px rgba(255,77,77,.35);
}

.card:hover{
  transform:translateY(-6px);
}

/* ===== TRUST ===== */

.trust{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(5px);
  padding:60px;
  border-top:1px solid rgba(255,255,255,.4);
  border-bottom:1px solid rgba(255,255,255,.4);
}

.trust-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
  font-weight:700;
}

/* ===== DARK MODE ===== */

body.dark{
  --bg-base:#0d1018;
  --bg-grad-1:#0e1119;
  --bg-grad-2:#151a25;
  --bg-grad-3:#101723;
  --text-glow:
    0 0 1px rgba(255,255,255,.85),
    0 0 10px rgba(255,109,109,.18),
    0 0 20px rgba(107,156,255,.14);
  color:#e8e8e8;
}

body.dark .header{
  background:rgba(15,20,31,.74);
  border-color:#2a2f38;
}

body.dark .nav a{
  color:#d6d9df;
}

body.dark .auth-welcome-item{
  color:#ffb5a7;
}

body.dark .auth-signout-btn{
  background:#1a1f2a;
  border-color:#3b485f;
  color:#ffd7cd;
}

body.dark .auth-signout-btn:hover{
  background:#ff4d4d;
  color:#fff;
}

body.dark .card{
  background:rgba(26,31,42,.8);
  border-color:rgba(45,56,75,.85);
}

body.dark .trust{
  background:rgba(14,20,32,.72);
  border-top:1px solid rgba(41,52,72,.7);
  border-bottom:1px solid rgba(41,52,72,.7);
}

body.dark #searchInput{
  background:#10141c;
  border:1px solid #2c3342;
  color:white;
}

body.dark .mobile-nav{
  background:#12151b;
}

body.dark .mobile-nav a{
  background:#1a1f2a;
  border:1px solid #2a3242;
  color:#e6eaf2;
}

body.dark .mobile-nav a:hover{
  background:#ff4d4d;
  color:white;
  box-shadow:0 8px 18px rgba(255,77,77,.25);
}

body.dark .mobile-nav .auth-welcome-item{
  background:#1a1f2a;
  border-color:#2f3b52;
}

button{
  font-family:inherit;
  font-weight:600;
  border-radius:12px;
  padding:12px 18px;
  cursor:pointer;
  border:none;
  transition:.22s ease;
  /* default button colors adapt to current mode */
  background:#fff;
  color:#111;
}

/* ensure plain buttons respect dark mode too */
body.dark button{
  background:#1a1f2a;
  color:#e6eaf2;
}

/* underline effect on hover (matches nav links) */
button:hover{
  text-decoration:underline;
  text-decoration-color:#c4171d;
}

/* primary red */
.btn-primary{
  background:#c4171d;
  color:white;
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(196,23,29,.35);
}

/* outline */
.btn-outline{
  background:none;
  border:2px solid #c4171d;
  color:#c4171d;
}

.btn-outline:hover{
  background:#c4171d;
  color:white;
  transform:translateY(-2px);
}

button.is-loading{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  pointer-events:none;
  opacity:.95;
}

.btn-spinner{
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation:btnSpin .7s linear infinite;
}

.btn-outline .btn-spinner{
  border-color:rgba(196,23,29,.35);
  border-top-color:#c4171d;
}

body.dark .btn-outline .btn-spinner{
  border-color:rgba(255,77,77,.35);
  border-top-color:#ff4d4d;
}

.loading-dots{
  display:inline-block;
  min-width:16px;
  text-align:left;
}

.loading-dots::after{
  content:"...";
  animation:loadingDots 1s steps(4, end) infinite;
}

@keyframes btnSpin{
  to{ transform:rotate(360deg); }
}

@keyframes loadingDots{
  0%{ content:""; }
  25%{ content:"."; }
  50%{ content:".."; }
  75%, 100%{ content:"..."; }
}

/* click press */
button:active{
  transform:translateY(1px) scale(.98);
}

body.dark .btn-outline{
  border-color:#ff4d4d;
  color:#ff4d4d;
}

/* Screen-reader only utility */
.sr-only{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

#menuBtn{
  font-size:22px;
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  border-radius:12px;
  border:1px solid #ddd;
  background:white;
  position:relative;
  top:auto;
  right:auto;
  z-index:auto;
}

#menuBtn:hover{
  background:#f3f3f3;
  transform:scale(1.08);
}

body.dark #menuBtn{
  background:#1a1f2a;
  border:1px solid #2a3242;
  color:white;
}

#menuBtn.menu-opened{
  background:#c4171d;
  color:#fff;
  border-color:#c4171d;
}

#darkToggle{
  font-size:18px;
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  border-radius:12px;
  border:1px solid #ddd;
  background:white;
}

#darkToggle:hover{
  background:#f3f3f3;
  transform:scale(1.08);
}

body.dark #darkToggle{
  background:#1a1f2a;
  border:1px solid #2a3242;
  color:white;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}.nav a{
  position:relative;
}

.nav a::after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:0;
  width:0;
  height:2px;
  background:#c4171d;
  transition:.25s;
}

.nav a:hover::after{
  width:100%;
}

#searchInput{
  padding:12px 16px;
  border-radius:12px;
  border:1px solid #ddd;
  transition:.2s;
}

#searchForm{
  position:relative;
}

#searchInput:focus{
  outline:none;
  border-color:#c4171d;
  box-shadow:0 0 0 3px rgba(196,23,29,.15);
}

.search-suggestions{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  display:none;
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  z-index:1800;
  overflow:hidden;
}

.search-suggestions.show{
  display:block;
}

.search-suggestion{
  width:100%;
  text-align:left;
  border:0;
  border-bottom:1px solid #efefef;
  border-radius:0;
  padding:11px 13px;
  background:#fff;
  color:#111;
  display:grid;
  gap:4px;
}

.search-suggestion:last-child{
  border-bottom:0;
}

.search-suggestion strong{
  font-size:14px;
  font-weight:700;
}

.search-suggestion small{
  color:#666;
  font-size:12px;
}

.search-suggestion span{
  color:#666;
  font-size:12px;
}

.search-suggestion:hover{
  background:#fff5f5;
  text-decoration:none;
}

body.dark .search-suggestions{
  background:#111722;
  border-color:#2a3242;
  box-shadow:0 10px 24px rgba(0,0,0,.42);
}

body.dark .search-suggestion{
  background:#111722;
  color:#ecf0f8;
  border-bottom:1px solid #232c3b;
}

body.dark .search-suggestion:hover{
  background:#1a2333;
}

body.dark .search-suggestion small,
body.dark .search-suggestion span{
  color:#b9c2d1;
}

body.menu-open{
  overflow:hidden;
}

#menuBackdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:1500;
}
#menuBackdrop.show{
  opacity:1;
  pointer-events:auto;
}
body.menu-open{
  overflow:hidden;
}

/* ===== POLISHED SECTIONS (Brands / Catalog / Login) ===== */

/* sidebar categories in catalog page (no longer used) */
/* old .cat-btn styles preserved just in case */
.cat-btn{
  background:#c4171d;
  color:white;
  border:none;
  border-radius:8px;
  padding:10px 14px;
  text-align:left;
  cursor:pointer;
  font-weight:600;
  transition:.2s;
}
.cat-btn:hover{
  background:#a31416;
}
body.dark .cat-btn{
  background:#ff4d4d;
  color:#111;
}
body.dark .cat-btn:hover{
  background:#d13b3b;
}

/* category card grid on catalog page */

/* general page title centered */
.page-title{ text-align:center; margin:24px 0; }

/* wrap catalog page sections in a centered container */
.layout{ max-width:1000px; margin:0 auto; }

.catalog-categories{
  padding:40px 20px 20px;
  text-align:center;
}
.catalog-categories h3{
  margin:0 auto 20px;
  font-size:26px;
}
.catalog-categories .category-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

@media (max-width: 1100px){
  .catalog-categories .category-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 820px){
  .catalog-categories .category-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 520px){
  .catalog-categories .category-grid{
    grid-template-columns:1fr;
  }
}
.category-card{
  background:#1a1f2a;
  border:1px solid #2f3848;
  backdrop-filter:blur(5px);
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:16px;
  transition:.2s;
  width:100%;
  animation:riseIn .7s ease both;
}
.category-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.1);
}
.category-card .thumb{
  width:100%;
  height:145px;
  background:#fff;
  border:1px solid #efefef;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#888;
  font-size:14px;
  margin-bottom:16px;
  overflow:hidden;
}
.category-card img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  margin-bottom:16px;
}
.category-card .thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
  margin:0;
  border-radius:12px;
}
.category-card .category-btn{
  /* use outline style rather than solid red */
  display:block;
  background:none;
  border:2px solid #c4171d;
  color:#c4171d;
  border-radius:8px;
  padding:14px 22px;
  cursor:pointer;
  font-weight:600;
  width:100%;
  min-height:60px;
  font-size:15px;
  transition:.2s;
  white-space:normal;
}
.category-card .category-btn:hover{
  background:#c4171d;
  color:white;
}

.category-card .category-btn.category-btn-logo{
  display:flex;
  align-items:center;
  justify-content:center;
}

.category-card .category-btn.category-btn-logo img{
  width:auto;
  height:30px;
  max-width:170px;
  margin:0;
  object-fit:contain;
  background:transparent;
}
body.dark .category-card{
  background:#1a1f2a;
  border-color:#2f3848;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
body.dark .category-card .thumb{
  background:#fff;
  border-color:#efefef;
  color:#bbb;
}
body.dark .category-card .category-btn{
  background:none;
  border:2px solid #ff4d4d;
  color:#ff4d4d;
}
body.dark .category-card .category-btn:hover{
  background:#ff4d4d;
  color:#111;
}

/* all-products listing grid */
/* all-products listing grid */
.all-products{
  padding:40px 20px;
  max-width:1400px;
  margin:0 auto;
  text-align:center;
}

.all-products .product-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}

@media (max-width: 1100px){
  .all-products .product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 820px){
  .all-products .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 520px){
  .all-products .product-grid{
    grid-template-columns:1fr;
  }
}

/* return button container */
.page-actions{
  padding:26px 0 14px;
  text-align:center;
  position:relative;
  z-index:2;
}

.page-actions .btn-primary,
.page-actions .btn-outline{
  min-width:190px;
}

.page-actions + .section{
  border-top:none;
  padding-top:56px;
}

/* search bar under title */
.search-bar{
  margin:16px auto 28px;
  max-width:360px;
}
.search-bar input{
  width:100%;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid #ddd;
  transition:.2s;
}
.search-bar input:focus{
  outline:none;
  border-color:#c4171d;
  box-shadow:0 0 0 3px rgba(196,23,29,.15);
}

.address-suggestions-list{
  display:none;
  margin-top:6px;
  border:1px solid #d8d8d8;
  border-radius:10px;
  background:#fff;
  max-height:220px;
  overflow:auto;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.address-suggestion-item{
  width:100%;
  text-align:left;
  border:0;
  border-bottom:1px solid #efefef;
  border-radius:0;
  background:#fff;
  color:#111;
  padding:10px 12px;
  font-size:14px;
  line-height:1.35;
  text-decoration:none !important;
}

.address-suggestion-item:last-child{
  border-bottom:0;
}

.address-suggestion-item:hover{
  background:#fff3f3;
}

body.dark .address-suggestions-list{
  background:#12151b;
  border-color:#2b3344;
}

body.dark .address-suggestion-item{
  background:#12151b;
  color:#e6eaf2;
  border-bottom-color:#262f40;
}

body.dark .address-suggestion-item:hover{
  background:#1a2230;
}
.product-card{
  background:#fff;
  border:1px solid #ececec;
  backdrop-filter:blur(6px);
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:0 0 18px;
  transition:.2s;
  min-height:260px;
  overflow:hidden;
  animation:riseIn .75s ease both;
}
.product-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.1);
}
.product-card .prod-header{
  width:100%;
  padding:12px 14px;
  border-bottom:1px solid #ececec;
  text-align:left;
}
.product-card .prod-number{
  display:inline-block;
  padding:4px 8px;
  border:1px solid #d6d6d6;
  border-radius:8px;
  background:#fafafa;
  font-size:12px;
  color:#555;
  font-weight:700;
}

.fav-toggle{
  margin-left:auto;
  border:1px solid #d6d6d6;
  background:#fff;
  color:#c4171d;
  width:34px;
  height:34px;
  border-radius:50%;
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  text-decoration:none !important;
}

.fav-toggle:hover{
  transform:translateY(-1px);
  background:#fff5f5;
}

.fav-toggle.active{
  background:#c4171d;
  border-color:#c4171d;
  color:#fff;
}
.product-card .thumb{
  width:calc(100% - 24px);
  height:170px;
  background:#fff;
  border:1px solid #efefef;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#888;
  font-size:13px;
  margin:12px auto 12px;
}
.product-card img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  margin-bottom:16px;
}
.product-card .thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  margin:0;
  border-radius:10px;
  transform:none;
  transform-origin:center;
  transition:none;
}

.product-card:hover .thumb img{
  transform:none;
}
.product-card .prod-name{
  margin:0 12px 8px;
  font-size:18px;
  text-align:center;
}
.product-card .prod-link{
  color:inherit;
  text-decoration:none;
  display:block;
}
.product-card .prod-link:visited{
  color:inherit;
}
.product-card .thumb .prod-link{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-card .prod-name .prod-link:hover{
  text-decoration:underline;
}
.product-card .prod-size{
  font-size:15px;
  color:#666;
  text-align:center;
  padding:0 12px;
}

.prod-actions{
  margin:10px 12px 0;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
}

.add-cart-btn{
  padding:8px 12px;
}

.catalog-qty-controls{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.catalog-qty-controls .btn-outline{
  min-width:36px;
  min-height:36px;
  padding:0 10px;
  font-size:18px;
  line-height:1;
}

.catalog-qty-input{
  width:64px;
  text-align:center;
  border:1px solid #d4d9e3;
  border-radius:10px;
  padding:8px 6px;
  background:#fff;
  color:#111;
}

body.dark .catalog-qty-input{
  background:#121926;
  color:#e6eaf2;
  border-color:#2f3b52;
}
body.dark .product-card{
  background:#1a1f2a;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
body.dark .product-card .thumb{
  background:#fff;
  border-color:#efefef;
  color:#bbb;
}
body.dark .product-card .prod-header{
  border-bottom:1px solid #2a3242;
}
body.dark .product-card .prod-number{
  border-color:#384359;
  background:#121926;
}

body.dark .fav-toggle{
  background:#121926;
  border-color:#384359;
  color:#ff8f8f;
}

body.dark .fav-toggle.active{
  background:#ff4d4d;
  border-color:#ff4d4d;
  color:#111;
}

.empty-favorites{
  margin:8px 0;
  color:#b8bcc6;
  font-size:16px;
}

body:not(.dark) .empty-favorites{
  color:#555;
}
body.dark .product-card .prod-number,
body.dark .product-card .prod-size{
  color:#bbb;
}

.product-detail-layout{
  display:grid;
  grid-template-columns:minmax(300px, 520px) 1fr;
  gap:28px;
  align-items:start;
}

.product-detail-media{
  background:#fff;
  border:1px solid #ececec;
  border-radius:16px;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.product-detail-media img{
  width:100%;
  max-height:440px;
  object-fit:contain;
}


.product-detail-no-image{
  color:#777;
  text-align:center;
}

.product-detail-info h1{
  margin:0 0 12px;
  font-size:34px;
  line-height:1.2;
}

.product-detail-kicker{
  margin:0 0 10px;
  color:#c4171d;
  font-weight:700;
  letter-spacing:.02em;
}

.product-detail-meta{
  margin:6px 0;
  color:#fff;
}

.product-detail-actions{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
}

.product-detail-actions label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:14px;
  font-weight:700;
}

.product-detail-qty{
  width:110px;
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius:10px;
}

.product-card-link{
  text-decoration:none;
  color:inherit;
}
.product-card-link:visited{
  color:inherit;
}

body.product-detail-page{
  text-shadow:none;
}

body.product-detail-page *{
  text-shadow:none;
}

body.product-detail-page .product-detail-info h1{
  letter-spacing:0;
  line-height:1.25;
}

body.product-detail-page .product-detail-meta{
  line-height:1.45;
}

body.product-detail-page .product-detail-actions .btn-primary,
body.product-detail-page .product-detail-actions .btn-outline{
  text-decoration:none !important;
}


body.dark .product-detail-media{
  background:#fff;
}

@media (max-width: 900px){
  .product-detail-layout{
    grid-template-columns:1fr;
  }
  .product-detail-media{
    min-height:300px;
  }
  .product-detail-info h1{
    font-size:28px;
  }
}

.section{
  padding:80px 40px;
  border-top:1px solid rgba(255,255,255,.06);
  position:relative;
  min-height:auto;
  display:block;
}
/* Only center the change password card in the profile page */
.profile-page .login-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.section-head{
  max-width:900px;
  margin-bottom:24px;
}

.section-head h2{
  font-size:34px;
  margin:0 0 10px;
}

.section-head p{
  margin:0;
  color:#b8bcc6;
  line-height:1.5;
}

/* home showcase */
.product-showcase{
  overflow:hidden;
}

.showcase-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.showcase-toggle{
  border:1px solid #2c3342;
  background:#10141c;
  color:#d8deea;
  padding:10px 14px;
}

.showcase-toggle.active{
  background:#c4171d;
  color:#fff;
  border-color:#c4171d;
}

.showcase-marquee{
  margin-top:16px;
  overflow:hidden;
  border-radius:16px;
  border:1px solid #262c38;
  background:rgba(12,17,26,.72);
  contain:layout paint;
}

.showcase-track{
  display:flex;
  gap:14px;
  width:max-content;
  padding:14px;
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}

.showcase-track.is-animated{
  animation:showcaseSlide var(--showcase-duration, 80s) linear infinite;
}

.showcase-marquee:hover .showcase-track.is-animated{
  animation-play-state:paused;
}

.showcase-card{
  width:240px;
  flex:0 0 240px;
  border-radius:14px;
  border:1px solid #2c3342;
  background:rgba(26,31,42,.92);
  padding:12px;
  text-decoration:none;
  color:inherit;
  display:block;
  transform:translateZ(0);
}
.showcase-card:visited{
  color:inherit;
}

.showcase-media{
  height:150px;
  border-radius:10px;
  border:1px solid #30384a;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.showcase-media img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.showcase-no-image{
  font-size:13px;
  color:#6a7282;
  text-align:center;
  padding:0 10px;
}

.showcase-group{
  margin:10px 0 6px;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#aeb6c9;
}

.showcase-card h3{
  margin:0;
  font-size:16px;
  color:#e6eaf2;
}

.showcase-size{
  margin:8px 0 0;
  color:#b8bcc6;
  font-size:13px;
}

.showcase-empty{
  margin:0;
  padding:16px;
  color:#b8bcc6;
}

/* home videos */
.home-video-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.home-video-card{
  border-radius:16px;
  border:1px solid #2c3342;
  background:rgba(26,31,42,.92);
  overflow:hidden;
  padding:10px;
}

.home-video-frame{
  position:relative;
  width:100%;
  padding-top:165%;
  border-radius:10px;
  overflow:hidden;
  background:#000;
}

.home-video-frame video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.home-video-card h3{
  margin:10px 2px 2px;
  font-size:15px;
  color:#e6eaf2;
}

@keyframes showcaseSlide{
  from{ transform:translate3d(0, 0, 0); }
  to{ transform:translate3d(calc(-50% - 7px), 0, 0); }
}

@media (max-width:700px){
  .showcase-card{
    width:200px;
    flex-basis:200px;
  }

  .showcase-media{
    height:130px;
  }
}

@media (max-width:1100px){
  .home-video-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:650px){
  .home-video-grid{
    grid-template-columns:1fr;
  }
}

/* brand grid */
.brand-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:18px;
}

.brand-card{
  text-align:left;
  padding:22px;
  border-radius:16px;
  background:#1a1f2a;
  border:1px solid #262c38;
  color:#e6eaf2;
  font-weight:700;
  font-size:17px;
  transition:.2s ease;
  animation:riseIn .7s ease both;
}

.brand-card:hover{
  transform:translateY(-3px);
  border-color:rgba(196,23,29,.6);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

.brand-card-featured{
  position:relative;
  overflow:hidden;
  border-color:rgba(255,82,82,.9);
  background:
    radial-gradient(120% 120% at 92% -10%, rgba(255,120,120,.42) 0%, rgba(255,120,120,0) 55%),
    linear-gradient(135deg, #2a1215 0%, #4f171d 52%, #7e1f26 100%);
  box-shadow:
    0 10px 30px rgba(170,20,28,.45),
    inset 0 0 0 1px rgba(255,174,174,.22);
}

.brand-card-featured::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.16), rgba(255,255,255,0) 35%);
  pointer-events:none;
}

.brand-logo-wrap{
  width:100%;
  height:86px;
  border-radius:12px;
  background:#fff;
  border:1px solid #ececec;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  padding:8px;
}

.brand-logo-wrap img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.brand-card-title{
  display:block;
  font-weight:800;
}

.brand-feature-pill{
  display:inline-block;
  margin-top:10px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  border:1px solid rgba(255,208,208,.75);
  color:#fff2f2;
  background:rgba(255,255,255,.16);
}

.brand-card-featured:hover{
  transform:translateY(-4px) scale(1.01);
  border-color:rgba(255,206,206,.95);
  box-shadow:
    0 14px 34px rgba(170,20,28,.55),
    inset 0 0 0 1px rgba(255,214,214,.26);
}

body:not(.dark) .brand-logo-wrap{
  background:#fff;
  border-color:#e4e4e4;
}

/* catalog */
.catalog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
  margin-top:18px;
}

.catalog-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px;
  border-radius:16px;
  background:rgba(26,31,42,.85);
  border:1px solid #262c38;
  animation:riseIn .75s ease both;
}

.catalog-card h3{
  margin:0 0 6px;
  font-size:18px;
  color:#e6eaf2;
}

.catalog-card p{
  margin:0;
  color:#b8bcc6;
  line-height:1.4;
}

/* contact */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
  margin-top:18px;
}

.contact-card{
  padding:20px;
  border-radius:16px;
  background:rgba(26,31,42,.85);
  border:1px solid #262c38;
  animation:riseIn .75s ease both;
}

.contact-card h3{
  margin:0 0 8px;
  color:#e6eaf2;
  font-size:20px;
}

.contact-card p{
  margin:0 0 16px;
  color:#b8bcc6;
  line-height:1.5;
}

.contact-card p a,
.contact-card p a:visited{
  color:#fff;
  text-decoration:none;
}

.contact-card p a:hover{
  color:#fff;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.75);
}

.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.contact-actions .btn-primary,
.contact-actions .btn-outline{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.contact-form-card{
  grid-column:1 / -1;
}

.contact-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,1fr));
  gap:10px 14px;
}

.contact-form .field{
  margin-bottom:0;
}

.contact-form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #2c3342;
  background:#10141c;
  color:#e6eaf2;
  resize:vertical;
  min-height:120px;
  font:inherit;
}

.contact-form .contact-actions{
  grid-column:1 / -1;
}

.contact-captcha{
  grid-column:1 / -1;
  display:grid;
  gap:8px;
}

.contact-captcha > span{
  font-size:.92rem;
  color:#d5d9e1;
  font-weight:600;
}

#contactFormMsg{
  grid-column:1 / -1;
  margin:4px 0 0;
  color:#b8bcc6;
}

@media (max-width:700px){
  .contact-form{
    grid-template-columns:1fr;
  }
}

.contact-map-wrap{
  margin-top:18px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #262c38;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
  background:rgba(26,31,42,.85);
}

.contact-map-wrap iframe{
  display:block;
  width:100%;
  min-height:380px;
}

/* our story */
.story-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  max-width:1100px;
  margin:18px auto 0;
}

.story-card{
  padding:30px;
  border-radius:16px;
  background:rgba(26,31,42,.85);
  border:1px solid #262c38;
  animation:riseIn .75s ease both;
}

.story-card h3{
  margin:0 0 12px;
  color:#e6eaf2;
  font-size:30px;
}

.story-card p{
  margin:0;
  color:#b8bcc6;
  line-height:1.7;
  font-size:18px;
}

.story-image-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.story-feature-image{
  width:100%;
  border-radius:14px;
  border:1px solid #2a3040;
  background:#fff;
  object-fit:cover;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}

.our-story-page .section-head{
  margin:0 auto 24px;
  text-align:center;
}

.our-story-page .section-actions{
  text-align:center;
}

/* make PDF links look like buttons */
.btn-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:700;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(196,23,29,.55);
  color:#ff4d4d;
  background:transparent;
  transition:.2s ease;
  white-space:nowrap;
}

.btn-link:hover{
  background:#c4171d;
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(196,23,29,.25);
}

/* login */
.login-wrap{
  display:grid;
  grid-template-columns:repeat(2,minmax(320px,1fr));
  align-items:stretch;
  gap:24px;
  margin:20px auto 0;
  max-width:1100px;
  width:100%;
}

@media(max-width:900px){
  .login-wrap{ grid-template-columns:1fr; }
}

.login-card{
  padding:28px;
  border-radius:18px;
  background:rgba(26,31,42,.86);
  border:1px solid #262c38;
  animation:riseIn .8s ease both;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.login-card.subtle{
  background:#141923;
}

.login-card h3{
  margin:0 0 14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.12);
  color:#e6eaf2;
}

.login-card .request-title{
  width:100%;
  margin:0 auto 14px;
  text-align:center !important;
}

.request-back-wrap{
  text-align:center;
  margin:0 0 14px;
}

.request-back-btn{
  display:inline-flex;
}

.request-page-head{
  text-align:center;
}

.request-page .login-wrap{
  grid-template-columns:minmax(320px,560px);
  justify-content:center;
}

.field{
  display:block;
  margin-bottom:14px;
}

.field span{
  display:block;
  font-size:13px;
  color:#b8bcc6;
  margin-bottom:6px;
}

.field input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #2c3342;
  background:#10141c;
  color:#e6eaf2;
}

.login-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

.login-form-actions .btn-primary,
.login-form-actions .btn-outline{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#wholesaleLoginForm,
#forgotPasswordForm{
  max-width:560px;
}

#forgotPasswordForm{
  margin-top:14px !important;
  padding-top:14px;
  border-top:1px dashed rgba(255,255,255,.18);
}

.checklist{
  margin:0 0 16px;
  padding-left:18px;
  color:#b8bcc6;
}

.section-actions{
  margin-top:22px;
}

/* Light mode fallback (if your site supports light) */
body:not(.dark) .section-head p{ color:#555; }
body:not(.dark) .brand-card,
body:not(.dark) .catalog-card,
body:not(.dark) .login-card,
body:not(.dark) .contact-card,
body:not(.dark) .story-card,
body:not(.dark) .contact-map-wrap{
  background:var(--surface-light);
  border:1px solid var(--surface-border);
  backdrop-filter:blur(5px);
  color:#111;
}

body:not(.dark) .admin-tab-link{
  background:#fff;
  border:1px solid #c7cfde;
  color:#1a2436;
}

body:not(.dark) .admin-tab-link:hover{
  border-color:#3f5579;
}

body:not(.dark) .admin-tab-link.active{
  background:#1e355b;
  color:#fff;
  border-color:#1e355b;
}

.grid .card:nth-child(2),
.brand-grid .brand-card:nth-child(2),
.catalog-grid .catalog-card:nth-child(2),
.all-products .product-grid .product-card:nth-child(2n){
  animation-delay:.08s;
}

.grid .card:nth-child(3),
.brand-grid .brand-card:nth-child(3),
.catalog-grid .catalog-card:nth-child(3),
.all-products .product-grid .product-card:nth-child(3n){
  animation-delay:.14s;
}

.grid .card:nth-child(4),
.brand-grid .brand-card:nth-child(4),
.catalog-grid .catalog-card:nth-child(4),
.all-products .product-grid .product-card:nth-child(4n){
  animation-delay:.2s;
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }

  .assemble-piece{
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
  }

  .cursor-spotlight{
    display:none !important;
  }

  .hero-panel img{
    transform:none !important;
  }
}

@media (max-width: 1099px), (hover: none), (pointer: coarse){
  body::before,
  body::after{
    animation:none;
  }

  .interactive-lift,
  .interactive-lift[data-tilt-active="1"]{
    transform:none !important;
  }
}
body:not(.dark) .brand-card:hover{ border-color:rgba(196,23,29,.45); }
body:not(.dark) .catalog-card p,
body:not(.dark) .contact-card p,
body:not(.dark) .story-card p,
body:not(.dark) .field span,
body:not(.dark) .checklist{ color:#555; }
body:not(.dark) .contact-card h3{ color:#111; }
body:not(.dark) .story-card h3{ color:#111; }
body:not(.dark) .contact-form textarea{
  border:1px solid #c7cfde;
  background:#fff;
  color:#1a2436;
}
body:not(.dark) .showcase-marquee{
  border:1px solid #d8dee9;
  background:rgba(255,255,255,.72);
}
body:not(.dark) .showcase-card{
  border:1px solid #d8dee9;
  background:#fff;
}
body:not(.dark) .showcase-toggle{
  border:1px solid #c7cfde;
  background:#fff;
  color:#1a2436;
}
body:not(.dark) .showcase-toggle.active{
  border-color:#c4171d;
  background:#c4171d;
  color:#fff;
}
body:not(.dark) .showcase-group,
body:not(.dark) .showcase-size,
body:not(.dark) .showcase-empty{
  color:#555;
}
body:not(.dark) .showcase-card h3{
  color:#111;
}
body:not(.dark) .home-video-card{
  border:1px solid #d8dee9;
  background:#fff;
}
body:not(.dark) .home-video-card h3{
  color:#111;
}

.profile-page .section-head{
  margin:0 auto 24px;
  text-align:center;
}

.profile-page .all-products{
  text-align:center;
}

.profile-page .product-card .prod-header{
  text-align:center;
}

.profile-page .product-card .fav-toggle{
  margin-left:10px;
}

.profile-page .empty-favorites{
  grid-column:1 / -1;
  text-align:center;
  width:100%;
  justify-self:center;
}

.admin-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 14px;
}

.admin-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 14px;
}

.admin-tab-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid #2c3342;
  background:#10141c;
  color:#d8deea;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}

.admin-tab-link:hover{
  border-color:#d8deea;
}

.admin-tab-link.active{
  background:var(--accent);
  color:#fff;
  border-color:transparent;
}

.admin-tab-panel{
  margin-top:4px;
}

.admin-msg{
  min-height:20px;
  margin:0 0 12px;
  color:#b8bcc6;
}

.admin-requests-grid{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  min-height: 60vh;
}

.admin-section-title{
  margin:12px 0 10px;
  font-size:24px;
}

.admin-request-card p{
  margin:6px 0;
}

.admin-request-card h3 small{
  font-size:14px;
  color:#b8bcc6;
}

.admin-request-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.admin-invoice-input{
  min-width:220px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #cfd5df;
  background:#fff;
  color:#111;
}

.admin-invoice-file{
  min-width:220px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #cfd5df;
  background:#fff;
  color:#111;
}

.admin-request-actions button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.order-status{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.order-pending{
  background:#fff3cd;
  color:#7a5d00;
}

.order-confirmed{
  background:#d7f7e5;
  color:#0a6b3d;
}

.order-rejected{
  background:#ffe1e1;
  color:#8d1f19;
}

.invoice-link{
  text-decoration:none;
}

body:not(.dark) .admin-msg,
body:not(.dark) .admin-request-card h3 small{
  color:#555;
}

body.dark .admin-invoice-input{
  background:#10141c;
  border-color:#2f3b52;
  color:#e6eaf2;
}

body.dark .admin-invoice-file{
  background:#10141c;
  border-color:#2f3b52;
  color:#e6eaf2;
}

.site-footer{
  margin-top:30px;
  padding:18px 20px 24px;
  border-top:1px solid rgba(255,255,255,.28);
}

.footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:18px;
}

.footer-left{
  justify-self:start;
  text-align:left;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(8,12,20,.35);
}

.footer-contact{
  margin:0 0 8px;
  font-size:14px;
  color:#d8dce5;
}

.footer-contact a,
.footer-contact a:visited{
  color:#d8dce5;
  text-decoration:none;
}

.footer-contact a:hover{
  text-decoration:underline;
}

.footer-social{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.social-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#d8dce5;
  text-decoration:none;
  font-size:14px;
}

.social-link svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

.social-link:hover{
  color:#fff;
}

.footer-copy{
  margin:0;
  font-size:14px;
  color:#d8dce5;
  text-align:center;
  justify-self:center;
}

body:not(.dark) .site-footer{
  border-top:1px solid rgba(0,0,0,.12);
}

body:not(.dark) .footer-contact,
body:not(.dark) .footer-copy,
body:not(.dark) .social-link{
  color:#333;
}

body:not(.dark) .footer-contact a,
body:not(.dark) .footer-contact a:visited{
  color:#333;
}

body:not(.dark) .footer-left{
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.55);
}

@media (max-width: 820px){
  .footer-inner{
    grid-template-columns:1fr;
    align-items:start;
  }

  .footer-left{
    justify-self:stretch;
  }

  .footer-copy{
    justify-self:start;
    text-align:left;
  }
}
body:not(.dark) .field input{
  background:#fff;
  border:1px solid #ddd;
  color:#111;
}

/* ===== PROFESSIONAL COMMERCE POLISH ===== */

.catalog-cart-bar{
  margin:8px auto 0;
  width:min(1200px, calc(100% - 80px));
  display:grid;
  grid-template-columns:repeat(2, minmax(180px, 240px)) 1fr;
  gap:12px;
  align-items:stretch;
}

.catalog-cart-metric{
  background:var(--surface-light);
  border:1px solid var(--surface-border);
  backdrop-filter:blur(5px);
  border-radius:14px;
  padding:12px 14px;
}

.catalog-cart-label{
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#666;
  margin-bottom:6px;
}

.catalog-cart-metric strong{
  font-size:24px;
  line-height:1.1;
}

.catalog-cart-hint{
  margin:0;
  border:1px dashed rgba(196,23,29,.35);
  border-radius:14px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  color:#555;
  background:rgba(255,255,255,.44);
}

.add-cart-btn{
  min-width:130px;
}

.add-cart-btn.cart-added{
  background:#c4171d;
  color:#fff;
  border-color:#c4171d;
}

.cart-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:18px;
  align-items:start;
}

.cart-items-grid{
  display:grid;
  grid-template-columns:1fr;
}

.cart-item-card{
  padding:16px 16px 14px;
}

.cart-item-body{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:14px;
  align-items:start;
}

.cart-item-media{
  width:120px;
  height:120px;
  border:1px solid #e3e7ef;
  border-radius:12px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#888;
  text-align:center;
  font-size:12px;
  padding:8px;
}

.cart-item-image{
  width:100%;
  height:100%;
  object-fit:contain;
}

.cart-item-details p{
  margin:6px 0;
}

.cart-item-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
}

.cart-item-top h3{
  margin:0;
}

.cart-qty-controls{
  align-items:center;
  flex-wrap:wrap;
}

.cart-qty-controls .btn-outline{
  min-width:44px;
  padding:10px 0;
}

.cart-qty-controls .cart-qty-input{
  width:84px;
  min-width:84px;
  text-align:center;
}

body.dark .cart-item-media{
  background:#fff;
  border-color:#e3e7ef;
}

.cart-summary-card{
  position:sticky;
  top:16px;
  padding:18px;
}

.cart-summary-card h3{
  margin:0 0 12px;
}

.cart-summary-metrics{
  display:grid;
  gap:8px;
}

.cart-summary-metrics p{
  margin:0;
}

.cart-summary-note{
  margin:12px 0;
}

.cart-summary-actions{
  display:grid;
  gap:10px;
}

.admin-overview{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin:8px 0 18px;
}

.admin-kpi-card{
  padding:14px 16px;
}

.admin-kpi-label{
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#666;
}

.admin-kpi-value{
  margin:6px 0 0;
  font-size:28px;
  line-height:1;
  font-weight:800;
}

.admin-card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.admin-card-header h3{
  margin:0;
}

.admin-request-card{
  padding:16px;
}

.admin-request-actions{
  flex-wrap:wrap;
}

.order-card{
  padding:16px;
}

.order-card ul{
  margin:8px 0 0;
  padding-left:18px;
  display:grid;
  gap:4px;
}

.order-card .invoice-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
}

body.dark .catalog-cart-metric{
  background:rgba(26,31,42,.8);
  border-color:rgba(45,56,75,.85);
}

body.dark .catalog-cart-label{
  color:#b8bcc6;
}

body.dark .catalog-cart-hint{
  background:rgba(16,20,28,.72);
  color:#d6dbe6;
  border-color:rgba(255,77,77,.42);
}

@media (max-width: 980px){
  .catalog-cart-bar{
    width:min(1200px, calc(100% - 40px));
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .catalog-cart-hint{
    grid-column:1 / -1;
  }

  .cart-layout{
    grid-template-columns:1fr;
  }

  .cart-summary-card{
    position:static;
  }

  .admin-overview{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .catalog-cart-bar{
    width:calc(100% - 24px);
    grid-template-columns:1fr;
  }

  .admin-overview{
    grid-template-columns:1fr;
  }

  .cart-item-body{
    grid-template-columns:1fr;
  }

  .cart-item-media{
    width:100%;
    max-width:180px;
    margin:0 auto 4px;
  }
}

.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.field select{
  width:100%;
  border:1px solid #d4d9e3;
  border-radius:12px;
  padding:12px;
  font-size:15px;
  background:#fff;
  color:#111;
}

.catalog-filters .field span{
  color:#111;
}

.catalog-filters .field select option{
  color:#111;
  background:#fff;
}

body.dark .catalog-filters .field span{
  color:#e6eaf2;
}

body.dark .catalog-filters .field select{
  background:#121926;
  color:#e6eaf2;
  border-color:#2f3b52;
}

body.dark .catalog-filters .field select option{
  background:#121926;
  color:#e6eaf2;
}

.mobile-sticky-cta{
  display:none;
}

.cookie-notice{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:2000;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}

.cookie-notice p{
  margin:0 0 10px;
}

.cookie-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.cookie-actions a{
  color:var(--text);
  opacity:.9;
}

.footer-legal{
  margin-top:8px;
}

.footer-legal a{
  color:inherit;
}

.catalog-filters{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:12px 32px 8px;
}

.quick-search-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 32px 14px;
}

.search-chip{
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
}

@media (max-width:900px){
  .catalog-filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:700px){
  .mobile-sticky-cta{
    display:flex;
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    gap:8px;
    z-index:1600;
    padding:8px;
    border-radius:14px;
    background:color-mix(in srgb, var(--card) 88%, transparent);
    border:1px solid var(--line);
    backdrop-filter:blur(10px);
  }

  .mobile-sticky-cta a{
    flex:1;
    text-align:center;
  }

  .catalog-filters{
    grid-template-columns:1fr;
    margin-left:18px;
    margin-right:18px;
  }

  .quick-search-chips{
    margin-left:18px;
    margin-right:18px;
  }
}

/* ===== MOBILE IMPROVEMENTS ===== */

/* Hide desktop nav on tablet/mobile — hamburger menu handles navigation */
@media (max-width: 1099px){
  .nav{
    display:none;
  }
}

@media (max-width: 768px){

  /* Header */
  .header{
    padding:14px 18px;
    gap:10px;
  }

  .logo img{
    height:72px;
  }

  #searchInput{
    width:100%;
    max-width:160px;
    font-size:14px;
    padding:9px 11px;
  }

  /* Hero */
  .hero{
    padding:60px 20px 50px;
    min-height:420px;
  }

  .hero-content h1{
    font-size:28px;
    line-height:1.25;
  }

  .hero-content p{
    font-size:15px;
  }

  .hero-buttons{
    flex-direction:column;
    gap:10px;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-outline{
    width:100%;
    text-align:center;
  }

  /* Section padding */
  .section,
  .categories,
  .trust{
    padding:50px 18px;
  }

  .section-head h2{
    font-size:24px;
  }

  .section-head p{
    font-size:15px;
  }

  /* Category cards */
  .card{
    padding:20px;
    font-size:15px;
  }

  /* Trust bar */
  .trust-grid{
    grid-template-columns:1fr 1fr;
    gap:12px;
    font-size:14px;
  }

  /* Buttons */
  .btn-primary,
  .btn-outline{
    padding:12px 18px;
    font-size:14px;
  }

  /* Brand cards */
  .brand-grid{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .brand-card{
    padding:18px 12px;
    font-size:14px;
  }

  /* Catalog cards (PDF download) */
  .catalog-grid{
    grid-template-columns:1fr;
  }

  /* Contact section */
  .contact-grid{
    gap:16px;
  }

  .contact-card{
    padding:22px 18px;
  }

  /* Map */
  .contact-map-wrap iframe{
    width:100%;
    height:280px;
  }

  /* Login */
  .login-wrap{
    gap:16px;
  }

  .login-card{
    padding:24px 18px;
  }

  /* Page titles */
  .page-title{
    font-size:24px;
    padding:24px 18px 10px;
  }

  /* Product cards */
  .product-card{
    padding:14px;
  }

  /* Footer */
  .site-footer{
    padding:28px 18px;
  }

  /* Safe area for notch phones */
  .mobile-sticky-cta{
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px){

  .logo img{
    height:58px;
  }

  #searchInput{
    display:none;
  }

  .hero{
    padding:48px 16px 42px;
    min-height:380px;
  }

  .hero-content h1{
    font-size:24px;
  }

  .section,
  .categories,
  .trust{
    padding:40px 14px;
  }

  .trust-grid{
    grid-template-columns:1fr;
  }

  .brand-grid{
    grid-template-columns:1fr;
  }

  .brand-card{
    padding:16px 14px;
  }

  .section-head h2{
    font-size:21px;
  }

  .contact-map-wrap iframe{
    height:220px;
  }
}