/* Category page — Lovable redesign */

/* Breadcrumbs */
.crumbs{font-family:var(--font-sans);font-size:.875rem;color:var(--muted);padding:.75rem 0}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .2s}
.crumbs a:hover{color:var(--ink)}
svg.crumb-sep{flex-shrink:0;color:var(--muted);opacity:.5;vertical-align:middle}

/* Category banner */
.cat-hero{position:relative;border-radius:20px;overflow:hidden;background:hsl(30 20% 95%)}
.cat-hero .bg{position:absolute;inset:0;background:center/cover no-repeat;filter:brightness(.9)}
.cat-hero .body{position:relative;z-index:2;padding:28px 32px;color:#fff}
.cat-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(42,32,24,.62),rgba(42,32,24,.18) 55%,transparent)}
.cat-hero h1,.cat-hero h2,.cat-hero h3{color:#fff}

/* ===== SIDEBAR ===== */
.shop-layout{display:flex;gap:2rem}
.shop-sidebar{width:260px;flex-shrink:0}
.shop-content{flex:1;min-width:0}
@media(max-width:991.98px){
  .shop-layout{flex-direction:column}
  .shop-sidebar{width:100%;order:-1!important}
}
.sidebar{overflow:visible;z-index:5;background:transparent!important;border:none!important;padding:0!important}

/* Category tree */
.cat-tree{list-style:none;margin:0;padding:0}
.cat-tree>li{padding:0}
.cat-tree a{font-family:var(--font-sans);font-size:.875rem;color:var(--muted);font-weight:400;display:flex;align-items:center;gap:6px;flex:1;padding:.5rem 0;text-decoration:none;transition:color .2s}
.cat-tree a:hover{color:var(--ink)}
.cat-tree li.is_active>div>a,.cat-tree li.is_active>a{color:var(--ink);font-weight:500}
.cat-tree-row{display:flex;align-items:center}
.cat-tree-toggle{background:none;border:none;padding:4px;cursor:pointer;color:var(--muted);transition:transform .2s;flex-shrink:0;display:flex;align-items:center;margin-left:auto}
.cat-tree-toggle:hover{color:var(--ink)}
.has-children.is-expanded>.cat-tree-row>.cat-tree-toggle{transform:rotate(180deg)}

/* Submenu */
.submenu{display:none;list-style:none;margin:0 0 .5rem;padding:0 0 0 .75rem;border-left:1px solid var(--line)}
.cat-tree .has-children.is-expanded>.submenu{display:block}
.submenu a{font-size:.875rem;padding:.375rem 0;display:block;color:var(--muted)}
.submenu a:hover{color:var(--ink)}
.submenu a.is-current{color:var(--ink);font-weight:500}

/* Sidebar title — lovable: same as widget-title */
.sidebar-title{
  font-family:var(--font-serif)!important;font-size:.875rem!important;font-weight:700!important;
  text-transform:uppercase!important;letter-spacing:.05em!important;
  color:var(--ink)!important;margin-bottom:.75rem!important;
  font-style:normal!important;line-height:1.25rem!important;
  padding:0!important;
}

/* Sidebar sections spacing */
.shop-widgets{border:none;background:transparent;margin-top:1.75rem}
.shop-widgets:first-child{margin-top:0}
.shop-widgetbox{padding:0!important}
.shop-widgetbox .single-widget{padding:0!important}
.shop-widgets .widget-categories{padding:0!important}

/* Section separator — only ONE between categories and filters */
.sidebar .shop-widgets:first-child + .shop-widgets{padding-top:1.75rem;border-top:1px solid var(--line)}

/* Widget title — lovable exact: text-sm font-bold uppercase tracking-wider, inherits font-serif from h4 */
.widget-title{
  font-family:var(--font-serif)!important;font-size:.875rem!important;font-weight:700!important;
  text-transform:uppercase!important;letter-spacing:.05em!important;
  color:var(--ink)!important;margin-bottom:.75rem!important;
  font-style:normal!important;line-height:1.25rem!important;
}

/* Filter list */
.widget-filters .filter-list{list-style:none;padding:0;margin:0}
.widget-filters .filter-list li{
  display:flex!important;align-items:center!important;
  gap:10px!important;padding:.25rem 0!important;cursor:pointer;
}
.widget-filters .filter-list label{
  font-family:var(--font-sans);font-size:.875rem;color:var(--muted);
  cursor:pointer;transition:color .2s;flex:1;
  display:inline-flex!important;align-items:center!important;gap:10px!important;
}
.widget-filters .filter-list label:hover{color:var(--ink)}
.widget-filters .toggle-link{font-size:.75rem;color:var(--brand);margin-top:.5rem;display:inline-block}
.widget-filters .toggle-link:hover{text-decoration:underline}

/* Checkboxes — lovable: circular with primary border */
.widget-filters .checkbox,
.widget-filters .form-check-input,
.sidebar .form-check-input{
  -webkit-appearance:none!important;appearance:none!important;
  width:18px!important;height:18px!important;min-width:18px!important;
  border-radius:999px!important;
  border:1.5px solid var(--brand)!important;background:#fff!important;
  cursor:pointer;transition:all .15s;flex-shrink:0!important;
  margin:0!important;vertical-align:middle;position:relative;
  padding:0!important;
}
.widget-filters .checkbox:checked,
.widget-filters .form-check-input:checked,
.sidebar .form-check-input:checked{
  border-color:var(--brand)!important;background:var(--brand)!important;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>')!important;
  background-size:12px!important;background-position:center!important;background-repeat:no-repeat!important;
}

/* Count badge */
.filter-count{margin-left:auto;font-size:.75rem;color:var(--muted);opacity:.6}

/* Temperature inputs — lovable: h-9 bg-background */
.range-filter-hr .range-input-wrap{display:flex;align-items:center;gap:.5rem}
.range-filter-hr .range-input-wrap span{font-size:.75rem;color:var(--muted);white-space:nowrap}
.range-filter-hr .form-control-sm{
  max-width:90px;height:36px;font-size:.875rem;
  border-radius:8px;border:1px solid var(--line);
  padding:.25rem .5rem;background:#f9f7f5!important;
  font-family:var(--font-sans);color:var(--ink);
}
.range-filter-hr .form-control-sm:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px hsl(15 60% 50% / .1);
}

/* Category page header — lovable style */
.cat-page-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:1rem 0 1.5rem;
  background:hsl(30 20% 95%);
  margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);
  padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);
}
.cat-page-header-left{}
.cat-page-title{font-family:var(--font-serif);font-size:clamp(2rem,4vw,3rem);color:var(--ink);margin:0;font-weight:inherit;line-height:1.1}
.cat-page-count{font-family:var(--font-sans);font-size:.875rem;color:var(--muted);margin:.25rem 0 0}
.cat-page-header-right{display:flex;gap:.25rem}
.viewmode-btn{
  padding:.5rem;border-radius:8px;border:1px solid var(--line);
  background:transparent;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.viewmode-btn:hover,.viewmode-btn.is-active{background:hsl(30 20% 95%);color:var(--ink)}

/* ===== TOOLBAR ===== */
.toolbar-top{margin-bottom:1rem}
.advbar-wide{display:flex;align-items:center;gap:.75rem;padding-bottom:.75rem;border-bottom:1px solid var(--line)}
.advbar-wide #resultCount{font-family:var(--font-sans);font-size:.875rem;color:var(--muted);margin-right:auto}
.advbar-wide .shop-filters-viewmode{display:flex;gap:.25rem}
.advbar-wide .shop-filters-viewmode .btn{padding:.375rem;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);transition:all .2s}
.advbar-wide .shop-filters-viewmode .btn.is-active,.advbar-wide .shop-filters-viewmode .btn:hover{background:hsl(30 20% 95%);color:var(--ink);border-color:var(--line)}
.advbar-wide .shop-filters-viewmode .btn svg{width:16px;height:16px}
.advbar-wide .shop-filters-viewmode .small{display:none}
.advbar-wide .sorter{min-width:180px}
.advbar-wide .sorter .form-select,.resorter{
  font-family:var(--font-sans);font-size:.875rem;border-radius:999px;
  border:1px solid var(--line);padding:.375rem 2.5rem .375rem 1rem;
  background:transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%237a6e63" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') right .75rem center/16px no-repeat;
  color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;
}
.advbar-wide .sorter .form-select:focus,.resorter:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px hsl(15 60% 50% / .1);
}
.advbar-wide .sorter .form-select option,.resorter option{
  font-family:var(--font-sans);font-size:.875rem;
  padding:.5rem;background:#fff;color:var(--ink);
}

/* Subcategory pills */
.cat-pills{margin-bottom:1.5rem}
.cat-pills .pill-label{font-family:var(--font-sans);font-size:.875rem;font-weight:500;color:var(--muted)}
.cat-pills .btn{border-radius:999px;font-family:var(--font-sans);font-size:.875rem;border-color:hsl(15 60% 50% / .3);color:var(--brand);padding:.375rem 1rem;transition:all .2s}
.cat-pills .btn:hover,.cat-pills .btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Toolbar chips */
.toolbar{display:flex;align-items:center;gap:.5rem;padding:.5rem 0}
.toolbar .chips{display:flex;flex-wrap:wrap;gap:.375rem}

/* ===== PRODUCT GRID ===== */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;position:relative;z-index:1}
@media(max-width:1199.98px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767.98px){.grid{grid-template-columns:repeat(2,1fr)}}

.prod{background:hsl(30 20% 95%);border:none;border-radius:16px;overflow:hidden;transition:box-shadow .3s;display:flex;flex-direction:column}
.prod:hover{box-shadow:0 8px 24px rgba(0,0,0,.06)}
.prod .thumb{aspect-ratio:1/1;padding:0;background:#fff;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.prod .thumb-wrap{position:relative}
.prod .thumb img{width:95%;height:95%;object-fit:contain;transition:transform .5s ease;margin:auto;display:block}
.prod:hover .thumb img{transform:scale(1.05)}
.prod .body{padding:.75rem 1rem 1rem;display:flex;flex-direction:column;flex:1}

/* Brand label */
.prod .brand{font-family:var(--font-sans);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.25rem}

/* Product title */
.prod .p-title{font-family:var(--font-sans);font-size:.875rem;font-weight:500;color:var(--ink);line-height:1.4;min-height:2.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.prod:hover .p-title,.prod .p-title:hover{color:var(--brand)}
.prod .p-title a{color:inherit;text-decoration:none}

/* Temperature */
.prod .delivery{font-family:var(--font-sans);font-size:.75rem;color:var(--muted);margin-bottom:.5rem}

/* Price */
.prod .price{font-weight:700}
.price-stack{margin-left:auto;text-align:right;white-space:nowrap}
.price-stack .incvat{font-family:var(--font-sans);font-size:1.125rem;font-weight:700;color:var(--ink);line-height:1.2}
.price-stack .exvat{font-family:var(--font-sans);font-size:.75rem;color:var(--muted)}
.price-stack .oldprice{color:var(--muted);font-size:.8rem;text-decoration:line-through;display:inline-block;margin-right:.25rem}

/* Badge */
.prod .badge-ribbon{position:absolute;top:.5rem;left:.5rem;background:var(--brand);color:#fff;font-weight:700;padding:.25rem .5rem;border-radius:8px;font-size:.7rem;z-index:2}

/* Add to cart button on product card */
.prod .prod-cart-btn{
  position:absolute;bottom:.75rem;right:.75rem;
  width:36px;height:36px;border-radius:999px!important;
  background:var(--brand)!important;color:#fff!important;border:none!important;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  cursor:pointer;transition:all .2s;z-index:2;
  text-decoration:none;padding:0;
}
.prod .prod-cart-btn:hover{background:var(--brand-hover)!important;transform:scale(1.05);color:#fff!important}
.prod .prod-cart-btn svg{width:16px;height:16px;flex-shrink:0}

/* Tooltip left — white like lovable */
.prod .prod-cart-btn::before{
  content:attr(title);
  position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:#fff;color:var(--ink);
  font-family:var(--font-sans);font-size:.75rem;font-weight:500;
  padding:.35rem .65rem;border-radius:6px;white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  opacity:0;pointer-events:none;transition:opacity .15s;
}
.prod .prod-cart-btn:hover::before{opacity:1}

/* List view cart button */
.grid.list-view .prod .thumb-wrap{position:relative}
.grid.list-view .prod .prod-cart-btn{bottom:.5rem;right:.5rem}

/* Meta row — pushed to bottom */
.prod .meta{display:flex;justify-content:space-between;align-items:flex-end;gap:.5rem;margin-top:auto;padding-top:.5rem}

/* LIST VIEW */
.grid.list-view{grid-template-columns:1fr}
.grid.list-view .prod{display:flex;flex-direction:row;border-radius:16px}
.grid.list-view .prod .thumb{aspect-ratio:1/1;width:120px;min-width:120px;padding:0;flex-shrink:0;border-radius:16px 0 0 16px}
.grid.list-view .prod .body{flex:1;display:flex;flex-direction:column;justify-content:center}
@media(max-width:575.98px){.grid.list-view .prod .thumb{width:90px;min-width:90px}}

/* ===== FILTER WIDGETS ===== */
.advfilter{position:relative}
.advfilter .FilterTitle{font-family:var(--font-sans);font-weight:700;margin-bottom:.35rem;color:var(--ink);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.price-input{display:inline-flex;align-items:center;gap:.35rem}
.price-input span{font-size:.875rem;color:var(--muted)}

/* Range slider */
.range-slider{position:relative;height:7px;background:var(--line);border-radius:999px;margin:8px 0;cursor:pointer}
.range-slider .bar{position:absolute;height:7px;background:var(--brand);border-radius:999px;top:0}
.range-slider .range-slider-leftgrip,.range-slider .range-slider-rightgrip{position:absolute;width:18px;height:18px;border-radius:999px;background:#fff;border:2px solid var(--brand);top:50%;margin-top:-9px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.1)}

/* Like-select dropdown */
.filter-box{background:transparent;border:none;padding:0}
.likeselect{position:relative}
.likeselect .hodnoty{position:absolute;inset:auto 0 auto 0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.08);padding:.5rem;display:none;z-index:1030}
.likeselect.open .hodnoty{display:block;max-height:250px;overflow-y:auto;overflow-x:hidden}
.likeselect .form-check{display:flex;align-items:center;gap:.5rem;padding:.375rem .375rem;margin:0;font-family:var(--font-sans);font-size:.875rem;color:var(--muted);cursor:pointer;border-radius:8px;transition:background .15s}
.likeselect .form-check:hover{background:hsl(30 20% 95%)}
.likeselect .form-check-input{margin-top:0}

/* Range filter (temperature etc.) — use new styles above */

/* Category icon in tree */
.cat-tree .cat-icon{width:18px;height:18px}

/* Responsive */
@media(max-width:991.98px){
  .submenu{position:static;box-shadow:none;margin-left:0;border-left:1px solid var(--line);padding-left:.75rem}
  .has-children>a::after{display:none}
}

.p-title{min-height:2.5rem}

/* Filter list — show/hide items beyond 5 */
.filter-list li.filter-hidden{display:none!important}
.filter-list.is-expanded li.filter-hidden{display:flex!important}