/*
 * pardon-cms.css — dopune teme `pardon` uz CSS makete (pardon.css).
 *
 * pardon.css je gotov, „pročišćen" Tailwind iz makete i ne mijenja se ručno
 * (vidi README teme). Ovdje je SAMO ono što maketa nema, a sajt na CMS-u
 * traži: servisi CMS-a (korpa, AJAX forme, kolačići), pristupačnost i zamke iz
 * docs/theming.md. Učitava se POSLIJE pardon.css.
 *
 * Boje su iz makete: ink #111111, ink-soft #1D1D1D, body #5F5F5F,
 * muted #9E9E9E, line #E7E5E2, graybg #F5F5F5, peach #F2C9B4.
 */

/* ---- Zamke (docs/theming.md) ---------------------------------------
 * overflow-x: hidden na body pravi scroll-container i gasi position: sticky;
 * clip sprječava horizontalni skrol bez toga. */
html,
body {
    overflow-x: clip;
}

/* ---- Pristupačnost -------------------------------------------------- */

/* „Preskoči na sadržaj" — vidljiv samo kad dobije fokus tastaturom. */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 100;
    border-radius: 9999px;
    background: #111;
    color: #fff;
    padding: .625rem 1.25rem;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: top .2s;
}
.skip-link:focus {
    top: 1rem;
}
main:focus,
main:focus-visible {
    outline: none;
}

/* Tekst samo za čitače ekrana (naslov kolone sa filterima, uputstva liste,
 * dopune kartice proizvoda). */
.pardon-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Fokus tastaturom — maketa nema vidljiv fokus (preflight ga skida). Boja
 * teksta elementa (currentColor) je kontrastna pozadini i na svijetlim i na
 * tamnim površinama (footer, 404, header preko hero-a). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not(main):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Animacije isključene: ?screenshot=1 (design QA) ili JS ne radi (layout
 * dodaje `html.js`). prefers-reduced-motion pokriva već pardon.css. */
html:not(.js) .reveal,
.no-animations .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ---- Header ---------------------------------------------------------- */

/* Header poslije skrola (i stalno na unutrašnjim stranama) je TAMAN sa
 * bijelim logom i elementima — odluka klijenta 2026-10-01, umjesto bijelog
 * headera iz makete. Ista pravila kao `.header.is-scrolled` u pardon.css, sa
 * bojama prozirnog stanja preko hero-a; ovaj fajl se učitava poslije, pa
 * pobjeđuje pri istoj specifičnosti. */
.header.is-scrolled {
    background-color: rgba(17, 17, 17, .95);
    --tw-shadow: 0 10px 30px -20px rgba(0, 0, 0, .6);
}
.header.is-scrolled .nav-link {
    color: rgba(255, 255, 255, .8);
}
.header.is-scrolled .nav-link.is-active,
.header.is-scrolled .nav-link:hover {
    color: #fff;
}
.header.is-scrolled .nav-link:after {
    background-color: #fff;
}
.header.is-scrolled .pill {
    border-color: rgba(255, 255, 255, .4);
    color: rgba(255, 255, 255, .9);
}
.header.is-scrolled .pill:hover {
    border-color: #fff;
}
.header.is-scrolled .pill-avatar {
    border-color: rgba(255, 255, 255, .45);
}
.header.is-scrolled .header-icon {
    color: rgba(255, 255, 255, .9);
}
.header.is-scrolled .header-icon:hover {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
}
.header.is-scrolled .header-divider {
    background-color: rgba(255, 255, 255, .3);
}
.header.is-scrolled [data-logo-light] {
    display: block;
}
.header.is-scrolled [data-logo-dark] {
    display: none;
}

/* Bez JS-a header ne zna za skrol (pardon.js), pa bi proziran header preko
 * velike slike (početna, obična strana) ostao bijel tekst na bijelom sadržaju
 * čim se skroluje — tada je taman od početka. */
html:not(.js) .header {
    background-color: rgba(17, 17, 17, .95);
}

/* Broj u ikonici korpe: shop-cart.js ga sakriva atributom `hidden` kad je
 * korpa prazna, a Tailwind `.flex` bi ga inače i dalje prikazao. */
[data-cart-badge][hidden] {
    display: none !important;
}

/* Aktivan jezik u dropdown-u. */
.dropdown-panel a[aria-current="true"] {
    color: #111;
    font-weight: 500;
}

/* Aktivna stavka u mobilnom meniju (maketa ima samo hover). */
.mobile-menu a.m-link.is-active {
    color: #111;
}

/* Link koji na prelaz mišem posivi — UMJESTO `hover:text-body` makete: u
 * pročišćenom CSS-u makete ta klasa uz boju postavlja i veličinu slova
 * (`text-body` je i boja i veličina, 16/24 px), pa bi telefon na Kontaktu
 * (20 px) na prelaz mišem spao na 16 px, a link u sitnom tekstu narastao. */
.pardon-hover-body:hover {
    color: #5F5F5F;
}

/* Tekst sa unosom posjetioca (pojam pretrage u naslovu i poruci): riječ bez
 * razmaka (zalijepljena adresa, šifra) se lomi umjesto da izađe iz okvira —
 * `break-words` nema u pročišćenom CSS-u makete. */
.pardon-wrap-anywhere {
    overflow-wrap: anywhere;
}

/* ---- Forme (ajax-forms.js) ------------------------------------------ */

/* Polje protiv spam botova (`_website`) — ljudi ga ne vide ni ne popunjavaju. */
.pardon-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Greška polja (422) — ajax-forms.js dodaje .invalid-feedback roditelju polja.
 * U newsletter traci footera roditelj je red „polje + dugme", pa poruka ide
 * ispod reda. */
.invalid-feedback {
    margin-top: .375rem;
    font-size: 12px;
    color: #C0392B;
}
footer form[data-ajax] {
    position: relative;
}
footer form[data-ajax] .invalid-feedback {
    position: absolute;
    left: 1.25rem;
    top: 100%;
    color: #F2C9B4;
}

/* ---- Traka za kolačiće — boje brenda ------------------------------- */
#cc-main {
    --cc-font-family: Inter, system-ui, sans-serif;
    --cc-btn-border-radius: 9999px;
    --cc-primary-color: #111111;
    --cc-secondary-color: #5F5F5F;
    --cc-link-color: #111111;
    --cc-btn-primary-bg: #111111;
    --cc-btn-primary-border-color: #111111;
    --cc-btn-primary-color: #ffffff;
    --cc-btn-primary-hover-bg: #1D1D1D;
    --cc-btn-primary-hover-border-color: #1D1D1D;
    --cc-btn-primary-hover-color: #ffffff;
    --cc-btn-secondary-bg: #F5F5F5;
    --cc-btn-secondary-border-color: #F5F5F5;
    --cc-btn-secondary-color: #111111;
    --cc-btn-secondary-hover-bg: #F2C9B4;
    --cc-btn-secondary-hover-border-color: #F2C9B4;
    --cc-btn-secondary-hover-color: #111111;
    --cc-toggle-on-bg: #111111;
    --cc-separator-border-color: #E7E5E2;
}

/* ==== Početna (Faza 2) ================================================ */

/* Sidra sekcija (home/pardon-index.php): nulte visine, a skok na sidro
 * ostavlja mjesta fiksnom headeru. Default tema ovo ima u theme-home.css,
 * koji tema gasi. */
.home-anchor {
    display: block;
    height: 0;
    scroll-margin-top: calc(var(--header-h, 92px) + 1rem);
}

/* Tekst iz editora strane u sekcijama: razmak između pasusa kao na maketi
 * (mt-5), liste i linkovi vidljivi — preflight im skida stil. */
.pardon-prose p + p,
.pardon-prose p + ul,
.pardon-prose p + ol,
.pardon-prose ul + p,
.pardon-prose ol + p {
    margin-top: 1.25rem;
}
.pardon-prose ul {
    list-style: disc;
    padding-left: 1.25rem;
}
.pardon-prose ol {
    list-style: decimal;
    padding-left: 1.25rem;
}
.pardon-prose a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pardon-prose strong,
.pardon-prose b {
    font-weight: 600;
}

/* SVG ikonica iz admina (blok strane): visinu daje klasa omotača (h-12…). */
.pardon-svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pardon-svg-icon svg {
    height: 100%;
    width: auto;
}

/* Dugmad: prsten fokusa UNUTAR dugmeta, u boji njegovog teksta. Spoljni
 * prsten (pravilo iznad) nestaje kad je tamni tekst dugmeta (peach, light)
 * na tamnoj sekciji/kartici, kad je bijeli tekst na svijetloj slici, i kad je
 * dugme u omotaču sa overflow: hidden (dugme korpe u redu proizvoda). */
.btn:focus-visible,
.pardon-card-action:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -5px;
    /* Dugmad makete imaju `transition: all` — bez ovoga bi i prsten fokusa
     * „klizio" 0,3 s umjesto da se pojavi odmah. */
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
}

/* Djelatnosti: traka „Izaberi kategoriju" se vidi i na fokus tastaturom
 * (maketa je ima samo na prelaz mišem). Prelaz mišem je iz makete (klijent
 * 2026-10-05 — „po html-u"; od 01.10. je bio po slici dizajna). */
.pardon-ind-card:focus-visible .pardon-ind-bar {
    transform: none;
    opacity: 1;
}
/* … i ikona i naziv se podignu kao na prelaz mišem (`group-hover:-translate-y-2`
 * makete) — inače bi traka na fokusu prekrila drugi red dugog naziva. */
.pardon-ind-card:focus-visible .group-hover\:-translate-y-2 {
    --tw-translate-y: -0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Djelatnosti na telefonu (klijent 2026-10-14): dvije kartice u redu, niže
 * (maketa: jedna u redu, min. 190 px — osam djelatnosti je bilo ~1700 px
 * skrolovanja). Manja ikona i naziv 15 px, da i duži naziv („Sportski i
 * rekreativni centri") stane u dva reda kartice od ~170 px. */
@media (max-width: 639.98px) {
    .pardon-ind-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }
    .pardon-ind-card {
        min-height: 0;
        padding: 1.5rem .75rem;
    }
    .pardon-ind-card img,
    .pardon-ind-card .pardon-svg-icon {
        height: 2.25rem;
    }
    .pardon-ind-title {
        margin-top: .875rem;
        font-size: 15px;
        line-height: 1.3;
    }
    /* Traka „Izaberi kategoriju" (prelaz mišem / fokus) bi u niskoj kartici
     * prekrila drugi red naziva — a dodir je na telefonu „zalijepi" dok se ne
     * dodirne drugo mjesto. Natpis je ukras (aria-hidden), cijela kartica je
     * link, pa traka na telefonu ne treba. */
    .pardon-ind-bar {
        display: none;
    }
}

/* Kartice proizvoda: cijela kartica vodi na proizvod (sloj linka preko
 * kartice), a dugme korpe je iznad tog sloja. */
.pardon-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.pardon-card-action {
    z-index: 2;
}
.pardon-card-action[aria-busy="true"] {
    cursor: progress;
    opacity: .7;
}

/* Dugme korpe koje maketa otkriva samo na prelaz mišem: vidi se i kad je
 * fokus u kartici (tastatura), a na ekranima na dodir (bez prelaza mišem)
 * stalno. */
.product-card:focus-within .pardon-card-reveal {
    transform: none;
    opacity: 1;
}
.product-card:focus-within .pardon-card-reveal-row {
    grid-template-rows: 1fr;
    margin-top: 1rem;
}
@media (hover: none) {
    .pardon-card-reveal {
        transform: none;
        opacity: 1;
    }
    .pardon-card-reveal-row {
        grid-template-rows: 1fr;
        margin-top: 1rem;
    }
}

/* Ekran na dodir (klijent 2026-10-14: „Dodaj u korpu" na kartici je
 * „preagresivno" — na dodir je tamna traka stalno preko donjeg dijela svake
 * slike): umjesto trake mali okrugli bijeli taster sa ikonicom korpe u
 * donjem desnom uglu slike (lista, pretraga, Omiljeni, slajder početne).
 * Natpis se ne vidi — ime dugmeta daje aria-label („Dodaj u korpu: …").
 * Računar (prelaz mišem) kao maketa. */
.pardon-card-action-go {
    display: none;
}
@media (hover: none) {
    .pardon-card-action.absolute {
        left: auto;
        right: .625rem;
        bottom: .625rem;
        width: 2.5rem;
        height: 2.5rem;
        gap: 0;
        padding: 0;
        border-radius: 9999px;
        background-color: #fff;
        color: #111;
        box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35);
        transform: none;
        opacity: 1;
    }
    .pardon-card-action.absolute .pardon-card-action-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .pardon-card-action.absolute svg {
        width: 18px;
        height: 18px;
    }
    .pardon-card-action.absolute .pardon-card-action-go {
        display: block;
    }
    /* Dok se dodaje u korpu — isto kao traka (opacity iznad bi to poništio). */
    .pardon-card-action.absolute[aria-busy="true"] {
        opacity: .7;
    }
}

/* Fotografija proizvoda u kartici reda: kvadrat iste visine kao slika iz
 * makete (h-28), a ne uska fotografija — maketa ima proizvode bez pozadine. */
.pardon-thumb {
    width: 7rem;
    height: 7rem;
    object-fit: cover;
    border-radius: .75rem;
}

/* Red „Proizvodi" sa manje od 6 proizvoda (maketa: 6 = dva reda po tri) —
 * mreža bez praznih polja (klijent 2026-10-12), od 640 px (na telefonu je
 * red lista, ispod). Mreža od 6 kolona: kartica zauzima trećinu reda (3 u
 * redu, kao maketa) ili pola; 1 proizvod = cijeli red, 2 i 4 = po dva u
 * redu, 3 = tri, 5 = 3 + 2. Sa 6 proizvoda klase nema — maketa. */
@media (min-width: 640px) {
    .pardon-row-few {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .pardon-row-few > * {
        grid-column: span 3;
    }
    .pardon-row-n1 > * {
        grid-column: span 6;
    }
    .pardon-row-n3 > *,
    .pardon-row-n5 > :nth-child(-n+3) {
        grid-column: span 2;
    }
}

/* Telefon (do 639 px), klijent 2026-10-12 — „kartice previsoke, previše
 * praznog prostora iznad i ispod sekcija i u kartici na dnu, dugme za korpu
 * ne valja i nije isto kao u prvoj sekciji":
 *  - sekcije „Proizvodi" imaju manji razmak gore / dolje (maketa: 64 px);
 *  - slajder: kartica kategorije bez min. visine 430 px — sve kartice su
 *    visoke koliko kartica proizvoda (slika + naziv i cijena), bez praznog
 *    dna;
 *  - red: velika kartica 320 px (slika u pozadini), a proizvodi lista —
 *    slika lijevo, naziv, cijena i dugme desno. U dvije kolone (maketa)
 *    kartica je preuska za dugme kao u slajderu (≈ 134 px), pa se lomilo u
 *    dva reda. Važi i sa 6 proizvoda. */
@media (max-width: 639.98px) {
    .pardon-home-products {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .pardon-slide-cat > article {
        min-height: 0;
    }
    .pardon-row-bigcard {
        min-height: 20rem;
    }
    .pardon-row-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: .75rem;
    }
    .pardon-row-grid > article {
        flex-direction: row; /* `.product-card` makete je kolona */
        align-items: center;
        gap: 1rem;
        padding: .75rem;
        text-align: left;
    }
    .pardon-row-grid .pardon-row-img {
        flex: none;
        width: 6rem;
        height: 6rem;
        margin: 0;
    }
    .pardon-row-info {
        flex: 1;
        min-width: 0;
    }
    .pardon-row-info > :first-child {
        margin-top: 0;
    }
}
@media (max-width: 639.98px) and (hover: none) {
    /* Red na telefonu (slika lijevo, tekst desno), ekran na dodir: dugme
     * korpe je okrugli taster na desnoj strani kartice, kao na karticama
     * liste (klijent 2026-10-14), a ne tamna traka ispod teksta. Jača
     * pravila od `:focus-within` / `group-hover:mt-4` (0,3,0) — inače se
     * taster na dodir ili fokus pomjeri. */
    .pardon-row-grid .pardon-row-info {
        padding-right: 3.25rem;
    }
    .pardon-row-grid .pardon-row-info .pardon-card-reveal-row {
        position: absolute;
        top: 50%;
        right: .75rem;
        z-index: 2;
        margin-top: 0;
        transform: translateY(-50%);
    }
    .pardon-row-grid .pardon-card-reveal-row > div {
        overflow: visible; /* sjenka tastera */
    }
    .pardon-row-grid .pardon-card-action {
        width: 2.5rem;
        height: 2.5rem;
        gap: 0;
        padding: 0;
        border-radius: 9999px;
        background-color: #fff;
        color: #111;
        box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35), 0 0 0 1px #e7e5e2;
    }
    .pardon-row-grid .pardon-card-action-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .pardon-row-grid .pardon-card-action svg {
        width: 18px;
        height: 18px;
    }
    .pardon-row-grid .pardon-card-action-go {
        display: block;
    }
}
/* Velika kartica dok je iznad mreže (do 1023 px), sa bilo kojim brojem
 * proizvoda: visina iz CSS-a (520 px, telefon 320), ne iz slike — portretna
 * slika ju je na tabletu dizala na 720–1200 px. Od 1024 px i do 3
 * proizvoda isto (`pardon-row-card-fit`): kartice pored nje su visoke kao
 * ona, pa ne smije da raste sa slikom. */
@media (max-width: 1023.98px) {
    .pardon-row-bigcard > img {
        position: absolute;
        inset: 0;
    }
}
.pardon-row-card-fit > img {
    position: absolute;
    inset: 0;
}
/* Do 3 proizvoda pored velike kartice (od 1024 px): jedan red kartica visokih
 * kao velika kartica — sadržaj u sredini, slika veća (kvadrat, kao u maketi —
 * u uskoj kartici širina pada ispod 15rem, pa visina ide za njom). Dugme
 * stoji pri dnu kartice, van toka: kad se pojavi (prelaz mišem, fokus), ne
 * pomjera sadržaj koji je u sredini. */
@media (min-width: 1024px) {
    .pardon-row-tall > article {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .pardon-row-tall .pardon-row-img {
        width: min(100%, 15rem);
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .pardon-row-tall .pardon-card-reveal-row {
        position: absolute;
        right: 1.25rem;
        bottom: 1.25rem;
        left: 1.25rem;
        margin-top: 0;
    }
}

/* Slajder „Proizvodi" kad sve kartice stanu u red (manje nego u maketi —
 * kartica kategorije + 4 proizvoda): kartica kategorije uzima ostatak reda,
 * proizvodi ostaju svoje širine. pardon.js postavlja klasu dok je slajder
 * „zaključan" (nema šta da se pomjera); kad kartica ima više, nema ni klase. */
.pardon-slider-fit .pardon-slide-cat {
    flex-grow: 1;
}
.pardon-slider-fit .swiper-slide:last-child {
    margin-right: 0 !important;
}

/* Dva reda proizvoda jedan za drugim su na maketi jedan blok — drugi red ne
 * ponavlja gornji razmak sekcije. */
.pardon-after-row {
    padding-top: 0 !important;
}

/* Strelice slajdera proizvoda: kad sve kartice stanu, Swiper ih „zaključa"
 * (sakrij — `sm:flex` iz pardon.css bi ih inače prikazao), a na kraju reda
 * je strelica neaktivna. */
[data-slider-prev].swiper-button-lock,
[data-slider-next].swiper-button-lock {
    display: none !important;
}
[data-slider-prev].swiper-button-disabled,
[data-slider-next].swiper-button-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

/* Hero sa više slajdova — tačkice bijele, iznad donje ivice. */
.pardon-hero-dots {
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: .45;
    bottom: 1.5rem !important;
}

/* Instagram: zatamnjenje i znak na fokus tastaturom kao na prelaz mišem. */
.pardon-ig-tile:focus-visible .pardon-ig-shade {
    background-color: rgba(17, 17, 17, .15);
}
.pardon-ig-tile:focus-visible .pardon-ig-icon {
    opacity: 1;
}

/* CTA (po slici dizajna): bez preliva preko fotografije, pa blaga sjenka
 * slova za čitljivost na svijetlim mjestima; obrubljeno dugme šire od
 * natpisa. */
.pardon-cta-body {
    text-shadow: 0 1px 14px rgba(0, 0, 0, .28);
}
.pardon-cta-btn {
    min-width: 14rem;
    text-shadow: none;
}

/* Hero početne na telefonu (do 767 px) — Jelena 2026-10-14, poslije slike za
 * telefon: „loša vidljivost na telefonima gore u vrhu slike". Header je
 * proziran preko slike, a na uspravnoj fotografiji su pri vrhu svijetle
 * grančice i šara tapeta, pa se bijeli logo i ikonice gube. Tamni preliv
 * pri vrhu slike (ispod headera) i blaga sjenka logoa i ikonica dok je
 * header proziran (poslije skrola je taman, bez sjenke). Računar bez
 * promjene. */
.pardon-hero-scrim {
    display: none;
}
@media (max-width: 767.98px) {
    .pardon-hero-scrim {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: calc(var(--header-h, 92px) + 4rem);
        background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .4) 45%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
    }
    .header:not(.is-scrolled) .header-icon,
    .header:not(.is-scrolled) [data-logo-light] {
        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .45));
    }
}

/* Video sekcija na telefonu i tabletu: dugme „play" makete stoji na sredini
 * sekcije, preko teksta — klijent 2026-10-05: „pomjeri play dugme ispod
 * teksta na telefonu". Ispod 1024 px ide dole, na sredinu (3,5rem od dna), a
 * tekst dobija mjesto za njega: razmak 2rem + dugme (h-20 / sm:h-24) +
 * 3,5rem. Od 1024 px je kao maketa (desno, 70 %, gdje teksta nema).
 * `1023.98px`, ne 1023: pri uvećanju pregledača širina može biti razlomak
 * (1023,5 px), a tada ne bi važilo ni ovo ni `lg:` makete. */
@media (max-width: 1023.98px) {
    .pardon-video-play {
        top: auto;
        bottom: 3.5rem;
        --tw-translate-y: 0;
    }
    .pardon-video-has-play .pardon-video-body {
        padding-bottom: calc(2rem + 5rem + 3.5rem);
    }
    /* Dole je svijetao pod fotografije: bijeli krug bez podloge ima kontrast
     * ~1,4:1 (a i prsten fokusa je bijel). Tamna providna podloga ga drži
     * vidljivim (~4:1), a prsten fokusa ide unutar kruga. */
    .pardon-video-has-play:not(.pardon-video-plain) .pardon-video-play {
        background-color: rgba(17, 17, 17, .45);
    }
    .pardon-video-has-play:not(.pardon-video-plain) .pardon-video-play:hover {
        background-color: rgba(17, 17, 17, .6);
    }
    .pardon-video-has-play:not(.pardon-video-plain) .pardon-video-play:focus-visible {
        outline-offset: -6px;
    }
    /* Viša sekcija (mjesto za dugme) uvećava fotografiju (object-cover), pa bi
     * iza desne polovine teksta došlo tamno staklo sa sredine slike — kontrast
     * sivog teksta ~1,4:1 (na maketi ~2,5:1). Svjetliji lijevi dio slike iza
     * teksta: ~4:1. */
    .pardon-video-has-play .pardon-video-img {
        object-position: 15% 50%;
    }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    .pardon-video-has-play .pardon-video-body {
        padding-bottom: calc(2rem + 6rem + 3.5rem);
    }
}
/* Telefon (do 639 px), klijent 2026-10-14: fotografija IZNAD teksta (4:3,
 * bez bijelog preliva), dugme „play" na sredini fotografije, tekst ispod na
 * bijelom — preko fotografije je tekst bio teško čitljiv, a od fotografije se
 * vidio samo uzak isječak. Fotografija je „Slika za telefon" iz forme sekcije
 * (`<picture>` u partialu), a bez nje Cover slika. Sekcija bez fotografije
 * ostaje kao iznad (dugme ispod teksta). */
@media (max-width: 639.98px) {
    .pardon-video-has-play:not(.pardon-video-plain) {
        flex-direction: column;
        align-items: stretch;
    }
    .pardon-video-has-play:not(.pardon-video-plain) .pardon-video-media {
        position: relative;
        aspect-ratio: 4 / 3;
    }
    .pardon-video-has-play:not(.pardon-video-plain) .pardon-video-img {
        object-position: 50% 50%;
    }
    .pardon-video-has-play:not(.pardon-video-plain) .pardon-video-shade {
        display: none;
    }
    .pardon-video-has-play:not(.pardon-video-plain) .pardon-video-play {
        top: 50%;
        bottom: auto;
        --tw-translate-y: -50%;
    }
    .pardon-video-has-play:not(.pardon-video-plain) .pardon-video-body {
        padding-top: 2rem;
        padding-bottom: 3rem;
    }
}

/* Rental paketi na telefonu i tabletu (klijent 2026-10-14: „kompaktnije"):
 * maketa slaže tri visoke kartice jednu ispod druge (~2000 px po tabu) — sada
 * su jedna pored druge i prevlače se, a sljedeća viri sa strane (telefon:
 * kartica 86 % širine; tablet: dvije). Manja kartica i razmaci. Zaglavlje:
 * oznaka (BOX S) gore, cijena ispod, bez min. visine 190 px makete — njena
 * ispravka predloga (oznaka i cijena u jednom redu su bile „natrpane"). Od
 * 1024 px maketa (tri u redu). */
@media (max-width: 1023.98px) {
    .pardon-rental-tabs {
        margin-top: 1.75rem;
        margin-bottom: 1.5rem;
    }
    .pardon-rental-track {
        display: flex;
        max-width: none;
        gap: .75rem;
        /* Do ivica ekrana (preko unutrašnje margine `.wrap`), da kartica
         * izlazi iza ivice, a ne iza praznog pojasa. Gore mjesto za podizanje
         * kartice na prelaz / dodir (istaknuta: 0,375rem), dole za sjenku
         * istaknute kartice — traka sa overflow-x siječe i po visini. */
        margin-left: -1.25rem;
        margin-right: -1.25rem;
        padding: .5rem 1.25rem 1.25rem;
        scroll-padding-inline: 1.25rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        /* Miš (uzak prozor na računaru): točkić pomjera stranu, ne traku —
         * tanka traka za pomjeranje ostaje vidljiva. */
        scrollbar-width: thin;
        scrollbar-color: #cfcbc6 transparent;
    }
    .pardon-rental-card {
        flex: 0 0 86%;
        scroll-snap-align: center;
        padding: 1.25rem;
    }
    /* Jedan paket u tabu: u sredini, ne uz lijevu ivicu. */
    .pardon-rental-card:only-child {
        margin-left: auto;
        margin-right: auto;
    }
    .pardon-rental-head {
        min-height: 0;
        justify-content: flex-start;
        padding: 1rem 1.125rem;
    }
    .pardon-rental-badge {
        position: static;
        align-self: flex-start;
        margin-bottom: .625rem;
    }
    .pardon-rental-amount {
        font-size: 24px;
    }
    .pardon-rental-title {
        margin-top: 1rem;
        font-size: 19px;
    }
    .pardon-rental-desc {
        margin-top: .5rem;
    }
    .pardon-rental-rule {
        margin-top: .875rem;
        margin-bottom: .875rem;
    }
    .pardon-rental-list {
        font-size: 13px;
    }
    /* Ista specifičnost kao `space-y-3.5` makete — pobjeđuje redoslijedom. */
    .pardon-rental-list > :not([hidden]) ~ :not([hidden]) {
        margin-top: .5rem;
    }
    .pardon-rental-cta {
        padding-top: 1.25rem;
    }
}
/* Tabovi perioda (Mjesečni / Sezonski / Godišnji) na telefonu: traka makete
 * je 377 px, pa je ispod 430 px izlazila van sadržaja („MJESEČNI" odsječen na
 * 360 px — Jelena 2026-10-14: „suzi tabove"). Tu je traka širine sadržaja,
 * tri jednaka taba sa manjim razmakom; ispod 360 px i slova 11 px. Od 430 px
 * traka iz makete staje. */
@media (max-width: 429.98px) {
    .pardon-rental-tabs [role="tablist"] {
        display: flex;
        width: 100%;
    }
    .pardon-rental-tabs .tab {
        flex: 1 1 0;
        min-width: 0;
        padding-left: .375rem;
        padding-right: .375rem;
        white-space: nowrap;
    }
}
@media (max-width: 359.98px) {
    .pardon-rental-tabs .tab {
        font-size: 11px;
        letter-spacing: .1em;
    }
}
/* Ekran na dodir: traka se prevlači prstom, traka za pomjeranje ne treba. */
@media (max-width: 1023.98px) and (hover: none) {
    .pardon-rental-track {
        scrollbar-width: none;
    }
    .pardon-rental-track::-webkit-scrollbar {
        display: none;
    }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    .pardon-rental-track {
        margin-left: -2rem;
        margin-right: -2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        scroll-padding-inline: 2rem;
    }
    .pardon-rental-card {
        flex-basis: calc((100% - .75rem) / 2);
        scroll-snap-align: start;
    }
}

/* Video sekcija (po maketi — klijent 2026-10-05; od 01.10. bila po slici
 * dizajna) bez slike: bijelo dugme „play" iz makete bi nestalo na bijeloj
 * podlozi — postaje tamno. */
.pardon-video-plain .pardon-video-play {
    border-color: rgba(17, 17, 17, .7);
    color: #111;
}
.pardon-video-plain .pardon-video-play:hover {
    background-color: rgba(17, 17, 17, .06);
}

/* ==== Obične strane (Faza 3) — po SLICI dizajna „12 Rentiranje" ==========
 * Mjere su sa slike dizajna (1440 px širine): hero 450, uvod 307, tekst 2 +
 * slike 596, traka bloka 394. Tekst je 14/20 px kao na slici, naslovi font
 * naslova makete. pages/pardon-page-default.php. */

/* Hero: visina slike dizajna (1440 × 450 = 31,25vw), header proziran preko
 * nje; putanja i naslov centrirani u dijelu ispod headera. Bez preliva
 * (pikseli slike dizajna = fotografija) — blaga sjenka slova za svijetla
 * mjesta, kao CTA početne. */
/* min-height, ne height: dug naslov (tri-četiri reda na telefonu) produži
 * hero umjesto da ga odsiječe. */
.pardon-page-hero {
    min-height: clamp(18.75rem, 31.25vw, 37.5rem);
}
.pardon-page-hero-body {
    align-self: center;
    /* Na dizajnu je blok 8 px niže od sredine dijela ispod headera (+1rem);
     * dodatnih 1,5rem gore i dolje drže tu sredinu, a dug naslov ne dodiruje
     * donju ivicu. */
    padding-top: calc(var(--header-h, 92px) + 2.5rem);
    padding-bottom: 1.5rem;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .28);
}
/* Naslov 54 px na desktopu (izmjereno na slici dizajna — maketa ima 46). */
.pardon-page-title {
    font-size: 32px;
    line-height: 1.1;
}
@media (min-width: 640px) {
    .pardon-page-title {
        font-size: 40px;
    }
}
@media (min-width: 1024px) {
    .pardon-page-title {
        font-size: 54px;
    }
}
.pardon-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: .5rem;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, .78);
}
.pardon-crumbs li + li::before {
    content: "/";
    content: "/" / "";
    margin: 0 .375rem;
}
.pardon-crumbs a {
    color: inherit;
    transition: color .2s;
}
.pardon-crumbs a:hover {
    color: #fff;
}
.pardon-crumbs [aria-current="page"] {
    color: #fff;
    font-weight: 600;
}

/* Link sa krugom: „Nazad na Naslovnu stranicu" i link trake bloka. Tanak
 * svijetli krug i siva strelica; na prelaz mišem krug se popuni (kao strelice
 * slajdera makete). */
.pardon-circle {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #C4C4C4;
    border-radius: 9999px;
    color: #5F5F5F;
    transition: border-color .3s, background-color .3s, color .3s;
}
.pardon-back,
.pardon-circle-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 15px;
    line-height: 20px;
    transition: color .2s;
}
.pardon-back {
    color: #141414;
}
.pardon-circle-link {
    color: #111;
    font-weight: 500;
}
.pardon-back:hover .pardon-circle,
.pardon-circle-link:hover .pardon-circle,
.pardon-back:focus-visible .pardon-circle,
.pardon-circle-link:focus-visible .pardon-circle {
    border-color: #111;
    background-color: #111;
    color: #fff;
}

/* Tekst iz editora na strani: Inter Light 14/20 px — širine redova na slici
 * dizajna se poklapaju na piksel samo sa težinom 300. Na sivim trakama
 * (uvod, traka bloka) je tekst skoro crn, na bijeloj (tekst 2) siv — tako je
 * na slici dizajna (izmjereno po zatamnjenju piksela). Naslovi: Manrope 500
 * (širine i zatamnjenje sa slike; maketa ima 400). Uvod: h2 kao naslov
 * sekcije (32 px na desktopu); tekst 2: h2 24 px, uži od kolone (na dizajnu
 * se lomi u dva reda). */
.pardon-page-text,
.pardon-page-text2,
.pardon-page-cta-text {
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: #141414;
}
.pardon-page-text2 {
    color: #5F5F5F;
}
.pardon-page-text2 h2 {
    max-width: 32rem;
}
.pardon-page-text :is(h2, h3, h4),
.pardon-page-text2 :is(h2, h3, h4) {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    color: #141414;
}
.pardon-page-text h2 {
    font-size: 24px;
    line-height: 1.25;
}
.pardon-page-text h3,
.pardon-page-text2 h2 {
    font-size: 22px;
    line-height: 1.45;
}
.pardon-page-text h4,
.pardon-page-text2 :is(h3, h4) {
    font-size: 18px;
    line-height: 1.45;
}
@media (min-width: 1024px) {
    .pardon-page-text h2 {
        font-size: 32px;
        line-height: 1.12;
    }
    .pardon-page-text h3,
    .pardon-page-text2 h2 {
        font-size: 24px;
        line-height: 1.5;
    }
}
.pardon-page-text :is(h2, h3, h4) + *,
.pardon-page-text2 :is(h2, h3, h4) + * {
    margin-top: 1.875rem;
}
.pardon-page-text * + :is(h2, h3, h4),
.pardon-page-text2 * + :is(h2, h3, h4) {
    margin-top: 2.5rem;
}
.pardon-page-text strong,
.pardon-page-text b,
.pardon-page-text2 strong,
.pardon-page-text2 b {
    color: #141414;
}

/* Uvod (siva traka). */
.pardon-page-intro {
    padding-block: 2.75rem 3rem;
}
.pardon-page-text {
    margin-top: 1.0625rem;
}

/* Tekst 2 + slike: kolone 571 : 638 px sa razmakom 53 px (dizajn), slike
 * centrirane po visini sa tekstom. Desna ivica slika izlazi iz okvira
 * sadržaja do 82 px, a do ivice ekrana uvijek ostaje 6 px kao na dizajnu.
 * Mjeri se širinom sekcije (100cqw), ne prozora (100vw): 100vw uključuje i
 * traku za skrolovanje (Windows), pa bi slika ušla pod nju. */
.pardon-page-split-section {
    container-type: inline-size;
    padding-block: 3.5rem;
}
.pardon-page-split {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}
.pardon-page-split-solo .pardon-page-text2 {
    max-width: 48rem;
}
@media (min-width: 1024px) {
    .pardon-page-split-section {
        padding-block: 4.375rem 4.1875rem;
    }
    .pardon-page-split:not(.pardon-page-split-solo) {
        grid-template-columns: minmax(0, 571fr) minmax(0, 638fr);
        column-gap: 3.3125rem;
    }
    /* Prostor desno od okvira sadržaja: margina .wrap (max-width 1344px u
     * pardon.css) + unutrašnji razmak .wrap (2.5rem), minus 6 px do ivice;
     * najviše 82 px (1440 → 720 px grupa slika, tačno kao dizajn). Iste
     * jedinice kao .wrap — sa drugom osnovnom veličinom slova u pregledaču
     * px i rem se razilaze. */
    .pardon-page-media {
        margin-right: calc(-1 * min(max((100cqw - 1344px) / 2, 0px) + 2.5rem - 6px, 82px));
    }
}
/* Dvije preklopljene slike: grupa 720 × 459, svaka 497 × 334 (69 % × 73 %). */
.pardon-pair {
    position: relative;
    aspect-ratio: 720 / 459;
}
.pardon-pair img {
    position: absolute;
    width: 69.03%;
    height: 72.77%;
    object-fit: cover;
    border-radius: .625rem;
}
.pardon-pair-front {
    left: 0;
    bottom: 0;
    z-index: 1;
}
.pardon-pair-back {
    top: 0;
    right: 0;
}
.pardon-page-img {
    width: 100%;
    aspect-ratio: 497 / 334;
    object-fit: cover;
    border-radius: .625rem;
}
.pardon-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.5rem;
}
.pardon-page-split + .pardon-page-grid {
    margin-top: 3.5rem;
}

/* Traka iz bloka (siva): naslov, opis, link sa krugom. Dva bloka jedan za
 * drugim su jedna siva površina — drugi ne ponavlja gornji razmak. */
.pardon-page-cta {
    padding-block: 4.5rem;
}
.pardon-page-cta + .pardon-page-cta {
    padding-top: 0;
}
/* Naslov trake je `section-title` makete, ali na slici dizajna bez stisnutih
 * slova i težine 500 (širina i zatamnjenje naslova sa slike). */
.pardon-page-cta .section-title {
    font-weight: 500;
    letter-spacing: 0;
}
.pardon-page-cta-text {
    max-width: 56rem;
    margin: 2.125rem auto 0;
}
.pardon-page-cta .pardon-circle-link {
    margin-top: 1.75rem;
}
@media (min-width: 1024px) {
    .pardon-page-cta {
        padding-block: 7.75rem;
    }
}

/* ==== Informacije (Faza 3, stavka 2) — po _html/onama.html ===============
 * Strane iz menija INFORMACIJE (O nama, pravne strane), isti view kao gore.
 * Slike dizajna nema, pa važi HTML maketa; markup koristi njene klase, a
 * ovdje je samo ono što maketa nema. */

/* Hero: na maketi je header iznad slike (page-inner — slika počinje ispod
 * njega), a ovdje je proziran PREKO nje (odluka klijenta, kao Rentiranje) —
 * gornji razmak je zato visina headera + razmak makete (py-16 / sm:py-20 /
 * lg:py-24); donji ostaje iz klasa makete. */
.pardon-info-hero-body {
    padding-top: calc(var(--header-h, 92px) + 4rem);
}
@media (min-width: 640px) {
    .pardon-info-hero-body {
        padding-top: calc(var(--header-h, 92px) + 5rem);
    }
}
@media (min-width: 1024px) {
    .pardon-info-hero-body {
        padding-top: calc(var(--header-h, 92px) + 6rem);
    }
}
/* Veliki naziv menija: maketa mu ostavlja visinu reda teksta strane (24 px),
 * pa bi se dva reda (dug naziv na telefonu) preklopila. Ovdje je red 1.1, a
 * negativna margina vraća visinu jednog reda na 24 px — položaj kao na
 * maketi, a drugi red ima svoje mjesto. */
.pardon-info-hero-title {
    line-height: 1.1;
    margin-block: calc((24px - 1.1em) / 2);
}
/* Putanja u stilu nadnaslova makete („NASLOVNA / INFORMACIJE"), kao lista sa
 * linkom na početnu. Svjetlija od nadnaslova makete (90 % umjesto 70 %
 * bijele) i sa tankom sjenkom: sitan tekst preko najsvjetlijeg dijela Cover
 * slike je i sa zatamnjenjem imao kontrast ispod 4,5:1 (vidi CHANGELOG). */
.pardon-info-crumbs {
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.pardon-info-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .5rem;
}
/* Razmak oko „/" kao na maketi (razmak riječi + mx-1.5 sa obje strane):
 * stavke flex liste gube razmak između riječi, pa je tvrdi razmak u znaku. */
.pardon-info-crumbs li + li::before {
    content: "\00a0/\00a0";
    content: "\00a0/\00a0" / "";
    margin: 0 .375rem;
    opacity: .6;
}
.pardon-info-crumbs a {
    color: inherit;
    transition: color .2s;
}
.pardon-info-crumbs a:hover {
    color: #fff;
}

/* Tekst strane iz editora, složen kao članak makete: pasusi i liste
 * centrirani (16/26 px, siv; lista bez oznake, 8 px između stavki —
 * space-y-2 u pravila-kupovine.html i kolacici.html), naslovi sekcija desno
 * (Manrope 400, 22/26 px), 1rem između blokova i 3rem prije naslova
 * (space-y-4 / mt-12). Maketa ima jedan stil naslova sekcije (h3), a
 * tekstovi u adminu za sekcije koriste h2 (Politika privatnosti, Kolačići)
 * ili h3 (Pravila kupovine) — zato h2 i h3 izgledaju isto. Tabela maketa
 * nema: poravnata lijevo, klizi vodoravno kad je šira od kolone (Kolačići:
 * 4 kolone — na 320 px bi se odsjekla). */
.pardon-info-text {
    margin-top: 1.5rem;
    font-size: 16px;
    line-height: 1.625;
    color: #5F5F5F;
    text-align: center;
}
.pardon-info-text > * + * {
    margin-top: 1rem;
}
.pardon-info-text > * + :is(h2, h3, h4, h5, h6) {
    margin-top: 3rem;
}
.pardon-info-text :is(h2, h3, h4, h5, h6) {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.3;
    color: #141414;
    text-align: right;
}
.pardon-info-text :is(h2, h3) {
    font-size: 22px;
}
.pardon-info-text :is(h4, h5, h6) {
    font-size: 18px;
}
@media (min-width: 640px) {
    .pardon-info-text :is(h2, h3) {
        font-size: 26px;
    }
}
.pardon-info-text :is(strong, b) {
    font-weight: 600;
    color: #141414;
}
.pardon-info-text a {
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s;
}
.pardon-info-text a:hover {
    color: #111;
}
/* Numerisana lista zadržava brojeve, u redu sa tekstom jer je red
 * centriran (preflight skida oznake svim listama). */
.pardon-info-text ol {
    list-style: decimal inside;
}
.pardon-info-text li + li,
.pardon-info-text li > :is(ul, ol) {
    margin-top: .5rem;
}
/* Editor tabeli kojoj se mijenjala veličina upiše širinu i VISINU u
 * `style` (Kolačići: `height: 167.4px`). Kao blok koji klizi tabela bi tada
 * odsjekla redove i dobila svoju traku za skrolovanje, pa visina mora biti
 * auto — `!important` jer je upisana u sam element. Širinu drži max-width. */
.pardon-info-text table {
    display: block;
    max-width: 100%;
    height: auto !important;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}
.pardon-info-text :is(th, td) {
    padding: .625rem .75rem;
    border-bottom: 1px solid #E7E5E2;
    vertical-align: top;
}
/* Na telefonu najmanja širina ćelije: tabela je i tada šira od ekrana, a
 * bez ovoga bi se svaka kolona stisnula na svoju najdužu riječ i red bio
 * visok i do desetak linija. Ovako tabela klizi malo više, a redovi su
 * čitljivi. Na širem ekranu tabela staje u kolonu i ovo ne važi. */
@media (max-width: 639px) {
    .pardon-info-text :is(th, td) {
        min-width: 8rem;
    }
}
.pardon-info-text th {
    font-weight: 600;
    color: #141414;
}
/* Slika i video iz editora centrirani kao tekst (preflight ih pravi blok
 * elementima uz lijevu ivicu). */
.pardon-info-text :is(img, iframe, video) {
    margin-inline: auto;
}
.pardon-info-text :is(iframe, video) {
    max-width: 100%;
}

/* ==== Kontakt — po HTML maketi `_html/kontakt.html` ======================
 * pages/pardon-contact.php (klijent 2026-10-05: „ipak treba da ide kako je u
 * html"; do tada po slici dizajna „24 Kontakt"). Izgled daju klase makete;
 * ovdje je samo ono što maketa nema, a sajt traži. */

/* Hero: na maketi je header iznad slike (page-inner — slika počinje ispod
 * njega), a ovdje je proziran PREKO nje (odluka klijenta, kao Informacije) —
 * gornji razmak je zato visina headera + razmak makete (py-20 / lg:py-28);
 * donji ostaje iz klasa makete. */
.pardon-contact-hero-body {
    padding-top: calc(var(--header-h, 92px) + 5rem);
}
@media (min-width: 1024px) {
    .pardon-contact-hero-body {
        padding-top: calc(var(--header-h, 92px) + 7rem);
    }
}
/* Naslov: maketa mu ostavlja visinu reda teksta (24 px), pa bi se dug naslov
 * na telefonu u dva reda preklopio. Kao na Informacijama: red 1.1, a
 * negativna margina vraća visinu jednog reda na 24 px — položaj kao maketa. */
.pardon-contact-hero-title {
    line-height: 1.1;
    margin-block: calc((24px - 1.1em) / 2);
}
/* Nadnaslov (polje „Nadnaslov" strane): svjetliji od makete (90 % umjesto
 * 70 % bijele), kao putanja na Informacijama, i sa tamnim oreolom — iza
 * naslova je na Cover slici bijeli difuzer, pa sitan tekst i sa
 * zatamnjenjem ima kontrast oko 2,8:1; oreol zatamni podlogu oko slova. */
.pardon-contact-eyebrow {
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 0 8px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .6);
}
/* Kartica bez kolone kontakata (u Podešavanjima i na strani nema nijednog
 * podatka) ostaje u svojoj, desnoj koloni. */
@media (min-width: 1024px) {
    .pardon-contact-solo {
        grid-column-start: 2;
    }
}
/* E-mail strane / Podešavanja nema ograničenu dužinu: dug se u uskoj koloni
 * lomi umjesto da izađe iz strane. */
.pardon-contact-email {
    overflow-wrap: anywhere;
}
/* Polja: na telefonu 16 px (maketa 14) — sitniji tekst u polju iPhone pri
 * kucanju uvećava stranu. Primjer u polju (Prevodi) duži od polja — na
 * 1024–1073 px i ispod 334 px „markomarkovic@gmail.com" — završava se
 * trotačkom umjesto odsječenog slova. */
@media (max-width: 639px) {
    .pardon-contact-form :is(input, select, textarea) {
        font-size: 16px;
    }
}
.pardon-contact-form input {
    text-overflow: ellipsis;
}
/* Lista „Tema" (maketa je nema): pregledač joj visinu ne računa po visini
 * reda kao poljima, pa je bez ovoga 2 px niža od susjednih polja — ista
 * visina kao polje: py-3 + red 20 px + ivica. */
.pardon-contact-form select {
    height: calc(1.5rem + 22px);
}
/* Greška polja sa servera (422, ajax-forms.js); poruku ispod polja stilizuje
 * .invalid-feedback gore. Na fokusu crveni prsten: crvena ivica pobjeđuje
 * `focus:border-ink`, a `focus:outline-none` makete gasi opšti prsten — bez
 * ovoga se fokus na takvom polju ne bi vidio. */
.pardon-contact-form .is-invalid {
    border-color: #C0392B;
}
.pardon-contact-form .is-invalid:focus-visible {
    outline: 2px solid #C0392B;
    outline-offset: 2px;
}
/* Dugme dok ajax-forms.js šalje poruku (disabled) — maketa nema to stanje. */
.pardon-contact-form button:disabled {
    opacity: .6;
    cursor: progress;
}

/* ---- Lista proizvoda (Faza 4) — po HTML maketi `_html/prodavnica.html`
 * (klijent 2026-10-02: „sve kako je na HTML-u", ne po slikama dizajna).
 * Izgled daju klase makete (pardon.css: .pill-track, .tab, .product-card,
 * .filter-*, .page-*); ovdje je samo ono što maketa nema, a sajt traži. ---- */

/* Dugme „Primijeni" kad je JavaScript isključen (sortiranje, filteri). */
.pardon-plp-apply {
    padding: .5rem 1rem;
    border-radius: 9999px;
    background: #141414;
    font-size: 12px;
    color: #fff;
}
/* iPhone uvećava stranu kad se dodirne polje sa slovima manjim od 16 px —
 * samo tamo (-webkit-touch-callout ima samo iOS Safari): na drugim telefonima
 * šira lista bi slomila „Sortiraj po:" u dva reda. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 639px) {
        .pardon-sort-select,
        .pardon-plp-goto select {
            font-size: 16px;
        }
    }
}

/* Kartica liste (maketa): naziv se lomi i u dugoj riječi; ispod 640 px cijena
 * ide ispod naziva — kartica je ~150 px, a cijena sa decimalama („2.160,00 €")
 * bi nazivu ostavila ~40 px (maketa ima kratke cijene). `break-word`, ne
 * `anywhere`: sa `anywhere` naziv pored cijene se skupljao ispod najduže
 * riječi, pa se na 1024 px „PATCHOULY" lomio usred riječi (Faza 8); sada
 * riječ ostaje cijela, a lomi se tek ona duža od cijele kartice. */
.pardon-card-name {
    overflow-wrap: break-word;
}
@media (max-width: 639px) {
    .pardon-card-body {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }
    .pardon-card-price {
        text-align: left;
    }
}

/* Opis kategorije iz admina sa više pasusa. */
.pardon-plp-intro > * + * {
    margin-top: .75rem;
}

/* ---- Lijeva kolona sa filterima (Faza 4, stavka 2) — izgled iz makete
 * (.filter-group, .filter-head, .filter-check, `space-y-8`). Dopune: */
.pardon-filter-h {
    margin: 0;
}
/* Naslov grupe: od 1024 px običan naslov (grupe su uvijek otvorene — dugme
 * koje ništa ne radi bi čitač ekrana najavljivao kao „dugme, otvoreno"); na
 * telefonu dugme koje sklapa grupu. display:none sklanja i čitaču ekrana. */
@media (max-width: 1023.98px) {
    .pardon-filter-static {
        display: none;
    }
}
@media (min-width: 1024px) {
    .pardon-filter-toggle {
        display: none;
    }
}
/* Telefon sa JS-om: sklopljena grupa je i nevidljiva — inače bi Tab ulazio u
 * kvačice koje se ne vide (maketa samo spušta visinu na 0). Granica 1023.98
 * a ne 1023: pri uvećanju širina zna biti 1023,5 px. */
@media (max-width: 1023.98px) {
    /* padding/margin: tijelo grupe na telefonu sječe sadržaj (overflow
     * makete), pa bi prsten fokusa kvačica, linkova i klizača ostao bez
     * lijeve i desne ivice. */
    .js .pardon-filters .filter-body {
        visibility: hidden;
        padding-inline: 4px;
        margin-inline: -4px;
        transition: max-height .35s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .35s;
    }
    .js .pardon-filters .filter-group.is-open .filter-body {
        visibility: visible;
        transition: max-height .35s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s;
    }
}
/* Bez JS-a grupe se ne mogu sklapati — sve su otvorene, bez strelice. */
html:not(.js) .pardon-filters .filter-body {
    max-height: none;
    overflow: visible;
}
html:not(.js) .pardon-filters .filter-caret {
    display: none;
}
/* pardon.js poslije osvježavanja otvara grupu kontrole koja se vraća — odmah,
 * bez animacije, da položaj na ekranu bude tačan. */
.pardon-filters--instant .filter-body {
    transition: none !important;
}
/* Fokus koji pardon.js vrati poslije osvježavanja liste (sa tastature) —
 * programski fokus pregledač ne označava sam. */
.pardon-filters .is-kbd-focus:focus {
    outline: 2px solid #141414;
    outline-offset: 2px;
}

/* ---- Lista na telefonu i tabletu (do 1023 px) — klijent 2026-10-14:
 * „filteri spakovani po defaultu + bolji tabovi". Od 1024 px maketa. ----
 *
 * Tabovi u redove — svi vidljivi, umjesto trake koja se prevlači (na
 * telefonu su se vidjela dva taba od pet). Svaka pilula ima svoju sivu
 * podlogu (traka makete bez nje). */
@media (max-width: 1023.98px) {
    .pardon-plp-tabs {
        margin: 0 0 1.5rem;
        padding: 0;
        overflow: visible;
    }
    .pardon-plp-tabs .pill-track {
        display: flex;
        flex-wrap: wrap;
        width: auto;
        min-width: 0;
        gap: .5rem;
        padding: 0;
        background: none;
    }
    .pardon-plp-tabs .tab {
        padding: .55rem 1rem;
        font-size: 11px;
        background-color: #f4f4f4;
    }
    .pardon-plp-tabs .tab.is-active {
        background-color: rgb(242 201 180);
    }
}
/* Dugme „Filteri (n)" (pardon.js): samo do 1023 px i sa JS-om. Kolona je
 * sklopljena dok se dugme ne pritisne (display:none — sklopljene kontrole
 * nisu ni u redu tastera Tab); poslije promjene filtera pardon.js je otvara. */
.pardon-filters-btn {
    display: none;
}
@media (max-width: 1023.98px) {
    .js .pardon-filters-btn {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        border: 1px solid #e7e5e2;
        border-radius: 9999px;
        background: #fff;
        padding: .8rem 1.25rem;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #111;
    }
    .pardon-filters-caret {
        flex: none;
        transition: transform .3s cubic-bezier(.22, 1, .36, 1);
    }
    .pardon-filters-btn[aria-expanded="true"] .pardon-filters-caret {
        transform: rotate(180deg);
    }
    .js .pardon-plp-aside:not(.is-open) .pardon-filters {
        display: none;
    }
    .js .pardon-plp-aside.is-open .pardon-filters {
        margin-top: 1.5rem;
    }
    /* Razmak dugme → „Prikaz N od M" (grid makete: 2,5rem). */
    .js .pardon-plp-layout {
        row-gap: 1.25rem;
    }
}

/* Strane: neaktivna strelica (prva / posljednja strana). */
.page-arrow.is-disabled {
    opacity: .35;
    pointer-events: none;
}

/* ==== Strana proizvoda (Faza 5) — po HTML maketi `_html/detalji-proizvoda.html`
 * shop/product/pardon-detail.php. Izgled daju klase makete (.lightbox, .lb-*,
 * .footer-social, .btn); ovdje je samo ono što maketa nema, a sajt traži. */

/* Galerija: proizvod bez pozadine (maketa) stoji u kvadratu sa razmakom (p-10
 * makete), fotografija popunjava kvadrat — isto pravilo kao kartica liste.
 * Klasu bira pardon.js pri svakoj promjeni slike. */
.pardon-pdp-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.pardon-pdp-img.is-cutout {
    object-fit: contain;
    padding: 2.5rem;
}
.pardon-pdp-img.is-photo {
    object-fit: cover;
}
/* Sa JS-om: prevlačenje prstom mijenja sliku (vodoravni pokret ne skroluje
 * stranu, uspravni da; štipanje dva prsta i dalje uvećava stranu), a klik na
 * sliku otvara prikaz preko cijelog ekrana. */
.js .pardon-pdp-stage {
    touch-action: pan-y pinch-zoom;
    cursor: zoom-in;
}
/* Strelice, lupa i korpa bez JS-a ne rade ništa — tada se ne prikazuju
 * (korpu vodi shop-cart.js preko API-ja; forma bi samo osvježila stranu). */
html:not(.js) .pardon-gallery-ctl,
html:not(.js) [data-pardon-buy] {
    display: none;
}
/* Prikaz preko cijelog ekrana: vodoravno prevlačenje prstom mijenja sliku
 * (pardon.js), pa ga pregledač ne smije uzeti za sebe. */
.lightbox {
    touch-action: pan-y pinch-zoom;
}
/* Fokus: prsten UNUTAR kruga, kao dugmad — bijeli prsten oko crnog kruga bi
 * na sivoj pozadini galerije bio nevidljiv. */
.pardon-gallery-ctl:focus-visible {
    outline-offset: -5px;
}
/* Naziv proizvoda: maketa mu ostavlja visinu reda teksta (24 px uz slova od
 * 30 / 34 px), pa bi se dug naziv u dva reda (telefon) preklopio. Red 1.15, a
 * negativna margina vraća jednom redu visinu od 24 px (+ mt-1 makete) —
 * položaj kao maketa. */
.pardon-pdp-title {
    line-height: 1.15;
    margin-top: calc(.25rem + (24px - 1.15em) / 2);
    margin-bottom: calc((24px - 1.15em) / 2);
}
/* Uvećana slika u prikazu preko cijelog ekrana prati i prst (pardon.js) —
 * pokret prstom tada ne smije pomjerati ni uvećavati stranu. */
.lb-img.is-zoomed {
    touch-action: none;
}

/* „Na stanju": zelena makete (#16A34A) sa bijelim slovima od 11 px ima
 * kontrast 3,3:1 — tamnija nijansa iste zelene (#15803D) ima 5:1 (WCAG AA). */
.pardon-stock-in {
    background-color: #15803d;
}

/* Količina: polje za broj izgleda kao broj u maketi — bez strelica
 * pregledača, okvira i pozadine. */
.pardon-qty {
    -moz-appearance: textfield;
    appearance: textfield;
    border: 0;
    background: transparent;
    padding: 0;
    color: #111;
}
.pardon-qty::-webkit-outer-spin-button,
.pardon-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* iPhone uvećava stranu na dodir polja sa slovima manjim od 16 px. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 639px) {
        .pardon-qty {
            font-size: 16px;
        }
    }
}
/* Dugme korpe dok zahtjev traje (pardon.js). */
[data-pardon-buy-btn][aria-busy="true"] {
    cursor: progress;
    opacity: .7;
}

/* ---- Tabovi strane proizvoda (Faza 5, stavka 2) ---------------------- */

/* Bez JS-a tab je samo link na svoj panel, pa su svi paneli vidljivi jedan
 * ispod drugog (`hidden` sa servera skida tek pardon.js initTabs). */
html:not(.js) .pardon-pdp-tabs [data-tab-panel].hidden {
    display: block;
}
html:not(.js) .pardon-pdp-tabs [data-tab-panel] + [data-tab-panel] {
    margin-top: 2.5rem;
}
/* Skok na panel (link taba bez JS-a) ostavlja mjesta fiksnom headeru — kao
 * sidra početne. Sa JS-om je panel ispod trake tabova (37 px + pt-7), pa
 * adresa sa sidrom panela (#pardon-pdp-spec — pregledač na nju skoči sam pri
 * učitavanju, pardon.js isto) ostavlja u vidu i traku. */
.pardon-pdp-tabs [data-tab-panel] {
    scroll-margin-top: calc(var(--header-h, 92px) + 1rem);
}
.js .pardon-pdp-tabs [data-tab-panel] {
    scroll-margin-top: calc(var(--header-h, 92px) + 1rem + 37px + 1.75rem);
}
/* Neaktivan tab: siva makete (70 % od #5F5F5F) ima kontrast 3,2:1 sa
 * bijelom — 86 % daje 4,5:1 (WCAG AA za slova od 13 px), nijansu tamnije. */
.tab-underline {
    color: rgba(95, 95, 95, .86);
}
/* Specifikacije: maketa ima samo kratke vrijednosti (`justify-between` bez
 * razmaka); duga („Uključeno: difuzer na revers, …", do ~110 znakova) ide u
 * više redova, odvojena od naziva i poravnata desno kao kratke. Naziv se ne
 * sužava (na telefonu bi se „Idealno za" prelomio uz dugu vrijednost) — lomi
 * se tek kad je duži od pola reda. */
.pardon-spec-row {
    gap: 1.5rem;
}
.pardon-spec-row dt {
    flex-shrink: 0;
    max-width: 50%;
}
/* min-width + overflow-wrap: vrijednost bez razmaka (link na PDF…) se lomi
 * umjesto da na telefonu izađe van reda. */
.pardon-spec-row dd {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
}
/* Opis iz editora (Quill 2 u adminu): lista sa tačkama je `<ol>` sa
 * `data-list="bullet"` na stavci (bez ovoga bi imala brojeve), a lista sa
 * tačkama i numerisana jedna za drugom su JEDAN `<ol>` — stavke sa tačkom
 * zato ne broje (numerisana kreće od 1). Naslovima preflight skida veličinu
 * i debljinu. Danas su svi opisi čist tekst. */
.pardon-pdp-desc li[data-list="bullet"] {
    list-style-type: disc;
    counter-increment: list-item 0;
}
.pardon-pdp-desc h1,
.pardon-pdp-desc h2,
.pardon-pdp-desc h3 {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    line-height: 1.3;
    color: #141414;
}
.pardon-pdp-desc h1,
.pardon-pdp-desc h2 {
    font-size: 22px;
}
.pardon-pdp-desc h3 {
    font-size: 18px;
}
/* „Play" u tabu Video: prsten fokusa UNUTAR crnog kruga — spoljni bijeli
 * prsten bi na sivom okviru bio nevidljiv. */
.pardon-video-inline:focus-visible {
    outline-offset: -5px;
}
/* Režim visokog kontrasta (Windows): pregledač boji pozadine u boju podloge,
 * pa bi crta aktivnog taba (pozadina pseudo-elementa) postala rupa u liniji,
 * a od kruga „play" ostao samo trougao. */
@media (forced-colors: active) {
    .tab-underline.is-active:after {
        forced-color-adjust: none;
        background-color: CanvasText;
    }
    .pardon-video-inline {
        border: 2px solid;
    }
}

/* ---- Preporučeni dodaci i Slični proizvodi (Faza 5, stavka 3) --------- */

/* Kartica dodatka: gornji dio (slika, naziv, cijena) raste do visine reda,
 * pa su količina i „Dodaj u korpu" u istoj liniji na svim karticama reda i
 * kad je neki naziv u dva reda (maketa ima nazive iste dužine). */
.pardon-addon-main {
    flex: 1 1 auto;
}
/* Slika bez pozadine u kartici dodatka: maketa daje samo visinu (78 %), pa
 * bi široka slika (slika-zamjena 3:2) išla od ivice do ivice sivog polja. */
.pardon-addon-cutout {
    max-width: 78%;
}

/* ---- Omiljeni bez naloga (Faza 5, stavka 4) ------------------------- */

/* Lista je u pregledaču (pardon.js initWishlist) — bez JS-a „Dodaj u
 * omiljene" i „Ukloni" ne bi ništa uradili, pa se ne prikazuju. */
html:not(.js) [data-pardon-wish],
html:not(.js) [data-pardon-wish-remove] {
    display: none;
}
/* Proizvod je u omiljenima: srce makete se puni, a umjesto „Dodaj u
 * omiljene" se vidi „Ukloni iz omiljenih". Oba natpisa su u istom polju
 * mreže, pa je dugme uvijek široko kao duži natpis (red sa dijeljenjem se
 * ne prelama iznova pri kliku); sakriveni natpis čitač ekrana ne čita. */
.pardon-wish.is-on svg path {
    fill: currentColor;
}
.pardon-wish-labels {
    display: inline-grid;
    text-align: left;
}
.pardon-wish-labels > span {
    grid-area: 1 / 1;
}
.pardon-wish-del,
.pardon-wish.is-on .pardon-wish-add {
    visibility: hidden;
}
.pardon-wish.is-on .pardon-wish-del {
    visibility: visible;
}
/* Strana „Omiljeni" bez liste u adresi: poruka „Lista omiljenih je prazna."
 * čeka da pardon.js provjeri listu u pregledaču (inače bi se pokazala i kad
 * lista nije prazna, do preusmjerenja); ako JS ne radi, pokaže se sama
 * poslije 3 s. */
html.js [data-pardon-wish-pending] {
    visibility: hidden;
    animation: pardon-wish-reveal 0s linear 3s forwards;
}
@keyframes pardon-wish-reveal {
    to {
        visibility: visible;
    }
}
/* Poruke (oblačić, kao kod korpe) ispod headera, ne preko njega — inače
 * 4 s pokrivaju srce i korpu, a to je baš sljedeći klik. Na telefonu su
 * poruke ionako na dnu ekrana (flex-toast.css). */
@media (min-width: 576px) {
    .flex-toast-container {
        top: calc(var(--header-h, 92px) + .75rem);
    }
}
/* Strana „Omiljeni": kartica raste do visine reda (dugmad „Ukloni" ispod
 * kartica su u istoj liniji), a „Ukloni iz omiljenih" je 13 px (`text-body`
 * makete bi ga podigao na 16 px). Na najužim telefonima (i duži EN natpis)
 * ide u dva reda — tada poravnato lijevo, srce uz prvi red. */
.pardon-wish-item > .product-card {
    flex: 1 1 auto;
}
.pardon-wish-remove {
    align-items: flex-start;
    text-align: left;
    font-size: 13px;
    line-height: 20px;
}
.pardon-wish-remove svg {
    flex-shrink: 0;
    margin-top: 2.5px;
}

/* ---- Korpa (Faza 6, stavka 1) ---------------------------------------
 * Linija između redova kartice korpe (maketa ima jedan red). Pravilo na
 * susjednim redovima, ne `border-t` u markupu: kad shop-cart.js skloni prvi
 * red, novi prvi red ne smije dobiti duplu liniju ispod naziva kolona. */
.pardon-cart-row + .pardon-cart-row {
    border-top: 1px solid #e7e5e2;
}
/* Kolone makete (proizvod | 110 | 130 | 120 | 44 px) traže 516 px + naziv:
 * maketa ih pali od 640 px, a sažetak desno od 1024 px — tada je kartica
 * uža (560 px na 640, 564 px na 1024), pa su × i iznosi odsječeni
 * (`overflow-hidden` kartice). Zato kolone od 768 px (kartica ≥ 688 px), a
 * sažetak desno od 1280 px (kartica 820 px); ispod — red kao na telefonu i
 * sažetak ispod kartice, kao na tabletu. 1440 i telefon su kao maketa. */
.pardon-cart-head {
    display: none;
}
@media (min-width: 768px) {
    .pardon-cart-head,
    .pardon-cart-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 110px 130px 120px 44px;
        align-items: center;
    }
    .pardon-cart-qty {
        display: flex;
        justify-content: center;
    }
    .pardon-cart-total {
        text-align: right;
    }
}
@media (min-width: 1280px) {
    .pardon-cart-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 2.5rem;
    }
}

/* ---- Plaćanje (Faza 6, stavka 2) ------------------------------------
 * „Fizičko lice" / „Pravno lice" su radio dugmad u obliku tabova makete
 * (`.tab` iz pardon.css; izabran = `.tab.is-active`), pa izbor radi i bez
 * JavaScript-a. Polja firme (naziv, PIB) samo za pravno lice: `:has()`
 * bez JS-a, `.is-company` (pardon.js) za pregledače bez `:has()`. */
.pardon-co-type {
    cursor: pointer;
    /* Tab makete je <button> (tekst u sredini); kad se natpis prelomi u dva
     * reda (registracija na telefonu), i ovdje ostaje u sredini. */
    text-align: center;
}
.pardon-co-type:has(:checked) {
    background-color: rgb(242 201 180);
    color: rgb(17 17 17);
    box-shadow: 0 10px 30px -18px hsla(0, 0%, 7%, .12);
}
.pardon-co-type:has(:focus-visible) {
    outline: 2px solid #111;
    outline-offset: 2px;
}
.pardon-co-company {
    display: none;
}
.pardon-checkout-form:has(input[name="customer_type"][value="company"]:checked) .pardon-co-company,
.pardon-checkout-form.is-company .pardon-co-company,
.pardon-register-form:has(input[name="customer_type"][value="company"]:checked) .pardon-co-company,
.pardon-register-form.is-company .pardon-co-company {
    display: block;
}
/* `.is-company` stavlja i server (pravno lice poslije greške, nalog
 * pravnog lica na plaćanju — Faza 7, stavka 4); bez JS-a ga izbor
 * „Fizičko lice" ne skida, pa tada odlučuje izabrano dugme. */
.pardon-checkout-form.is-company:has(input[name="customer_type"][value="person"]:checked) .pardon-co-company,
.pardon-register-form.is-company:has(input[name="customer_type"][value="person"]:checked) .pardon-co-company {
    display: none;
}
/* Greška polja sa servera (poruka ispod polja: .invalid-feedback). Polja
 * makete nemaju ivicu, pa crveni okvir (i na fokusu, gdje bi ga inače
 * zamijenio tamni prsten makete). Isto i na registraciji (Faza 7). */
.pardon-checkout-form .is-invalid,
.pardon-register-form .is-invalid,
.pardon-profile-form .is-invalid {
    box-shadow: 0 0 0 1px #C0392B;
}
.pardon-checkout-form .is-invalid:focus,
.pardon-register-form .is-invalid:focus,
.pardon-profile-form .is-invalid:focus {
    box-shadow: 0 0 0 2px #C0392B;
}
/* Cijena u sažetku: širina kolone makete (w-16), a veći iznos ili
 * „/ mjesečno" je šire — tada kolona raste, ne prelazi preko ivice. */
.pardon-co-price {
    min-width: 4rem;
    flex-shrink: 0;
}
/* „/ mjesečno" ispod cijene rental paketa — sitnije od cijene, boja teksta
 * makete (`text-body` bi postavio i 16 px). */
.pardon-co-suffix {
    font-size: 12px;
    line-height: 16px;
    color: rgb(95 95 95);
}
/* Telefon i tablet (do 1023 px — forma i sažetak su jedno ispod drugog):
 * sažetak „Korpa" ide prvi, pa forma za plaćanje (klijent 2026-10-12: „na
 * telefonima … da korpa ide prva pa ispod ovo za plaćanje"; maketa ima formu
 * prvu). Samo prikaz — u kodu je forma prva, a u sažetku nema ničega na šta
 * se klikće, pa tastatura kroz formu ide istim redom. Na računaru sažetak
 * ostaje desno. */
@media (max-width: 1023.98px) {
    .pardon-checkout-form > aside {
        order: -1;
    }
}
/* „Potvrdi i plati" otvara prozor uslova — postoji tek kad ga pardon.js
 * napravi (bez JS-a uslovi i „Plati" stoje ispod forme). */
.pardon-checkout-form:not(.is-enhanced) [data-pardon-terms-open] {
    display: none;
}
/* Razmak iznad bloka (mt-9) važi samo u strani — prozor preko cijelog
 * ekrana bi inače počinjao 36 px niže (neprekriven pojas pri vrhu). */
.pardon-terms.terms-modal {
    margin-top: 0;
}
.pardon-terms:not(.terms-modal) .pardon-terms-box {
    max-width: none;
    max-height: none;
    box-shadow: none;
    border: 1px solid #e7e5e2;
}
.pardon-terms:not(.terms-modal) .pardon-terms-body {
    max-height: 20rem;
}
.pardon-terms:not(.terms-modal) [data-pardon-terms-close] {
    display: none;
}
/* Fokus ide na prozor (čitač ekrana pročita naslov), a ne na dugme — okvir
 * oko cijelog prozora ništa ne govori (jače od opšteg pravila fokusa gore). */
.pardon-terms [data-pardon-terms-box]:focus,
.pardon-terms [data-pardon-terms-box]:focus-visible {
    outline: none;
}
/* Tekst strane „Pravila kupovine" u prozoru: naslovi kao `h3` makete
 * (16 px, Manrope 500), razmak blokova 20 px, ispod naslova 6 px. */
.pardon-terms-text > * + * {
    margin-top: 1.25rem;
}
.pardon-terms-text :is(h1, h2, h3, h4, h5, h6) {
    font-family: Manrope, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: rgb(20 20 20);
}
.pardon-terms-text :is(h1, h2, h3, h4, h5, h6) + * {
    margin-top: .375rem;
}
.pardon-terms-text a {
    text-decoration: underline;
}
/* Fokus tastaturom na oblasti teksta (skroluje se strelicama): okvir unutra —
 * spolja ga `overflow-hidden` prozora odsiječe. */
.pardon-terms-body:focus-visible {
    outline-offset: -2px;
}
.pardon-terms-text ul,
.pardon-terms-text ol {
    padding-left: 1.25rem;
}
.pardon-terms-text ul {
    list-style: disc;
}
.pardon-terms-text ol {
    list-style: decimal;
}
/* „Plati" dok se narudžbina šalje (maketa nema to stanje). */
[data-pardon-terms-submit].is-busy:disabled {
    opacity: .6;
    cursor: progress;
}

/* ---- Nalog: registracija (Faza 7, stavka 1) ---------------------------
 * „Fizičko / Pravno lice", polja firme i greške polja — pravila plaćanja
 * gore. Oko za lozinku (maketa) prikazuje / sakriva lozinku preko pardon.js;
 * bez JavaScript-a ne radi ništa, pa se ne prikazuje. */
html:not(.js) .pardon-pass-toggle {
    display: none;
}
/* Naslov strana naloga (32 / 38 px makete) nasljeđuje red od 24 px — kad se
 * prelomi (EN „Create an account" i naslovi stanja potvrde na telefonu),
 * redovi se dodiruju. Red 1,15 em, a negativna margina čuva visinu jednog
 * reda od 24 px, kao u maketi (isto kao `.pardon-pdp-title`). */
.pardon-account-title {
    line-height: 1.15;
    margin-block: calc((24px - 1.15em) / 2);
}
/* Dugme forme naloga dok se šalje (maketa nema to stanje). */
[data-pardon-once] .is-busy:disabled {
    opacity: .6;
    cursor: progress;
}

/* ---- Nalog: prijava i odjava (Faza 7, stavka 2) ------------------------
 * „Odjava" je dugme POST forme, ne link — u dropdown-u naloga izgleda kao
 * linkovi panela (pardon.css `.dropdown-panel a`), u mobilnom meniju kao
 * `.m-link`. Ime prijavljenog kupca u headeru (umjesto „Gost") se skraćuje. */
.dropdown-panel .pardon-dd-btn {
    display: block;
    width: 100%;
    padding: .5rem 1rem;
    background: none;
    text-align: start;
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    color: hsla(0, 0%, 7%, .75);
    transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.dropdown-panel .pardon-dd-btn:hover {
    background-color: #F5F5F5;
    color: #111;
}
.pardon-m-btn {
    width: 100%;
    background: none;
    text-align: start;
}
.pardon-pill-name {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Red ispod forme naloga („Nemate račun? / Registrujte se" + dugme; isto na
 * registraciji i „Zaboravili ste lozinku?"): u maketi na uskom telefonu dugme
 * ne stane pored teksta, pa ga kartica (overflow-hidden) odsiječe — prijava
 * 360–390 px (iPhone 390: 8 px, 360: 38 px), registracija 320 px. Sada prvo
 * popušta tekst, a kad ni najuži ne stane, dugme prelazi u red ispod, desno.
 * Kad stane (od ~430 px) — izgled makete. Samo ispod 1024 px: od 1024 su
 * slika i forma dvije kolone, a red bez prelamanja drži kolonu forme dovoljno
 * širokom (kao u maketi) — tamo se dugme ne siječe. */
@media (max-width: 1023.98px) {
    .pardon-account-actions {
        flex-wrap: wrap;
    }
    .pardon-account-actions > p {
        flex: 1 1 0%;
    }
    .pardon-account-actions > button[type="submit"] {
        margin-left: auto;
    }
}

/* Natpisi polja registracije: maketa im daje 12 px (`text-[12px]`), ali
 * `text-body` u pročišćenom CSS-u makete pobjeđuje (16 px), pa se dugi natpis
 * („GRAD I POŠTANSKI BROJ*") lomio u dva reda (Jelena 2026-10-09: „smanji
 * font labela da idu u jedan red"). Visina reda ostaje 24 px. */
.pardon-register-form .pardon-field-label,
.pardon-profile-form .pardon-field-label {
    font-size: 12px;
}

/* ---- Nalog: profil (Faza 7, stavka 3 — `_html/profil.html`) -----------
 * Natpisi polja 12 px kao na registraciji (pravilo gore). Rečenica ispod
 * e-maila dok nova adresa čeka potvrdu i „/ mjesečno" uz cijenu rental
 * paketa u tabeli — boja teksta makete (`text-body` bi postavio i 16 px).
 * Poslije čuvanja adresa ima sidro poruke (`#pardon-profile-notice`) —
 * strana stane tako da je ispod headera vrh kartice sa naslovom (unutrašnji
 * razmak kartice + naslov 24 px + razmak 20 px iznad poruke), ne poruka
 * pod headerom. */
.pardon-profile-hint {
    margin-top: .375rem;
    font-size: 12px;
    line-height: 18px;
    color: #5F5F5F;
}
.pardon-profile-suffix {
    color: #5F5F5F;
}
.pardon-profile-notice {
    scroll-margin-top: calc(var(--header-h, 92px) + 1rem + 1.5rem + 44px);
}
@media (min-width: 640px) {
    .pardon-profile-notice {
        scroll-margin-top: calc(var(--header-h, 92px) + 1rem + 2rem + 44px);
    }
}

/* ==== Upit u 3 koraka (v2, stavka 1) — po slikama prihvaćenog predloga =====
 * Strana `pages/pardon-inquiry.php`. Telefon prvo (kolona do 560 px,
 * djelatnosti u dvije kolone); od 768 px ista strana šire (720 px), na
 * sredini, djelatnosti u tri kolone. Izabrano = breskva (#F2C9B4) i svijetla
 * breskva (#FCF1EB), kao na slikama. Polja su prava radio dugmad (skrivena,
 * fokus tastaturom se vidi na kartici); izgled izbora preko :has(:checked).
 * Koraci se smjenjuju samo kad JS radi (`html.js`); bez JS-a stoje jedan ispod
 * drugog, a pregled izbora i dugmad koraka se ne prikazuju. */
.pardon-inq {
    background: #fff;
    /* Header je fiksiran, a `page-inner` već pomjera stranu ispod njega. */
    padding: 22px 0 56px;
    color: #111;
}
.pardon-inq-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 16px;
}
.pardon-inq-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.pardon-inq-step + .pardon-inq-step {
    margin-top: 56px;
}
html.js .pardon-inq-step:not(.is-active) {
    display: none;
}
html.js .pardon-inq-step + .pardon-inq-step {
    margin-top: 0;
}
.pardon-inq-progress {
    display: flex;
    gap: 6px;
    margin: 0 0 14px;
}
.pardon-inq-progress span {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: #E7E5E2;
}
.pardon-inq-progress span.is-on {
    background: #111;
}
.pardon-inq-count {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #5F5F5F;
}
.pardon-inq-title {
    margin: 0 0 20px;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -.3px;
    color: #111;
}
.pardon-inq-title:focus {
    outline: none;
}

/* Kartice djelatnosti i paketa, tabovi perioda i „čipovi" mirisa —
 * zajedničko: izbor i fokus tastaturom (prsten na kartici, polje je skriveno). */
.pardon-inq-tile,
.pardon-inq-pkg,
.pardon-inq-chip,
.pardon-inq-tab {
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pardon-inq-tile:has(.pardon-inq-input:focus-visible),
.pardon-inq-pkg:has(.pardon-inq-input:focus-visible),
.pardon-inq-chip:has(.pardon-inq-input:focus-visible) span,
.pardon-inq-tab:has(.pardon-inq-input:focus-visible) span {
    outline: 2px solid #111;
    outline-offset: 2px;
}
.pardon-inq-radio {
    flex: 0 0 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #C9C6C2;
    background: #fff;
}
.pardon-inq-tile:has(.pardon-inq-input:checked) .pardon-inq-radio,
.pardon-inq-pkg:has(.pardon-inq-input:checked) .pardon-inq-radio {
    border-color: #111;
    background: radial-gradient(circle, #111 0 4.5px, #fff 5.5px);
}
.pardon-inq-ico {
    flex: 0 0 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1C1C1C;
}
.pardon-inq-ico svg,
.pardon-inq-ico img {
    width: 30px;
    height: 26px;
    object-fit: contain;
}

/* 1. korak — djelatnosti */
.pardon-inq-grid {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.pardon-inq-grid li {
    display: flex;
}
.pardon-inq-tile {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #E7E5E2;
    border-radius: 16px;
    background: #fff;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.25;
    color: #111;
    transition: border-color .2s, background-color .2s;
}
.pardon-inq-tile:has(.pardon-inq-input:checked) {
    border: 2px solid #F2C9B4;
    background: #FCF1EB;
    padding: 9px 11px;
}
.pardon-inq-lbl {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}
/* Uži telefoni (360–389 px): najduža riječ („Hotelijerstvo") mora stati
 * cijela pored ikone i kružića — manji razmaci, ikona i slova. Ispod 340 px
 * kartice idu jedna ispod druge. */
@media (max-width: 389.98px) {
    .pardon-inq-tile {
        gap: 6px;
        padding: 9px 8px;
        font-size: 14px;
    }
    .pardon-inq-tile:has(.pardon-inq-input:checked) {
        padding: 8px 7px;
    }
    .pardon-inq-tile .pardon-inq-ico {
        flex-basis: 26px;
    }
    .pardon-inq-tile .pardon-inq-ico svg,
    .pardon-inq-tile .pardon-inq-ico img {
        width: 26px;
        height: 24px;
    }
    .pardon-inq-tile .pardon-inq-radio {
        flex-basis: 18px;
        height: 18px;
    }
}
@media (max-width: 339.98px) {
    .pardon-inq-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Dugmad koraka */
.pardon-inq-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}
html:not(.js) .pardon-inq-actions,
html:not(.js) .pardon-inq-sum {
    display: none;
}
.pardon-inq-next {
    flex: 1;
    gap: 10px;
}
.pardon-inq-next:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.pardon-inq-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
    line-height: 1;
    color: #5F5F5F;
    white-space: nowrap;
    cursor: pointer;
}
.pardon-inq-back i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #E7E5E2;
    border-radius: 50%;
    font-style: normal;
    color: #111;
}

/* 2. korak — tabovi perioda i paketi */
.pardon-inq-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin: 0 0 14px;
    border: 1px solid #E7E5E2;
    border-radius: 9999px;
}
.pardon-inq-tab {
    flex: 1;
    display: flex;
}
.pardon-inq-tab span {
    flex: 1;
    padding: 10px 4px;
    border-radius: 9999px;
    text-align: center;
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5F5F5F;
    transition: background-color .2s, color .2s;
}
.pardon-inq-tab:has(.pardon-inq-input:checked) span {
    background: #F2C9B4;
    color: #111;
}
html.js .pardon-inq-pkgs:not(.is-active) {
    display: none;
}
.pardon-inq-pkgs-name {
    margin: 14px 0 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #111;
}
html.js .pardon-inq-pkgs-name {
    display: none;
}
.pardon-inq-pkg {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 10px;
    padding: 15px 16px;
    border: 1px solid #E7E5E2;
    border-radius: 16px;
    background: #fff;
    transition: border-color .2s, background-color .2s;
}
.pardon-inq-pkg:has(.pardon-inq-input:checked) {
    border: 2px solid #F2C9B4;
    background: #FCF1EB;
    padding: 14px 15px;
}
.pardon-inq-pkg-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pardon-inq-pkg-name {
    font-family: Manrope, system-ui, sans-serif;
    font-size: 20px;
    line-height: 1.2;
    color: #111;
}
.pardon-inq-pkg-area {
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.4;
    color: #5F5F5F;
}
.pardon-inq-pkg-price {
    margin-left: auto;
    text-align: right;
}
.pardon-inq-pkg-price b {
    display: block;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 400;
    color: #111;
    white-space: nowrap;
}
.pardon-inq-pkg-price small {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    color: #5F5F5F;
    white-space: nowrap;
}
.pardon-inq-info {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 6px 0 22px;
    font-size: 15px;
    line-height: 1.45;
    color: #5F5F5F;
}
.pardon-inq-info svg {
    flex: 0 0 18px;
    margin-top: 2px;
    color: #111;
}

/* 3. korak — pregled izbora, grad, pravac mirisa */
.pardon-inq-sum {
    margin: 0 0 22px;
    padding: 6px 16px;
    border-radius: 16px;
    background: #F5F5F5;
}
.pardon-inq-sum-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}
.pardon-inq-sum-row + .pardon-inq-sum-row {
    border-top: 1px solid #E7E5E2;
}
.pardon-inq-sum-t {
    flex: 1;
    min-width: 0;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #111;
}
.pardon-inq-sum-t small {
    display: block;
    margin-top: 2px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #5F5F5F;
}
.pardon-inq-change {
    padding: 4px 0;
    border: 0;
    background: none;
    font-size: 13px;
    line-height: 1;
    color: #111;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.pardon-inq-label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #111;
}
.pardon-inq-label em {
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #5F5F5F;
}
.pardon-inq-select {
    position: relative;
    margin: 0 0 22px;
}
.pardon-inq-select select {
    width: 100%;
    height: 50px;
    padding: 0 44px 0 16px;
    border: 1px solid #E7E5E2;
    border-radius: 12px;
    background: #fff;
    font-size: 16px;
    color: #111;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.pardon-inq-select svg {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #111;
}
.pardon-inq-scents {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.pardon-inq-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
}
.pardon-inq-chip span {
    display: block;
    padding: 10px 14px;
    border: 1px solid #E7E5E2;
    border-radius: 9999px;
    background: #fff;
    font-size: 15px;
    line-height: 1;
    color: #111;
    transition: background-color .2s, border-color .2s;
}
.pardon-inq-chip:has(.pardon-inq-input:checked) span {
    background: #F2C9B4;
    border-color: #F2C9B4;
}

/* Slanje (stavka 2) — WhatsApp dugme (crno, kao ostala dugmad sajta, sa
 * ikonicom — njena odluka 2026-10-19), napomena, „Pošaljite upit e-mailom"
 * (forma se otvara na dodir; bez JS-a stoji otvorena) i „Hvala". */
.pardon-inq-send {
    width: 100%;
    gap: 10px;
    /* „POŠALJI UPIT NA WHATSAPP" + ikonica traže ~260 px, a dugme u dnu
       mobilnog menija na 375 px ima ~275 px: uži razmaci, ikonica se ne
       stiska (bez ovoga je nestajala), a na najužim ekranima tekst ide u dva
       reda umjesto da izađe iz dugmeta. */
    padding-left: 12px;
    padding-right: 12px;
    letter-spacing: .1em;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}
.pardon-inq-send svg {
    flex: 0 0 auto;
}
@media (max-width: 379.98px) {
    .pardon-inq-send {
        font-size: 12px;
        letter-spacing: .08em;
    }
}
.pardon-inq-note {
    margin: 12px 0 6px;
    text-align: center;
    font-size: 14px;
    line-height: 1.45;
    color: #5F5F5F;
}
.pardon-inq-alt {
    display: block;
    text-align: center;
    font-size: 15px;
    line-height: 1.4;
    color: #111;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pardon-inq-mail {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #E7E5E2;
}
.pardon-inq-mail[hidden] {
    display: none;
}
.pardon-inq-mail-row {
    display: grid;
    gap: 16px;
    margin: 0 0 16px;
}
.pardon-inq-text {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid #E7E5E2;
    border-radius: 12px;
    background: #fff;
    font-size: 16px;
    color: #111;
}
.pardon-inq-text:focus,
.pardon-inq-select select:focus {
    border-color: #111;
    outline: none;
}
.pardon-inq-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.45;
    color: #5F5F5F;
    cursor: pointer;
}
.pardon-inq-check input {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #111;
}
.pardon-inq-check a {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pardon-inq-error {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.45;
    color: #B42318;
}
.pardon-inq-done {
    display: none;
    text-align: center;
}
.pardon-inq-done:focus {
    outline: none;
}
.pardon-inq.is-done .pardon-inq-step {
    display: none;
}
.pardon-inq.is-done .pardon-inq-done {
    display: block;
}
.pardon-inq-done-ico {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 12px 0 18px;
    border-radius: 50%;
    background: #F2C9B4;
    color: #111;
}
.pardon-inq-done-ico svg {
    width: 26px;
    height: 26px;
}
.pardon-inq-done-text {
    margin: 0 auto 24px;
    max-width: 440px;
    font-size: 16px;
    line-height: 1.5;
    color: #5F5F5F;
}
.pardon-inq-done .pardon-inq-send {
    margin-bottom: 18px;
}
.pardon-inq-done .pardon-inq-send[hidden] {
    display: none;
}

/* Traka „Pošalji upit" na dnu ekrana (stavka 5, slika 3 predloga) — samo na
 * telefonu. Ispod overlay-a i menija (z 55+) i trake za kolačiće; razmak ispod
 * futera iste visine, da traka ne pokrije njegov kraj. */
.pardon-inq-bar,
.pardon-inq-bar-space {
    display: none;
}
@media (max-width: 767.98px) {
    .pardon-inq-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .10);
    }
    .pardon-inq-bar-space {
        display: block;
        height: calc(72px + env(safe-area-inset-bottom, 0px));
    }
    .pardon-inq-bar-main {
        flex: 1;
        height: 48px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .pardon-inq-bar-call {
        flex: 0 0 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border: 1px solid #D9D9D9;
        border-radius: 9999px;
        background: #fff;
        color: #111;
    }
}

@media (min-width: 640px) {
    .pardon-inq-mail-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .pardon-inq {
        padding-top: 56px;
        padding-bottom: 96px;
    }
    .pardon-inq-wrap {
        max-width: 720px;
    }
    .pardon-inq-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .pardon-inq-title {
        font-size: 34px;
    }
}