/* =====================================================================
   Skomø — Produktkategori-skabelon (WooCommerce / Elementor Pro)
   Paste into your child theme stylesheet, or Elementor → Site Settings →
   Custom CSS. Add the matching CSS class to each Elementor widget
   (Advanced → CSS Classes) as noted in README.md.

   Locked config: chips subnav · accent #EF1923 · shop mode · 4 columns.
   ===================================================================== */

:root{
  --sk-accent:#EF1923;
  --sk-accent-dark:#C9141D;
  --sk-ink:#0B0B0D;
  --sk-ink-2:#15171A;
  --sk-body:#5B5B5B;
  --sk-body-2:#6B6B6B;
  --sk-muted:#9A9A9A;
  --sk-eyebrow:#A2A2A2;
  --sk-bg:#F4F4F4;
  --sk-card-border:#ECECEC;
  --sk-hairline:#EBEBEB;
  --sk-success:#1C6B4A;
  --sk-radius-card:18px;
  --sk-radius-pop:16px;
  --sk-shadow-hover:0 18px 44px rgba(11,11,13,.13);
  --sk-shadow-pop:0 20px 50px rgba(11,11,13,.16);
  --sk-maxw:1280px;
  --sk-pad:28px;
  --sk-font-display:'Sora',-apple-system,BlinkMacSystemFont,sans-serif;
  --sk-font-ui:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ------- Containers ------- */
.skomo-cat-head,
.skomo-subbar > .e-con-inner,
.skomo-toolbar{ max-width:var(--sk-maxw); margin-inline:auto; }

/* =====================================================================
   1. CATEGORY HEADER
   ===================================================================== */
.skomo-crumbs{ font-family:var(--sk-font-ui); font-size:13px; color:var(--sk-muted); }
.skomo-crumbs a{ color:var(--sk-muted); text-decoration:none; }
.skomo-crumbs a:hover{ color:var(--sk-ink-2); }
.skomo-crumbs .last,
.skomo-crumbs [aria-current]{ color:var(--sk-ink-2); font-weight:600; }

.skomo-cat-title{
  font-family:var(--sk-font-display); font-weight:800;
  font-size:clamp(32px,4.4vw,48px); letter-spacing:-.025em;
  line-height:1.02; color:var(--sk-ink); margin:0;
}
.skomo-cat-intro{
  font-family:var(--sk-font-ui); font-size:16.5px; line-height:1.6;
  color:var(--sk-body); max-width:640px; text-wrap:pretty;
}

/* trust badges */
.skomo-trust{ display:flex; gap:10px; flex-wrap:wrap; }
.skomo-trust__item{
  display:flex; align-items:center; gap:8px;
  background:var(--sk-bg); border-radius:999px; padding:10px 16px;
  font-family:var(--sk-font-ui); font-size:13.5px; font-weight:600; color:#2A2D31;
}
.skomo-trust__item svg,
.skomo-trust__item i{ color:var(--sk-accent); }

/* =====================================================================
   2. STICKY SUBCATEGORY CHIPS + TOOLBAR
   ===================================================================== */
.skomo-subbar{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-top:1px solid #EFEFEF; border-bottom:1px solid var(--sk-hairline);
}

/* chip row */
.skomo-chips{
  display:flex; gap:10px; overflow-x:auto; padding:16px 0;
  scrollbar-width:none;
  /* !important: Elementor-kittets --flex-wrap-mobile:wrap slår ellers igennem på
     mobil, så knapperne ombrydes i mange rækker. Målt 654 px høj sticky bjælke på
     en 430 px skærm (browser-test 2026-08-02) = ~70 % af skærmen under scroll.
     Samme fælde som mobilheaderen i juli — den skal scrolle vandret, ikke ombryde. */
  flex-wrap:nowrap !important;
}
.skomo-chips > *{ flex:0 0 auto; }
/* Blød udtoning i højre kant som tegn på, at der er flere kategorier at scrolle til.
   Styres af klassen .has-more, som JS sætter når der FAKTISK er skjult indhold —
   så den gælder alle skærmbredder (også desktop, hvor scrollbaren er skjult) og
   slukker, når man har scrollet helt til enden. */
.skomo-subbar > .e-con-inner{ position:relative; }
.skomo-subbar > .e-con-inner::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:34px;
  background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.95));
  pointer-events:none; opacity:0; transition:opacity .18s ease;
}
.skomo-subbar > .e-con-inner.has-more::after{ opacity:1; }
.skomo-chips::-webkit-scrollbar{ display:none; }

/* a single chip (Taxonomy Filter term / Loop term / link) */
.skomo-chip,
.skomo-chips a,
.skomo-chips .e-filter-item{
  flex:0 0 auto; cursor:pointer; white-space:nowrap;
  font-family:var(--sk-font-ui); font-weight:600; font-size:14px;
  padding:10px 16px; border-radius:999px;
  border:1px solid #E2E2E2; background:#fff; color:#2A2D31;
  display:inline-flex; align-items:center; gap:8px;
  transition:all .15s ease; text-decoration:none;
}
.skomo-chip:hover,
.skomo-chips a:hover{ border-color:#CFCFCF; }

.skomo-chip.is-active,
.skomo-chips .e-filter-item[aria-pressed="true"],
.skomo-chips .chosen,
.skomo-chips .current-cat > a{
  background:var(--sk-ink-2); color:#fff; border-color:var(--sk-ink-2);
}
.skomo-chip__count,
.skomo-chip .count{ font-size:12px; font-weight:600; color:#B4B4B4; }
.skomo-chip.is-active .skomo-chip__count{ color:rgba(255,255,255,.55); }

/* toolbar row */
.skomo-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:16px 0; flex-wrap:wrap;
}
.skomo-count{ font-family:var(--sk-font-ui); font-size:14px; color:var(--sk-body-2); }
.skomo-count strong, .skomo-count .count{ color:var(--sk-ink-2); font-weight:700; }

/* filter + sort buttons (pill style) */
.skomo-filter-btn,
.skomo-sort,
.skomo-toolbar select{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--sk-font-ui); font-weight:600; font-size:14px;
  padding:10px 15px; border-radius:999px;
  background:#fff; border:1.5px solid #DADADA; color:var(--sk-ink-2);
  transition:all .15s ease; appearance:none;
}
.skomo-filter-btn:hover,
.skomo-sort:hover,
.skomo-toolbar select:hover{ border-color:var(--sk-ink-2); }
/* active/has-selection filter button */
.skomo-filter-btn.has-value,
.skomo-filter-btn[aria-expanded="true"]{
  border-color:var(--sk-accent); color:var(--sk-accent);
}

/* filter dropdown / popover panel */
.skomo-pop,
.e-filter__dropdown,
.elementor-widget-woocommerce-product-filter .dropdown{
  background:#fff; border:1px solid var(--sk-card-border);
  border-radius:var(--sk-radius-pop); box-shadow:var(--sk-shadow-pop);
  padding:10px; min-width:240px;
}
.skomo-pop label{
  display:flex; align-items:center; gap:12px; padding:11px 12px;
  border-radius:10px; font-family:var(--sk-font-ui); font-size:14.5px;
  color:#2A2D31; cursor:pointer;
}
.skomo-pop label:hover{ background:#F6F6F6; }
/* custom checkbox fill in accent */
.skomo-pop input[type="checkbox"]{ accent-color:var(--sk-accent); width:18px; height:18px; }

/* active-filter chips ("Materiale: Aluminium ✕") + clear all */
.skomo-activechips{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding-bottom:16px; }
.skomo-activechip,
.skomo-activechips .e-active-filters__item{
  display:inline-flex; align-items:center; gap:8px;
  background:#F0F0F0; border-radius:999px; padding:7px 8px 7px 14px;
  font-family:var(--sk-font-ui); font-size:13px; font-weight:600; color:#2A2D31;
}
.skomo-activechip button,
.skomo-activechips .remove{
  width:20px; height:20px; border-radius:999px; border:none; cursor:pointer;
  background:#DADADA; color:#444; display:flex; align-items:center; justify-content:center;
}
.skomo-activechip button:hover{ background:var(--sk-ink-2); color:#fff; }
.skomo-clear,
.skomo-activechips .clear-all{
  background:none; border:none; cursor:pointer; padding:6px 4px;
  font-family:var(--sk-font-ui); font-size:13px; font-weight:600;
  color:var(--sk-accent); text-decoration:underline; text-underline-offset:3px;
}

/* =====================================================================
   3. PRODUCT GRID + CARD  (Elementor Loop Grid → Loop Item)
   Style via the custom classes you add to the Loop Item widgets.
   A second block below covers the NATIVE WooCommerce Products widget.
   ===================================================================== */
.skomo-card{
  position:relative; background:#fff; border:1px solid var(--sk-card-border);
  border-radius:var(--sk-radius-card); overflow:hidden;
  display:flex; flex-direction:column; height:100%;
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.skomo-card:hover{ box-shadow:var(--sk-shadow-hover); transform:translateY(-4px); border-color:#E2E2E2; }

.skomo-card__media{
  position:relative; aspect-ratio:4/3; background:var(--sk-bg);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.skomo-card__media img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }

/* badge (top-left) */
.skomo-badge{
  position:absolute; top:13px; left:13px; z-index:2;
  font-family:var(--sk-font-ui); font-weight:700; font-size:11px;
  letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:999px;
}
.skomo-badge--nyhed{ background:var(--sk-accent); color:#fff; }
.skomo-badge--tilbud{ background:var(--sk-ink-2); color:#fff; }
.skomo-badge--bestseller{ background:#fff; color:var(--sk-ink-2); border:1px solid var(--sk-ink-2); }

/* wishlist (top-right) */
.skomo-wish{
  position:absolute; top:11px; right:11px; z-index:2;
  width:34px; height:34px; border-radius:999px; border:none; cursor:pointer;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.09); color:var(--sk-ink-2);
}
.skomo-wish:hover{ background:#fff; }
.skomo-wish.is-active{ color:var(--sk-accent); }

/* body */
.skomo-card__body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:7px; flex:1; }
.skomo-eyebrow{
  font-family:var(--sk-font-ui); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--sk-eyebrow);
}
.skomo-card__title,
.skomo-card__title a{
  font-family:var(--sk-font-display); font-weight:600; font-size:16px;
  line-height:1.32; color:var(--sk-ink-2); margin:0; text-decoration:none; text-wrap:pretty;
}
.skomo-spec{ font-family:var(--sk-font-ui); font-size:13px; color:#777; }

.skomo-price{
  font-family:var(--sk-font-display); font-weight:700; font-size:19px;
  color:var(--sk-ink-2); margin-top:auto; padding-top:10px;
}
.skomo-price del{ font-family:var(--sk-font-ui); font-weight:400; font-size:13px; color:#A6A6A6; margin-left:8px; }
.skomo-price ins{ text-decoration:none; }

/* add to cart — black pill, full width */
.skomo-add .button,
.skomo-add a,
a.skomo-add{
  width:100%; border:none; cursor:pointer; text-align:center; text-decoration:none;
  font-family:var(--sk-font-ui); font-weight:600; font-size:14px;
  padding:13px 16px; border-radius:999px;
  background:var(--sk-ink-2); color:#fff; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:filter .15s ease, transform .1s ease; margin-top:12px;
}
.skomo-add .button:hover, a.skomo-add:hover{ filter:brightness(1.1); }
.skomo-add .button:active, a.skomo-add:active{ transform:translateY(1px); }
.skomo-add .added,
.skomo-add .button.added{ background:var(--sk-success); }

/* load more */
.skomo-loadmore a,
.skomo-loadmore button,
.elementor-button.skomo-loadmore{
  display:inline-block; cursor:pointer; text-decoration:none;
  font-family:var(--sk-font-ui); font-weight:600; font-size:15px;
  padding:14px 30px; border-radius:999px;
  background:#fff; border:1.5px solid var(--sk-ink-2); color:var(--sk-ink-2);
  transition:all .15s ease;
}
.skomo-loadmore a:hover{ background:var(--sk-ink-2); color:#fff; }

/* =====================================================================
   4. NATIVE WOOCOMMERCE PRODUCTS WIDGET — fallback overrides
   Use only if you build the grid with the default Woo "Products" widget
   instead of a custom Elementor Loop Item.
   ===================================================================== */
.woocommerce ul.products{ gap:22px; }
.woocommerce ul.products li.product{
  background:#fff; border:1px solid var(--sk-card-border);
  border-radius:var(--sk-radius-card); overflow:hidden; padding:0;
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.woocommerce ul.products li.product:hover{ box-shadow:var(--sk-shadow-hover); transform:translateY(-4px); }
.woocommerce ul.products li.product > a img{
  aspect-ratio:4/3; object-fit:contain; background:var(--sk-bg); padding:20px; margin:0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--sk-font-display); font-weight:600; font-size:16px;
  color:var(--sk-ink-2); padding:14px 16px 0;
}
.woocommerce ul.products li.product .price{
  font-family:var(--sk-font-display); font-weight:700; font-size:19px;
  color:var(--sk-ink-2); padding:0 16px;
}
.woocommerce ul.products li.product .price del{ color:#A6A6A6; font-weight:400; font-size:13px; }
/* restyle the native sale flash into the "Tilbud" pill */
.woocommerce span.onsale{
  background:var(--sk-ink-2); color:#fff; border-radius:999px;
  font-family:var(--sk-font-ui); font-weight:700; font-size:11px;
  letter-spacing:.04em; text-transform:uppercase; min-height:0; min-width:0;
  padding:5px 11px; top:13px; left:13px; margin:0;
}
/* add-to-cart pill */
.woocommerce ul.products li.product .button{
  width:calc(100% - 32px); margin:12px 16px 18px; border-radius:999px;
  background:var(--sk-ink-2); color:#fff; font-family:var(--sk-font-ui);
  font-weight:600; font-size:14px; padding:13px 16px; text-align:center;
}
.woocommerce ul.products li.product .button:hover{ filter:brightness(1.1); background:var(--sk-ink-2); }

/* =====================================================================
   5. CTA BANNER ("Skal vi tage en snak?") — if rebuilt here
   ===================================================================== */
.skomo-cta{
  background:var(--sk-ink); border-radius:26px; padding:48px 52px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap;
}
.skomo-cta h2{ font-family:var(--sk-font-display); font-weight:800; font-size:clamp(26px,3.2vw,36px); letter-spacing:-.02em; margin:0; }
.skomo-cta p{ font-family:var(--sk-font-ui); font-size:16px; line-height:1.6; color:#B9BABE; margin:14px 0 0; }
.skomo-cta .btn-primary{ background:var(--sk-accent); color:#fff; border-radius:999px; padding:15px 28px; font-weight:600; }
.skomo-cta .btn-ghost{ background:transparent; color:#fff; border:1.5px solid #3A3B40; border-radius:999px; padding:15px 28px; font-weight:600; }

/* =====================================================================
   6. RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .skomo-subbar > .e-con-inner, .skomo-toolbar, .skomo-cat-head{ padding-inline:18px; }
}
@media (max-width:860px){
  .skomo-toolbar{ flex-wrap:wrap; row-gap:14px; }
}
@media (max-width:560px){
  .skomo-cat-title{ font-size:30px; }
  /* keep add-to-cart tap target >= 44px */
  .skomo-add .button, a.skomo-add{ padding:14px 16px; }
}

/* === skomo chips product-categories (claude 2026-06-29): style WC Product Categories widget as horizontal pills === */
.skomo-chips .product-categories{ list-style:none; margin:0; padding:0; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.skomo-chips .product-categories li{ margin:0; padding:0; }
.skomo-chips .product-categories li::marker{ content:""; }
.skomo-chips .product-categories li a{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-family:'Inter',sans-serif; font-weight:600; font-size:14px; line-height:1; padding:9px 15px; border-radius:999px; border:1px solid #E2E2E2; background:#fff; color:#2A2D31; transition:all .15s ease; white-space:nowrap; }
.skomo-chips .product-categories li a:hover{ border-color:#CFCFCF; }
.skomo-chips .product-categories li.current-cat>a{ background:#15171A; color:#fff; border-color:#15171A; }
.skomo-chips .product-categories .count{ font-size:12px; color:#B4B4B4; font-weight:600; }
.skomo-chips .product-categories ul.children{ display:none; }