.products-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.product-card { border:1px solid var(--line); border-radius:var(--radius); background:white; min-width:0; overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s,box-shadow .15s; }
.product-card:hover { border-color:#acc1e2; box-shadow:var(--shadow); }
.product-media { display:block; padding:18px; background:white; height:214px; }
.product-media img { width:100%; height:100%; object-fit:contain; }
.product-card-body { padding:20px; border-top:1px solid #f0f3f8; display:flex; flex-direction:column; flex:1; }
.product-category { font-size:10px; color:var(--muted); margin-bottom:9px; overflow-wrap:anywhere; }
.product-card h3 { font-size:14px; line-height:1.5; letter-spacing:0; margin:0 0 20px; overflow-wrap:anywhere; }
.product-card h3 a { color:var(--ink); }
.product-card h3 a:hover { color:var(--blue); }
.product-card-bottom { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; gap:8px; margin-top:auto; }
.price { font-size:20px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.price small { font-size:13px; font-weight:500; color:var(--muted); }
.add-button { border:0; background:#edf3ff; color:var(--blue); }
.add-button:hover { background:var(--blue); color:white; }
.catalog-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px; align-items:start; }
.filter-panel { background:white; border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.filter-heading { display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:22px; }
.filter-heading .icon { color:var(--blue); width:18px; height:18px; }
.filter-heading h2 { font-size:15px; letter-spacing:0; }
.filter-panel .field { margin-bottom:20px; }
.filter-panel select { font-size:12px; padding:11px; }
.filter-reset { display:block; text-align:center; color:var(--muted); font-size:11px; margin-top:15px; }
.catalog-results .products-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.catalog-results .product-media { height:190px; }
.catalog-results .empty-state { margin-top:0; }
.search-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 230px auto; align-items:end; gap:16px; background:white; border:1px solid var(--line); padding:24px; border-radius:var(--radius); margin-bottom:28px; }
.result-count { font-size:12px; color:var(--muted); margin-bottom:18px; }
.back-link { margin-bottom:24px; color:var(--muted); }
.product-detail { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:36px; background:white; border:1px solid var(--line); border-radius:16px; }
.detail-media { background:#f8fafd; border-radius:12px; display:grid; place-items:center; min-height:400px; padding:40px; }
.detail-media img { width:100%; height:340px; object-fit:contain; }
.detail-info { padding-block:12px; }
.detail-info h1 { font-size:32px; line-height:1.35; margin-bottom:24px; overflow-wrap:anywhere; }
.detail-price { font-size:36px; font-weight:750; margin-bottom:14px; }
.detail-price small { font-size:20px; font-weight:500; color:var(--muted); }
.detail-note { color:var(--muted); font-size:12px; max-width:330px; margin-bottom:28px; }
.purchase-form { display:flex; align-items:end; flex-wrap:wrap; gap:14px; }
.quantity-field { width:96px; }
.quantity-field input { height:48px; }
.detail-benefits { border-top:1px solid var(--line); margin-top:28px; padding-top:20px; font-size:12px; color:var(--muted); }
.detail-benefits p { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.detail-benefits .icon { color:var(--blue); width:17px; height:17px; }
.specifications { display:grid; grid-template-columns:.7fr 1.3fr; gap:50px; padding:36px; background:white; border:1px solid var(--line); border-radius:var(--radius); margin-top:24px; }
.specifications table { border-collapse:collapse; width:100%; }
.specifications tr+tr { border-top:1px solid var(--line); }
.specifications th,.specifications td { font-size:13px; padding:13px 0; text-align:left; vertical-align:top; }
.specifications th { font-weight:400; color:var(--muted); width:55%; padding-right:20px; }
@media(max-width:1080px) { .products-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.catalog-results .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.product-detail { gap:30px; padding:26px; }.detail-info h1 { font-size:27px; }.detail-media { min-height:340px; padding:20px; }.detail-media img { height:280px; } }
@media(max-width:720px) { .products-grid,.catalog-results .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.product-media,.catalog-results .product-media { height:156px; padding:12px; }.product-card-body { padding:14px; }.product-card h3 { font-size:12px; margin-bottom:18px; }.product-category { font-size:9px; }.price { font-size:17px; }.add-button { width:34px; height:34px; }.catalog-layout { grid-template-columns:1fr; gap:20px; }.filter-panel { padding:20px; }.filter-panel form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.filter-panel .field { margin:0; }.filter-panel .button,.filter-reset { align-self:end; }.filter-reset { padding:13px 0; margin:0; }.filter-heading { padding-bottom:14px; margin-bottom:16px; }.search-toolbar { grid-template-columns:1fr; padding:20px; }.product-detail { grid-template-columns:1fr; padding:20px; gap:20px; }.detail-media { min-height:240px; }.detail-media img { height:230px; }.detail-info h1 { font-size:27px; }.specifications { grid-template-columns:1fr; padding:24px; gap:20px; }.specifications h2 { font-size:23px; }.specifications th { width:55%; } }
@media(max-width:380px) { .products-grid,.catalog-results .products-grid { grid-template-columns:1fr; }.product-media { height:210px; }.filter-panel form { grid-template-columns:1fr; } }

.product-gallery { min-width:0; }
.detail-media a { display:block; width:100%; }
.gallery-thumbnails { display:flex; gap:10px; overflow-x:auto; padding:12px 2px; }
.gallery-thumbnails a { flex:0 0 72px; border:2px solid var(--line); border-radius:8px; padding:5px; background:white; }
.gallery-thumbnails a[aria-current="true"] { border-color:var(--blue); }
.gallery-thumbnails img { width:58px; height:58px; object-fit:contain; }
.gallery-thumbnails a:focus-visible,.gallery-controls button:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.gallery-controls { display:flex; align-items:center; justify-content:center; gap:18px; padding:8px; }
.gallery-controls button { border:1px solid var(--line); border-radius:8px; padding:8px 16px; background:white; cursor:pointer; }
.gallery-controls button[hidden] { display:none; }
.gallery-dialog { border:0; border-radius:12px; padding:40px 16px 16px; max-width:95vw; max-height:95vh; }
.gallery-dialog::backdrop { background:rgba(0,0,0,.7); }
.gallery-dialog > img { display:block; max-width:85vw; max-height:75vh; object-fit:contain; margin:auto; }
.gallery-close { position:absolute; right:8px; top:4px; border:0; background:white; font-size:30px; cursor:pointer; }

.product-description { margin-top:24px; padding:28px; background:white; border:1px solid var(--line); border-radius:var(--radius); }
.product-description p { margin-top:16px; white-space:pre-line; overflow-wrap:anywhere; }

.detail-info,.specifications>*{min-width:0}
.specifications table{table-layout:fixed;overflow-wrap:anywhere}
.detail-info>p,.detail-price{overflow-wrap:anywhere}
.filter-panel summary{cursor:pointer;list-style:none}
.filter-panel summary::-webkit-details-marker{display:none}
.filter-panel summary::after{content:'−';margin-left:auto;font-size:20px;color:var(--blue)}
.filter-panel:not([open]) summary::after{content:'+'}
.filter-panel:not([open]) .filter-heading{border-bottom:0;padding-bottom:0;margin-bottom:0}
@media(max-width:720px){
    .add-button{width:44px;height:44px}
    .filter-panel .field{min-width:0}
    .product-card-bottom .price{font-size:16px}
    .gallery-thumbnails a{min-height:44px}
    .gallery-controls button{min-width:44px;min-height:44px}
    .specifications{padding:20px}
}

.search-result-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:24px; }
.search-result-actions p { margin:0; color:var(--muted); }
.search-category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.search-category-card { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink); text-decoration:none; min-width:0; }
.search-category-card:hover,.search-category-card:focus-visible { border-color:var(--blue); box-shadow:0 4px 18px #12213912; }
.search-category-card img { width:64px; height:64px; object-fit:contain; flex-shrink:0; }
.search-category-text { min-width:0; flex:1; }
.search-category-card h2 { font-size:13px; line-height:1.4; margin:0 0 6px; overflow-wrap:anywhere; }
.search-category-text>span { font-size:11px; color:var(--muted); }
.search-category-arrow { color:var(--muted); font-size:18px; flex-shrink:0; }
.search-all-bottom { display:flex; justify-content:center; margin-top:24px; }
.pagination-size,.pagination-size label { display:flex; align-items:center; gap:8px; margin:0; }
.pagination-size label>span { font-size:12px; color:var(--muted); white-space:nowrap; }
.pagination-size select { width:72px; min-height:44px; padding:8px; }
.pagination-size .button { min-height:44px; padding:10px 12px; font-size:12px; }
@media(max-width:1100px) { .search-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:900px) { .search-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .search-category-grid { grid-template-columns:minmax(0,1fr); }.search-category-card img { width:56px; height:56px; }.search-result-actions .button,.search-all-bottom .button { width:100%; }.pagination-size { flex-wrap:wrap; } }

.search-category-overview > .catalog-results { margin-top:32px; }

.card-size-control { display:flex; justify-content:flex-end; margin:0 0 16px; }
.card-size-control[hidden] { display:none; }
.card-size-control { gap:6px; }
.card-size-button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:10px; border:1px solid var(--line); border-radius:8px; background:white; color:var(--muted); cursor:pointer; }
.card-size-button:hover { border-color:#8aafea; color:var(--blue); }
.card-size-button[aria-pressed="true"] { color:var(--blue); background:#edf3ff; border-color:var(--blue); }
.card-size-button:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.card-size-button svg { flex:none; }
html[data-card-size="compact"] .products-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr)); gap:12px; }
html[data-card-size="compact"] .product-media { height:140px; padding:12px; }
html[data-card-size="compact"] .product-card-body { padding:12px; }
html[data-card-size="compact"] .product-card h3 { font-size:12px; margin-bottom:14px; }
html[data-card-size="compact"] .price { font-size:16px; }
html[data-card-size="compact"] .price small { font-size:11px; }
html[data-card-size="large"] .products-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:24px; }
html[data-card-size="large"] .product-media { height:280px; padding:24px; }
html[data-card-size="large"] .product-card h3 { font-size:16px; }
.product-card-bottom form { margin:0; justify-self:end; }
.product-card-bottom .price { min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.3; }
.product-card-bottom .price small { display:block; margin-top:3px; }
.product-card .add-button { min-width:44px; min-height:44px; }
@media(max-width:720px) {
    .card-size-control { justify-content:flex-start; }
    html[data-card-size="compact"] .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    html[data-card-size="compact"] .product-media { height:130px; padding:10px; }
    html[data-card-size="large"] .products-grid { grid-template-columns:minmax(0,1fr); }
    html[data-card-size="large"] .product-media { height:260px; }
}

/* Compact browsing controls and collapsible filters. */
.catalog-layout { grid-template-columns:minmax(0,1fr); gap:16px; }
.catalog-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; min-width:0; }
.catalog-layout > .catalog-toolbar { margin-bottom:0; }
.catalog-toolbar h2 { font-size:18px; margin:0; }
.catalog-toolbar .card-size-control { margin:0 0 0 auto; flex-shrink:0; }
.catalog-toolbar-count { color:var(--muted); font-size:12px; }
.filter-toggle { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:white; color:var(--ink); font-size:13px; cursor:pointer; }
.filter-toggle[hidden] { display:none; }
.filter-toggle .icon { width:18px; height:18px; }
.filter-toggle[aria-expanded="true"] { border-color:var(--blue); color:var(--blue); background:#edf3ff; }
.filter-toggle:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.filter-active-count { border-radius:12px; padding:2px 6px; background:#e4edfc; color:var(--blue); font-size:11px; }
.filter-panel { padding:18px; }
.filter-panel[data-filters-enhanced]:not([open]) { display:none; }
.filter-panel[data-filters-enhanced] > summary { display:none; }
.filter-panel form { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; align-items:end; }
.filter-panel .field { margin:0; min-width:0; }
.filter-panel .filter-reset { margin:0; padding:12px 0; }
.filter-panel .button { align-self:end; }
.catalog-results .products-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
html[data-card-size="compact"] .product-card h3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; height:3em; }
html[data-card-size="compact"] .product-category { display:none; }
html[data-card-size="standard"] .product-card h3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; max-height:4.5em; }
.search-result-actions { margin-bottom:16px; gap:8px; }
.search-result-actions .button { min-height:44px; padding:9px 14px; font-size:12px; }
.search-all-bottom { margin-top:16px; }
.search-category-overview > .catalog-results { margin-top:20px; }
.pagination { margin-top:22px; }
@media(max-width:1080px) { .catalog-results .products-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:720px) {
    .catalog-results .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .catalog-toolbar { gap:8px; }
    .catalog-toolbar-count { display:none; }
    .filter-panel { padding:14px; }
    .filter-panel form { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .catalog-toolbar h2 { font-size:16px; }
}
@media(max-width:380px) { .catalog-results .products-grid { grid-template-columns:minmax(0,1fr); }.filter-panel form { grid-template-columns:minmax(0,1fr); } }

/* Native horizontal scrolling keeps the catalogue usable without JavaScript. */
.product-carousel { min-width:0; }
.product-carousel-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.product-carousel-toolbar .card-size-control { margin:0; }
.product-carousel-controls { display:flex; gap:8px; margin-left:auto; }
.product-carousel-controls[hidden] { display:none; }
.product-carousel-controls button { background:var(--surface); color:var(--ink); }
.product-carousel-controls button:disabled { opacity:.4; cursor:default; }
html .products-grid.product-carousel-track { --carousel-card-width:260px; display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(80vw,var(--carousel-card-width)); gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:2px; padding:2px 2px 14px; scrollbar-width:thin; }
html[data-card-size="compact"] .products-grid.product-carousel-track { --carousel-card-width:180px; }
html[data-card-size="large"] .products-grid.product-carousel-track { --carousel-card-width:340px; }
.product-carousel-track > .product-card { scroll-snap-align:start; }
.product-carousel-track:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }