/*
 * IGOR IVANOVIC 2I — zajednički stilovi (osnova, header, hero, mobilni meni, footer,
 * dugmad, galerija, CTA blok, "split" sekcije, FAQ). Stilovi pojedinačnih strana su u
 * assets/css/pages/*.css.
 *
 * Breakpointi: laptop ≤1366, tablet_extra ≤1200, tablet ≤1024,
 * mobile_extra ≤880, mobile ≤767. Na ≤921px html font-size 91.2% na ≤921px (sve u rem se smanjuje).
 */

/* ---------------------------------------------------------------------------
   Osnova
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
@media (max-width: 921px) { html { font-size: 91.2%; } }

body {
    margin: 0;
    padding: 0 8px;
    background: #fff;
    color: #334155;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html.mnav-open, html.mnav-open body { overflow: hidden; }

img, video, svg { vertical-align: middle; }
img { max-width: 100%; height: auto; border: 0; }
picture { display: contents; }  /* AVIF omotač iz pic(): bez uticaja na raspored */
picture > source { display: none; }
a { color: #046bd2; text-decoration: none; }
a:hover, a:focus { color: #045cb4; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
h1, h2, h3, h4, h5, h6 { color: #334155; font-weight: 600; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; }
::selection { background-color: #046bd2; color: #fff; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 7px; top: -1px; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); z-index: 100000;
}
.skip-link:focus {
    width: auto; height: auto; clip: auto; margin: 0; top: 5px; left: 5px;
    padding: 15px 23px 14px; background: #f1f1f1; color: #21759b;
    font-size: 14px; font-weight: 700; line-height: normal; box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
}
.site-main:focus { outline: 0; }  /* fokus posle "Preskoči na sadržaj" (main.js) */

/* Tipografija: Poppins + globalni letter-spacing -1px */
.ff { font-family: "Poppins", Sans-serif; }

/* ---------------------------------------------------------------------------
   Dugme ("dashed" stil sajta)
   --------------------------------------------------------------------------- */
.btn-w { text-align: left; }
.btn-w--right { text-align: right; }
.btn {
    display: inline-block;
    padding: 20px 60px;
    border: 1px dashed #1E1E1E;
    border-radius: 4px;
    background: #fff;
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    transition: all .3s;
}
.btn > span { display: inline-block; }
.btn:hover, .btn:focus { background: #1E1E1E; color: #fff; }
.btn--light { background: transparent; color: #fff; border-color: #fff; }   /* na tamnoj pozadini */
.btn--light:hover, .btn--light:focus { background: #fff; color: #000; border-color: #fff; }
.btn--white-hover:hover, .btn--white-hover:focus { background: #fff; color: #000; border-color: #fff; }
@media (max-width: 1366px) { .btn { font-size: 18px; } }
@media (max-width: 1024px) {
    .btn { font-size: 16px; padding: 14px 30px; }
    .btn-w { text-align: left; }
    .btn-w .btn { width: 100%; }  /* tablet: dugme preko cele širine */
}

/* ---------------------------------------------------------------------------
   Header (bela traka na stranama bez hero-a)
   --------------------------------------------------------------------------- */
.hdr { margin-top: 8px; }
.bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px;
}
.bar__logo { display: block; flex: 0 0 auto; line-height: 0; }
.bar__logo img { display: block; width: 80px; }
.hdr .bar__logo img { filter: brightness(20%) contrast(100%) saturate(127%); }

.hnav { flex: 0 0 auto; }
.hnav ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.hnav li { position: relative; display: flex; }
.hnav a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px;
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.5px;
    transition: color .2s linear;
}
/* Podvlačenje aktivne/hover stavke ("underline" + "grow") */
.hnav a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 0;
    background-color: #1E1E1E;
    transition: .3s cubic-bezier(.58, .3, .005, 1);
}
.hnav a:hover::after, .hnav a:focus::after, .hnav a[aria-current="page"]::after {
    left: 0; width: 100%; height: 2px; opacity: 1;
}
.hero .hnav a { color: #fff; }
.hero .hnav a::after { background-color: #fff; }

/* Shop i korpa (desno u traci); na ≤1024px samo ikonica korpe pored hamburgera */
.bar__shop {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 22px;
    font-family: "Poppins", Sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: -1px;
}
.bar__shop a { color: #1E1E1E; text-underline-offset: 5px; }
.bar__shop a:hover, .bar__shop a:focus, .bar__shop a[aria-current="page"] { text-decoration: underline; }
.hero .bar__shop a { color: #fff; }
.bar__cart {
    position: relative;
    display: none;
    align-items: center;
    margin-left: auto;
    padding: 6px;
    color: #1E1E1E;
}
.bar__cart svg { display: block; width: 24px; height: 24px; }
.bar__cart-n {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #1E1E1E;
    color: #fff;
    font-family: "Poppins", Sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 17px;
    text-align: center;
}
.hero .bar__cart { color: #fff; }
.hero .bar__cart-n { background: #fff; color: #1E1E1E; }

/* Hamburger (ikonica sa isprekidanim okvirom) */
.burger {
    display: none;
    flex: 0 0 auto;
    align-self: center;
    margin: 0 0 0 8px;
    padding: 0;
    border: 1px dashed #000;
    border-radius: 4px;
    background: none;
    color: inherit;
    line-height: inherit;
    text-align: center;
    cursor: pointer;
}
.burger__i { display: inline-block; padding: 10px 8px 3px; font-size: 18px; line-height: 1; }
.burger svg { display: block; width: auto; height: 18px; }
.burger path { stroke: #1E1E1E; }
.hero .burger { border-color: #fff; }
.hero .burger path { stroke: #fff; }

@media (max-width: 1024px) {
    .hnav, .bar__shop { display: none; }
    .burger { display: block; }
    .bar__cart { display: flex; }
    .bar { padding: 8px; }
}
@media (max-width: 767px) {
    .hdr .bar__logo { width: 100px; }
}

/* ---------------------------------------------------------------------------
   Hero (početna, O nama, Igor Ivanović, Nova kolekcija)
   --------------------------------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 854px;
    margin-top: 8px;
    background-color: #000;
    overflow: hidden;
}
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    opacity: .5;
}
.hero__video { display: none; }
.hero > .bar, .hero__title { position: relative; }
/* Logo i meni su na svim stranama isti (80px), da se header ne pomera pri prelasku sa strane na stranu */
.hero__title { display: flex; align-items: flex-end; padding: 24px; }
.hero__title h1 {
    width: 60%;
    max-width: 60%;
    color: #fff;
    font-family: "Poppins", Sans-serif;
    font-size: 100px;
    font-weight: 400;
    line-height: 85px;
    letter-spacing: -1px;
}
@media (max-width: 1366px) {
    .hero__title h1 { width: 70%; max-width: 70%; font-size: 70px; line-height: 60px; }
}
@media (max-width: 1200px) {
    .hero__title h1 { font-size: 60px; line-height: 50px; }
}
@media (max-width: 1024px) {
    .hero { min-height: 828px; }
    .hero > .bar { padding: 16px; }
    .hero__title { padding: 16px; }
    .hero__title h1 { width: 100%; max-width: 100%; font-size: 30px; line-height: 30px; }
}
@media (max-width: 767px) {
    .hero { min-height: 70vh; }
    /* Početna na telefonu: video umesto slike (kao original) */
    .hero--home .hero__bg { display: none; }
    .hero--home .hero__video {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ---------------------------------------------------------------------------
   Mobilni meni (ulaz fadeInRight 0.2s)
   --------------------------------------------------------------------------- */
.mnav {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    overflow: hidden;
    animation-duration: .2s;
    animation-fill-mode: both;
}
.mnav[hidden] { display: none; }
.mnav.is-open { animation-name: fadeInRight; }
.mnav.is-closing { animation-name: fadeInRight; animation-direction: reverse; }
.mnav__panel {
    width: 100vw;
    height: 100%;
    padding: 0 16px 0 0;
    overflow-y: auto;
    line-height: 1.5;
}
.mnav__in {
    position: relative;
    left: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    margin: 8px 0;
    padding: 8px;
}
.mnav__logo { display: block; width: 80px; line-height: 0; }
.mnav__logo img { display: block; width: 80px; filter: brightness(20%) contrast(100%) saturate(0%); }
.mnav__close {
    flex: 0 0 auto;
    align-self: center;
    margin: 0 0 0 8px;
    padding: 0;
    border: 1px dashed #000;
    border-radius: 4px;
    background: none;
    line-height: inherit;
    cursor: pointer;
}
.mnav__close span { display: inline-block; padding: 10px 15px 4px; font-size: 18px; line-height: 1; }
.mnav__close svg { display: block; position: relative; width: auto; height: 18px; }
.mnav__list { width: 100%; list-style: none; margin: 0; padding: 20px 0 0; }
.mnav__list li {
    margin: 0 0 8px;
    padding: 15px 16px;
    border: 1px dashed #D3D3D3;
    border-radius: 4px;
    line-height: 1.5;
}
.mnav__list a {
    display: flex;
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.5px;
}
.mnav__list a.is-soon { color: #b4b4b4; }
@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.ftr { margin-top: 100px; }
.ftr__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    border: 1px dashed #D3D3D3;
}
.ftr__logo { display: block; width: 20%; padding: 32px; line-height: 0; }
.ftr__logo img { width: 185px; filter: brightness(20%) contrast(100%) saturate(100%); }
.ftr__about { width: 80%; padding: 32px 20px 32px 800px; }
.ftr__about p {
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -.5px;
    text-align: right;
}
.ftr__cols { display: flex; width: 100%; }
.ftr__col { width: 25%; padding: 32px; }
.ftr__col h2 {
    margin: 0 0 20px;
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3em;
    letter-spacing: -1px;
}
.ftr__line { margin: 0 0 20px; padding: 15px 0; }
/* Jednostavne strane (članak, arhive, prodavnica, pravne strane): h2 naslovi imaju
   donju marginu .7em — vidi se i u footeru */
.is-simple .ftr__col h2 { margin-bottom: calc(20px + .7em); }
.ftr__line::before { content: ""; display: block; border-top: 1px dashed #D3D3D3; }
.ftr__col ul { list-style: none; margin: 0; padding: 0; }
.ftr__col li { display: flex; padding-bottom: 5px; }
.ftr__col li + li { margin-top: 5px; }
.ftr__col li:last-child { padding-bottom: 0; }
.ftr__col a {
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -1px;
}
.ftr__bottom { padding: 0 0 8px; }
.ftr__bottom-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    padding: 32px;
    border: 1px dashed #D3D3D3;
    border-top: 0;
}
.ftr__bottom p {
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
}
/* Podaci o prodavcu (zakonski obavezni) — ceo red ispod */
.ftr__bottom p.ftr__legal { width: 100%; margin-top: 14px; color: #555; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
@media (max-width: 1366px) {
    .ftr__about { padding-left: 100px; }
}
@media (max-width: 1024px) {
    .ftr { margin-top: 60px; }
    .ftr__logo { width: 100%; padding: 16px 16px 0; text-align: center; }
    .ftr__logo img { width: 200px; }
    .ftr__about { width: 100%; padding: 16px; }
    .ftr__about p { text-align: left; }
    .ftr__cols { flex-wrap: wrap; }
    .ftr__col { width: 100%; padding: 16px; }
    .ftr__col h2 { font-size: 18px; }
    .ftr__line { padding: 0; }
    .ftr__col a { font-size: 14px; }
    .ftr__bottom-in { padding: 16px; }
    .ftr__bottom p { width: 100%; font-size: 14px; }
    .ftr__bottom p + p { margin-top: 5px; }
}

/* ---------------------------------------------------------------------------
   Dugme "nazad na vrh" (samo ≥769px)
   --------------------------------------------------------------------------- */
.to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 99;
    display: none;
    width: 2.1em;
    height: 2.1em;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 15px;
    line-height: 2.1;
    text-align: center;
    cursor: pointer;
}
.to-top svg { width: 1em; height: auto; margin-left: 0; fill: currentColor; vertical-align: middle; transform: translate(0, -20%) rotate(180deg); }
.to-top.is-visible { display: block; }
@media (max-width: 768px) { .to-top.is-visible { display: none; } }

/* ---------------------------------------------------------------------------
   Zajednički blokovi
   --------------------------------------------------------------------------- */

/* Naslov + podnaslov (sekcije sa 100px vertikalnog razmaka) */
.intro { padding: 0 8px; }
.intro__in { display: flex; flex-wrap: wrap; align-content: center; padding: 100px 0; }
.intro__in > * { width: 100%; }
.intro__h {
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 60px;
    font-weight: 400;
    line-height: 60px;
    letter-spacing: -4px;
}
.intro__p {
    margin-top: 8px;  /* 16px razmak widgeta - 8px */
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 60px;
    letter-spacing: -1px;
}
.intro--end { text-align: right; }
@media (max-width: 1366px) { .intro__h { font-size: 50px; line-height: 50px; } }
@media (max-width: 1200px) { .intro__p { line-height: 21px; } }
@media (max-width: 1024px) {
    .intro__in { padding: 60px 0 16px; }
    .intro__h { font-size: 30px; line-height: 30px; letter-spacing: -2px; }
    .intro__p { font-size: 14px; line-height: 25px; letter-spacing: -.5px; }
}

/* Slika preko cele širine */
.wide-img { margin-bottom: 8px; }
.wide-img img { display: block; width: 100%; height: 854px; object-fit: cover; object-position: center center; }
@media (max-width: 1024px) { .wide-img { margin-top: 30px; } }
@media (max-width: 767px) { .wide-img img { height: 250px; } }

/* Galerija (masonry; raspored računa main.js) */
.gal { position: relative; display: flow-root; }
/* Kolone/razmaci galerije po prelomu (vrednosti iz partials/gallery.php, style atribut) */
.gal { --cols: var(--cols-d); --gap: var(--gap-d); }
@media (max-width: 1366px) { .gal { --cols: var(--cols-l); --gap: var(--gap-l); } }
@media (max-width: 1200px) { .gal { --cols: var(--cols-te); --gap: var(--gap-te); } }
@media (max-width: 1024px) { .gal { --cols: var(--cols-t); --gap: var(--gap-t); } }
@media (max-width: 880px) { .gal { --cols: var(--cols-me); --gap: var(--gap-me); } }
@media (max-width: 767px) { .gal { --cols: var(--cols-m); --gap: var(--gap-m); } }
.gal__grid { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap); }
.gal__item {
    position: relative;
    flex: 0 0 auto;
    width: calc(100% / var(--cols) - (var(--gap) * (var(--cols) - 1) / var(--cols)));
    overflow: hidden;
}
.gal__img {
    display: block;
    width: 100%;
    height: auto;          /* odnos stranica iz width/height atributa */
    transform: scale(1.17);   /* "shrink-contained" hover efekat */
    transform-origin: center top;
    transition: transform 800ms, filter 800ms;
}
.gal__item:hover .gal__img { transform: scale(1); }
.js .gal__img:not(.is-loaded) { filter: opacity(0); transform: scale(.5); }
/* Masonry raspored (main.js postavlja --col, --n, --pct i visinu kontejnera) */
.gal__grid.is-masonry {
    display: block;
    height: 0;
    margin-bottom: calc(var(--gaps-max, 0) * var(--gap));
    transition: padding-bottom 350ms;
}
.gal__grid.is-masonry .gal__item {
    position: absolute;
    left: calc((100% / var(--cols) - (var(--gap) * (var(--cols) - 1) / var(--cols))) * var(--col) + (var(--gap) * var(--col)));
    top: calc(var(--pct) + (var(--n) * var(--gap)));
    transition: all 350ms;
}

/* CTA sa pozadinskom slikom ("Najvažnija od svega je sloboda...") */
.cta {
    position: relative;
    display: flex;
    min-height: 854px;
    margin-top: 100px;
    background-color: #000;
}
.cta__bg {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .7;
}
.cta__in {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    padding: 32px;
}
.cta__in > * { width: 100%; }
.cta__h {
    width: 50%;
    max-width: 50%;
    color: #fff;
    font-family: "Poppins", Sans-serif;
    font-size: 60px;
    font-weight: 400;
    line-height: 60px;
    letter-spacing: -1px;
}
.cta__p {
    margin: -8px 0 20px;
    color: #fff;
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 60px;
    letter-spacing: -1px;
}
.cta .btn-w { margin-top: 30px; }
@media (max-width: 1366px) {
    .cta__h { width: 70%; max-width: 70%; font-size: 50px; letter-spacing: -2px; }
}
@media (max-width: 1200px) {
    .cta__h { width: 80%; max-width: 80%; line-height: 50px; }
    .cta__p { margin-top: 10px; line-height: 21px; }
}
@media (max-width: 1024px) {
    .cta { margin-top: 60px; }
    .cta__in { padding: 20px; }
    .cta__h { width: 100%; max-width: 100%; font-size: 30px; line-height: 30px; letter-spacing: -.5px; }
    .cta__p { font-size: 14px; line-height: 25px; letter-spacing: -.5px; }
    .cta .btn-w { margin-top: 15px; }
}
@media (max-width: 767px) {
    .cta { min-height: 700px; }
    .cta__p { line-height: 22px; }
}

/* "Split" sekcija: tekst + slika u dve kolone */
.split { display: flex; }
.split__col { position: relative; display: flex; width: 50%; }
.split__txt {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    width: 100%;
    padding: 0 32px;
}
.split__txt > * { width: 100%; }
.split__txt--top { border-top: 1px solid #D3D3D3; }
.split__txt--bottom { border-bottom: 1px solid #D3D3D3; }
.split__img { width: 100%; }
.split__img img { display: block; width: 100%; height: 800px; object-fit: cover; object-position: center center; }
.split__h {
    margin-bottom: 20px;
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 60px;
    font-weight: 400;
    line-height: 1.3em;
    letter-spacing: -1px;
}
.split__p {
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: -1px;
}
.split__p + .btn-w { margin-top: 20px; }
.split--mt { margin-top: 100px; }
@media (max-width: 1024px) { .split--mt { margin-top: 60px; } }
@media (max-width: 1366px) {
    .split__h { font-size: 50px; letter-spacing: -2px; }
}
@media (max-width: 1024px) {
    .split { flex-wrap: wrap; }
    .split__col { width: 100%; }
    .split--rev { flex-direction: column-reverse; }
    .split__txt { padding: 30px 22px; }
    .split__txt--bottom { border-bottom-width: 0; }
    .split__h { font-size: 30px; }
    .split__p { font-size: 14px; line-height: 25px; letter-spacing: -.5px; }
}
@media (max-width: 767px) {
    .split__img img { height: 300px; }
}

/* FAQ ("toggle" raspored) */
.faq { border-top: 1px solid #D3D3D3; }
.faq__item { border-bottom: 1px solid #D3D3D3; overflow: hidden; }
.faq__q {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 20px 15px 20px 20px;
    border: 0;
    background: none;
    color: #1E1E1E;
    text-align: left;
    cursor: pointer;
}
.faq__q-text {
    flex: 0 1 auto;
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: -1px;
}
.faq__icon {
    display: block;
    flex: 0 0 auto;
    max-width: 7px;
    margin: 10px 32px 0 15px;
    font-family: "Poppins", Sans-serif;
    font-size: 30px;
    line-height: 1.65;
    letter-spacing: -1px;
}
.faq__icon svg { width: 30px; height: 30px; vertical-align: baseline; }
.faq__icon .faq__minus, .faq__q[aria-expanded="true"] .faq__plus { display: none; }
.faq__q[aria-expanded="true"] .faq__minus { display: inline; }
.faq__a {
    padding: 20px;
    border-top: 0 solid #D3D3D3;
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -1px;
}
.faq__a[hidden] { display: none; }
.faq__a p { margin: 0; }
@media (max-width: 1024px) {
    .faq__q-text, .faq__icon { font-size: 20px; }
    .faq__icon { margin-right: 16px; margin-top: 0; }
}

@media print {
    .js .gal__img:not(.is-loaded) { filter: none; transform: none; }
    .to-top, .burger, .mnav { display: none !important; }
}

/* Pozadinska slika: naslov gore levo, tekst dole desno ("O nama", "Igor Ivanović") */
.stmt {
    position: relative;
    display: flex;
    min-height: 854px;
    margin-top: 100px;
    background-color: #000;
}
.stmt__bg {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .7;
}
.stmt__in {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    width: 100%;
    padding: 32px;
}
.stmt__h {
    width: 50%;
    max-width: 50%;
    color: #fff;
    font-family: "Poppins", Sans-serif;
    font-size: 60px;
    font-weight: 400;
    line-height: 60px;
    letter-spacing: -1px;
}
.stmt__row { display: flex; justify-content: flex-end; width: 100%; }
.stmt__p {
    width: 55%;
    max-width: 55%;
    color: #fff;
    font-family: "Poppins", Sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -1px;
    text-align: right;
}
@media (max-width: 1366px) {
    .stmt__h { width: 70%; max-width: 70%; font-size: 50px; letter-spacing: -2px; }
    .stmt__p { width: 70%; max-width: 70%; }
}
@media (max-width: 1024px) {
    .stmt { margin-top: 60px; }
    .stmt__in { padding: 20px; }
    .stmt__h { width: 100%; max-width: 100%; font-size: 30px; line-height: 30px; letter-spacing: -.5px; }
    .stmt__p { width: 100%; max-width: 100%; text-align: left; }
}
@media (max-width: 767px) {
    .stmt { min-height: 700px; }
    .stmt__p { font-size: 14px; line-height: 23px; letter-spacing: -.5px; }
}

/* Naslov arhive: "MAGAZIN • 1 Članak", "SHOP • 0 Proizvoda" */
.arch-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    margin-top: 190px;
    padding-left: 30px;
}
.arch-head__h {
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 100px;
    font-weight: 400;
    line-height: 1.3em;
    letter-spacing: -1px;
}
.arch-head__h--h1 { line-height: 1.4em; }
.arch-head__dot { display: block; margin: 30px 0 20px 25px; }
.arch-head__dot > span { display: inline-block; font-size: 16px; line-height: 1; }
.arch-head__dot svg { display: block; width: 1em; height: 1em; fill: #1E1E1E; }
.arch-head__count {
    margin-left: 25px;
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 100px;
    font-weight: 200;
    line-height: 1;
    letter-spacing: -1px;
}
.arch-line { padding: 2px 0; }
.arch-line::before { content: ""; display: block; border-top: 1px solid #D3D3D3; }
.arch-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    margin: 32px 0;
    padding-left: 35px;
}
@media (max-width: 1366px) { .arch-head__h, .arch-head__count { font-size: 90px; } }
@media (max-width: 1200px) { .arch-head__h, .arch-head__count { font-size: 80px; } }
@media (max-width: 1024px) {
    .arch-head { margin-top: 100px; }
    .arch-head__h, .arch-head__count { font-size: 60px; }
}
@media (max-width: 880px) { .arch-head__h, .arch-head__count { font-size: 50px; } }
@media (max-width: 767px) {
    .arch-head { padding-left: 8px; }
    .arch-head__h, .arch-head__count { font-size: 30px; }
    .arch-head__dot { margin: 15px 12px 20px; }
    .arch-head__dot > span { font-size: 8px; }
    .arch-head__count { margin-left: 0; }
    .arch-tools { margin: 16px 0 30px; padding-left: 8px; }
}

/* Sortiranje */
.sort { display: flex; align-items: center; }
.sort__label {
    margin-bottom: -2px;
    color: #334155;
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
}
.sort__select {
    max-width: 70%;
    height: 40px;
    margin: 0;
    padding: 8px 32px 8px 12.8px;
    border: 0;
    border-radius: 0;
    background: transparent url("../img/dropdown-closed.svg") no-repeat calc(100% - 10px) center / 1.7em;
    color: #475569;
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
}
.sort__select.is-open { background-image: url("../img/dropdown-open.svg"); }
.sort__select:focus { outline: none; }
.sort__select:focus-visible { outline: 1px dotted currentColor; }

/* Kartice članaka */
.cards { display: flow-root; }
.cards__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}
.card { display: flex; flex-wrap: wrap; align-content: flex-start; }
.card > * { width: 100%; }
.card__img { display: block; margin-bottom: 20px; line-height: 0; }
.card__img img { display: inline-block; width: 100%; height: 490px; object-fit: cover; object-position: center center; }
.card__h {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-bottom: 20px;
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.3em;
    letter-spacing: -1px;
}
.card__h a { color: inherit; }
.card__p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 20px;
    color: #1E1E1E;
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -1px;
}
.card__p p { margin-bottom: .5em; }
.btn-w--full .btn { width: 100%; }
@media (max-width: 1366px) { .card .btn { font-size: 20px; } }  /* dugme kartice nema laptop veličinu */
@media (max-width: 1024px) { .card .btn { font-size: 16px; } }
@media (max-width: 1024px) {
    .cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card__h { font-size: 22px; }
    .card__p { font-size: 14px; letter-spacing: -.05px; }
}
@media (max-width: 767px) {
    .cards__grid { grid-template-columns: minmax(0, 1fr); }
    .card__img img { height: 370px; }
}

/* Jednostavna strana ("My account", "Privacy Policy"): istaknuta slika + naslov */
.apage { display: flow-root; }
.apage__thumb { line-height: 0; }
.apage__thumb img { display: inline; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; vertical-align: middle; }
@media (min-width: 922px) { .apage__thumb { margin: 0 -120px; } }
.apage__art { margin-top: 2em; padding: 2em 20px 0; }
.apage__head { margin: 2em 0 1.5em; }
.apage__title {
    color: #1e293b;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2em;
}
.apage__body h2 {
    margin-bottom: .7em;
    color: #1e293b;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.3em;
}
@media (max-width: 921px) {
    .apage__body h2 { font-size: 1.5625rem; }
}
.apage__text p { margin-bottom: .5em; }
.apage__text strong { font-weight: 700; }
.apage__text h2:not(:first-child) { margin-top: 1.2em; }
.apage__text ul { margin: 0 0 .5em 1.5em; padding: 0; }
.apage__text li { margin-bottom: .25em; }
.apage__text a { text-decoration: underline; }
.apage__body > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Mini korpa (flyout zdesna, otvara je korpa u headeru; sadržaj: partials/mini-cart.php)
   --------------------------------------------------------------------------- */
html.mc-open, html.mc-open body { overflow: hidden; }
html.mc-open body { padding-right: calc(8px + var(--sbw, 0px)); } /* + širina skinutog scrollbara (main.js) */
.mc { position: fixed; inset: 0; z-index: 10000; font-family: "Poppins", Sans-serif; color: #1E1E1E; }
.mc[hidden] { display: none; }
.mc.is-closing { right: calc(var(--sbw, 0px) * -1); }
.mc__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .3s; }
.mc__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(440px, 100%);
    background: #fff;
    transform: translate3d(100%, 0, 0);
    transition: transform .35s cubic-bezier(.25, .8, .25, 1);
}
.mc.is-open .mc__overlay { opacity: 1; }
.mc.is-open .mc__panel { transform: none; }
.mc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid #D3D3D3;
}
.mc__h { margin: 0; font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -1px; }
.mc__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    padding: 0;
    border: 1px dashed #1E1E1E;
    border-radius: 4px;
    background: #fff;
    color: #1E1E1E;
    cursor: pointer;
    transition: background .3s, color .3s;
}
.mc__close:hover, .mc__close:focus-visible { background: #1E1E1E; color: #fff; }
.mc__body { position: relative; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.mc.is-loading .mc__body::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid #D3D3D3;
    border-top-color: #1E1E1E;
    border-radius: 50%;
    animation: mc-spin .7s linear infinite;
}
.mc.is-loading .mc__content { opacity: .45; pointer-events: none; }
@keyframes mc-spin { to { transform: rotate(360deg); } }
.mc__content { display: flex; flex-direction: column; min-height: 100%; transition: opacity .2s; }
.mc__msg { margin: 16px 24px 0; color: #c0392b; font-size: 14px; line-height: 1.5; }
.mc__empty { padding: 32px 24px; font-size: 16px; line-height: 1.6; }
.mc__empty p { margin-bottom: 20px; }
.mc__list { flex: 1 1 auto; margin: 0; padding: 8px 24px; list-style: none; }
.mc__item { position: relative; display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px dashed #D3D3D3; }
.mc__item:last-child { border-bottom: 0; }
.mc__img { flex: 0 0 84px; aspect-ratio: 2 / 3; overflow: hidden; background: #f2f2f0; line-height: 0; }
.mc__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.mc__info { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding-right: 28px; }
.mc__name { color: #1E1E1E; font-size: 16px; line-height: 1.35; letter-spacing: -.5px; }
.mc__name:hover, .mc__name:focus { text-decoration: underline; text-underline-offset: 4px; }
.mc__meta { margin-top: 4px; color: #6b6b6b; font-size: 13px; line-height: 1.4; }
.mc__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.mc__qty { display: inline-flex; align-items: center; border: 1px dashed #b5b5b5; border-radius: 4px; }
.mc__qty button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: #1E1E1E;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.mc__qty button:hover { background: #f2f2f0; }
.mc__qty button:disabled { color: #c4c4c4; cursor: default; background: none; }
.mc__qty > span { min-width: 24px; font-size: 15px; text-align: center; }
.mc__price { font-size: 15px; white-space: nowrap; }
.mc__rmf { position: absolute; top: 12px; right: 0; margin: 0; }
.mc__rm {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    color: #6b6b6b;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.mc__rm:hover, .mc__rm:focus-visible { color: #1E1E1E; }
.mc__foot { position: sticky; bottom: 0; padding: 20px 24px 24px; border-top: 1px solid #D3D3D3; background: #fff; }
.mc__sum { display: flex; justify-content: space-between; gap: 12px; font-size: 18px; letter-spacing: -.5px; }
.mc__sum strong { font-weight: 500; }
.mc__note { margin: 6px 0 16px; color: #6b6b6b; font-size: 13px; line-height: 1.5; }
.mc__foot .btn-w + .btn-w { margin-top: 8px; }
.mc__foot .btn { padding: 16px 20px; font-size: 16px; }
.mc__go { background: #1E1E1E; color: #fff; }
.mc__go:hover, .mc__go:focus { background: #fff; color: #1E1E1E; }
@media (max-width: 767px) {
    .mc__head { padding: 14px 16px; }
    .mc__h { font-size: 20px; }
    .mc__list { padding: 4px 16px; }
    .mc__img { flex-basis: 72px; }
    .mc__foot { padding: 16px; }
    .mc__msg { margin: 12px 16px 0; }
    .mc__empty { padding: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .mc__overlay, .mc__panel { transition: none; }
    .gal__img { transition: none; }
    .js .gal__img:not(.is-loaded) { filter: none; transform: none; }
    .mnav.is-open, .mnav.is-closing { animation: none; }
}

/* Bez JavaScript-a (ili ako main.js ne uspe: html gubi klasu .js) odgovori u FAQ-u i svi tabovi
   strane "Dostava, povrat i reklamacije" su otvoreni. */
html:not(.js) .faq__a[hidden], html:not(.js) .tabs__panel[hidden] { display: block !important; }