/*
Theme Name: MITRISM
Theme URI: https://mitrism.com
Author: MITRISM Studio
Description: Luxury Korean Streetwear — Full WordPress + WooCommerce + Elementor theme
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
WC requires at least: 7.0
Text Domain: mitrism
*/


/* ============================================================
   CSS VARIABLES — Edit these to reskin the entire template
   ============================================================ */
:root {
  --c-black:    #0a0a0a;
  --c-dark:     #111111;
  --c-mid:      #1a1a1a;
  --c-border:   #242424;
  --c-muted:    #555555;
  --c-light:    #aaaaaa;
  --c-white:    #f5f5f0;
  --c-accent:   #ffffff;
  --c-grain:    rgba(255,255,255,0.03);

  --font-display:  'Bebas Neue', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --font-serif:    'Playfair Display', serif;
  --font-jp:       'Noto Serif JP', serif;

  --nav-height: 64px;
  --section-pad: 100px 5vw;
  --radius: 2px;
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* Grain overlay on every section */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce-bar {
  background: var(--c-white);
  color: var(--c-black);
  text-align: center;
  padding: 9px 20px;
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 500;
  text-transform: uppercase;
  position: relative;
  z-index: 100;
}
/* Edit text in HTML below */

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 99;
  height: var(--nav-height);
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
}

.nav-left, .nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-left a, .nav-right a {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-light);
  transition: color var(--transition);
}
.nav-left a:hover, .nav-right a:hover { color: var(--c-white); }

.nav-logo {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.08em;
  color: var(--c-white);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-icon { width: 18px; height: 18px; stroke: var(--c-light); fill: none; stroke-width: 1.5; transition: stroke var(--transition); cursor: pointer; }
.nav-icon:hover { stroke: var(--c-white); }

/* Mobile hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.hamburger span { width: 22px; height: 1px; background: var(--c-white); display: block; transition: var(--transition); }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  background: var(--c-dark);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0 6vw 8vh;
}

/* Giant BG word */
.hero-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(120px, 22vw, 340px);
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.06);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* Hero model image placeholder — replace src with real photo */
.hero-model {
  position: absolute;
  right: 8vw;
  bottom: 0;
  height: 90%;
  object-fit: contain;
  object-position: bottom;
  filter: grayscale(100%) contrast(1.1);
  mix-blend-mode: luminosity;
  z-index: 2;
  opacity: 0.9;
}

/* Vertical JP text */
.hero-jp {
  position: absolute;
  right: 3vw;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-jp);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--c-muted);
  z-index: 3;
}

.hero-content {
  position: relative;
  z-index: 4;
  max-width: 560px;
}

.hero-chapter {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-chapter::before { content: ''; width: 30px; height: 1px; background: var(--c-muted); }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 8vw, 100px);
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: 20px;
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 18px);
  color: var(--c-light);
  margin-bottom: 36px;
  line-height: 1.5;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-white);
  color: var(--c-black);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: 1px solid var(--c-white);
  cursor: pointer;
  transition: var(--transition);
}
.btn-primary:hover { background: transparent; color: var(--c-white); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--c-white);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: var(--transition);
}
.btn-outline:hover { border-color: var(--c-white); }

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 30px;
  right: 50%;
  transform: translateX(50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  z-index: 4;
  animation: bounce 2.5s ease-in-out infinite;
}
.hero-scroll::after { content: ''; width: 1px; height: 40px; background: linear-gradient(to bottom, var(--c-muted), transparent); }

@keyframes bounce {
  0%, 100% { transform: translateX(50%) translateY(0); }
  50% { transform: translateX(50%) translateY(8px); }
}

/* ============================================================
   CATEGORY SECTION
   ============================================================ */
.categories {
  background: var(--c-mid);
  padding: 0 5vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--c-border);
}

.cat-card {
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--c-border);
  cursor: pointer;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
}
.cat-card:last-child { border-right: none; }

.cat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: transform 0.7s ease, filter 0.5s ease;
}
.cat-card:hover .cat-img { transform: scale(1.06); filter: grayscale(80%); }

.cat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%);
}

.cat-content { position: relative; z-index: 2; }

.cat-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-muted);
  border: 1px solid var(--c-border);
  padding: 4px 10px;
  margin-bottom: 10px;
}

.cat-name {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.04em;
  color: var(--c-white);
  line-height: 1;
  margin-bottom: 8px;
}

.cat-link {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-light);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: gap var(--transition);
}
.cat-card:hover .cat-link { gap: 14px; }
.cat-link::after { content: '→'; }

/* Category image placeholders — use solid colored backgrounds as fallback */
.cat-placeholder { position: absolute; inset: 0; }
.cat-p1 { background: linear-gradient(160deg, #1a1a1a, #0d0d0d); }
.cat-p2 { background: linear-gradient(160deg, #161616, #0a0a0a); }
.cat-p3 { background: linear-gradient(160deg, #181818, #0e0e0e); }
.cat-p4 { background: linear-gradient(160deg, #141414, #0c0c0c); }

/* Cat silhouette SVG */
.cat-silhouette {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  opacity: 0.15;
}

/* ============================================================
   DROP SECTION
   ============================================================ */
.drop-section {
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: var(--c-black);
  border-top: 1px solid var(--c-border);
}

.drop-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(255,255,255,0.03) 0%, transparent 70%);
}

.drop-bg-number {
  position: absolute;
  right: -2vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(200px, 35vw, 500px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.04);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.drop-content {
  position: relative;
  z-index: 2;
  padding: 0 8vw;
  max-width: 640px;
}

.drop-eyebrow {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.drop-eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--c-muted); }

.drop-title {
  font-family: var(--font-display);
  font-size: clamp(60px, 9vw, 120px);
  line-height: 0.9;
  color: var(--c-white);
  margin-bottom: 28px;
  letter-spacing: 0.02em;
}
.drop-title span { color: transparent; -webkit-text-stroke: 1px var(--c-white); }

.drop-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--c-light);
  line-height: 1.7;
  margin-bottom: 36px;
  border-left: 1px solid var(--c-border);
  padding-left: 20px;
}

.drop-meta {
  display: flex;
  gap: 32px;
  margin-bottom: 40px;
}
.drop-meta-item { display: flex; flex-direction: column; gap: 4px; }
.drop-meta-label { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--c-muted); }
.drop-meta-value { font-size: 13px; font-weight: 500; color: var(--c-white); }

/* ============================================================
   BESTSELLERS
   ============================================================ */
.bestsellers {
  padding: var(--section-pad);
  background: var(--c-dark);
  border-top: 1px solid var(--c-border);
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--c-white);
}
.section-title small {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 300;
  margin-bottom: 8px;
}

.section-link {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-light);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 2px;
  transition: var(--transition);
}
.section-link:hover { color: var(--c-white); border-color: var(--c-white); gap: 14px; }
.section-link::after { content: '→'; }

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.product-card {
  position: relative;
  background: var(--c-mid);
  cursor: pointer;
  group: true;
}

.product-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--c-mid);
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: transform 0.7s ease, filter 0.5s ease;
}
.product-card:hover .product-img { transform: scale(1.05); filter: grayscale(60%); }

/* Product image placeholder */
.product-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp1 { background: linear-gradient(145deg, #1c1c1c, #111); }
.pp2 { background: linear-gradient(145deg, #181818, #0e0e0e); }
.pp3 { background: linear-gradient(145deg, #202020, #131313); }
.pp4 { background: linear-gradient(145deg, #161616, #0c0c0c); }

.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--c-white);
  color: var(--c-black);
  padding: 5px 10px;
  z-index: 2;
  font-weight: 500;
}

.product-wish {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  border: 1px solid var(--c-border);
  z-index: 2;
  cursor: pointer;
  transition: var(--transition);
  opacity: 0;
  transform: translateY(-4px);
}
.product-card:hover .product-wish { opacity: 1; transform: translateY(0); }
.product-wish:hover { background: var(--c-white); }
.product-wish:hover svg { stroke: var(--c-black); }
.product-wish svg { width: 14px; height: 14px; stroke: var(--c-white); fill: none; stroke-width: 1.5; }

.product-quick {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--c-white);
  color: var(--c-black);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  padding: 13px;
  font-weight: 500;
  transform: translateY(100%);
  transition: transform 0.4s ease;
  z-index: 2;
}
.product-card:hover .product-quick { transform: translateY(0); }

.product-info {
  padding: 16px 14px;
}
.product-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-white);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}
.product-sub {
  font-size: 11px;
  color: var(--c-muted);
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
.product-price {
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-current {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-white);
}
.price-original {
  font-size: 12px;
  color: var(--c-muted);
  text-decoration: line-through;
}

/* ============================================================
   BRAND STORY SECTION
   ============================================================ */
.brand-story {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background: var(--c-black);
  border-top: 1px solid var(--c-border);
}

.story-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(255,255,255,0.02) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.015) 0%, transparent 50%);
}

.story-lines {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(255,255,255,0.5) 40px,
    rgba(255,255,255,0.5) 41px
  );
}

.story-content {
  position: relative;
  z-index: 2;
  padding: 0 10vw;
  max-width: 700px;
}

.story-jp {
  font-family: var(--font-jp);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--c-muted);
  margin-bottom: 28px;
  display: block;
}

.story-text {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 80px);
  line-height: 1.0;
  color: var(--c-white);
  letter-spacing: 0.02em;
  margin-bottom: 32px;
}
.story-text em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-light);
}

.story-body {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.9;
  max-width: 420px;
  margin-bottom: 36px;
}

/* ============================================================
   TRUST SECTION
   ============================================================ */
.trust-section {
  background: var(--c-mid);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 40px 5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.trust-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 20px 24px;
  border-right: 1px solid var(--c-border);
}
.trust-item:last-child { border-right: none; }

.trust-icon {
  width: 36px;
  height: 36px;
  stroke: var(--c-light);
  fill: none;
  stroke-width: 1.2;
}

.trust-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-white);
}
.trust-desc {
  font-size: 11px;
  color: var(--c-muted);
  line-height: 1.5;
}

/* ============================================================
   LOOKBOOK SECTION
   ============================================================ */
.lookbook {
  padding: var(--section-pad);
  background: var(--c-black);
  border-top: 1px solid var(--c-border);
}

.lookbook-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2px;
  margin-top: 48px;
}

.look-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.look-card:first-child { grid-row: span 2; }

.look-img-wrap {
  aspect-ratio: auto;
  height: 100%;
  min-height: 280px;
  overflow: hidden;
  position: relative;
  background: var(--c-mid);
}
.look-card:first-child .look-img-wrap { min-height: 580px; }

.look-placeholder { width: 100%; height: 100%; }
.lp1 { background: linear-gradient(180deg, #1e1e1e, #0f0f0f); }
.lp2 { background: linear-gradient(180deg, #191919, #0d0d0d); }
.lp3 { background: linear-gradient(180deg, #1b1b1b, #101010); }
.lp4 { background: linear-gradient(180deg, #171717, #0c0c0c); }
.lp5 { background: linear-gradient(180deg, #1d1d1d, #111111); }

.look-img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(90%);
  transition: transform 0.8s ease, filter 0.5s ease;
}
.look-card:hover .look-img { transform: scale(1.06); filter: grayscale(40%); }

.look-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition);
}
.look-card:hover .look-overlay { opacity: 1; }

.look-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  transform: translateY(10px);
  opacity: 0;
  transition: var(--transition);
  z-index: 2;
}
.look-card:hover .look-info { transform: translateY(0); opacity: 1; }
.look-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-light); }
.look-name { font-family: var(--font-display); font-size: 22px; color: var(--c-white); letter-spacing: 0.05em; }

/* Manga energy lines overlay */
.look-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    88deg,
    transparent,
    transparent 8px,
    rgba(255,255,255,0.012) 8px,
    rgba(255,255,255,0.012) 9px
  );
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   REVIEWS SECTION
   ============================================================ */
.reviews {
  padding: var(--section-pad);
  background: var(--c-dark);
  border-top: 1px solid var(--c-border);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 48px;
}

.review-card {
  background: var(--c-mid);
  padding: 32px;
  border: 1px solid var(--c-border);
  transition: border-color var(--transition);
}
.review-card:hover { border-color: var(--c-muted); }

.review-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}
.star {
  width: 12px;
  height: 12px;
  background: var(--c-white);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star.empty { background: var(--c-border); }

.review-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-light);
  margin-bottom: 20px;
  font-style: italic;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-border);
  overflow: hidden;
  flex-shrink: 0;
}
.review-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-white);
  letter-spacing: 0.05em;
}
.review-meta {
  font-size: 10px;
  color: var(--c-muted);
  margin-top: 2px;
  letter-spacing: 0.05em;
}

/* ============================================================
   COMMUNITY SECTION
   ============================================================ */
.community {
  padding: var(--section-pad);
  background: var(--c-black);
  border-top: 1px solid var(--c-border);
  text-align: center;
}

.community .section-header {
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}

.community-sub {
  font-size: 13px;
  color: var(--c-muted);
  letter-spacing: 0.08em;
}

.community-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}

.comm-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  background: var(--c-mid);
}

.comm-img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(80%);
  transition: transform 0.5s ease, filter 0.4s ease;
}
.comm-card:hover .comm-img { transform: scale(1.1); filter: grayscale(0%); }

.comm-placeholder { width: 100%; height: 100%; }
.cp1 { background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%); }
.cp2 { background: linear-gradient(135deg, #181818 0%, #111 100%); }
.cp3 { background: linear-gradient(135deg, #151515 0%, #0e0e0e 100%); }
.cp4 { background: linear-gradient(135deg, #1c1c1c 0%, #101010 100%); }
.cp5 { background: linear-gradient(135deg, #161616 0%, #0c0c0c 100%); }
.cp6 { background: linear-gradient(135deg, #1b1b1b 0%, #0f0f0f 100%); }

.comm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
}
.comm-card:hover .comm-overlay { opacity: 1; }
.comm-ig-icon { width: 22px; height: 22px; stroke: var(--c-white); fill: none; stroke-width: 1.5; }

.community-tag {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--c-muted);
  letter-spacing: 0.15em;
}
.community-tag::before, .community-tag::after { content: '—'; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--c-mid);
  border-top: 1px solid var(--c-border);
  padding: 60px 5vw 30px;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}

.footer-brand .footer-logo {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.06em;
  color: var(--c-white);
  margin-bottom: 16px;
}
.footer-brand p {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.8;
  max-width: 280px;
  margin-bottom: 24px;
}

.social-links {
  display: flex;
  gap: 14px;
}
.social-link {
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.social-link:hover { border-color: var(--c-white); background: var(--c-white); }
.social-link:hover svg { stroke: var(--c-black); }
.social-link svg { width: 15px; height: 15px; stroke: var(--c-light); fill: none; stroke-width: 1.5; }

.footer-col h4 {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-white);
  font-weight: 500;
  margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a {
  font-size: 13px;
  color: var(--c-muted);
  letter-spacing: 0.03em;
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--c-white); }

.footer-bottom {
  border-top: 1px solid var(--c-border);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: 11px; color: var(--c-muted); letter-spacing: 0.05em; }
.footer-bottom-links {
  display: flex;
  gap: 24px;
}
.footer-bottom-links a {
  font-size: 11px;
  color: var(--c-muted);
  letter-spacing: 0.08em;
  transition: color var(--transition);
}
.footer-bottom-links a:hover { color: var(--c-white); }

.footer-jp {
  font-family: var(--font-jp);
  font-size: 10px;
  color: var(--c-border);
  letter-spacing: 0.3em;
}

/* ============================================================
   MOBILE STYLES
   ============================================================ */
@media (max-width: 900px) {
  :root { --section-pad: 60px 5vw; }

  .nav-left { display: none; }
  .nav-right .nav-icon:not(:last-child):not(:nth-last-child(2)) { display: none; }
  .hamburger { display: flex; }

  .hero { padding: 0 5vw 10vh; align-items: flex-end; }
  .hero-model { height: 65%; right: 0; opacity: 0.6; }
  .hero-jp { display: none; }

  .categories { grid-template-columns: repeat(2, 1fr); }
  .cat-card { min-height: 300px; }

  .products-grid { grid-template-columns: repeat(2, 1fr); }

  .lookbook-grid { grid-template-columns: 1fr 1fr; }
  .look-card:first-child { grid-column: span 2; grid-row: span 1; }
  .look-card:first-child .look-img-wrap { min-height: 360px; }

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

  .community-grid { grid-template-columns: repeat(3, 1fr); }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }

  .trust-section { flex-wrap: wrap; }
  .trust-item { flex: 1 0 calc(50% - 1px); border-right: none; border-bottom: 1px solid var(--c-border); }
  .trust-item:nth-child(odd) { border-right: 1px solid var(--c-border); }
  .trust-item:last-child, .trust-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}

@media (max-width: 560px) {
  .categories { grid-template-columns: 1fr; }
  .community-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .drop-section { min-height: auto; padding: 60px 0; }
  .drop-content { padding: 0 5vw; }
  .drop-bg-number { display: none; }
  .hero-bg-text { font-size: 80px; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: fadeUp 0.8s ease forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.55s; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ================================================================
   WORDPRESS / ELEMENTOR INTEGRATION
   ================================================================ */

/* 1. Elementor full-width override */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con-inner, .e-con { max-width:100%!important; }
.elementor-section { padding-left:0!important; padding-right:0!important; }
.elementor-column > .elementor-element-populated,
.elementor-column-gap-default .elementor-column > .elementor-element-populated { padding:0!important; }
.elementor-widget-html, .elementor-widget-container { padding:0!important; }
body { overflow-x:hidden; }

/* 2. WordPress admin bar fix */
.admin-bar .navbar { top:32px; }
@media screen and (max-width:782px) { .admin-bar .navbar { top:46px; } }

/* ================================================================
   MITRISM NAVBAR — WordPress Dynamic
   ================================================================ */
.mitrism-navbar {
  position:sticky; top:0; z-index:9999; height:64px;
  background:rgba(10,10,10,0.95); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:space-between; padding:0 5vw;
}
.mitrism-navbar.scrolled { background:rgba(10,10,10,1); }
.mitrism-nav-left { display:flex; align-items:center; gap:28px; list-style:none; }
.mitrism-nav-left li a {
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--c-light); transition:color var(--transition);
}
.mitrism-nav-left li a:hover { color:var(--c-white); }
.mitrism-nav-logo {
  font-family:var(--font-display); font-size:26px; letter-spacing:.08em;
  color:var(--c-white); position:absolute; left:50%; transform:translateX(-50%);
  text-decoration:none; white-space:nowrap;
}
.mitrism-nav-right { display:flex; align-items:center; gap:20px; }
.mitrism-nav-right a {
  color:var(--c-light); display:flex; align-items:center;
  transition:color var(--transition); text-decoration:none; position:relative;
}
.mitrism-nav-right a:hover { color:var(--c-white); }
.mitrism-nav-right a:hover .nav-icon { stroke:var(--c-white); }
.mitrism-cart-count {
  font-size:9px; background:var(--c-white); color:var(--c-black);
  width:16px; height:16px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-weight:700;
  position:absolute; top:-8px; right:-8px; line-height:1;
}
.mitrism-hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; background:none; border:none; padding:4px;
}
.mitrism-hamburger span { width:22px; height:1px; background:var(--c-white); display:block; transition:var(--transition); }
@media(max-width:900px){
  .mitrism-nav-left { display:none; }
  .mitrism-hamburger { display:flex; }
  .mitrism-nav-right .hide-mob { display:none; }
}

/* Mobile Drawer */
.mitrism-mobile-nav {
  position:fixed; top:0; right:-320px; width:300px; height:100vh;
  background:var(--c-dark); border-left:1px solid var(--c-border);
  z-index:99999; transition:right .4s ease; padding:80px 32px 40px;
  display:flex; flex-direction:column; gap:0; overflow-y:auto;
}
.mitrism-mobile-nav.is-open { right:0; }
.mitrism-mobile-nav a {
  display:block; padding:14px 0; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--c-light);
  border-bottom:1px solid var(--c-border); transition:color var(--transition);
  text-decoration:none;
}
.mitrism-mobile-nav a:hover { color:var(--c-white); }
.mitrism-mobile-close {
  position:absolute; top:20px; right:20px; background:none; border:none;
  color:var(--c-white); font-size:22px; cursor:pointer; line-height:1;
}
.mitrism-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  z-index:99998; opacity:0; pointer-events:none; transition:opacity .3s;
}
.mitrism-overlay.is-open { opacity:1; pointer-events:all; }

/* ================================================================
   MITRISM FOOTER — WordPress Dynamic
   ================================================================ */
.mitrism-footer {
  background:var(--c-mid); border-top:1px solid var(--c-border); padding:60px 5vw 30px;
}
.mitrism-footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:60px;
}
@media(max-width:900px){ .mitrism-footer-grid { grid-template-columns:1fr 1fr; gap:32px; } .mitrism-footer-brand { grid-column:span 2; } }
@media(max-width:560px){ .mitrism-footer-grid { grid-template-columns:1fr; } .mitrism-footer-brand { grid-column:span 1; } }
.mitrism-footer-logo {
  font-family:var(--font-display); font-size:36px; letter-spacing:.06em;
  color:var(--c-white); display:block; text-decoration:none; margin-bottom:16px;
}
.mitrism-footer-desc { font-size:13px; color:var(--c-muted); line-height:1.8; max-width:280px; margin-bottom:24px; }
.mitrism-footer-social { display:flex; gap:12px; margin-bottom:28px; }
.mitrism-footer-social a {
  width:36px; height:36px; border:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition); text-decoration:none;
}
.mitrism-footer-social a:hover { border-color:var(--c-white); background:var(--c-white); }
.mitrism-footer-social a:hover svg { stroke:var(--c-black); }
.mitrism-footer-social svg { width:15px; height:15px; stroke:var(--c-light); fill:none; stroke-width:1.5; }
.mitrism-footer-newsletter { margin-top:4px; }
.mitrism-footer-newsletter label { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-muted); display:block; margin-bottom:10px; }
.mitrism-footer-newsletter form { display:flex; }
.mitrism-footer-newsletter input[type=email] {
  background:var(--c-dark); color:var(--c-white); border:1px solid var(--c-border);
  border-right:none; padding:10px 14px; font-size:12px; flex:1; outline:none; font-family:var(--font-body);
}
.mitrism-footer-newsletter input::placeholder { color:var(--c-muted); }
.mitrism-footer-newsletter button {
  background:var(--c-white); color:var(--c-black); border:none; padding:10px 18px;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; font-family:var(--font-body); transition:var(--transition);
}
.mitrism-footer-newsletter button:hover { background:var(--c-muted); }
.mitrism-footer-col h4 { font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--c-white); font-weight:500; margin-bottom:20px; }
.mitrism-footer-col ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.mitrism-footer-col ul li a { font-size:13px; color:var(--c-muted); letter-spacing:.03em; transition:color var(--transition); text-decoration:none; }
.mitrism-footer-col ul li a:hover { color:var(--c-white); }
.mitrism-footer-bottom {
  border-top:1px solid var(--c-border); padding-top:24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.mitrism-footer-bottom p { font-size:11px; color:var(--c-muted); }
.mitrism-footer-links { display:flex; gap:24px; }
.mitrism-footer-links a { font-size:11px; color:var(--c-muted); transition:color var(--transition); text-decoration:none; }
.mitrism-footer-links a:hover { color:var(--c-white); }
.mitrism-footer-jp { font-family:var(--font-jp); font-size:10px; color:var(--c-border); letter-spacing:.3em; }

/* ================================================================
   WOOCOMMERCE — Full MITRISM styling
   ================================================================ */
/* Shop layout */
.woocommerce-page main, .mitrism-woo-wrap { background:var(--c-black); }
.woocommerce-products-header { display:none; }
.woocommerce-notices-wrapper { padding:0 5vw; }

/* Product grid */
.woocommerce ul.products {
  display:grid!important; grid-template-columns:repeat(4,1fr)!important;
  gap:2px!important; margin:0!important; padding:0!important; list-style:none!important;
}
@media(max-width:900px){ .woocommerce ul.products { grid-template-columns:repeat(2,1fr)!important; } }
@media(max-width:480px){ .woocommerce ul.products { grid-template-columns:1fr!important; } }

.woocommerce ul.products li.product { background:var(--c-mid)!important; margin:0!important; padding:0!important; float:none!important; position:relative; overflow:hidden; }
.woocommerce ul.products li.product a img { filter:grayscale(100%); transition:transform .7s,filter .5s; width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.woocommerce ul.products li.product:hover a img { filter:grayscale(40%); transform:scale(1.05); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family:var(--font-body); font-size:13px; font-weight:400; color:var(--c-white); padding:14px 14px 4px; margin:0; }
.woocommerce ul.products li.product .price { color:var(--c-white); font-size:14px; font-weight:500; padding:0 14px 10px; display:block; }
.woocommerce ul.products li.product .price del { color:var(--c-muted); font-size:11px; }
.woocommerce ul.products li.product a.button, .woocommerce ul.products li.product .add_to_cart_button {
  display:block!important; background:var(--c-white)!important; color:var(--c-black)!important;
  font-family:var(--font-body)!important; font-size:10px!important; letter-spacing:.2em!important;
  text-transform:uppercase!important; border-radius:0!important; border:none!important;
  width:calc(100% - 28px)!important; margin:0 14px 14px!important; padding:12px!important; text-align:center!important;
}
.woocommerce ul.products li.product a.button:hover { background:var(--c-black)!important; color:var(--c-white)!important; }

/* Sale badge */
.woocommerce ul.products li.product .onsale {
  background:var(--c-white)!important; color:var(--c-black)!important;
  border-radius:0!important; font-size:9px!important; letter-spacing:.2em!important;
  font-weight:500!important; padding:5px 10px!important; min-height:auto!important; min-width:auto!important;
}

/* Single product */
.woocommerce div.product { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:80px 5vw; }
@media(max-width:768px){ .woocommerce div.product { grid-template-columns:1fr; padding:40px 5vw; } }
.woocommerce div.product .product_title { font-family:var(--font-display); font-size:clamp(28px,4vw,52px); letter-spacing:.03em; color:var(--c-white); line-height:1; margin-bottom:16px; }
.woocommerce div.product p.price { font-size:20px; font-weight:500; color:var(--c-white); margin-bottom:20px; }
.woocommerce div.product .woocommerce-product-details__short-description { color:var(--c-muted); font-size:14px; line-height:1.8; margin-bottom:24px; }
.woocommerce div.product form.cart .button { background:var(--c-white); color:var(--c-black); font-family:var(--font-body); font-size:11px; letter-spacing:.2em; text-transform:uppercase; border-radius:0; padding:16px 40px; border:1px solid var(--c-white); transition:var(--transition); cursor:pointer; }
.woocommerce div.product form.cart .button:hover { background:transparent; color:var(--c-white); }
.woocommerce div.product .quantity input { background:var(--c-dark); color:var(--c-white); border:1px solid var(--c-border); padding:12px; width:64px; text-align:center; font-family:var(--font-body); }

/* Cart */
.woocommerce table.cart { border-collapse:collapse; width:100%; }
.woocommerce table.cart th { background:var(--c-mid); color:var(--c-white); font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding:14px 16px; border-bottom:1px solid var(--c-border); }
.woocommerce table.cart td { border-bottom:1px solid var(--c-border); padding:16px; color:var(--c-white); background:var(--c-dark); }
.woocommerce table.cart .product-thumbnail img { filter:grayscale(80%); width:60px; }
.woocommerce table.cart td.product-name a { color:var(--c-white); }
.woocommerce .cart_totals { background:var(--c-dark); padding:32px; border:1px solid var(--c-border); }
.woocommerce .cart_totals h2 { font-family:var(--font-display); font-size:24px; color:var(--c-white); letter-spacing:.04em; margin-bottom:20px; }
.woocommerce .cart_totals table { width:100%; border-collapse:collapse; }
.woocommerce .cart_totals table th, .woocommerce .cart_totals table td { padding:12px 0; border-bottom:1px solid var(--c-border); color:var(--c-light); font-size:13px; }

/* All WC buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .checkout-button {
  background:var(--c-white)!important; color:var(--c-black)!important;
  border-radius:0!important; font-family:var(--font-body)!important;
  font-size:11px!important; letter-spacing:.2em!important;
  text-transform:uppercase!important; padding:14px 28px!important;
  transition:var(--transition)!important; border:1px solid var(--c-white)!important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover {
  background:transparent!important; color:var(--c-white)!important;
}

/* Checkout */
.woocommerce-checkout .col2-set { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
@media(max-width:768px){ .woocommerce-checkout .col2-set { grid-template-columns:1fr; } }
.woocommerce-checkout h3 { font-family:var(--font-display); font-size:26px; letter-spacing:.05em; color:var(--c-white); margin-bottom:20px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
  background:var(--c-dark)!important; color:var(--c-white)!important;
  border:1px solid var(--c-border)!important; border-radius:0!important;
  padding:12px 16px!important; font-family:var(--font-body)!important; font-size:14px!important; width:100%;
}
.woocommerce form .form-row input.input-text:focus { border-color:var(--c-muted)!important; outline:none!important; }
.woocommerce form .form-row label { color:var(--c-light); font-size:11px; letter-spacing:.15em; text-transform:uppercase; margin-bottom:6px; display:block; }
.woocommerce #payment { background:var(--c-dark); border:1px solid var(--c-border); padding:24px; }
.woocommerce #payment ul.payment_methods { list-style:none; padding:0; margin-bottom:20px; }
.woocommerce #payment ul.payment_methods li { padding:12px 0; border-bottom:1px solid var(--c-border); color:var(--c-white); }

/* My Account */
.woocommerce-account .woocommerce { padding:80px 5vw; display:grid; grid-template-columns:220px 1fr; gap:48px; }
@media(max-width:768px){ .woocommerce-account .woocommerce { grid-template-columns:1fr; padding:40px 5vw; } }
.woocommerce-MyAccount-navigation { border-right:1px solid var(--c-border); padding-right:32px; }
.woocommerce-MyAccount-navigation ul { list-style:none; padding:0; }
.woocommerce-MyAccount-navigation ul li { border-bottom:1px solid var(--c-border); }
.woocommerce-MyAccount-navigation ul li a { display:block; padding:13px 0; color:var(--c-muted); font-size:11px; letter-spacing:.15em; text-transform:uppercase; transition:color var(--transition); text-decoration:none; }
.woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation ul li a:hover { color:var(--c-white); }
.woocommerce-MyAccount-content { color:var(--c-light); font-size:14px; line-height:1.8; }
.woocommerce-MyAccount-content h2 { font-family:var(--font-display); font-size:28px; color:var(--c-white); letter-spacing:.04em; margin-bottom:20px; }
.woocommerce-orders-table { width:100%; border-collapse:collapse; }
.woocommerce-orders-table__header { background:var(--c-mid); padding:12px 16px; color:var(--c-white); font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.woocommerce-orders-table__cell { border-bottom:1px solid var(--c-border); padding:14px 16px; }

/* WC Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background:var(--c-dark)!important; color:var(--c-white)!important;
  border-top:2px solid var(--c-white)!important; border-radius:0!important;
  padding:16px 20px!important; margin-bottom:24px!important; list-style:none!important;
}

/* Breadcrumb */
.woocommerce-breadcrumb { padding:20px 5vw; font-size:11px; letter-spacing:.1em; color:var(--c-muted); }
.woocommerce-breadcrumb a { color:var(--c-muted); transition:color var(--transition); text-decoration:none; }
.woocommerce-breadcrumb a:hover { color:var(--c-white); }