/* ATENA lista proizvoda: layout, zaglavlje, traka rezultata, faseti (sidebar / mobilni sheet), raspon cene,
   čipovi, paginacija, prazno stanje (DESIGN 5.11-5.13, 5.20, 5.24). Zavisi od tokens/base/ui/product-card. */

.at-shop{padding-block:var(--at-s-6) var(--at-section)}
.at-shop__head{display:grid;gap:var(--at-s-5);margin-bottom:var(--at-s-6)}
.at-shop__intro{display:grid;gap:var(--at-s-5);align-items:end}
.at-shop__intro-text{display:grid;gap:var(--at-s-3);max-width:44rem}
.at-shop__title{font-size:var(--at-fs-h1)}
.at-shop__desc{max-width:40rem}
.at-shop__desc.at-prose{font-size:var(--at-fs-lead);line-height:1.45;color:var(--at-ink-2)}
.at-shop__intro-img{aspect-ratio:21/9;border-radius:var(--at-radius-lg);max-height:280px}
.at-shop__intro-img img{width:100%;height:100%;object-fit:cover}
.at-shop__search{max-width:36rem;margin-top:var(--at-s-2)}
@media (min-width:64em){
  .at-shop__intro--media{grid-template-columns:7fr 5fr;gap:var(--at-s-8);align-items:center}
  .at-shop__intro-img{aspect-ratio:16/10;max-height:300px;justify-self:end;width:100%}
}
.at-subcats{margin-top:var(--at-s-2)}
.at-subcat{height:40px;padding-left:6px;gap:var(--at-s-2)}
.at-subcat:not(:has(.at-subcat__img)){padding-left:var(--at-s-4)}
.at-subcat__img{width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--at-surface-2);flex:none}
.at-subcat__img img{width:100%;height:100%;object-fit:cover}

/* Layout: sidebar 3/12 + grid 9/12 na lg+ */
.at-shop__layout{display:grid;gap:var(--at-s-6)}
@media (min-width:64em){
  .at-shop__layout{grid-template-columns:minmax(220px,3fr) 9fr;gap:var(--at-s-8);align-items:start}
  .at-shop__side{position:sticky;top:calc(var(--at-header-h) + var(--at-s-5));max-height:calc(100dvh - var(--at-header-h) - var(--at-s-6));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-inline:var(--at-s-2);margin-left:calc(-1 * var(--at-s-2))} /* padding levo: overflow ne seče prsten swatch-a */
}
@media (min-width:80em){.at-shop__layout{grid-template-columns:minmax(240px,2.6fr) 9.4fr}}

/* Traka rezultata - sticky ispod headera */
.at-shop__bar{position:sticky;top:var(--at-header-h);transition:top var(--at-d-slow) var(--at-ease-in-out);z-index:var(--at-z-filterbar);display:flex;align-items:center;justify-content:space-between;gap:var(--at-s-3) var(--at-s-5);min-height:var(--at-filterbar-h);padding:var(--at-s-2) 0;margin-bottom:var(--at-s-5);background:color-mix(in srgb,var(--at-bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--at-line);flex-wrap:wrap}
.at-header-up .at-shop__bar{top:0} /* header sakriven (header.js) - traka na sam vrh, isti tempo kao header */
.at-shop__bar-left,.at-shop__bar-right{display:flex;align-items:center;gap:var(--at-s-3);flex-wrap:wrap;min-width:0}
.at-shop__bar-left{flex:1}
.at-shop__shown{white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:63.99em){
  .at-shop__bar{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:var(--at-s-2)}
  .at-shop__bar-left{display:contents}
  .at-shop__filters-btn{grid-row:1;grid-column:1;justify-self:start}
  .at-shop__bar-right{grid-row:1;grid-column:2}
  .at-shop__shown{grid-row:2;grid-column:1/-1;margin:0}
  .at-shop__progress{grid-column:1/-1}
}
.at-shop__chips{display:none}
@media (min-width:64em){.at-shop__chips{display:flex}}
.at-shop__filters-btn{gap:var(--at-s-2)}
.at-shop__filters-btn svg{width:18px;height:18px}
.at-shop__filters-n{display:inline-grid;place-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--at-radius-pill);background:var(--at-accent);color:var(--at-accent-ink);font-size:var(--at-fs-micro);font-variant-numeric:tabular-nums;margin-left:2px}
.at-shop__filters-n.is-hidden,.is-hidden{display:none}
@media (min-width:64em){.at-shop__filters-btn{display:none}}
.at-shop__progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--at-accent);transform:scaleX(0);transform-origin:left;opacity:0;transition:opacity var(--at-d-fast) var(--at-ease-out)}
.at-shop.is-loading .at-shop__progress{opacity:1;animation:at-progress 1.2s var(--at-ease-in-out) infinite}
@keyframes at-progress{0%{transform:scaleX(0);transform-origin:left}55%{transform:scaleX(1);transform-origin:left}56%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* Sortiranje / broj po strani - select kao dugme */
.at-shop__sort{display:flex;align-items:center;gap:var(--at-s-2)}
.at-select{position:relative;display:inline-flex;align-items:center}
.at-select select{appearance:none;height:36px;padding:0 34px 0 var(--at-s-4);border:1px solid var(--at-line-strong);border-radius:var(--at-radius-md);background:var(--at-surface);color:var(--at-ink);font-size:var(--at-fs-small);font-weight:500;cursor:pointer;transition:border-color var(--at-d-base) var(--at-ease-out)}
.at-select select:hover{border-color:var(--at-ink)}
.at-select select:focus-visible{outline:2px solid var(--at-focus);outline-offset:2px}
.at-select__icon{position:absolute;right:10px;width:16px;height:16px;pointer-events:none;color:var(--at-muted)}
.at-select--pp{display:none}
@media (min-width:40em){.at-select--pp{display:inline-flex}}
.at-shop__view{display:none;gap:2px;padding:2px;border:1px solid var(--at-line-strong);border-radius:var(--at-radius-md);background:var(--at-surface)}
@media (min-width:80em){.at-shop__view{display:inline-flex}}
.at-shop__view-btn{display:grid;place-content:center;width:30px;height:30px;border-radius:calc(var(--at-radius-md) - 3px);color:var(--at-muted);transition:background-color var(--at-d-base) var(--at-ease-out),color var(--at-d-base) var(--at-ease-out)}
.at-shop__view-btn svg{width:16px;height:16px}
.at-shop__view-btn:hover{color:var(--at-ink)}
.at-shop__view-btn.is-active{background:var(--at-ink);color:var(--at-bg)}

/* Grid rezultata */
.at-shop__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--at-s-3);transition:opacity var(--at-d-fast) var(--at-ease-out)}
@media (min-width:48em){.at-shop__grid{gap:var(--at-gap)}}
@media (min-width:64em){.at-shop__grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:96em){.at-shop__grid{grid-template-columns:repeat(4,1fr)}}
.at-shop__grid--list{grid-template-columns:1fr}
.at-shop.is-loading .at-shop__grid{opacity:.5;pointer-events:none}
.at-shop__cell{min-width:0}
.at-shop__cell-in{height:100%}
.at-shop__grid > .at-shop__cell.is-skeleton .at-product{visibility:hidden}
.at-shop__grid > .at-shop__cell.is-skeleton{position:relative;border-radius:var(--at-radius-md);overflow:hidden}
.at-shop__grid > .at-shop__cell.is-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--at-surface-2) 0%,var(--at-surface) 50%,var(--at-surface-2) 100%) 0 0/200% 100%;animation:at-shimmer 1.2s linear infinite}
@keyframes at-shimmer{to{background-position:-200% 0}}
.at-shop__empty{grid-column:1/-1;padding-block:var(--at-section-sm)}
.at-shop__suggest{grid-column:1/-1;border-top:1px solid var(--at-line);padding-top:var(--at-s-6)}
.at-shop__suggest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--at-s-3)}
@media (min-width:64em){.at-shop__suggest-grid{grid-template-columns:repeat(4,1fr);gap:var(--at-gap)}}

/* Čipovi aktivnih filtera */
.at-chip--active{background:var(--at-accent-soft);border-color:transparent;color:var(--at-accent);padding-right:8px;animation:at-chip-in var(--at-d-base) var(--at-ease-out) both}
.at-chip--active:hover{border-color:var(--at-accent);color:var(--at-accent)}
.at-chip__x{display:grid;place-content:center;width:22px;height:22px;border-radius:50%;margin-left:2px;transition:background-color var(--at-d-fast) var(--at-ease-out)}
.at-chip__x svg{width:14px;height:14px}
.at-chip--active:hover .at-chip__x{background:color-mix(in srgb,var(--at-accent) 12%,transparent)}
.at-chip--ghost{border-color:transparent;color:var(--at-muted);text-decoration:underline;text-underline-offset:3px;padding-inline:var(--at-s-2)}
.at-chip--ghost:hover{color:var(--at-ink);border-color:transparent}
@keyframes at-chip-in{from{opacity:0;transform:scale(.9)}}

/* Panel filtera (sidebar) */
.at-filters__form{display:flex;flex-direction:column}
.at-filters__top{display:flex;align-items:center;gap:var(--at-s-3);padding-bottom:var(--at-s-4);border-bottom:1px solid var(--at-line)}
.at-filters__title{font-size:var(--at-fs-h4);letter-spacing:0;display:flex;align-items:center;gap:var(--at-s-2);flex:1}
.at-filters__n:not(:empty){display:inline-grid;place-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:var(--at-radius-pill);background:var(--at-accent);color:var(--at-accent-ink);font-family:var(--at-font-body);font-size:var(--at-fs-micro);font-weight:600}
.at-filters__clear{font-size:var(--at-fs-small);font-weight:500}
.at-filters__close{display:none}
.at-filters__chips{display:none}
.at-filters__foot{display:none}

/* Faset */
.at-facet{border:0;padding:0;margin:0;min-width:0;border-bottom:1px solid var(--at-line)}
.at-facet__legend{display:block;width:100%;padding:0;float:left}
.at-facet__legend + *{clear:both}
.at-facet__toggle{display:flex;width:100%;align-items:center;gap:var(--at-s-2);padding:var(--at-s-4) 0;text-align:left;font-weight:600;font-size:var(--at-fs-body);color:var(--at-ink);transition:color var(--at-d-base) var(--at-ease-out)}
.at-facet__toggle:hover{color:var(--at-accent)}
.at-facet__chev{width:18px;height:18px;margin-left:auto;color:var(--at-muted);transition:transform var(--at-d-slow) var(--at-ease-out)}
.at-facet.is-open .at-facet__chev{transform:rotate(180deg)}
.at-facet__badge{display:inline-grid;place-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--at-radius-pill);background:var(--at-accent-soft);color:var(--at-accent);font-size:var(--at-fs-micro);font-variant-numeric:tabular-nums}
.at-facet__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--at-d-slow) var(--at-ease-out)}
/* padding-inline + negativna margina: overflow:hidden ne seče opcije (margina -s-2) ni prsten izabranog swatch-a */
.at-facet__panel > div{overflow:hidden;min-height:0;padding-inline:var(--at-s-2);margin-inline:calc(-1 * var(--at-s-2))}
.at-facet.is-open .at-facet__panel{grid-template-rows:1fr}
.at-facet.is-open .at-facet__panel > div{padding-bottom:var(--at-s-4)}
.at-facet__list{display:flex;flex-direction:column;gap:2px}
.at-facet__option{display:flex;align-items:center;gap:var(--at-s-3);min-height:36px;padding:4px var(--at-s-2);margin:0 calc(-1 * var(--at-s-2));border-radius:var(--at-radius-sm);cursor:pointer;font-size:var(--at-fs-small);color:var(--at-ink-2);transition:background-color var(--at-d-fast) var(--at-ease-out),color var(--at-d-fast) var(--at-ease-out)}
.at-facet__option:hover{background:var(--at-surface-2);color:var(--at-ink)}
.at-facet__option input{position:absolute;width:1px;height:1px;margin:-1px;opacity:0;pointer-events:none}
.at-facet__option:has(input:focus-visible){outline:2px solid var(--at-focus);outline-offset:1px}
.at-facet__option.is-empty{color:var(--at-muted);opacity:.55}
.at-facet__option.is-empty:hover{opacity:.85}
.at-facet__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.at-facet__count{font-size:var(--at-fs-micro);color:var(--at-muted);font-variant-numeric:tabular-nums}
.at-facet__box{display:grid;place-content:center;width:20px;height:20px;flex:none;border:1px solid var(--at-line-strong);border-radius:5px;background:var(--at-surface);transition:background-color var(--at-d-fast) var(--at-ease-out),border-color var(--at-d-fast) var(--at-ease-out)}
.at-facet__box::before{content:"";width:10px;height:10px;transform:scale(0);background:var(--at-accent-ink);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9l5-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--at-d-fast) var(--at-ease-spring)}
.at-facet__box--radio{border-radius:50%}
.at-facet__box--radio::before{mask:none;border-radius:50%;width:8px;height:8px}
.at-facet__option input:checked ~ .at-facet__box{background:var(--at-accent);border-color:var(--at-accent)}
.at-facet__option input:checked ~ .at-facet__box::before{transform:scale(1)}
.at-facet__option input:checked ~ .at-facet__name{color:var(--at-ink);font-weight:600}
.at-facet__stars{display:inline-flex;align-items:center;gap:2px}
.at-facet__stars span{margin-left:4px}
.at-facet__more-item{display:none}
.at-facet.is-expanded .at-facet__more-item,.at-facet.is-searching .at-facet__more-item{display:block}
.at-facet__more{margin-top:var(--at-s-2);font-size:var(--at-fs-small);font-weight:500}
.at-facet.is-expanded .at-facet__more{display:none}
.at-facet__search{display:block;margin-bottom:var(--at-s-2)}
.at-facet__search input{width:100%;height:36px;padding:0 var(--at-s-3);border:1px solid var(--at-line-strong);border-radius:var(--at-radius-sm);background:var(--at-surface);font-size:var(--at-fs-small)}
.at-facet__search input:focus{outline:none;border-color:var(--at-accent);box-shadow:var(--at-ring)}
.at-facet__list li.is-filtered{display:none}

/* Dugmad (dimenzija) */
.at-facet--button .at-facet__list{flex-direction:row;flex-wrap:wrap;gap:var(--at-s-2)}
.at-facet--button .at-facet__option{margin:0;min-height:40px;padding:0 var(--at-s-3);border:1px solid var(--at-line-strong);border-radius:var(--at-radius-sm);gap:6px;background:var(--at-surface);color:var(--at-ink-2)}
.at-facet--button .at-facet__option:hover{border-color:var(--at-ink);background:var(--at-surface)}
.at-facet--button .at-facet__option:has(input:checked){background:var(--at-ink);border-color:var(--at-ink);color:var(--at-bg)}
.at-facet--button .at-facet__option:has(input:checked) .at-facet__name,.at-facet--button .at-facet__option:has(input:checked) .at-facet__count{color:inherit}
.at-facet--button .at-facet__name{flex:none;white-space:nowrap}
.at-facet--button .at-facet__option.is-empty{background:var(--at-surface-2);border-color:var(--at-line)}

/* Swatch faset */
.at-facet--swatch .at-facet__option{gap:var(--at-s-3)}
.at-facet--swatch .at-facet__option:has(input:checked) .at-swatch::after{border-color:var(--at-ink)}

/* Kategorije (linkovi) */
.at-cats{display:flex;flex-direction:column;gap:2px}
.at-cats--sub{padding-left:var(--at-s-4);margin:2px 0 var(--at-s-2);border-left:1px solid var(--at-line)}
.at-cats__link{display:flex;align-items:center;gap:var(--at-s-3);min-height:34px;padding:2px var(--at-s-2);margin:0 calc(-1 * var(--at-s-2));border-radius:var(--at-radius-sm);font-size:var(--at-fs-small);color:var(--at-ink-2);transition:background-color var(--at-d-fast) var(--at-ease-out),color var(--at-d-fast) var(--at-ease-out)}
.at-cats__link > span:first-child{flex:1}
.at-cats__link:hover{background:var(--at-surface-2);color:var(--at-ink)}
.at-cats__link.is-active{color:var(--at-ink);font-weight:600;background:var(--at-accent-soft)}
.at-cats__link.is-empty{color:var(--at-muted);opacity:.6}
.at-cats > .at-cats__item > .at-cats__link{font-weight:500;color:var(--at-ink)}

/* Raspon cene */
.at-range{display:grid;gap:var(--at-s-3);padding-top:var(--at-s-2)}
.at-range__hist{display:grid;grid-template-columns:repeat(24,1fr);align-items:end;gap:2px;height:40px;padding:0 10px}
.at-range__hist span{height:max(2px,var(--h));background:var(--at-line);border-radius:2px 2px 0 0;transition:background-color var(--at-d-base) var(--at-ease-out)}
.at-range__track{position:relative;height:24px;margin:0 10px}
.at-range__track::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--at-line)}
.at-range__fill{position:absolute;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--at-accent);left:var(--lo,0%);right:calc(100% - var(--hi,100%))}
.at-range__input{position:absolute;inset:0;width:100%;height:100%;margin:0;appearance:none;background:transparent;pointer-events:none}
.at-range__input::-webkit-slider-runnable-track{background:transparent;height:100%}
.at-range__input::-moz-range-track{background:transparent}
.at-range__input::-webkit-slider-thumb{appearance:none;pointer-events:auto;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--at-surface);border:2px solid var(--at-accent);box-shadow:var(--at-shadow-xs);cursor:grab;transition:transform var(--at-d-fast) var(--at-ease-spring)}
.at-range__input::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--at-surface);border:2px solid var(--at-accent);box-shadow:var(--at-shadow-xs);cursor:grab}
.at-range__input:active::-webkit-slider-thumb{transform:scale(1.1);cursor:grabbing}
.at-range__input:focus-visible{outline:none}
.at-range__input:focus-visible::-webkit-slider-thumb{box-shadow:var(--at-ring)}
.at-range__input:focus-visible::-moz-range-thumb{box-shadow:var(--at-ring)}
.at-range__input--hi{z-index:1}
.at-range__fields{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--at-s-2)}
.at-range__field{position:relative;display:block}
.at-range__field input{width:100%;height:40px;padding:0 44px 0 var(--at-s-3);border:1px solid var(--at-line-strong);border-radius:var(--at-radius-sm);background:var(--at-surface);font-size:var(--at-fs-small);font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}
.at-range__field input::-webkit-outer-spin-button,.at-range__field input::-webkit-inner-spin-button{appearance:none;margin:0}
.at-range__field input:focus{outline:none;border-color:var(--at-accent);box-shadow:var(--at-ring)}
.at-range__cur{position:absolute;right:var(--at-s-3);top:50%;transform:translateY(-50%);font-size:var(--at-fs-micro);color:var(--at-muted);pointer-events:none}
.at-range__dash{color:var(--at-muted)}

/* Paginacija + učitaj još */
.at-shop__pagination{display:grid;gap:var(--at-s-5);margin-top:var(--at-s-7)}
.at-loadmore{display:grid;justify-items:center;gap:var(--at-s-3);text-align:center}
.at-loadmore .at-btn{min-width:200px}
.at-loadmore__bar{display:block;width:200px;height:2px;border-radius:2px;background:var(--at-line);overflow:hidden}
.at-loadmore__bar span{display:block;height:100%;width:var(--w,0%);background:var(--at-accent);transition:width var(--at-d-slow) var(--at-ease-out)}
.at-shop__pagination .at-pagination{margin-top:0}

/* Mobilni sheet (< lg): isti .at-filters panel postaje dialog preko celog ekrana */
@media (max-width:63.99em){
  .at-shop__side{display:contents}
  .at-filters{position:fixed;inset:0;z-index:var(--at-z-drawer);display:flex;flex-direction:column;background:var(--at-bg);transform:translateY(100%);visibility:hidden;transition:transform var(--at-d-slow) var(--at-ease-out),visibility 0s linear var(--at-d-slow)}
  .at-filters.is-open{transform:none;visibility:visible;transition:transform var(--at-d-slow) var(--at-ease-out)}
  .at-filters.is-closing{transition:transform 240ms var(--at-ease-in),visibility 0s linear 240ms}
  .at-filters__form{height:100%;min-height:0}
  .at-filters__top{padding:var(--at-s-3) var(--at-gutter);padding-top:calc(var(--at-s-3) + env(safe-area-inset-top,0px));border-bottom:1px solid var(--at-line);flex:none;background:var(--at-surface)}
  .at-filters__close{display:inline-flex}
  .at-filters__chips{display:flex;padding:var(--at-s-3) var(--at-gutter) 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .at-filters__chips:empty{display:none}
  .at-filters__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--at-gutter) var(--at-s-6);-webkit-overflow-scrolling:touch}
  .at-filters__foot{display:block;flex:none;padding:var(--at-s-3) var(--at-gutter) calc(var(--at-s-3) + env(safe-area-inset-bottom,0px));background:var(--at-surface);border-top:1px solid var(--at-line);box-shadow:0 -8px 24px rgba(var(--at-shadow-tint),.06)}
  .at-filters__foot .at-btn{width:100%}
  .at-facet__option{min-height:48px}
  .at-facet__toggle{padding-block:var(--at-s-4)}
  .at-cats__link{min-height:44px}
}
.at-filters-overlay{position:fixed;inset:0;z-index:calc(var(--at-z-drawer) - 1);background:var(--at-overlay);opacity:0;pointer-events:none;transition:opacity var(--at-d-slow) var(--at-ease-out)}
.at-filters-overlay.is-open{opacity:1;pointer-events:auto}
body.at-locked{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .at-shop.is-loading .at-shop__progress{animation:none;transform:none;opacity:1}
  .at-shop__grid > .at-shop__cell.is-skeleton::after{animation:none}
}