/* public/shop.css
   Delad stil för startsidan och produktsidan: produktkort, favoritknappar,
   favoritpanelen, "senast visade", filterpanelen med prisreglage och skeletons.
   Använder samma CSS-variabler (--ink, --card, --shield ...) som sidorna själva. */

/* ---------- Produktkort (samma utseende på startsidan och produktsidan) ---------- */
.product-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;position:relative;}
.product-card .product-link{display:block;}
.product-card .product-thumb{aspect-ratio:1;background:#f5f7f5;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.product-card .product-thumb img{width:100%;height:100%;object-fit:cover;}
.product-card .sale-badge{
  position:absolute;top:10px;left:10px;z-index:2;background:#d92d20;color:#fff;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.82rem;padding:4px 9px;border-radius:20px;
}
.product-card .product-body{padding:14px 16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.product-card .product-body h3{font-size:0.92rem;font-family:'IBM Plex Sans',sans-serif;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;}
.product-card .product-price-row{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.product-card .product-price{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.1rem;color:var(--shield);}
.product-card .product-price.sale{color:#d92d20;}
.product-card .product-price.out{color:var(--ink-soft);font-size:0.85rem;font-weight:500;font-family:'IBM Plex Sans',sans-serif;}
.product-card .original-price{color:var(--ink-soft);text-decoration:line-through;font-size:0.85rem;margin-right:6px;}
.product-card .product-offers-count{font-size:0.75rem;color:var(--ink-soft);white-space:nowrap;}
.product-card .product-btn{
  display:block;text-align:center;background:var(--alert);color:#fff;border:none;padding:10px;border-radius:var(--radius);
  font-weight:600;font-size:0.88rem;cursor:pointer;font-family:'IBM Plex Sans',sans-serif;width:100%;
}
.product-card .product-btn:hover{background:var(--alert-dark);}
.product-card .product-btn:disabled{background:#c9d0cd;cursor:not-allowed;}
.grid-empty{grid-column:1/-1;color:var(--ink-soft);padding:24px 0;margin:0;}

/* ---------- Hjärtknapp (på kort och produktbild) ---------- */
.fav-btn{
  position:absolute;top:10px;right:10px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,0.94);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:color .15s ease,transform .15s ease,border-color .15s ease;
}
.fav-btn:hover{color:#d92d20;border-color:#d92d20;transform:scale(1.06);}
.fav-btn:focus-visible,.shop-drawer-close:focus-visible,.fav-remove:focus-visible,.fav-header-btn:focus-visible{outline:2px solid var(--shield);outline-offset:2px;}
.fav-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;}
.fav-btn[aria-pressed="true"]{color:#d92d20;border-color:#d92d20;}
.fav-btn[aria-pressed="true"] svg{fill:currentColor;}

/* ---------- Hjärtat i headern ---------- */
.fav-header-btn{
  position:relative;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:border-color .15s ease,color .15s ease;
}
.fav-header-btn:hover{border-color:#d92d20;color:#d92d20;}
.fav-header-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;}
.fav-count{
  position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:#d92d20;color:#fff;font-size:0.72rem;font-weight:700;line-height:20px;text-align:center;
  font-family:'Space Grotesk',sans-serif;
}
.fav-count[hidden]{display:none;}

/* ---------- Favoritpanelen ---------- */
html.shop-lock{overflow:hidden;}
.shop-overlay{position:fixed;inset:0;background:rgba(16,26,46,0.5);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:100;}
.shop-overlay.open{opacity:1;pointer-events:auto;}
.shop-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--bg);z-index:101;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;
  box-shadow:-8px 0 32px rgba(16,26,46,0.18);visibility:hidden;
}
.shop-drawer.open{transform:translateX(0);visibility:visible;}
.shop-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);background:var(--card);}
.shop-drawer-head h2{font-size:1.15rem;}
.shop-drawer-close{width:36px;height:36px;border-radius:50%;border:none;background:transparent;color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;}
.shop-drawer-close:hover{background:var(--bg);}
.shop-drawer-body{flex:1;overflow-y:auto;padding:12px 20px;}
.shop-drawer-foot{padding:14px 20px;border-top:1px solid var(--line);background:var(--card);}
.shop-drawer-foot[hidden],.shop-drawer-foot [hidden]{display:none;}
.shop-link-btn{background:none;border:none;color:var(--ink-soft);font-size:0.85rem;font-weight:600;cursor:pointer;padding:0;font-family:'IBM Plex Sans',sans-serif;}
.shop-link-btn:hover{color:#d92d20;text-decoration:underline;}
.shop-drawer-loading{color:var(--ink-soft);font-size:0.92rem;padding:16px 0;}
.shop-drawer-empty{text-align:center;color:var(--ink-soft);padding:56px 12px;}
.shop-drawer-empty p{margin:6px 0;font-size:0.92rem;}
.shop-drawer-empty strong{color:var(--ink);}
.shop-drawer-empty-icon{width:56px;height:56px;border-radius:50%;background:var(--card);border:1px solid var(--line);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#d92d20;}
.shop-drawer-empty-icon svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;width:26px;height:26px;}
.fav-list{list-style:none;margin:0;padding:0;}
.fav-row{display:grid;grid-template-columns:72px 1fr 32px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);}
.fav-row-img{width:72px;height:72px;border-radius:6px;overflow:hidden;background:#f5f7f5;border:1px solid var(--line);display:block;}
.fav-row-img img{width:100%;height:100%;object-fit:cover;}
.fav-row-title{font-size:0.88rem;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.fav-row-title:hover{color:var(--shield);}
.fav-row-price{margin-top:4px;font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--shield);}
.fav-row-price .sale{color:#d92d20;}
.fav-row-price .out{color:var(--ink-soft);font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:0.85rem;}
.fav-row-price .original-price{color:var(--ink-soft);text-decoration:line-through;font-size:0.82rem;font-weight:400;}
.fav-remove{width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--ink-soft);font-size:1.4rem;line-height:1;cursor:pointer;}
.fav-remove:hover{background:var(--card);color:#d92d20;}

/* ---------- Senast visade / fler produkter (rad som kan svepas i sidled) ---------- */
.recent-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
.recent-head h2{font-size:1.4rem;}
.hscroll{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;}
.extra-section{padding:8px 0 40px;}
.extra-section h2{font-size:1.3rem;margin-bottom:18px;}

/* ---------- Lista med filterpanel ---------- */
.listing-layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;margin-top:8px;}
.listing-layout[hidden]{display:none;}
.listing-main{min-width:0;}
.listing-main .product-grid{grid-template-columns:repeat(3,1fr);}
.listing-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.filters-toggle{
  display:none;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 14px;font-weight:600;font-size:0.88rem;color:var(--ink);cursor:pointer;font-family:'IBM Plex Sans',sans-serif;
}
.sort-label{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--ink-soft);margin-left:auto;}
.sort-label select{
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;font-size:0.88rem;
}
.filters{
  background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px;
  position:sticky;top:96px;
}
.filters-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;}
.filters-head h3{font-size:1.05rem;}
.filter-group{padding:16px 0;border-top:1px solid var(--line);}
.filter-group:first-of-type{border-top:none;padding-top:0;}
.filter-group h4{font-size:0.88rem;font-family:'IBM Plex Sans',sans-serif;font-weight:600;margin:0 0 14px;}
.filter-check{display:flex;align-items:center;gap:10px;font-size:0.9rem;cursor:pointer;}
.filter-check input{width:18px;height:18px;accent-color:var(--shield);cursor:pointer;}
.filter-check[hidden]{display:none;}
.price-inputs{display:flex;align-items:center;gap:8px;margin-top:14px;}
.price-inputs label{flex:1;font-size:0.72rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:4px;}
.price-inputs input{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);font-size:0.9rem;
  font-family:'IBM Plex Sans',sans-serif;color:var(--ink);background:#fff;
}
.price-inputs input:disabled{background:var(--bg);color:var(--ink-soft);}
.price-inputs .dash{color:var(--ink-soft);padding-top:18px;}

/* Dubbelt prisreglage: två överlagrade range-inputs med eget spår */
.range-slider{position:relative;height:28px;margin:4px 11px 0;}
.range-track,.range-fill{position:absolute;top:50%;height:4px;margin-top:-2px;border-radius:2px;}
.range-track{left:0;right:0;background:var(--line);}
.range-fill{background:var(--shield);left:0;width:100%;}
.range-input{
  position:absolute;left:-11px;width:calc(100% + 22px);top:0;height:28px;margin:0;background:none;
  pointer-events:none;-webkit-appearance:none;appearance:none;
}
.range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;height:28px;}
.range-input::-moz-range-track{background:transparent;height:28px;}
.range-input::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;box-sizing:border-box;width:22px;height:22px;margin-top:3px;border-radius:50%;
  background:#fff;border:2px solid var(--shield);box-shadow:0 1px 4px rgba(16,26,46,0.25);cursor:grab;
}
.range-input::-moz-range-thumb{
  pointer-events:auto;box-sizing:border-box;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--shield);
  box-shadow:0 1px 4px rgba(16,26,46,0.25);cursor:grab;
}
.range-input:active::-webkit-slider-thumb{cursor:grabbing;}
.range-input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--shield);outline-offset:2px;}
.range-input:focus-visible::-moz-range-thumb{outline:2px solid var(--shield);outline-offset:2px;}
.range-input:disabled::-webkit-slider-thumb{border-color:var(--line);cursor:not-allowed;}
.range-input:disabled::-moz-range-thumb{border-color:var(--line);cursor:not-allowed;}
.range-slider.is-disabled .range-fill{background:var(--line);}

/* ---------- Laddningsskelett ---------- */
.skel .product-thumb{background:linear-gradient(90deg,#eef1f6 25%,#e3e8f1 37%,#eef1f6 63%);background-size:400% 100%;animation:shop-shimmer 1.4s ease infinite;}
.skel-line{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,#eef1f6 25%,#e3e8f1 37%,#eef1f6 63%);background-size:400% 100%;animation:shop-shimmer 1.4s ease infinite;}
.skel-line.short{width:55%;}
@keyframes shop-shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
@media (prefers-reduced-motion:reduce){
  .skel .product-thumb,.skel-line{animation:none;}
  .shop-drawer,.shop-overlay{transition:none;}
}

/* ---------- Mobil ---------- */
@media(max-width:920px){
  .fav-header-btn{order:1;}
  .menu-toggle{order:2;}
  .listing-layout{grid-template-columns:1fr;gap:0;}
  .filters{display:none;position:static;margin-bottom:16px;}
  .filters.open{display:block;}
  .filters-toggle{display:inline-flex;}
  .listing-main .product-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .listing-main .product-grid{grid-template-columns:1fr 1fr;}
  .hscroll{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fav-btn{width:34px;height:34px;top:8px;right:8px;}
  .fav-btn svg{width:18px;height:18px;}
}

@media(min-width:561px) and (max-width:920px){.hscroll{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* Smala kort (6 i rad): håll priset på en rad, låt "x butiker" hamna under vid behov */
.product-card .product-price,.product-card .original-price{white-space:nowrap;}
.product-card .product-price-row{flex-wrap:wrap;gap:2px 8px;}

/* ---------- Sökförslag (search.js) ---------- */
.search-form{position:relative;}
.suggest-box{
  position:absolute;top:calc(100% + 8px);right:0;width:min(460px,92vw);max-height:min(70vh,560px);overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 36px rgba(16,26,46,0.18);z-index:80;
  text-align:left;
}
.suggest-box[hidden]{display:none;}
.suggest-chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 4px;}
.suggest-chip{background:#eef2fa;border:1px solid var(--line);color:var(--shield);font-size:0.82rem;font-weight:600;padding:5px 12px;border-radius:16px;text-decoration:none;}
.suggest-chip:hover,.suggest-chip.active{background:var(--shield);color:#fff;border-color:var(--shield);}
.suggest-list{padding:6px 6px 0;}
.suggest-item{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:8px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:400;}
.suggest-item:hover,.suggest-item.active{background:#eef2fa;}
.suggest-thumb{width:44px;height:44px;border-radius:6px;background:#f5f7f5;overflow:hidden;display:block;}
.suggest-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.suggest-title{font-size:0.86rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.suggest-title mark{background:#ffe08a;color:inherit;border-radius:2px;padding:0 1px;}
.suggest-price{font-size:0.85rem;white-space:nowrap;text-align:right;}
.suggest-price s{color:var(--ink-soft);font-size:0.75rem;margin-right:4px;}
.suggest-price .sale{color:#d92d20;}
.suggest-all{display:block;padding:12px 14px;margin-top:4px;border-top:1px solid var(--line);font-size:0.86rem;font-weight:600;color:var(--shield);text-decoration:none;text-align:center;}
.suggest-all:hover,.suggest-all.active{background:#eef2fa;}
.suggest-empty{padding:16px;color:var(--ink-soft);font-size:0.88rem;}
@media(max-width:920px){
  .search-form .suggest-box{left:0;right:0;width:auto;max-height:60vh;}
}