.m-container{width:100%;padding-inline:16px}

/* ============================================================
   HEADER
   ============================================================ */
.m-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--c-border-soft);
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  min-height:60px;
}
.m-logo{
  font-weight:900;font-size:20px;
  letter-spacing:-.04em;
  color:var(--c-navy);
}
.m-logo img{max-height:36px;width:auto}
.m-header-actions{display:flex;gap:8px}
.m-icon-btn{
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);
  background:var(--c-bg-alt);
  color:var(--c-text);
  position:relative;
  transition:all var(--t-fast);
}
.m-icon-btn:active{
  background:var(--c-violet-soft);
  color:var(--c-violet);
  transform:scale(.94);
}
.m-icon-btn .cart-count{
  position:absolute;top:-4px;right:-4px;
  background:var(--c-cyan);color:var(--c-navy);
  font-size:10px;font-weight:800;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}

/* ============================================================
   CONTENT
   ============================================================ */
.content-area{padding-block:20px}
.m-page-title{
  font-size:var(--fs-xl);
  font-weight:800;
  margin-bottom:20px;
  letter-spacing:-.02em;
}

/* Product grid */
.product-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 12px;
}
.product-title{font-size:var(--fs-xs);padding:12px 12px 0}
.product-price{font-size:var(--fs-sm);padding:0 12px 14px}
.product-badge{top:10px;left:10px;padding:4px 10px;font-size:9px}

/* Single */
.entry-title{font-size:var(--fs-xl);margin-bottom:14px;letter-spacing:-.02em}
.entry-thumb{margin-bottom:18px;border-radius:var(--radius);overflow:hidden}
.entry-content{font-size:var(--fs-base);line-height:1.7;color:var(--c-text-soft)}

/* Search */
.search-form{display:flex;gap:6px;margin-bottom:18px}
.search-form input{flex:1}
.search-form button{
  padding:12px 18px;
  background:var(--c-navy);color:#fff;
  border-radius:var(--radius-pill);
  font-weight:600;
}

/* Pagination */
.pagination{display:flex;gap:6px;justify-content:center;margin-block:24px;flex-wrap:wrap}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;
  border-radius:var(--radius-pill);
  background:var(--c-bg);
  border:1px solid var(--c-border);
  font-size:var(--fs-sm);font-weight:700;
  color:var(--c-text-soft);
}
.pagination .page-numbers.current{
  background:var(--c-navy);
  color:#fff;
  border-color:var(--c-navy);
}

/* ============================================================
   FOOTER
   ============================================================ */
.m-footer{
  background:var(--c-navy);
  color:#a5adbf;
  padding:48px 16px 100px;
  margin-top:40px;
  text-align:center;
  font-size:var(--fs-sm);
  position:relative;
  overflow:hidden;
}
.m-footer::before{
  content:"";position:absolute;
  top:-80px;right:-80px;
  width:200px;height:200px;
  background:radial-gradient(circle,var(--c-violet) 0%,transparent 70%);
  opacity:.2;
  pointer-events:none;
}
.m-footer-brand{
  font-size:20px;font-weight:900;color:#fff;
  letter-spacing:-.03em;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}
.m-footer-links{
  display:flex;justify-content:center;gap:20px;
  flex-wrap:wrap;margin-bottom:20px;
  position:relative;
  z-index:1;
}
.m-footer-links a{color:#a5adbf;font-size:var(--fs-sm);font-weight:500;transition:color var(--t-fast)}
.m-footer-links a:hover{color:var(--c-cyan)}
.m-footer small{color:#6b7384;font-size:var(--fs-xs);position:relative;z-index:1}

/* ============================================================
   BOTTOM NAV
   ============================================================ */
.m-bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--c-border-soft);
  display:grid;grid-template-columns:repeat(4,1fr);
  z-index:200;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 24px rgba(13,18,48,.06);
}
.m-bottom-nav a{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 4px 12px;
  font-size:10px;
  color:var(--c-muted);
  font-weight:600;
  transition:color var(--t-fast);
  position:relative;
}
.m-bottom-nav a:hover,.m-bottom-nav a.active{color:var(--c-violet)}
.m-bottom-nav a.active::before{
  content:"";position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:24px;height:3px;
  background:var(--c-violet);
  border-radius:0 0 3px 3px;
}
.m-nav-icon{font-size:22px;line-height:1}

.cart-drawer{max-width:100%}

/* ============================================================
   HOME PAGE — mobile
   ============================================================ */
.hero-m {
  margin: 12px 16px 32px;
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-link-m { display: block; }
.hero-img-m { width: 100%; height: auto; display: block; }

.hero-placeholder-m {
  background: linear-gradient(135deg, var(--c-violet) 0%, var(--c-navy) 100%);
  padding: 36px 24px;
  color: #fff;
  text-align: center;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.hero-placeholder-m::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, var(--c-cyan) 0%, transparent 70%);
  opacity: .3;
  pointer-events: none;
}
.hero-placeholder-m > * { position: relative; z-index: 1; }

.hero-eyebrow-m {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-cyan);
  padding: 4px 10px;
  border: 1px solid rgba(77,216,232,.4);
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.hero-title-m {
  font-size: var(--fs-2xl);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 10px;
}
.hero-sub-m {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.8);
  line-height: 1.5;
}

.home-section-m { margin-bottom: 40px; }

.section-header-m {
  text-align: center;
  margin-bottom: 24px;
  padding-inline: 16px;
}
.section-header-m .section-eyebrow {
  font-size: 10px;
  padding: 4px 10px;
  margin-bottom: 10px;
}
.section-title-m {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--c-text);
}

.section-cta-m {
  margin-top: 20px;
  padding-inline: 16px;
}

/* CATEGORY GRID MOBILE */
.category-grid-m {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-inline: 16px;
}
.category-tile-m {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-bg-alt);
  display: block;
}
.category-tile-m img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.category-tile-m .tile-fallback span { font-size: 2rem; }
.tile-overlay-m {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px 6px 8px;
  background: linear-gradient(to top, rgba(13,18,48,.92), transparent);
  color: #fff;
  text-align: center;
}
.tile-name-m {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   HERO SLIDER — mobile
   ============================================================ */
.hero-slider-m {
  border-radius: var(--radius);
  margin: 12px 16px 32px;
}
.hero-dots-m {
  bottom: 12px;
  padding: 6px 12px;
  gap: 6px;
}
.hero-dot-m { width: 6px; height: 6px; }
.hero-dot-m.is-active { width: 20px; }

/* ============================================================
   SPACING FIX — mobile
   ============================================================ */
.home-wrapper {
  padding-top: 16px;
}

.hero-m {
  margin: 0 16px 40px;
}

.home-section-m {
  margin-bottom: 48px;
}

.home-section-m:last-child {
  margin-bottom: 24px;
}

/* ============================================================
   ARCHIVE — mobile
   ============================================================ */
.archive-wrapper-m { padding-block: 20px 40px; }

.archive-header-m { margin-bottom: 16px; }
.archive-title-m {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.02em;
}

.archive-toolbar-m {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  flex-shrink: 0;
}
.filter-trigger:active {
  background: var(--c-violet-soft);
  border-color: var(--c-violet);
  color: var(--c-violet);
}
.sort-form-m { flex: 1; }
.sort-form-m select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: #fff;
}

/* FILTER DRAWER */
.filter-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13,18,48,.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
  z-index: 999;
  backdrop-filter: blur(2px);
}
.filter-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.filter-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 340px;
  background: #fff;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 8px 0 32px rgba(13,18,48,.15);
}
.filter-drawer.is-open { transform: translateX(0); }

.filter-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid var(--c-border);
}
.filter-drawer-header h3 { font-size: var(--fs-md); font-weight: 700; }
.filter-drawer-close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-bg-alt);
  color: var(--c-text);
}
.filter-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}
.filter-section { margin-bottom: 24px; }
.filter-section h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.filter-cat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.filter-cat-list a {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  border-radius: var(--radius-sm);
}
.filter-cat-list a:hover,
.filter-cat-list li.is-active a {
  background: var(--c-violet-soft);
  color: var(--c-violet);
  font-weight: 600;
}
.filter-cat-list li.is-active a {
  background: var(--c-navy);
  color: #fff;
}
.filter-cat-list .count { font-size: var(--fs-xs); opacity: .6; }

/* Price slider di mobile */
.filter-drawer .price-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-bottom: 14px;
}
.filter-drawer .price-slider {
  position: relative;
  height: 24px;
  margin-bottom: 18px;
}
.filter-drawer .slider-track {
  position: absolute;
  top: 10px; left: 0; right: 0;
  height: 4px;
  background: var(--c-bg-alt);
  border-radius: 2px;
}
.filter-drawer .slider-fill {
  position: absolute;
  top: 10px;
  height: 4px;
  background: var(--c-violet);
  border-radius: 2px;
}
.filter-drawer .price-slider input[type=range] {
  position: absolute;
  top: 10px;
  width: 100%;
  height: 4px;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
}
.filter-drawer input[type=range]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-violet);
  box-shadow: 0 2px 6px rgba(108,99,255,.3);
}

/* ============================================================
   SINGLE PRODUK — mobile
   ============================================================ */
.single-produk-m { padding-block: 16px 100px; }

.single-gallery-m {
  aspect-ratio: 1/1;
  background: var(--c-bg-alt);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.single-gallery-m img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.gallery-main-img-m { width: 100%; height: 100%; object-fit: cover; }
.single-gallery-m .gallery-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  color: var(--c-muted-2);
}

.single-title-m {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.single-sku-m {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-bottom: 14px;
}
.single-price-block-m {
  padding: 14px 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.single-price-m {
  font-size: var(--fs-2xl);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--c-navy);
}

.single-variations-m {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--c-bg-soft);
  border-radius: var(--radius);
}
.variation-group-m { margin-bottom: 12px; }
.variation-group-m label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-muted);
}
.variation-group-m .variation-select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  background: #fff;
}

.single-desc-m {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-border);
}
.single-desc-m h3 {
  font-size: var(--fs-md);
  margin-bottom: 10px;
}
.single-desc-m {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-soft);
}

/* STICKY BAR */
.single-sticky-bar {
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--c-border);
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  z-index: 150;
  box-shadow: 0 -4px 16px rgba(13,18,48,.06);
}
.qty-control-m {
  display: inline-flex;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
}
.qty-control-m button {
  width: 40px;
  background: #fff;
  border: 0;
  font-size: 16px;
  font-weight: 600;
}
.qty-control-m input {
  width: 44px;
  text-align: center;
  border: 0;
  border-left: 1.5px solid var(--c-border-strong);
  border-right: 1.5px solid var(--c-border-strong);
  font-weight: 700;
  font-size: var(--fs-sm);
  background: #fff;
  -moz-appearance: textfield;
}
.qty-control-m input::-webkit-outer-spin-button,
.qty-control-m input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-add-btn-m {
  flex: 1;
  padding: 12px 20px;
  font-size: var(--fs-base);
  font-weight: 700;
  border-radius: var(--radius);
}
.single-add-btn-m.is-added {
  background: var(--c-success);
}

.single-related-m {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--c-border);
}

/* ============================================================
   SINGLE — mobile layout baru
   ============================================================ */
.single-price-row-m {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--c-border);
}
.single-price-row-m .single-price-block-m {
  padding: 0;
  border: 0;
  margin: 0;
  flex: 1;
}
.single-status-badge {
  display: inline-block;
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  margin-bottom: 2px;
}
.single-status-badge.badge-limited { background: var(--c-badge-limited); }
.single-status-badge.badge-presale { background: var(--c-badge-presale); }
.single-status-badge.badge-ready   { background: var(--c-badge-ready); }
.single-status-badge.badge-sold    { background: var(--c-badge-sold); }

.single-meta-m {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.single-meta-m .meta-row { display: flex; gap: 10px; }
.single-meta-m .meta-label {
  color: var(--c-muted);
  font-weight: 600;
  min-width: 70px;
}
.single-meta-m .meta-value a { color: var(--c-violet); }

.single-payment-box-m {
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
  text-align: center;
  margin-top: 16px;
}
.single-payment-box-m .payment-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-bottom: 10px;
}
.single-payment-box-m .payment-icons {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.single-payment-box-m .pay-icon {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 6px;
  border: 1px solid var(--c-border-strong);
  border-radius: 3px;
  background: #fff;
  color: var(--c-text-soft);
  letter-spacing: .06em;
}

/* Gallery discount badge */
.gallery-badge-discount {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ef4444;
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  z-index: 2;
}

/* Tabs mobile */
.single-tabs {
  margin-top: 32px;
  border-top: 1px solid var(--c-border);
  padding-top: 0;
}
.single-tabs-nav {
  display: flex;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 20px;
}
.single-tab-item {
  padding: 14px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.single-tab-item.is-active {
  color: var(--c-text);
  border-bottom-color: var(--c-violet);
  font-weight: 700;
}
.single-tab-panel { display: none; }
.single-tab-panel.is-active { display: block; }
.single-empty {
  color: var(--c-muted);
  font-style: italic;
  padding: 16px 0;
}