/* Naš dom — the site stylesheet (K-04).
   Transcribed from the locked mockups in Docs/Design/ (artikli.html holds the superset of
   the shared style block) and Docs/07-DESIGN-SPEC.md. The mockups are normative (D-20):
   change the mockup and the spec first, then this file — never only this file.

   Variable names follow the project convention, not the shorthand used in the mockups
   (--navy-hover for --navy-d, --navy-deep for --deep, --radius-btn for --radius, ...).

   Sections:
     1. Tokens and base            5. Sections and headings      9. Sub-page shell
     2. Icons                      6. Categories                10. Product list (/artikli)
     3. Buttons                    7. Products                  11. Product detail
     4. Header                     8. Perks, CTA, footer        12. Location, forms
                                                                13. Responsive */

/* ---------- 1. Tokens and base ---------- */

:root {
    --navy: #203E6C;
    --navy-hover: #16305A;
    --navy-deep: #122A4F;
    --tint: #EAEEF6;
    --bg: #F4F6FA;
    --line: #E6EBF2;
    --ink: #1B2536;
    --muted: #8A95A6;
    --logo-sub: #8A94A6;
    --sale: #E02424;

    /* Availability dots and the Messenger button — the only places these colours appear
       (Docs/07-DESIGN-SPEC.md). */
    --in-stock: #1C7C4A;
    --on-order: #9A6B12;
    --messenger: #0084FF;
    --messenger-hover: #006FD6;

    --font-head: "Poppins", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;

    --radius-btn: 8px;
    --radius-card: 10px;
    --content-max: 1160px;
    --content-pad: 24px;
    --header-h: 74px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--navy); text-decoration: none; }

h1, h2, h3 { font-family: var(--font-head); color: var(--navy); margin: 0; line-height: 1.15; }

.wrap {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--content-pad);
}

/* Visually hidden, still read by screen readers and still focusable (skip link). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ...but the skip link has to become readable once it is focused: a 1 × 1 px target with an
   outline round it tells a sighted keyboard user nothing about where Enter would take them. */
.sr-only:focus {
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    top: 8px;
    left: 8px;
    z-index: 100;
    background: #fff;
    color: var(--navy);
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--radius-btn);
    box-shadow: 0 6px 20px rgba(16, 37, 70, .25);
}

:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 4px; }

/* Navy on navy is a 1.3 : 1 outline — invisible. Everything on a dark surface (the whole footer,
   the CTA bar, both call buttons) switches to white, which WCAG 1.4.11 asks for (3 : 1). */
.footer :focus-visible,
.cta :focus-visible,
.call:focus-visible,
.mcall:focus-visible { outline-color: #fff; }

/* ---------- 2. Icons ---------- */

/* Line icons: without fill:none + stroke they render as black blobs (Docs/07-DESIGN-SPEC.md). */
.ic {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- 3. Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 14px 22px;
    border-radius: var(--radius-btn);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .18s, transform .18s;
}

.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-hover); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--tint); }
.btn--block { width: 100%; justify-content: center; text-transform: none; letter-spacing: 0; font-size: 13px; padding: 10px; }

/* ---------- 4. Header ---------- */

.header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--line); }
.header__in { min-height: var(--header-h); display: flex; align-items: center; gap: 24px; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }

/*
   The whole lockup (emblem + "Naš dom" + signature line) is one SVG file, so only the height is
   set here — the width follows the viewBox (D-42). Height, not width: the header row is sized by
   --header-h, and a fixed width would let the logo grow taller than the row.
*/
.brand__logo { display: block; height: 48px; width: auto; }

/* flex: none — the navigation keeps its size and the search box gives way instead (see .tools).
   Squeezed navigation items would break their labels over two lines. */
.nav { display: flex; gap: 6px; margin-inline: auto; flex: none; }

.nav a {
    position: relative;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #3A4658;
}

.nav a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    background: var(--navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s;
}

.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--navy); }

/* Shrinkable, unlike the mockup's `flex: none`: between the tablet breakpoint (821 px, where the
   navigation is still laid out in full) and about 940 px the logo, the four navigation items and
   the 180 px search box together are wider than the content column, and a `flex: none` tools group
   pushed the whole page a few pixels past the viewport — a horizontal scrollbar on every page
   (D-45). The search box is the only element here that can lose width without losing meaning. */
.tools { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }

.search {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #E0E6EF;
    border-radius: 22px;
    padding: 0 14px;
    height: 42px;
    width: 230px;
    flex-shrink: 1;
    min-width: 0;
}

.search input { border: 0; outline: none; font: inherit; font-size: 13px; width: 100%; min-width: 0; background: none; }
.search input::placeholder { color: #9AA4B5; }
.search button { border: 0; background: none; color: var(--navy); cursor: pointer; padding: 4px; display: grid; place-items: center; }

.call { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; flex: none; }
.call:hover { background: var(--navy-hover); }
.call svg { width: 18px; height: 18px; }

.burger {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    background: #fff;
    color: var(--navy);
    cursor: pointer;
    place-items: center;
}

/* ---------- 5. Hero, sections and headings ---------- */

.hero { background: var(--tint); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 400px; }
.hero__text { padding: 44px 40px 44px 0; }

/* A slide with a photograph is laid out differently from the default hero above (owner's request,
   D-95, width revised in D-97): the photo covers the whole <b>content column</b> and the text sits
   on top of it at the left, while the photo fades out towards the left so the words stand on the
   plain tint background. The default hero (no slides yet) keeps the two columns — its line drawing
   has nothing to fade. */
/* One column: the photo is no longer a column of the grid but the slide's background layer.
   Positioned on `.hero__grid` — which is the `.wrap` — so the photo ends exactly where the header
   and every other section end (D-97); `inset: 0 var(--content-pad)` keeps it off the gutter, so its
   edges line up with the product grid rather than with the window. */
.hero__slide .hero__grid { position: relative; grid-template-columns: 1fr; }
.hero__slide .hero__text { position: relative; z-index: 1; max-width: min(52%, 560px); padding-right: 0; }
.hero__slide .hero__media {
    position: absolute;
    inset: 0 var(--content-pad);
    z-index: 0;
    /* Mask rather than a gradient overlay in the tint colour: the photo itself disappears and what
       shows through is whatever the section's background is, so the fade cannot drift away from the
       background the way a second copy of the colour would. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 22%, rgba(0, 0, 0, .45) 42%, #000 64%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 22%, rgba(0, 0, 0, .45) 42%, #000 64%);
}
/* h2 as well: only the first slide of the slider carries the page's single <h1>, the titles of
   the others are h2 and have to look identical (K-05). */
.hero h1, .hero h2 { font-weight: 600; font-size: clamp(28px, 3.6vw, 40px); }
.hero p { color: #5A6577; margin: 18px 0 26px; max-width: 40ch; }

.hero__media {
    position: relative;
    align-self: stretch;
    background: linear-gradient(135deg, #DFE6F1, #EEF2F8);
    display: grid;
    place-items: center;
    color: #8EA1BD;
}

/* The photo is wrapped in <picture> for the WebP variant, and the wrapper — not the photo — is what
   the media column contains. Pinned to the column, so the height below is definite: as a grid item
   with `height: 100%` the wrapper falls back to the photo's own aspect ratio, which is the bug the
   gallery had (D-84). */
.hero__media picture { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__media .tag, .gal__main .tag {
    position: absolute;
    bottom: 12px;
    right: 14px;
    font-size: 10px;
    color: #7F92AF;
    background: rgba(255, 255, 255, .72);
    padding: 3px 9px;
    border-radius: 5px;
}

/* The dots are buttons and not the mockup's decorative spans: they switch the slide, so they have
   to be reachable by keyboard. Same size and colours as the mockup draws them. */
/* gap 16px and not the mockup's 7px: the tap area below is 24 px wide and at 7px the areas of two
   neighbouring dots would overlap, so a tap on the right edge of one dot would switch to the other —
   worse than a small target. 16px is the smallest gap at which they only touch (mockup updated too,
   D-20 keeps them in step). */
.slider-dots { display: flex; gap: 16px; justify-content: center; padding: 14px; }

.slider-dots button {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #C4D0E2;
    cursor: pointer;
    transition: width .2s, background .2s;
}

/* The dot stays the 8 px the mockup draws, but the area that answers a tap is 24 × 24 px (WCAG 2.2
   SC 2.5.8). As decorative spans their size was only visual; as buttons it is the size of the
   target, and 8 px on a phone means hitting the neighbour or nothing. */
.slider-dots button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
}

.slider-dots button.a { width: 22px; border-radius: 4px; background: var(--navy); }

.section { padding: 52px 0; }
.section--white { background: #fff; }
/* A section that continues the one above it (the two panels under the map on /lokacija): less
   top padding than a standalone section, but not zero — the panels need air above their top
   edge instead of hanging off the seam where the tint turns white (D-60). */
.section--tight { padding-top: 32px; }

.stitle { text-align: center; font-size: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.stitle::after { content: ""; display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--navy); margin: 10px auto 0; opacity: .85; }

.srow { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.srow h2 { font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.srow a { font-size: 13px; font-weight: 600; }

/* ---------- 6. Categories ---------- */

.cats { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; margin-top: 26px; }

.cat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 20px 8px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.cat:hover { border-color: var(--navy); box-shadow: 0 8px 22px rgba(32, 62, 108, .1); transform: translateY(-3px); }

.cat svg {
    width: 42px;
    height: 42px;
    color: var(--navy);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cat span { font-size: 11px; font-weight: 600; line-height: 1.3; }

/* ---------- 7. Products ---------- */

/* minmax(0, 1fr), not 1fr: a plain `1fr` never shrinks below the min-content width of the card,
   and the placeholder icon inside .media is a wide drawing (the air conditioner is 72 × 40), so on
   a phone two of those columns pushed the whole page wider than the screen. */
.prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 16px;
    display: flex;
    flex-direction: column;
    transition: border-color .18s, box-shadow .18s;
}

.card:hover { border-color: #C9D4E6; box-shadow: 0 10px 26px rgba(32, 62, 108, .1); }

.badge {
    position: absolute;
    top: 12px;
    left: 12px;
    /* Above the photo frame. The frame became a positioned element when the photo was pinned inside
       it (D-84), and two positioned elements without a z-index paint in markup order — the frame
       comes second, so it covered all but the corner of this badge (measured on a product on sale). */
    z-index: 1;
    background: var(--sale);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 3px;
}

.media {
    height: 150px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #FBFCFE, #F1F5FA);
    border-radius: var(--radius-btn);
    margin-bottom: 14px;
    overflow: hidden;
}

.media img { max-height: 100%; width: auto; object-fit: contain; }

/* Photos are wrapped in <picture> for the WebP variant (K-12), and the wrapper is pinned to the
   frame rather than sized in percentages.
   Measured with a square photo: as a grid item with `height: 100%` the photo fell back to its own
   aspect ratio — 165 px tall inside the 150 px card frame (cropped by the card) and 804 px inside the
   250 px gallery frame on a narrow screen, where it left the card entirely and ran over the footer.
   A percentage height needs a definite containing block; an absolutely positioned wrapper has one. */
.media, .gal__thumbs button { position: relative; }
.media picture, .gal__main picture { position: absolute; inset: 10px; }
.gal__thumbs picture { position: absolute; inset: 5px; }
/* The grey gradient in the frame was drawn behind a line icon. A photograph brings its own white
   background, and on grey it reads as a white rectangle pasted into the frame — so a frame holding a
   photo is white, and only the placeholder icon keeps the gradient. */
.media:has(picture), .gal__main:has(picture) { background: #fff; }
.gal__main:has(picture) { border: 1px solid var(--line); }

.media picture img, .gal__main picture img, .gal__thumbs picture img {
    width: 100%;
    height: 100%;
    /* `contain`, never `cover`: an appliance photographed on white must not be cropped, and a
       thumbnail of a cropped middle says nothing about which photo it opens. */
    object-fit: contain;
}

.media svg {
    height: 110px;
    width: auto;
    color: var(--navy);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pname { font-family: var(--font-body); font-size: 14px; font-weight: 600; margin: 0; }
.pcat { font-size: 12.5px; color: var(--muted); margin: 3px 0 12px; }
/* The category links to its own list (D-104). It keeps the muted colour of the line it sits in —
   navy would pull the eye off the product name above it — and carries an underline so that it can
   be recognised as a link without hovering it first; navy on hover confirms it. */
.pcat a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pcat a:hover, .pcat a:focus-visible { color: var(--navy); }

.price { margin-top: auto; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.price b { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--navy); }
.price .s { color: var(--sale); }
.price .old { font-size: 13px; color: #AAB3C2; text-decoration: line-through; font-weight: 400; }
.price .req { font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--navy); }

.card .btn { margin-top: 14px; }

/* ---------- 8. Perks, CTA, footer ---------- */

.perks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #F6F8FB;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    margin-top: 28px;
}

.perk { display: flex; gap: 13px; padding: 22px; border-left: 1px solid var(--line); }
.perk:first-child { border-left: 0; }
.perk svg { width: 30px; height: 30px; color: var(--navy); flex: none; }
.perk h3 { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink); }
.perk p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.cta { background: var(--navy); color: #fff; }
/* padding-block, not `padding: 32px 0`: this element also carries .wrap, and the shorthand would
   reset its padding-inline to 0 — invisible on a wide screen (the max-width keeps the content off
   the edge anyway), but on a phone the text would touch the edge of the screen. */
.cta__in { display: flex; align-items: center; gap: 22px; padding-block: 32px; }
.cta__ic { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .13); display: grid; place-items: center; flex: none; }
.cta__ic svg { width: 30px; height: 30px; }
.cta h2 { color: #fff; font-size: 22px; }
.cta p { margin: 5px 0 0; color: rgba(255, 255, 255, .8); font-size: 14px; }
.cta .btn { margin-left: auto; flex: none; }

.footer { background: var(--navy-deep); color: rgba(255, 255, 255, .72); }
/* padding-block for the same reason as .cta__in — the element is a .wrap too. */
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 36px; padding-block: 50px 38px; }
.footer__about { margin: 16px 0 18px; max-width: 32ch; line-height: 1.7; font-size: 13.5px; }
.footer h4 { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 15px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13.5px; }
.footer a { color: rgba(255, 255, 255, .72); }
.footer a:hover { color: #fff; }

.fcontact li { display: flex; gap: 10px; align-items: flex-start; }
.fcontact svg { width: 16px; height: 16px; color: rgba(255, 255, 255, .55); flex: none; margin-top: 3px; }

.social { display: flex; gap: 9px; }
.social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .24); display: grid; place-items: center; color: #fff; }
.social a:hover { background: rgba(255, 255, 255, .12); }
.social svg { width: 16px; height: 16px; }

.copy { border-top: 1px solid rgba(255, 255, 255, .12); padding: 16px 0; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.copy p { margin: 0; }
/* Author credit (D-92) — one step quieter than the copyright line above it. */
.copy__author { margin-top: 6px; }
.copy__author a { color: rgba(255, 255, 255, .62); text-decoration: underline; text-underline-offset: 2px; }
.copy__author a:hover { color: #fff; }

/* Fixed call button — mobile only (shown at the 560 px breakpoint below). */
.mcall {
    display: none;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 70;
    justify-content: center;
    gap: 9px;
    background: var(--navy);
    color: #fff;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(16, 37, 70, .3);
}

.mcall svg { width: 18px; height: 18px; }

/* ---------- 9. Sub-page shell ---------- */

.pagehead { background: #fff; border-bottom: 1px solid var(--line); padding: 34px 0 30px; }
.pagehead .crumb { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.pagehead .crumb a { color: var(--muted); }
.pagehead .crumb a:hover { color: var(--navy); }
.pagehead h1 { font-size: clamp(26px, 3.2vw, 32px); font-weight: 700; }
.pagehead p { color: var(--muted); margin: 10px 0 0; max-width: 62ch; }

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; }
.panel h3 { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin: 0 0 14px; }

/* ---------- 10. Product list (/artikli) ---------- */

.shop { display: grid; grid-template-columns: 230px 1fr; gap: 26px; align-items: start; }

.filters { display: grid; gap: 2px; }
.filters a { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ink); padding: 9px 12px; border-radius: var(--radius-btn); }
.filters a:hover { background: var(--bg); }
.filters a.on { background: var(--navy); color: #fff; font-weight: 600; }
.filters .c { font-size: 12px; color: #AAB3C2; }
.filters a.on .c { color: rgba(255, 255, 255, .7); }

.shopbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.shopbar .cnt { font-size: 13.5px; color: var(--muted); }
.shopbar .sortwrap { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.shopbar select, .shopbar .srch2 input { font: inherit; font-size: 13px; border: 1px solid #E0E6EF; border-radius: var(--radius-btn); padding: 9px 12px; color: var(--ink); background: #fff; }
.shopbar .srch2 { display: flex; align-items: center; gap: 8px; border: 1px solid #E0E6EF; border-radius: 22px; padding: 0 14px; height: 40px; }
.shopbar .srch2 input { border: 0; outline: none; padding: 0; }
/* Not in the mockup: the mockup's sort control is a bare <select>, which cannot submit anything on
   its own. The select therefore sits in a GET form with this button; site.js hides it and submits
   on change, so with JavaScript the bar looks exactly like the mockup and without it the sorting
   still works (D-45). */
.shopbar .sortwrap button {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    background: #fff;
    border: 1px solid var(--navy);
    border-radius: var(--radius-btn);
    padding: 9px 12px;
    cursor: pointer;
}

.shopbar .sortwrap button:hover { background: var(--tint); }

.pag { display: flex; justify-content: center; gap: 6px; margin-top: 24px; }
.pag a, .pag span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-btn); font-size: 13px; color: var(--ink); }
.pag a.on { background: var(--navy); color: #fff; border-color: var(--navy); }
/* Disabled arrow: rendered as a <span>, so it is not a link that leads nowhere. */
.pag span { color: #C4D0E2; background: #fff; }

/* Empty state — shown instead of the grid and the pager, never an empty grid (D-20). */
.empty { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 44px 24px; text-align: center; }
.empty svg { width: 44px; height: 44px; margin: 0 auto 14px; color: #C4D0E2; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.empty h3 { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--ink); }
.empty p { color: var(--muted); font-size: 14px; margin: 8px auto 20px; max-width: 46ch; }
.empty .btn { justify-content: center; }

/* The error pages (K-15) reuse the empty-state card. The search box is the header's control in a
   wider, centred form — the 230 px of the header would look like a leftover in the middle of a
   1160 px card — and the two buttons wrap instead of overflowing on a phone. */
.empty .search { width: 100%; max-width: 380px; height: 46px; margin: 0 auto 20px; }
.err__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* The 500 page carries its heading inside the card: _LayoutMinimal has no .pagehead strip, because
   the breadcrumb in it links into a site that may be the thing that is down. */
.empty h1 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; }
.err__id { font-size: 12px; color: var(--muted); margin: 24px 0 0; }
.err__id code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }

/* ---------- 11. Product detail (/artikli/{slug}, K-07) ---------- */

.pdetail-card { background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(16, 37, 70, .12); }
/* The mockup drew this column 340 px wide with a 250 px frame — drawn with a line icon in it, before
   there were photographs. On the full-width card (D-56) that left the photo as a stamp beside a
   770 px column of text, which is the wrong way round on a page whose subject is the appliance. The
   column now takes a share of the width and the frame follows it (D-84, carried into the mockup). */
.pdetail { display: grid; grid-template-columns: minmax(340px, 42%) 1fr; gap: 0; }

.gal { padding: 24px; border-right: 1px solid var(--line); }
/* Height from the width, not a fixed 250 px, and capped so the price and the phone number stay on
   the first screen. */
.gal__main { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 440px; display: grid; place-items: center; background: linear-gradient(180deg, #FBFCFE, #F1F5FA); border-radius: var(--radius-btn); }
.gal__main svg { height: 180px; width: auto; color: var(--navy); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gal__main img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-btn); }
/* A row that wraps: six photos on a 500 px screen would otherwise push the card sideways. */
.gal__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gal__thumbs button { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 6px; background: #FFF; cursor: pointer; display: grid; place-items: center; padding: 5px; overflow: hidden; }
.gal__thumbs button:hover { border-color: var(--navy-hover); }
/* The photo on show has to be recognisable in the row — a 1 px border change was too quiet. */
.gal__thumbs button[aria-current="true"] { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(32, 62, 108, .18); }
.gal__thumbs svg { height: 100%; width: auto; color: var(--navy); fill: none; stroke: currentColor; stroke-width: 2.4; }
.gal__thumbs img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }

/* The class is put on by site.js, so the magnifier cursor appears only where a click really does
   enlarge the photo (D-107). */
.gal__main--zoom { cursor: zoom-in; }
/* The overlay carries no scrollbar of its own, and the page behind it is held still by .no-scroll —
   otherwise a scroll over the dark area moves the article underneath. */
.no-scroll { overflow: hidden; }
/* Above the sticky header (60) and the fixed mobile bar (70) — the enlarged photo covers everything
   except the skip link. */
/* `touch-action: none` is what actually holds the page still on a phone: `body { overflow: hidden }`
   does not stop scrolling on iOS, so without it a drag across the dark area moves the article behind
   the enlarged photo. */
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(11, 22, 41, .88); touch-action: none; overscroll-behavior: contain; }
.lightbox[hidden] { display: none; }
/* `display: contents` puts the <img> itself into the grid, so `max-height: 100%` measures against
   the overlay minus its padding — a <picture> box in between has no height of its own to measure. */
.lightbox picture { display: contents; }
/* The photo itself keeps pinch-zoom — that is the one gesture worth having over a used appliance,
   and the overlay above gives away every other one. */
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-btn); background: #FFF; cursor: zoom-out; touch-action: pinch-zoom; }
.lightbox__close, .lightbox__nav { position: absolute; display: grid; place-items: center; line-height: 1; color: #FFF; background: rgba(255, 255, 255, .14); border: 0; border-radius: 50%; cursor: pointer; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
/* The notch and the rounded corner: on a phone in landscape the × would otherwise sit under the
   status bar. `env()` is 0 everywhere else, so this changes nothing on a desktop. */
.lightbox__close { top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); width: 44px; height: 44px; font-size: 30px; }
/* Arrows on the left and right edge, vertically centred — the photo is fitted into the screen with
   room to spare on one axis, so they land beside it rather than over it. */
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 34px; padding-bottom: 4px; }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox__count { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .82); }
@media (max-width: 560px) {
    /* Room for the arrows on a phone: they sit under the photo, next to the counter, where a thumb
       reaches them — at the edges they would be over the photo itself. */
    .lightbox { padding: 24px 12px calc(76px + env(safe-area-inset-bottom)); }
    .lightbox__nav { top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); transform: none; width: 44px; height: 44px; }
    .lightbox__nav--prev { left: 24px; }
    .lightbox__nav--next { right: 24px; }
    .lightbox__count { bottom: calc(28px + env(safe-area-inset-bottom)); }
}

.det { padding: 24px 26px 26px; }
.det__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.det__top .badge { position: static; }
.det h2 { font-family: var(--font-body); font-size: 19px; font-weight: 600; color: var(--ink); }
.det .pcat { margin: 4px 0 14px; }
.det .price { margin: 0 0 14px; }
.det .price b { font-size: 26px; }
.det__desc { font-size: 14px; color: #5A6577; margin: 0 0 18px; }
.det__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.stock { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--in-stock); }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stock--order { color: var(--on-order); }

.specs { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 20px; }
.specs th, .specs td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line); }
.specs th { font-weight: 600; color: var(--muted); width: 45%; }

.btn--messenger { background: var(--messenger); color: #fff; }
.btn--messenger:hover { background: var(--messenger-hover); }
/* One button instead of two — no Messenger page in Settings (D-57), or a browser that cannot share
   at all and leaves "Podijeli" hidden (D-103). A hidden button is `display:none` and so not a grid
   item, which is why the second selector reads as if the button beside it were alone. */
.det__acts .btn:only-child,
.det__acts .btn[hidden] + .btn:last-child { grid-column: 1 / -1; }
/* While Messenger shows "Link kopiran — zalijepite ga u razgovor" (D-105) the label is wider than
   half a row and wraps; the icon must not be squeezed by it, and the pair of buttons keeps the same
   height on its own (grid items stretch). */
.det__acts .btn svg { flex: 0 0 auto; }

/* ---------- 12. Location and forms ---------- */

.split { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
/* One panel instead of two (a text left empty in Settings) — full width, not 1fr with a gap beside it. */
.split--single { grid-template-columns: 1fr; }

.map { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* Shown instead of the map while the shop coordinates are still unset in Settings (R3). */
.map__none { margin: 0; padding: 28px 20px; background: #fff; font-size: 14px; color: var(--muted); }

/* Free text from Settings ("Kako do nas", "Dostava i garancija") — one paragraph per typed line. */
.panel__text { margin: 0 0 12px; font-size: 14px; color: #5A6577; line-height: 1.55; }
.panel__text:last-child { margin-bottom: 0; }

/* The two stacked buttons under the shop details. */
.panel__acts { display: grid; gap: 10px; margin-top: 20px; }
.btn--outline { border-color: var(--line); }

.info { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.info li { display: flex; gap: 12px; }
.info svg { width: 19px; height: 19px; color: var(--navy); flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.info b { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.info span, .info a { font-size: 14px; }
.info a:hover { text-decoration: underline; }

.hrs { display: grid; grid-template-columns: auto auto; gap: 3px 14px; font-size: 14px; color: #5A6577; }

.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li { display: flex; gap: 13px; font-size: 14px; color: #5A6577; line-height: 1.45; }

.steps li::before {
    counter-increment: s;
    content: counter(s);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: none;
    background: var(--tint);
    color: var(--navy);
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12px;
}

.form { display: grid; gap: 15px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea, .field select { width: 100%; font: inherit; font-size: 14px; border: 1px solid #E0E6EF; border-radius: var(--radius-btn); padding: 11px 13px; background: #fff; color: var(--ink); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(32, 62, 108, .12); }
.formnote { font-size: 12px; color: var(--muted); margin: 0; }

/* Server-side validation (K-09) — framework default class names (Tag Helpers write these). */
.field input.input-validation-error, .field textarea.input-validation-error, .field select.input-validation-error { border-color: var(--sale); }
.field .field-validation-error { display: block; font-size: 12.5px; color: var(--sale); margin-top: 6px; }
.validation-summary-errors ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.validation-summary-errors li { font-size: 13px; color: var(--sale); }

/* Success/failure banner above the contact form (K-09). */
.alert { border-radius: var(--radius-card); padding: 14px 16px; font-size: 13.5px; margin-bottom: 15px; }
.alert--success { background: #E7F4EA; color: #1E6B33; border: 1px solid #C3E6CB; }
.alert--error { background: #FCEAEA; color: #A32323; border: 1px solid #F3C2C2; }

/* Honeypot (D-66) — off-screen for a person, still in the DOM for a bot that fills every field. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bigcall { background: var(--navy); color: #fff; border-radius: var(--radius-card); padding: 22px; text-align: center; }
.bigcall svg { width: 28px; height: 28px; margin: auto; fill: none; stroke: currentColor; stroke-width: 2; }
.bigcall .num { font-family: var(--font-head); font-weight: 700; font-size: 22px; margin: 10px 0 2px; }
.bigcall .lbl { font-size: 12px; color: rgba(255, 255, 255, .75); }

/* ---------- 13. Responsive (breakpoints from Docs/07-DESIGN-SPEC.md) ---------- */

@media (max-width: 1000px) {
    .cats { grid-template-columns: repeat(4, 1fr); }
    .prods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .perks { grid-template-columns: repeat(2, 1fr); }
    .perk:nth-child(3) { border-left: 0; }
    .perk:nth-child(n+3) { border-top: 1px solid var(--line); }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .search { width: 180px; }
}

@media (max-width: 900px) {
    .shop { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; }
    .pdetail { grid-template-columns: 1fr; }
    .gal { border-right: 0; border-bottom: 1px solid var(--line); }

    /* Stacked, the frame is as wide as the whole card, so the cap matters more than the ratio. */
    .gal__main { max-height: 420px; }
}

@media (max-width: 820px) {
    .burger { display: grid; }

    .nav {
        position: absolute;
        left: 0;
        right: 0;
        top: var(--header-h);
        background: #fff;
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        gap: 0;
        padding: 6px var(--content-pad) 14px;
        margin: 0;
        display: none;
    }

    .nav.open { display: flex; }
    .search { display: none; }
    /* …but not the one on the 404 page (K-15). The header hides its search box on a phone because the
       row has no width left for it; inside the error card it is the page's own control, and the spec
       asks a 404 to offer the search — which it cannot do if the box is the thing that disappears
       exactly where mistyped addresses arrive from (measured: 0 px wide at 500 px). */
    .empty .search { display: flex; }
    .hero__grid { grid-template-columns: 1fr; min-height: 0; }
    .hero__text { padding: 30px 0 24px; }
    .hero__media { order: -1; min-height: 220px; }

    /* On a phone the photo goes back above the text (D-95): half a screen of text over a photograph
       is unreadable no matter how the fade is tuned, and there is no width left to fade across. */
    /* `relative`, not `static`: the <picture> inside is pinned with `inset: 0` (D-84), so a static
       frame would send it up to the slide and stretch the photo over the text instead. No negative
       margin: the photo keeps the width of the content column here too (D-97). */
    .hero__slide .hero__media {
        position: relative;
        /* `inset` has to go back too: on a relative box `left: 24px` still shifts it, while `right`
           is ignored — measured as the photo starting 24 px in and running 24 px past the screen. */
        inset: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .hero__slide .hero__text { max-width: none; }
    .cta__in { flex-wrap: wrap; }
    .cta .btn { margin-left: 0; width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
    .det__acts { grid-template-columns: 1fr; }
    /* The lockup is ~4.5:1, so at 48px it crowds the phone and burger buttons on a narrow screen. */
    .brand__logo { height: 38px; }
    .cats { grid-template-columns: repeat(2, 1fr); }
    .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .perks { grid-template-columns: 1fr; }
    .perk { border-left: 0; }
    .perk:nth-child(n+2) { border-top: 1px solid var(--line); }
    .footer__grid { grid-template-columns: 1fr; }
    .row2 { grid-template-columns: 1fr; }
    .filters { grid-template-columns: 1fr 1fr; }
    .mcall { display: flex; }
    /* The fixed call button covers the end of the page otherwise. */
    body { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}