/* product.css — La Samasta
   Khusus halaman Product List
   Load HANYA di halaman Product List
*/

/* ================================================
   PRODUCTS.CSS — Halaman Daftar Produk La Samasta
   Layout: 4-column uniform grid + clean sidebar filter
   Link bersama main.css. JANGAN duplikasi shared styles.
================================================ */

/* ---- PAGE HERO ---- */
.products-hero {
  position: relative;
  padding: 148px 0 0;
  background: var(--warm-white);
  overflow: hidden;
}

.products-hero-watermark {
  position: absolute;
  top: 50%; right: -20px;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(100px, 18vw, 220px);
  font-weight: 300;
  color: rgba(117,113,89,0.04);
  letter-spacing: -0.05em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ---- TOOLBAR BAR ---- */
.products-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.products-count {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.products-count strong { color: var(--charcoal); font-weight: 500; }

.products-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sort */
.products-sort { position: relative; }
.products-sort select {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: transparent;
  border: 1px solid var(--border);
  padding: 9px 38px 9px 14px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: none;
  transition: border-color var(--transition);
  min-width: 160px;
}
.products-sort select:focus { border-color: var(--clr-accent); }
.products-sort::after {
  content: '';
  position: absolute;
  right: 13px; top: 50%;
  width: 6px; height: 6px;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  transform: translateY(-68%) rotate(45deg);
  pointer-events: none;
}

/* Separator */
.toolbar-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }

/* Grid view toggle — 3 buttons: 4-col, 2-col, list */
.products-view-toggle { display: flex; gap: 2px; }
.products-view-btn {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: none;
  transition: all var(--transition);
  color: var(--muted);
}
.products-view-btn.active {
  background: var(--clr-dark);
  border-color: var(--clr-dark);
  color: white;
}
.products-view-btn:not(.active):hover {
  border-color: var(--clr-soft);
  color: var(--charcoal);
}
.products-view-btn svg { width: 14px; height: 14px; }

/* ---- MAIN BODY ---- */
.products-body {
  padding: 40px 0 100px;
  background: var(--warm-white);
}

.products-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}

/* ============================================
   FILTER SIDEBAR — checkbox style like reference
============================================ */
.products-sidebar {
  position: sticky;
  top: 100px;
}

.filter-section {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(117,113,89,0.1);
}
.filter-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.filter-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.filter-section-title {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--charcoal);
  font-weight: 500;
}
.filter-reset-link {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  cursor: none;
  padding: 0;
  transition: color var(--transition);
}
.filter-reset-link:hover { color: var(--clr-accent); }

.filter-toggle-icon {
  width: 14px; height: 14px;
  color: var(--muted);
  transition: transform 0.3s;
  flex-shrink: 0;
  cursor: none;
}
.filter-section.collapsed .filter-toggle-icon { transform: rotate(-90deg); }
.filter-section-body {
  overflow: hidden;
  transition: max-height 0.35s ease;
  max-height: 600px;
}
.filter-section.collapsed .filter-section-body { max-height: 0; }

/* Checkbox rows */
.filter-checkbox-list { display: flex; flex-direction: column; gap: 0; }
.filter-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  cursor: none;
  border-bottom: 1px solid rgba(117,113,89,0.05);
  transition: padding-left var(--transition);
}
.filter-checkbox-row:last-child { border-bottom: none; }
.filter-checkbox-row:hover { padding-left: 4px; }

.filter-cb {
  width: 15px; height: 15px;
  border: 1px solid var(--clr-soft);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
  cursor: none;
  position: relative;
}
.filter-cb.checked { background: var(--clr-dark); border-color: var(--clr-dark); }
.filter-cb.checked::after {
  content: '';
  width: 8px; height: 5px;
  border-left: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(-45deg) translate(0px, -1px);
  display: block;
}
.filter-cb-label { font-size: 12px; color: var(--charcoal); flex: 1; cursor: none; }
.filter-cb-count { font-size: 10px; color: var(--muted); font-family: var(--font-display); font-style: italic; }

/* Price inputs */
.filter-price-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.filter-price-input {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--charcoal);
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 8px 10px;
  outline: none;
  width: 100%;
  text-align: center;
  transition: border-color var(--transition);
}
.filter-price-input:focus { border-color: var(--clr-accent); }
.filter-price-sep { font-size: 10px; color: var(--muted); text-align: center; }
.filter-apply-btn {
  width: 100%;
  padding: 10px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: white;
  background: var(--clr-dark);
  border: none;
  cursor: none;
  transition: background var(--transition);
  margin-top: 10px;
}
.filter-apply-btn:hover { background: var(--clr-accent); }

/* Color swatches */
.filter-colors { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.filter-color-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: none;
  transition: all 0.2s;
  outline: none;
}
.filter-color-btn:hover { transform: scale(1.2); }
.filter-color-btn.active {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 1px var(--clr-accent);
}

/* Size pills */
.filter-sizes { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.filter-size-btn {
  min-width: 40px; height: 36px;
  padding: 0 8px;
  border: 1px solid var(--border);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 10px; font-weight: 500; letter-spacing: 0.05em;
  color: var(--charcoal);
  cursor: none;
  transition: all var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.filter-size-btn:hover, .filter-size-btn.active {
  background: var(--clr-dark); border-color: var(--clr-dark); color: white;
}
.filter-size-btn.unavailable { opacity: 0.3; text-decoration: line-through; pointer-events: none; }

/* ============================================
   PRODUCT GRID AREA
============================================ */
.products-grid-wrap {}

/* Active filter tags */
.products-active-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  min-height: 30px;
}
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--charcoal);
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 5px 10px;
  cursor: none;
  transition: border-color var(--transition);
}
.filter-tag:hover { border-color: var(--clr-accent); }
.filter-tag-x {
  width: 10px; height: 10px;
  color: var(--muted);
  background: none; border: none; cursor: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.filter-tag-x:hover { color: var(--charcoal); }

/* ====== GRID VIEWS ====== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.products-grid.view-2col { grid-template-columns: repeat(2, 1fr); }
.products-grid.view-list { grid-template-columns: 1fr; }

/* ====== PRODUCT CARD ====== */
.prod-card {
  position: relative;
  overflow: hidden;
  cursor: none;
  background: var(--cream);
}

.prod-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.prod-card-img-ph {
  width: 100%; height: 100%;
  display: block;
  transition: transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.prod-card:hover .prod-card-img-ph { transform: scale(1.05); }

.prod-card-overlay {
  position: absolute; inset: 0;
  background: rgba(46,54,64,0.12);
  opacity: 0;
  transition: opacity 0.35s;
}
.prod-card:hover .prod-card-overlay { opacity: 1; }

/* Image placeholders */
.prod-bg-1 { background: linear-gradient(160deg, #ccc9ba 0%, #b8b5a7 100%); }
.prod-bg-2 { background: linear-gradient(160deg, #b8bfbc 0%, #a4acaa 100%); }
.prod-bg-3 { background: linear-gradient(160deg, #c9c5b9 0%, #b6b2a6 100%); }
.prod-bg-4 { background: linear-gradient(160deg, #c2c5c0 0%, #afb3ae 100%); }
.prod-bg-5 { background: linear-gradient(160deg, #cbc7bc 0%, #b8b4a9 100%); }
.prod-bg-6 { background: linear-gradient(160deg, #bec2bf 0%, #abb0ad 100%); }
.prod-bg-7 { background: linear-gradient(160deg, #c8c4b8 0%, #b5b1a5 100%); }
.prod-bg-8 { background: linear-gradient(160deg, #c0c4c1 0%, #adb2af 100%); }
.prod-bg-9 { background: linear-gradient(160deg, #cac6ba 0%, #b7b3a7 100%); }
.prod-bg-10 { background: linear-gradient(160deg, #c4c1b5 0%, #b1aea3 100%); }
.prod-bg-11 { background: linear-gradient(160deg, #bdbfbd 0%, #aaacaa 100%); }
.prod-bg-12 { background: linear-gradient(160deg, #ccc8bc 0%, #b9b5a9 100%); }

/* Badge */
.prod-badge-wrap {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 3;
}
.prod-badge {
  font-size: 7px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 8px; display: inline-block;
}
.prod-badge-new       { background: var(--clr-dark);   color: var(--clr-soft-xlight); }
.prod-badge-soldout   { background: var(--muted);       color: white; }
.prod-badge-sale      { background: var(--clr-dark);    color: white; }
.prod-badge-limited   { background: var(--clr-accent);  color: white; }
.prod-badge-bestseller{ background: rgba(46,54,64,0.82);color: var(--clr-soft-xlight); }

/* Action buttons stacked on right — like reference image */
.prod-actions {
  position: absolute;
  right: 10px; bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 4;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.3s, transform 0.3s;
}
.prod-card:hover .prod-actions { opacity: 1; transform: translateX(0); }

.prod-action-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: none;
  transition: background var(--transition), transform 0.2s;
  color: var(--charcoal);
}
.prod-action-btn:hover { background: var(--clr-dark); color: white; transform: scale(1.08); }
.prod-action-btn.active { background: var(--clr-accent); color: white; }
.prod-action-btn svg { width: 14px; height: 14px; }

/* Card info */
.prod-card-info {
  padding: 12px 2px 16px;
  background: transparent;
}
.prod-card-category {
  font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.prod-card-name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 400;
  color: var(--charcoal); line-height: 1.2; letter-spacing: -0.01em;
  margin-bottom: 6px;
  transition: color var(--transition);
}
.prod-card:hover .prod-card-name { color: var(--clr-accent); }
.prod-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.prod-card-price {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 400;
  color: var(--charcoal);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.prod-card-price-original {
  font-size: 12px; color: var(--muted);
  text-decoration: line-through; font-style: italic;
}
.prod-card-colors { display: flex; gap: 5px; align-items: center; }
.prod-color-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(117,113,89,0.2);
  cursor: none; transition: transform 0.2s; flex-shrink: 0;
}
.prod-color-dot:hover { transform: scale(1.35); }
.prod-color-more { font-size: 9px; color: var(--muted); }

/* Sold out */
.prod-card.sold-out .prod-card-img-ph { filter: grayscale(0.2); }
.prod-card.sold-out .prod-card-name { color: var(--muted); }

/* ====== LIST VIEW ====== */
.products-grid.view-list .prod-card {
  display: grid;
  grid-template-columns: 160px 1fr;
}
.products-grid.view-list .prod-card-img {
  aspect-ratio: 3/4; width: 160px; flex-shrink: 0;
}
.products-grid.view-list .prod-card-info {
  padding: 20px 24px;
  display: flex; flex-direction: column; justify-content: center;
}
.products-grid.view-list .prod-card-name { font-size: 20px; }
.products-grid.view-list .prod-actions { flex-direction: row; bottom: 20px; right: 20px; }

/* ====== 2-col ====== */
.products-grid.view-2col .prod-card-name { font-size: 18px; }

/* ============================================
   QUICK VIEW MODAL
============================================ */
.qv-backdrop {
  position: fixed; inset: 0;
  background: rgba(46,54,64,0.55);
  backdrop-filter: blur(6px);
  z-index: 2000; opacity: 0;
  transition: opacity 0.35s; pointer-events: none;
}
.qv-backdrop.open { opacity: 1; pointer-events: all; }
.qv-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(860px, 92vw); max-height: 88vh;
  background: var(--warm-white); z-index: 2001;
  display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden; opacity: 0;
  transition: opacity 0.35s, transform 0.35s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.qv-backdrop.open .qv-modal { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: all; }
.qv-img { aspect-ratio: 3/4; background: var(--cream); position: relative; overflow: hidden; }
.qv-img-ph { width: 100%; height: 100%; object-fit: cover; }
.qv-body { padding: 44px 36px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.qv-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.9); border: none; cursor: none;
  display: flex; align-items: center; justify-content: center;
  z-index: 10; transition: background var(--transition);
}
.qv-close:hover { background: var(--clr-accent); }
.qv-close:hover svg { color: white; }
.qv-close svg { width: 14px; height: 14px; color: var(--charcoal); }
.qv-category { font-size: 8px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--clr-accent); }
.qv-name { font-family: var(--font-display); font-size: clamp(22px, 2.8vw, 32px); font-weight: 300; color: var(--charcoal); line-height: 1.1; letter-spacing: -0.02em; }
.qv-price { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--charcoal); border-top: 1px solid var(--border); padding-top: 14px; }
.qv-desc { font-size: 12px; font-weight: 300; line-height: 1.9; color: var(--muted); }
.qv-size-label { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: block; }
.qv-sizes { display: flex; gap: 6px; flex-wrap: wrap; }
.qv-size-btn {
  width: 42px; height: 42px; border: 1px solid var(--border); background: var(--cream);
  font-size: 10px; font-weight: 500; color: var(--muted); cursor: none;
  transition: all var(--transition); display: flex; align-items: center; justify-content: center;
}
.qv-size-btn:hover, .qv-size-btn.active { background: var(--clr-dark); border-color: var(--clr-dark); color: white; }
.qv-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 8px; }
.qv-atc-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: white; background: var(--clr-dark); border: none; padding: 14px 24px; cursor: none;
  transition: background var(--transition); width: 100%;
}
.qv-atc-btn:hover { background: var(--clr-accent); }
.qv-view-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--charcoal); background: none; border: 1px solid var(--border);
  padding: 11px 24px; cursor: none; transition: all var(--transition); text-decoration: none;
}
.qv-view-btn:hover { background: var(--cream); color: var(--charcoal); }

/* ============================================
   LOAD MORE
============================================ */
.products-load-more {
  padding: 48px 0 0; text-align: center;
  border-top: 1px solid rgba(117,113,89,0.1); margin-top: 40px;
}
.products-load-progress {
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.products-load-bar {
  width: 180px; height: 1px;
  background: var(--clr-soft); margin: 0 auto 20px; position: relative;
}
.products-load-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 25%; background: var(--clr-accent); transition: width 0.6s ease;
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1280px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .products-layout { grid-template-columns: 200px 1fr; gap: 32px; }
}
@media (max-width: 960px) {
  .products-layout { grid-template-columns: 1fr; }
  .products-sidebar { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .filter-section { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid.view-list .prod-card { grid-template-columns: 120px 1fr; }
  .qv-modal { grid-template-columns: 1fr; }
  .qv-img { aspect-ratio: 16/9; }
  .qv-body { padding: 24px 20px; }
  .products-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .products-grid, .products-grid.view-2col { grid-template-columns: repeat(2, 1fr); }
  .products-grid.view-list { grid-template-columns: 1fr; }
  .products-toolbar { flex-wrap: wrap; gap: 10px; }
}
 /* =============================================
   MEGA MENU — Collections
============================================= */
    .nav-mega-wrap {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        background: var(--warm-white);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 24px 48px rgba(46, 54, 64, 0.08);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .nav-mega-wrap.open {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

    .nav-mega-inner {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 40px;
        display: grid;
        grid-template-columns: 1fr 1px 1.3fr;
        gap: 0;
    }

    /* LEFT: category list */
    .mega-left {
        padding: 40px 48px 40px 0;
    }

    .mega-col-label {
        font-size: 8px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mega-col-label::before {
        content: '';
        width: 20px;
        height: 1px;
        background: var(--clr-soft);
        display: block;
    }

    .mega-cats {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mega-cat-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 16px;
        text-decoration: none;
        border-left: 2px solid transparent;
        transition: all 0.2s ease;
        position: relative;
        cursor: none;
    }

    .mega-cat-item:hover {
        border-left-color: var(--clr-accent);
        background: var(--cream);
        padding-left: 20px;
    }

    .mega-cat-icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(117, 113, 89, 0.08);
        border: 1px solid rgba(117, 113, 89, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background var(--transition), border-color var(--transition);
    }

    .mega-cat-item:hover .mega-cat-icon {
        background: var(--clr-accent);
        border-color: var(--clr-accent);
    }

    .mega-cat-icon svg {
        width: 16px;
        height: 16px;
        color: var(--clr-accent);
        transition: color var(--transition);
    }

    .mega-cat-item:hover .mega-cat-icon svg {
        color: white;
    }

    .mega-cat-body {
        flex: 1;
    }

    .mega-cat-name {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 400;
        color: var(--charcoal);
        line-height: 1.1;
        transition: color var(--transition);
    }

    .mega-cat-item:hover .mega-cat-name {
        color: var(--clr-accent);
    }

    .mega-cat-count {
        font-size: 10px;
        color: var(--muted);
        margin-top: 2px;
        letter-spacing: 0.05em;
    }

    .mega-cat-arrow {
        width: 14px;
        height: 14px;
        color: var(--clr-soft);
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity 0.2s, transform 0.2s;
        flex-shrink: 0;
    }

    .mega-cat-item:hover .mega-cat-arrow {
        opacity: 1;
        transform: translateX(0);
    }

    /* Season tag link */
    .mega-cat-season {
        font-size: 9px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--clr-accent);
        padding: 10px 16px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mega-cat-season::before {
        content: '';
        width: 16px;
        height: 1px;
        background: var(--clr-soft);
        display: block;
    }

    /* Divider */
    .mega-divider {
        background: var(--border);
        width: 1px;
        margin: 32px 0;
    }

    /* RIGHT: featured */
    .mega-right {
        padding: 40px 0 40px 48px;
    }

    .mega-featured-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .mega-feat-card {
        position: relative;
        overflow: hidden;
        cursor: none;
    }

    .mega-feat-img {
        width: 100%;
        aspect-ratio: 3/4;
        display: block;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mega-feat-card:hover .mega-feat-img {
        transform: scale(1.08);
    }

    .mega-feat-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(46, 54, 64, 0.7) 0%, transparent 55%);
    }

    .mega-feat-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 14px 12px;
    }

    .mega-feat-tag {
        font-size: 7px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        margin-bottom: 3px;
    }

    .mega-feat-name {
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 400;
        color: white;
        line-height: 1.2;
    }

    /* Footer strip */
    .mega-footer {
        border-top: 1px solid var(--border);
        padding: 16px 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--cream);
        max-width: 100%;
    }

    .mega-footer-text {
        font-family: var(--font-display);
        font-size: 13px;
        font-style: italic;
        color: var(--muted);
    }

    .mega-footer-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 9px;
        font-weight: 500;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--charcoal);
        text-decoration: none;
        cursor: none;
        transition: color var(--transition);
    }

    .mega-footer-cta:hover {
        color: var(--clr-accent);
    }

    .mega-footer-cta svg {
        transition: transform 0.2s;
    }

    .mega-footer-cta:hover svg {
        transform: translateX(4px);
    }

    /* =============================================
   MOBILE — Collections Accordion
============================================= */
    .mobile-nav-collection-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0;
        background: none;
        border: none;
        cursor: none;
        text-decoration: none;
        color: var(--clr-accent);
        font-family: var(--font-display);
        font-size: 36px;
        font-weight: 300;
        letter-spacing: 0.05em;
        transition: color var(--transition);
    }

    .mobile-nav-collection-btn:hover {
        color: var(--clr-accent);
    }

    .mobile-nav-collection-chevron {
        width: 20px;
        height: 20px;
        color: var(--clr-soft);
        transition: transform 0.35s ease;
        flex-shrink: 0;
        margin-top: 8px;
    }

    .mobile-nav-collection-chevron.open {
        transform: rotate(180deg);
    }

    .mobile-collection-accordion {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-collection-accordion.open {
        max-height: 800px;
    }

    .mob-acc-inner {
        padding: 8px 0 16px;
    }

    .mob-acc-sublabel {
        font-size: 8px;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 10px;
        padding-left: 4px;
    }

    .mob-acc-cat-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mob-acc-cat-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--charcoal);
        text-decoration: none;
        cursor: none;
        border-left: 2px solid transparent;
        background: rgba(117, 113, 89, 0.04);
        transition: all var(--transition);
    }

    .mob-acc-cat-link:hover {
        border-left-color: var(--clr-accent);
        background: rgba(117, 113, 89, 0.1);
        color: var(--clr-accent);
    }

    .mob-acc-cat-ico {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(117, 113, 89, 0.08);
        border: 1px solid rgba(117, 113, 89, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mob-acc-cat-ico svg {
        width: 12px;
        height: 12px;
        color: var(--clr-accent);
    }

    .mob-acc-cat-text {
        flex: 1;
    }

    .mob-acc-cat-name-mob {
        font-size: 14px;
        color: inherit;
    }

    .mob-acc-cat-cnt {
        font-size: 10px;
        color: var(--muted);
        letter-spacing: 0.05em;
    }

    /* Featured thumbs strip */
    .mob-feat-section {
        margin-top: 16px;
    }

    .mob-feat-label {
        font-size: 8px;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 8px;
        padding-left: 4px;
    }

    .mob-feat-strip {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mob-feat-strip::-webkit-scrollbar {
        display: none;
    }

    .mob-feat-thumb {
        flex-shrink: 0;
        width: 80px;
        position: relative;
        overflow: hidden;
        border-radius: 2px;
    }

    .mob-feat-thumb-ph {
        width: 100%;
        aspect-ratio: 3/4;
        display: block;
    }

    .mob-feat-thumb-label {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8px 6px 6px;
        background: linear-gradient(to top, rgba(46, 54, 64, 0.8) 0%, transparent 100%);
        font-family: var(--font-display);
        font-size: 10px;
        color: white;
        line-height: 1.2;
    }

    /* View all mobile */
    .mob-acc-viewall {
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px;
        border: 1px solid var(--border);
        font-size: 9px;
        font-weight: 500;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--charcoal);
        text-decoration: none;
        cursor: none;
        transition: all var(--transition);
    }

    .mob-acc-viewall:hover {
        background: var(--clr-dark);
        color: white;
        border-color: var(--clr-dark);
    }

    .mob-acc-viewall svg {
        transition: transform 0.2s;
    }

    .mob-acc-viewall:hover svg {
        transform: translateX(4px);
    }