.premium-shell { --paper: #e2e7df; --white: #ffffff; --ink: #18221d; --muted: #66736b; --green: #164d3b; --orange: #c97824; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
.premium-shell h1, .premium-shell h2, .premium-shell h3, .premium-shell h4, .premium-shell h5, .premium-shell h6 { color: inherit; font-family: "Playfair Display", serif; letter-spacing: 0; }
.premium-shell p, .premium-shell label, .premium-shell span { letter-spacing: 0; }
.premium-shell input, .premium-shell select, .premium-shell button { font: inherit; }
.products-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 1rem; align-items: stretch; margin-bottom: 1.25rem; }
.products-hero-copy, .products-hero-panel, .products-toolbar, .products-sidebar, .products-results { border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.products-hero-copy { position: relative; min-height: 330px; padding: clamp(2rem, 5vw, 4.5rem); overflow: hidden; color: var(--white); background: var(--green); isolation: isolate; }
.products-hero-copy::after { position: absolute; z-index: -1; inset: 0 0 0 40%; content: ""; background: linear-gradient(90deg, var(--green), rgba(22,77,59,.3)), url("../img/ia-hero.webp") center/cover; }
.products-hero-copy h1 { max-width: 650px; margin: .8rem 0 1rem; font-family: "Playfair Display", serif; font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.04; }
.products-hero-copy p { max-width: 590px; color: rgba(255,255,255,.82); line-height: 1.7; }
.products-hero-panel { display: flex; flex-direction: column; justify-content: center; padding: 1.4rem; background: #eef3e8; }
.hero-search { display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.hero-search input { width: 100%; border: 0; outline: 0; background: transparent; }
.shortcut-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.shortcut { padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--green); background: var(--white); font-size: .78rem; font-weight: 700; }
.products-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.15rem; margin-bottom: 1.25rem; }
.products-toolbar h2 { margin: 0; font-family: "Playfair Display", serif; font-size: 1.55rem; }
.products-toolbar p { margin: .25rem 0 0; color: var(--muted); font-size: .88rem; }
.products-filter-toggle { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem; background: #f7f9f5; border: 1px solid var(--premium-line, #d2d8cf); border-radius: 12px; font-weight: 700; font-size: .88rem; color: var(--premium-ink, #18221d); cursor: pointer; transition: all .2s ease; }
.products-filter-toggle:hover { background: #ffffff; border-color: var(--premium-green, #164d3b); color: var(--premium-green, #164d3b); }
.toggle-chevron { transition: transform .25s ease; }
.toggle-chevron.is-open { transform: rotate(180deg); }
.result-badge { padding: .55rem .8rem; border-radius: 999px; color: var(--green); background: #edf3df; font-size: .82rem; font-weight: 800; white-space: nowrap; }
.products-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.25rem; }
.products-layout.filters-hidden { grid-template-columns: 1fr; }
.products-sidebar { align-self: start; padding: 1.15rem; }
.products-sidebar.is-collapsed { display: none; }
.products-sidebar h3 { margin: 0 0 1rem; font-size: 1rem; }
.filter-group { margin-bottom: 1rem; }
.filter-group label { display: block; margin-bottom: .4rem; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.filter-control { width: 100%; min-height: 40px; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.filter-search { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; }
.products-results { min-width: 0; padding: 1rem; }
.products-results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.products-results-grid > [class*="col-"] { width: auto; max-width: none; min-width: 0; padding-right: 0; padding-left: 0; }
.products-results .market-card { height: 100%; padding: 0; border-radius: 12px; background: var(--white); color: var(--ink); }
.products-results .card-body-market, .products-results .product-name, .products-results .product-description { color: var(--ink); }
.products-results .badge-soft, .products-results .store-line, .products-results .card-meta { color: var(--muted); }
.products-results .btn-view { color: #fff; }
.empty-products { padding: 3rem 1rem; text-align: center; color: var(--muted); }
.products-results-grid .market-card,
.market-card { display: flex; flex-direction: column; overflow: hidden; min-height: 100%; border: 1px solid var(--premium-line, #d2d8cf); border-radius: 18px; background: var(--premium-surface, #ffffff); box-shadow: 0 8px 24px rgba(24,34,29,.05); transition: transform .25s ease, box-shadow .25s ease; }
.products-results-grid .market-card:hover,
.market-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(24,34,29,.12); }
.products-results-grid .card-media,
.market-card .card-media { position: relative; overflow: hidden; height: 210px; background: #e5ebe3; cursor: pointer; }
.products-results-grid .card-media > img, .products-results-grid .card-media .carousel, .products-results-grid .card-media .carousel-inner, .products-results-grid .card-media .carousel-item,
.market-card .card-media > img, .market-card .card-media .carousel, .market-card .card-media .carousel-inner, .market-card .card-media .carousel-item { width: 100%; height: 210px; object-fit: cover; }
.products-results-grid .card-media img,
.market-card .card-media img { transition: transform .35s ease; }
.products-results-grid .market-card:hover .card-media img,
.market-card:hover .card-media img { transform: scale(1.05); }
.products-results-grid .card-badges,
.market-card .card-badges { position: absolute; right: .7rem; bottom: .7rem; left: .7rem; display: flex; justify-content: space-between; gap: .5rem; z-index: 2; pointer-events: none; }
.products-results-grid .badge-soft, .products-results-grid .badge-accent,
.market-card .badge-soft, .market-card .badge-accent { display: inline-flex; align-items: center; gap: .3rem; max-width: 75%; padding: .32rem .65rem; border-radius: 8px; font-size: .72rem; font-weight: 700; backdrop-filter: blur(8px); text-overflow: ellipsis; white-space: nowrap; }
.products-results-grid .badge-soft,
.market-card .badge-soft { color: #18221d; background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.08); }
.products-results-grid .badge-accent,
.market-card .badge-accent { color: #fff; background: var(--premium-orange, #e89a38); }
.products-results-grid .card-body-market,
.market-card .card-body-market { display: flex; flex: 1; flex-direction: column; padding: 1.15rem; }
.products-results-grid .store-line,
.market-card .store-line { display: flex; justify-content: space-between; gap: .5rem; color: var(--premium-muted, #5e6b63); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.products-results-grid .product-name,
.market-card .product-name { margin: .5rem 0 .35rem; color: var(--premium-ink, #18221d); font-family: "DM Sans", sans-serif; font-size: 1.1rem; font-weight: 800; line-height: 1.3; }
.products-results-grid .product-description,
.market-card .product-description { min-height: 2.6rem; margin: 0 0 .8rem; color: var(--premium-muted, #5e6b63); font-size: .85rem; line-height: 1.5; }
.products-results-grid .price-block,
.market-card .price-block { display: flex; align-items: baseline; gap: .55rem; margin-top: auto; padding-top: .6rem; border-top: 1px dashed var(--premium-line, #d2d8cf); }
.products-results-grid .price-main,
.market-card .price-main { color: var(--premium-green, #164d3b); font-size: 1.15rem; font-weight: 800; }
.products-results-grid .price-old,
.market-card .price-old { color: #89948c; font-size: .82rem; text-decoration: line-through; }
.products-results-grid .card-meta,
.market-card .card-meta { margin-top: .4rem; color: var(--premium-muted, #5e6b63); font-size: .78rem; font-weight: 600; }
.products-results-grid .card-actions,
.market-card .card-actions { display: flex; align-items: center; gap: .55rem; margin-top: .85rem; }
.products-results-grid .card-actions .btn-view,
.market-card .card-actions .btn-view { flex: 1; border: 0; border-radius: 10px; background: var(--premium-green, #164d3b) !important; color: #ffffff !important; font-size: .85rem; font-weight: 800; padding: .6rem .8rem; text-decoration: none; text-align: center; transition: background .2s ease; }
.products-results-grid .card-actions .btn-view:hover,
.market-card .card-actions .btn-view:hover { background: var(--premium-green-dark, #0d3428) !important; color: #ffffff !important; }
.products-results-grid .card-actions .btn-save,
.market-card .card-actions .btn-save { display: inline-flex; flex: 0 0 auto; width: auto; min-width: 54px; height: 38px; align-items: center; justify-content: center; gap: .35rem; padding: 0 .6rem; border: 1px solid var(--premium-line, #d2d8cf) !important; border-radius: 10px; color: var(--premium-green, #164d3b) !important; background: #f7f9f5 !important; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: all .2s ease; }
.products-results-grid .card-actions .btn-save:hover,
.market-card .card-actions .btn-save:hover { background: #ffffff !important; border-color: var(--premium-green, #164d3b) !important; }
.products-results-grid .card-actions .btn-save .like-count,
.market-card .card-actions .btn-save .like-count { display: inline-block; min-width: 1ch; line-height: 1; }
.products-results-grid .card-actions .btn-save.liked,
.market-card .card-actions .btn-save.liked { color: #b84b3d !important; background: #fff0ed !important; border-color: #f7c5be !important; }
@media (max-width: 1000px) { .products-hero { grid-template-columns: 1fr; } .products-layout { grid-template-columns: 1fr; } .products-sidebar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; } .products-sidebar h3 { grid-column: 1 / -1; margin-bottom: 0; } .products-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .products-hero-copy { min-height: 400px; padding: 2rem 1.3rem; } .products-hero-copy::after { inset: 42% 0 0; background: linear-gradient(0deg, rgba(22,77,59,.95), rgba(22,77,59,0)), url("../img/ia-hero.webp") center/cover; } .products-toolbar { align-items: flex-start; flex-direction: column; } .products-sidebar { display: block; } .products-results-grid { grid-template-columns: 1fr; } }