/* BÉ NÂU 3D • V4, modern category + storefront refinement.
   Override-only stylesheet: site-compact-v3.css and all business logic stay intact. */
:root {
  --modern-card: #1c2029;
  --modern-card-edge: #353a45;
  --modern-shadow: 0 14px 38px rgba(0,0,0,.12);
}
html[data-theme="black"] {
  --modern-card: #131416;
  --modern-card-edge: #303035;
  --modern-shadow: 0 14px 38px rgba(0,0,0,.26);
}
html[data-theme="light"] {
  --modern-card: #ffffff;
  --modern-card-edge: #e2e4dd;
  --modern-shadow: 0 14px 40px rgba(42,48,29,.055);
}

/* Softer storefront proportions and clear section hierarchy. */
.categories-section {
  padding-top: 34px;
  padding-bottom: 38px;
}
.category-section-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.category-section-top .section-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
}
.kicker-line { width: 16px; height: 2px; flex: none; background: var(--accent); border-radius: 2px; }
.category-section-top h2 {
  margin: 9px 0 4px;
  font-size: clamp(23px,2.7vw,32px);
  line-height: 1.26;
  letter-spacing: -1.15px;
  font-weight: 800;
}
.category-section-top h2>span:not(.title-dot) { font-weight: 500; }
.category-section-top p { margin: 0; font-size: 10px; color: var(--muted); line-height: 1.6; }
.all-category-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.all-category-link:hover { background: var(--paper2); border-color: var(--accent); }
.all-category-link span { display: inline-grid;place-items:center;color:var(--accent);font-size:16px;line-height:1; }

/* Low-profile tiles: color is used as an accent, not as the entire card. */
.category-grid.category-grid-modern {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
}
.category-grid-modern .category-tile {
  --tile-accent: #cbb9fb;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 136px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--modern-card-edge);
  border-radius: 15px;
  color: var(--ink);
  background: linear-gradient(142deg,color-mix(in srgb,var(--modern-card) 87%,var(--tile-accent)),var(--modern-card) 68%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.category-grid-modern .category-tile:before {
  position: absolute;
  content: '';
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--tile-accent);
  opacity: .8;
}
.category-grid-modern .category-tile:after {
  content: '';
  position: absolute;
  width: 114px;
  height: 114px;
  border-radius: 50%;
  right: -66px;
  top: -72px;
  pointer-events: none;
  background: radial-gradient(circle,color-mix(in srgb,var(--tile-accent) 13%,transparent),transparent 70%);
  z-index: -1;
}
.category-grid-modern .tile-0 { --tile-accent: #cbb5f7; }
.category-grid-modern .tile-1 { --tile-accent: #b6dd9f; }
.category-grid-modern .tile-2 { --tile-accent: #f7b7a8; }
.category-grid-modern .tile-3 { --tile-accent: #a8c3fc; }
.category-grid-modern .tile-4 { --tile-accent: #f0d99e; }
.category-grid-modern .category-tile:hover,
.category-grid-modern .category-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--modern-shadow); border-color:var(--tile-accent); }
.category-grid-modern .category-tile.selected { border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent); }
.category-grid-modern .category-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb,var(--tile-accent) 16%,transparent);
  color: var(--tile-accent);
  margin-bottom: auto;
}
html[data-theme="light"] .category-grid-modern .category-icon {color:color-mix(in srgb,var(--tile-accent) 64%,#17212c);background:color-mix(in srgb,var(--tile-accent) 30%,#fff);}
.category-grid-modern .category-icon svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.category-grid-modern .category-caption { display: flex; flex-direction:column; gap: 4px; position:relative; z-index:1; max-width:calc(100% - 18px); }
.category-grid-modern .category-name { font-size: 12px; font-weight: 800; letter-spacing: -.24px; line-height: 1.4; max-width:100%; white-space:nowrap; }
.category-grid-modern .category-caption small { display:block; font-size: 9px; font-weight:500; line-height:1.25; color:var(--muted); opacity:1; margin:0; white-space:nowrap; }
.category-grid-modern .category-arrow {
  right: 12px; top: 12px;
  width: 25px; height: 25px;
  display: grid; place-items:center;
  border: 1px solid var(--modern-card-edge);
  border-radius: 8px;
  background: color-mix(in srgb,var(--modern-card) 90%,transparent);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  transition: background .2s, color .2s;
}
.category-grid-modern .category-tile:hover .category-arrow {background:var(--tile-accent);color:#252434;border-color:var(--tile-accent)}

/* More coherent search controls and collection treatment. */
.catalog-panel { background: linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--paper) 78%,var(--bg))); border-color:var(--line); }
.catalog-top .section-kicker { letter-spacing: 1.15px; }
.catalog-top h2 { font-weight:800; }
.filter-form { align-items:stretch; }
.search-box, .filter-form select { border:1px solid var(--line); background:var(--bg); box-shadow:0 1px 0 rgba(255,255,255,.015); }
.search-box:focus-within, .filter-form select:focus { border-color:var(--accent); }
.search-box .search-icon { width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);flex:none; }
.search-box .search-icon svg {width:16px;height:16px;}
.search-box button { font-size:17px;background:var(--paper2); }
.filter-submit { display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap; }
.filter-submit span { font-size:16px;line-height:1; }
.filter-chips a { transition:background .18s,color .18s,border-color .18s; }
.filter-chips a:hover {border-color:var(--accent)}
.product-card { background:var(--bg);border-color:var(--line);transition: transform .2s,border-color .2s,box-shadow .2s; }
.product-card:hover { border-color:color-mix(in srgb,var(--accent) 44%,var(--line)); }
.product-info h3 {font-weight:800;}
.product-view {background:var(--accent);color:var(--accent-ink);}

/* App-like bottom navigation without covering the product listings. */
@media(max-width:700px) {
  .categories-section {padding-top:27px;padding-bottom:30px;}
  .category-section-top { gap:10px;align-items:end;margin-bottom:15px; }
  .category-section-top .section-kicker {font-size:8px;letter-spacing:1px;}
  .kicker-line {width:11px;}
  .category-section-top h2 {font-size:21px;letter-spacing:-.7px;margin-top:5px;margin-bottom:5px;}
  .category-section-top p {font-size:9px;line-height:1.45;}
  .all-category-link {font-size:0;gap:0;padding:0;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;flex:none;}
  .all-category-link span {font-size:18px;}
  .category-grid.category-grid-modern { grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
  .category-grid-modern .category-tile {height:103px;padding:10px 11px;border-radius:12px;}
  .category-grid-modern .category-icon {width:31px;height:31px;flex-basis:31px;border-radius:9px;}
  .category-grid-modern .category-icon svg {width:19px;height:19px;}
  .category-grid-modern .category-name {font-size:10.5px;}
  .category-grid-modern .category-caption small {font-size:8.5px;}
  .category-grid-modern .category-arrow {width:23px;height:23px;right:9px;top:9px;font-size:14px;border-radius:7px;}
  .category-grid-modern .category-tile:last-child:nth-child(odd) {grid-column:1/-1; flex-direction:row;align-items:center;gap:14px;height:70px;}
  .category-grid-modern .category-tile:last-child:nth-child(odd) .category-icon {width:36px;height:36px;flex-basis:36px;margin:0;}
  .category-grid-modern .category-tile:last-child:nth-child(odd) .category-caption {gap:4px;}
  .category-grid-modern .category-tile:last-child:nth-child(odd) .category-arrow {right:13px;top:50%;transform:translateY(-50%)}
  .catalog-panel {padding-top:26px;}
  .filter-form { gap:8px; }
  .filter-form select {height:38px;font-size:10px;}
  .filter-submit {height:37px; font-size:10px;border-radius:9px;}
  .filter-chips {scrollbar-width:none;}
  .filter-chips::-webkit-scrollbar {display:none;}
  .product-card {border-radius:12px;}
  .product-info {padding:10px 10px 11px;}
  .product-info h3 {font-size:11px;}
  .mobile-nav {
    left:10px;right:10px;
    bottom:calc(8px + env(safe-area-inset-bottom,0px));
    border-radius:18px;
    border:1px solid var(--modern-card-edge);
    background:color-mix(in srgb,var(--modern-card) 96%,transparent);
    box-shadow:0 10px 40px rgba(0,0,0,.26);
    padding:5px;
    max-width:520px;
    margin-inline:auto;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .mobile-nav a,.mobile-nav button {font-size:9px;gap:4px;border-radius:13px;min-height:51px;color:var(--muted);transition:background .2s,color .2s;}
  .mobile-nav svg {width:19px;height:19px;color:inherit;}
  .mobile-nav .is-active {color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);}
  .copyright {margin-bottom:80px;}
}
@media(min-width:701px) and (max-width:950px) {
  .category-grid.category-grid-modern { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) {
  .category-grid-modern .category-tile,.category-grid-modern .category-arrow,.mobile-nav a,.mobile-nav button {transition:none!important}
}