/* Harmonija Storefront — Modern Wide
 * Migrated from legacy 69-mu-modern-wide-global.php.
 * Public mu-* class names are intentionally preserved for compatibility.
 */

/* ===== Layout: enaka širina za glavo/vsebino/nogo (Storefront uporablja .col-full) ===== */
body.mu-modern-wide .col-full{max-width:1600px;}
body.mu-modern-wide .site-content{padding-top:0;}

/* Odstrani 2-stolpčni "okvir/črto" (Storefront) */
body.mu-modern-wide #secondary{display:none!important;}
body.mu-modern-wide #primary,
body.mu-modern-wide .content-area,
body.mu-modern-wide .site-main{float:none!important;width:100%!important;margin:0!important;border:0!important;box-shadow:none!important;}
body.mu-modern-wide .site-content::before,
body.mu-modern-wide .site-content::after,
body.mu-modern-wide #page::before,
body.mu-modern-wide #page::after{display:none!important;}

/* Content wrapper (kot vaša predloga) */
body.mu-modern-wide .mu-modern-content{padding:clamp(1rem,2.2vw,2rem) 0;}
body.mu-modern-wide .mu-modern-content__inner{width:100%;margin:0;max-width:none;padding:0;}
body.mu-modern-wide .mu-modern-content__inner > :first-child{margin-top:0;}
body.mu-modern-wide .mu-modern-content__inner > :last-child{margin-bottom:0;}

/* Skrij privzete archive headerje, ker imamo hero */
body.mu-modern-wide.mu-modern-has-hero .page-header{display:none;}
body.mu-modern-wide.mu-modern-has-hero .woocommerce-products-header{display:none;}

/* ===== HERO (različno za arhive vs izdelek) ===== */
body.mu-modern-wide .mu-modern-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:var(--mu-hero-pad-y) 0;
  color:var(--mu-hero-color);
  --mu-hero-bg: radial-gradient(900px circle at 15% 25%, rgba(99,102,241,.14), transparent 55%),
               radial-gradient(700px circle at 85% 30%, rgba(14,165,233,.12), transparent 55%),
               linear-gradient(180deg, rgba(2,6,23,.03), rgba(255,255,255,1) 60%);
  --mu-hero-overlay: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.92));
  --mu-hero-blur: 0px;
  --mu-hero-scale: 1;
  --mu-hero-bg-opacity: 1;
}

/* Archive hero: manjši padding + pisava, svetlejše */
body.mu-modern-wide .mu-modern-hero.mu-modern-hero--archive{
  --mu-hero-pad-y: clamp(.9rem,1.8vw,1.6rem);
  --mu-hero-title-size: clamp(1.35rem,2.2vw,2.05rem);
  --mu-hero-lead-size: clamp(.95rem,1.05vw,1.05rem);
  --mu-hero-color: #0f172a;
}

/* Product hero: manjši padding + pisava, svetlejše ozadje (še vedno berljivo) */
body.mu-modern-wide .mu-modern-hero.mu-modern-hero--product{
  --mu-hero-pad-y: clamp(1.05rem,2vw,1.9rem);
  --mu-hero-title-size: clamp(1.55rem,2.7vw,2.45rem);
  --mu-hero-lead-size: clamp(.95rem,1.1vw,1.05rem);
  --mu-hero-color: #fff;
  --mu-hero-blur: 2px;
}

/* ozadje (gradient ali slika) */
body.mu-modern-wide .mu-modern-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background: var(--mu-hero-bg);
  background-size: cover;
  background-position: center;
  filter: blur(var(--mu-hero-blur));
  transform: scale(var(--mu-hero-scale));
  opacity: var(--mu-hero-bg-opacity);
}
body.mu-modern-wide .mu-modern-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background: var(--mu-hero-overlay);
}

/* Archive + image: blur slika + svetel "glass" overlay */
body.mu-modern-wide .mu-modern-hero.mu-modern-hero--archive.has-image{
  --mu-hero-bg: var(--mu-hero-bg-image);
  --mu-hero-blur: 1px;
  --mu-hero-scale: 1.02;
  --mu-hero-bg-opacity: .92;
  --mu-hero-overlay: linear-gradient(90deg, rgba(255,255,255,.86), rgba(255,255,255,.62)),
                     radial-gradient(900px circle at 15% 25%, rgba(99,102,241,.10), transparent 55%),
                     radial-gradient(700px circle at 85% 30%, rgba(14,165,233,.10), transparent 55%);
  --mu-hero-color:#0f172a;
}

/* Product + image: blur slika + manj temen overlay (svetlejše kot prej) */
body.mu-modern-wide .mu-modern-hero.mu-modern-hero--product.has-image{
  --mu-hero-bg: var(--mu-hero-bg-image);
  --mu-hero-scale: 1.03;
  --mu-hero-bg-opacity: .90;
  --mu-hero-overlay: linear-gradient(90deg, rgba(2,6,23,.62), rgba(2,6,23,.18)),
                     radial-gradient(900px circle at 18% 25%, rgba(99,102,241,.18), transparent 55%),
                     radial-gradient(700px circle at 85% 30%, rgba(14,165,233,.16), transparent 55%);
}

body.mu-modern-wide .mu-modern-hero__inner{width:100%;margin:0;max-width:none;padding:0;}

/* ===== Heading (thumb + title) ===== */
body.mu-modern-wide .mu-modern-hero__heading{
  display:flex;align-items:center;gap:clamp(.6rem,1.1vw,.95rem);
  flex-wrap:wrap;
}

/* ===== THUMB: radius = 0 ===== */
body.mu-modern-wide .mu-modern-hero__thumb{
  width:56px;height:56px;flex:0 0 auto;
  border-radius:0;overflow:hidden;
  box-shadow:0 10px 28px rgba(2,6,23,.12);
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.10);
}
body.mu-modern-wide .mu-modern-hero__thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* bolj "čisto" na svetlem archive overlayu */
body.mu-modern-wide .mu-modern-hero.mu-modern-hero--archive .mu-modern-hero__thumb{
  border-color:rgba(15,23,42,.10);
  background:rgba(255,255,255,.60);
  box-shadow:0 10px 24px rgba(2,6,23,.10);
}

/* mobilno: manjša sličica */
@media (max-width: 520px){
  body.mu-modern-wide .mu-modern-hero__thumb{width:44px;height:44px;border-radius:0;}
}

/* title */
body.mu-modern-wide .mu-modern-hero__title{
  margin:0;line-height:1.08;font-weight:800;letter-spacing:-.02em;
  font-size:var(--mu-hero-title-size);color:inherit;
}

/* ===== Breadcrumbs pod naslovom ===== */
body.mu-modern-wide .mu-modern-hero__breadcrumbs{margin:.45rem 0 0;max-width:80ch;line-height:1.35;opacity:.88;font-size:clamp(.86rem,.95vw,.95rem);}
body.mu-modern-wide .mu-modern-hero__breadcrumbs nav{margin:0;padding:0;}
body.mu-modern-wide .mu-modern-hero__breadcrumbs .woocommerce-breadcrumb,
body.mu-modern-wide .mu-modern-hero__breadcrumbs .storefront-breadcrumb{margin:0;padding:0;background:transparent;border:0;box-shadow:none;}
body.mu-modern-wide .mu-modern-hero__breadcrumbs a{color:inherit;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;}
body.mu-modern-wide .mu-modern-hero__breadcrumbs a:hover{text-decoration-thickness:2px;}
body.mu-modern-wide .mu-modern-hero__breadcrumbs .mu-bc-sep,
body.mu-modern-wide .mu-modern-hero__breadcrumbs .delimiter,
body.mu-modern-wide .mu-modern-hero__breadcrumbs .separator{display:inline-block;margin:0 .5rem;opacity:.65;}

/* ===== Lead (opis) =====
   NOVO: brez max-width => po celotni širini vsebine */
body.mu-modern-wide .mu-modern-hero__lead{
  margin:.6rem 0 0;
  width:100%;
  max-width:none;
  font-size:var(--mu-hero-lead-size);
  color:inherit;
  opacity:.92;
}
body.mu-modern-wide .mu-modern-hero__lead p:last-child{margin-bottom:0;}

/* ===== Collapsible lead (za product kategorije) ===== */
body.mu-modern-wide .mu-lead-collapsible{
  position:relative;
  width:100%;
  max-width:none;
  margin:.6rem 0 0;
}
body.mu-modern-wide .mu-lead-collapsible .mu-lead-inner{
  font-size:var(--mu-hero-lead-size);
  opacity:.92;
  color:inherit;
}
body.mu-modern-wide .mu-lead-collapsible .mu-lead-inner p:last-child{margin-bottom:0;}

/* Privzeto prikaže manj (bolj pro/kompaktno) */
body.mu-modern-wide .mu-lead-collapsible.is-collapsed .mu-lead-inner{
  max-height:3.35em; /* cca ~2 vrstice (odvisno od line-height) */
  overflow:hidden;
}

/* Fade samo, ko je zloženo */
/* ===== PRO fix: brez belih črt (fade z masko) ===== */

/* odstrani “rezervo” in overlay pristop */
body.mu-modern-wide .mu-lead-collapsible{padding-bottom:0;}
body.mu-modern-wide .mu-lead-collapsible::after{display:none!important;}

/* inner naj bo osnova za masko */
body.mu-modern-wide .mu-lead-collapsible .mu-lead-inner{position:relative;}

/* zloženo: manj teksta + fade brez belega pasu */
body.mu-modern-wide .mu-lead-collapsible.is-collapsed .mu-lead-inner{
  max-height:3.35em; /* cca ~2 vrstice */
  overflow:hidden;

  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

/* razširjeno: masko odstrani */
body.mu-modern-wide .mu-lead-collapsible.is-expanded .mu-lead-inner{
  -webkit-mask-image:none;
  mask-image:none;
}

/* "Prikaži več" naj bo subtilen tekst (brez stalne črte) */
body.mu-modern-wide .mu-lead-toggle{
  position:relative;
  z-index:2;

  margin-top:.35rem;
  padding:0;
  border:0;
  background:transparent;

  color:inherit;
  opacity:.82;
  font-weight:700;
  cursor:pointer;

  text-decoration:none;
}

/* podčrtaj samo na hover (bolj pro, manj “črte”) */
body.mu-modern-wide .mu-lead-toggle:hover{
  opacity:.95;
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
}


body.mu-modern-wide .mu-lead-collapsible.is-expanded::after{display:none;}

/* Toggle kot podčrtan tekst (manj opazen) */
body.mu-modern-wide .mu-lead-toggle{
  display:none;
  margin-top:.35rem;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  opacity:.82;
  font-weight:700;
  font-size:clamp(.88rem,.95vw,.95rem);
  letter-spacing:-.01em;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
}
body.mu-modern-wide .mu-lead-toggle:hover{
  opacity:.95;
  text-decoration-thickness:2px;
}
body.mu-modern-wide .mu-lead-toggle:focus-visible{
  outline:2px solid rgba(15,23,42,.35);
  outline-offset:3px;
  border-radius:4px;
}
body.mu-modern-wide .mu-lead-collapsible.has-toggle .mu-lead-toggle{
  display:inline-block;
}

/* ===== Single product summary: naslov manjši nad ceno + hero ostane ===== */
body.mu-modern-wide.single-product div.product .summary.entry-summary{
  display:flex;
  flex-direction:column;
  gap:clamp(.45rem,.8vw,.7rem);
}
body.mu-modern-wide.single-product div.product .summary.entry-summary > *{
  margin-top:0!important;
  margin-bottom:0!important;
}
body.mu-modern-wide.single-product div.product .summary .product_title.entry-title{
  position:static!important;
  left:auto!important;
  width:auto!important;
  height:auto!important;
  overflow:visible!important;
  clip:auto!important;
  clip-path:none!important;
  margin:0!important;
  font-size:clamp(1.15rem,1.75vw,1.5rem);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.02em;
  color:#0f172a;
  text-wrap:balance;
}
body.mu-modern-wide.single-product div.product .summary .price{
  color:#0f172a;
  font-weight:800;
}

body.mu-modern-wide.single-product div.product .summary .price .woocommerce-Price-amount{
  font-size:clamp(1.35rem,1.9vw,1.75rem);
}

body.mu-modern-wide.single-product div.product .summary .price small{
  font-size:.85rem;
  font-weight:500;
}
body.mu-modern-wide.single-product div.product .summary .woocommerce-product-rating{
  opacity:.9;
}
body.mu-modern-wide.single-product div.product .summary .woocommerce-product-details__short-description{
  color:#334155;
}
body.mu-modern-wide.single-product div.product .summary form.cart{
  margin-top:.25rem!important;
}
body.mu-modern-wide.single-product div.product .summary .product_meta{
  margin-top:.45rem!important;
  padding-top:.75rem;
  border-top:1px solid rgba(15,23,42,.08);
  color:#475569;
  font-size:.95rem;
}
@media (max-width: 768px){
  body.mu-modern-wide.single-product div.product .summary.entry-summary{
    gap:.55rem;
  }
}

/* ===== WooCommerce toggles (modern) ===== */
body.mu-modern-wide.single-product .woocommerce-tabs ul.tabs{display:none!important;}
body.mu-modern-wide.single-product .woocommerce-tabs .woocommerce-Tabs-panel>h2{display:none;}
body.mu-modern-wide.single-product .mu-wc-accordions{display:flex;flex-direction:column;gap:10px;margin-top:1.15rem;clear:both;}
body.mu-modern-wide.single-product details.mu-wc-details{width:100%;position:relative;border:1px solid rgba(15,23,42,.12);border-radius:0;background:#fff;overflow:hidden;}
body.mu-modern-wide.single-product details.mu-wc-details>summary{list-style:none;cursor:pointer;padding:1rem 1.25rem;font-weight:800;letter-spacing:-.01em;display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;background:linear-gradient(180deg, rgba(2,6,23,.03), rgba(2,6,23,0));text-align:left;}
body.mu-modern-wide.single-product details.mu-wc-details>summary::-webkit-details-marker{display:none;}
body.mu-modern-wide.single-product details.mu-wc-details>summary::after{content:'+';display:inline-block;opacity:.75;font-size:1.25rem;line-height:1;}
body.mu-modern-wide.single-product details.mu-wc-details[open]>summary::after{content:'-';opacity:.9;}
body.mu-modern-wide.single-product details.mu-wc-details .mu-wc-panel{padding:15px;}
body.mu-modern-wide.single-product details.mu-wc-details .mu-wc-panel__content{display:block!important;padding:0!important;margin:0!important;border:0!important;}
body.mu-modern-wide.single-product details.mu-wc-details .mu-wc-panel p:last-child{margin-bottom:0;}

/* Malo lepši default za Gutenberg gumbe na wide straneh */
body.mu-modern-wide .wp-block-buttons .wp-block-button__link{border-radius:999px;}

/* ===== Filter sidebar ===== */
/* ===== Layout: desktop 2 koloni ===== */
body.mu-modern-wide.mu-has-filter-sidebar .mu-layout--filters{
  display:grid;
  grid-template-columns:minmax(260px, 320px) 1fr;
  gap:clamp(1rem, 2vw, 1.6rem);
  align-items:start;
  position:relative;
}
body.mu-modern-wide.mu-has-filter-sidebar .mu-layout__main{min-width:0;}

/* skrij checkbox */
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-state{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}

/* ===== ROUND = 0 (brez zaokroževanj) ===== */
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar,
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-toggle,
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-close,
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar input,
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar select,
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar textarea{
  border-radius:0 !important;
}

/* ===== Sidebar (desktop) ===== */
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar{
  position:sticky;
  top:calc(1rem + var(--wp-admin--admin-bar--height, 0px));
  align-self:start;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  padding:1rem 1rem .75rem;
  box-shadow:0 10px 28px rgba(2,6,23,.06);
  z-index:1;
}
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.75rem;
}
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar__title{
  font-weight:900;
  letter-spacing:-.02em;
  font-size:1rem;
  color:#0f172a;
}
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-close{
  display:none; /* desktop skrito */
  width:38px;height:38px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  cursor:pointer;
  line-height:1;
  font-size:1.35rem;
  font-weight:700;
  color:#0f172a;
  align-items:center;
  justify-content:center;
}
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-close:hover{
  box-shadow:0 10px 22px rgba(2,6,23,.08);
}

/* Widgets styling */
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar__body .widget{
  margin:0 0 1rem;
  padding:0 0 1rem;
  border-bottom:1px solid rgba(15,23,42,.08);
}
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar__body .widget:last-child{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar .widget-title{
  margin:0 0 .6rem;
  font-size:.98rem;
  font-weight:900;
  letter-spacing:-.01em;
  color:#0f172a;
}
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar a{
  color:#0f172a;
  text-decoration:none;
}
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar a:hover{
  text-decoration:underline;
  text-underline-offset:.18em;
}
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar input[type="text"],
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar input[type="search"],
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar input[type="number"],
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar select{
  width:100%;
  border:1px solid rgba(15,23,42,.14);
  padding:.55rem .7rem;
  box-shadow:none;
}

/* Filter bar (mobile) privzeto skrito na desktop */
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-bar{display:none;margin:0 0 1rem;}

/* Overlay privzeto neaktiven */
body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-overlay{
  display:none; /* desktop */
}

/* ===== Mobile: off-canvas + gumb ===== */
@media (max-width: 900px){
  /* layout 1 kolona */
  body.mu-modern-wide.mu-has-filter-sidebar .mu-layout--filters{
    grid-template-columns:1fr;
  }

  /* gumb */
  body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-bar{
    display:flex;
  }
  body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-toggle{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.75rem 1rem;
    border:1px solid rgba(15,23,42,.14);
    background:#fff;
    box-shadow:0 10px 24px rgba(2,6,23,.06);
    font-weight:900;
    letter-spacing:-.01em;
    cursor:pointer;
    color:#0f172a; /* črna */
    user-select:none;
  }
  body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-toggle:hover{
    box-shadow:0 12px 28px rgba(2,6,23,.10);
  }
  body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-toggle__icon{
    display:block;
    color:inherit; /* ikona črna kot tekst */
  }

  /* off-canvas sidebar */
  body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-sidebar{
    position:fixed;
    left:0;
    top:var(--wp-admin--admin-bar--height, 0px);
    height:calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    width:min(92vw, 360px);
    transform:translateX(-110%);
    transition:transform .28s ease;
    z-index:10002;
    overflow:auto;
  }
  body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-close{
    display:inline-flex;
  }

  /* overlay */
  body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.45);
    backdrop-filter: blur(2px);
    z-index:10001;
    opacity:0;
    pointer-events:none;
    transition:opacity .28s ease;
  }

  /* OPEN state (checkbox checked) */
  body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-state:checked ~ .mu-filter-sidebar{
    transform:translateX(0);
  }
  body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-state:checked ~ .mu-layout__main ~ .mu-filter-overlay,
  body.mu-modern-wide.mu-has-filter-sidebar .mu-filter-state:checked ~ .mu-filter-overlay{
    opacity:1;
    pointer-events:auto;
  }

  /* v praksi: overlay je takoj za togglejem v DOM; zgornji selectorji pokrijejo oba primera */
}