:root {
    color-scheme: light;
    --category-accent: #d7ac39;
    --category-accent-2: #ffe18a;
    --page-bg: #191514;
    --panel-bg: #191514;
    --card-bg: #191514;
    --button-bg: #651C2A;
    --button-color: #191514;
    --text-color: #E8E0DA;
    --muted-color: #B8ADA5;
    --border-color: rgba(155,133,119,0.35);
    --title-font: Inter, Arial, sans-serif;
    --body-font: Inter, Arial, sans-serif;
    --tile-radius: 24px;
    --glow-size: 12px;
    --page-max-desktop: 1500px;
    --page-max-mobile: 720px;
    --grid-row-desktop: 72px;
    --grid-row-mobile: 62px;
    --grid-gap-desktop: 18px;
    --grid-gap-mobile: 12px;
    --logo-width-desktop: 430px;
    --logo-width-mobile: 330px;
    --title-size-desktop: 72px;
    --title-size-mobile: 50px;
    --copy-size-desktop: 14px;
    --copy-size-mobile: 13px;
    --carousel-gap-desktop: 18px;
    --carousel-gap-mobile: 12px;
    --carousel-basis-desktop: calc((100% - 36px) / 3);
    --carousel-basis-mobile: 100%;
    --carousel-ratio-desktop: 1 / 1;
    --carousel-ratio-mobile: 1 / 1;
    --card-logo-size-desktop: 96px;
    --card-logo-size-mobile: 86px;
    --card-name-size-desktop: 14px;
    --card-name-size-mobile: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text-color);
    font-family: var(--body-font);
    background:
        linear-gradient(rgba(13,11,11,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13,11,11,0.025) 1px, transparent 1px),
        radial-gradient(circle at 84% 13%, color-mix(in srgb, var(--category-accent) 18%, transparent), transparent 29%),
        var(--page-bg);
    background-size: 58px 58px, 58px 58px, auto, auto;
}

a { color: inherit; text-decoration: none; }
button, select { font: inherit; }

.category-page {
    width: min(var(--page-max-desktop), calc(100% - 42px));
    margin: 0 auto;
    padding: 18px 0 48px;
}

.site-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand space company" "nav nav nav";
    align-items: center;
    gap: 10px 28px;
    padding: 4px 4px 15px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 34%, transparent);
}

.brand { grid-area: brand; display: inline-flex; }
.brand img {
    display: block;
    width: min(var(--logo-width-desktop), 42vw);
    height: 104px;
    object-fit: contain;
    object-position: left center;
}

.company-panel {
    grid-area: company;
    min-height: 56px;
    padding: 0 27px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, rgba(155,133,119,0.35));
    border-radius: 15px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--button-bg) 74%, #191514), var(--button-bg));
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--button-bg) 7%, transparent), 0 14px 38px color-mix(in srgb, var(--button-bg) 18%, transparent);
    color: var(--button-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .4px;
    text-transform: uppercase;
    transition: transform .2s ease, box-shadow .2s ease;
}

.company-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--button-bg) 10%, transparent), 0 18px 46px color-mix(in srgb, var(--button-bg) 28%, transparent);
}

.main-nav {
    grid-area: nav;
    display: flex;
    gap: clamp(20px, 4vw, 52px);
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
    position: relative;
    padding: 7px 0;
    color: color-mix(in srgb, var(--border-color) 78%, #E8E0DA);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.main-nav a::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--category-accent), var(--category-accent-2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}
.main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1); }

.category-heading {
    position: relative;
    isolation: isolate;
    min-height: 180px;
    margin: 22px 0 16px;
    padding: 24px 30px;
    border: 1px solid color-mix(in srgb, var(--border-color) 42%, transparent);
    border-radius: calc(var(--tile-radius) + 4px);
    background:
        radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--category-accent) 16%, transparent), transparent 32%),
        linear-gradient(135deg, rgba(25,21,20,0.98), rgba(25,21,20,0.94)),
        var(--panel-bg);
    box-shadow: 0 18px 45px rgba(125,101,89,0.08);
    overflow: hidden;
    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: 24px;
}
.category-heading::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -80px;
    top: -180px;
    width: 430px;
    height: 430px;
    border: 72px solid color-mix(in srgb, var(--category-accent) 10%, transparent);
    border-radius: 50%;
}
.category-heading > img {
    width: 126px;
    height: 126px;
    object-fit: contain;
    filter: drop-shadow(0 16px 28px color-mix(in srgb, var(--category-accent) 36%, transparent));
}
.category-heading span, .carousel-heading span {
    color: color-mix(in srgb, var(--category-accent) 74%, #BDA493);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.category-heading h1 {
    margin: 0;
    color: var(--text-color);
    font-family: var(--title-font);
    font-size: var(--title-size-desktop);
    font-style: normal;
    font-weight: 900;
    line-height: .96;
    letter-spacing: -.045em;
    text-shadow: none;
}
.category-heading p {
    margin: 8px 0 0;
    color: var(--text-color);
    font-size: var(--copy-size-desktop);
    font-weight: 700;
}

.city-filter { position: relative; z-index: 2; width: min(285px, 100%); }
.city-filter label {
    display: block;
    margin: 0 0 7px 4px;
    color: color-mix(in srgb, var(--category-accent) 70%, #BDA493);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.city-filter select {
    width: 100%;
    min-height: 50px;
    padding: 0 42px 0 15px;
    border: 1px solid color-mix(in srgb, var(--category-accent) 45%, var(--border-color));
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel-bg) 96%, #191514);
    color: var(--text-color);
    outline: none;
}

.category-alert {
    margin: 14px 0;
    padding: 15px;
    border: 1px solid rgba(125,101,89,0.32);
    border-radius: 14px;
    background: rgba(101,28,42,0.07);
    color: #DFA2AB;
    font-size: 13px;
    text-align: center;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: var(--grid-row-desktop);
    gap: var(--grid-gap-desktop);
    align-items: stretch;
}
.showcase-slot {
    min-width: 0;
    min-height: 0;
    grid-column: var(--dx) / span var(--dw);
    grid-row: var(--dy) / span var(--dh);
}
.showcase-slot > .store-tile { width: 100%; height: 100%; }

.rotating-showcase {
    min-width: 0;
    min-height: 0;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--category-accent) 28%, var(--border-color));
    border-radius: calc(var(--tile-radius) + 4px);
    background:
        radial-gradient(circle at 50% 0, color-mix(in srgb, var(--category-accent) 11%, transparent), transparent 42%),
        var(--panel-bg);
    box-shadow: inset 0 0 0 8px rgba(155,133,119,0.018), 0 26px 60px rgba(155,133,119,0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.carousel-heading {
    flex: 0 0 auto;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.carousel-heading h2 {
    margin: 3px 0 0;
    font-family: var(--title-font);
    font-size: 26px;
    line-height: 1;
    text-transform: uppercase;
}
.carousel-heading small {
    color: var(--muted-color);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}
.carousel-window { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.carousel-track {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: var(--carousel-gap-desktop);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.is-fill-grid {
    display: grid;
    grid-template-columns: repeat(var(--carousel-layout-columns, 1), minmax(0, 1fr));
    grid-template-rows: repeat(var(--carousel-layout-rows, 1), minmax(0, 1fr));
    align-items: stretch;
    gap: var(--carousel-gap-desktop);
    overflow: hidden;
    scroll-behavior: auto;
    scroll-snap-type: none;
    touch-action: pan-y;
}

.store-tile {
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 0;
    border: 1px solid color-mix(in srgb, var(--category-accent) 52%, var(--border-color));
    border-radius: var(--tile-radius);
    background:
        radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--category-accent) 29%, transparent), transparent 40%),
        linear-gradient(145deg, color-mix(in srgb, var(--card-bg) 86%, #191514), var(--card-bg));
    box-shadow: 0 14px 34px rgba(125,101,89,0.09);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.store-tile[style*="--store-image"] {
    background-image: linear-gradient(180deg, rgba(13,11,11,0.06) 0%, rgba(13,11,11,0.18) 36%, rgba(13,11,11,0.97) 92%), var(--store-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.store-tile::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 var(--glow-size) color-mix(in srgb, var(--category-accent) 22%, transparent);
    pointer-events: none;
}
.store-tile:hover {
    transform: translateY(-4px);
    border-color: var(--category-accent-2);
    box-shadow: 0 22px 52px rgba(125,101,89,0.13), 0 0 var(--glow-size) color-mix(in srgb, var(--category-accent) 24%, transparent);
}
.store-tile-carousel {
    flex: 0 0 var(--carousel-basis-desktop);
    height: auto;
    max-height: 100%;
    aspect-ratio: var(--carousel-ratio-desktop);
    scroll-snap-align: start;
}
.carousel-track.is-fill-grid .store-tile-carousel {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    scroll-snap-align: none;
}
.carousel-track.is-fill-grid .store-tile-carousel[hidden] { display: none !important; }
.store-tile-brand-only {
    padding: clamp(10px, 1.4vw, 23px);
    align-items: center;
    justify-content: center;
    gap: 11px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--category-accent) 18%, transparent), transparent 52%),
        linear-gradient(145deg, color-mix(in srgb, var(--card-bg) 88%, #191514), var(--card-bg));
}
.tile-logo-only {
    flex: 0 0 auto;
    width: min(var(--card-logo-size-desktop), calc(100% - 24px));
    aspect-ratio: 1;
    padding: 9px;
    border: 1px solid color-mix(in srgb, var(--category-accent-2) 55%, rgba(155,133,119,0.35));
    border-radius: calc(var(--tile-radius) * .62);
    background: #191514;
    box-shadow: 0 9px 22px rgba(125,101,89,0.08), 0 0 calc(var(--glow-size) * .55) color-mix(in srgb, var(--category-accent) 18%, transparent);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.store-tile-carousel .tile-logo-only { width: min(var(--card-logo-size-desktop), 56%); }
.tile-logo-only img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.tile-logo-only .tile-monogram { font-size: clamp(24px, 4vw, 52px); }
.tile-company-name {
    max-width: 94%;
    color: var(--text-color);
    font-size: var(--card-name-size-desktop);
    font-weight: 900;
    line-height: 1.12;
    text-align: center;
    text-transform: none;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.rotating-showcase[data-format-desktop="paisagem"] .store-tile-carousel {
    padding: 10px;
    flex-direction: row;
    gap: 9px;
    text-align: left;
}
.rotating-showcase[data-format-desktop="paisagem"] .store-tile-carousel .tile-logo-only { width: min(var(--card-logo-size-desktop), 42%); }
.rotating-showcase[data-format-desktop="paisagem"] .store-tile-carousel .tile-company-name { flex: 1; max-width: none; text-align: left; }
.tile-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(13,11,11,0.1) 36%, rgba(13,11,11,0.93) 100%); }
.tile-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    max-width: calc(100% - 28px);
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--category-accent) 62%, rgba(155,133,119,0.35));
    border-radius: 999px;
    background: rgba(13,11,11,0.72);
    color: var(--category-accent-2);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}
.tile-brand {
    position: absolute;
    top: 14px;
    right: 14px;
    width: clamp(48px, 5vw, 68px);
    height: clamp(48px, 5vw, 68px);
    padding: 6px;
    border: 2px solid rgba(155,133,119,0.35);
    border-radius: 17px;
    background: #191514;
    box-shadow: 0 12px 25px rgba(155,133,119,0.35);
    display: grid;
    place-items: center;
}
.slot-fixed .tile-brand { width: 54px; height: 54px; border-radius: 14px; }
.tile-brand img { width: 100%; height: 100%; object-fit: contain; }
.tile-monogram { color: #E8E0DA; font-size: 28px; font-weight: 900; }
.tile-content { position: relative; z-index: 2; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; }
.slot-fixed .tile-content { padding: 15px; }
.tile-content strong {
    padding-right: 42px;
    font-size: clamp(15px, 1.45vw, 24px);
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    text-wrap: balance;
}
.slot-fixed .tile-content strong { padding-right: 0; font-size: clamp(12px, 1vw, 15px); }
.tile-content small { margin-top: 6px; color: var(--muted-color); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.tile-action {
    min-height: 36px;
    margin-top: 15px;
    padding: 0 13px;
    border: 1px solid color-mix(in srgb, var(--button-bg) 62%, rgba(155,133,119,0.35));
    border-radius: 999px;
    background: var(--button-bg);
    color: var(--button-color);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .55px;
    text-transform: uppercase;
}
.tile-action b { font-size: 14px; }

.store-tile-empty {
    padding: 18px;
    background: radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--category-accent) 14%, transparent), transparent 48%), repeating-linear-gradient(-45deg, rgba(13,11,11,0.018) 0 8px, transparent 8px 16px), var(--card-bg);
    align-items: center;
    justify-content: center;
    text-align: center;
}
.store-tile-empty .empty-crown { width: 76px; height: 56px; object-fit: contain; filter: drop-shadow(0 0 var(--glow-size) color-mix(in srgb, var(--category-accent) 48%, transparent)); }
.store-tile-empty strong { margin-top: 7px; font-size: 16px; font-weight: 900; text-transform: uppercase; }
.store-tile-empty small { max-width: 230px; margin-top: 7px; color: var(--muted-color); font-size: 10px; line-height: 1.45; }
.store-tile-empty .tile-action { margin-top: 13px; }

.carousel-empty {
    width: 100%;
    height: 100%;
    min-height: 150px;
    border: 1px dashed color-mix(in srgb, var(--category-accent) 45%, var(--border-color));
    border-radius: calc(var(--tile-radius) - 2px);
    background: rgba(25,21,20,0.72);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.carousel-empty > img { width: 92px; height: 68px; object-fit: contain; filter: drop-shadow(0 0 var(--glow-size) color-mix(in srgb, var(--category-accent) 42%, transparent)); }
.carousel-empty strong { margin-top: 7px; font-size: 19px; text-transform: uppercase; }
.carousel-empty p { margin: 7px 16px 14px; color: var(--muted-color); font-size: 11px; }
.carousel-empty a { padding: 11px 15px; border-radius: 999px; background: var(--button-bg); color: var(--button-color); font-size: 9px; font-weight: 900; text-transform: uppercase; }

.carousel-controls { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 17px; margin-top: 14px; }
.carousel-controls button {
    width: 39px;
    height: 39px;
    border: 1px solid color-mix(in srgb, var(--button-bg) 62%, var(--border-color));
    border-radius: 50%;
    background: var(--button-bg);
    color: var(--button-color);
    font-size: 24px;
    cursor: pointer;
}
.carousel-controls span { color: var(--muted-color); font-size: 10px; font-weight: 800; }
.carousel-controls b { color: var(--text-color); }

.page-footer { margin-top: 28px; padding: 20px 2px 0; border-top: 1px solid color-mix(in srgb, var(--border-color) 20%, transparent); color: var(--muted-color); display: flex; justify-content: space-between; gap: 15px; font-size: 10px; }
.page-footer a { color: var(--category-accent-2); font-weight: 800; }

@media (min-width: 821px) {
    .is-hidden-desktop { display: none !important; }
}

@media (max-width: 820px) {
    .is-hidden-mobile { display: none !important; }
    .category-page { width: min(var(--page-max-mobile), calc(100% - 18px)); padding-top: 9px; }
    .site-header { grid-template-columns: 1fr auto; grid-template-areas: "brand company" "nav nav"; gap: 8px 13px; }
    .brand img { width: min(var(--logo-width-mobile), 62vw); height: 86px; }
    .company-panel { min-height: 46px; padding: 0 15px; font-size: 10px; }
    .main-nav { gap: 24px; }
    .category-heading { grid-template-columns: 96px 1fr; min-height: 160px; padding: 20px; }
    .category-heading > img { width: 92px; height: 92px; }
    .category-heading h1 { font-size: var(--title-size-mobile); }
    .category-heading p { font-size: var(--copy-size-mobile); }
    .city-filter { grid-column: 1 / -1; width: 100%; }
    .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: var(--grid-row-mobile); gap: var(--grid-gap-mobile); }
    .showcase-slot { grid-column: var(--mx) / span var(--mw); grid-row: var(--my) / span var(--mh); }
    .rotating-showcase { padding: 14px; }
    .carousel-track { gap: var(--carousel-gap-mobile); }
    .carousel-track.is-fill-grid { gap: var(--carousel-gap-mobile); }
    .store-tile-carousel { flex-basis: var(--carousel-basis-mobile); aspect-ratio: var(--carousel-ratio-mobile); }
    .tile-logo-only { width: min(var(--card-logo-size-mobile), calc(100% - 20px)); }
    .store-tile-carousel .tile-logo-only { width: min(var(--card-logo-size-mobile), 56%); }
    .tile-company-name { font-size: var(--card-name-size-mobile); }
    .rotating-showcase[data-format-desktop="paisagem"] .store-tile-carousel { padding: 10px; flex-direction: column; gap: 11px; text-align: center; }
    .rotating-showcase[data-format-desktop="paisagem"] .store-tile-carousel .tile-logo-only { width: min(var(--card-logo-size-mobile), 56%); }
    .rotating-showcase[data-format-desktop="paisagem"] .store-tile-carousel .tile-company-name { flex: 0 0 auto; max-width: 94%; text-align: center; }
    .rotating-showcase[data-format-mobile="paisagem"] .store-tile-carousel { padding: 9px; flex-direction: row; gap: 8px; text-align: left; }
    .rotating-showcase[data-format-mobile="paisagem"] .store-tile-carousel .tile-logo-only { width: min(var(--card-logo-size-mobile), 42%); }
    .rotating-showcase[data-format-mobile="paisagem"] .store-tile-carousel .tile-company-name { flex: 1; max-width: none; text-align: left; }
    .tile-content { padding: 17px; }
    .tile-content strong { font-size: clamp(14px, 4vw, 20px); }
    .slot-fixed .tile-content strong { font-size: 12px; }
    .tile-action { min-height: 32px; margin-top: 10px; padding: 0 10px; font-size: 7px; }
}

@media (max-width: 560px) {
    .site-header { grid-template-columns: 1fr; grid-template-areas: "brand" "company" "nav"; }
    .brand { justify-content: center; }
    .brand img { width: min(var(--logo-width-mobile), 88vw); height: 92px; object-position: center; }
    .company-panel { width: 100%; }
    .category-heading { grid-template-columns: 74px 1fr; gap: 13px; padding: 17px 15px; border-radius: calc(var(--tile-radius) * .8); }
    .category-heading > img { width: 72px; height: 72px; }
    .category-heading h1 { line-height: .92; }
    .category-heading p { line-height: 1.4; }
    .carousel-heading { align-items: flex-start; }
    .carousel-heading h2 { font-size: 20px; }
    .carousel-heading small { text-align: right; }
    .slot-fixed .tile-brand { width: 44px; height: 44px; top: 10px; right: 10px; }
    .slot-fixed .tile-badge { top: 10px; left: 10px; padding: 5px 7px; font-size: 6px; }
    .slot-fixed .tile-content { padding: 11px; }
    .slot-fixed .tile-content small, .slot-fixed .tile-action { display: none; }
    .page-footer { flex-direction: column; align-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Image framing controls keep zoom inside the original card. */
.tile-logo-only{overflow:hidden}

/* Free native scrolling with momentum; JavaScript adds only a slow idle drift. */
html body .category-page .carousel-track.is-continuous {
 display:grid;grid-auto-flow:column;grid-template-columns:none;
 grid-template-rows:repeat(var(--continuous-rows,2),minmax(0,1fr));
 grid-auto-columns:var(--continuous-width,240px);align-items:stretch;
 overflow-x:auto;overflow-y:hidden;scroll-snap-type:none;scroll-behavior:auto;
 touch-action:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
 gap:var(--carousel-gap-desktop);scrollbar-width:none;
}
html body .category-page .carousel-track.is-continuous > .store-tile-carousel {
 width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;
 justify-self:stretch;align-self:stretch;transition:border-color .2s ease;
}
html body .category-page .carousel-track.is-continuous > .store-tile-carousel:hover {transform:none;}
@media(max-width:820px){html body .category-page .carousel-track.is-continuous{gap:var(--carousel-gap-mobile);}}

.category-all-companies{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 15px;border:1px solid color-mix(in srgb,var(--category-accent) 48%,var(--border-color));border-radius:999px;color:var(--text-color);font-size:10px;font-weight:800;text-transform:uppercase;white-space:nowrap}.category-all-companies:hover{background:var(--category-accent);color:#0d0b0b}

/* 30 posições iniciais, organizadas em páginas de seis, no quadro aprovado. */
html body .category-page .rotating-showcase .carousel-window{min-height:432px}
html body .category-page .carousel-track.is-continuous{height:432px;grid-template-rows:repeat(2,210px);grid-auto-columns:275px;align-content:start}
html body .category-page .carousel-track.is-continuous>.store-tile-carousel{width:275px;height:210px;min-width:275px;min-height:210px;max-width:275px;max-height:210px}
html body .category-page .carousel-track.is-continuous>.store-tile-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 9px;text-align:center}
@media(max-width:820px){
 html body .category-page .rotating-showcase .carousel-window{min-height:calc((var(--continuous-card-height,120px) * 2) + var(--carousel-gap-mobile))}
 html body .category-page .carousel-track.is-continuous{height:calc(var(--continuous-card-height,120px) * 2);grid-template-rows:repeat(2,var(--continuous-card-height,120px));gap:0!important}
 html body .category-page .carousel-track.is-continuous>.store-tile-carousel{width:var(--continuous-width);min-width:var(--continuous-width);height:var(--continuous-card-height,120px);min-height:var(--continuous-card-height,120px);max-height:var(--continuous-card-height,120px)}
 html body .category-page .carousel-track.is-continuous>.store-tile-brand-only,
 html body .category-page .carousel-track.is-continuous>.store-tile-placeholder{width:var(--continuous-width)!important;min-width:var(--continuous-width)!important;height:var(--continuous-card-height,120px)!important;min-height:var(--continuous-card-height,120px)!important;max-height:var(--continuous-card-height,120px)!important;margin:0!important;border-radius:10px!important}
 html body .category-page .carousel-track.is-continuous>.store-tile-placeholder{padding:7px 5px;gap:2px}
 html body .category-page .carousel-track.is-continuous>.store-tile-placeholder .empty-crown{width:34px;height:27px}
 html body .category-page .carousel-track.is-continuous>.store-tile-placeholder strong{font-size:10px}
 html body .category-page .carousel-track.is-continuous>.store-tile-placeholder small{font-size:8px;line-height:1.2}
 html body .category-page .carousel-track.is-continuous>.store-tile-placeholder .tile-action{margin-top:3px;padding:6px 7px;font-size:7px}
}
/* Os blocos formam uma grade contínua, sem espaço entre linhas ou colunas. */
html body .category-page .carousel-track.is-continuous{column-gap:0!important;row-gap:0!important;justify-content:start!important;align-content:start!important}
html body .category-page .carousel-track.is-continuous>.store-tile-carousel{margin:0!important;border-radius:0!important}
html body .category-page .rotating-showcase .carousel-window{padding:0!important}
@media(max-width:820px){html body .category-page .rotating-showcase .carousel-window{min-height:calc(var(--continuous-card-height,120px) * 2)!important}}
/* Separação mínima e cantos arredondados preservados em todos os tamanhos. */
html body .category-page .carousel-track.is-continuous{column-gap:6px!important;row-gap:6px!important}
html body .category-page .carousel-track.is-continuous>.store-tile-carousel{border-radius:12px!important;overflow:hidden!important}
html body .category-page .rotating-showcase .carousel-window{min-height:438px!important}
@media(max-width:820px){
 html body .category-page .carousel-track.is-continuous{column-gap:5px!important;row-gap:5px!important}
 html body .category-page .carousel-track.is-continuous>.store-tile-carousel{border-radius:9px!important}
 html body .category-page .rotating-showcase .carousel-window{min-height:calc((var(--continuous-card-height,120px) * 2) + 5px)!important}
}

/* Correção exclusiva do celular: cada coluna acompanha a largura real do cartão. */
@media(max-width:820px){
 html body .category-page .carousel-track.is-continuous{grid-auto-columns:var(--continuous-width)!important;column-gap:5px!important;row-gap:5px!important;scroll-behavior:auto!important;touch-action:pan-x pan-y!important;-webkit-overflow-scrolling:touch!important}
}

/* Auditoria tipográfica e de alinhamento para celulares estreitos. */
@media(max-width:820px){
 .category-heading{grid-template-columns:minmax(64px,96px) minmax(0,1fr)!important;gap:14px!important;align-items:center!important}
 .category-heading>div{min-width:0}
 .category-royal-icon{width:clamp(64px,18vw,92px);height:clamp(64px,18vw,92px);display:grid;place-items:center;align-self:center;justify-self:center}
 .category-royal-icon svg{width:clamp(38px,11vw,56px);height:clamp(38px,11vw,56px)}
 .category-heading h1{max-width:100%;font-size:clamp(25px,8vw,var(--title-size-mobile))!important;line-height:1!important;overflow-wrap:anywhere}
 .category-heading p{max-width:100%;font-size:clamp(11px,3.4vw,var(--copy-size-mobile))!important;line-height:1.35!important;overflow-wrap:anywhere}
 .category-all-companies{grid-column:1/-1;width:100%;max-width:100%;min-width:0;min-height:40px;padding:9px 12px;white-space:normal!important;text-align:center;font-size:clamp(8px,2.8vw,10px);line-height:1.2;overflow-wrap:anywhere}
 .city-filter{min-width:0}.city-filter select{width:100%;max-width:100%;font-size:11px}
 .carousel-heading{gap:8px;min-width:0}.carousel-heading>div{min-width:0;flex:1}.carousel-heading h2{font-size:clamp(17px,5.5vw,22px)!important;line-height:1.05!important;overflow-wrap:anywhere}.carousel-heading small{flex:0 0 auto;font-size:8px;white-space:nowrap}
 .tile-company-name{font-size:clamp(9px,2.9vw,var(--card-name-size-mobile))!important;line-height:1.12!important;overflow-wrap:anywhere}
 .store-tile-placeholder strong{font-size:clamp(8px,2.7vw,10px)!important;line-height:1.12}.store-tile-placeholder small{font-size:clamp(6px,2.2vw,8px)!important}.store-tile-placeholder .tile-action{max-width:100%;white-space:normal;text-align:center;line-height:1.1}
 .carousel-controls{gap:12px}.carousel-controls button{width:38px;height:38px}.carousel-controls span{font-size:9px}
}
@media(max-width:380px){
 .category-page{width:calc(100% - 12px)!important}.category-heading{grid-template-columns:58px minmax(0,1fr)!important;padding:14px 11px!important;gap:10px!important}.category-royal-icon{width:56px;height:56px}.category-royal-icon svg{width:34px;height:34px}.main-nav{gap:17px}.main-nav a{font-size:10px}.rotating-showcase{padding:10px!important}.carousel-heading{flex-wrap:wrap}.carousel-heading small{width:100%;text-align:left!important}
}