/* Public catalogue: square, edge-to-edge photos and discreet product surfaces. */
:root:root:root body:has(.public-main) {
  --vx-text:#10182f; --vx-muted:#536581; --vx-border:#d4e0ec;
  --vx-primary:#197cff; --vx-gold:#197cff; --vx-gold-soft:#e8f2ff; --vx-focus:#297aff;
  --catalog-control-height:40px; --catalog-control-font:14px; --catalog-control-radius:10px;
  --catalog-compact-height:32px; --catalog-photo-ratio:1; --catalog-card-radius:8px;
  --catalog-name-size:14px; --catalog-price-size:15px; --catalog-secondary-size:12px;
  --catalog-info-gap:4px; --catalog-photo-gap:10px;
  --vx-control-height:var(--catalog-control-height); --vx-control-font-size:var(--catalog-control-font);
  color:var(--vx-text); background:#f1f7fb; font-family:var(--vx-font); color-scheme:light;
}
.catalog-sr,:root:root:root .public-main>.catalog-sr,:root:root:root .public-main #count {
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
:root:root:root .public-main {max-width:1920px; padding:18px clamp(14px,3.13vw,60px) 40px; margin:0 auto}
:root:root:root .public-main>section:not(.hero) {padding:0; margin:0 0 18px; scroll-margin-top:0}

/* Artwork, rotation and links are preserved; the catalogue still starts here. */
:root:root:root .public-main>#catalog-banners {padding:0; border:1px solid #fff; border-radius:16px; background:#ffffff65; margin-bottom:18px; box-shadow:0 8px 24px #45617f10}
:root:root:root .public-main .banner-stage picture {aspect-ratio:auto}
:root:root:root .public-main .banner-stage img {max-height:420px; object-fit:contain}
:root:root:root body:has(.public-main) .public-main #catalog-banners .banner-controls {position:absolute; bottom:6px; left:50%; transform:translateX(-50%); gap:0; padding:0; background:#f7fafdde; backdrop-filter:blur(8px); border:0; border-radius:22px; box-shadow:none}
:root:root:root body:has(.public-main) .public-main #catalog-banners .banner-controls button {--vx-metal-edge-opacity:0; --vx-metal-edge-hover-opacity:.12; position:relative; min-width:36px; min-height:44px; padding:0; background:transparent; border:0; border-radius:50%; box-shadow:none; color:#536581; font-size:22px; line-height:1; outline-offset:-3px}
:root:root:root body:has(.public-main) .public-main #catalog-banners .banner-controls button[aria-current=true] {color:#0869db}

/* Search and Select share dimensions, including the enhanced Select trigger. */
:root:root:root .public-main #catalog>.toolbar {display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,27%); align-items:center; gap:12px; margin:0 0 12px; padding:0; background:none; border:0}
:root:root:root .public-main .toolbar>:is(input,select,.vx-combobox) {width:100%; min-width:0; max-width:none; margin:0}
:root:root:root .public-main .toolbar :is(input,select,.vx-combo-trigger) {box-sizing:border-box; height:var(--catalog-control-height); min-height:var(--catalog-control-height); border-radius:var(--catalog-control-radius); border:1px solid #cbd9e9; background-color:#ffffff75; color:var(--vx-text); font-size:var(--catalog-control-font); line-height:20px; padding:0 12px; box-shadow:0 1px 3px #45617f08}
:root:root:root .public-main .toolbar input.vx-search-field {padding-left:38px; background-position:12px center; background-size:18px}
:root:root:root .public-main .toolbar .vx-combo-trigger svg {width:16px; height:16px}
:root:root:root .public-main .chips {display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
:root:root:root .public-main .chips button {min-width:0; height:var(--catalog-compact-height); min-height:var(--catalog-compact-height); padding:0 14px; border-radius:20px; border:1px solid #cbd9e9; background:#ffffff75; color:#31486d; font-size:13px; line-height:20px; font-weight:500; box-shadow:inset 0 1px 1px #fff}
:root:root:root .public-main .chips button.active {background:linear-gradient(#82bfff,#4d9dff); color:#102d50; border-color:#72b5ff}
:root:root:root .public-main .catalog-meta {display:flex; justify-content:flex-end; min-height:0; margin:0; padding:0}
:root:root:root .public-main .catalog-meta:has(#clear-filters:not([hidden])) {margin-bottom:12px}
:root:root:root .public-main #clear-filters {min-height:var(--catalog-compact-height); font-size:13px}

/* Keep the same light separation on every product, including on hover. */
:root:root:root .public-main #catalog,:root:root:root .public-main #grid {width:100%; min-width:0; max-width:100%}
:root:root:root .public-main #grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 14px; align-items:start}
:root:root:root .public-main :is(#grid,#promo-grid)>.card,
:root:root:root .public-main :is(#grid,#promo-grid)>.card:hover {
  min-width:0; margin:0; padding:0; border:0; border-radius:var(--catalog-card-radius);
  background:#f8fbfd; box-shadow:0 1px 5px #1c283612; overflow:hidden; color:var(--vx-text);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
:root:root:root .public-main :is(#grid,#promo-grid) .catalog-media-area {position:relative; width:100%; min-width:0; aspect-ratio:var(--catalog-photo-ratio); padding:0; overflow:hidden; background:transparent}
:root:root:root .public-main :is(#grid,#promo-grid) .catalog-photo {position:absolute; inset:0; width:100%; height:100%; min-width:0; min-height:0}
:root:root:root .public-main :is(#grid,#promo-grid) .product-image-button {display:block; position:relative; width:100%; min-width:0; height:100%; min-height:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:hidden}
:root:root:root .public-main :is(#grid,#promo-grid) .product-image-button:hover {background:transparent; box-shadow:none}
:root:root:root .public-main :is(#grid,#promo-grid) .image {display:block; width:100%; height:100%; aspect-ratio:var(--catalog-photo-ratio); object-fit:cover; object-position:center; border-radius:0; background:transparent}
:root:root:root .public-main #grid>.skeleton {aspect-ratio:var(--catalog-photo-ratio); height:auto; min-height:0; border-radius:var(--catalog-card-radius)}
:root:root:root .public-main :is(#grid,#promo-grid) .content {display:flex; flex-direction:column; align-items:flex-start; gap:var(--catalog-info-gap); min-width:0; margin:0; padding:var(--catalog-photo-gap) 10px 10px; background:none; border:0; box-shadow:none}
:root:root:root .public-main :is(#grid,#promo-grid) h3 {display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; width:100%; height:auto; min-height:0; margin:0; font-size:var(--catalog-name-size); line-height:1.4; font-weight:600; letter-spacing:0}
:root:root:root .public-main :is(#grid,#promo-grid) .product-line-label {font-size:var(--catalog-secondary-size); line-height:1.4; color:var(--vx-muted); margin:0}
:root:root:root .public-main :is(#grid,#promo-grid) .product-prices {display:flex; flex-direction:column; gap:3px; width:100%; margin:0; padding:0; background:none; border:0}
:root:root:root .public-main :is(#grid,#promo-grid) .product-price-line {display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 6px; min-width:0; border:0; padding:0; line-height:1.4; white-space:normal}
:root:root:root .public-main :is(#grid,#promo-grid) .product-price-label {font-size:var(--catalog-secondary-size); color:var(--vx-muted)}
:root:root:root .public-main :is(#grid,#promo-grid) .product-price-unit {font-size:var(--catalog-secondary-size); color:var(--vx-muted)}
:root:root:root .public-main :is(#grid,#promo-grid) .product-price-amounts {flex-wrap:wrap; max-width:100%; gap:2px 6px}
:root:root:root .public-main :is(#grid,#promo-grid) .product-price-value {max-width:100%; font-size:var(--catalog-price-size); line-height:1.4; color:var(--vx-text); font-weight:600; white-space:normal; overflow-wrap:anywhere}
:root:root:root .public-main :is(#grid,#promo-grid) .product-price-original {font-size:12px; color:var(--vx-muted); white-space:normal; overflow-wrap:anywhere}
:root:root:root .public-main :is(#grid,#promo-grid) .product-price-line[data-currency=BRL] .product-price-value {font-size:13px; font-weight:500}
:root:root:root .public-main .catalog-quantity {font-size:var(--catalog-secondary-size); line-height:1.4; color:var(--vx-muted); margin:0}
:root:root:root .public-main .card .vx-more-colors {--vx-metal-edge-opacity:0; --vx-metal-edge-hover-opacity:0; position:absolute; z-index:2; right:0; bottom:0; display:flex; justify-content:flex-end; align-items:flex-end; max-width:100%; min-width:min(44px,100%); min-height:44px; height:44px; margin:0; padding:0 5px 5px 0; border:0; background:transparent; box-shadow:none; color:#203c5b; pointer-events:auto}
:root:root:root .public-main .card .vx-more-colors::before {content:none}
:root:root:root .public-main .catalog-media-pending .vx-more-colors {visibility:hidden}
:root:root:root .public-main .card .vx-more-colors span {max-width:100%; padding:4px 7px; border-radius:6px; background:#fffffff0; box-shadow:0 1px 4px #14283a26; font-size:11px; line-height:1.3; font-weight:500; text-overflow:ellipsis; overflow:hidden; white-space:nowrap}
:root:root:root .public-main .card .vx-more-colors:hover {background:transparent; box-shadow:none}
:root:root:root .public-main .card .vx-more-colors:hover span {background:#fff; color:#0c4e9b}
:root:root:root .public-main :is(button,input,select,a):focus-visible {outline:2px solid #297aff; outline-offset:3px}
:root:root:root .public-main .card :is(.product-image-button,.vx-more-colors):focus-visible {outline-offset:-3px}

/* The product dialog retains its gallery, controls and internal scroll. */
:root:root:root body:has(.public-main)>footer {max-width:1816px; margin:20px auto; padding:24px clamp(14px,3.13vw,60px); background:#ffffff55; border-top:1px solid #d5e2ed; color:var(--vx-muted)}
:root:root:root body:has(.public-main) dialog {background:#f6faff; color:var(--vx-text); border:1px solid #d4e0ee; border-radius:18px; box-shadow:0 12px 40px #31476c33}
:root:root:root body:has(.public-main) dialog::backdrop {background:#1c2c464d; backdrop-filter:blur(4px)}
:root:root:root body:has(.public-main) #modal>.modal-header {padding:8px 12px; border:0; border-bottom:1px solid #d4e0ee; box-shadow:none; background:#f6faff; border-radius:0}
:root:root:root body:has(.public-main) .detail-media {background:transparent}
:root:root:root body:has(.public-main) .detail-info h2 {font-size:20px; line-height:1.35; font-weight:600; letter-spacing:0; margin:8px 0 12px}
:root:root:root body:has(.public-main) .detail-facts>div {padding:8px 10px; border:0; border-radius:10px; background:#ffffff70; color:var(--vx-text)}
:root:root:root body:has(.public-main) .detail-info .product-prices {color:var(--vx-text)}
:root:root:root .public-main :is(#promotions,#feedbacks) {margin-top:32px}
:root:root:root .public-main #feedbacks .feedback-grid {gap:12px; padding-bottom:8px}
:root:root:root .public-main #feedbacks .feedback-card {flex:0 0 200px; min-width:0; max-width:100%; border-radius:12px}
/* Draw the play symbol without depending on a font containing U+25B6. */
:root:root:root .public-main #feedbacks .play-overlay {font-size:0}
:root:root:root .public-main #feedbacks .play-overlay::after {content:""; display:block; width:0; height:0; margin-left:2px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid currentColor}
:root:root:root .public-main .section-heading {border:0; background:transparent}
:root:root:root .public-main .section-heading h2 {color:var(--vx-text); font-size:22px; line-height:1.3}
:root:root:root .public-main .section-heading .eyebrow {color:var(--vx-muted)}
:root:root:root .public-main .empty-state {background:#ffffff70; border:1px solid #fff; border-radius:16px; box-shadow:0 6px 20px #45617f0c}
:root:root:root .public-main #grid .empty-state button,:root:root:root .public-main #grid>button.secondary {color:#385477; min-height:44px; font-size:14px; font-weight:600; padding:10px 18px}
:root:root:root .public-main .pagination[hidden] {display:none}
@media(min-width:781px) {
  :root:root:root .public-main .banner-stage picture {height:clamp(240px,19.3vw,360px)}
  :root:root:root .public-main .banner-stage img {width:100%; height:100%; max-height:none; object-fit:contain}
}
@media(max-width:1100px) {:root:root:root .public-main #grid {grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 14px}}
@media(max-width:780px) {
  :root:root:root body:has(.public-main) {--catalog-control-height:44px; --catalog-control-font:16px; --catalog-compact-height:44px; --catalog-name-size:13px; --catalog-photo-gap:8px}
  :root:root:root .public-main #grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 10px}
  :root:root:root .public-main #catalog>.toolbar {grid-template-columns:minmax(0,1fr); gap:10px}
  :root:root:root .public-main .chips {gap:6px; margin-bottom:16px}
  :root:root:root .public-main .chips button {font-size:14px; padding-inline:14px}
  :root:root:root .public-main #feedbacks .feedback-card {flex-basis:min(47vw,190px)}
  :root:root:root .public-main .card .vx-more-colors span {font-size:10px}
  :root:root:root body:has(.public-main) .public-main #catalog-banners .banner-controls button {min-width:44px}
}
@media(pointer:coarse) {
  :root:root:root body:has(.public-main) {--catalog-control-height:44px; --catalog-compact-height:44px}
  :root:root:root body:has(.public-main) .public-main #catalog-banners .banner-controls button {min-width:44px}
}