/* BÉ NÂU 3D • Compact storefront v3
   Separate override to preserve the existing three themes and product functionality. */
:root { --compact-radius:14px }
html { scroll-padding-top:76px }
body { font-weight:500; -webkit-font-smoothing:antialiased }
#categories, #catalog, #how-it-works { scroll-margin-top:74px }
.container { max-width:1160px }
.announcement {height:26px;gap:9px;letter-spacing:.85px;font-size:9px}
.dotsep {font-size:11px}
.head-inner {height:70px;gap:15px}
.brand-mark {width:41px;height:41px;border-radius:11px}
.brand-mark svg {width:30px;height:30px}
.brand-name strong {font-size:16px;letter-spacing:-.4px}
.brand-name small {font-size:8px;letter-spacing:1.25px}
.desktop-nav {font-size:11px;gap:22px}
.header-contact {min-height:37px;font-size:11px;padding:0 15px;gap:10px}
.header-contact span {font-size:16px}

/* Short horizontal cover matching the ACC shop's banner placement and proportions. */
.homepage-top {padding-top:0}
.hero.hero-compact, .hero.hero-compact.has-banner {
 display:block;position:relative;width:100%;height:auto;min-height:0!important;aspect-ratio:2.87/1;
 margin-top:19px;overflow:hidden;border-radius:16px;
 background:#171e2b;color:#fff;isolation:isolate;box-shadow:none
}
.hero.hero-compact .hero-upload {display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-mini-copy {position:absolute;left:5.7%;top:50%;transform:translateY(-50%);z-index:2;max-width:51%;color:#f9fbff}
.hero-mini-kicker {color:#dcff95;font-size:10px;font-weight:800;letter-spacing:2px;margin-bottom:12px}
.hero-mini-copy h1 {font-size:clamp(29px,3.55vw,51px);line-height:1.12;letter-spacing:-1.8px;margin:0;font-weight:800;color:#fff}
.hero-mini-copy h1 span {color:#d5ff85}
.hero-mini-copy p {font-size:11px;line-height:1.65;color:#ced8e2;margin:12px 0 17px;max-width:340px}
.hero-mini-button {background:#ddff9e;color:#1b2812;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:16px;border-radius:7px;padding:10px 13px;box-shadow:0 6px 24px rgba(8,21,9,.18)}
.hero-mini-button span {font-size:16px;line-height:1}

.value-ribbon {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:13px;margin-top:14px;overflow:hidden;box-shadow:none}
.value-ribbon>div {display:grid;grid-template-columns:31px minmax(0,1fr);gap:2px 9px;padding:14px 13px;align-items:center}
.value-ribbon>div+div:before {height:54%;top:23%}
.value-ribbon .value-icon {grid-row:1/3;display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--line);border-radius:9px;font-size:18px;background:var(--paper2);color:var(--accent)}
.value-ribbon b {font-size:10px;letter-spacing:0;font-weight:800;line-height:1.45}
.value-ribbon small {font-size:9px;line-height:1.4;margin-top:0}

.categories-section {padding-top:44px;padding-bottom:44px}
.section-top {margin-bottom:17px;gap:15px}
.section-top h2,.how-section h2,.more-models h2 {font-size:clamp(22px,2.7vw,31px);letter-spacing:-.8px;margin-top:7px;line-height:1.3}
.section-kicker {font-size:9px;letter-spacing:1.35px;font-weight:800}
.section-top p {font-size:10px;line-height:1.6;max-width:265px}
.category-grid {gap:9px}
.category-tile {height:114px;border-radius:12px;padding:13px 13px;border-width:1px;transition:transform .18s}
.category-glyph {font-size:29px;line-height:1;margin-bottom:auto}
.category-name {font-size:11px;line-height:1.4;letter-spacing:-.15px}
.category-tile small {font-size:9px;margin-top:1px}
.category-arrow {font-size:17px;right:11px;top:8px}

.catalog-panel {padding:39px 0 48px}
.catalog-top h2 {margin-top:5px}
.count-line {font-size:10px!important;margin-top:5px!important}
.collection-label {font-size:9px;letter-spacing:1px}
.filter-form {margin-top:17px;gap:8px;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto}
.search-box {padding:0 7px 0 12px;border-radius:9px}
.search-box span {font-size:22px}
.search-box input {height:40px;font-size:11px}
.search-box button {width:29px;height:29px;font-size:17px}
.filter-form select {font-size:10px;border-radius:9px;padding:0 9px}
.filter-submit {font-size:10px;padding:0 13px;border-radius:9px}
.filter-chips {padding:13px 0 17px;gap:6px}
.filter-chips a {padding:8px 11px;font-size:10px}
.product-grid {gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.product-card {border-radius:12px}
.product-photo {aspect-ratio:1.19}
.photo-tag {top:9px;left:9px;padding:6px 9px;font-size:9px}
.photo-corner {display:none}
.product-info {padding:12px 13px 12px}
.product-code {font-size:9px;letter-spacing:.55px}
.product-info h3 {font-size:12px;margin:5px 0 12px;letter-spacing:-.15px;line-height:1.45}
.product-foot {padding-top:10px}
.product-foot span {font-size:9px}
.product-foot strong {font-size:16px;letter-spacing:-.3px}
.product-view {width:29px;height:29px;font-size:17px;border-radius:8px}
.pagination {margin-top:25px}
.empty-products {padding:38px 14px}
.empty-products>div {font-size:40px}
.empty-products h3 {font-size:17px}

.how-section {padding-block:48px;gap:35px}
.how-section h2 {font-size:clamp(23px,2.8vw,31px)}
.how-section>div>p {font-size:11px;margin:10px 0 16px;line-height:1.75}
.how-section .hero-button {font-size:10px;padding:12px 18px}
.steps {border-radius:13px;padding:0 17px}
.steps>div {padding:13px 0;grid-template-columns:34px 1fr;gap:2px 10px}
.steps i {font-size:18px}
.steps b {font-size:11px}
.steps p {font-size:10px;line-height:1.5}
.footer-inner {padding-block:35px;gap:22px}
.footer-brand {font-size:15px}
.footer-inner p,.footer-inner a {font-size:10px}
.footer-inner b {font-size:10px}
.copyright {padding-block:15px}
.detail-page {padding-top:19px;padding-bottom:50px}
.detail-grid {gap:30px}
.detail-copy h1 {font-size:clamp(22px,2.8vw,32px);line-height:1.3;letter-spacing:-.6px}
.detail-copy {padding-top:4px}
.price-panel strong {font-size:28px}
.order-actions>a,.order-actions>button {padding:14px 16px;font-size:12px}
.more-models {margin-top:45px}
.more-models h2 {font-size:20px}

@media (max-width:980px) and (min-width:701px) {
 .value-ribbon {grid-template-columns:repeat(2,minmax(0,1fr))}
 .value-ribbon>div:nth-child(3) {border-top:1px solid var(--line)}
 .value-ribbon>div:nth-child(4) {border-top:1px solid var(--line)}
 .value-ribbon>div:nth-child(3):before {display:none}
 .hero-mini-copy h1 {font-size:34px}
 .hero-mini-copy p {font-size:10px;margin:7px 0 11px}
 .hero-mini-kicker {font-size:9px;margin-bottom:7px}
 .category-grid {grid-template-columns:repeat(5,minmax(0,1fr))}
 .filter-form {grid-template-columns:minmax(0,1.5fr) 1fr 1fr auto}
 .filter-submit {grid-column:auto;padding:0 12px}
}
@media (max-width:700px) {
 html {scroll-padding-top:61px}
 #categories, #catalog, #how-it-works {scroll-margin-top:61px}
 .container {padding-inline:12px}
 .announcement {height:21px;gap:6px;font-size:7px;letter-spacing:.3px;white-space:nowrap;overflow:hidden}
 .pulse {width:5px;height:5px;box-shadow:none}
 .dotsep {font-size:9px}
 .head-inner {height:55px;gap:9px}
 .brand-mark {width:35px;height:35px;border-radius:9px}
 .brand-mark svg {width:25px;height:25px}
 .logo {gap:8px}
 .brand-name strong {font-size:13px;letter-spacing:-.25px}
 .brand-name small {font-size:7px;letter-spacing:.75px}
 .header-contact {min-height:31px;font-size:9px;padding:0 10px;gap:7px}
 .header-contact span {font-size:12px}
 .hero.hero-compact,.hero.hero-compact.has-banner {margin-top:11px;border-radius:11px;aspect-ratio:2.72/1;min-height:0!important;height:auto}
 .hero-mini-copy {left:5.1%;max-width:55%;top:49%}
 .hero-mini-kicker {font-size:6.5px;letter-spacing:.75px;margin-bottom:5px}
 .hero-mini-copy h1 {font-size:clamp(20px,5.3vw,27px);line-height:1.13;letter-spacing:-.9px;margin:0}
 .hero-mini-copy p {font-size:8px;line-height:1.5;margin:6px 0 7px;max-width:175px}
 .hero-mini-button {font-size:8px;padding:7px 9px;gap:8px;border-radius:5px}
 .hero-mini-button span {font-size:10px}
 .value-ribbon {grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:10px;border-radius:10px}
 .value-ribbon>div {padding:9px 8px;grid-template-columns:25px minmax(0,1fr);column-gap:7px;row-gap:1px}
 .value-ribbon>div+div {border:0}
 .value-ribbon>div:nth-child(3),.value-ribbon>div:nth-child(4) {border-top:1px solid var(--line)}
 .value-ribbon>div:nth-child(even) {border-left:1px solid var(--line)}
 .value-ribbon>div+div:before {display:none}
 .value-ribbon .value-icon {width:25px;height:25px;border-radius:7px;font-size:14px}
 .value-ribbon b {font-size:8.2px;letter-spacing:-.1px}
 .value-ribbon small {font-size:7.5px;line-height:1.25}
 .categories-section {padding-block:29px 30px}
 .section-top {gap:4px;margin-bottom:13px}
 .section-top h2,.how-section h2 {font-size:21px;line-height:1.28;letter-spacing:-.7px;margin-top:4px}
 .section-kicker {font-size:8px;letter-spacing:1px}
 .section-top p {font-size:9px;line-height:1.45;margin-top:5px}
 .category-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .category-tile {height:93px;padding:10px;border-radius:10px}
 .category-glyph {font-size:26px;margin:0 0 auto;line-height:1}
 .category-name {font-size:10px}
 .category-tile small {font-size:8px;margin-top:0}
 .category-arrow {font-size:15px;right:9px;top:8px}
 .catalog-panel {padding:28px 0 37px}
 .collection-label {display:none}
 .filter-form {margin-top:14px;grid-template-columns:1fr 1fr;gap:7px}
 .search-box {grid-column:1/-1;padding-left:10px}
 .search-box input {height:37px;font-size:10px}
 .search-box span {font-size:19px}
 .search-box button {width:28px;height:28px}
 .filter-form select {height:36px;padding:0 8px;font-size:10px}
 .filter-submit {grid-column:1/-1;height:36px;font-size:10px;border-radius:8px;padding:0}
 .filter-chips {padding:10px 0 14px;gap:5px}
 .filter-chips a {font-size:9px;padding:7px 10px}
 .product-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .product-card {border-radius:10px}
 .product-photo {aspect-ratio:1.08}
 .photo-tag {font-size:8px;padding:5px 8px;left:7px;top:7px}
 .product-info {padding:9px 9px 10px}
 .product-code {font-size:8px;letter-spacing:.3px}
 .product-info h3 {font-size:10px;margin:4px 0 11px;line-height:1.4}
 .product-foot {padding-top:8px;gap:5px}
 .product-foot span {font-size:8px}
 .product-foot strong {font-size:13px}
 .product-view {width:27px;height:27px;font-size:16px;border-radius:7px}
 .empty-products {padding:28px 14px}
 .how-section {padding-block:36px 45px;gap:22px}
 .how-section h2 {font-size:23px}
 .how-section>div>p {font-size:10px}
 .steps {padding-inline:14px}
 .steps>div {padding:11px 0}
 .footer-inner {padding-block:28px;gap:18px}
 .footer-inner p,.footer-inner a {font-size:9px}
 .copyright {margin-bottom:56px}
 .mobile-nav {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:6px 6px calc(5px + env(safe-area-inset-bottom, 0px));background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(0,0,0,.12)}
 .mobile-nav a,.mobile-nav button {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:9px;font-weight:700;color:var(--muted);padding:3px;min-height:39px}
 .mobile-nav svg {width:18px;height:18px;color:var(--ink);flex:none}
 .mobile-nav span {font-size:inherit}
 .detail-page {padding-top:15px;padding-bottom:55px}
 .detail-copy h1 {font-size:22px}
 .detail-copy .price-panel strong {font-size:25px}
 .main-photo {border-radius:11px}
 .more-models h2 {font-size:16px}
}
@media(max-width:370px) {
 .hero-mini-copy p {display:none}
 .hero-mini-copy h1 {font-size:19px;margin:6px 0 9px}
 .brand-name strong {font-size:12px}
 .value-ribbon b {font-size:7.6px}
 .value-ribbon small {font-size:7px}
}
@media(prefers-reduced-motion:reduce){.product-card,.category-tile,.product-photo>img {transition:none!important}}