/* ═══════════════════════════════════════════════════════════════
   MAISON KARU — New Arrivals Page Styles
═══════════════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Montserrat',sans-serif; background:#F2EDE4; margin:0; padding:0; }

/* ═══ HERO ═══ */
.newin-hero {
  position:relative; width:100%; overflow:hidden; display:flex; align-items:flex-end;
}
.newin-hero-bg { position:relative; width:100%; z-index:0; line-height:0; }
.newin-hero-bg img { width:100%; height:auto; display:block; }
.newin-hero-bg .hero-img-portrait  { display:none; }
.newin-hero-bg .hero-img-landscape { display:block; }

.newin-hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom,
    rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.00) 40%,
    rgba(0,0,0,0.25) 72%, rgba(0,0,0,0.58) 100%);
}

.newin-hero-inner {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 60px 48px; gap:40px;
}

.newin-hero-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(44px,5.5vw,82px); font-weight:400;
  letter-spacing:0.04em; color:#fff; line-height:0.88;
  text-transform:uppercase; text-shadow:0 2px 24px rgba(0,0,0,0.20);
}
.newin-hero-title em { font-style:italic; color:rgba(255,255,255,0.82); display:block; }

.newin-hero-stats { display:flex; align-items:flex-end; padding-bottom:4px; flex-shrink:0; }

.newin-stat {
  padding-right:24px; margin-right:24px;
  border-right:1px solid rgba(255,255,255,0.30);
}
.newin-stat:last-child { border-right:none; margin-right:0; padding-right:0; }
.newin-stat-num {
  font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:400;
  color:#fff; letter-spacing:0.02em; line-height:1; margin-bottom:4px;
  text-shadow:0 1px 12px rgba(0,0,0,0.25);
}
.newin-stat-label {
  font-family:'Montserrat',sans-serif; font-size:7px; font-weight:700;
  letter-spacing:0.20em; text-transform:uppercase; color:rgba(255,255,255,0.65);
}

/* ═══ BREADCRUMB ═══ */
.shop-breadcrumb {
  padding:22px 40px 0;
  font-family:'Montserrat',sans-serif; font-size:10px; font-weight:400;
  letter-spacing:0.08em; color:#999;
}
.shop-breadcrumb a { color:#999; text-decoration:none; }
.shop-breadcrumb a:hover { color:#111; }
.shop-breadcrumb span { color:#bbb; margin:0 6px; }

/* ═══ TOOLBAR ═══ */
.shop-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 40px 20px; gap:10px; flex-wrap:nowrap;
  overflow:visible; position:relative; z-index:200;
}
.shop-toolbar-right { display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto; }

.grid-toggle { display:flex; align-items:center; gap:2px; }
.grid-toggle-btn {
  background:none; border:none; cursor:pointer; padding:4px;
  display:flex; align-items:center; justify-content:center;
  opacity:0.28; transition:opacity 0.2s;
}
.grid-toggle-btn.active { opacity:1; }
.grid-toggle-btn:hover  { opacity:0.65; }
.grid-toggle-btn svg    { width:16px; height:16px; fill:#111; }

.sort-wrap { position:relative; display:flex; align-items:center; flex-shrink:0; }
.sort-btn {
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:5px;
  font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:#111; padding:0; white-space:nowrap;
}
.sort-btn:hover { opacity:0.6; }
.sort-btn .sort-arrow { font-size:8px; display:inline-block; transition:transform 0.25s ease; line-height:1; }
.sort-wrap.open .sort-btn .sort-arrow { transform:rotate(180deg); }
.sort-dropdown {
  position:absolute; top:calc(100% + 4px); right:0;
  background:#fff; border:1px solid rgba(0,0,0,0.10);
  min-width:150px; z-index:9000; display:none; flex-direction:column;
  box-shadow:0 8px 32px rgba(0,0,0,0.12);
}
.sort-wrap.open .sort-dropdown { display:flex; }
.sort-option {
  font-family:'Montserrat',sans-serif; font-size:10px; font-weight:400;
  letter-spacing:0.06em; color:#333; padding:10px 16px; cursor:pointer;
  text-align:right; transition:background 0.15s;
  display:flex; align-items:center; justify-content:flex-end; gap:6px;
}
.sort-option:hover { background:#f5f3ee; }
.sort-option.active { font-weight:600; color:#111; }
.sort-option .sort-dot { width:5px; height:5px; border-radius:50%; background:#111; flex-shrink:0; display:none; }
.sort-option.active .sort-dot { display:block; }

/* ═══ MOBILE FLOATING FILTERS ═══ */
#mobile-floating-filters {
  display:none; position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:900; align-items:center; gap:7px;
  background:rgba(242,237,228,0.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(17,17,17,0.18); border-radius:100px; padding:10px 22px;
  cursor:pointer; font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; color:#111; white-space:nowrap;
  box-shadow:0 4px 24px rgba(0,0,0,0.08); transition:opacity 0.2s, background 0.2s;
}
#mobile-floating-filters svg { width:13px; height:13px; stroke:#111; fill:none; flex-shrink:0; }
#mobile-floating-filters:hover { background:rgba(242,237,228,0.8); }

/* ═══ LAYOUT & SIDEBAR ═══ */
.shop-layout {
  display:flex; min-height:60vh; position:relative;
  padding:0 40px; background:#F2EDE4;
}
.sidebar-wrapper { display:flex; align-items:center; flex-shrink:0; z-index:10; }
.filters-inner-container { width:0; overflow:hidden; transition:width 0.4s cubic-bezier(0.4,0,0.2,1); background:#F2EDE4; }
.sidebar-wrapper.open .filters-inner-container { width:190px; }
.filters-inner-content { width:190px; padding:10px 15px 40px 0; opacity:0; transition:opacity 0.25s ease; white-space:nowrap; }
.sidebar-wrapper.open .filters-inner-content { opacity:1; transition-delay:0.1s; }

.filter-accordion { display:flex; flex-direction:column; }
.filter-acc-item  { border-top:1px solid #111; }
.filter-acc-item:last-child { border-bottom:1px solid #111; }
.filter-acc-trigger {
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; padding:14px 0;
  font-family:'Montserrat',sans-serif; font-size:10px; font-weight:500;
  letter-spacing:0.08em; color:#111; text-transform:uppercase;
}
.filter-acc-trigger .acc-icon { font-size:11px; font-weight:400; display:inline-block; transition:transform 0.3s ease; line-height:1; }
.filter-acc-item.open .filter-acc-trigger .acc-icon { transform:rotate(180deg); }
.filter-acc-body { overflow:hidden; max-height:0; transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1); }
.filter-acc-item.open .filter-acc-body { max-height:300px; }
.filter-acc-body-inner { padding:8px 0 16px; }
.filter-option {
  display:flex; align-items:center; gap:10px; padding:8px 0;
  font-family:'Montserrat',sans-serif; font-size:10px; font-weight:400;
  letter-spacing:0.06em; color:#444; cursor:pointer;
}
.filter-option input[type="checkbox"] {
  width:13px; height:13px; border:1px solid #aaa; border-radius:2px;
  appearance:none; cursor:pointer; flex-shrink:0; position:relative;
  transition:background 0.2s, border-color 0.2s;
}
.filter-option input[type="checkbox"]:checked { background:#111; border-color:#111; }
.filter-option input[type="checkbox"]:checked::after {
  content:''; position:absolute; left:3px; top:1px; width:4px; height:8px;
  border:1.5px solid #fff; border-top:none; border-left:none; transform:rotate(45deg);
}
.clear-filters-btn {
  width:100%; display:block; margin-top:40px; padding:14px 0;
  background:#e4e2dd; border:none; cursor:pointer;
  font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:#444; transition:background 0.2s;
}
.clear-filters-btn:hover { background:#d4d2cc; }
.filters-toggle-wrap { width:32px; display:flex; align-items:center; justify-content:center; }
.vertical-filters-toggle {
  transform:rotate(-90deg); background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:#111; white-space:nowrap;
}
.toggle-arrow { display:inline-block; transition:transform 0.35s ease; }
.sidebar-wrapper.open .toggle-arrow { transform:rotate(180deg); }

/* ═══ MOBILE BOTTOM SHEET ═══ */
#filters-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45);
  z-index:1999; opacity:0; transition:opacity 0.32s ease;
}
#filters-overlay.visible { opacity:1; }
#filters-bottom-sheet {
  position:fixed; bottom:0; left:0; right:0; z-index:2000;
  background:#F2EDE4; border-radius:16px 16px 0 0;
  transform:translateY(100%); transition:transform 0.42s cubic-bezier(.22,.61,.36,1);
  will-change:transform; max-height:85vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
#filters-bottom-sheet.open { transform:translateY(0); }
.sheet-handle-row { display:flex; align-items:center; justify-content:center; padding:14px 0 6px; }
.sheet-handle     { width:36px; height:4px; background:#ccc; border-radius:2px; }
.sheet-header     { display:flex; align-items:center; justify-content:space-between; padding:12px 24px 16px; border-bottom:1px solid rgba(0,0,0,0.08); }
.sheet-title      { font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#111; }
.sheet-close-btn  { background:none; border:none; cursor:pointer; padding:4px; display:flex; align-items:center; justify-content:center; }
.sheet-close-btn svg { width:18px; height:18px; stroke:#111; }
.sheet-close-btn:hover { opacity:0.55; }
.sheet-body { padding:0 24px; }
.sheet-filter-group { border-bottom:1px solid rgba(0,0,0,0.09); }
.sheet-filter-trigger {
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; padding:17px 0;
  font-family:'Montserrat',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:0.10em; text-transform:uppercase; color:#111;
}
.sheet-filter-trigger .trigger-icon { width:16px; height:16px; position:relative; flex-shrink:0; }
.sheet-filter-trigger .trigger-icon::before,
.sheet-filter-trigger .trigger-icon::after { content:''; position:absolute; background:#111; border-radius:1px; transition:transform 0.28s ease, opacity 0.28s ease; }
.sheet-filter-trigger .trigger-icon::before { width:16px; height:1.5px; top:50%; left:0; transform:translateY(-50%); }
.sheet-filter-trigger .trigger-icon::after  { width:1.5px; height:16px; top:0; left:50%; transform:translateX(-50%); }
.sheet-filter-group.open .sheet-filter-trigger .trigger-icon::after { opacity:0; transform:translateX(-50%) rotate(90deg); }
.sheet-filter-body { overflow:hidden; max-height:0; transition:max-height 0.36s cubic-bezier(0.4,0,0.2,1); }
.sheet-filter-group.open .sheet-filter-body { max-height:300px; }
.sheet-filter-options { padding:0 0 18px; }
.sheet-filter-option {
  display:flex; align-items:center; gap:12px; padding:10px 0;
  font-family:'Montserrat',sans-serif; font-size:11px; font-weight:400;
  letter-spacing:0.05em; color:#333; cursor:pointer;
}
.sheet-filter-option input[type="checkbox"] {
  width:16px; height:16px; border:1px solid #aaa; border-radius:2px;
  appearance:none; cursor:pointer; flex-shrink:0; position:relative;
  transition:background 0.2s, border-color 0.2s;
}
.sheet-filter-option input[type="checkbox"]:checked { background:#111; border-color:#111; }
.sheet-filter-option input[type="checkbox"]:checked::after {
  content:''; position:absolute; left:4px; top:1.5px; width:5px; height:9px;
  border:1.5px solid #fff; border-top:none; border-left:none; transform:rotate(45deg);
}
.sheet-footer { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:20px 24px 32px; }
.sheet-btn-clear {
  padding:14px; background:#e4e2dd; border:none; cursor:pointer;
  font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:#444; transition:background 0.2s;
}
.sheet-btn-clear:hover { background:#d4d2cc; }
.sheet-btn-apply {
  padding:14px; background:#111; border:none; cursor:pointer;
  font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:#fff; transition:background 0.2s;
}
.sheet-btn-apply:hover { background:#333; }

/* ═══ PRODUCT GRID ═══ */
.products-grid-wrap { flex:1; min-width:0; padding:0 0 100px 20px; }
.products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px 20px; transition:all .25s ease; }
.products-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.products-grid.cols-2 { grid-template-columns:repeat(2,1fr); }

.shop-product-card { display:block; text-decoration:none; cursor:pointer; }
.shop-product-img-wrap { position:relative; background:#F2EDE4; aspect-ratio:3/4; overflow:hidden; margin-bottom:12px; }
.shop-product-img-wrap .img-primary {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center; mix-blend-mode:multiply;
  transition:opacity 0.45s ease, transform 0.45s ease; opacity:1; z-index:2;
}
.shop-product-img-wrap .img-hover {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center; mix-blend-mode:multiply;
  transition:opacity 0.45s ease, transform 0.45s ease;
  opacity:0; z-index:3; transform:scale(1.04);
}
.shop-product-card:hover .img-primary { opacity:0; transform:scale(1.04); }
.shop-product-card:hover .img-hover   { opacity:1; transform:scale(1); }

.product-badge {
  position:absolute; top:12px; left:12px;
  font-family:'Montserrat',sans-serif; font-size:8.5px; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase; color:#fff; background:#111;
  padding:4px 8px; z-index:4;
}
.product-badge.preorder { background:#7a6a5a; }

.shop-product-info { padding:0 2px; }
.shop-product-label {
  font-family:'Montserrat',sans-serif; font-size:8.5px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; color:#999; margin-bottom:3px;
}
.shop-product-name {
  font-family:'Montserrat',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:#111; margin-bottom:2px; line-height:1.35;
}
.shop-product-subname {
  font-family:'Montserrat',sans-serif; font-size:9px; font-weight:400;
  font-style:italic; letter-spacing:0.04em; color:#888; margin-bottom:5px; line-height:1.4;
}
.shop-product-price {
  font-family:'Montserrat',sans-serif; font-size:11px; font-weight:400;
  letter-spacing:0.05em; color:#555;
}

.card-soon-overlay {
  position:absolute; inset:0; background:rgba(237,232,222,0.6);
  z-index:10; display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.card-soon-label {
  font-size:7.5px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase;
  color:#999; border:1px solid rgba(0,0,0,0.12); padding:9px 20px; background:#EDE8DE; white-space:nowrap;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width:860px) {
  #mobile-floating-filters { display:flex; }
  .newin-hero-bg .hero-img-portrait  { display:block; }
  .newin-hero-bg .hero-img-landscape { display:none; }
  .newin-hero-inner { flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:0 22px 36px; gap:20px; }
  .newin-hero-title { font-size:clamp(42px,11vw,68px); }
  .newin-hero-stats { flex-wrap:wrap; }
  .newin-stat       { padding-right:18px; margin-right:18px; }
  .newin-stat-num   { font-size:24px; }
  .shop-breadcrumb  { padding:16px 20px 0; }
  .shop-toolbar     { padding:0 16px 14px; gap:8px; }
  .shop-layout      { padding:0; }
  .sidebar-wrapper  { display:none; }
  #filters-overlay  { display:block; }
  .products-grid-wrap { padding:20px 16px 100px; }
  .products-grid    { grid-template-columns:repeat(2,1fr); gap:14px 10px; }
}

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

@media (max-width:480px) {
  .newin-hero-inner { padding:0 18px 30px; gap:16px; }
}