/*
Theme Name: Medusa Design
Template: storefront
Description: Otroška tema Storefront za Medusa Design — uporablja uradno CGP iz medusa-config.json (verzija 3.2.1): pisava Nunito, nevtralna ozadja, svetlo siva #F0F1F1 z obstoječe strani medusa-design.com za poudarke, monokromatski gumbi.
Version: 2.0.13
Author: Medusa Design
Text Domain: medusa-design
*/

:root{
  --md-bg: #FFFFFF;
  --md-bg-2: #F9F9F9;
  --md-bg-3: #F1F1F1;
  /* Poudarjena ozadja: svetlo siva z obstoječe strani medusa-design.com (prej bež BONE #EEEAE1, zamenjano 21. 9. 2026). */
  --md-siva: #F0F1F1;
  --md-siva-hover: #E7E8E8;
  --md-text: #000000;
  /* Gumbi: mehkejša črna od besedilne (#000 je na velikih ploskvah pretrd). */
  --md-btn: #1A1A1A;
  --md-btn-hover: #2B2B2B;
  --md-text-body: #7C7F83;
  --md-text-secondary: #404040;
  --md-text-muted: #A9AEB3;
  --md-border: rgba(0,0,0,.10);
  --md-radius: 3px;
  /* Storefront's own .col-full caps at ~1064px (66.5em) na VSEH ekranih —
     na širokih monitorjih (1920px+) to pusti ogromen prazen prostor levo/
     desno in izgleda nedokončano. En sam širinski sistem za cel sedež:
     nikoli ožje kot prej, a raste s širino zaslona do razumne meje. */
  --md-content-w: min(1440px, 94vw);
}

/* Razširi Storefrontov globalni vsebinski kontejner (glava, noga, vsebina) -
   namesto fiksnih ~1064px na vseh ekranih. Velja povsod, tudi v konfiguratorju
   in na domači strani, ki oba uporabljata isto spremenljivko - eno pravilo
   širine za celo stran namesto treh neusklajenih. */
.col-full{
  max-width: var(--md-content-w) !important;
}

body{
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  color: var(--md-text-body);
  background: var(--md-bg);
}

h1, h2, h3, h4, h5, h6,
.site-title, .product_title, .entry-title, .woocommerce-loop-product__title {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  color: var(--md-text);
}

.price, .woocommerce-Price-amount, .amount, .medusa-cena {
  font-weight: 600 !important;
  color: var(--md-text) !important;
}

body, input, textarea, select, button {
  font-family: 'Nunito', sans-serif;
}

/* Ozadja - nevtralna paleta namesto privzete Storefront sive/modre */
.site-header, .site-footer, .woocommerce-tabs, .widget, .storefront-sticky-add-to-cart {
  background-color: var(--md-bg);
  border-color: var(--md-border);
}
.site-content, body.woocommerce-page {
  background-color: var(--md-bg-2);
}
.related.products, .upsells.products, .cross-sells {
  background-color: var(--md-bg-3);
}

/* Poudarek (svetlo siva) - uporabljen zmerno, za izpostavljene bloke */
.woocommerce-message, .woocommerce-info, span.onsale, .medusa-konf .sticky .sum {
  background-color: var(--md-siva) !important;
  color: var(--md-text) !important;
  border: none;
  border-radius: var(--md-radius);
}

/* Gumbi - monokromatski: polno crno polnilo, belo besedilo (edina nadgradnja CGP).
   POMEMBNO: znotraj .medusa-konf ima konfigurator SVOJ popoln sistem gumbov
   (izbirne kartice, čipi, vzorčniki morajo ostati beli/obrobljeni - črni je
   rezerviran samo za glavni CTA). Zato je bare "button" selektor OMEJEN izven
   .medusa-konf, znotraj njega pa velja samo za .btn.p (primarni CTA). */
.button, input[type="submit"], input[type="button"],
.single_add_to_cart_button, .checkout-button, #ctaBuy,
a.button.medusa-povprasaj, a.button.medusa-sestavi,
body:not(.single-product) button,
.medusa-konf .btn.p {
  background-color: var(--md-btn) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--md-radius) !important;
  font-weight: 400;
  box-shadow: none !important;
  transition: opacity .15s ease;
}
.button:hover, input[type="submit"]:hover,
.single_add_to_cart_button:hover, #ctaBuy:hover,
body:not(.single-product) button:hover,
.medusa-konf .btn.p:hover {
  background-color: var(--md-btn-hover) !important;
  color: #FFFFFF !important;
  opacity: .92;
}

/* Izbirni gumbi v konfiguratorju (sistemi, čipi, vzorčniki, sekundarni/tretji CTA)
   ostanejo beli/obrobljeni - lasten dizajn iz konfigurator.css, tu jih le ščitimo
   pred zgornjim pravilom na straneh izdelka. */
.medusa-konf .sys button, .medusa-konf .chips button, .medusa-konf .sw button,
.medusa-konf .btn.s, .medusa-konf .btn.t {
  background-color: transparent !important;
  color: var(--md-text) !important;
  border: 1px solid var(--md-border) !important;
}
.medusa-konf .sys button[aria-pressed="true"] {
  background-color: var(--md-bg-2) !important;
  border-color: var(--md-text) !important;
}
.medusa-konf .chips button[aria-pressed="true"] {
  background-color: var(--md-btn) !important;
  color: var(--md-bg) !important;
}

/* Zaokrozenost povsod po CGP (3px, ne privzetih Storefront zaobljenih kotov) */
input, select, textarea, .card, .medusa-konf .sw button, .medusa-konf .sys button {
  border-radius: var(--md-radius) !important;
}

a { color: var(--md-text); }
a:hover { color: var(--md-text-secondary); }

/* Storefront privzeta "prejšnji/naslednji izdelek" navigacija ob robovih strani -
   dokler ni pravih fotografij izdelkov, prikazuje polomljene sive placeholder
   sličice, ki štrlijo čez rob postavitve (izgleda kot pokvarjen horizontalni
   scroll). Skrito, dokler ne bo pravih slik. */
.storefront-product-pagination {
  display: none !important;
}

/* Konfigurator (vtičnik Medusa Engine) uporablja isto širinsko spremenljivko
   kot ostala stran - prej je bil interno omejen na 1160px ne glede na to,
   koliko širine je Storefront zgoraj sploh dovolil. */
.medusa-konf .medusa-wrap{
  max-width: var(--md-content-w) !important;
}

/* PRAVI vzrok "ozkega polja": WooCommerce/Storefront privzeto stisne
   .summary.entry-summary (naslov, cena IN konfigurator) v ~56% stolpec
   zraven slike izdelka (float:right). To je zasnovano za kratek "buy box",
   ne za bogat večstopenjski konfigurator. Kjer je prisoten .medusa-konf,
   naj se .summary razširi na polno širino pod sliko - slika ostane zgoraj
   v naravni velikosti, konfigurator dobi celotno širino strani. */
.single-product div.product .summary.entry-summary:has(.medusa-konf){
  float: none !important;
  width: auto !important;
  clear: none;
  margin-top: 0;
}
/* Slika levo (400px), naslov/cena/kratek opis desno ob njej, konfigurator pod obema čez polno širino. */
.single-product div.product:has(.medusa-konf) .images{
  float: left;
  width: 400px;
  max-width: 40%;
  margin: 0 36px 24px 0;
}
.single-product div.product:has(.medusa-konf) .summary > .medusa-konf{
  clear: both;
  padding-top: 8px;
}
.single-product div.product:has(.medusa-konf) .summary .product_title{ font-size: 32px; margin-top: 6px; clear: none !important; }
.single-product div.product:has(.medusa-konf) .summary > *:not(.medusa-konf){ clear: none !important; }
.single-product div.product:has(.medusa-konf) .summary .woocommerce-product-details__short-description{ overflow: hidden; max-width: none; }
.single-product div.product:has(.medusa-konf) .summary .woocommerce-product-details__short-description p{ max-width: 62ch; }
@media (max-width: 767px){
  .single-product div.product:has(.medusa-konf) .images{ float: none; width: 100%; max-width: 100%; margin: 0 0 20px; }
}

/* Arhivi trgovine (kategorije, /shop) — naslov levo, opis kategorije berljiv, brez praznine */
body .woocommerce-products-header, body.archive .woocommerce-products-header{ text-align: left !important; padding: 24px 0 0 !important; margin: 0 !important; }
body .woocommerce-products-header .page-title{ font-size: 30px !important; margin: 0 0 10px !important; }
body .term-description{ max-width: 70ch; margin: 0 0 6px !important; padding: 0 !important; }
body .term-description p{ font-size: 16px !important; color: var(--md-text-body); margin: 0 0 10px !important; text-align: left; }
body .storefront-sorting{ margin: 6px 0 16px !important; padding: 0 !important; }
body .storefront-sorting:last-child{ margin-top: 24px !important; }
.woocommerce span.onsale{ font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; }

/* Prijava/registracija/pozabljeno geslo - zdaj ko je .col-full širši, so ti
   obrazci raztegnjeni čez celotnih 1440px, kar izgleda amatersko (predolga
   vnosna polja). Omejeno na razumno širino obrazca. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword{
  max-width: 440px;
}


/* ==========================================================================
   MEDUSA DESIGN SYSTEM (.md-*) — skupni sestavni deli za vse strani
   (domov, zakaj mikrocement, sistemi, KIT-i, B2B, Academy, reference,
   pridobi ponudbo, kontakt, o nas, podpora, claywash, KIT produktne strani).
   Ozadja: samo bela / #F9F9F9 / svetlo siva #F0F1F1. Nikoli črna ozadja (CGP).
   ========================================================================== */

.md-page-wrap{ width: 100%; }
.md-page{ max-width: var(--md-content-w); margin: 0 auto; padding: 0 16px; color: var(--md-text-body); font-size: 16px; line-height: 1.6; }
.md-page h1, .md-page h2, .md-page h3, .md-page h4{ font-weight: 400; color: var(--md-text); margin: 0; line-height: 1.2; }
.md-page p{ margin: 0 0 14px; }
.md-page a{ color: var(--md-text); }
.md-page strong{ font-weight: 600; color: var(--md-text); }
.md-page ul, .md-page ol{ margin: 0; padding: 0; list-style: none; }

.md-sec{ padding-block: 56px; border-top: 1px solid var(--md-border); }
.md-sec-bone{ background: var(--md-siva); border-top: 0; border-radius: var(--md-radius); padding-inline: 40px; margin-block: 16px; }
.md-sec-bone + .md-sec{ border-top: 0; }
.md-narrow{ max-width: 760px; }
.md-center{ text-align: center; }
.md-center .md-lines{ margin-inline: auto; }
.md-h2{ font-size: 28px; margin-bottom: 12px !important; }
.md-h3{ font-size: 18px; margin: 18px 0 10px !important; }
.md-eyebrow{ display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--md-text-muted); font-weight: 600; margin-bottom: 18px; }
.md-lede{ font-size: 19px; line-height: 1.6; max-width: 58ch; color: var(--md-text-secondary); }
.md-hint{ font-size: 15px; max-width: 64ch; margin: 0 0 26px; }
.md-note{ font-size: 13.5px; color: var(--md-text-muted); margin-top: 16px; max-width: 80ch; }
.md-note a{ color: var(--md-text-secondary); }
.md-lines{ font-size: 20px; line-height: 1.7; color: var(--md-text); max-width: 42ch; }
.md-statement{ font-family: 'Nunito', sans-serif; font-size: 24px; line-height: 1.45; color: var(--md-text); text-align: center; max-width: 44ch; margin: 34px auto 0; }
.md-statement.md-left{ text-align: left; margin: 0 0 14px; }

.md-sec-head{ display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.md-sec-head .md-n{ font-size: 12px; color: var(--md-text-muted); font-weight: 600; letter-spacing: .1em; }
.md-sec-head h2{ font-size: 26px; }

/* Gumbi */
.md-cta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.md-cta-center{ justify-content: center; }
.md-btn, .md-page .md-btn, .md-form .md-btn, .md-header-cta .md-btn{
  display: inline-block; text-decoration: none !important; padding: 13px 24px; border-radius: var(--md-radius);
  font-size: 15px; line-height: 1.2; font-weight: 400; cursor: pointer; transition: opacity .15s ease, border-color .15s ease;
  border: 1px solid transparent; background: transparent;
}
.md-btn-p{ background: var(--md-btn) !important; color: var(--md-bg) !important; font-weight: 600; border-color: var(--md-btn) !important; }
.md-btn-p:hover{ background: var(--md-btn-hover) !important; border-color: var(--md-btn-hover) !important; opacity: 1; }
.md-btn-s{ border-color: rgba(0,0,0,.28) !important; color: var(--md-text) !important; background: var(--md-bg) !important; }
.md-btn-s:hover{ border-color: var(--md-text) !important; }
.md-btn-t{ color: var(--md-text-secondary) !important; text-decoration: underline !important; padding-inline: 6px; }

/* Hero */
.md-hero{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 56px 0 48px; }
.md-hero-noimg{ grid-template-columns: 1fr; }
.md-hero h1{ font-size: clamp(32px, 4.6vw, 54px); letter-spacing: -.01em; max-width: 18ch; }
.md-hero .md-lede{ margin-top: 20px; }
.md-hero-media img{ width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--md-radius); display: block; }
.md-hero-bullets{ display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px !important; font-size: 14px; color: var(--md-text-secondary); }
.md-hero-bullets li::before, .md-checks li.yes::before{ content: "✔"; margin-right: 8px; font-size: 12px; color: var(--md-text); }
.md-trust{ display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px !important; font-size: 13.5px; color: var(--md-text-secondary); list-style: none !important; padding-left: 0 !important; }
.md-trust li{ list-style: none !important; margin: 0; }
.md-trust li::before{ content: "—"; margin-right: 8px; color: var(--md-text-muted); }

/* Kartice */
.md-cards{ display: grid; gap: 14px; margin-top: 22px; }
.md-cards-2{ grid-template-columns: repeat(2, 1fr); }
.md-cards-3{ grid-template-columns: repeat(3, 1fr); }
.md-cards-4{ grid-template-columns: repeat(4, 1fr); }
.md-card{ display: flex; flex-direction: column; border: 1px solid var(--md-border); border-radius: var(--md-radius); background: var(--md-bg); text-decoration: none !important; overflow: hidden; transition: border-color .15s ease, transform .15s ease; }
a.md-card:hover{ border-color: var(--md-text); }
a.md-card:hover .md-card-media img{ transform: scale(1.04); }
.md-card-media{ display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--md-bg-3); }
.md-card-media img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.md-card-body{ display: flex; flex-direction: column; padding: 20px 20px 22px; flex: 1; }
.md-card-num{ display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid var(--md-border); border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--md-text); margin-bottom: 12px; }
.md-card-t{ display: block; color: var(--md-text); font-weight: 600; font-size: 16.5px; line-height: 1.3; }
.md-card-d{ display: block; font-size: 14px; line-height: 1.5; margin-top: 8px; color: var(--md-text-body); }
.md-card-meta{ display: block; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--md-text-muted); }
.md-card-cta{ display: block; margin-top: auto; padding-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--md-text); }
.md-sec-bone .md-card{ background: var(--md-bg); }

/* Seznami */
.md-checks{ margin-top: 10px !important; }
.md-checks li{ padding: 7px 0; border-bottom: 1px solid var(--md-border); font-size: 15px; color: var(--md-text-secondary); }
.md-checks li:last-child{ border-bottom: 0; }
.md-checks li.no::before{ content: "✘"; margin-right: 8px; font-size: 12px; color: var(--md-text-muted); }

/* Koraki */
.md-steps{ counter-reset: md; margin-top: 16px !important; display: grid; gap: 10px; }
.md-steps li{ display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--md-border); }
.md-steps li:last-child{ border-bottom: 0; }
.md-step-n{ display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 1px solid var(--md-text); border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--md-text); grid-row: span 2; }
.md-step-t{ font-weight: 600; color: var(--md-text); font-size: 15.5px; }
.md-step-d{ font-size: 14px; color: var(--md-text-body); margin-top: 3px; grid-column: 2; }

/* Tabela */
.md-tw{ overflow-x: auto; margin-top: 18px; }
.md-table{ width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--md-bg); }
.md-table th, .md-table td{ text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--md-border); vertical-align: top; }
.md-table thead th{ font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--md-text-muted); font-weight: 600; background: var(--md-bg-2); }
.md-table tbody th{ font-weight: 600; color: var(--md-text); }

/* FAQ */
.md-faq{ margin-top: 12px; }
.md-faq-item{ border-bottom: 1px solid var(--md-border); }
.md-faq-item summary{ cursor: pointer; padding: 16px 32px 16px 0; font-size: 16.5px; color: var(--md-text); font-weight: 400; list-style: none; position: relative; }
.md-faq-item summary::-webkit-details-marker{ display: none; }
.md-faq-item summary::after{ content: "+"; position: absolute; right: 4px; top: 14px; font-size: 20px; color: var(--md-text-muted); }
.md-faq-item[open] summary::after{ content: "–"; }
.md-faq-a{ padding: 0 0 18px; font-size: 15px; max-width: 80ch; }

/* Dvojni CTA, nasvet, citat */
.md-dual{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-block: 24px; }
.md-dual-col{ border: 1px solid var(--md-border); border-radius: var(--md-radius); padding: 36px 32px; background: var(--md-bg); }
.md-dual-col h2{ font-size: 24px; margin-bottom: 10px; }
.md-dual-col .md-btn{ margin-top: 8px; }
.md-advice, .md-mini-advice{ display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--md-siva); border-radius: var(--md-radius); padding: 36px 40px; margin-block: 16px; border-top: 0; }
.md-advice h2, .md-mini-advice h2{ font-size: 22px; margin-bottom: 6px; }
.md-advice p, .md-mini-advice p{ margin: 0; max-width: 60ch; }
.md-advice .md-cta, .md-mini-advice .md-cta{ margin-top: 0; }
.md-quote{ background: var(--md-siva); border-radius: var(--md-radius); padding: 48px 40px; margin-block: 16px; }
.md-quote blockquote{ margin: 0; border: 0; padding: 0; }
.md-quote p{ font-size: 22px; line-height: 1.5; color: var(--md-text); margin: 0 0 16px; }
.md-quote p:last-child{ margin-bottom: 0; }
.md-quote cite{ display: block; margin-top: 20px; font-style: normal; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--md-text-secondary); font-weight: 600; }
.md-callout{ border: 1px solid var(--md-border); border-left: 3px solid var(--md-text); border-radius: var(--md-radius); padding: 24px 28px; background: var(--md-bg); }

/* Galerija, vzorčniki, deljeni bloki */
.md-gallery{ display: grid; gap: 12px; margin-top: 20px; }
.md-gallery-3{ grid-template-columns: repeat(3, 1fr); }
.md-gallery-4{ grid-template-columns: repeat(4, 1fr); }
.md-gallery figure{ margin: 0; }
.md-gallery img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--md-radius); background: var(--md-bg-3); }
.md-gallery figcaption{ font-size: 13px; color: var(--md-text-muted); margin-top: 8px; }
.md-swatches{ display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 20px; }
.md-swatch{ display: flex; flex-direction: column; }
.md-swatch-c{ display: block; aspect-ratio: 1; border-radius: var(--md-radius); border: 1px solid var(--md-border); }
.md-swatch-n{ font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--md-text); margin-top: 8px; }
.md-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.md-split-rev .md-split-media{ order: 2; }
.md-split-media img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--md-radius); display: block; }
.md-two{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.md-lead{ display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.md-contact-line{ font-size: 16px; line-height: 1.7; }

/* Obrazci (Medusa Leads) */
.md-form{ background: var(--md-bg); border: 1px solid var(--md-border); border-radius: var(--md-radius); padding: 28px; }
.md-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.md-form-row-3{ grid-template-columns: repeat(3, 1fr); }
.md-field{ margin-bottom: 14px; }
.md-field label{ display: block; font-size: 13px; color: var(--md-text-secondary); margin-bottom: 6px; font-weight: 600; }
.md-req{ color: var(--md-text-muted); }
.md-field input, .md-field select, .md-field textarea{ width: 100%; border: 1px solid rgba(0,0,0,.18); border-radius: var(--md-radius) !important; padding: 11px 12px; font-size: 15px; background: var(--md-bg); color: var(--md-text); box-shadow: none; font-weight: 300; }
.md-field input:focus, .md-field select:focus, .md-field textarea:focus{ outline: none; border-color: var(--md-text); }
.md-field input[type="file"]{ padding: 8px; font-size: 13.5px; }
.md-field-check{ display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--md-text-secondary); margin: 6px 0 14px; }
.md-field-check input{ margin-top: 4px; width: auto !important; flex: 0 0 auto; }
.md-form-foot{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.md-form-foot .md-btn{ border: 0; }
.md-form-privacy{ font-size: 12.5px; color: var(--md-text-muted); }
.md-hp{ position: absolute; left: -9999px; }
.md-form-msg{ padding: 14px 18px; border-radius: var(--md-radius); margin-bottom: 14px; font-size: 15px; }
.md-form-ok{ background: #e8f4ec; color: #1f4a2c; border: 1px solid #b9dcc4; border-left: 5px solid #3f8f5a; padding-left: 52px; position: relative; line-height: 1.6; }
.md-form-ok::before{ content: ""; position: absolute; left: 16px; top: 16px; width: 22px; height: 22px; border-radius: 50%; background: #3f8f5a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z' fill='%23fff'/%3E%3C/svg%3E") center / 16px no-repeat; }
.md-form-ok strong{ color: #1f4a2c; }
.md-form-err{ background: var(--md-bg-3); color: var(--md-text); border: 1px solid rgba(0,0,0,.2); }
.md-form-context{ font-size: 14px; color: var(--md-text-secondary); margin: 0 0 10px; }
.md-form-fallback{ padding: 20px; border: 1px solid var(--md-border); border-radius: var(--md-radius); }

/* Glava: logotip, meni, CTA in kosarica v ENI vrstici (logotip je v PHP prestavljen
   v navigacijski pas). Glava je lepljiva — ob pomiku navzdol se skrci v ozek pas. */
.site-header{ padding: 0 !important; border-bottom: 1px solid var(--md-border);
  position: sticky; top: 0; z-index: 120; background: var(--md-bg);
  transition: box-shadow .18s ease; }
/* Storefront ima .site{overflow-x:hidden}, kar naredi drsni vsebnik in izniči
   position:sticky v glavi. overflow: clip prepreči vodoravni drs BREZ vsebnika. */
.hfeed.site{ overflow-x: clip !important; overflow-y: visible !important; }
/* Prvi .col-full ostane prazen (v njem je samo skrita povezava »preskoci na vsebino«). */
.site-header > .col-full:first-child{ padding: 0 !important; min-height: 0; }
.md-scrolled .site-header{ box-shadow: 0 1px 14px rgba(0,0,0,.07); }

.storefront-primary-navigation{ border-top: 0; }
.storefront-primary-navigation .col-full{ display: flex; align-items: center; gap: 26px; }
/* Storefront da .site-branding sirino v odstotkih (okoli 70 %) — v enovrsticni
   glavi mora biti siroka samo toliko kot logotip. */
.site-header .site-branding{ order: 0; flex: 0 0 auto; width: auto !important; max-width: none; margin: 0 !important; padding: 10px 24px 10px 0; }
.site-header .custom-logo-link img, .site-header .custom-logo{ max-height: 48px; width: auto; display: block; }
.site-header .site-title{ font-size: 20px; font-weight: 600; margin: 0; }
.site-header .site-description{ display: none; }
.storefront-primary-navigation .main-navigation{ order: 1; width: auto !important; flex: 1 1 auto; margin: 0 !important; }
.md-header-cta{ order: 2; margin-left: auto; flex: 0 0 auto; }
.md-header-cta .md-btn{ padding: 9px 18px; font-size: 14px; }
.storefront-primary-navigation .site-header-cart{ order: 3; float: none !important; margin: 0 !important; flex: 0 0 auto; width: auto !important; padding: 0 !important; }
.storefront-primary-navigation .site-header-cart > li{ list-style: none; }
.storefront-primary-navigation .main-navigation .primary-navigation{ width: auto !important; }
/* Meni ostane v ENI vrstici na vseh namiznih sirinah. Ko prostora zmanjka,
   se najprej skrci razmik, nato pisava, nazadnje izgine stevec izdelkov v kosarici. */
.main-navigation ul.menu{ display: flex; flex-wrap: nowrap; align-items: center; }
.main-navigation ul.menu > li{ flex: 0 0 auto; }
.main-navigation ul.menu > li > a{ white-space: nowrap; }
.storefront-primary-navigation .main-navigation{ min-width: 0; }
.storefront-primary-navigation .site-header-cart .cart-contents{ padding: 10px 0; }
.main-navigation ul.menu > li > a, .main-navigation ul.menu > li > a:hover{ font-weight: 400; color: var(--md-text); padding: 18px 14px 18px 0; }
.md-scrolled .site-header .custom-logo-link img, .md-scrolled .site-header .custom-logo{ max-height: 36px; }
.md-scrolled .site-header .site-branding{ padding: 6px 0; }
.md-scrolled .main-navigation ul.menu > li > a{ padding-top: 13px; padding-bottom: 13px; }
.md-scrolled .md-header-cta .md-btn{ padding: 7px 15px; font-size: 13.5px; }
.site-header .site-branding, .site-header .custom-logo-link img, .site-header .custom-logo,
.main-navigation ul.menu > li > a, .md-header-cta .md-btn{ transition: all .18s ease; }
/* sidrne povezave se ne skrijejo pod lepljivo glavo */
[id]{ scroll-margin-top: 84px; }
.main-navigation ul.menu ul.sub-menu{ background: var(--md-bg); border: 1px solid var(--md-border); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.main-navigation ul.menu ul.sub-menu a{ color: var(--md-text-secondary); font-size: 14px; }
.main-navigation ul.menu ul.sub-menu a:hover{ color: var(--md-text); background: var(--md-bg-2); }
.handheld-navigation ul.menu a{ color: var(--md-text); }
.storefront-handheld-footer-bar{ background: var(--md-bg); border-top: 1px solid var(--md-border); }

/* Fokus in preklopnik menija — brez privzete vijolične Storefront */
a:focus, button:focus, input:focus, select:focus, textarea:focus, .menu-toggle:focus{ outline: 2px solid var(--md-text) !important; outline-offset: 2px; }
.menu-toggle, .menu-toggle:hover, .menu-toggle.toggled{ background: var(--md-btn) !important; color: var(--md-bg) !important; border-radius: var(--md-radius) !important; }
.storefront-handheld-footer-bar ul li > a{ color: var(--md-text); }
.storefront-handheld-footer-bar ul li.cart .count{ background: var(--md-text); color: var(--md-bg); }

/* Pasica za piškotke */
.md-consent{ position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; max-width: 720px; margin: 0 auto; background: var(--md-bg); border: 1px solid var(--md-border); border-radius: var(--md-radius); box-shadow: 0 12px 32px rgba(0,0,0,.10); padding: 18px 20px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.md-consent p{ margin: 0; font-size: 14px; color: var(--md-text-secondary); flex: 1 1 320px; }
.md-consent-btns{ display: flex; gap: 8px; flex-wrap: wrap; }
.md-consent-opts{ display: flex; gap: 8px 18px; flex-wrap: wrap; flex: 1 1 100%; font-size: 14px; }
.md-consent [hidden]{ display: none !important; }
.md-consent .md-btn{ padding: 10px 16px; font-size: 14px; border: 0; }

/* Center znanja — članki */
.md-article{ max-width: 780px; margin: 0 auto; padding: 48px 0 24px; }
.md-article-head h1{ font-size: clamp(28px, 4vw, 42px); line-height: 1.2; }
.md-article-img{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--md-radius); margin: 28px 0; display: block; }
.md-article-body{ font-size: 17px; line-height: 1.7; color: var(--md-text-secondary); }
.md-article-body h2{ font-size: 24px; margin: 36px 0 12px; }
.md-article-body h3{ font-size: 19px; margin: 28px 0 10px; }
.md-article-body p{ margin: 0 0 18px; }
.md-article-body ul, .md-article-body ol{ padding-left: 22px; margin: 0 0 18px; }
.md-article-body ul{ list-style: disc; }
.md-article-body ol{ list-style: decimal; }
.md-article-body li{ margin-bottom: 6px; }
.md-article-body img{ max-width: 100%; height: auto; border-radius: var(--md-radius); }
.md-article-body a{ color: var(--md-text); text-decoration: underline; }
.md-article-body blockquote{ border-left: 3px solid var(--md-text); margin: 24px 0; padding: 4px 0 4px 20px; font-size: 19px; color: var(--md-text); }
.md-posts .md-card-media{ aspect-ratio: 16 / 10; }
.md-page .pagination, .md-page .navigation.pagination{ margin-top: 28px; }
.md-page .nav-links, .md-page ul.page-numbers{ display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 28px 0 0; }
.md-page .nav-links a, .md-page .nav-links span, .md-page .page-numbers li a, .md-page .page-numbers li span{ border: 1px solid var(--md-border); border-radius: var(--md-radius); padding: 8px 12px; font-size: 14px; text-decoration: none; color: var(--md-text); }

/* Sorodne teme, podpis (E-E-A-T) */
.md-related-list{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
.md-related-list li a{ display: inline-block; border: 1px solid var(--md-border); border-radius: var(--md-radius); padding: 8px 14px; font-size: 14px; text-decoration: none; color: var(--md-text); background: var(--md-bg); }
.md-related-list li a:hover{ border-color: var(--md-text); }
.md-byline{ display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: var(--md-text-muted); margin: 0 0 18px; }
.md-byline strong{ color: var(--md-text-secondary); font-weight: 600; }
.md-answer{ background: var(--md-siva); border-radius: var(--md-radius); padding: 22px 26px; margin: 8px 0 12px; font-size: 17px; line-height: 1.55; color: var(--md-text); }
.md-answer strong{ font-weight: 600; }
.md-answer-label{ display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--md-text-muted); margin-bottom: 6px; }
.md-answer-product{ font-size: 15px; padding: 18px 20px; }
.md-answer-product p{ margin: 0 0 6px; }
.md-answer-product .md-note{ font-size: 13px; color: var(--md-text-secondary); margin: 0; }
.md-cols-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.md-cols-2 .md-h3{ margin-top: 0; }
.md-system-line{ font-size: 17px; line-height: 1.6; padding: 14px 18px; background: var(--md-siva); border-radius: var(--md-radius); margin: 0 0 24px; }
.md-material-page .md-cards-plain .md-card{ min-height: 0; }
@media (max-width: 782px){ .md-cols-2{ grid-template-columns: 1fr; gap: 24px; } }
.md-calc{ display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.md-calc-out .md-table{ margin-top: 0; }
@media (max-width: 860px){ .md-calc{ grid-template-columns: 1fr; } }

/* Noga */
.site-footer{ background: var(--md-bg-2) !important; border-top: 1px solid var(--md-border); padding-top: 0 !important; }
.md-footer{ max-width: var(--md-content-w); margin: 0 auto; padding: 48px 16px 28px; }
.md-footer-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.md-footer-col h3{ font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--md-text); font-weight: 600; margin: 0 0 14px; }
.md-footer-col ul{ margin: 0; padding: 0; list-style: none; }
.md-footer-col li{ margin: 0 0 8px; font-size: 14px; }
.md-footer-col a{ color: var(--md-text-secondary); text-decoration: none; }
.md-footer-col a:hover{ color: var(--md-text); }
.md-footer-contact p{ font-size: 14px; line-height: 1.6; margin: 0 0 10px; color: var(--md-text-secondary); }
.md-footer-bottom{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--md-border); font-size: 12.5px; color: var(--md-text-muted); }
.md-footer-bottom a{ color: var(--md-text-secondary); text-decoration: none; }

/* KIT produktna stran — sekcije pod konfiguratorjem */
.md-kit-page{ padding-top: 8px; }
.md-material-page{ clear: both; padding-top: 24px; }
.single-product div.product .md-mini-advice{ clear: both; }
.md-kit-ctas{ padding-block: 24px; }
.md-kit-ctas .md-cta{ margin-top: 0; }
.md-kit-final{ text-align: center; }
.md-kit-final .md-cta, .md-kit-final .md-trust{ justify-content: center; }
.single-product .related.products, .single-product .up-sells{ max-width: var(--md-content-w); margin-inline: auto; }

/* Trgovina — seznam izdelkov (Storefront) v CGP */
.woocommerce ul.products li.product{ text-align: left; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size: 15.5px; font-weight: 600; }
.woocommerce ul.products li.product .price{ font-size: 14px; }
.woocommerce ul.products li.product .button{ font-size: 13.5px; }
.woocommerce-products-header__title.page-title, .woocommerce-products-header{ font-size: 28px; }
.term-description{ max-width: 70ch; }

@media (max-width: 1024px){
  .md-cards-4{ grid-template-columns: repeat(2, 1fr); }
  .md-footer-grid{ grid-template-columns: repeat(3, 1fr); }
  .md-gallery-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px){
  .md-hero, .md-split, .md-two, .md-lead, .md-dual, .md-advice, .md-mini-advice{ grid-template-columns: 1fr; gap: 24px; }
  .md-split-rev .md-split-media{ order: 0; }
  .md-hero{ padding-top: 12px; }
  .storefront-handheld-footer-bar{ display: none !important; } body{ margin-bottom: 0 !important; }
  .md-hero-media{ order: -1; }
  .md-cards-3{ grid-template-columns: repeat(2, 1fr); }
  .md-form-row, .md-form-row-3{ grid-template-columns: 1fr; }
  .md-sec-bone{ padding-inline: 24px; }
  .md-quote{ padding: 32px 24px; }
  .md-quote p{ font-size: 19px; }
  .md-header-cta{ display: none; }
}
@media (max-width: 600px){
  .md-sec{ padding-block: 40px; }
  .md-cards-2, .md-cards-3, .md-cards-4, .md-gallery-3, .md-gallery-4{ grid-template-columns: 1fr; }
  .md-footer-grid{ grid-template-columns: 1fr 1fr; gap: 24px; }
  .md-sec-head h2{ font-size: 22px; }
  .md-statement{ font-size: 20px; }
  .md-dual-col{ padding: 26px 22px; }
  .md-form{ padding: 20px; }
}
/* Barvne ploščice pri variabilnih izdelkih (Claywash komplet) */
.md-var-swatches{ margin: 6px 0 14px; }
.md-var-label{ font-size: 14px; margin: 0 0 8px; color: var(--md-text-secondary); }
.md-var-grid{ display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.md-var-swatch{ background: none; border: 1px solid var(--md-border); border-radius: var(--md-radius); padding: 4px; cursor: pointer; text-align: center; }
.md-var-swatch span{ display: block; aspect-ratio: 1; border-radius: 2px; border: 1px solid rgba(0,0,0,.06); }
.md-var-swatch em{ display: block; font-style: normal; font-size: 10px; letter-spacing: .04em; margin-top: 4px; color: var(--md-text-secondary); line-height: 1.2; }
.md-var-swatch.is-on{ border-color: #111; box-shadow: 0 0 0 1px #111; }
.md-var-swatches + .variations_form .variations select, .variations_form .variations select{ font-size: 14px; }
@media (max-width: 782px){ .md-var-grid{ grid-template-columns: repeat(4, 1fr); } }
/* UPN QR (bančno nakazilo) */
.md-upn{ background: var(--md-siva); border-radius: var(--md-radius); padding: 28px 32px; margin: 16px 0 24px; }
.md-upn h2{ font-size: 22px; margin: 0 0 16px; }
.md-upn-grid{ display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.md-upn-qr svg{ width: 220px; height: 220px; background: #fff; border-radius: 3px; display: block; }
.md-upn-table th{ text-align: left; font-weight: 600; width: 120px; }
@media (max-width: 782px){ .md-upn-grid{ grid-template-columns: 1fr; } }
/* Paket znanja: izbira podlage */
.md-podlaga-nav{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.md-podlaga-btn.is-on{ background: #111; color: #fff; border-color: #111; }
.md-podlaga{ display: none; }
.md-podlaga.is-on{ display: block; }

/* ===== Košarica, blagajna, potrditev — čist, zložen tok ===== */
.md-steps-bar{ list-style: none; margin: 0 0 28px !important; padding: 0; display: flex; gap: 0; border: 1px solid var(--md-border); border-radius: var(--md-radius); overflow: hidden; }
.md-steps-bar li{ flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; color: var(--md-text-muted); background: #fff; border-right: 1px solid var(--md-border); }
.md-steps-bar li:last-child{ border-right: 0; }
.md-steps-bar li span{ width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--md-border); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.md-steps-bar li.active{ color: var(--md-text); font-weight: 600; background: var(--md-siva); }
.md-steps-bar li.active span, .md-steps-bar li.done span{ background: #111; color: #fff; border-color: #111; }
.md-steps-bar li.done{ color: var(--md-text-secondary); }
.woocommerce-cart .entry-title, .woocommerce-checkout .entry-title, .woocommerce-order-received .entry-title{ font-size: 32px; text-align: left; margin-bottom: 18px; }
/* Košarica: izdelki levo, povzetek desno */
.woocommerce-cart .woocommerce{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; }
.woocommerce-cart .woocommerce > .md-steps-bar, .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper{ grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form{ grid-column: 1; }
.woocommerce-cart .cart-collaterals{ grid-column: 2; position: sticky; top: 104px; }
.woocommerce-cart .cart-collaterals .cart_totals{ width: 100%; float: none; background: #fff; border: 1px solid var(--md-border); border-radius: var(--md-radius); padding: 22px 24px; }
.woocommerce-cart .cart-collaterals .cart_totals h2{ font-size: 20px; margin: 0 0 12px; }
.woocommerce-cart .cart-collaterals .cart_totals table{ margin-bottom: 14px; }
.woocommerce-cart .cart-collaterals .cart_totals th{ font-weight: 600; font-size: 14px; }
.woocommerce-cart .cart-collaterals .order-total td{ font-size: 20px; }
.woocommerce-cart .wc-proceed-to-checkout .button{ width: 100%; text-align: center; font-size: 16px; padding: 16px; }
.woocommerce-cart table.shop_table{ border: 1px solid var(--md-border); border-radius: var(--md-radius); background: #fff; }
.woocommerce-cart table.shop_table th{ font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--md-text-muted); font-weight: 600; }
.woocommerce-cart table.shop_table td.product-name a{ font-weight: 600; color: var(--md-text); }
.woocommerce-cart table.shop_table td.product-thumbnail img{ border-radius: var(--md-radius); }
.woocommerce-cart table.shop_table td.actions{ background: transparent; }
.woocommerce-cart .coupon{ display: flex; gap: 8px; }
.woocommerce-cart .coupon .input-text{ min-width: 180px; }
.woocommerce-cart table.shop_table td.actions .button[name="update_cart"]{ float: right; background: transparent; color: var(--md-text); border: 1px solid var(--md-border); }
.md-kit-items summary{ cursor: pointer; font-size: 13px; color: var(--md-text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.md-kit-items[open] summary{ margin-bottom: 4px; }
.md-kit-items p, .md-kit-items li{ font-size: 13px; }
dl.variation dt, dl.variation dd, dl.variation p{ font-size: 13px; }
.md-trust-cart{ margin: 14px 0 0 !important; padding: 0; list-style: none; }
.md-trust-cart li{ font-size: 13px; color: var(--md-text-secondary); padding: 5px 0 5px 20px; position: relative; }
.md-trust-cart li::before{ content: "✔"; position: absolute; left: 0; font-size: 11px; color: var(--md-text); }
/* Blagajna */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{ background: #fff; border: 1px solid var(--md-border); color: var(--md-text-secondary); }
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a{ color: var(--md-text); text-decoration: underline; }
.woocommerce-checkout form.checkout{ display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; }
.woocommerce-checkout form.checkout #customer_details{ grid-column: 1; grid-row: 1 / span 4; width: 100%; float: none; background: #fff; border: 1px solid var(--md-border); border-radius: var(--md-radius); padding: 26px 28px; }
.woocommerce-checkout form.checkout #customer_details .col-1, .woocommerce-checkout form.checkout #customer_details .col-2{ width: 100%; float: none; }
.woocommerce-checkout form.checkout #customer_details h3{ font-size: 20px; margin: 0 0 14px; }
.woocommerce-checkout form.checkout #customer_details .col-2 h3{ margin-top: 22px; }
.woocommerce-checkout form.checkout .form-row label{ font-size: 13px; color: var(--md-text-secondary); }
.woocommerce-checkout form.checkout .form-row .input-text, .woocommerce-checkout form.checkout .form-row select, .woocommerce-checkout .select2-container .select2-selection--single{ background: #fff; border: 1px solid var(--md-border); border-radius: var(--md-radius); box-shadow: none; }
.woocommerce-checkout form.checkout #order_review_heading{ grid-column: 2; grid-row: 1; width: 100%; float: none; }
.woocommerce-checkout form.checkout #order_review{ grid-column: 2; grid-row: 2; width: 100%; float: none; }
.woocommerce-checkout form.checkout > *:not(#customer_details):not(#order_review_heading):not(#order_review){ grid-column: 1 / -1; }
.woocommerce-checkout form.checkout #order_review_heading{ font-size: 20px; margin: 0 0 12px; }
.woocommerce-checkout form.checkout #order_review{ position: sticky; top: 104px; background: #fff; border: 1px solid var(--md-border); border-radius: var(--md-radius); padding: 22px 24px; }
.woocommerce-checkout #order_review table.shop_table{ border: 0; }
.woocommerce-checkout #order_review table.shop_table th, .woocommerce-checkout #order_review table.shop_table td{ font-size: 14px; }
.woocommerce-checkout #order_review table.shop_table .order-total td{ font-size: 20px; }
.woocommerce-checkout #payment{ background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods{ padding: 0; border: 0; }
.woocommerce-checkout #payment ul.payment_methods li{ border: 1px solid var(--md-border); border-radius: var(--md-radius); padding: 12px 14px; margin: 0 0 8px; background: #fff; }
.woocommerce-checkout #payment ul.payment_methods li label{ font-weight: 600; }
.woocommerce-checkout #payment div.payment_box{ background: var(--md-siva); border-radius: var(--md-radius); margin: 10px 0 0; }
.woocommerce-checkout #payment div.payment_box::before{ display: none; }
.woocommerce-checkout #payment .place-order{ padding: 0; }
.woocommerce-checkout #payment .place-order .button{ width: 100%; font-size: 16px; padding: 16px; }
.md-checkout-note{ margin: 10px 0 0; }
@media (max-width: 900px){
  .woocommerce-cart .woocommerce, .woocommerce-checkout form.checkout{ grid-template-columns: 1fr; }
  .woocommerce-cart .cart-collaterals, .woocommerce-checkout form.checkout #order_review{ grid-column: 1; grid-row: auto; position: static; }
  .woocommerce-checkout form.checkout #order_review_heading{ grid-column: 1; grid-row: auto; }
  .woocommerce-checkout form.checkout #customer_details{ grid-row: auto; }
  .md-steps-bar li{ padding: 10px 8px; font-size: 12px; gap: 6px; }
}
/* Potrditev naročila + UPN */
.woocommerce-order-received .woocommerce-order-overview{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px !important; padding: 0; list-style: none; }
.woocommerce-order-received .woocommerce-order-overview li{ flex: 1 1 160px; border: 1px solid var(--md-border) !important; border-radius: var(--md-radius); padding: 12px 14px !important; margin: 0 !important; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--md-text-muted); background: #fff; }
.woocommerce-order-received .woocommerce-order-overview li strong{ display: block; text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--md-text); margin-top: 4px; }
.md-upn{ background: #fff; border: 1px solid var(--md-border); border-radius: var(--md-radius); padding: 30px 34px; margin: 0 0 28px; }
.md-upn-eyebrow{ display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--md-text-muted); margin-bottom: 6px; }
.md-upn-head h2{ font-size: 26px; margin: 0 0 8px; }
.md-upn-head p{ max-width: 64ch; color: var(--md-text-secondary); margin: 0 0 22px; }
.md-upn-grid{ display: grid; grid-template-columns: 250px 1fr; gap: 32px; align-items: start; }
.md-upn-qr{ background: var(--md-siva); border-radius: var(--md-radius); padding: 14px; text-align: center; }
.md-upn-qr img{ width: 100%; max-width: 230px; height: auto; display: block; margin: 0 auto; background: #fff; border-radius: 3px; }
.md-upn-qr span{ display: block; font-size: 13px; color: var(--md-text-secondary); margin-top: 10px; }
.md-upn-data h3{ font-size: 15px; margin: 0 0 10px; color: var(--md-text-secondary); font-weight: 600; }
.md-upn-data dl{ margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.md-upn-data dl > div{ border-bottom: 1px solid var(--md-border); padding: 8px 0; }
.md-upn-data dt{ font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--md-text-muted); }
.md-upn-data dd{ margin: 2px 0 0; font-size: 17px; font-weight: 600; color: var(--md-text); font-variant-numeric: tabular-nums; }
.md-upn-data .md-note{ margin-top: 14px; }
.woocommerce-order-received .woocommerce-order-details h2, .woocommerce-order-received .woocommerce-customer-details h2{ font-size: 20px; }
@media (max-width: 760px){ .md-upn{ padding: 22px 18px; } .md-upn-grid{ grid-template-columns: 1fr; } .md-upn-data dl{ grid-template-columns: 1fr; } }

/* Lepljiv povzetek konfiguratorja na namizju: predniki z overflow:hidden (Storefront .site, div.product, body) bi sticky izničili → overflow: clip (ne ustvari drsnega vsebnika). */
@media (min-width: 941px){
	body.single-product:has(.medusa-konf), body.single-product:has(.medusa-konf) .hfeed.site, body.single-product:has(.medusa-konf) .site-content, body.single-product:has(.medusa-konf) #primary, body.single-product:has(.medusa-konf) #main,
	.single-product div.product:has(.medusa-konf), .single-product div.product:has(.medusa-konf) .summary.entry-summary { overflow: clip !important; overflow-x: clip !important; overflow-y: visible !important; }
	.single-product div.product:has(.medusa-konf) .summary.entry-summary { float: none; }
	/* Stolpec s povzetkom mora biti visok kot celotna vrstica mreže, sicer sticky nima prostora za drsenje. */
	.medusa-konf .grid > aside{ align-self: stretch; }
}
.md-steps-bar li a{ display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.md-steps-bar li a:hover{ text-decoration: underline; }
.woocommerce-cart .post-edit-link, .woocommerce-checkout .post-edit-link{ display: none !important; }
/* Pridobi ponudbo: obrazec v skupinah, 4-stolpčna vrstica, seznam prednosti */
.md-form-group{ font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--md-text-muted); margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--md-border); }
.md-form-group:first-child{ border-top: 0; padding-top: 0; margin-top: 0; }
.md-form-row-4{ grid-template-columns: repeat(4, 1fr); }
.md-checks-plain{ list-style: none; margin: 18px 0; padding: 0; }
.md-checks-plain li{ position: relative; padding-left: 26px; margin: 0 0 10px; font-size: 15px; }
.md-checks-plain li::before{ content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 7px; border-left: 2px solid #111; border-bottom: 2px solid #111; transform: rotate(-45deg); }
.md-ponudba .md-cards-4 .md-card-t{ font-size: 15px; }
.md-ponudba .md-table th[scope="row"]{ font-weight: 400; }
@media (max-width: 720px){ .md-form-row-4{ grid-template-columns: 1fr 1fr; } }
/* Kanaleta Liquid (kopalnica) */
.md-kanaleta .md-split{ align-items: start; }
.md-kanaleta-media img{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 72%; border-radius: var(--md-radius); }
.md-kanaleta-prerez{ margin: 36px 0 0; }
.md-kanaleta-prerez img{ display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; }
.md-kanaleta-prerez figcaption{ text-align: center; font-size: 13px; color: var(--md-text-muted); margin-top: 10px; }
/* Domov: vstop v asistenta */
.md-home-ask{ background: var(--md-siva); border-radius: var(--md-radius); padding: 44px 40px; }
.md-home-ask-in{ max-width: 760px; }
.md-home-ask .md-h2{ margin: 8px 0 10px; }
.md-home-ask-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.md-home-ask .md-home-ask-chips button{ background: #fff !important; color: #222 !important; border: 1px solid rgba(0,0,0,.14) !important; border-radius: 3px !important; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.md-home-ask .md-home-ask-chips button:hover{ border-color: var(--md-btn) !important; }
/* Reference: mreža realnih fotografij + lightbox */
.md-ref-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
.md-ref-item{ display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--md-radius); background: var(--md-bg-3); }
.md-ref-item img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.md-ref-item:hover img{ transform: scale(1.03); }
.md-lightbox{ position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
[hidden]{ display: none !important; }
.md-lightbox img{ max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; }
.md-lightbox-close{ position: absolute; top: 14px; right: 18px; background: transparent !important; border: 0 !important; color: #fff !important; font-size: 34px; line-height: 1; cursor: pointer; }
@media (max-width: 900px){ .md-ref-grid{ grid-template-columns: repeat(2, 1fr); } .md-home-ask{ padding: 28px 20px; } }
/* Enoten vizualni ritem: slike v hero in v razdeljenih sekcijah imajo enak format in zaobljenost */
.md-hero-media img{ aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--md-radius); }
.md-split-media img{ aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--md-radius); }
@media (max-width: 900px){ .md-hero-media img, .md-split-media img, .md-kanaleta-media img{ aspect-ratio: 3 / 2; } }

/* --------------------------------------------------------------------------
   Mobilna navigacija: namesto ozkega vgrajenega spustnega menija en sam
   pas cez celo sirino zaslona, z locenimi vrsticami in mehkim podmenijem.
   -------------------------------------------------------------------------- */
@media (max-width: 860px){
  /* Mobilna glava: logotip levo, košarica in gumb za meni desno — vse v eni vrstici.
     Meni se odpre pod glavo čez celo širino, gumb "Pridobi ponudbo" pa je v meniju. */
  .site-header{ padding: 0 !important; }
  .storefront-primary-navigation .col-full{ display: block; padding: 0 16px; position: relative; }
  .site-header .site-branding{ margin: 0 !important; padding: 10px 0 !important; max-width: 62%; }
  .site-header .custom-logo-link img, .site-header .custom-logo{ max-height: 42px; }
  .md-scrolled .site-header .custom-logo-link img, .md-scrolled .site-header .custom-logo{ max-height: 34px; }
  .md-scrolled .site-header .site-branding{ padding: 6px 0 !important; }
  .storefront-primary-navigation .main-navigation{ float: none !important; width: 100% !important; position: static; }

  .main-navigation .menu-toggle,
  .main-navigation .menu-toggle:hover,
  .main-navigation .menu-toggle.toggled{
    position: absolute; right: 16px; top: 14px; z-index: 5;
    display: block; float: none; width: auto; max-width: none; margin: 0;
    padding: 9px 14px 9px 2.7em;
    background: var(--md-bg) !important; color: var(--md-text) !important;
    border: 1px solid var(--md-border) !important; border-radius: var(--md-radius) !important;
    font-size: 13.5px; font-weight: 400; letter-spacing: .04em; text-align: left;
  }
  .md-scrolled .main-navigation .menu-toggle{ top: 9px; }

  .storefront-primary-navigation .site-header-cart{ position: absolute; right: 104px; top: 16px; z-index: 5; width: auto !important; }
  .storefront-primary-navigation .site-header-cart li{ list-style: none; margin: 0; }
  .storefront-primary-navigation .site-header-cart .cart-contents{ padding: 6px 0 !important; font-size: 13.5px; color: var(--md-text); white-space: nowrap; }
  .storefront-primary-navigation .site-header-cart .count{ font-size: 12px; color: var(--md-text-muted); }
  .storefront-primary-navigation .site-header-cart .widget_shopping_cart{ display: none !important; }
  .md-scrolled .storefront-primary-navigation .site-header-cart{ top: 11px; }

  .main-navigation.toggled .handheld-navigation{
    display: block;
    width: 100vw; margin-left: calc(50% - 50vw); margin-top: 12px;
    background: var(--md-bg);
    border-top: 1px solid var(--md-border);
    max-height: calc(100vh - 150px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .handheld-navigation ul.menu, .handheld-navigation ul.sub-menu{ margin: 0; padding: 0; list-style: none; }
  .handheld-navigation ul.menu li{ position: relative; border-bottom: 1px solid var(--md-border); }
  .handheld-navigation ul.menu li:last-child{ border-bottom: 0; }
  .main-navigation .handheld-navigation ul.menu a,
  .main-navigation .handheld-navigation ul.menu > li > a{
    display: block; padding: 15px 22px; font-size: 16px; font-weight: 400;
    color: var(--md-text) !important; text-decoration: none;
  }
  .handheld-navigation ul.sub-menu{ background: var(--md-bg-2); border-top: 1px solid var(--md-border); }
  .main-navigation .handheld-navigation ul.sub-menu a{ padding: 12px 22px 12px 38px; font-size: 15px; color: var(--md-text-secondary) !important; }
  .handheld-navigation .dropdown-toggle{
    position: absolute; right: 0; top: 0; width: 56px; height: 50px;
    background: none !important; border: 0 !important; color: var(--md-text-muted) !important; padding: 0;
  }
  /* CTA se pokaže samo, ko je meni odprt */
  .md-header-cta{ display: none; }
  .storefront-primary-navigation:has(.main-navigation.toggled) .md-header-cta{ display: block; margin: 0; padding: 14px 22px 18px; background: var(--md-bg); border-bottom: 1px solid var(--md-border); width: 100vw; margin-left: calc(50% - 50vw); }
  .storefront-primary-navigation:has(.main-navigation.toggled) .md-header-cta .md-btn{ display: block; text-align: center; }
}

/* --------------------------------------------------------------------------
   Domaca stran: prvi zaslon je pogovor. Univerzalni nagovor, veliko vnosno
   polje, predlogi vprasanj in stiri vrstice, kaj asistent zmore. Vsebina pod
   tem ostane (SEO in neodlocni obiskovalci), a je skrcena.
   -------------------------------------------------------------------------- */
.md-ask-hero{
  position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: var(--md-bg);
  text-align: center; padding: clamp(290px, 44vh, 505px) 24px clamp(40px, 5vw, 64px);
}
/* Naslovna fotografija se mora dotikati navigacije - Storefront ima pod glavo 4,2em odmika. */
body:has(.md-ask-cover) .site-header{ margin-bottom: 0 !important; }
/* Fotografija cez celo sirino, ki se z belim prelivom zlije v pogovorno okno:
   asistent dobi "glavo", obiskovalec pa takoj vidi, kaj delamo. */
.md-ask-cover{
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(300px, 46vh, 520px);
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  background-color: var(--md-bg-2);
}
.md-ask-cover::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 62%, rgba(255,255,255,.92) 85%, #fff 100%);
}
.md-ask-hero > *:not(.md-ask-cover){ position: relative; z-index: 1; }
.md-ask-hero > *:not(.md-ask-cover){ max-width: 980px; margin-left: auto; margin-right: auto; }
.md-ask-hero .md-eyebrow{ display: block; margin-bottom: 18px; }
.md-ask-hero h1{
  font-size: clamp(30px, 5.2vw, 52px); line-height: 1.1; letter-spacing: -.015em;
  margin: 0 auto 16px; max-width: 16ch; color: var(--md-text);
}
.md-ask-hero .md-ask-lede{
  font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.55; color: var(--md-text-secondary);
  max-width: 60ch; margin: 0 auto 26px;
}
.md-ask-hero .mda-inline{ max-width: 820px; margin: 0 auto; gap: 8px; }
.md-ask-hero .mda-inline input{
  padding: 17px 18px; font-size: 16.5px; border-color: rgba(0,0,0,.22);
  box-shadow: 0 6px 22px rgba(0,0,0,.05);
}
.md-ask-hero .mda-inline input:focus{ border-color: var(--md-btn); box-shadow: 0 6px 22px rgba(0,0,0,.09); }
.md-ask-hero .mda-inline button{ padding: 0 24px; font-size: 15px; }

.md-ask-hero .md-ask-chips{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 0; max-width: 900px; }
.md-ask-hero .md-ask-chips button{
  background: var(--md-bg) !important; color: var(--md-text-secondary) !important;
  border: 1px solid var(--md-border) !important; border-radius: 999px !important;
  padding: 8px 15px; font-size: 13.5px; font-weight: 400; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.md-ask-hero .md-ask-chips button:hover{ border-color: var(--md-btn) !important; color: var(--md-text) !important; }

.md-ask-hero .md-ask-can{
  list-style: none; margin: 52px auto 0; padding: 30px 0 0; max-width: 900px;
  border-top: 1px solid var(--md-border);
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; text-align: left;
}
.md-ask-can li{ font-size: 14.5px; line-height: 1.5; color: var(--md-text-body); padding-left: 18px; position: relative; }
.md-ask-can li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--md-btn); opacity: .55; }
.md-ask-can strong{ color: var(--md-text); font-weight: 600; }

.md-ask-hero .md-ask-alt{ margin: 28px auto 0; font-size: 14px; color: var(--md-text-muted); }
.md-ask-alt a{ color: var(--md-text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.md-ask-alt a:hover{ color: var(--md-text); }
.md-ask-hero .md-trust{ justify-content: center; margin: 22px auto 0 !important; max-width: 980px; }

@media (max-width: 700px){
  .md-ask-hero{ padding-top: clamp(215px, 33vh, 330px); text-align: left; }
  .md-ask-cover{ height: clamp(220px, 34vh, 340px); }
  .md-ask-hero h1{ margin-left: 0; }
  .md-ask-hero .md-ask-lede{ margin-left: 0; }
  .md-ask-hero .md-ask-chips{ justify-content: flex-start; margin-left: 0; }
  .md-ask-hero .md-ask-can{ grid-template-columns: 1fr; margin-top: 30px; }
  .md-ask-hero .md-trust{ justify-content: flex-start; margin-left: 0 !important; }
  .md-ask-hero .mda-inline{ flex-wrap: wrap; }
  .md-ask-hero .mda-inline input{ flex: 1 1 100%; }
  .md-ask-hero .mda-inline button{ flex: 1 1 100%; padding: 14px 20px; }
}

/* Obrazec za ponudbo cez celo sirino sekcije (brez stranskega stolpca). */
.md-form-wide .md-form{ max-width: none; }
.md-form-wide .md-form-row, .md-form-wide .md-form-row-3{ gap: 14px 18px; }

/* Cene v trgovini: velika cena z DDV, pod njo neto + stopnja DDV (Faza 1). */
.md-cena{ display: inline-flex; flex-direction: column; gap: 2px; }
.md-cena-bruto{ font-size: 18px; color: var(--md-text); font-weight: 600; }
.md-cena-bruto .woocommerce-Price-amount{ color: inherit; }
.md-cena-razgradnja{ font-size: 12.5px; color: var(--md-text-muted); font-weight: 400; }
.md-cena-razgradnja .woocommerce-Price-amount{ color: inherit; }
.md-cena-povprasevanje{ font-size: 14px; color: var(--md-text-secondary); }
.woocommerce ul.products li.product .md-cena-bruto{ font-size: 15.5px; }

/* Odtenek namesto fotografije pri tonerjih in barvnih izdelkih. */
.md-swatch-img{ display: block; width: 100%; aspect-ratio: 1; background: var(--md-swatch, var(--md-siva)); border: 1px solid rgba(0,0,0,.08); border-radius: var(--md-radius); position: relative; }
.md-swatch-img em{ position: absolute; left: 10px; bottom: 9px; font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(0,0,0,.45); background: rgba(255,255,255,.72); padding: 3px 7px; border-radius: 2px; }
.md-swatch-lg{ aspect-ratio: 4 / 3; }
/* Prazna sličica izdelka naj bo mirna ploskev v CGP, ne siva ikona. */
/* Izdelki brez fotografije: lastna nadomestna slika Medusa Design (»Fotografija izdelka je v pripravi«). */
.woocommerce ul.products li.product img.woocommerce-placeholder,
.woocommerce div.product img.woocommerce-placeholder{ background: var(--md-siva); opacity: 1; padding: 0; border: 0; }
.md-prod-img{ display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--md-radius); }
.md-prod-img-lg{ aspect-ratio: 4 / 3; }
/* Podpora: asistent najprej, obrazec kot druga vrata. */
.md-podpora-ask{ text-align: center; }
.md-podpora-ask .md-sec-head, .md-podpora-ask .md-hint{ text-align: center; }
.md-podpora-ask .mda-inline{ max-width: 620px; margin: 22px auto 0; }
.md-podpora-ask .md-ask-chips{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 700px; margin: 16px auto 0; }
.md-podpora-ask .md-ask-chips button{ background: var(--md-bg) !important; color: var(--md-text-secondary) !important; border: 1px solid var(--md-border) !important; border-radius: 999px !important; padding: 8px 15px; font-size: 13.5px; font-weight: 400; cursor: pointer; }
.md-podpora-ask .md-ask-chips button:hover{ border-color: var(--md-btn) !important; color: var(--md-text) !important; }
.md-podpora-ask .md-note{ margin-top: 16px; }

/* MASTER obrazec: izbira povrsin s ploscicami, bloki se odpirajo po potrebi. */
.md-form-hint{ font-weight: 400; color: var(--md-text-muted); text-transform: none; letter-spacing: 0; font-size: 13px; }
.md-master-izbira{ display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.md-master-chip{ display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--md-border); border-radius: 999px; padding: 9px 16px 9px 13px; cursor: pointer; font-size: 14px; color: var(--md-text-secondary); background: var(--md-bg); transition: border-color .15s ease, color .15s ease; }
.md-master-chip:hover{ border-color: var(--md-btn); color: var(--md-text); }
.md-master-chip input{ width: auto !important; margin: 0; accent-color: var(--md-btn); }
.md-master-chip:has(input:checked){ border-color: var(--md-btn); color: var(--md-text); background: var(--md-siva); }
.md-master-blok{ border: 1px solid var(--md-border); border-radius: var(--md-radius); padding: 18px 20px 6px; margin: 0 0 14px; background: var(--md-bg); }
.md-master-blok-naslov{ font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--md-text-muted); margin: 0 0 12px; }
.md-master-korak{ margin-top: 26px; }
.md-master-povzetek{ margin: 14px 0 0; padding: 12px 16px; background: var(--md-siva); border-radius: var(--md-radius); font-size: 14.5px; color: var(--md-text); }

/* Barvna karta: klik na odtenek odpre povecavo. */
body .md-swatches .md-swatch-btn,
body:not(.single-product) .md-swatches button.md-swatch-btn{ background: none !important; border: 0 !important; padding: 0 !important; text-align: left; cursor: zoom-in; color: inherit !important; font: inherit; }
.md-swatch-btn:hover .md-swatch-c{ outline: 1px solid var(--md-btn); outline-offset: 2px; }
.md-barva-zoom{ position: fixed; inset: 0; z-index: 10000; background: rgba(255,255,255,.94); display: flex; align-items: center; justify-content: center; padding: 24px; }
.md-barva-zoom-in{ position: relative; display: grid; grid-template-columns: minmax(180px, 320px) minmax(240px, 380px); gap: 32px; align-items: center; max-width: 760px; }
.md-barva-zoom-c{ display: block; aspect-ratio: 1; border-radius: var(--md-radius); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 20px 60px rgba(0,0,0,.10); }
.md-barva-zoom-n{ font-size: 28px; margin: 6px 0 12px; color: var(--md-text); }
.md-barva-zoom-hex{ font-size: 12.5px; color: var(--md-text-muted); margin-top: 10px; }
.md-barva-zoom .md-barva-zoom-close{ position: absolute; right: -6px; top: -42px; background: none !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--md-text) !important; font-size: 30px; line-height: 1; cursor: pointer; padding: 0; }
@media (max-width: 700px){ .md-barva-zoom-in{ grid-template-columns: 1fr; gap: 18px; } .md-barva-zoom .md-barva-zoom-close{ top: -38px; right: 0; } }
.md-form-napaka{ margin: 8px 0 0; padding: 10px 14px; border-radius: var(--md-radius); background: var(--md-bg-3); border: 1px solid rgba(0,0,0,.18); font-size: 14px; color: var(--md-text); }

/* Obrazec za ponudbo na vrhu strani — mora biti očiten, da gre za izračun. */
.md-obrazec-top{ background: var(--md-siva); border-radius: var(--md-radius); padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 44px) !important; margin-top: 8px; }
.md-obrazec-uvod{ max-width: 760px; margin-bottom: 26px; }
.md-obrazec-uvod .md-h2{ margin: 8px 0 10px; }
.md-obrazec-uvod .md-lede{ margin-bottom: 4px; }
.md-obrazec-top .md-form{ border-color: rgba(0,0,0,.14); }

/* Košarica v mobilni glavi (na namizju je Storefrontova). */
.md-mcart{ display: none; }
@media (max-width: 860px){
  .md-mcart{
    display: inline-flex; align-items: center; gap: 5px;
    position: absolute; right: 104px; top: 19px; z-index: 6;
    text-decoration: none !important; color: var(--md-text) !important;
    padding: 8px 6px;
  }
  .md-mcart-ico{ width: 19px; height: 19px; display: block; border: 1.6px solid currentColor; border-radius: 3px; position: relative; }
  .md-mcart-ico::before{ content: ""; position: absolute; left: 50%; top: -7px; transform: translateX(-50%); width: 11px; height: 8px; border: 1.6px solid currentColor; border-bottom: 0; border-radius: 6px 6px 0 0; }
  .md-mcart-n{ font-style: normal; font-size: 12px; font-weight: 600; background: var(--md-btn); color: #fff; border-radius: 999px; min-width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
  .md-scrolled .md-mcart{ top: 13px; }
  .storefront-primary-navigation .site-header-cart{ display: none !important; }
}

/* Ko se pogovor odpre kar na strani, predlogi, seznam zmoznosti in zgornje vnosno
   polje niso vec potrebni — pogovor ima svoje polje na dnu okna. */
.md-ask-hero:has(#mdaInlineChat:not([hidden])) .md-ask-chips,
.md-ask-hero:has(#mdaInlineChat:not([hidden])) .md-ask-can,
.md-ask-hero:has(#mdaInlineChat:not([hidden])) .mda-inline,
.md-ask-hero:has(#mdaInlineChat:not([hidden])) .md-ask-lede{ display: none; }
.md-ask-hero:has(#mdaInlineChat:not([hidden])) h1{ font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 6px; }
.md-ask-hero:has(#mdaInlineChat:not([hidden])){ padding-top: clamp(150px, 24vh, 260px); }
.md-podpora-ask:has(#mdaInlineChat:not([hidden])) .md-ask-chips,
.md-podpora-ask:has(#mdaInlineChat:not([hidden])) .mda-inline{ display: none; }

/* Zložljivi tehnični bloki: vsebina je v HTML-ju za stroje, stran pa ostane mirna. */
.md-details{ border: 1px solid var(--md-border); border-radius: var(--md-radius); background: var(--md-bg); margin: 20px 0 0; }
.md-details > summary{ cursor: pointer; list-style: none; padding: 15px 20px; font-size: 15px; color: var(--md-text); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.md-details > summary::-webkit-details-marker{ display: none; }
.md-details > summary::after{ content: "+"; font-size: 20px; line-height: 1; color: var(--md-text-muted); }
.md-details[open] > summary::after{ content: "−"; }
.md-details[open] > summary{ border-bottom: 1px solid var(--md-border); }
.md-details-body{ padding: 16px 20px 20px; font-size: 15px; line-height: 1.65; color: var(--md-text-body); }
.md-details-body p{ margin: 0 0 12px; }
.md-details-body p:last-child{ margin-bottom: 0; }
.md-details-body em{ font-style: normal; font-weight: 600; color: var(--md-text-secondary); }

/* ==========================================================================
   TRGOVINA — drobtine, navigacija po kategorijah, uvodna stran
   ========================================================================== */

/* Drobtine: tiha pot nad vsebino, nikoli glasnejša od naslova strani. */
.md-drobtine{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4em;
  margin:18px 0 14px; padding:0;
  font-size:.82rem; line-height:1.5; color:var(--md-text-muted);
}
.md-drobtine a{ color:var(--md-text-body); text-decoration:none; border-bottom:1px solid transparent; }
.md-drobtine a:hover{ color:var(--md-text); border-bottom-color:var(--md-border); }
.md-drobtine [aria-current="page"]{ color:var(--md-text-secondary); }
.md-drobtine-sep{ color:var(--md-text-muted); }

/* Vrstica kategorij: vedno vidno, kje smo in kam lahko skočimo. */
.md-shop-nav{ margin:0 0 26px; border-bottom:1px solid var(--md-border); }
/* Vse kategorije v ENI vrstici — pas mora ostati nizek. Na ozkih zaslonih se
   vrstica vodoravno podrsa, namesto da bi se prelomila v drugo vrstico. */
.md-shop-nav-in{
  display:flex; flex-wrap:nowrap; gap:2px; align-items:center;
  padding:0 0 10px; margin:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.md-shop-nav-in::-webkit-scrollbar{ display:none; }
.md-shop-nav-a{
  display:inline-block; flex:0 0 auto; white-space:nowrap; padding:6px 10px; border-radius:var(--md-radius);
  font-size:13px; line-height:1.3; letter-spacing:.005em;
  color:var(--md-text-secondary); text-decoration:none;
  border:1px solid transparent; background:transparent; transition:background .15s, color .15s, border-color .15s;
}
.md-shop-nav-a:hover{ background:var(--md-bg-3); color:var(--md-text); }
.md-shop-nav-a.je-aktiven{ background:var(--md-btn); color:#fff; }
.md-shop-nav-a.je-aktiven:hover{ background:var(--md-btn-hover); color:#fff; }

/* Uvodni pas trgovine. */
.md-shop-hero{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px);
  align-items:center; margin:6px 0 clamp(36px,5vw,64px);
}
.md-shop-hero h1{ margin:.25em 0 .35em; font-size:clamp(2rem,3.6vw,3.1rem); line-height:1.12; letter-spacing:-.015em; }
.md-shop-hero .md-lede{ max-width:56ch; }
.md-shop-hero-media img{
  display:block; width:100%; height:auto; border-radius:var(--md-radius);
  aspect-ratio:16/11; object-fit:cover;
}
@media (max-width:860px){
  .md-shop-hero{ grid-template-columns:1fr; gap:22px; }
  .md-shop-hero-media{ order:-1; }
  .md-shop-hero-media img{ aspect-ratio:16/9; }
}

/* Naslov "Vse kategorije" sedi tik nad mrežo kategorij, ki jo izriše WooCommerce. */
.md-shop-kat{ padding-bottom:0 !important; margin-bottom:0 !important; }
.woocommerce-shop .site-main ul.products{ margin-top:10px; }
/* Privzeti naslov strani "Trgovina" nadomesti naš H1. */
.woocommerce-shop .woocommerce-products-header{ display:none; }

/* Cemher PRO. */
.md-pro-box{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(22px,3.5vw,48px);
  align-items:start;
}
.md-pro-box .md-h2{ margin:.2em 0 .45em; }
.md-pro-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.md-pro-list li{
  padding:13px 16px; background:#fff; border:1px solid var(--md-border);
  border-radius:var(--md-radius); font-size:.92rem; line-height:1.55; color:var(--md-text-body);
}
.md-pro-list strong{ color:var(--md-text); font-weight:600; }
@media (max-width:860px){ .md-pro-box{ grid-template-columns:1fr; } }

/* Asistent v trgovini naj ne prevzame cele strani. */
.md-shop-pomoc .mda-vnos{ margin:18px 0 6px; }

/* Kategorije na uvodni strani trgovine ("Vse kategorije"): fotografija
   znacilnega izdelka kategorije (Microne, Primer 100, Aquamax PRO, toner,
   Claywash, gladilka CO.ME ProFlex …) - enak kvadratni format kot oglasi izdelkov. */
.woocommerce ul.products li.product-category > a{
  display:block; text-decoration:none; background:#fff; border:1px solid var(--md-border);
  border-radius:var(--md-radius); overflow:hidden; transition:border-color .15s, box-shadow .15s;
}
.woocommerce ul.products li.product-category > a:hover{ border-color:rgba(0,0,0,.22); box-shadow:0 8px 24px rgba(0,0,0,.06); }
.woocommerce ul.products li.product-category img{
  display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; margin:0; border-radius:0;
}
/* WooCommerce placeholder (siva ikona) v kategorijah skrijemo. */
.woocommerce ul.products li.product-category img[src*="woocommerce-placeholder"]{ display:none; }
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title{
  margin:0; padding:22px 18px; font-size:15.5px; font-weight:600; color:var(--md-text); line-height:1.35;
}
.woocommerce ul.products li.product-category h2 .count{
  background:transparent; color:var(--md-text-muted); font-weight:400; padding:0 0 0 .4em; font-size:.86em;
}
/* Brez slike naj bo ploščica dovolj visoka, da mreža ne razpade. */
.woocommerce ul.products li.product-category > a:not(:has(img:not([src*="woocommerce-placeholder"]))) h2.woocommerce-loop-category__title{
  display:flex; align-items:flex-end; min-height:132px;
}
/* Fotografije izdelkov iz kataloga Cemher so posnetki embalaze: v oglasih jih ne
   obrezemo (»contain«). Pri kategorijah je posnetek skoraj kvadraten (660 x 707),
   zato »cover« odreze le nekaj pik praznega ozadja in ploscica je polna. */
.woocommerce ul.products li.product:not(.product-category) .md-prod-img,
.single-product .md-prod-img{ object-fit:contain !important; background:#fff; }
.woocommerce ul.products li.product-category .md-prod-img{ object-fit:cover !important; }
.md-prod-img-lg{ aspect-ratio:1/1 !important; }

/* Vsebina pod izdelkom mora biti pod plavajočim povzetkom, ne ob njem. */
.single-product .md-page,
.single-product .md-sec,
.single-product .md-mini-advice,
.single-product .md-kan-vsebina{ clear:both; }
.single-product .md-kan-vsebina{ width:100%; margin-top:8px; }

/* Barvne ploščice kanalet. */
.md-kan-swatches{ margin:6px 0 18px; }
.md-kan-swatches .md-var-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; margin:10px 0 8px; }
.md-kan-swatches .md-var-swatch{
  display:block; width:100%; padding:0 0 6px; background:#fff; border:1px solid var(--md-border);
  border-radius:var(--md-radius); cursor:pointer; text-align:center; transition:border-color .15s, box-shadow .15s;
}
.md-kan-swatches .md-var-swatch span{ display:block; width:100%; aspect-ratio:1/1; border-bottom:1px solid var(--md-border); }
.md-kan-swatches .md-var-swatch em{ display:block; padding:6px 4px 0; font-style:normal; font-size:10.5px; letter-spacing:.04em; color:var(--md-text-body); }
.md-kan-swatches .md-var-swatch:hover{ border-color:var(--md-text-secondary); }
.md-kan-swatches .md-var-swatch.is-on{ border-color:var(--md-text); box-shadow:0 0 0 1px var(--md-text); }
.md-kan-swatches .md-var-swatch.is-on em{ color:var(--md-text); font-weight:600; }
.md-kan-swatches .md-var-label{ margin:0; font-size:13.5px; color:var(--md-text-secondary); }

/* Kanalete: izbira s ploščicami, izvirni spustni seznami ostanejo samo za WooCommerce. */
.md-kan-izbira{ margin:4px 0 20px; }
.md-kan-izbira .md-var-swatches + .md-var-swatches{ margin-top:18px; }
.md-var-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 8px; }
.md-var-chip{
  padding:9px 16px; background:#fff; border:1px solid var(--md-border); border-radius:var(--md-radius);
  font-size:14px; color:var(--md-text-secondary); cursor:pointer; transition:border-color .15s, background .15s, color .15s;
}
.md-var-chip:hover{ border-color:var(--md-text-secondary); color:var(--md-text); }
.md-var-chip.is-on{ background:var(--md-btn); border-color:var(--md-btn); color:#fff; }
.md-var-chip.ni-na-voljo,
.md-kan-swatches .md-var-swatch.ni-na-voljo{ opacity:.32; pointer-events:none; }
.md-kan-izbira .md-var-current{ color:var(--md-text); }
/* Spustna seznama lastnosti skrijemo — izbira teče prek ploščic zgoraj.
   Ostaneta v DOM, ker ju WooCommerce potrebuje za izbiro različice. */
.single-product .variations_form .variations tr:has(select[name="attribute_dolzina"]),
.single-product .variations_form .variations tr:has(select[name="attribute_barva"]){
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ==========================================================================
   MOJ RAČUN — prijava, registracija, nadzorna plošča
   ========================================================================== */
.woocommerce-account .woocommerce{ max-width:var(--md-content-w); margin-inline:auto; padding:0 16px; }
.md-racun-uvod{ margin:0 0 34px; }
.md-racun-uvod .md-h1{ margin:.2em 0 .35em; font-size:clamp(1.9rem,3.2vw,2.7rem); line-height:1.15; letter-spacing:-.015em; }
.md-racun-uvod .md-lede{ max-width:62ch; }
.md-racun-uvod .md-cards{ margin-top:26px; }
.md-racun-uvod .md-card-t{ font-size:15px; }

.md-google-prijava{ margin:30px 0 6px; }
.md-google-gumb{
  display:inline-flex; align-items:center; gap:12px;
  padding:12px 22px; background:#fff; border:1px solid var(--md-border);
  border-radius:var(--md-radius); text-decoration:none !important; color:var(--md-text);
  font-size:15px; font-weight:600; transition:border-color .15s, box-shadow .15s;
}
.md-google-gumb:hover{ border-color:var(--md-text-secondary); box-shadow:0 1px 3px rgba(0,0,0,.06); }
.md-google-gumb svg{ flex:0 0 auto; }
.md-locilo{ display:flex; align-items:center; gap:14px; margin:26px 0 4px; color:var(--md-text-muted); font-size:13px; }
.md-locilo::before, .md-locilo::after{ content:""; flex:1; height:1px; background:var(--md-border); }

.md-callout-opozorilo{ border-left:3px solid #B4453C; }

.md-racun{ margin:0 0 30px; }
.md-racun .md-h2{ margin:0 0 .5em; }
.md-racun .md-h3{ margin:32px 0 6px; }
.md-racun-narocila{ display:grid; gap:10px; margin-top:12px; }
.md-racun-narocilo{
  display:grid; grid-template-columns:auto 1fr auto; gap:4px 18px; align-items:baseline;
  padding:15px 18px; border:1px solid var(--md-border); border-radius:var(--md-radius);
  background:#fff; text-decoration:none !important; color:var(--md-text-body); transition:border-color .15s;
}
.md-racun-narocilo:hover{ border-color:var(--md-text); }
.md-rn-glava{ display:flex; align-items:baseline; gap:10px; }
.md-rn-glava strong{ color:var(--md-text); font-size:15px; }
.md-rn-glava em{ font-style:normal; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--md-text-muted); }
.md-rn-datum{ grid-column:1; font-size:12.5px; color:var(--md-text-muted); }
.md-rn-izdelki{ grid-column:2; grid-row:1 / span 2; font-size:13.5px; line-height:1.5; }
.md-rn-znesek{ grid-column:3; grid-row:1 / span 2; font-weight:600; color:var(--md-text); white-space:nowrap; }
@media (max-width:640px){
  .md-racun-narocilo{ grid-template-columns:1fr; }
  .md-rn-izdelki, .md-rn-znesek{ grid-column:1; grid-row:auto; }
}

/* Navigacija računa v CGP. */
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.woocommerce-MyAccount-navigation li a{
  display:block; padding:10px 14px; border-radius:var(--md-radius);
  text-decoration:none; color:var(--md-text-secondary); font-size:14.5px;
}
.woocommerce-MyAccount-navigation li a:hover{ background:var(--md-bg-3); color:var(--md-text); }
.woocommerce-MyAccount-navigation li.is-active a{ background:var(--md-siva); color:var(--md-text); font-weight:600; }

/* Na strani računa naslov strani podvaja naš H1 — pustimo samo enega. */
.woocommerce-account .entry-title,
.woocommerce-account .page-title{ display:none; }

/* Zloženi tehnični bloki: mirni na strani, polni za tiste, ki jih odprejo. */
.md-tehnika .md-details + .md-details{ margin-top:10px; }
.md-tehnika .md-h2{ margin-bottom:.35em; }
.md-tehnika .md-details-body .md-table{ margin:4px 0 12px; font-size:14px; }
.md-tehnika .md-details-body ul{ margin:0 0 12px; padding-left:20px; }
.md-tehnika .md-details-body li{ margin:0 0 6px; }

/* Uvod pred kalkulatorjem na strani Cena. */
.md-calc-uvod{ padding-bottom:0 !important; margin-bottom:0 !important; }

/* Kosarica v glavi: ikona je Storefrontov ::after, zato mora biti desno od besedila. */
.storefront-primary-navigation .site-header-cart .cart-contents{ position: relative; padding-right: 40px !important; white-space: nowrap; }
.storefront-primary-navigation .site-header-cart .cart-contents .amount{ font-weight: 600; color: var(--md-text); }
.storefront-primary-navigation .site-header-cart .cart-contents .count{ color: var(--md-text-muted); font-size: 13px; margin-left: 4px; }


/* --- Ena vrstica menija tudi na manjsih namiznih zaslonih --- */
@media (min-width: 861px) and (max-width: 1440px){
  .storefront-primary-navigation .col-full{ gap: 18px; }
  .storefront-primary-navigation .site-header-cart .cart-contents .count{ display: none; }
  .storefront-primary-navigation .site-header-cart .cart-contents{ padding-right: 30px !important; }
}
@media (min-width: 861px) and (max-width: 1280px){
  .main-navigation ul.menu > li > a, .main-navigation ul.menu > li > a:hover{ font-size: 14px; padding-right: 11px; }
  .site-header .site-branding{ padding-right: 12px; }
  .site-header .custom-logo-link img, .site-header .custom-logo{ max-height: 42px; }
  .md-header-cta .md-btn{ padding: 8px 14px; font-size: 13.5px; }
}
@media (min-width: 861px) and (max-width: 1100px){
  .storefront-primary-navigation .col-full{ gap: 12px; }
  .main-navigation ul.menu > li > a, .main-navigation ul.menu > li > a:hover{ font-size: 13px; padding-right: 8px; }
  .storefront-primary-navigation .site-header-cart .cart-contents .amount{ display: none; }
  .storefront-primary-navigation .site-header-cart .cart-contents{ padding-right: 24px !important; }
  .md-header-cta .md-btn{ padding: 7px 11px; font-size: 13px; }
}
@media (min-width: 861px) and (max-width: 1365px){
  .md-shop-nav-a{ font-size: 12.5px; padding: 6px 8px; }
}
@media (min-width: 861px) and (max-width: 1152px){
  .md-shop-nav-a{ font-size: 12px; padding: 5px 6px; letter-spacing: 0; }
}

/* ------------------------------------------------------------------
   Opis izdelka (razdelek pod povzetkom): lastnosti, tehnični podatki
   Cemher v tabeli in fotografije tekstur. Berljiva širina besedila,
   tabela in slike čez celotno širino stolpca.
   ------------------------------------------------------------------ */
.md-opis-izdelka{ clear:both; }
.md-opis{ max-width:860px; color:var(--md-text-secondary); font-size:16.5px; line-height:1.65; }
.md-opis > p{ margin:0 0 14px; }
.md-opis strong{ color:var(--md-text); font-weight:600; }
.md-opis h3{ margin:26px 0 10px; font-size:18px; font-weight:600; color:var(--md-text); letter-spacing:-.005em; }
.md-opis ul, .md-opis ol{ margin:0 0 16px; padding-left:1.2em; }
.md-opis li{ margin:0 0 6px; }
.md-opis a{ color:var(--md-text); text-decoration:underline; text-underline-offset:2px; }
.md-opis-tabela{ width:100%; border-collapse:collapse; margin:4px 0 18px; font-size:15px; background:#fff; border:1px solid var(--md-border); border-radius:var(--md-radius); overflow:hidden; }
.md-opis-tabela th, .md-opis-tabela td{ text-align:left; vertical-align:top; padding:10px 14px; border-bottom:1px solid var(--md-border); }
.md-opis-tabela tr:last-child th, .md-opis-tabela tr:last-child td{ border-bottom:0; }
.md-opis-tabela th{ width:34%; font-weight:600; color:var(--md-text); background:var(--md-bg-2); }
.md-opis-slike{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; margin:8px 0 20px; }
.md-opis-slika{ margin:8px 0 20px; }
.md-opis-slike .md-opis-slika{ margin:0; }
.md-opis-slika img{ display:block; width:100%; max-width:420px; height:auto; border-radius:var(--md-radius); background:var(--md-bg-3); }
.md-opis-slike .md-opis-slika img{ max-width:none; aspect-ratio:660/707; object-fit:cover; }
.md-opis-slika figcaption{ margin-top:8px; font-size:13.5px; line-height:1.45; color:var(--md-text-muted); }
.md-opis-vir{ font-size:13px; color:var(--md-text-muted); margin-top:18px !important; }
@media (max-width:600px){
  .md-opis{ font-size:16px; }
  .md-opis-tabela th{ width:42%; }
  .md-opis-tabela th, .md-opis-tabela td{ padding:9px 10px; }
}

/* ===== Referenčni projekti (21. 9. 2026): seznam, podstran projekta, Cemher po svetu ===== */
.md-crumbs{ display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--md-text-muted); padding: 22px 0 6px; }
.md-crumbs a{ color: var(--md-text-secondary) !important; text-decoration: none; }
.md-crumbs a:hover{ text-decoration: underline; }
.md-crumbs [aria-current]{ color: var(--md-text-secondary); }

.md-proj-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.md-proj-card{ display: flex; flex-direction: column; background: var(--md-bg); border: 1px solid var(--md-border); border-radius: var(--md-radius); overflow: hidden; text-decoration: none !important; transition: border-color .15s ease, box-shadow .2s ease; }
.md-proj-card:hover{ border-color: rgba(0,0,0,.28); box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.md-proj-media{ display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--md-bg-3); }
.md-proj-media img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.md-proj-card:hover .md-proj-media img{ transform: scale(1.035); }
.md-proj-body{ display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.md-proj-meta{ font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--md-text-muted); font-weight: 600; }
.md-proj-t{ font-size: 19px; line-height: 1.3; color: var(--md-text); font-weight: 400; }
.md-proj-d{ font-size: 15.5px; line-height: 1.6; color: var(--md-text-secondary); }
.md-proj-mat{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.md-proj-mat span{ font-size: 12px; padding: 3px 9px; border-radius: 99px; background: var(--md-siva); color: var(--md-text-secondary); font-weight: 600; }
.md-proj-more{ margin-top: auto; padding-top: 6px; font-size: 14px; color: var(--md-text); font-weight: 600; }
.md-proj-card-feat{ grid-column: 1 / -1; display: grid; grid-template-columns: 1.55fr 1fr; }
.md-proj-card-feat .md-proj-media{ aspect-ratio: auto; min-height: 420px; }
.md-proj-card-feat .md-proj-body{ padding: 34px 36px; justify-content: center; gap: 12px; }
.md-proj-card-feat .md-proj-t{ font-size: 30px; line-height: 1.2; }
.md-proj-card-feat .md-proj-more{ margin-top: 10px; }

.md-cem-teaser-in{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.md-cem-teaser-img{ display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--md-radius); }
.md-cem-teaser-img img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.md-cem-teaser-img:hover img{ transform: scale(1.03); }
.md-cem-teaser h2{ font-size: 28px; margin: 0 0 14px !important; }
.md-cem-teaser p{ max-width: 56ch; color: var(--md-text-secondary); }

/* Podstran projekta */
.md-proj-hero{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 44px; align-items: center; padding: 18px 0 48px; }
.md-proj-hero h1{ font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; margin: 0 0 18px !important; }
.md-proj-hero-img{ display: block; border-radius: var(--md-radius); overflow: hidden; background: var(--md-bg-3); cursor: zoom-in; }
.md-proj-hero-img img{ width: 100%; height: auto; max-height: 78vh; object-fit: cover; display: block; }
.md-proj-facts{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--md-border); }
.md-proj-facts div{ margin: 0; }
.md-proj-facts dt{ font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--md-text-muted); font-weight: 600; margin: 0 0 3px; }
.md-proj-facts dd{ margin: 0; color: var(--md-text); font-size: 15.5px; line-height: 1.45; }
.md-proj-story{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 48px; margin-top: 22px; align-items: start; }
.md-proj-text p{ font-size: 17.5px; line-height: 1.75; color: var(--md-text-secondary); margin: 0 0 18px; max-width: 68ch; }
.md-proj-text .md-proj-surf{ font-size: 15.5px; color: var(--md-text-body); padding-top: 14px; border-top: 1px solid var(--md-border); }
.md-proj-aside{ background: var(--md-siva); border-radius: var(--md-radius); padding: 24px; position: sticky; top: 110px; }
.md-proj-aside-t{ display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--md-text-muted); font-weight: 600; margin-bottom: 12px; }
.md-proj-mat-list{ list-style: none; margin: 0 0 18px; padding: 0; }
.md-proj-mat-list li{ margin: 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.md-proj-mat-list a{ display: grid; gap: 2px; padding: 12px 0; text-decoration: none !important; }
.md-proj-mat-list strong{ font-size: 16px; }
.md-proj-mat-list span{ font-size: 14px; color: var(--md-text-secondary); }
.md-proj-mat-list em{ font-style: normal; font-size: 13px; color: var(--md-text-muted); }
.md-proj-mat-list a:hover strong{ text-decoration: underline; }
.md-proj-aside .md-btn{ width: 100%; text-align: center; }
.md-proj-gal{ columns: 3 280px; column-gap: 14px; margin-top: 24px; }
.md-proj-gal-item{ display: block; break-inside: avoid; margin: 0 0 14px; border-radius: var(--md-radius); overflow: hidden; background: var(--md-bg-3); cursor: zoom-in; }
.md-proj-gal-item img{ width: 100%; height: auto; display: block; transition: transform .45s ease, opacity .2s ease; }
.md-proj-gal-item:hover img{ transform: scale(1.025); }
.md-proj-hvala p{ font-size: 16.5px; color: var(--md-text-secondary); margin: 10px 0 0; max-width: 70ch; }
.md-proj-nav{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; }
.md-proj-nav-i{ display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--md-border); border-radius: var(--md-radius); text-decoration: none !important; transition: border-color .15s ease; }
.md-proj-nav-i:hover{ border-color: rgba(0,0,0,.3); }
.md-proj-nav-i:last-child{ flex-direction: row-reverse; text-align: right; }
.md-proj-nav-img{ flex: 0 0 96px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--md-bg-3); }
.md-proj-nav-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.md-proj-nav-i small{ display: block; font-size: 12px; color: var(--md-text-muted); letter-spacing: .06em; }
.md-proj-nav-i strong{ display: block; font-size: 15.5px; font-weight: 600; color: var(--md-text); line-height: 1.35; }
.md-proj-all{ justify-content: center; margin-top: 18px; }

/* Lightbox s puščicami in podnapisom */
.md-lightbox .md-lb-fig{ margin: 0; max-width: min(1400px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.md-lightbox .md-lb-fig img{ max-height: calc(100vh - 110px); cursor: default; }
.md-lightbox figcaption{ color: rgba(255,255,255,.82); font-size: 14px; text-align: center; max-width: 80ch; line-height: 1.45; }
.md-lightbox .md-lb-nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; background: rgba(255,255,255,.08) !important; border: 0 !important; color: #fff !important; font-size: 40px; line-height: 1; cursor: pointer; border-radius: 3px; padding: 0 !important; }
.md-lightbox .md-lb-nav:hover{ background: rgba(255,255,255,.18) !important; }
.md-lightbox .md-lightbox-close, .md-lightbox .md-lightbox-close:hover{ background: transparent !important; color: #fff !important; }
.md-lb-prev{ left: 12px; } .md-lb-next{ right: 12px; }
.md-lb-single .md-lb-nav{ display: none; }

/* Cemher po svetu */
.md-cemher-opomba{ margin: -8px 0 8px; }
.md-cem-meta{ font-size: 13px; letter-spacing: .06em; color: var(--md-text-muted); font-weight: 600; margin: 14px 0 6px; text-transform: uppercase; }
.md-cem-opis{ font-size: 17px; line-height: 1.7; color: var(--md-text-secondary); max-width: 70ch; margin: 0 0 20px; }
.md-cem-gal{ display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.md-cem-gal-i{ display: block; overflow: hidden; border-radius: var(--md-radius); background: var(--md-bg-3); cursor: zoom-in; min-height: 0; }
.md-cem-gal-i img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.md-cem-gal-i:hover img{ transform: scale(1.03); }
.md-cem-gal-big{ grid-row: 1 / 3; }
.md-cem-gal-i:not(.md-cem-gal-big){ aspect-ratio: 4 / 3; }
.md-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 20px; }
.md-cem-tabela td, .md-cem-tabela th{ white-space: normal; }

@media (max-width: 1100px){
  .md-proj-grid{ grid-template-columns: repeat(2, 1fr); }
  .md-proj-card-feat .md-proj-media{ min-height: 340px; }
}
@media (max-width: 900px){
  .md-proj-hero{ grid-template-columns: 1fr; gap: 22px; padding-bottom: 32px; }
  .md-proj-hero-img{ order: -1; }
  .md-proj-hero-img img{ max-height: 62vh; }
  .md-proj-story{ grid-template-columns: 1fr; gap: 28px; }
  .md-proj-aside{ position: static; }
  .md-proj-card-feat{ grid-template-columns: 1fr; }
  .md-proj-card-feat .md-proj-media{ min-height: 0; aspect-ratio: 4 / 3; }
  .md-proj-card-feat .md-proj-body{ padding: 20px; }
  .md-proj-card-feat .md-proj-t{ font-size: 23px; }
  .md-cem-teaser-in{ grid-template-columns: 1fr; gap: 22px; }
  .md-cem-gal{ grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .md-cem-gal-big{ grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .md-cem-gal-i:not(.md-cem-gal-big){ aspect-ratio: 4 / 3; }
}
@media (max-width: 600px){
  .md-proj-grid{ grid-template-columns: 1fr; gap: 14px; }
  .md-proj-facts{ grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .md-proj-text p{ font-size: 16.5px; }
  .md-proj-gal{ columns: 1; }
  .md-proj-nav{ grid-template-columns: 1fr; }
  .md-proj-nav-i:last-child{ flex-direction: row; text-align: left; }
  .md-proj-nav-img{ flex-basis: 80px; }
  .md-lightbox .md-lb-nav{ width: 38px; height: 52px; font-size: 32px; }
  .md-lb-prev{ left: 4px; } .md-lb-next{ right: 4px; }
  .md-cem-teaser h2{ font-size: 23px; }
}

/* ===== Navigacija 21. 9.: iskalnik v glavi, mobilni podmeniji, lepljiva vrstica kategorij ===== */
.md-hsearch{ order: 2; margin-left: auto; flex: 0 0 auto; }
.md-hsearch + .md-header-cta{ margin-left: 0; }
.md-hsearch .md-hsearch-btn, .md-hsearch .md-hsearch-btn:hover{ display: inline-flex !important; align-items: center; gap: 8px; background: var(--md-bg) !important; color: var(--md-text) !important; border: 1px solid var(--md-border) !important; border-radius: 99px !important; padding: 8px 16px 8px 12px !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; cursor: pointer; transition: border-color .15s ease; }
.md-hsearch .md-hsearch-btn:hover, .md-hsearch .md-hsearch-btn[aria-expanded="true"]{ border-color: rgba(0,0,0,.35) !important; }
.md-hsearch-btn svg{ display: block; flex: 0 0 auto; }
.md-hsearch-l{ color: var(--md-text-secondary); min-width: 5.5em; text-align: left; }
@media (min-width: 861px) and (max-width: 1280px){
  .md-hsearch .md-hsearch-btn{ padding: 8px !important; border-radius: 50% !important; }
  .md-hsearch-l{ display: none; }
}

.md-iskanje{ position: fixed; left: 0; right: 0; top: var(--md-head-h, 64px); z-index: 119; background: var(--md-bg); border-bottom: 1px solid var(--md-border); box-shadow: 0 18px 40px rgba(0,0,0,.10); max-height: calc(100vh - var(--md-head-h, 64px)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.md-iskanje[hidden], .md-iskanje-ozadje[hidden]{ display: none !important; }
.md-iskanje-ozadje{ position: fixed; inset: 0; z-index: 118; background: rgba(0,0,0,.18); }
.md-iskanje-in{ max-width: 860px; margin: 0 auto; padding: 22px 16px 22px; }
.md-iskanje-form{ display: flex; align-items: center; gap: 10px; border: 1px solid rgba(0,0,0,.22); border-radius: var(--md-radius); padding: 6px 6px 6px 14px; background: var(--md-bg); }
.md-iskanje-form:focus-within{ border-color: var(--md-text); }
.md-iskanje-form svg{ flex: 0 0 auto; color: var(--md-text-muted); }
.md-iskanje-form input[type="search"]{ flex: 1 1 auto; min-width: 0; border: 0 !important; box-shadow: none !important; outline: 0 !important; background: transparent !important; font-size: 17px; padding: 10px 4px !important; color: var(--md-text); -webkit-appearance: none; appearance: none; }
.md-iskanje-form input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none; }
.md-iskanje-form .md-btn{ padding: 10px 18px; font-size: 14px; }
.md-iskanje .md-iskanje-zapri, .md-iskanje .md-iskanje-zapri:hover{ background: none !important; border: 0 !important; color: var(--md-text-muted) !important; font-size: 28px !important; line-height: 1 !important; padding: 2px 8px !important; cursor: pointer; }
.md-iskanje-rez{ margin-top: 6px; }
.md-iskanje-h{ font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--md-text-muted); font-weight: 600; margin: 16px 0 6px; }
.md-iskanje-seznam, .md-iskanje-strani{ list-style: none; margin: 0; padding: 0; }
.md-iskanje-seznam li, .md-iskanje-strani li{ margin: 0; border-bottom: 1px solid var(--md-border); }
.md-iskanje-seznam a{ display: flex; align-items: center; gap: 14px; padding: 9px 4px; text-decoration: none !important; color: var(--md-text) !important; }
.md-iskanje-seznam a:hover, .md-iskanje-strani a:hover{ background: var(--md-bg-2); }
.md-iskanje-seznam img, .md-iskanje-noimg{ width: 48px; height: 48px; object-fit: contain; background: #fff; border: 1px solid var(--md-border); border-radius: 2px; flex: 0 0 48px; display: block; }
.md-iskanje-ime{ flex: 1 1 auto; font-size: 15px; line-height: 1.35; }
.md-iskanje-cena{ flex: 0 0 auto; font-weight: 600; font-size: 14.5px; color: var(--md-text); }
.md-iskanje-kit{ font-weight: 400; color: var(--md-text-secondary); }
.md-iskanje-strani a{ display: block; padding: 10px 4px; font-size: 15px; text-decoration: none !important; color: var(--md-text) !important; }
.md-iskanje-vse{ display: inline-block; margin-top: 14px; font-weight: 600; font-size: 14.5px; color: var(--md-text) !important; }
.md-iskanje-prazno, .md-iskanje-nalaga{ font-size: 15px; color: var(--md-text-secondary); margin: 14px 0 4px; }
.md-iskanje-hitro{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: 13.5px; }
.md-iskanje-hitro span{ color: var(--md-text-muted); margin-right: 2px; }
.md-iskanje-hitro a{ padding: 5px 11px; border-radius: 99px; background: var(--md-siva); color: var(--md-text-secondary) !important; text-decoration: none !important; }
.md-iskanje-hitro a:hover{ background: var(--md-siva-hover); color: var(--md-text) !important; }

/* Spustni meni »Trgovina« na namizju: kategorije v dveh stolpcih, če jih je veliko */
@media (min-width: 861px){
  .main-navigation .primary-navigation ul.menu > li > ul.sub-menu:has(> li.md-nav-kat:nth-child(8)){ width: 440px; display: grid; grid-template-columns: 1fr 1fr; }
  .main-navigation .primary-navigation ul.menu > li > ul.sub-menu:has(> li.md-nav-kat:nth-child(8)) li{ width: auto; }
}

@media (max-width: 860px){
  .md-hsearch{ position: absolute; right: 146px; top: 12px; z-index: 6; margin: 0; }
  .md-scrolled .md-hsearch{ top: 5px; }
  .md-hsearch .md-hsearch-btn, .md-hsearch .md-hsearch-btn:hover{ background: transparent !important; }
  .md-hsearch .md-hsearch-btn:hover{ border-color: transparent !important; }
  .md-hsearch .md-hsearch-btn[aria-expanded="true"]{ border-color: var(--md-border) !important; }
  .handheld-navigation .dropdown-toggle:focus:not(:focus-visible){ outline: 0 !important; }
  .md-hsearch .md-hsearch-btn{ padding: 9px !important; border-radius: 50% !important; border-color: transparent !important; }
  .md-hsearch-l{ display: none; }
  .site-header .site-branding{ max-width: calc(100% - 196px) !important; }
  .md-iskanje-in{ padding: 14px 16px 18px; }
  .md-iskanje-form{ padding-left: 10px; }
  .md-iskanje-form svg{ display: none; }
  .md-iskanje-form .md-btn{ display: none; }
  .md-iskanje-form input[type="search"]{ font-size: 16px; }

  /* Mobilni meni: navpičen seznam čez celo širino (namizno pravilo flex/nowrap ga je raztegnilo v eno vrstico,
     zato so bile vidne samo prve postavke). */
  .main-navigation .handheld-navigation ul.menu{ display: block !important; flex-wrap: wrap; }
  .main-navigation .handheld-navigation ul.menu > li{ display: block; width: 100%; flex: none; float: none; }
  .main-navigation .handheld-navigation ul.sub-menu{ position: static !important; left: auto !important; width: 100% !important; float: none !important; display: block; box-shadow: none !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; margin: 0 !important; }
  .main-navigation .handheld-navigation ul.sub-menu li{ width: 100%; float: none; }
  /* Mobilni meni: podmeniji se odpirajo s puščico desno (Storefront doda gumb) */
  .handheld-navigation ul.menu li.menu-item-has-children > a{ padding-right: 64px !important; }
  .main-navigation .handheld-navigation .dropdown-toggle, .main-navigation .handheld-navigation .dropdown-toggle:hover, .main-navigation .handheld-navigation .dropdown-toggle:focus{ background: none !important; color: var(--md-text) !important; border-radius: 0 !important; }
  .handheld-navigation .dropdown-toggle{ width: 58px !important; height: 52px !important; border-left: 1px solid var(--md-border) !important; cursor: pointer; }
  .handheld-navigation .dropdown-toggle::after, .handheld-navigation ul.menu li button::after{
    content: "" !important; font-family: inherit !important; position: absolute; left: 50%; top: 50%;
    width: 9px; height: 9px; border-right: 1.7px solid var(--md-text); border-bottom: 1.7px solid var(--md-text);
    transform: translate(-50%, -70%) rotate(45deg); transition: transform .25s ease;
  }
  .handheld-navigation ul.menu li button.toggled-on::after{ transform: translate(-50%, -25%) rotate(225deg); }
  .handheld-navigation ul.sub-menu{ border-top: 0; }
  .handheld-navigation ul.sub-menu.toggled-on{ border-top: 1px solid var(--md-border); }
  .handheld-navigation ul.sub-menu li{ border-bottom-color: rgba(0,0,0,.06) !important; }
}

/* Trgovina: vrstica kategorij ostane pod glavo med pomikanjem (namizje in mobilno) */
.md-shop-nav{ position: sticky; top: var(--md-head-h, 64px); z-index: 60; background: var(--md-bg); padding-top: 10px; margin-top: -10px; }
@media (max-width: 860px){
  .md-shop-nav{ width: 100vw; margin-left: calc(50% - 50vw); padding: 10px 0 0; box-shadow: 0 6px 14px -12px rgba(0,0,0,.35); }
  .md-shop-nav::after{ content: ""; position: absolute; right: 0; top: 0; bottom: 1px; width: 42px; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 85%); transition: opacity .2s; }
  .md-shop-nav.md-shop-nav-konec::after{ opacity: 0; }
  .md-shop-nav-in{ gap: 8px; padding: 0 16px 10px; scroll-padding-inline: 16px; }
  .md-shop-nav-a{ font-size: 14px !important; padding: 8px 14px !important; border-radius: 99px; background: var(--md-siva); color: var(--md-text) !important; border: 1px solid transparent; font-weight: 400; }
  .md-shop-nav-a.je-aktiven{ background: var(--md-btn); color: #fff !important; }
}

/* Stran izdelka: podobni izdelki v videzu trgovine, masa pošiljke v podatkih */
.md-povezani{ clear: both; }
.md-povezani .related.products, .md-povezani .up-sells{ background: transparent !important; clear: both; padding: 48px 0 16px; margin: 0; border-top: 1px solid var(--md-border); }
.md-povezani .related.products > h2, .md-povezani .up-sells > h2{ font-size: 24px; margin: 0 0 20px; color: var(--md-text); font-weight: 400; }
.md-povezani ul.products{ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 !important; }
.md-povezani ul.products::before, .md-povezani ul.products::after{ display: none !important; }
.md-povezani ul.products li.product{ width: auto !important; float: none !important; margin: 0 !important; background: var(--md-bg); border: 1px solid var(--md-border); border-radius: var(--md-radius); padding: 12px 12px 16px !important; display: flex; flex-direction: column; }
.md-povezani ul.products li.product .button{ margin-top: auto; align-self: flex-start; }
.md-meta-masa{ display: block; }
.md-meta-masa span{ color: var(--md-text); }
@media (max-width: 900px){ .md-povezani ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.md-iskanje-kat{ display: flex; flex-wrap: wrap; gap: 8px; }
.md-iskanje-kat a{ padding: 7px 13px; border: 1px solid var(--md-border); border-radius: 99px; font-size: 14.5px; color: var(--md-text) !important; text-decoration: none !important; }
.md-iskanje-kat a:hover{ border-color: var(--md-text); }
.md-iskanje-kat small{ color: var(--md-text-muted); font-size: 12px; margin-left: 2px; }

/* ===== Izbirnik »Kaj obnavljate?« (vrh trgovine) ===== */
.md-izbirnik{ margin: 6px 0 34px; }
.md-izbirnik-head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 14px; }
.md-izbirnik-t{ font-size: 22px; color: var(--md-text); margin: 0; font-weight: 400; }
.md-izbirnik-head p:not(.md-izbirnik-t){ margin: 0; font-size: 14.5px; color: var(--md-text-body); }
.md-izbirnik-vrsta{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.md-izb{ display: flex; flex-direction: column; gap: 3px; background: var(--md-bg); border: 1px solid var(--md-border); border-radius: var(--md-radius); padding: 8px 8px 12px; text-decoration: none !important; transition: border-color .15s ease, box-shadow .2s ease; }
.md-izb:hover{ border-color: rgba(0,0,0,.3); box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.md-izb-img{ display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--md-bg-3); margin-bottom: 6px; }
.md-izb-img img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.md-izb:hover .md-izb-img img{ transform: scale(1.04); }
.md-izb-t{ font-size: 15.5px; color: var(--md-text); font-weight: 600; padding: 0 4px; }
.md-izb-c{ font-size: 13px; color: var(--md-text-secondary); padding: 0 4px; }
@media (max-width: 1100px){ .md-izbirnik-vrsta{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px){
  .md-izbirnik{ margin: 4px 0 26px; }
  .md-izbirnik-t{ font-size: 19px; }
  .md-izbirnik-vrsta{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 10px; margin: 0 -16px; padding: 0 16px 4px; }
  .md-izbirnik-vrsta::-webkit-scrollbar{ display: none; }
  .md-izb{ flex: 0 0 42%; scroll-snap-align: start; }
}

/* ===== Pogosto kupljeno skupaj (stran izdelka) ===== */
.md-skupaj{ clear: both; }
.md-skupaj-h{ font-size: 24px; margin: 0 0 6px !important; color: var(--md-text); font-weight: 400; }
.md-skupaj-sub{ margin: 0 0 18px; color: var(--md-text-secondary); font-size: 15px; }
.md-skupaj-seznam{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.md-skupaj-i{ position: relative; margin: 0; background: var(--md-bg); border: 1px solid var(--md-border); border-radius: var(--md-radius); transition: opacity .2s ease, border-color .15s ease; }
.md-skupaj-i:hover{ border-color: rgba(0,0,0,.28); }
.md-skupaj-i label, .md-skupaj-i > a{ display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; cursor: pointer; text-decoration: none !important; margin: 0; }
.md-skupaj-i input[type="checkbox"]{ flex: 0 0 auto; width: 18px; height: 18px; accent-color: #1A1A1A; margin: 0; }
.md-skupaj-img{ flex: 0 0 64px; width: 64px; height: 64px; border-radius: 2px; overflow: hidden; background: #fff; border: 1px solid var(--md-border); display: block; }
.md-skupaj-img img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.md-skupaj-barve{ background: conic-gradient(#E9E4DA, #CFC6B7, #A89F93, #7B746C, #4A4643, #2B2927, #B98F6B, #8C6B4F, #E9E4DA); }
.md-skupaj-txt{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.md-skupaj-ime{ font-size: 14.5px; line-height: 1.35; color: var(--md-text); }
.md-skupaj-ime em{ font-style: normal; color: var(--md-text-muted); }
.md-skupaj-cena{ font-size: 14.5px; font-weight: 600; color: var(--md-text); }
.md-skupaj-izberi{ font-weight: 400; color: var(--md-text-secondary); }
.md-skupaj-i{ display: flex; flex-direction: column; }
.md-skupaj-poglej{ align-self: flex-end; margin: -8px 12px 10px 0; font-size: 12px; color: var(--md-text-muted) !important; }
.md-skupaj-off{ opacity: .5; }
.md-skupaj-noga{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 18px; padding: 16px 18px; background: var(--md-siva); border-radius: var(--md-radius); }
.md-skupaj-skupaj{ margin: 0; font-size: 16px; color: var(--md-text); }
.md-skupaj-vsota{ font-size: 20px; margin-left: 4px; }
.md-skupaj-st{ color: var(--md-text-muted); font-size: 14px; }
.md-skupaj-btn[disabled]{ opacity: .4; cursor: not-allowed; }
@media (max-width: 600px){
  .md-skupaj-seznam{ grid-template-columns: 1fr; gap: 8px; }
  .md-skupaj-noga{ flex-direction: column; align-items: stretch; }
  .md-skupaj-btn{ width: 100%; text-align: center; }
}

/* Iskalnik: sinonimi, »Vprašajte asistenta« */
.md-iskanje-dno{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 14px; }
.md-iskanje-dno .md-iskanje-vse{ margin-top: 0; }
.md-iskanje .md-iskanje-asist, .md-iskanje .md-iskanje-asist:hover{ background: none !important; border: 0 !important; padding: 0 !important; color: var(--md-text-secondary) !important; font-size: 14px !important; text-decoration: underline !important; cursor: pointer; font-weight: 400 !important; }
.md-iskanje-prazno p{ margin: 0 0 12px; }
.md-iskanje-str{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; font-size: 14px; }
.md-iskanje-str span{ color: var(--md-text-muted); }
.md-iskanje-str a{ padding: 6px 13px; border: 1px solid var(--md-border); border-radius: 99px; color: var(--md-text) !important; text-decoration: none !important; background: var(--md-bg); }
.md-iskanje-str a:hover{ border-color: var(--md-text); }
.md-iskanje-vprasaj{ background: var(--md-siva); border-radius: var(--md-radius); padding: 22px 24px; margin: 8px 0 28px; }
.md-iskanje-vprasaj p{ margin: 0 0 14px; color: var(--md-text-secondary); max-width: 70ch; }

/* ===== Stran Izvedba (/pridobi-ponudbo): obrazec je jedro strani (22. 9. 2026) ===== */
.md-obrazec-top{ border: 1px solid rgba(0,0,0,.18); box-shadow: 0 14px 40px rgba(0,0,0,.07); }
.md-obrazec-top .md-form{ background: #fff; border-color: rgba(0,0,0,.16); box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.md-pon-dva{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.md-steps-kratki{ gap: 4px; margin-top: 10px !important; }
.md-steps-kratki li{ padding: 9px 0; }
.md-steps-kratki .md-step-d{ font-size: 14px; }
.md-pon-cena .md-lede{ font-size: 17px; margin-top: 8px; }
.md-pon-cena .md-checks-plain li{ font-size: 15px; }
.md-pon-konec{ text-align: center; padding-block: 48px; }
.md-pon-konec .md-h2{ max-width: 24ch; margin: 10px auto 12px; }
.md-pon-konec .md-lede{ margin: 0 auto; }
.md-pon-konec .md-cta{ justify-content: center; }
.md-pon-sticky{ position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 115; }
.md-pon-sticky[hidden]{ display: none !important; }
.md-pon-sticky .md-btn{ box-shadow: 0 10px 30px rgba(0,0,0,.22); padding: 13px 22px; border-radius: 99px; }
@media (max-width: 900px){
  .md-pon-dva{ grid-template-columns: 1fr; gap: 30px; }
  .md-pon-sticky{ left: 0; right: 0; bottom: 0; transform: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--md-border); backdrop-filter: blur(6px); }
  .md-pon-sticky .md-btn{ display: block; text-align: center; border-radius: var(--md-radius); box-shadow: none; }
  body:has(.md-pon-sticky:not([hidden])) .md-asistent{ bottom: 78px !important; }
}
@media (max-width: 860px){
  /* Na telefonu obrazec v prvi zaslon: brez naslovne fotografije, krajši uvod. */
  .page-template-template-pridobi-ponudbo .md-hero-media{ display: none; }
  .page-template-template-pridobi-ponudbo .md-hero{ padding-bottom: 8px; }
  .page-template-template-pridobi-ponudbo .md-hero h1{ font-size: 28px; }
  .page-template-template-pridobi-ponudbo .md-hero .md-lede{ font-size: 16px; }
  .page-template-template-pridobi-ponudbo .md-obrazec-top{ margin-top: 0; padding: 22px 16px !important; }
  .page-template-template-pridobi-ponudbo .md-obrazec-uvod .md-h2{ font-size: 22px; }
  .page-template-template-pridobi-ponudbo .md-obrazec-uvod .md-lede{ font-size: 15.5px; }
}

/* ===== Domača stran 22. 9.: prvi zaslon WHY–HOW–WHAT z eno fotografijo, nato asistent ===== */
.md-why{ position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: clamp(560px, 82vh, 820px); display: flex; align-items: flex-end; overflow: hidden; background: var(--md-bg-2); }
.md-why-bg{ position: absolute; inset: 0; }
.md-why-bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.md-why-bg::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 34%, rgba(255,255,255,.35) 62%, rgba(255,255,255,0) 100%); }
.md-why-in{ position: relative; z-index: 1; width: 100%; max-width: var(--md-content-w); margin: 0 auto; padding: 0 16px clamp(36px, 5vw, 64px); }
.md-why .md-eyebrow{ margin-bottom: 14px; color: var(--md-text-secondary); }
.md-why h1{ font-size: clamp(34px, 5vw, 62px); line-height: 1.06; letter-spacing: -.015em; max-width: 14ch; margin: 0 0 18px !important; }
.md-why-how{ font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--md-text-secondary); max-width: 52ch; margin: 0 0 22px; }
.md-why-what{ font-size: 14.5px; color: var(--md-text-body); margin: 0 0 10px; }
.md-why-cta{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.md-why-cta .md-btn{ padding: 13px 22px; }
.md-btn-light{ background: rgba(255,255,255,.85) !important; }
.md-why-ask{ margin-left: 6px; color: var(--md-text) !important; text-decoration: underline; text-underline-offset: 4px; font-size: 15px; }
body:has(.md-why) .site-header{ margin-bottom: 0 !important; }
.md-ask-clean{ padding-top: clamp(56px, 8vw, 96px) !important; background: var(--md-bg); border-bottom: 1px solid var(--md-border); }
.md-ask-clean .md-ask-h{ font-size: clamp(30px, 4vw, 48px); line-height: 1.1; margin: 0 0 14px !important; max-width: 16ch; margin-inline: auto !important; }
@media (max-width: 860px){
  .md-why{ min-height: clamp(520px, 78vh, 700px); }
  .md-why-bg img{ object-position: 60% center; }
  .md-why h1{ font-size: 32px; }
  .md-why-cta .md-btn{ flex: 1 1 100%; text-align: center; }
  .md-why-ask{ margin: 4px 0 0; }
  .md-ask-clean{ text-align: center; padding-top: 44px !important; }
  .md-ask-clean .md-ask-h{ margin-left: auto !important; }
  .md-ask-clean .md-ask-lede, .md-ask-clean .md-ask-chips{ margin-left: auto; justify-content: center; }
}

/* Naslovnica v03 (24. 9. 2026): besedilo levo s prelivom samo čez levo polovico — otok in material desno ostaneta izrazita; na telefonu slika nad besedilom. */
.md-why{ align-items: center; min-height: clamp(600px, 48vw, 800px); }
.md-why-bg img{ object-position: center center; }
.md-why-bg::after{ background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.86) 26%, rgba(255,255,255,.6) 40%, rgba(255,255,255,.06) 58%, rgba(255,255,255,0) 66%); }
.md-why-bg picture{ display: block; width: 100%; height: 100%; }
.md-why-in{ padding-top: clamp(36px, 5vw, 64px); }
.md-why-in > *{ max-width: min(560px, 46vw); }
.md-why h1{ max-width: 12ch; }
.md-why-how{ font-size: clamp(16px, 1.3vw, 19px); color: var(--md-text-body); }
/* Telefon (24. 9. 2026, Andrej — potrjena različica B): cela scena zgoraj (78vw) z mehkim prelivom v belo,
   pod njo celoten naslov in podnaslov; gumbi ostanejo na prvem zaslonu. */
@media (max-width: 860px){
  .md-why{ display: block; min-height: 0; background: var(--md-bg); }
  .md-why-bg{ position: relative; inset: auto; height: 78vw; }
  .md-why-bg img{ object-position: 58% center; }
  .md-why-bg::after{ display: block; background: linear-gradient(to top, var(--md-bg, #fff) 0%, rgba(255,255,255,.7) 14%, rgba(255,255,255,0) 36%); }
  .md-why-in{ margin-top: -30px; padding: 0 16px 34px; }
  .md-why-in > *{ max-width: none; }
  .md-why h1{ font-size: clamp(32px, 9vw, 40px); max-width: 14ch; }
}



/* Prostori kot kompaktne ploščice (brez fotografij) */
.md-prostori{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.md-prostor{ display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--md-bg); border: 1px solid var(--md-border); border-radius: var(--md-radius); text-decoration: none !important; transition: border-color .15s ease, transform .15s ease; }
.md-prostor:hover{ border-color: rgba(0,0,0,.3); transform: translateY(-1px); }
.md-prostor-t{ font-size: 18px; color: var(--md-text); }
.md-prostor-d{ font-size: 14px; color: var(--md-text-body); line-height: 1.45; }
.md-prostor-c{ margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--md-text); }
@media (max-width: 860px){ .md-prostori{ grid-template-columns: 1fr 1fr; gap: 10px; } .md-prostor{ padding: 14px 14px; } .md-prostor-t{ font-size: 16px; } .md-prostor-d{ display: none; } }

/* En izpostavljen projekt + seznam ostalih */
.md-ref-feat{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; margin-top: 24px; }
.md-ref-feat-img{ display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--md-radius); background: var(--md-bg-3); }
.md-ref-feat-img img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.md-ref-feat-img:hover img{ transform: scale(1.03); }
.md-ref-feat-txt h3{ font-size: 26px; margin: 8px 0 10px !important; }
.md-ref-feat-txt h3 a{ text-decoration: none; }
.md-ref-feat-txt h3 a:hover{ text-decoration: underline; }
.md-ref-feat-txt p{ color: var(--md-text-secondary); margin: 0 0 16px; }
.md-ref-list{ list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--md-border); }
.md-ref-list li{ display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--md-border); font-size: 15px; }
.md-ref-list a{ text-decoration: none; color: var(--md-text); }
.md-ref-list a:hover{ text-decoration: underline; }
.md-ref-list span{ color: var(--md-text-muted); font-size: 13px; white-space: nowrap; }
@media (max-width: 900px){ .md-ref-feat{ grid-template-columns: 1fr; gap: 18px; } .md-ref-feat-txt h3{ font-size: 22px; } }

/* Video (YouTube click-to-load in lastni mp4) */
.md-video{ margin: 22px 0 0; }
.md-video-play{ position: relative; display: block; width: 100%; padding: 0; border: 0 !important; background: #111 !important; border-radius: var(--md-radius); overflow: hidden; cursor: pointer; aspect-ratio: 16/9; }
.md-video-play img{ width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.md-video-btn{ position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.md-video-btn::after{ content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #111; }
.md-video-play:hover .md-video-btn{ transform: scale(1.06); }
.md-video iframe, .md-video video{ width: 100%; aspect-ratio: 16/9; height: auto; display: block; border: 0; border-radius: var(--md-radius); background: #111; }
.md-video-cap{ margin: 10px 0 0; font-size: 13px; color: var(--md-text-secondary); }
/* Pokončni (telefon) in kvadratni videi — brez črnih pasov (24. 9. 2026) */
.md-video-v{ max-width: 400px; margin-inline: auto; }
.md-video-v video{ aspect-ratio: 9/16; }
.md-video-sq{ max-width: 560px; margin-inline: auto; }
.md-video-sq video{ aspect-ratio: 1/1; }
.md-video-v .md-video-cap, .md-video-sq .md-video-cap{ text-align: center; }

/* Vodoravni pas fotografij projekta (Claywash Terra) */
.md-strip{ display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 4px 0 12px; margin: 22px -16px 0; padding-left: 16px; padding-right: 16px; }
.md-strip a{ flex: 0 0 auto; scroll-snap-align: start; display: block; height: 240px; border-radius: var(--md-radius); overflow: hidden; background: var(--md-bg-3); }
.md-strip img{ height: 100%; width: auto; display: block; object-fit: cover; transition: transform .3s; }
.md-strip a:hover img{ transform: scale(1.03); }
@media (min-width: 900px){ .md-strip{ margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .md-strip a{ height: 300px; } }
.md-strip-meta{ display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; font-size: 13px; color: var(--md-text-secondary); }

.md-tds-list{ list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.md-tds-list a{ font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.md-tds-list a::before{ content: "⭳ "; }
.md-toner-barva{ margin: 6px 0 14px; }
.md-toner-barva select{ display: block; margin-top: 6px; min-width: 240px; }
.md-proj-moto{ font-style: italic; color: var(--md-text-secondary); margin: 2px 0 10px; }

/* Naslovnice kategorij na uvodni strani trgovine (22. 9. 2026): vizuali v prostoru so 4 : 3,
   zato ploščic ne režemo v kvadrat (na KIT naslovnici bi sicer izpadel del materialov). */
.post-type-archive-product .woocommerce ul.products li.product-category img,
.woocommerce.post-type-archive-product ul.products li.product-category img{ aspect-ratio: 4 / 3; }

/* Trgovina Melje — okvir za kratko omembo na drugih straneh (22. 9. 2026). */
.md-melje-box{ display:flex; gap:28px; align-items:flex-end; justify-content:space-between; border:1px solid var(--md-border); border-radius:var(--md-radius); background:#fff; padding:28px 30px; margin:28px 0; }
.md-melje-box .md-h3{ margin-top:6px; }
.md-melje-box p{ max-width:680px; }
.md-melje-box .md-cta{ margin:0; flex-shrink:0; }
.md-melje .md-cards{ margin-bottom:34px; }
.md-melje-two{ margin-top:8px; }
@media (max-width: 760px){ .md-melje-box{ flex-direction:column; align-items:flex-start; padding:22px 18px; } }

/* Knjižnica dokumentacije (22. 9. 2026) */
.md-dok-filter{ position:sticky; top:calc(var(--md-head-h, 64px) + 8px); z-index:5; background:var(--md-bg); padding:14px 0 16px; border-bottom:1px solid var(--md-border); margin-bottom:28px; }
.md-dok-filter input[type="search"]{ width:100%; padding:14px 16px; border:1px solid var(--md-border); border-radius:var(--md-radius); font-size:16px; background:#fff; }
.md-dok-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.md-dok-chips .md-dok-chip{ border:1px solid var(--md-border) !important; background:#fff !important; border-radius:999px !important; padding:7px 14px !important; font-size:13.5px !important; font-weight:500 !important; cursor:pointer; color:var(--md-text) !important; box-shadow:none !important; line-height:1.3 !important; }
.md-dok-chips .md-dok-chip:hover{ border-color:var(--md-text) !important; }
.md-dok-chips .md-dok-chip.is-on{ background:var(--md-text) !important; color:#fff !important; border-color:var(--md-text) !important; }
.md-dok-sk{ margin-bottom:36px; }
.md-dok-list{ list-style:none !important; margin:0 !important; padding:0 !important; border:1px solid var(--md-border); border-radius:var(--md-radius); background:#fff; }
.md-dok{ display:grid; grid-template-columns:44px 1fr auto auto; gap:16px; align-items:center; padding:16px 18px; border-top:1px solid var(--md-border); margin:0 !important; }
.md-dok:first-child{ border-top:0; }
.md-dok[hidden], .md-dok-sk[hidden]{ display:none; }
.md-dok-ico{ width:40px; height:48px; border:1px solid var(--md-border); border-radius:3px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px; font-size:10px; font-weight:700; letter-spacing:.06em; color:#9b2c2c; background:linear-gradient(135deg,#fff 70%,#f1f1f1 70%); }
.md-dok-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.md-dok-n{ font-weight:600; color:var(--md-text); text-decoration:none; }
.md-dok-n:hover{ text-decoration:underline; text-underline-offset:3px; }
.md-dok-o{ font-size:14px; color:var(--md-text-secondary); }
.md-dok-meta{ font-size:12.5px; color:var(--md-text-muted, #7a7a7a); white-space:nowrap; }
.md-dok-dl{ border:1px solid var(--md-text); border-radius:3px; padding:8px 14px; font-size:13px; font-weight:600; color:var(--md-text); text-decoration:none; white-space:nowrap; }
.md-dok-dl:hover{ background:var(--md-text); color:#fff; }
.md-dok-prazno{ padding:18px; border:1px dashed var(--md-border); border-radius:var(--md-radius); }
.md-dok-gate .md-notice{ padding:14px 16px; border-radius:var(--md-radius); margin-bottom:14px; font-size:15px; }
.md-notice-ok{ background:#eef7f0; border:1px solid #b9dcc2; }
.md-notice-err{ background:#fbeeee; border:1px solid #e3b9b9; }
.md-dok-gate-list{ margin:0 0 0 18px; }
.md-dok-form .md-check{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--md-text-secondary); margin:6px 0 16px; }
.md-dok-form .md-check input{ width:18px; height:18px; margin-top:2px; accent-color:#1A1A1A; flex:0 0 auto; }
.md-dok-form select{ width:100%; }
@media (max-width: 760px){
  .md-dok{ grid-template-columns:36px 1fr; gap:10px 12px; padding:14px; }
  .md-dok-meta{ grid-column:2; white-space:normal; }
  .md-dok-dl{ grid-column:2; justify-self:start; }
  .md-dok-ico{ width:34px; height:42px; }
  .md-dok-filter{ position:static; }
}

/* Claywash — referenčni projekt v okvirju (22. 9. 2026): namesto vodoravnega drsenja urejena mreža 7 fotografij,
   vseh 12 v povečavi. Okvir: bela podlaga, tanka obroba, enakomerni razmiki kot v arhitekturni reviji. */
.md-cw-okvir{ margin:26px 0 0; background:#fff; border:1px solid var(--md-border); border-radius:var(--md-radius); padding:14px; box-shadow:0 18px 40px rgba(40,30,20,.06); }
.md-cw-mreza{ display:grid; grid-template-columns:repeat(12, 1fr); grid-auto-rows:118px; gap:10px; }
.md-cw-mreza a{ display:block; overflow:hidden; border-radius:2px; background:var(--md-bg-3); position:relative; }
.md-cw-mreza a[hidden]{ display:none; }
.md-cw-mreza img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease, filter .3s; }
.md-cw-mreza a:hover img{ transform:scale(1.03); }
.md-cw-mreza a::after{ content:"⤢"; position:absolute; right:10px; bottom:10px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.88); color:#1a1a1a; font-size:15px; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
.md-cw-mreza a:hover::after{ opacity:1; }
.md-cw-a{ grid-column:span 8; grid-row:span 4; }
.md-cw-b{ grid-column:span 4; grid-row:span 4; }
.md-cw-c{ grid-column:span 3; grid-row:span 3; }
.md-cw-d{ grid-column:span 6; grid-row:span 3; }
.md-cw-e{ grid-column:span 3; grid-row:span 3; }
.md-cw-f{ grid-column:span 7; grid-row:span 3; }
.md-cw-g{ grid-column:span 5; grid-row:span 3; }
.md-cw-b img, .md-cw-c img, .md-cw-e img, .md-cw-g img{ object-position:center 40%; }
.md-cw-pod{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:14px 4px 2px; }
.md-cw-pod .md-strip-meta{ margin:0; }
.md-cw-vse{ padding:9px 16px !important; font-size:14px !important; cursor:pointer; }
@media (max-width: 900px){
  .md-cw-mreza{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:92px; gap:8px; grid-auto-flow:dense; }
  .md-cw-a, .md-cw-d, .md-cw-f{ grid-column:span 2; grid-row:span 3; }
  .md-cw-b, .md-cw-c, .md-cw-e, .md-cw-g{ grid-column:span 1; grid-row:span 3; }
  .md-cw-okvir{ padding:8px; }
}

/* --------------------------------------------------------------------------
   Slikovni paket v02 (23. 9. 2026): slike z napisom, notranji split, odtenki v prostoru
   -------------------------------------------------------------------------- */
.md-fig{ margin: 28px 0 0; }
.md-fig img{ width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--md-radius); display: block; }
.md-fig figcaption{ font-size: 13.5px; color: var(--md-text-muted); margin-top: 10px; line-height: 1.5; }
.md-fig-s{ max-width: 560px; }
.md-fig-w{ max-width: 760px; }
.md-split-media .md-fig{ margin: 0; }
.md-split-in{ margin: 8px 0 32px; }
.md-split-in .md-steps{ margin-top: 0; }
.md-odtenki{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.md-odtenki-slika img{ width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--md-radius); display: block; }
.md-odtenki-gumbi{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.md-odtenek{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--md-border, #ddd8cf) !important; border-radius: 10px; background: #fff !important; color: var(--md-text, #1f1f1f) !important; font: inherit; font-size: 13px; letter-spacing: .06em; cursor: pointer; text-align: left; }
.md-odtenek:hover, .md-odtenek.is-on{ border-color: var(--md-text, #1f1f1f) !important; }
.md-odtenek-c{ width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.md-odtenki .md-note{ grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 860px){
  .md-odtenki{ grid-template-columns: 1fr; }
  .md-odtenki-gumbi{ grid-template-columns: repeat(2, 1fr); }
}
.md-kat-uvod{ display: grid; gap: 20px; margin: 0 0 28px; }
.md-kat-uvod-2{ grid-template-columns: 1fr 1fr; }
.md-kat-uvod-el{ display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; background: var(--md-siva); border-radius: var(--md-radius); padding: 14px; }
.md-kat-uvod-1 .md-kat-uvod-el{ grid-template-columns: 300px 1fr; }
.md-kat-uvod-el img{ width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--md-radius) * .7); display: block; }
.md-kat-uvod-el p{ margin: 6px 0 8px; font-size: 14.5px; line-height: 1.55; }
.md-kat-uvod-el a{ font-size: 14px; }
@media (max-width: 860px){ .md-kat-uvod-2{ grid-template-columns: 1fr; } .md-kat-uvod-el, .md-kat-uvod-1 .md-kat-uvod-el{ grid-template-columns: 140px 1fr; } }

/* Kaj urejate? — poslovni prostor s fotografijo (paket v03.1): slika v ozadju ploščice, besedilo na belem prelivu */
.md-prostor-foto{ position: relative; isolation: isolate; overflow: hidden; }
.md-prostor-foto .md-prostor-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; z-index: -2; }
.md-prostor-foto::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 45%, rgba(255,255,255,.35) 100%); }

/* Noga 24. 9. 2026: zložljivi razdelki na telefonu, kontakt na vrhu, krajša in urejena */
.md-footer-acc summary{ list-style: none; cursor: default; }
.md-footer-acc summary::-webkit-details-marker{ display: none; }
.md-footer-acc summary h3{ pointer-events: none; }
.md-footer-quick{ display: flex; flex-wrap: wrap; gap: 8px; }
.md-footer-pill{ display: inline-block; padding: 7px 12px; border: 1px solid var(--md-border); border-radius: 999px; color: var(--md-text) !important; font-size: 13.5px; background: var(--md-bg); }
.md-footer-pill:hover{ border-color: rgba(0,0,0,.35); }
.md-footer-hours{ font-size: 13px !important; }
.md-footer-legal{ font-size: 12.5px !important; color: var(--md-text-muted) !important; }
@media (max-width: 860px){
  .md-footer{ padding: 28px 16px 22px; }
  .md-footer-grid{ display: flex; flex-direction: column; gap: 0; }
  .md-footer-contact{ order: -1; padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid var(--md-border); }
  .md-footer-contact h3{ display: none; }
  .md-footer-contact p{ margin-bottom: 8px; font-size: 13.5px; }
  .md-footer-acc{ border-bottom: 1px solid var(--md-border); }
  .md-footer-acc summary{ cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
  .md-footer-acc summary h3{ margin: 0; }
  .md-footer-acc summary::after{ content: "+"; font-size: 20px; line-height: 1; color: var(--md-text-secondary); }
  .md-footer-acc[open] summary::after{ content: "−"; }
  .md-footer-acc ul{ display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; padding: 0 0 14px; }
  .md-footer-acc li{ margin: 0; font-size: 14px; }
  .md-footer-acc li a{ display: block; padding: 6px 0; }
  .md-footer-bottom{ flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 0; font-size: 12px; }
}