/* Šapa & Šargarepa — izgled prodavnice Boje iz brend paketa (brand/README.md). Narandžasta i zelena iz paketa ne prolaze kontrast 4,5:1 za sitan tekst na kremu, pa za tekst postoje tamnije nijanse (-tekst). */ @font-face { font-family: "Caprasimo SR"; src: url(../fonts/caprasimo-sr.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Figtree"; src: url(../fonts/figtree-latin-ext.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Figtree"; src: url(../fonts/figtree-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --tamna: #201E1D; --tekst: #2B2826; --tekst-blago: #5E5852; --sargarepa: #C67139; --sargarepa-tamna: #A95E2D; --sargarepa-tekst: #9A4F22; --zalfija: #7A8A5E; --zalfija-tekst: #56643F; --zalfija-svetla: #E7EBDD; --krem: #F5EAD8; --krem-svetla: #FBF6EE; --krem-tamna: #EADFCB; --bela: #FFFFFF; --crvena: #B23A2B; --ivica: #E9DECB; --naslovi: "Caprasimo SR", "Georgia", serif; --telo: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --r-malo: 10px; --r: 16px; --r-veliko: 28px; --senka: 0 1px 2px rgba(32, 30, 29, .06), 0 4px 14px rgba(32, 30, 29, .06); --senka-jaka: 0 2px 4px rgba(32, 30, 29, .06), 0 14px 34px rgba(32, 30, 29, .12); --sirina: 1320px; --gutter: 16px; } @media (min-width: 760px) { :root { --gutter: 28px; } } /* ------------------------------------------------------------------ osnova */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body.ss { margin: 0; background: var(--krem-svetla); color: var(--tekst); font: 400 16px/1.55 var(--telo); -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.ss.je-zakljucan { overflow: hidden; } .ss img { max-width: 100%; height: auto; display: block; } .ss a { color: inherit; } .ss h1, .ss h2, .ss h3 { font-family: var(--naslovi); font-weight: 400; line-height: 1.12; color: var(--tamna); margin: 0 0 .5em; letter-spacing: 0; } .ss p { margin: 0 0 1em; } .ss button, .ss input, .ss select, .ss textarea { font: inherit; color: inherit; } .ss :focus-visible { outline: 3px solid var(--sargarepa); outline-offset: 2px; border-radius: 6px; } .ss [hidden] { display: none !important; } .ss-sr, .ss .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ss-preskoci { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tamna); color: var(--krem); padding: 10px 16px; border-radius: var(--r-malo); text-decoration: none; font-weight: 700; } .ss-preskoci:focus { top: 12px; } .ss-omot { width: 100%; max-width: var(--sirina); margin: 0 auto; padding: 0 var(--gutter); } .ss-omot--usko { max-width: 820px; } .ss-ikona { width: 20px; height: 20px; flex: none; } /* Dugmad */ .ss .ss-dugme, .ss .button, .ss button.button, .ss input.button, .ss .checkout-button, .ss #place_order { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--sargarepa); color: var(--bela); font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; } .ss .ss-dugme:hover, .ss .button:hover, .ss .checkout-button:hover, .ss #place_order:hover { background: var(--sargarepa-tamna); color: var(--bela); } .ss .ss-dugme:active, .ss .button:active { transform: translateY(1px); } .ss .ss-dugme--obris { background: var(--bela); color: var(--tamna); box-shadow: inset 0 0 0 1.5px var(--krem-tamna); } .ss .ss-dugme--obris:hover { background: var(--krem); color: var(--tamna); } .ss .ss-dugme--puno { width: 100%; } .ss .button.alt, .ss .button.checkout { background: var(--tamna); } .ss .button.alt:hover { background: #000; } .ss .button:disabled, .ss .button.disabled { opacity: .5; cursor: not-allowed; } .ss-znacka { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--sargarepa); color: var(--bela); font: 700 12px/1 var(--telo); } /* ------------------------------------------------------------------ demo traka */ .ss-demo-traka { background: var(--zalfija-svetla); color: var(--zalfija-tekst); font-size: 14px; font-weight: 600; text-align: center; padding: 8px 0; border-bottom: 1px solid #d5dcc4; } /* ------------------------------------------------------------------ zaglavlje Zaglavlje, mega meni i pločice kategorija su u mega-meni.css (paket „mega meni 2a Ravno”). Ovde je samo logo, koji se koristi i u podnožju. */ .ss-logo { display: block; flex: none; } .ss-logo__slika { width: 132px; height: auto; } @media (min-width: 760px) { .ss-logo__slika { width: 168px; } } /* ------------------------------------------------------------------ uvod kataloga */ .ss-uvod { padding: 28px 0 8px; } .ss-uvod--naslovna { background: var(--krem); border-radius: 0 0 var(--r-veliko) var(--r-veliko); padding: 34px 0 28px; margin-bottom: 8px; position: relative; overflow: hidden; } .ss-uvod__omot { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .ss-uvod__tekst { max-width: 720px; } .ss-uvod__nadnaslov { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--bela); font-size: 14px; font-weight: 600; color: var(--zalfija-tekst); } .ss-zivo { width: 8px; height: 8px; border-radius: 50%; background: #4f9a3a; box-shadow: 0 0 0 0 rgba(79, 154, 58, .5); animation: ss-puls 2.2s infinite; } @keyframes ss-puls { 0% { box-shadow: 0 0 0 0 rgba(79, 154, 58, .5); } 70% { box-shadow: 0 0 0 8px rgba(79, 154, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 154, 58, 0); } } .ss-uvod__naslov { font-size: clamp(34px, 6vw, 60px); margin: 0 0 10px; } .ss-uvod__opis { font-size: 17px; color: var(--tekst-blago); max-width: 600px; margin: 0; } .ss-uvod--naslovna .ss-uvod__opis { font-size: 18px; color: var(--tekst); } .ss-uvod__znak { width: 200px; height: auto; flex: none; margin-right: 20px; transform: rotate(-8deg); } @media (max-width: 759px) { .ss-uvod--naslovna { padding: 24px 0 20px; } .ss-uvod__znak { position: absolute; right: -28px; top: 10px; width: 120px; opacity: .22; margin: 0; } .ss-uvod__opis, .ss-uvod--naslovna .ss-uvod__opis { font-size: 16px; } } /* Mrvice */ .ss-mrvice { font-size: 14px; color: var(--tekst-blago); margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ss-mrvice a { color: var(--tekst-blago); text-decoration: none; } .ss-mrvice a:hover { color: var(--tamna); text-decoration: underline; } .ss-mrvice__sep { color: #b7aea3; } /* ------------------------------------------------------------------ katalog */ .ss-katalog { display: grid; grid-template-columns: 1fr; gap: 28px; padding-top: 20px; padding-bottom: 64px; align-items: start; } @media (min-width: 1080px) { .ss-katalog { grid-template-columns: 272px minmax(0, 1fr); gap: 36px; } } @media (min-width: 1080px) { .ss-katalog--bez-filtera { grid-template-columns: minmax(0, 1fr); } } /* prazan brend bez bočne trake */ .ss-alati { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .ss-alati__broj { margin: 0; color: var(--tekst-blago); font-size: 15px; } .ss-alati__broj strong { color: var(--tamna); } .ss .ss-alati__filteri { min-height: 44px; padding: 8px 16px; } @media (min-width: 1080px) { .ss .ss-alati__filteri { display: none; } } .ss .woocommerce-ordering { margin: 0 0 0 auto; } .ss .woocommerce-ordering select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 8px 40px 8px 16px; border-radius: 999px; border: 1.5px solid var(--krem-tamna); background: var(--bela) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23201E1D' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; font-weight: 600; font-size: 15px; cursor: pointer; } @media (max-width: 759px) { .ss-alati__broj { order: 3; flex-basis: 100%; font-size: 14px; } .ss .woocommerce-ordering select { font-size: 14px; padding-left: 12px; } } /* Čipovi aktivnih filtera */ .ss-cipovi { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .ss-cip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px 6px 14px; border-radius: 999px; background: var(--tamna); color: var(--krem) !important; text-decoration: none; font-size: 14px; font-weight: 600; } .ss-cip:hover { background: #000; } .ss-cip--obrisi { background: none; color: var(--sargarepa-tekst) !important; text-decoration: underline; padding-left: 6px; } .ss-cip--obrisi:hover { background: none; color: var(--tamna) !important; } /* Mreža proizvoda */ .ss ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 640px) { .ss ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } } @media (min-width: 1080px) { .ss ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } @media (min-width: 1360px) { .ss .ss-rezultati ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ss ul.products::before, .ss ul.products::after { display: none; } /* Kartica */ .ss .ss-kartica { display: flex; flex-direction: column; background: var(--bela); border-radius: var(--r); box-shadow: var(--senka); overflow: hidden; transition: box-shadow .2s, transform .2s; position: relative; margin: 0; width: auto; float: none; } .ss .ss-kartica:hover { box-shadow: var(--senka-jaka); transform: translateY(-2px); } .ss-kartica__slika { position: relative; display: block; aspect-ratio: 1 / 1; background: #F7F1E7; } .ss-kartica__slika img { width: 100%; height: 100%; object-fit: contain; padding: 14px; mix-blend-mode: multiply; } .ss-kartica__oznake { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .ss-oznaka { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.3; } .ss-oznaka--akcija { background: var(--sargarepa); color: var(--bela); } .ss-oznaka--nema { background: var(--tamna); color: var(--krem); } .ss .onsale { position: static; min-height: 0; min-width: 0; margin: 0; } .ss-kartica__telo { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; gap: 8px; } .ss-kartica__brend { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--zalfija-tekst); } .ss .ss-kartica__naslov { font-family: var(--telo); font-weight: 600; font-size: 15px; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ss-kartica__naslov a { text-decoration: none; color: var(--tamna); } .ss-kartica__naslov a::after { content: ""; position: absolute; inset: 0; z-index: 0; } /* cela kartica je klikabilna */ .ss-kartica__cipovi { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; } .ss-kartica__cipovi li { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--krem); color: var(--tekst-blago); } .ss-pakovanja { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; } .ss-pak { min-height: 34px; padding: 4px 11px; border-radius: 10px; border: 1.5px solid var(--krem-tamna); background: var(--bela); font-size: 13px; font-weight: 700; color: var(--tamna); cursor: pointer; transition: border-color .12s, background .12s; } .ss-pak:hover { border-color: var(--tamna); } .ss-pak[aria-checked="true"] { border-color: var(--tamna); background: var(--tamna); color: var(--krem); } .ss-pak.je-nema { color: #9b948c; text-decoration: line-through; text-decoration-thickness: 1.5px; } .ss-pak.je-nema[aria-checked="true"] { background: #6f6963; border-color: #6f6963; color: #f3ede5; } .ss-kartica__dno { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 4px; } .ss-kartica__cena { font-size: 19px; font-weight: 700; color: var(--tamna); line-height: 1.2; } .ss-kartica__cena del { display: block; font-size: 13px; font-weight: 500; color: var(--tekst-blago); } .ss-kartica__cena ins { text-decoration: none; color: var(--sargarepa-tekst); } .ss-kartica__pokg { margin: 2px 0 0; font-size: 12px; color: var(--tekst-blago); min-height: 1em; } .ss-u-korpu { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 46px; padding: 0 14px; border-radius: 999px; background: var(--sargarepa); color: var(--bela) !important; text-decoration: none; font-weight: 700; font-size: 15px; flex: none; transition: background .15s, transform .15s; } .ss-u-korpu:hover { background: var(--sargarepa-tamna); } .ss-u-korpu.je-ucitava { opacity: .7; pointer-events: none; } .ss-u-korpu.je-dodato { background: var(--zalfija-tekst); } .ss-u-korpu.je-onemoguceno { background: #cfc7bc; pointer-events: none; } .ss-u-korpu--pogledaj { background: var(--krem); color: var(--tamna) !important; } .ss-u-korpu--pogledaj:hover { background: var(--krem-tamna); } @media (max-width: 639px) { .ss-kartica__telo { padding: 10px 10px 12px; gap: 6px; } .ss .ss-kartica__naslov { font-size: 14px; } .ss-kartica__cipovi { display: none; } .ss-kartica__dno { flex-direction: column; align-items: stretch; } .ss-kartica__cena { font-size: 17px; } .ss-u-korpu { width: 100%; } .ss-pak { min-height: 32px; padding: 3px 8px; font-size: 12px; } .ss-kartica__slika img { padding: 8px; } } /* Straničenje */ .ss .woocommerce-pagination { margin-top: 34px; } .ss .woocommerce-pagination ul.page-numbers { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; border: 0; } .ss .woocommerce-pagination ul.page-numbers li { border: 0; float: none; } .ss .woocommerce-pagination .page-numbers a, .ss .woocommerce-pagination .page-numbers span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; background: var(--bela); text-decoration: none; font-weight: 700; box-shadow: var(--senka); color: var(--tamna); } .ss .woocommerce-pagination .page-numbers span.current { background: var(--tamna); color: var(--krem); } .ss .woocommerce-pagination .page-numbers a:hover { background: var(--krem); } /* Prazno */ .ss-prazno { text-align: center; padding: 56px 20px; background: var(--bela); border-radius: var(--r); box-shadow: var(--senka); } .ss-prazno img { margin: 0 auto 14px; width: 80px; opacity: .9; } .ss-prazno h2 { font-size: 28px; } .ss-prazno p { color: var(--tekst-blago); } /* Učitavanje posle promene filtera */ .ss-rezultati { transition: opacity .15s; min-width: 0; } .ss-glavno.je-ucitava .ss-rezultati { opacity: .45; pointer-events: none; } /* ------------------------------------------------------------------ filteri */ .ss-filteri { background: var(--bela); border-radius: var(--r); box-shadow: var(--senka); } @media (min-width: 1080px) { .ss-filteri { position: sticky; top: 164px; max-height: calc(100vh - 180px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .admin-bar .ss-filteri { top: 196px; max-height: calc(100vh - 212px); } /* zaglavlje je 32 px niže zbog admin trake */ .ss-filteri__zatvori, .ss .ss-filteri__primeni { display: none; } } .ss-filteri__glava { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; } .ss .ss-filteri__naslov { font-size: 24px; margin: 0; display: flex; align-items: center; gap: 8px; } .ss-filteri__zatvori { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: var(--krem); border-radius: 50%; cursor: pointer; color: var(--tamna); } .ss-filteri__forma { padding: 0 18px 18px; } .ss-grupa { border-top: 1px solid var(--ivica); padding: 12px 0; } .ss-grupa--brzi { display: grid; gap: 10px; padding: 14px 0; } .ss .ss-grupa__naslov { font-family: var(--telo); font-size: 15px; font-weight: 700; margin: 0; } .ss-grupa__naslov button { display: flex; align-items: center; width: 100%; gap: 8px; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font-weight: 700; color: var(--tamna); } .ss-strelica { margin-left: auto; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; } .ss-grupa__naslov button[aria-expanded="false"] .ss-strelica { transform: rotate(-45deg); } .ss-grupa__naslov button[aria-expanded="false"] ~ * { display: none; } .ss-grupa.je-sklopljena .ss-grupa__telo, .ss-grupa.je-sklopljena .ss-grupa__lista { display: none; } .ss-tacka { width: 8px; height: 8px; border-radius: 50%; background: var(--sargarepa); } .ss-grupa__telo { padding-top: 4px; } .ss-grupa__lista { list-style: none; margin: 0; padding: 0; } .ss-grupa__lista.je-skracena:not(.je-prosirena) .je-visak { display: none; } .ss-grupa__pretraga { width: 100%; margin: 2px 0 8px; padding: 9px 12px; border: 1.5px solid var(--krem-tamna); border-radius: var(--r-malo); background: var(--krem-svetla); font-size: 15px; } .ss-grupa__pretraga:focus { outline: none; border-color: var(--sargarepa); background: var(--bela); } .ss-cek { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 3px 4px; cursor: pointer; border-radius: 8px; } .ss-cek:hover { background: var(--krem-svetla); } .ss-cek input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; left: 4px; cursor: pointer; } .ss-cek__kutija { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #b9afa2; background: var(--bela); display: grid; place-items: center; transition: background .12s, border-color .12s; } .ss-cek input:checked + .ss-cek__kutija { background: var(--tamna); border-color: var(--tamna); } .ss-cek input:checked + .ss-cek__kutija::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid var(--krem); border-bottom: 2.5px solid var(--krem); transform: rotate(-45deg) translate(1px, -1px); } .ss-cek input:focus-visible + .ss-cek__kutija { outline: 3px solid var(--sargarepa); outline-offset: 2px; } .ss-cek__naziv { flex: 1; font-size: 15px; line-height: 1.3; } .ss-broj { font-size: 13px; color: var(--tekst-blago); font-weight: 500; font-variant-numeric: tabular-nums; } .ss-cek .ss-broj { margin-left: auto; } .ss-jos { margin: 6px 0 0 4px; padding: 6px 0; border: 0; background: none; color: var(--sargarepa-tekst); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } /* Prekidači */ .ss-prekidac { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; font-size: 15px; min-height: 36px; } .ss-prekidac input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; } .ss-prekidac__kliznik { flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: #d6cdc1; transition: background .15s; } .ss-prekidac__kliznik::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bela); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; } .ss-prekidac input:checked + .ss-prekidac__kliznik { background: var(--zalfija-tekst); } .ss-prekidac input:checked + .ss-prekidac__kliznik::after { transform: translateX(18px); } .ss-prekidac input:focus-visible + .ss-prekidac__kliznik { outline: 3px solid var(--sargarepa); outline-offset: 2px; } /* Raspon cene */ .ss-raspon { position: relative; height: 34px; margin: 4px 4px 6px; } .ss-raspon__staza { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 4px; background: var(--krem-tamna); } .ss-raspon__opseg { position: absolute; top: 0; bottom: 0; background: var(--sargarepa); border-radius: 4px; } .ss-raspon input[type="range"] { position: absolute; left: -2px; right: -2px; width: calc(100% + 4px); top: 5px; height: 24px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; } .ss-raspon input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--bela); border: 3px solid var(--sargarepa); box-shadow: var(--senka); cursor: grab; } .ss-raspon input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--bela); border: 3px solid var(--sargarepa); cursor: grab; } .ss-raspon input[type="range"]::-webkit-slider-runnable-track { background: none; } .ss-raspon input[type="range"]::-moz-range-track { background: none; } .ss-cena-polja { display: flex; align-items: center; gap: 8px; } .ss-cena-polja label { flex: 1; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1.5px solid var(--krem-tamna); border-radius: var(--r-malo); background: var(--krem-svetla); } .ss-cena-polja label:focus-within { border-color: var(--sargarepa); background: var(--bela); } .ss-cena-polja label span { font-size: 13px; color: var(--tekst-blago); } .ss-cena-polja input { width: 100%; min-width: 0; border: 0; background: none; padding: 9px 0; font-size: 15px; font-weight: 600; outline: none; -moz-appearance: textfield; } .ss-cena-polja input::-webkit-outer-spin-button, .ss-cena-polja input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ss-cena-crta { width: 8px; height: 2px; background: #b9afa2; flex: none; } .ss-cena-valuta { font-size: 13px; color: var(--tekst-blago); } .ss-filteri__dno { position: sticky; bottom: 0; background: var(--bela); padding-top: 14px; display: grid; gap: 10px; text-align: center; } .ss-filteri__obrisi { font-size: 14px; font-weight: 700; color: var(--sargarepa-tekst); } @media (min-width: 1080px) { .ss-filteri__dno { position: static; padding-top: 6px; } } /* Fioka na mobilnom i tabletu */ @media (max-width: 1079px) { .ss-filteri { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(380px, 90vw); border-radius: 0 var(--r) var(--r) 0; transform: translateX(-105%); transition: transform .25s ease; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; } .ss-filteri.je-otvoren { transform: none; } .ss-filteri__glava { position: sticky; top: 0; background: var(--bela); z-index: 2; border-bottom: 1px solid var(--ivica); padding-bottom: 12px; } .ss-filteri__forma { flex: 1; display: flex; flex-direction: column; } .ss-filteri__forma > .ss-grupa:first-of-type { border-top: 0; } .ss-filteri__dno { margin-top: auto; padding-bottom: 16px; box-shadow: 0 -10px 16px -12px rgba(0,0,0,.15); } .ss-zavesa { position: fixed; inset: 0; z-index: 55; background: rgba(32, 30, 29, .45); } } /* ------------------------------------------------------------------ strana proizvoda */ .ss-proizvod-strana { padding: 22px 0 64px; } .ss .ss-proizvod { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; } @media (min-width: 900px) { .ss .ss-proizvod { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; } } .ss-proizvod__galerija { position: relative; background: var(--bela); border-radius: var(--r-veliko); padding: 20px; box-shadow: var(--senka); } .ss-proizvod__galerija > .ss-oznaka { position: absolute; left: 20px; top: 20px; z-index: 3; } .ss .woocommerce-product-gallery { margin: 0; opacity: 1 !important; position: relative; } .ss .woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; } .ss .woocommerce-product-gallery__trigger { position: absolute; right: 8px; top: 8px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--krem); display: grid; place-items: center; text-indent: -9999px; overflow: hidden; } .ss .woocommerce-product-gallery__trigger::before { content: ""; width: 14px; height: 14px; border: 2.5px solid var(--tamna); border-radius: 50%; position: absolute; left: 11px; top: 10px; } .ss .woocommerce-product-gallery__trigger::after { content: ""; width: 8px; height: 2.5px; background: var(--tamna); position: absolute; left: 23px; top: 26px; transform: rotate(45deg); } .ss .flex-control-thumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; } .ss .flex-control-thumbs li { width: 72px; } .ss .flex-control-thumbs img { border-radius: 10px; border: 2px solid var(--ivica); cursor: pointer; opacity: .75; aspect-ratio: 1 / 1; object-fit: contain; background: var(--bela); } .ss .flex-control-thumbs img.flex-active, .ss .flex-control-thumbs img:hover { opacity: 1; border-color: var(--tamna); } .ss-proizvod__brend { display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--zalfija-tekst); text-decoration: none; margin-bottom: 8px; } .ss-proizvod__brend:hover { text-decoration: underline; } .ss .ss-proizvod__naslov { font-size: clamp(28px, 3.6vw, 42px); margin: 0 0 14px; } .ss-proizvod__cipovi { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; } .ss-proizvod__cipovi a { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--krem); color: var(--tamna); text-decoration: none; font-size: 14px; font-weight: 600; } .ss-proizvod__cipovi a:hover { background: var(--krem-tamna); } .ss-proizvod__cena { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 18px; } .ss .ss-proizvod__cena .price { font-size: 30px; font-weight: 700; color: var(--tamna); margin: 0; } .ss .ss-proizvod__cena .price del { font-size: 18px; font-weight: 500; color: var(--tekst-blago); margin-right: 6px; } .ss .ss-proizvod__cena .price ins { text-decoration: none; color: var(--sargarepa-tekst); } .ss-pokg { font-size: 14px; color: var(--tekst-blago); } .ss-proizvod__kupi { background: var(--bela); border-radius: var(--r); padding: 18px; box-shadow: var(--senka); } .ss .variations { width: 100%; border: 0; margin: 0 0 6px; border-collapse: collapse; } .ss .variations th, .ss .variations td { display: block; padding: 0; text-align: left; border: 0; } .ss .variations th label { font-weight: 700; font-size: 15px; display: block; margin-bottom: 8px; } .ss .variations td.value { margin-bottom: 10px; } .ss .variations select.ss-skriven { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .ss .reset_variations { display: none !important; } .ss .ss-proizvod__kupi .ss-pakovanja { gap: 8px; } .ss .ss-proizvod__kupi .ss-pak { min-height: 44px; padding: 8px 16px; font-size: 15px; border-radius: 12px; } .ss .single_variation_wrap .woocommerce-variation { margin: 6px 0 10px; } .ss .woocommerce-variation-price .price { font-size: 26px; font-weight: 700; color: var(--tamna); } .ss .woocommerce-variation-price .price ins { text-decoration: none; color: var(--sargarepa-tekst); } .ss .woocommerce-variation-price .price del { font-size: 16px; color: var(--tekst-blago); font-weight: 500; } .ss form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; } .ss form.variations_form { display: block; } .ss .woocommerce-variation-add-to-cart { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .ss .quantity { display: inline-flex; } .ss .quantity .qty { width: 76px; min-height: 48px; text-align: center; border: 1.5px solid var(--krem-tamna); border-radius: 999px; font-weight: 700; font-size: 16px; background: var(--krem-svetla); } .ss .single_add_to_cart_button { flex: 1; min-width: 200px; } .ss .ss-stanje { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; margin: 0 0 10px; flex-basis: 100%; } .ss .ss-stanje .ss-ikona { width: 18px; height: 18px; } .ss-stanje--ima { color: var(--zalfija-tekst); } .ss-stanje--nema { color: var(--crvena); } .ss-proizvod__napomene { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; color: var(--tekst-blago); font-size: 15px; } .ss-proizvod__napomene li { display: flex; gap: 10px; align-items: center; } .ss-proizvod__napomene .ss-ikona { color: var(--zalfija-tekst); } .ss-proizvod__detalji { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 44px 0 0; } @media (min-width: 900px) { .ss-proizvod__detalji { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; } } .ss-proizvod__opis, .ss-proizvod__karakteristike { background: var(--bela); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--senka); } .ss-proizvod__detalji h2 { font-size: 26px; } .ss .woocommerce-product-attributes { width: 100%; border-collapse: collapse; font-size: 15px; } .ss .woocommerce-product-attributes th, .ss .woocommerce-product-attributes td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--ivica); vertical-align: top; } .ss .woocommerce-product-attributes th { width: 42%; font-weight: 600; color: var(--tekst-blago); padding-right: 12px; } .ss .woocommerce-product-attributes td p { margin: 0; } .ss .woocommerce-product-attributes tr:last-child th, .ss .woocommerce-product-attributes tr:last-child td { border-bottom: 0; } .ss .related { margin-top: 52px; } .ss .related > h2 { font-size: 32px; margin-bottom: 18px; } /* Tekst (opisi, strane) */ .ss-tekst { font-size: 16px; line-height: 1.7; } .ss-tekst h2, .ss-tekst h3 { font-family: var(--telo); font-weight: 700; font-size: 18px; margin: 1.3em 0 .5em; } .ss-tekst ul, .ss-tekst ol { padding-left: 1.3em; } .ss-tekst table { width: 100%; border-collapse: collapse; font-size: 15px; } .ss-tekst td, .ss-tekst th { border-bottom: 1px solid var(--ivica); padding: 6px 8px 6px 0; text-align: left; } .ss-tekst a { color: var(--sargarepa-tekst); } /* ------------------------------------------------------------------ obične strane, korpa, kasa */ .ss-strana { padding: 34px 0 64px; min-height: 50vh; } .ss .ss-strana__naslov { font-size: clamp(30px, 4vw, 44px); margin-bottom: 22px; } .ss-404 { text-align: center; } .ss-404__znak { margin: 0 auto 12px; } .ss .woocommerce-notices-wrapper:empty { display: none; } .ss .woocommerce-message, .ss .woocommerce-info, .ss .woocommerce-error { list-style: none; margin: 0 0 20px; padding: 14px 18px; border-radius: var(--r-malo); border: 0; border-left: 4px solid var(--zalfija); background: var(--bela); box-shadow: var(--senka); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .ss .woocommerce-error { border-left-color: var(--crvena); } .ss .woocommerce-message::before, .ss .woocommerce-info::before, .ss .woocommerce-error::before { display: none; } .ss .woocommerce-message .button, .ss .woocommerce-info .button { order: 2; min-height: 40px; padding: 8px 16px; font-size: 14px; } .ss .shop_table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bela); border-radius: var(--r); box-shadow: var(--senka); overflow: hidden; border: 0; margin: 0 0 24px; } .ss .shop_table th, .ss .shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--ivica); text-align: left; vertical-align: middle; } .ss .shop_table thead th { font-size: 14px; color: var(--tekst-blago); font-weight: 700; background: var(--krem-svetla); } .ss .shop_table tr:last-child td { border-bottom: 0; } .ss .shop_table img { width: 72px; border-radius: 10px; background: #F7F1E7; } .ss .shop_table .product-name a { font-weight: 600; text-decoration: none; color: var(--tamna); } .ss .shop_table .product-remove a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--krem); color: var(--tamna) !important; text-decoration: none; font-size: 20px; line-height: 1; } .ss .shop_table .product-remove a:hover { background: var(--crvena); color: var(--bela) !important; } .ss .shop_table td.actions { background: var(--krem-svetla); } .ss .shop_table .coupon { display: none; } .ss .cart-collaterals .cart_totals { max-width: 460px; margin-left: auto; } .ss .cart_totals h2 { font-size: 26px; } .ss .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 54px; font-size: 17px; } @media (max-width: 759px) { .ss .shop_table_responsive thead { display: none; } .ss .shop_table_responsive tr { display: block; border-bottom: 1px solid var(--ivica); } .ss .shop_table_responsive td { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; border: 0; padding: 8px 16px; } .ss .shop_table_responsive td::before { content: attr(data-title); font-weight: 600; color: var(--tekst-blago); text-align: left; } .ss .shop_table_responsive td.product-remove::before, .ss .shop_table_responsive td.product-thumbnail::before, .ss .shop_table_responsive td.actions::before { display: none; } .ss .shop_table_responsive td.product-thumbnail { justify-content: flex-start; } } .ss .woocommerce form .form-row { margin: 0 0 14px; padding: 0; } .ss .woocommerce form .form-row label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; } .ss .woocommerce form .form-row .required { color: var(--crvena); text-decoration: none; } .ss .woocommerce input.input-text, .ss .woocommerce textarea, .ss .woocommerce select, .ss .select2-container .select2-selection--single { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--krem-tamna); border-radius: var(--r-malo); background: var(--bela); font-size: 16px; } .ss .select2-container .select2-selection--single { height: 48px; display: flex; align-items: center; } .ss .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; } .ss .woocommerce input.input-text:focus, .ss .woocommerce textarea:focus { outline: none; border-color: var(--sargarepa); } .ss .woocommerce textarea { min-height: 96px; } .ss .woocommerce-checkout .col2-set { display: grid; gap: 24px; } @media (min-width: 900px) { .ss form.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 40px; align-items: start; } .ss form.woocommerce-checkout > .col2-set { grid-column: 1; grid-row: 1 / span 3; } .ss form.woocommerce-checkout > #order_review_heading, .ss form.woocommerce-checkout > #order_review { grid-column: 2; } } .ss .woocommerce-checkout .col2-set .col-1, .ss .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; } .ss #order_review_heading, .ss .woocommerce-billing-fields h3, .ss .woocommerce-additional-fields h3 { font-size: 24px; } .ss #order_review { background: var(--bela); border-radius: var(--r); padding: 18px; box-shadow: var(--senka); } .ss #order_review .shop_table { box-shadow: none; border-radius: 0; } .ss #payment { background: var(--krem-svetla); border-radius: var(--r-malo); padding: 14px; } .ss #payment ul.payment_methods { list-style: none; margin: 0 0 12px; padding: 0; border: 0; } .ss #payment .payment_box { background: var(--bela); border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 14px; } .ss #payment .payment_box::before { display: none; } .ss #place_order { width: 100%; min-height: 54px; font-size: 17px; } .ss .woocommerce-terms-and-conditions-wrapper { font-size: 14px; } .ss .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; } .ss .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 6px; } .ss .woocommerce-MyAccount-navigation a { display: block; padding: 8px 14px; border-radius: 999px; background: var(--bela); text-decoration: none; font-weight: 600; box-shadow: var(--senka); } .ss .woocommerce-MyAccount-navigation .is-active a { background: var(--tamna); color: var(--krem); } .ss .u-columns { display: grid; gap: 24px; } @media (min-width: 900px) { .ss .u-columns { grid-template-columns: 1fr 1fr; } } .ss .u-columns .col-1, .ss .u-columns .col-2 { width: auto; float: none; background: var(--bela); border-radius: var(--r); padding: 22px; box-shadow: var(--senka); } .ss .cart-empty { font-size: 18px; } .ss .return-to-shop { margin-top: 14px; } /* ------------------------------------------------------------------ podnožje */ .ss-podnozje { background: var(--tamna); color: #D9CFC0; padding: 52px 0 0; margin-top: 24px; } .ss-podnozje__omot { display: grid; gap: 32px; grid-template-columns: 1fr; } @media (min-width: 760px) { .ss-podnozje__omot { grid-template-columns: 1fr 1fr; gap: 40px 48px; } } @media (min-width: 1080px) { .ss-podnozje__omot { grid-template-columns: minmax(260px, 1.3fr) repeat(auto-fit, minmax(170px, 1fr)); } } .ss-logo--podnozje .ss-logo__slika { width: 180px; margin-bottom: 14px; } .ss-podnozje__brend p { max-width: 380px; font-size: 15px; } .ss .ss-podnozje h2 { font-family: var(--telo); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #F6A06B; margin-bottom: 12px; } .ss-podnozje ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .ss-podnozje a { color: #F5EAD8; text-decoration: none; display: inline-block; padding: 4px 0; } .ss-podnozje a:hover { color: #F6A06B; text-decoration: underline; } .ss-podnozje__dno { border-top: 1px solid rgba(245, 234, 216, .14); margin-top: 40px; padding-top: 18px; padding-bottom: 22px; font-size: 14px; color: #a99f92; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; } .ss-podnozje__dno p { margin: 0; } .ss-podnozje__izrada a { padding: 0; text-decoration: underline; text-underline-offset: 3px; } /* Kontakt u podnožju (lokalno sa primerima umesto praznih polja) */ .ss-podnozje__redovi { display: grid; gap: 8px; margin-bottom: 16px; } .ss-podnozje__red { display: flex; align-items: center; gap: 10px; font-size: 15px; } .ss-podnozje__red svg { flex: none; color: #F6A06B; } /* `.ss-podnozje a { display: inline-block }` je jače od `.ss-podnozje__red`, pa je red-link (email, telefon) gubio flex i ikonica se lepila uz tekst (živo 14.11.2026). */ .ss-podnozje a.ss-podnozje__red { display: flex; padding: 0; } /* Bez mreža „Piši nam” dolazi odmah posle redova: 16 + 14 + 4 px su davali prazninu od 34 px. */ .ss-podnozje__redovi + .ss-podnozje__vise { margin-top: 0; } .ss-podnozje .ss-contact__vreme { color: #D9CFC0; font-size: 14px; } .ss-podnozje .je-primer { color: #b8ad9e; } .ss-podnozje .ss-primer { display: inline-block; margin-left: 4px; padding: 0 7px; border: 1px dashed #F6A06B; border-radius: 999px; background: transparent; color: #F6A06B; font: 700 11px/18px var(--telo); letter-spacing: .04em; text-transform: uppercase; } /* Osnovna pravila za .ss-mreze su u mega-meni.css (učitava se na svakoj strani). Ovde samo nadjačavanje „.ss-podnozje ul” (grid u jednoj koloni), da ikonice budu u redu. */ .ss-podnozje .ss-mreze { display: flex; flex-wrap: wrap; gap: 8px; } .ss-podnozje .ss-mreze__ikona { display: grid; color: #F5EAD8; padding: 0; } /* `.ss-podnozje a` (inline-block) je jace od `.ss-mreze__ikona` (grid), pa ikonica nije bila centrirana */ .ss-podnozje a.ss-mreze__ikona:hover { background: #F6A06B; border-color: #F6A06B; color: var(--tamna); text-decoration: none; } .ss-podnozje__vise { margin-top: 14px; font-weight: 700; text-decoration: underline !important; text-underline-offset: 3px; } .ss-podnozje__primer { margin: 14px 0 0; font-size: 13px; color: #a99f92; max-width: 300px; } /* ------------------------------------------------------------------ strana „Brendovi” */ .ss-brendovi-strana__uvod { max-width: 720px; } .ss .ss-brendovi-strana__podnaslov { font-size: 26px; margin: 32px 0 14px; } .ss-brend-plocice { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; } /* 280: ime staje pored logotipa (4 kolone na 1440, 1 na telefonu) */ .ss-brend-plocice li { margin: 0; } .ss-brend-plocica { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px 14px 14px; border-radius: var(--r); background: var(--bela); box-shadow: var(--senka); text-decoration: none; transition: transform .15s, box-shadow .15s; } .ss-brend-plocica__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: break-word; } .ss-brend-plocica:hover { transform: translateY(-2px); box-shadow: var(--senka-jaka); } .ss-brend-plocica:focus-visible { border-radius: var(--r); } /* opšti prsten bi promenio uglove kartice */ .ss-brend-plocica__ime { font-family: var(--naslovi); font-size: 22px; line-height: 1.15; color: var(--tamna); } .ss-brend-plocica__broj { font-size: 14px; color: var(--tekst-blago); } .ss-slova { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; } .ss-slova a { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 12px; background: var(--bela); box-shadow: var(--senka); font-weight: 700; text-decoration: none; color: var(--tamna); } .ss-slova a:hover { background: var(--krem); } .ss-brendovi-az { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 32px; margin: 0 0 48px; } .ss .ss-brendovi-az__naslov { font-size: 30px; margin: 0 0 8px; color: var(--sargarepa-tekst); } .ss-brendovi-az__slovo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .ss-brendovi-az__slovo a { display: inline-flex; align-items: center; gap: 10px; padding: 3px 0; font-weight: 600; text-decoration: none; color: var(--tamna); } .ss-uvod__brend { flex: none; margin-left: auto; } /* Telefon: logotip brenda iznad mrvica, u svom redu (pored naslova „Alleva Equilibrium” ne staje na 320 px) */ @media (max-width: 759px) { .ss-uvod__omot--brend { flex-wrap: wrap; row-gap: 14px; } .ss-uvod__omot--brend .ss-uvod__tekst { flex: 1 1 100%; min-width: 0; } .ss-uvod__brend { order: -1; margin-left: 0; } .ss-uvod__brend .ss-brend-ikona { --v: 56px !important; } } .ss-brendovi-az__slovo a:hover { color: var(--sargarepa-tekst); text-decoration: underline; } .ss-brendovi-az__broj { font-size: 13px; color: var(--tekst-blago); } /* ------------------------------------------------------------------ strana „Kontakt” */ .ss-kontakt-kartica { margin: 8px 0 20px; padding: 24px; border-radius: var(--r-veliko); background: var(--bela); box-shadow: var(--senka); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } /* Tekst reda kontakta (kartica, podnožje, meni): dugačak email se lomi u redu umesto da ga gura van ekrana */ .ss-kontakt-tekst { min-width: 0; overflow-wrap: anywhere; } .ss-kontakt-kartica__redovi { display: grid; gap: 12px; } .ss-kontakt-kartica__red { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; color: var(--tamna); text-decoration: none; } .ss-kontakt-kartica__red svg { flex: none; color: var(--sargarepa-tekst); } a.ss-kontakt-kartica__red:hover { color: var(--sargarepa-tekst); text-decoration: underline; } .ss-kontakt-kartica__red.je-primer { color: var(--tekst-blago); } .ss-kontakt-kartica .ss-primer { display: inline-block; margin-left: 4px; padding: 0 7px; border: 1px dashed var(--sargarepa); border-radius: 999px; color: var(--sargarepa-tekst); font: 700 11px/18px var(--telo); letter-spacing: .04em; text-transform: uppercase; } .ss-mreze--strana { color: var(--sargarepa-tekst); } .ss-mreze--strana a.ss-mreze__ikona:hover { background: var(--sargarepa-tekst); border-color: var(--sargarepa-tekst); color: var(--bela); } .ss-kontakt-kartica__primer { margin: 0; font-size: 14px; color: var(--tekst-blago); } .ss-kontakt-strana__placanje { display: flex; align-items: center; gap: 10px; color: var(--zalfija-tekst); font-weight: 600; } .ss-kontakt-strana__placanje svg { flex: none; } /* Obaveštenje o dodavanju u korpu */ .ss-tost { position: fixed; z-index: 80; left: 50%; bottom: 20px; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 12px 14px 12px 18px; border-radius: var(--r); background: var(--tamna); color: var(--krem); box-shadow: var(--senka-jaka); font-weight: 600; transition: transform .3s ease; } .ss-tost.je-vidljiv { transform: translate(-50%, 0); } .ss-tost a { color: var(--tamna) !important; background: var(--krem); padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; white-space: nowrap; } .ss-tost.je-greska { background: var(--crvena); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------ nadjačavanje WooCommerce stilova WooCommerce gađa sa .woocommerce div.product p.price i sl. (3 klase), pa naša pravila ovde idu sa body.ss ispred. Sve što je ispod ovog reda je namerno specifičnije. */ body.ss .button, body.ss button.button, body.ss a.button, body.ss input.button, body.ss.woocommerce button.button.alt, body.ss .woocommerce button.button.alt, body.ss .woocommerce a.button.alt, body.ss .woocommerce button.button, body.ss .woocommerce a.button, body.ss .woocommerce input.button, body.ss button.single_add_to_cart_button, body.ss #place_order { background: var(--sargarepa); color: var(--bela); border-radius: 999px; font-weight: 700; font-size: 16px; min-height: 48px; padding: 12px 22px; border: 0; line-height: 1.2; } body.ss .button:hover, body.ss.woocommerce button.button.alt:hover, body.ss .woocommerce button.button.alt:hover, body.ss .woocommerce a.button:hover, body.ss .woocommerce button.button:hover, body.ss button.single_add_to_cart_button:hover, body.ss #place_order:hover { background: var(--sargarepa-tamna); color: var(--bela); } body.ss .woocommerce button.button:disabled, body.ss .woocommerce button.button.disabled, body.ss button.single_add_to_cart_button.disabled { background: #cfc7bc; color: var(--bela); opacity: 1; } body.ss .woocommerce-message .button, body.ss .woocommerce-info .button { min-height: 40px; padding: 8px 16px; font-size: 14px; background: var(--tamna); } body.ss div.product p.price, body.ss div.product span.price, body.ss .woocommerce-variation-price span.price { color: var(--tamna); font-weight: 700; } body.ss div.product p.price ins, body.ss div.product span.price ins { color: var(--sargarepa-tekst); text-decoration: none; } body.ss div.product p.price del, body.ss div.product span.price del { color: var(--tekst-blago); opacity: 1; font-weight: 500; } body.ss .woocommerce-variation-price .ss-pokg { margin-left: 12px; font-weight: 400; } body.ss div.product .stock { color: inherit; } body.ss div.product div.images .woocommerce-product-gallery__trigger { right: 14px; top: 14px; width: 42px; height: 42px; background: var(--krem); border-radius: 50%; } body.ss div.product div.images .woocommerce-product-gallery__trigger span { display: none; } body.ss div.product div.images { width: auto; float: none; margin: 0; } body.ss div.product div.summary { width: auto; float: none; margin: 0; } body.ss table.shop_attributes, body.ss .woocommerce-product-attributes { border: 0; margin: 0; } body.ss table.shop_attributes th, body.ss table.shop_attributes td { font-style: normal; border: 0; border-bottom: 1px solid var(--ivica); background: none; padding: 10px 0; } body.ss table.shop_attributes tr:nth-child(even) th, body.ss table.shop_attributes tr:nth-child(even) td { background: none; } body.ss table.shop_attributes th { width: 42%; padding-right: 12px; color: var(--tekst-blago); font-weight: 600; } body.ss .woocommerce-checkout #payment, body.ss #add_payment_method #payment { background: var(--krem-svetla); border-radius: var(--r-malo); } body.ss .woocommerce-checkout #payment div.payment_box { background: var(--bela); color: var(--tekst); } body.ss .woocommerce-checkout #payment div.payment_box::before { display: none; } body.ss .woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--ivica); padding: 0 0 12px; } body.ss .woocommerce-checkout #payment div.form-row { padding: 12px 0 0; } body.ss #ship-to-different-address { float: none; display: block; font-family: var(--telo); font-size: 16px; font-weight: 700; margin: 8px 0 14px; } body.ss #ship-to-different-address label { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 40px; } body.ss .woocommerce-additional-fields { clear: both; } body.ss .woocommerce form .form-row input[type="checkbox"], body.ss #ship-to-different-address input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--tamna); margin: 0; flex: none; } body.ss .woocommerce table.shop_table { border: 0; border-radius: var(--r); border-collapse: separate; } body.ss .woocommerce table.shop_table td, body.ss .woocommerce table.shop_table th { border-top: 0; } body.ss .woocommerce-checkout-review-order-table tfoot th { font-weight: 600; } body.ss .woocommerce-checkout-review-order-table .order-total td, body.ss .woocommerce-checkout-review-order-table .order-total th { font-size: 18px; font-weight: 800; } /* Desktop: bočna traka nije fioka, pa nema dugmeta za zatvaranje */ @media (min-width: 1080px) { body.ss .ss-filteri__zatvori, body.ss .ss-filteri__primeni { display: none; } } /* Kartica: raspored dna po širini same kartice, ne ekrana (ista kartica je i u mreži sa bočnom trakom i u „Sličnoj hrani”). Uska: cena gore, dugme preko cele širine. */ .ss .ss-kartica { container-type: inline-size; } .ss-kartica__cene { min-width: 0; } @container (max-width: 269px) { .ss-kartica__dno { flex-direction: column; align-items: stretch; gap: 10px; } .ss-u-korpu { width: 100%; } } /* Slični proizvodi: četiri u redu na širokom ekranu */ @media (min-width: 1080px) { body.ss .related ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Sakriveni