/* Complete category labels and a stable close control on small screens. */
.category-chips{align-items:center;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.category-chips button{flex:0 0 auto;min-inline-size:max-content;max-width:none;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;scroll-snap-align:start;line-height:1.4}
.dialog-topbar{position:sticky;top:0;height:0;width:100%;z-index:8;pointer-events:none}
#close-product.close-dialog{position:absolute;inset:12px 12px auto auto;width:42px;height:42px;pointer-events:auto;border-radius:50%;background:var(--surface);box-shadow:0 4px 15px #0005;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:0}
#close-product svg{display:block;flex-shrink:0}
/* A dark textured display stage, shared by cards and the product detail. */
.product-photo{background-color:#25252d;background-image:url('assets/studio-texture.svg'),radial-gradient(ellipse at 48% 35%,#696a70 0%,#45464e 42%,#25252d 78%,#17181d 100%);background-size:150px 150px,100% 100%;background-repeat:repeat,no-repeat}
.product-photo img{mix-blend-mode:normal;filter:none;padding:14px}
.product-photo:after{box-shadow:inset 0 -22px 35px #09090c36;border-color:#ffffff0c}
.product-photo.photo-styled{background:#17181f}
.product-photo.photo-styled img,.detail-visual .product-photo.photo-styled img{mix-blend-mode:normal;filter:none;padding:0;object-fit:cover;width:100%;height:100%}
.product-photo.photo-styled:hover img{transform:scale(1.045)}
.detail-visual .product-photo.photo-styled:hover img{transform:none}
.detail-visual{background:radial-gradient(ellipse at 50% 20%,#8243b315,transparent 70%),var(--surface2)}
.connector-badges{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:0 0 8px;min-height:26px}
.connector-badges>span{font-size:9px;line-height:1.4;font-weight:600;letter-spacing:.1px;color:var(--text);background:var(--surface2);border:1px solid var(--line);padding:4px 7px;border-radius:6px;white-space:nowrap}
.connector-badges .more-connectors{color:var(--violet);border-color:#a66bff55;background:#a66bff13}
.product-content{gap:10px}.product-note{font-size:11px;line-height:1.55;margin-bottom:0;min-height:34px}
/* Page-owned dropdown menus. The original form values stay hidden and keep the quote in sync. */
.catalog-toolbar{align-items:flex-start}.search{min-height:53px}.subcategory{width:255px;min-width:0;flex-shrink:0}.mc-select{position:relative;width:100%;min-width:0}
.select-trigger{width:100%;min-width:0;min-height:48px;display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:9px;text-align:left;cursor:pointer;transition:border-color .25s,box-shadow .3s,background-color .4s}
.subcategory .select-trigger{min-height:53px;background:var(--surface);font-size:12px}
.select-value{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.5;font-weight:500}
.select-chevron{display:flex;flex:0 0 18px;align-items:center;justify-content:center;color:var(--muted);transition:transform .32s var(--ease-out),color .25s}
.select-chevron svg{width:18px;height:18px}
.mc-select[data-open=true] .select-chevron{transform:rotate(180deg);color:var(--violet)}
.mc-select[data-open=true] .select-trigger,.select-trigger:focus-visible{border-color:var(--violet);box-shadow:0 0 0 3px #a66bff20;background:var(--surface)}
.select-popup{overflow:hidden;margin-top:8px;border:1px solid #a66bff55;border-radius:11px;background:var(--surface2);box-shadow:0 9px 25px #0002}
.select-options{max-height:260px;overflow-y:auto;overscroll-behavior:contain;padding:7px;display:grid;gap:5px;scrollbar-width:thin;scrollbar-color:var(--violet) transparent}
.select-option{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;padding:11px 12px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text);font-size:12px;line-height:1.5;text-align:left;cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s}
.select-option>span:first-child{min-width:0;white-space:normal;overflow-wrap:anywhere}
.select-option:hover,.select-option:focus-visible{background:#a66bff14;border-color:#a66bff55;outline-offset:-2px}
.select-option.selected{background:linear-gradient(110deg,#aa54ee21,#db39691a);border-color:#a66bff65;color:var(--violet);font-weight:600}
.option-tick{opacity:0;color:var(--violet);font-size:15px;flex-shrink:0}.selected>.option-tick{opacity:1}
.connector-select .select-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.connector-select .select-option[data-value="Necesito ayuda con el conector"]{grid-column:1/-1;font-size:11px}
.variant-label .field-label{display:block;font-size:12px;font-weight:500;margin-bottom:8px;color:var(--text)}
.variant-label:focus-within .field-label{color:var(--violet)}
.select-options::-webkit-scrollbar{width:5px}.select-options::-webkit-scrollbar-thumb{border-radius:6px;background:#a66bff80}
@media(max-width:800px){.subcategory{width:235px}}
@media(max-width:600px){.catalog-toolbar{align-items:stretch}.subcategory{width:100%}.subcategory .select-trigger{min-height:45px}.category-chips{padding-bottom:15px}.category-chips button{padding:10px 14px;flex-shrink:0;min-height:37px;font-size:11px}.product-content{gap:9px}.product-note{font-size:10px;min-height:31px}.connector-badges{gap:4px;margin-bottom:5px}.connector-badges>span{font-size:8px;padding:4px 5px}.card-quote{min-height:39px;line-height:1.4}.product-photo img{padding:9px}#close-product.close-dialog{inset:10px 10px auto auto;width:39px;height:39px}.select-options{max-height:240px}.select-option{min-height:43px}.connector-select .select-options{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.select-trigger,.select-chevron,.select-option{transition:none}}

.select-trigger,.select-option{position:relative;isolation:isolate;overflow:hidden}.mc-select[data-open=false] .select-popup{pointer-events:none}

.product-photo{aspect-ratio:1}.product-photo.photo-styled img,.detail-visual .product-photo.photo-styled img{object-fit:contain}