/* Theme Name: Porto Child Template: porto Description: Child tema za sifonjer.rs Version: 2.0 Text Domain: porto-child */ :root { --sif-ink: #232323; --sif-black: #1a1a1a; --sif-paper: #f2f1ed; --sif-bg: #f7f7f7; --sif-card: #ececec; --sif-line: #e2e2e2; --sif-muted: #6f6f6f; --sif-plum: #4d243d; --sif-coral: #e36159; --sif-gutter: 32px; } body, .page-wrapper, #main, .main-content { background: var(--sif-bg); } body { color: var(--sif-ink); } a { color: var(--sif-ink); } a:hover { color: var(--sif-plum); } /* ---------- Buttons ---------- */ .sif-btn, .sif-btn:visited { display: inline-block; background: var(--sif-black); color: var(--sif-paper) !important; font-size: 11px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; padding: 15px 22px; border: 1px solid var(--sif-black); text-decoration: none !important; transition: background .2s, color .2s; } .sif-btn:hover { background: transparent; color: var(--sif-black) !important; } .sif-btn-light { background: var(--sif-paper); border-color: var(--sif-paper); color: var(--sif-black) !important; } .sif-btn-light:hover { background: transparent; color: var(--sif-paper) !important; } .sif-btn-sm { padding: 10px 14px; font-size: 10px; } /* ---------- Header ---------- */ #header.gutenberg-hb > .porto-block { display: block; } #header.gutenberg-hb > .porto-block > .wp-block-group { width: 100%; } .header-wrapper { position: sticky; top: -36px; z-index: 1001; } .admin-bar .header-wrapper { top: -4px; } #header.gutenberg-hb { background: #fff; } .sif-announce { background: var(--sif-black); color: var(--sif-paper); font-size: 12px; } .sif-announce p { margin: 0; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 16px; } /* Header (variant A): logo | product search | icons, menu centered below. Uses the home v2 type system. */ #header { --h-ink: #16191e; --h-line: #ece6e1; --h-mute: #857c75; --h-coral: #e36159; --h-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif; --h-body: 'Public Sans', 'Helvetica Neue', Arial, sans-serif; --h-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; } #header .sif-announce p { font: 500 11px/36px var(--h-mono); letter-spacing: .06em; text-transform: uppercase; } #header .sif-announce { background: var(--h-ink); } .sif-main { background: #fff; border-bottom: 1px solid var(--h-line, #ece6e1); } .sif-hrow { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo search right" "nav nav nav"; align-items: center; column-gap: 32px; max-width: 1320px; margin: 0 auto; padding: 0 32px; } .sif-hrow > .wp-block-group__inner-container { display: contents; } #header .sif-hrow .mobile-toggle { grid-area: toggle; display: none; } #header .sif-hrow .logo { grid-area: logo; justify-self: start; margin: 0; padding: 12px 0; } #header .sif-hrow .logo img { max-height: 56px; width: auto; } /* Search pill */ .sif-search { grid-area: search; justify-self: center; width: 100%; max-width: 520px; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 16px; border: 1px solid #e2dbd4; border-radius: 999px; background: #f4f1ee; transition: border-color .2s, background .2s; margin: 0; } .sif-search:focus-within { border-color: var(--h-ink); background: #fff; } .sif-search-ico { color: var(--h-mute); flex: 0 0 auto; } #header .sif-search input[type="search"] { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0; font: 400 15px var(--h-body); color: var(--h-ink); outline: none; } #header .sif-search input[type="search"]::placeholder { color: var(--h-mute); opacity: 1; } #header .sif-search input[type="search"]::-webkit-search-cancel-button { display: none; } #header .sif-search button { flex: 0 0 auto; height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--h-ink); color: #fff; font: 600 13px var(--h-display); cursor: pointer; transition: background .2s; } #header .sif-search button:hover { background: #4d243d; } /* Icon actions */ .sif-right { grid-area: right; justify-self: end; } .sif-right, .sif-right > .wp-block-group__inner-container { display: flex; align-items: center; gap: 22px; } #header .sif-right a, #header .sif-right .cart-head i { color: var(--h-ink); } #header .sif-right a:hover, #header .sif-right .cart-head:hover i { color: #4d243d; } #header .sif-right .cart-head::after { display: none !important; } #header .sif-right .cart-items { background: var(--h-coral); color: #fff; font: 600 10px/16px var(--h-body); min-width: 16px; height: 16px; } /* Menu row */ .sif-hrow .sif-nav { grid-area: nav; position: relative; justify-self: stretch; } .sif-hrow .sif-nav::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; transform: translateX(-50%); border-top: 1px solid var(--h-line); } .sif-nav .main-menu { justify-content: center; } #header .sif-nav .main-menu > li.menu-item > a { color: var(--h-ink); font: 600 15px/1 var(--h-display); letter-spacing: -0.005em; text-transform: none; padding: 17px 18px; } #header .sif-nav .main-menu > li.menu-item:first-child > a { color: var(--h-coral); } #header .sif-nav .main-menu > li.menu-item:hover > a, #header .sif-nav .main-menu > li.menu-item.active > a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; background: transparent; } #header .sif-nav .main-menu .popup > .inner { border-top: 0; box-shadow: 0 16px 36px rgba(22,25,30,.08); border-radius: 0 0 14px 14px; } #header .sif-nav .main-menu .wide li.sub > a { font: 500 11px/1.4 var(--h-mono); text-transform: uppercase; letter-spacing: .1em; color: #4d243d; } #header .sif-nav .main-menu .popup li.menu-item:not(.sub) > a { font: 400 14px/1.4 var(--h-body); color: #625b55; } @media (max-width: 1100px) { .sif-hrow { column-gap: 24px; } #header .sif-nav .main-menu > li.menu-item > a { padding: 17px 13px; } } /* Mobile: toggle + logo + icons, search full width below; menu lives in the toggle panel */ @media (max-width: 991px) { .sif-hrow { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "toggle logo right" "search search search"; column-gap: 0; padding: 0 20px 12px; } .sif-hrow .sif-nav { display: none !important; } #header .sif-hrow .mobile-toggle { display: inline-block; justify-self: start; background: transparent !important; color: var(--h-ink) !important; font-size: 22px; padding: 0; margin: 0 12px 0 0; } #header .sif-hrow .logo { padding: 8px 0; } #header .sif-hrow .logo img { max-height: 42px; } .sif-search { max-width: none; height: 42px; } .sif-right, .sif-right > .wp-block-group__inner-container { gap: 16px; } } @media (max-width: 575px) { .sif-hide-xs { display: none; } .sif-announce p { font-size: 11px; } } /* ---------- Home layout ---------- */ .sif-full #main .container:has(> .row > .main-content) { max-width: none; padding: 0; } .sif-full #main > .container > .row { margin: 0; } .sif-full .main-content { padding: 0 !important; } .sif-full .main-content > article, .sif-full .page-content, .sif-full .entry-content { margin: 0; } .sif-h2, .sif-car-head h2 { font-size: 24px; line-height: 1.2; font-weight: 400; text-transform: uppercase; letter-spacing: -0.04em; margin: 0; } .sif-kicker { color: #fff; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 18px; } .sif-kicker-dark { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sif-muted); margin: 0 0 10px; } /* Hero */ .sif-hero { position: relative; height: min(calc(100vh - 150px), 760px); min-height: 460px; overflow: hidden; background: #ccc; } .sif-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 30%; } .sif-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 55%); } .sif-hero-in { position: absolute; z-index: 2; left: var(--sif-gutter); top: 50%; transform: translateY(-50%); } /* Product carousels */ .sif-carousel { padding: 56px 0 48px; } .sif-car-head { display: flex; justify-content: center; align-items: center; gap: 28px; } .sif-car-head button { background: none; border: 0; font-size: 30px; line-height: 1; color: #9a9a9a; cursor: pointer; padding: 0 6px; } .sif-car-head button:hover { color: var(--sif-ink); } .sif-car-all { text-align: center; margin: 6px 0 26px; } .sif-car-all a { font-size: 11px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; letter-spacing: .04em; } .sif-carousel .woocommerce { margin: 0; } .sif-carousel ul.products { display: flex !important; flex-wrap: nowrap !important; gap: 12px; margin: 0 !important; padding: 0 var(--sif-gutter) 4px !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--sif-gutter); scrollbar-width: none; scroll-behavior: smooth; } .sif-carousel ul.products::-webkit-scrollbar { display: none; } .sif-carousel ul.products li.product { flex: 0 0 calc((100% - 4 * 12px) / 5.25) !important; max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; scroll-snap-align: start; } .sif-carousel ul.products li.product .add-links-wrap, .sif-carousel ul.products li.product .add-links { display: none !important; } /* Category tiles */ .sif-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .sif-cat { position: relative; display: block; height: 560px; overflow: hidden; background: #ccc; } .sif-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform .6s ease; } .sif-cat:hover img { transform: scale(1.04); } .sif-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.4), rgba(0,0,0,0) 45%); } .sif-cat-in { position: absolute; z-index: 2; left: 0; right: 0; bottom: 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .sif-cat-title { color: #fff; font-size: 24px; text-transform: uppercase; letter-spacing: -0.03em; } /* Marquee */ .sif-marquee { overflow: hidden; background: #fff; border-bottom: 1px solid var(--sif-line); } .sif-marquee-track { display: inline-flex; white-space: nowrap; animation: sif-marquee 40s linear infinite; } .sif-marquee-track span { font-size: 12px; padding: 12px 28px; } .sif-marquee-track span::after { content: "·"; margin-left: 56px; color: #aaa; } @keyframes sif-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .sif-marquee-track { animation: none; } } /* Seen on Instagram */ .sif-seen { padding: 64px var(--sif-gutter); text-align: center; background: #fff; } .sif-seen .sif-h2 { margin-bottom: 28px; } .sif-posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1180px; margin: 0 auto; text-align: left; } .sif-post { display: block; background: #fff; border: 1px solid var(--sif-line); text-decoration: none !important; } .sif-post-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; font-weight: 500; } .sif-post-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid var(--sif-line); padding: 2px; } .sif-post-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--sif-card); } .sif-post-cap { display: block; padding: 12px; font-size: 12px; line-height: 1.5; color: var(--sif-muted); } .sif-post-cap strong { display: block; color: var(--sif-ink); font-weight: 500; margin-bottom: 2px; } /* Strip */ .sif-strip { margin: 0 var(--sif-gutter) 56px; background: var(--sif-black); color: var(--sif-paper); text-align: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 9px 16px; border-radius: 4px; } .sif-stars { letter-spacing: 2px; margin-right: 6px; } /* Split sections */ .sif-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding: 72px var(--sif-gutter); background: var(--sif-bg); } .sif-split-img { position: relative; } .sif-split-img img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; } .sif-split-text { max-width: 440px; } .sif-split-text .sif-h2 { margin-bottom: 16px; } .sif-split-text p { font-size: 14px; line-height: 1.6; color: #444; margin-bottom: 24px; } .sif-split-feature .sif-split-img img { aspect-ratio: 4 / 5; max-height: 720px; } .sif-split-over { position: absolute; left: 28px; bottom: 32px; color: #fff; font-size: 14px; line-height: 1.4; text-shadow: 0 1px 12px rgba(0,0,0,.35); } .sif-split-over strong { display: block; font-size: clamp(26px, 3vw, 40px); font-weight: 500; text-transform: uppercase; letter-spacing: -0.03em; } /* Instagram grid */ .sif-igrid { display: grid; grid-template-columns: repeat(4, 1fr); } .sif-ig { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sif-card); } .sif-ig img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .sif-ig:hover img { transform: scale(1.04); } .sif-ig span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; text-transform: uppercase; letter-spacing: -0.02em; background: rgba(0,0,0,.3); } /* Sale banner */ .sif-sale { position: relative; height: 640px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; } .sif-sale::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.18); } .sif-sale-in { position: relative; z-index: 2; color: #fff; } .sif-sale h2 { color: #fff; font-size: clamp(40px, 6vw, 72px); line-height: 1; font-weight: 400; text-transform: uppercase; letter-spacing: -0.04em; margin: 0 0 12px; } .sif-sale p { color: #fff; font-size: 14px; margin: 0 0 24px; } @media (max-width: 991px) { :root { --sif-gutter: 16px; } .sif-cats { grid-template-columns: repeat(2, 1fr); } .sif-cat { height: 380px; } .sif-posts { grid-template-columns: repeat(2, 1fr); } .sif-igrid { grid-template-columns: repeat(2, 1fr); } .sif-carousel ul.products li.product { flex-basis: 40% !important; } .sif-split { grid-template-columns: 1fr; gap: 28px; padding: 48px var(--sif-gutter); } .sif-split-text { max-width: none; } .sif-sale { height: 460px; } } @media (max-width: 575px) { .sif-hero { height: 70vh; } .sif-hero-bg { object-position: 62% 30%; } .sif-cat { height: 260px; } .sif-cat-title { font-size: 18px; } .sif-carousel ul.products li.product { flex-basis: 62% !important; } } /* ---------- Footer ---------- */ #footer .footer-main, #footer .footer-bottom { display: none; } .sif-footer { background: var(--sif-black); color: #a9a9a9; padding: 64px 0 0; font-size: 13px; } .sif-footer h4 { color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; } .sif-footer a { color: #d6d6d6; } .sif-footer a:hover { color: #fff; } .sif-footer-logo img { filter: brightness(0) invert(1); opacity: .95; } .sif-footer .sif-links { list-style: none; padding: 0; margin: 0; } .sif-footer .sif-links li { padding: 3px 0; } .sif-footer .sif-contact { line-height: 1.9; } .sif-footer .sif-contact strong { color: #fff; font-weight: 500; } .sif-footer .sif-social { gap: 10px; } .sif-footer .sif-social .wp-social-link { background: rgba(255,255,255,.08) !important; color: #fff !important; border-radius: 50%; padding: 4px; } .sif-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding: 20px 0; font-size: 12px; } .sif-footer-bottom p { margin: 0; } /* ========================================================================== Home v2 — modern second-hand shop (scoped to .sif2) ========================================================================== */ body.home { background: #f4f1ee; } body.home #main, body.home .page-wrapper, body.home .main-content { background: #f4f1ee; } .sif2 { --s2-ink: #16191e; --s2-ink-2: #20252c; --s2-ink-line: #333a44; --s2-ink-fg: #f3f0ec; --s2-ink-mute: #a9a39d; --s2-bg: #f4f1ee; --s2-card: #ffffff; --s2-fg: #16191e; --s2-mute: #625b55; --s2-line: #e2dbd4; --s2-plum: #4d243d; --s2-coral: #e36159; --s2-coral-deep: #c94a42; --s2-teal: #3c6e71; --s2-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif; --s2-body: 'Public Sans', 'Helvetica Neue', Arial, sans-serif; --s2-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --s2-sec: 88px; --s2-r: 14px; font-family: var(--s2-body); color: var(--s2-fg); font-size: 16px; line-height: 1.6; } .sif2 h1, .sif2 h2, .sif2 h3 { font-family: var(--s2-display); color: inherit; margin: 0; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; text-transform: none; } .sif2 h1 { font-size: clamp(40px, 5.4vw, 72px); font-weight: 700; } .sif2 h2 { font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; } .sif2 h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } .sif2 p { margin: 0; } .sif2 a { text-decoration: none; } .s2-wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; } .s2-sec { padding: var(--s2-sec) 0; } .s2-sec-tight { padding-top: 0; } .s2-mono { font-family: var(--s2-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .s2-eyebrow { font-family: var(--s2-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--s2-plum); margin-bottom: 14px !important; } .s2-eyebrow-light { color: #f2a39c; } .s2-lede { font-size: 19px; line-height: 1.55; color: var(--s2-mute); max-width: 560px; } .s2-muted { color: var(--s2-mute); margin-top: 16px !important; } .s2-muted a { color: var(--s2-plum); text-decoration: underline; text-underline-offset: 3px; } .s2-tlink { font-family: var(--s2-display); font-weight: 600; color: var(--s2-plum) !important; white-space: nowrap; } .s2-tlink:hover { color: var(--s2-coral) !important; } /* Buttons & pills */ .s2-btns { display: flex; flex-wrap: wrap; gap: 10px; } .s2-btn { display: inline-flex; align-items: center; gap: .5em; padding: 14px 22px; border-radius: 10px; font: 600 15px/1.1 var(--s2-display); border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .2s; } .s2-btn:hover { transform: translateY(-1px); } .s2-btn-primary { background: var(--s2-coral); color: #fff !important; } .s2-btn-primary:hover { background: var(--s2-coral-deep); } .s2-btn-ghost { border-color: rgba(255,255,255,.28); color: var(--s2-ink-fg) !important; } .s2-btn-ghost:hover { border-color: #fff; } .s2-btn-dark { background: var(--s2-ink); color: #fff !important; } .s2-btn-dark:hover { background: var(--s2-plum); } .s2-btn-light { background: #fff; color: var(--s2-ink) !important; } .s2-pill { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--s2-mono); letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; border: 1px solid currentColor; } .s2-pill-live { background: rgba(22,25,30,.72); color: #fff; border-color: rgba(255,255,255,.25); backdrop-filter: blur(6px); } .s2-pill-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7ee2a8; box-shadow: 0 0 0 4px rgba(126,226,168,.25); } /* Hero */ .s2-hero { background: var(--s2-ink); color: var(--s2-ink-fg); padding: 64px 0 72px; } .s2-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; } .s2-hero h1 { color: #fff; margin-bottom: 22px; } .s2-hero .s2-lede { color: #c9c2bb; margin-bottom: 30px; } .s2-facts { list-style: none; margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid var(--s2-ink-line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .s2-facts li { display: grid; gap: 4px; } .s2-facts strong { font: 700 22px/1.1 var(--s2-display); color: #fff; letter-spacing: -0.02em; } .s2-facts span { font: 400 12px/1.4 var(--s2-mono); color: var(--s2-ink-mute); letter-spacing: .02em; } .s2-hero-img { position: relative; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 640px; } .s2-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; display: block; } .s2-hero-img figcaption { position: absolute; left: 18px; bottom: 18px; } /* Chips */ .s2-chips { background: var(--s2-bg); border-bottom: 1px solid var(--s2-line); } .s2-chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 18px; padding-bottom: 18px; } .s2-chips-row::-webkit-scrollbar { display: none; } .s2-chips-row .s2-mono { color: var(--s2-mute); margin-right: 6px; white-space: nowrap; } .s2-chip { flex: 0 0 auto; font: 500 14px/1 var(--s2-display); color: var(--s2-fg) !important; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--s2-line); background: #fff; transition: border-color .2s, background .2s; } .s2-chip:hover { border-color: var(--s2-fg); } /* Section heads */ .s2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; } .s2-head-actions { display: flex; align-items: center; gap: 22px; } .s2-arrows { display: inline-flex; gap: 8px; } .s2-arrows button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--s2-line); background: #fff; color: var(--s2-fg); font-size: 18px; cursor: pointer; transition: border-color .2s, background .2s; } .s2-arrows button:hover { border-color: var(--s2-fg); } /* Bento categories */ .s2-bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 16px; } .s2-cat { position: relative; display: block; border-radius: var(--s2-r); overflow: hidden; background: #ddd; color: #fff !important; } .s2-cat-lg { grid-row: span 2; } .s2-cat-sale { grid-column: span 2; } .s2-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .7s ease; } .s2-cat:hover img { transform: scale(1.04); } .s2-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,16,20,.72) 0%, rgba(14,16,20,0) 55%); } .s2-cat-body { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; display: grid; gap: 6px; } .s2-cat-body .s2-mono { color: rgba(255,255,255,.78); font-size: 11px; } .s2-cat-title { font: 700 30px/1.05 var(--s2-display); letter-spacing: -0.02em; } .s2-cat-title span { display: inline-block; transition: transform .2s; } .s2-cat:hover .s2-cat-title span { transform: translateX(4px); } .s2-cat-sale .s2-cat-title { color: #fff; } /* Product rails (WooCommerce loop inside .sif2) */ .sif2 .s2-rail { padding: 0; } .sif2 .s2-rail ul.products { padding: 0 max(32px, calc((100vw - 1320px) / 2 + 32px)) 6px !important; gap: 16px; scroll-padding-left: max(32px, calc((100vw - 1320px) / 2 + 32px)); } .sif2 .s2-rail ul.products li.product { flex: 0 0 calc((min(100vw, 1320px) - 64px - 3 * 16px) / 4) !important; } .sif2 ul.products li.product .product-inner { background: #fff; border: 1px solid var(--s2-line); border-radius: var(--s2-r); overflow: hidden; height: 100%; transition: border-color .2s, box-shadow .2s; } .sif2 ul.products li.product:hover .product-inner { border-color: #cfc6be; box-shadow: 0 14px 30px rgba(22,25,30,.07); } .sif2 ul.products li.product .product-image { background: #f1ede9 !important; border-radius: 0 !important; } .sif2 ul.products li.product .product-content { padding: 14px 16px 18px !important; } .sif2 ul.products li.product .woocommerce-loop-product__title { font: 500 15px/1.35 var(--s2-body); color: var(--s2-fg); } .sif2 ul.products li.product .price { font: 600 16px/1.2 var(--s2-display); color: var(--s2-fg); margin-top: 6px; } .sif2 ul.products li.product .price ins { color: var(--s2-coral); } .sif2 .onsale, .sif2 .product-image .labels .onsale { border-radius: 999px !important; font-family: var(--s2-mono) !important; padding: 5px 9px !important; } /* Ink section: steps */ .s2-ink { background: var(--s2-ink); color: var(--s2-ink-fg); } .s2-ink h2, .s2-ink h3 { color: #fff; } .s2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; } .s2-steps li { background: var(--s2-ink-2); border: 1px solid var(--s2-ink-line); border-radius: var(--s2-r); padding: 26px 24px 28px; display: grid; gap: 10px; align-content: start; } .s2-step-n { font: 500 12px/1 var(--s2-mono); color: #f2a39c; letter-spacing: .1em; } .s2-steps p { color: var(--s2-ink-mute); font-size: 15px; line-height: 1.55; } /* Feature + story duo */ .s2-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .s2-feature { position: relative; display: block; border-radius: var(--s2-r); overflow: hidden; min-height: 620px; color: #fff !important; } .s2-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .s2-feature:hover img { transform: scale(1.03); } .s2-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,16,20,.86) 0%, rgba(14,16,20,.1) 60%); } .s2-feature-body { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 32px; display: grid; gap: 14px; justify-items: start; } .s2-feature-title { font: 700 clamp(26px, 2.6vw, 38px)/1.08 var(--s2-display); letter-spacing: -0.025em; } .s2-feature-text { color: #d9d3cd; max-width: 440px; } .s2-feature .s2-tlink { color: #fff !important; } .s2-card { background: var(--s2-card); border: 1px solid var(--s2-line); border-radius: var(--s2-r); } .s2-story { padding: 40px; display: grid; gap: 18px; align-content: start; } .s2-story > p:not(.s2-eyebrow) { color: var(--s2-mute); } .s2-story-img { margin: 6px 0; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 7; } .s2-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .s2-story .s2-btn { justify-self: start; } /* Sale banner */ .s2-sale { position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; color: #fff; } .s2-sale > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .s2-sale::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,16,20,.55), rgba(14,16,20,.05) 70%); } .s2-sale-in { position: relative; z-index: 2; width: 100%; } .s2-sale h2 { color: #fff; max-width: 560px; margin-bottom: 26px; font-size: clamp(32px, 4vw, 56px); } /* FAQ */ .s2-faq-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; } .s2-faq { display: grid; gap: 10px; } .s2-faq details { background: #fff; border: 1px solid var(--s2-line); border-radius: 12px; padding: 0 22px; } .s2-faq summary { list-style: none; cursor: pointer; padding: 20px 0; font: 600 17px/1.3 var(--s2-display); display: flex; justify-content: space-between; gap: 16px; } .s2-faq summary::-webkit-details-marker { display: none; } .s2-faq summary::after { content: "+"; font: 400 22px/1 var(--s2-mono); color: var(--s2-plum); transition: transform .2s; } .s2-faq details[open] summary::after { transform: rotate(45deg); } .s2-faq details p { padding: 0 0 20px; color: var(--s2-mute); } .s2-faq details a { color: var(--s2-plum); text-decoration: underline; } /* Closing */ .s2-closing { background: var(--s2-plum); color: #fff; border-radius: 18px; padding: 48px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; } .s2-closing h2 { color: #fff; } .s2-closing .s2-lede { color: #e6d3de; margin-top: 12px; } /* Focus */ .sif2 a:focus-visible, .sif2 button:focus-visible, .sif2 summary:focus-visible { outline: 2px solid var(--s2-coral); outline-offset: 3px; border-radius: 6px; } @media (max-width: 1100px) { .s2-steps { grid-template-columns: repeat(2, 1fr); } .sif2 .s2-rail ul.products li.product { flex-basis: calc((100vw - 64px - 2 * 16px) / 3) !important; } } @media (max-width: 900px) { .sif2 { --s2-sec: 60px; } .s2-wrap { padding-left: 20px; padding-right: 20px; } .s2-hero { padding: 36px 0 48px; } .s2-hero-grid { grid-template-columns: 1fr; gap: 32px; } .s2-hero-img { width: 100%; aspect-ratio: 16 / 10; max-height: none; order: -1; } .s2-bento { grid-template-columns: 1fr 1fr; grid-template-rows: 340px 220px 220px; } .s2-cat-lg { grid-column: span 2; grid-row: auto; } .s2-cat-sale { grid-column: span 2; } .s2-duo, .s2-faq-grid { grid-template-columns: 1fr; gap: 16px; } .s2-faq-grid { gap: 32px; } .s2-feature { min-height: 460px; } .s2-head { flex-direction: column; align-items: flex-start; gap: 14px; } .sif2 .s2-rail ul.products { padding: 0 20px 6px !important; scroll-padding-left: 20px; } .sif2 .s2-rail ul.products li.product { flex-basis: 44% !important; } } @media (max-width: 560px) { .s2-facts { grid-template-columns: 1fr 1fr; } .s2-facts li:last-child { grid-column: span 2; } .s2-steps { grid-template-columns: 1fr; } .s2-bento { grid-template-rows: 300px 200px 200px; gap: 10px; } .s2-cat-title { font-size: 24px; } .s2-story { padding: 26px; } .s2-closing { padding: 32px 24px; } .s2-sale { min-height: 420px; } .sif2 .s2-rail ul.products li.product { flex-basis: 70% !important; } .s2-btn { padding: 13px 18px; } } /* Keep absolutely positioned card parts (screen-reader text, wishlist, quickview) inside the scrolling rail */ .sif-carousel ul.products, .sif-carousel ul.products li.product { position: relative; } /* Rails: less air below, the next section brings its own top padding */ .sif2 .wp-block-group.s2-sec { padding-bottom: 24px; } .sif-full .page-top { display: none !important; } /* Placeholders that must be filled in before launch */ .sif-todo { background: #fff3c4; color: #7a5300; padding: 1px 5px; border-radius: 4px; font-weight: 600; } /* Submenu hover: no box/underline — text darkens and nudges right */ #header .sif-nav .main-menu .popup li.menu-item > a { background: transparent !important; text-decoration: none !important; transition: color .18s ease, transform .18s ease; } #header .sif-nav .main-menu .popup li.menu-item:not(.sub) > a:hover, #header .sif-nav .main-menu .popup li.menu-item:not(.sub) > a:focus-visible { color: var(--sif-ink) !important; transform: translateX(4px); } #header .sif-nav .main-menu .wide li.sub > a:hover { transform: none; } /* Narrow dropdown (Akcija): give items breathing room inside the panel */ #header .sif-nav .main-menu li.narrow .popup .inner { padding: 0; background: transparent; box-shadow: none; } #header .sif-nav .main-menu li.narrow .popup ul.porto-narrow-sub-menu { background: #fff; border-top: 0; border-radius: 0 0 14px 14px; box-shadow: 0 16px 36px rgba(22,25,30,.08); padding: 22px 0 18px; min-width: 240px; overflow: hidden; } #header .sif-nav .main-menu li.narrow .popup li.menu-item > a { padding: 4px 30px !important; font: 400 14px/1.4 'Public Sans', 'Helvetica Neue', Arial, sans-serif; color: #625b55; border: 0 !important; white-space: nowrap; } /* Porto sets overflow:hidden on .page-wrapper (mobile), which disables the sticky header; clip still trims side overflow without creating a scroll container. */ .page-wrapper { overflow: clip !important; } /* ========================================================================== Site-wide v2 style (shop, product, cart, checkout, account, pages) Same system as the home page: warm paper background, white rounded cards, Schibsted Grotesk / Public Sans / IBM Plex Mono, rounded buttons. ========================================================================== */ :root { --v2-ink: #16191e; --v2-fg: #3d3833; --v2-mute: #625b55; --v2-soft: #857c75; --v2-bg: #f4f1ee; --v2-card: #ffffff; --v2-tile: #f1ede9; --v2-line: #e2dbd4; --v2-line-2: #cfc6be; --v2-plum: #4d243d; --v2-coral: #e36159; --v2-coral-deep: #c94a42; --v2-r: 14px; --v2-r-btn: 10px; --v2-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif; --v2-body: 'Public Sans', 'Helvetica Neue', Arial, sans-serif; --v2-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; } body, .page-wrapper, #main, .main-content, body.home { background: var(--v2-bg) !important; } body { font-family: var(--v2-body); color: var(--v2-fg); } h1, h2, h3, h4, h5, h6 { font-family: var(--v2-display); color: var(--v2-ink); text-transform: none; } a { color: var(--v2-ink); } a:hover { color: var(--v2-plum); } /* ---------- Buttons: rounded like the home page ---------- */ .button, button.button, a.button, input[type="submit"], input[type="button"], .btn, .wp-block-button__link, .woocommerce .button, .yith-wcwl-add-button a, .wc-forward { border-radius: var(--v2-r-btn) !important; font-family: var(--v2-display) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; transition: background .2s, color .2s, border-color .2s, transform .2s !important; } /* Primary actions: coral */ .single_add_to_cart_button, .single-product .single_add_to_cart_button.button, .checkout-button, a.checkout-button, #place_order, .woocommerce-mini-cart__buttons .checkout, .woocommerce .button.alt, .wc-block-components-button.contained { background: var(--v2-coral) !important; border: 1px solid var(--v2-coral) !important; color: #fff !important; font-size: 15px !important; padding: 0 26px !important; min-height: 50px; line-height: 48px !important; height: auto !important; } .single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover, .woocommerce .button.alt:hover { background: var(--v2-coral-deep) !important; border-color: var(--v2-coral-deep) !important; transform: translateY(-1px); } /* Secondary: dark outline */ .woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.checkout-button):not(.login-btn):not(.register-btn), .woocommerce-mini-cart__buttons .wc-forward:not(.checkout), input[type="submit"]:not(#place_order):not(.wpcf7-submit), .btn-default { background: transparent !important; border: 1px solid var(--v2-ink) !important; color: var(--v2-ink) !important; } .woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.checkout-button):not(.login-btn):not(.register-btn):hover, input[type="submit"]:not(#place_order):not(.wpcf7-submit):hover { background: var(--v2-ink) !important; color: #fff !important; } /* ---------- Form fields ---------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"]:not(#sif-search-input), textarea, select, .select2-container .select2-selection--single, .woocommerce .input-text { border: 1px solid var(--v2-line) !important; border-radius: var(--v2-r-btn) !important; background: #fff !important; font-family: var(--v2-body) !important; font-size: 15px !important; color: var(--v2-ink) !important; box-shadow: none !important; } input[type="text"], input[type="email"], input[type="tel"], input[type="password"], .woocommerce .input-text:not(textarea), select, .select2-container .select2-selection--single { min-height: 46px; padding: 0 14px !important; } textarea { padding: 12px 14px !important; } input:focus, textarea:focus, select:focus { border-color: var(--v2-ink) !important; outline: none; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px !important; padding-left: 0 !important; } .select2-container .select2-selection--single .select2-selection__arrow { height: 44px !important; } label, .form-row label { font-family: var(--v2-body); font-weight: 500; color: var(--v2-ink); } /* ---------- Page title bar ---------- */ .page-top { background: transparent !important; border: 0 !important; padding: 36px 0 8px !important; } .page-top .page-title { font: 700 clamp(30px, 3.4vw, 44px)/1.1 var(--v2-display) !important; letter-spacing: -0.025em !important; text-transform: none !important; color: var(--v2-ink) !important; } .page-top .page-title::after, .page-top .page-title:after { display: none !important; } .page-top .breadcrumb, .page-top .breadcrumb a, .page-top .breadcrumbs-wrap { font: 500 11px/1.5 var(--v2-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-soft) !important; } .page-top .breadcrumb a:hover { color: var(--v2-plum) !important; } .term-description { color: var(--v2-mute); font-size: 16px; max-width: 760px; } /* ---------- Product cards (all listings) ---------- */ ul.products li.product .product-inner { background: var(--v2-card) !important; border: 1px solid var(--v2-line); border-radius: var(--v2-r); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; } ul.products li.product:hover .product-inner { border-color: var(--v2-line-2); box-shadow: 0 14px 30px rgba(22,25,30,.07); } ul.products li.product .product-image { background: var(--v2-tile) !important; border: 0 !important; border-radius: 0 !important; aspect-ratio: 1 / 1; position: relative; } ul.products li.product .product-image img { mix-blend-mode: multiply; aspect-ratio: 1 / 1; object-fit: contain; width: 100%; height: 100% !important; padding: 8%; } ul.products li.product .product-content { text-align: left !important; padding: 14px 16px 18px !important; display: flex; flex-direction: column; flex: 1; } ul.products li.product .category-list, ul.products li.product .rating-wrap { display: none !important; } ul.products li.product .woocommerce-loop-product__title { font: 500 15px/1.35 var(--v2-body) !important; color: var(--v2-ink) !important; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 6px !important; text-transform: none !important; } ul.products li.product .price { font: 600 16px/1.2 var(--v2-display) !important; color: var(--v2-ink) !important; margin: 0 !important; } ul.products li.product .price del { color: #a39a93 !important; font-weight: 400; font-size: 14px; } ul.products li.product .price ins { color: var(--v2-coral) !important; text-decoration: none; } ul.products li.product .add-links-wrap { margin-top: auto; padding-top: 14px; } ul.products li.product .add-links { justify-content: flex-start !important; } ul.products li.product .add-links .add_to_cart_button, ul.products li.product .add-links .button { border-radius: var(--v2-r-btn) !important; border: 1px solid var(--v2-ink) !important; background: transparent !important; color: var(--v2-ink) !important; font: 600 13px/1 var(--v2-display) !important; text-transform: none !important; letter-spacing: 0 !important; padding: 0 16px !important; height: 40px; line-height: 38px !important; } ul.products li.product .add-links .add_to_cart_button:hover, ul.products li.product .add-links .button:hover { background: var(--v2-ink) !important; color: #fff !important; } .onsale, .product-image .labels .onsale, .labels .onsale { background: var(--v2-coral) !important; border-radius: 999px !important; font: 500 11px/1 var(--v2-mono) !important; padding: 6px 9px !important; } .labels { left: 10px !important; top: 10px !important; } /* ---------- Single product ---------- */ .single-product .page-top { padding: 22px 0 6px !important; } .single-product .page-top .page-title, .single-product .page-top .page-title + .page-sub-title { display: none; } .single-product .woocommerce-product-gallery, .single-product .product-images { border-radius: var(--v2-r); overflow: hidden; background: var(--v2-tile); } .single-product .product-images img { mix-blend-mode: multiply; } .single-product .product-thumbnails .img-thumbnail, .single-product .product-thumbs-slider .img-thumbnail { border-radius: 10px; overflow: hidden; border-color: var(--v2-line) !important; background: var(--v2-tile); } .single-product .product_title { font: 700 clamp(26px, 2.6vw, 36px)/1.12 var(--v2-display) !important; letter-spacing: -0.02em !important; text-transform: none !important; color: var(--v2-ink); margin-bottom: 10px !important; } .single-product .woocommerce-product-rating { display: none; } .single-product .product-summary-wrap .price { font: 700 26px/1.2 var(--v2-display) !important; color: var(--v2-ink) !important; margin: 4px 0 18px !important; } .single-product .product-summary-wrap .price del { color: #a39a93; font-weight: 400; font-size: 18px; } .single-product .product-summary-wrap .price ins { color: var(--v2-coral); text-decoration: none; } .single-product .product-summary-wrap .description { color: var(--v2-mute); font-size: 16px; } .single-product .product_meta { font-size: 14px; color: var(--v2-mute); border-top: 1px solid var(--v2-line) !important; padding-top: 16px !important; } .single-product .product_meta > span { display: block; margin-bottom: 4px; } .single-product form.cart { margin: 22px 0 !important; padding: 0 !important; border: 0 !important; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .single-product .product-summary-wrap hr, .single-product .product-summary-wrap .product-share hr { display: none; } .single-product .product-share { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--v2-line); } .single-product .product-share::before { content: "Podeli"; font: 500 11px var(--v2-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--v2-soft); } .share-links a { width: 40px !important; height: 40px !important; line-height: 40px !important; border-radius: 50% !important; background: #fff !important; border: 1px solid var(--v2-line) !important; color: var(--v2-ink) !important; margin: 0 6px 0 0 !important; box-shadow: none !important; transition: border-color .2s, background .2s, color .2s; } .share-links a:hover { background: var(--v2-ink) !important; border-color: var(--v2-ink) !important; color: #fff !important; } .single-product .yith-wcwl-add-to-wishlist { margin: 0 !important; } .single-product .yith-wcwl-add-button a { font: 600 14px var(--v2-display) !important; color: var(--v2-ink) !important; text-transform: none !important; } /* Tabs (Opis / Recenzije) as a card */ .single-product .woocommerce-tabs { margin-top: 48px !important; } .single-product .woocommerce-tabs .resp-tabs-list { border-bottom: 1px solid var(--v2-line) !important; margin-bottom: 0 !important; } .single-product .woocommerce-tabs .resp-tabs-list li { font: 600 16px var(--v2-display) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--v2-soft) !important; padding: 0 0 14px !important; margin-right: 30px !important; background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; } .single-product .woocommerce-tabs .resp-tabs-list li.resp-tab-active { color: var(--v2-ink) !important; border-bottom-color: var(--v2-coral) !important; } .single-product .woocommerce-tabs .tab-content, .single-product .woocommerce-tabs .resp-tab-content { background: #fff !important; border: 1px solid var(--v2-line) !important; border-radius: var(--v2-r) !important; padding: 28px 32px !important; margin-top: 20px !important; font-size: 16px; line-height: 1.65; color: var(--v2-fg); } .single-product .woocommerce-tabs .resp-accordion { border-radius: var(--v2-r) !important; font-family: var(--v2-display) !important; text-transform: none !important; } /* Related / upsells */ .single-product .related, .single-product .upsells { margin-top: 56px; } .single-product .related .slider-title, .single-product .upsells .slider-title, .products .slider-title { font: 700 clamp(24px, 2.4vw, 32px)/1.15 var(--v2-display) !important; text-transform: none !important; letter-spacing: -0.02em !important; color: var(--v2-ink) !important; border: 0 !important; padding-bottom: 0 !important; margin-bottom: 26px !important; } .single-product .related .slider-title::after, .products .slider-title::after { display: none !important; } .owl-dots .owl-dot span { background: var(--v2-line-2) !important; border: 0 !important; width: 8px !important; height: 8px !important; } .owl-dots .owl-dot.active span { background: var(--v2-ink) !important; width: 22px !important; border-radius: 999px !important; } /* ---------- Shop toolbar, sidebar, pagination ---------- */ .shop-loop-before, .shop-loop-after { border: 0 !important; background: transparent !important; } .woocommerce-ordering select, .woocommerce-viewing select { min-height: 42px !important; border-radius: var(--v2-r-btn) !important; } .gridlist-toggle a { border-radius: 8px; } .sidebar-content, .sidebar .widget { border: 0; } .sidebar .widget, .sidebar-content .widget { background: #fff; border: 1px solid var(--v2-line) !important; border-radius: var(--v2-r); padding: 20px 22px !important; margin-bottom: 16px !important; } .sidebar .widget-title, .sidebar-content .widget-title { font: 500 11px/1.4 var(--v2-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--v2-plum) !important; border: 0 !important; padding: 0 !important; margin-bottom: 14px !important; } .widget_product_categories ul li a { color: var(--v2-fg); font-size: 15px; } .widget_product_categories ul li.current-cat > a { color: var(--v2-ink); font-weight: 600; } .widget_price_filter .ui-slider .ui-slider-range { background: var(--v2-coral) !important; } .widget_price_filter .ui-slider .ui-slider-handle { background: #fff !important; border: 2px solid var(--v2-coral) !important; border-radius: 50% !important; } .woocommerce-pagination ul.page-numbers, ul.page-numbers { border: 0 !important; display: flex; gap: 6px; justify-content: center; } .woocommerce-pagination .page-numbers li { border: 0 !important; } .page-numbers a, .page-numbers span { border-radius: 999px !important; min-width: 40px; height: 40px; line-height: 38px !important; border: 1px solid var(--v2-line) !important; background: #fff !important; color: var(--v2-ink) !important; font: 600 14px/38px var(--v2-display) !important; } .page-numbers span.current, .page-numbers a:hover { background: var(--v2-ink) !important; border-color: var(--v2-ink) !important; color: #fff !important; } /* ---------- Cart & checkout ---------- */ .woocommerce-cart-form, .cart-collaterals .cart_totals, .woocommerce-checkout-review-order, .woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields, .woocommerce-form-login, .woocommerce-form-register, .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content, .woocommerce-order, .wishlist_table { background: #fff; border: 1px solid var(--v2-line) !important; border-radius: var(--v2-r) !important; padding: 24px 26px !important; } .woocommerce-checkout .featured-box, .woocommerce-checkout .align-left, .cart-collaterals .featured-box, .featured-box { border: 0 !important; box-shadow: none !important; background: transparent !important; } .featured-box .box-content { padding: 0 !important; border: 0 !important; } table.shop_table { border: 0 !important; } table.shop_table th { font: 500 11px/1.4 var(--v2-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-soft) !important; border-color: var(--v2-line) !important; } table.shop_table td { border-color: var(--v2-line) !important; } table.shop_table .product-thumbnail img { border-radius: 10px; background: var(--v2-tile); } .cart_totals h2, .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, #order_review_heading, .woocommerce-checkout h3, .woocommerce-account h2 { font: 700 22px/1.2 var(--v2-display) !important; text-transform: none !important; letter-spacing: -0.015em !important; color: var(--v2-ink) !important; } .coupon .input-text { min-width: 180px; } .woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-notice, .wc-block-components-notice-banner { border-radius: 12px !important; border: 1px solid var(--v2-line) !important; background: #fff !important; color: var(--v2-ink) !important; box-shadow: none !important; } .woocommerce-message { border-left: 4px solid #3c6e71 !important; } .woocommerce-error { border-left: 4px solid var(--v2-coral) !important; } .porto-free-shipping-bar, .shipping-progress-bar { border-radius: 999px; } #payment, .woocommerce-checkout-payment { background: var(--v2-tile) !important; border-radius: 12px !important; } .woocommerce-MyAccount-navigation ul li a { border-radius: 8px; } /* ---------- Regular pages (Kontakt, O nama, Politika…) ---------- */ .page:not(.sif-full):not(.woocommerce-page) .main-content article .page-content, .page:not(.sif-full):not(.woocommerce-page) .main-content article .entry-content { background: #fff; border: 1px solid var(--v2-line); border-radius: var(--v2-r); padding: 36px 40px; font-size: 16px; line-height: 1.7; max-width: 860px; } .page:not(.sif-full) .entry-content h2 { font-size: 22px; margin: 32px 0 12px; } .page:not(.sif-full) .entry-content h2:first-child { margin-top: 0; } @media (max-width: 767px) { .single-product .woocommerce-tabs .tab-content, .single-product .woocommerce-tabs .resp-tab-content { padding: 20px !important; } .woocommerce-cart-form, .cart-collaterals .cart_totals, .woocommerce-checkout-review-order, .woocommerce-billing-fields, .woocommerce-form-login, .woocommerce-form-register { padding: 18px !important; } .page:not(.sif-full):not(.woocommerce-page) .main-content article .page-content, .page:not(.sif-full):not(.woocommerce-page) .main-content article .entry-content { padding: 22px 20px; } } /* Single product summary order: … add to cart → wishlist → share */ .single-product .summary.entry-summary { display: flex; flex-direction: column; } .single-product .summary.entry-summary > .yith-wcwl-add-to-wishlist { order: 1; display: block !important; margin: 0 0 4px !important; } .single-product .summary.entry-summary > .product-share { order: 2; display: flex !important; align-items: center; gap: 12px; width: 100%; } .single-product .summary.entry-summary > .product-share .share-links { display: flex; gap: 8px; } .single-product .summary.entry-summary > .product-share .share-links a { margin: 0 !important; } .single-product .yith-wcwl-add-button a { display: inline-flex !important; align-items: center; gap: 8px; } .single-product .product-images .img-thumbnail, .single-product .woocommerce-product-gallery__image { background: transparent !important; border: 0 !important; } .single-product .product-images .img-thumbnail .inner, .single-product .product-thumbs-slider .img-thumbnail .inner, .single-product .product-thumbnails .img-thumbnail .inner { background: var(--v2-tile) !important; } .single-product .product-thumbnails .img-thumbnail img, .single-product .product-thumbs-slider .img-thumbnail img { mix-blend-mode: multiply; } .single-product .summary > .yith-wcwl-add-to-wishlist, .single-product .summary > .yith-wcwl-add-to-wishlist * { text-align: left !important; justify-content: flex-start !important; } .single-product .summary .yith-wcwl-add-button { align-items: flex-start !important; } .woocommerce-ordering select { min-width: 230px; padding-right: 34px !important; } /* Porto nests its own bordered .card inside cart/checkout boxes — flatten it inside our cards */ .cart_totals .card, .woocommerce-checkout-review-order .card, .woocommerce-cart-form .card, .woocommerce-checkout .card.card-default { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .cart_totals .card-body, .woocommerce-checkout .card-body { padding: 0 !important; } .card-sub-title, .cart_totals .card-sub-title { font: 700 20px/1.2 var(--v2-display) !important; text-transform: none !important; letter-spacing: -0.015em !important; color: var(--v2-ink) !important; } /* Free-shipping progress */ .porto-free-shipping { background: #fff !important; border: 1px solid var(--v2-line) !important; border-radius: 12px !important; padding: 14px 18px !important; } .porto-free-shipping-notice { font: 500 14px var(--v2-body) !important; color: var(--v2-ink) !important; } progress.porto-free-shipping-bar { appearance: none; -webkit-appearance: none; height: 6px; border: 0; border-radius: 999px; background: var(--v2-tile) !important; overflow: hidden; } progress.porto-free-shipping-bar::-webkit-progress-bar { background: var(--v2-tile); border-radius: 999px; } progress.porto-free-shipping-bar::-webkit-progress-value { background: var(--v2-coral); border-radius: 999px; } progress.porto-free-shipping-bar::-moz-progress-bar { background: var(--v2-coral); border-radius: 999px; } progress.porto-free-shipping-bar::-webkit-progress-value { background: var(--v2-coral) !important; } progress.porto-free-shipping-bar::-moz-progress-bar { background: var(--v2-coral) !important; } progress.porto-free-shipping-bar { color: var(--v2-coral) !important; } /* select2 (country / district): vertically centered value and arrow */ .select2-container .select2-selection--single { display: flex !important; align-items: center; height: 46px !important; min-height: 46px; padding: 0 36px 0 14px !important; position: relative; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 1.2 !important; padding: 0 !important; color: var(--v2-ink) !important; } .select2-container .select2-selection--single .select2-selection__arrow { position: absolute !important; top: 50% !important; right: 12px !important; transform: translateY(-50%); height: 20px !important; } .woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-ResetPassword .button { background: var(--v2-coral) !important; border-color: var(--v2-coral) !important; color: #fff !important; } .woocommerce-form-login__submit:hover, .woocommerce-form-register__submit:hover { background: var(--v2-coral-deep) !important; border-color: var(--v2-coral-deep) !important; } .woocommerce .button.login-btn, .woocommerce .button.register-btn { background: var(--v2-coral) !important; border-color: var(--v2-coral) !important; color: #fff !important; font-size: 15px !important; } .woocommerce .button.login-btn:hover, .woocommerce .button.register-btn:hover { background: var(--v2-coral-deep) !important; border-color: var(--v2-coral-deep) !important; color: #fff !important; } /* Product tabs as pills (like the home page chips), with air before the card */ .single-product .woocommerce-tabs { margin-top: 64px !important; } .single-product .woocommerce-tabs .resp-tabs-list { display: flex !important; flex-wrap: wrap; gap: 10px; border: 0 !important; margin: 0 0 20px !important; padding: 0 !important; height: auto !important; } .single-product .woocommerce-tabs .resp-tabs-list li { float: none !important; margin: 0 !important; padding: 11px 20px !important; border: 1px solid var(--v2-line) !important; border-radius: 999px !important; background: #fff !important; color: var(--v2-mute) !important; font: 600 15px/1 var(--v2-display) !important; transition: border-color .2s, background .2s, color .2s; } .single-product .woocommerce-tabs .resp-tabs-list li:hover { border-color: var(--v2-ink) !important; color: var(--v2-ink) !important; } .single-product .woocommerce-tabs .resp-tabs-list li.resp-tab-active { background: var(--v2-ink) !important; border-color: var(--v2-ink) !important; color: #fff !important; } .single-product .woocommerce-tabs .tab-content, .single-product .woocommerce-tabs .resp-tab-content { margin-top: 0 !important; } .single-product .woocommerce-tabs .tab-content > :last-child { margin-bottom: 0; } /* Summary rhythm */ .single-product .product_title { margin-bottom: 14px !important; } .single-product .product-summary-wrap .price { margin: 0 0 22px !important; } .single-product .product-summary-wrap .description { margin-bottom: 24px !important; line-height: 1.6; } .single-product .product_meta { margin-bottom: 4px !important; } .single-product .product_meta > span { margin-bottom: 8px; } .single-product form.cart { margin: 26px 0 18px !important; } .single-product .summary > .yith-wcwl-add-to-wishlist { margin: 0 0 10px !important; } .single-product .product-share { margin-top: 20px !important; padding-top: 22px !important; } .single-product #reviews .woocommerce-Reviews-title, .single-product #reviews h2, .single-product #reply-title { font: 700 20px/1.25 var(--v2-display) !important; letter-spacing: -0.01em; color: var(--v2-ink); text-transform: none !important; } .single-product #review_form_wrapper, .single-product #review_form { background: var(--v2-tile) !important; border: 0 !important; border-radius: 12px !important; } .single-product #review_form { padding: 22px 24px !important; } .single-product #reviews .comment-form-rating .stars a { color: var(--v2-coral) !important; } /* Pills are used on every screen size, so Porto's mobile accordion headers are redundant */ .single-product .woocommerce-tabs .resp-accordion { display: none !important; } /* Equal-height product cards: button stays under the price, extra height becomes white space below it */ ul.products li.product .add-links-wrap { margin-top: 0 !important; } ul.products.owl-carousel .owl-stage { display: flex !important; } ul.products.owl-carousel .owl-item { display: flex !important; height: auto !important; } ul.products.owl-carousel .owl-item > li.product, ul.products.owl-carousel .owl-item > .product-col { width: 100%; display: flex; } ul.products li.product { display: flex; } ul.products li.product > .product-inner { width: 100%; } /* Product cards: Porto slides a wishlist + quick-view button in on hover; with the left-aligned button they get clipped — keep only "Dodaj u korpu" */ ul.products li.product .add-links .quickview, ul.products li.product .add-links .yith-wcwl-add-to-wishlist { display: none !important; } ul.products li.product .add-links { display: flex !important; justify-content: flex-start !important; padding: 0 !important; } ul.products li.product:hover .add-links .add_to_cart_button { transform: none !important; margin: 0 !important; } /* Pagination: perfectly centered numbers/arrows in round buttons */ .page-numbers a, .page-numbers span, ul.page-numbers li > a, ul.page-numbers li > span { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; padding: 0 !important; margin: 0 !important; line-height: 1 !important; text-indent: 0 !important; box-sizing: border-box; } .page-numbers a::before, .page-numbers a::after { position: static !important; margin: 0 !important; transform: none !important; line-height: 1 !important; } .page-numbers .prev, .page-numbers .next { font-size: 0 !important; } .page-numbers .prev::before, .page-numbers .next::before { font-size: 14px !important; } ul.page-numbers li > span.dots, .page-numbers span.dots { border: 0 !important; background: transparent !important; width: auto; min-width: 20px; color: var(--v2-soft) !important; } /* Mega menu: columns as wide as their content, compact gap, panel shrinks to fit (restored) */ #header .sif-nav .main-menu li.wide .popup { width: auto !important; max-width: calc(100vw - 64px); } #header .sif-nav .main-menu li.wide .popup > .inner { width: auto !important; padding: 24px 30px 22px !important; } #header .sif-nav .main-menu li.wide .porto-wide-sub-menu { width: auto !important; max-width: none !important; display: flex !important; flex-wrap: nowrap; gap: 40px; padding: 0 !important; } #header .sif-nav .main-menu li.wide .porto-wide-sub-menu > li.sub { width: auto !important; flex: 0 0 auto; padding: 0 !important; } #header .sif-nav .main-menu li.wide .porto-wide-sub-menu > li.sub > a { padding: 0 0 10px !important; white-space: nowrap; } #header .sif-nav .main-menu li.wide .porto-wide-sub-menu > li.sub ul.sub-menu { width: auto !important; padding: 0 !important; } #header .sif-nav .main-menu li.wide .porto-wide-sub-menu > li.sub li a { white-space: nowrap; padding: 4px 0 !important; margin-left: 0 !important; } /* Attribute filters (Veličina, Dužina rukava, Dužina nogavica) as pills */ .widget_layered_nav ul.woocommerce-widget-layered-nav-list { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0 !important; } .woocommerce .widget_layered_nav ul.woocommerce-widget-layered-nav-list li { margin: 0 !important; padding: 0 !important; float: none !important; border: 0 !important; } .woocommerce .widget_layered_nav ul.woocommerce-widget-layered-nav-list li a { display: inline-flex !important; align-items: center; justify-content: center; min-width: 42px; height: 38px; padding: 0 14px !important; border: 1px solid var(--v2-line) !important; border-radius: 999px !important; background: #fff !important; color: var(--v2-ink) !important; font: 500 14px/1 var(--v2-body) !important; text-transform: none !important; letter-spacing: 0 !important; transition: border-color .2s, background .2s, color .2s; } .woocommerce .widget_layered_nav ul.woocommerce-widget-layered-nav-list li a:hover { border-color: var(--v2-ink) !important; } .woocommerce .widget_layered_nav ul.woocommerce-widget-layered-nav-list li.chosen a { background: var(--v2-ink) !important; border-color: var(--v2-ink) !important; color: #fff !important; } .woocommerce .widget_layered_nav ul.woocommerce-widget-layered-nav-list li.chosen a::before { display: none !important; } .woocommerce .widget_layered_nav ul.woocommerce-widget-layered-nav-list li .count { display: none; } /* Price filter */ .widget_price_filter .price_slider_amount { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; } .widget_price_filter .price_slider_amount .button { order: 2; height: 38px !important; min-height: 38px; line-height: 36px !important; padding: 0 18px !important; font-size: 13px !important; } .widget_price_filter .price_label { order: 1; width: 100%; color: var(--v2-mute); } /* Category list with counts */ .widget_product_categories ul li .count, .widget_product_categories ul li .product-count { color: var(--v2-soft); font-size: 13px; } /* Content width = header width: 1320px column, 32px side padding (20px ≤900px). Bootstrap rows/cols add -10/+10px, so the visible content edge lands exactly on the header's edge. */ #main > .container, .page-top > .container, #footer .container, .sif-footer .container { width: 100%; max-width: 1320px; padding-left: 32px; padding-right: 32px; margin-left: auto; margin-right: auto; } .page-top > .container { padding-left: 32px !important; padding-right: 32px !important; } @media (max-width: 900px) { #main > .container, .page-top > .container, #footer .container, .sif-footer .container { padding-left: 20px; padding-right: 20px; } .page-top > .container { padding-left: 20px !important; padding-right: 20px !important; } } .sif-footer .wp-block-columns { margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================================== Inner landing pages (O nama, Kontakt, Politika kolačića) — same system as home v2 ========================================================================== */ .s2-page-hero { padding: 56px 0 64px; } .s2-page-hero h1 { font-size: clamp(34px, 4.4vw, 58px); } .s2-page-hero-text .s2-hero-text { max-width: 760px; } .s2-page-hero-text .s2-lede { margin-bottom: 0; } .s2-sec-tight-top { padding-top: 24px; } .s2-btn-outline { border-color: var(--s2-ink); color: var(--s2-ink) !important; } .s2-btn-outline:hover { background: var(--s2-ink); color: #fff !important; } .s2-photo { margin: 0; border-radius: var(--s2-r); overflow: hidden; min-height: 420px; } .s2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .s2-story p + p { margin-top: 0 !important; } /* Specialized offer: feature card + mini cards */ .s2-feature-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; } .s2-feature-sm { min-height: 460px; } .s2-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; } .s2-mini { display: grid; gap: 6px; background: #fff; border: 1px solid var(--s2-line); border-radius: var(--s2-r); padding: 22px 22px 24px; color: var(--s2-fg) !important; transition: border-color .2s, transform .2s; } .s2-mini:hover { border-color: var(--s2-fg); transform: translateY(-2px); } .s2-mini-title { font: 600 18px/1.2 var(--s2-display); letter-spacing: -0.01em; } .s2-mini-text { color: var(--s2-mute); font-size: 14px; } /* Testimonials */ .s2-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .s2-quote { margin: 0; background: #fff; border: 1px solid var(--s2-line); border-radius: var(--s2-r); padding: 24px 24px 22px; display: grid; gap: 12px; align-content: start; } .s2-quote .s2-stars { color: var(--s2-coral); letter-spacing: 2px; font-size: 14px; } .s2-quote blockquote { margin: 0; padding: 0; border: 0; font: 500 17px/1.5 var(--s2-body); color: var(--s2-fg); } .s2-quote figcaption { font: 500 12px var(--s2-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--s2-mute); } /* Contact */ .s2-contact-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; align-items: start; } .s2-form-card { padding: 32px 34px; } .s2-form-card h2 { font-size: 26px; margin-bottom: 8px !important; } .s2-form-card .s2-muted { margin: 0 0 22px !important; } .sif2 .wpcf7 label { display: block; font: 500 14px/1.4 var(--s2-body); color: var(--s2-fg); margin: 0 0 16px; } .sif2 .wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 6px; } .sif2 .wpcf7 input[type="text"], .sif2 .wpcf7 input[type="email"], .sif2 .wpcf7 input[type="tel"], .sif2 .wpcf7 select, .sif2 .wpcf7 textarea { width: 100%; background: var(--s2-bg) !important; } .sif2 .wpcf7 input:focus, .sif2 .wpcf7 select:focus, .sif2 .wpcf7 textarea:focus { background: #fff !important; } .s2-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .s2-form-check { font-size: 14px; color: var(--s2-mute); margin: 4px 0 20px; } .s2-form-check .wpcf7-list-item { margin: 0; } .s2-form-check label { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; color: var(--s2-mute) !important; } .s2-form-check input[type="checkbox"] { margin-top: 3px; accent-color: var(--s2-coral); } .s2-form-check a { color: var(--s2-plum); text-decoration: underline; } .sif2 .wpcf7 input.wpcf7-submit.s2-btn { background: var(--s2-coral) !important; border: 1px solid var(--s2-coral) !important; color: #fff !important; padding: 0 28px !important; min-height: 50px; height: 50px; font: 600 15px/1 var(--s2-display) !important; border-radius: 10px !important; cursor: pointer; } .sif2 .wpcf7 input.wpcf7-submit.s2-btn:hover { background: var(--s2-coral-deep) !important; border-color: var(--s2-coral-deep) !important; } .sif2 .wpcf7 .wpcf7-not-valid-tip { color: var(--s2-coral); font-size: 13px; margin-top: 4px; } .sif2 .wpcf7 form .wpcf7-response-output { margin: 18px 0 0; border-radius: 10px; padding: 12px 16px; font-size: 14px; } .s2-contact-side { display: grid; gap: 16px; } .s2-info-card { padding: 26px 28px; } .s2-info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .s2-info-list li { display: grid; gap: 4px; font-size: 16px; } .s2-info-list li .s2-mono { color: var(--s2-mute); font-size: 11px; } .s2-info-list a { color: var(--s2-fg) !important; font-weight: 600; } .s2-copyline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .s2-copyline button { font: 500 11px/1 var(--s2-mono); letter-spacing: .06em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--s2-line); background: #fff; color: var(--s2-plum); cursor: pointer; } .s2-copyline button:hover { border-color: var(--s2-plum); } .s2-social-row { display: flex; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--s2-line); } .s2-social-row a { font: 600 14px var(--s2-display); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--s2-line); color: var(--s2-fg) !important; } .s2-social-row a:hover { border-color: var(--s2-fg); } .s2-link-card { display: grid; gap: 6px; padding: 22px 26px; color: var(--s2-fg) !important; transition: border-color .2s; } .s2-link-card:hover { border-color: var(--s2-fg); } .s2-link-title { font: 600 18px/1.25 var(--s2-display); } .s2-link-card .s2-muted { margin: 0 !important; font-size: 14px; } /* Document pages (Politika kolačića) */ .s2-doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; } .s2-doc { padding: 36px 40px; font-size: 16px; line-height: 1.7; } .s2-doc h2 { font-size: 22px; margin: 30px 0 10px !important; } .s2-doc h2:first-child { margin-top: 0 !important; } .s2-doc p { color: var(--s2-fg); } .s2-doc-aside { padding: 24px 26px; display: grid; gap: 10px; position: sticky; top: 140px; } .s2-doc-aside a { font: 600 15px var(--s2-display); color: var(--s2-fg) !important; } .s2-doc-aside a:hover { color: var(--s2-plum) !important; } @media (max-width: 900px) { .s2-feature-row, .s2-contact-grid, .s2-doc-grid { grid-template-columns: 1fr; } .s2-quotes { grid-template-columns: 1fr 1fr; } .s2-photo { min-height: 280px; } .s2-doc-aside { position: static; } .s2-form-card { padding: 24px 22px; } .s2-doc { padding: 26px 22px; } } @media (max-width: 560px) { .s2-quotes, .s2-minis, .s2-form-row { grid-template-columns: 1fr; } } .sif2 .wpcf7 input.wpcf7-submit.s2-btn:disabled { opacity: .45; cursor: not-allowed; } /* Serbian capitals with diacritics (Š Ž Č Ć Đ) need more room above than line-height 1.08 gives */ .sif2 h1 { line-height: 1.16 !important; } .sif2 h2, .s2-sale h2, .s2-feature-title, .s2-cat-title { line-height: 1.18 !important; } .page-top .page-title, .single-product .product_title { line-height: 1.2 !important; } /* Top-level menu: hovering (or the active item) never changes the colour — only the underline appears */ #header .sif-nav .main-menu > li.menu-item > a, #header .sif-nav .main-menu > li.menu-item:hover > a, #header .sif-nav .main-menu > li.menu-item.active > a, #header .sif-nav .main-menu > li.menu-item.active:hover > a { color: var(--h-ink) !important; background: transparent !important; } #header .sif-nav .main-menu > li.menu-item:first-child > a, #header .sif-nav .main-menu > li.menu-item:first-child:hover > a, #header .sif-nav .main-menu > li.menu-item.active:first-child > a, #header .sif-nav .main-menu > li.menu-item.active:first-child:hover > a { color: var(--h-coral) !important; } /* Sort / per-page selects: normal case, never truncated on phones */ .woocommerce-ordering select, .woocommerce-viewing select { text-transform: none !important; font: 400 14px var(--v2-body) !important; letter-spacing: 0 !important; } @media (max-width: 575px) { .woocommerce-ordering { flex: 1 1 auto; } .woocommerce-ordering select { min-width: 0; width: 100% !important; max-width: none !important; } } @media (max-width: 575px) { .shop-loop-before { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 10px; } .shop-loop-before .woocommerce-ordering { flex: 1 1 0 !important; min-width: 0; margin: 0 !important; } .shop-loop-before .woocommerce-viewing { flex: 0 0 auto !important; margin: 0 !important; } .shop-loop-before .woocommerce-ordering label, .shop-loop-before .woocommerce-viewing label { display: none !important; } } @media (max-width: 575px) { .shop-loop-before { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } } /* Age confirmation checkbox (registration + checkout) */ .sif-age-confirm { margin: 6px 0 18px !important; font-size: 14px; line-height: 1.5; } .sif-age-confirm label { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; color: var(--v2-mute) !important; } .sif-age-confirm input[type='checkbox'] { margin-top: 3px; accent-color: var(--v2-coral); flex: 0 0 auto; } .sif-age-confirm a { color: var(--v2-plum); text-decoration: underline; } .sif-age-confirm .optional { display: none; } /* ========================================================================== Shop filters: mobile panel (Porto off-canvas sidebar), toolbar button, chosen-filter pills ========================================================================== */ .sif-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; } .sif-active-filters .widget { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } .sif-active-filters ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none; } .sif-active-filters ul li { margin: 0 !important; padding: 0 !important; float: none !important; } .sif-active-filters ul li a { display: inline-flex !important; align-items: center; gap: 8px; height: 36px; padding: 0 14px !important; border-radius: 999px; background: var(--v2-ink) !important; color: #fff !important; font: 500 13px/1 var(--v2-body) !important; text-decoration: none !important; } .sif-active-filters ul li a::before { display: none !important; } .sif-active-filters ul li a::after { content: '×'; font-size: 17px; line-height: 1; opacity: .8; } .sif-active-filters ul li a:hover { background: var(--v2-plum) !important; } .sif-clear-filters { font: 500 13px var(--v2-body); color: var(--v2-mute) !important; text-decoration: underline !important; text-underline-offset: 3px; padding: 0 6px; } /* Category list: back link + current category */ .widget_product_categories .sif-cat-back { margin-bottom: 8px !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--v2-line) !important; } .widget_product_categories .sif-cat-back a { color: var(--v2-mute) !important; font-weight: 500 !important; } .widget_product_categories li.current-cat > a { color: var(--v2-coral) !important; font-weight: 600 !important; } .sif-fp-head, .sif-fp-foot { display: none; } @media (max-width: 991px) { /* "Filteri" button in the toolbar, same height and shape as the sort select */ .shop-loop-before .porto-product-filters-toggle { display: inline-flex !important; align-items: center; gap: 8px; flex: 0 0 auto; height: 44px; padding: 0 16px !important; margin: 0 !important; background: #fff !important; border: 1px solid var(--v2-line-2) !important; border-radius: var(--v2-r-btn) !important; color: var(--v2-ink) !important; box-shadow: none !important; } .shop-loop-before .porto-product-filters-toggle span { font: 600 14px/1 var(--v2-body) !important; text-transform: none !important; letter-spacing: 0 !important; display: inline-flex; align-items: center; gap: 6px; } .shop-loop-before .porto-product-filters-toggle svg { width: 22px; height: 22px; } .shop-loop-before .porto-product-filters-toggle svg .cls-1, .shop-loop-before .porto-product-filters-toggle svg .cls-2 { stroke: var(--v2-ink) !important; } .sif-fcount { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--v2-coral); color: #fff; font: 600 11px/1 var(--v2-body); } .shop-loop-before .woocommerce-ordering select { height: 44px !important; } /* Off-canvas panel: header, scrolling filters, footer with actions; page doesn't slide along */ .mobile-sidebar.sidebar { width: min(380px, 88vw) !important; display: flex !important; flex-direction: column; padding: 0 !important; background: var(--v2-bg) !important; box-shadow: none !important; } .mobile-sidebar.sidebar > .sidebar-toggle { display: none !important; } .mobile-sidebar .sidebar-content { flex: 1 1 auto; height: auto !important; min-height: 0; overflow-y: auto !important; overflow-x: hidden !important; padding: 16px !important; } html.sidebar-opened .page-wrapper, html.sidebar-opened #header.sticky-header .header-main.sticky, .sidebar-opened .shop-loop-before.sticky { left: 0 !important; } .sidebar-overlay.active { background: rgba(22, 25, 30, .5) !important; opacity: 1 !important; } .sif-fp-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 14px 16px 14px 20px; background: #fff; border-bottom: 1px solid var(--v2-line); } .sif-fp-head span { font: 700 20px/1.2 var(--v2-display); color: var(--v2-ink); letter-spacing: -.01em; } .sif-fp-close { width: 40px; height: 40px; padding: 0 !important; border: 1px solid var(--v2-line-2) !important; border-radius: 50% !important; background: #fff !important; color: var(--v2-ink) !important; font: 400 24px/1 var(--v2-body) !important; cursor: pointer; } .sif-fp-foot { display: flex; flex: 0 0 auto; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--v2-line); } .sif-fp-clear { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 16px; border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-btn); background: #fff; color: var(--v2-ink) !important; font: 600 14px var(--v2-body); text-decoration: none !important; white-space: nowrap; } .sif-fp-show { flex: 1 1 auto; height: 48px; padding: 0 12px !important; border: 0 !important; border-radius: var(--v2-r-btn) !important; background: var(--v2-coral) !important; color: #fff !important; font: 600 15px var(--v2-body) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; } .sif-fp-show:hover { background: var(--v2-coral-deep) !important; } } /* Phones: toolbar = Filteri + sort only */ @media (max-width: 575px) { .shop-loop-before .woocommerce-viewing { display: none !important; } } .widget_product_categories .sif-cat-more button { padding: 6px 0 0 !important; border: 0 !important; background: none !important; color: var(--v2-plum) !important; font: 600 13px var(--v2-body) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* Let the widget − / + toggle hide the pill lists (their display: flex is !important) */ .widget_layered_nav ul.woocommerce-widget-layered-nav-list[style*="display: none"] { display: none !important; } @media (max-width: 991px) { /* Porto makes the toolbar fixed while scrolling; keep it just under our sticky header */ .shop-loop-before.sticky { top: var(--sif-tb-top, 0px) !important; z-index: 1001 !important; background: var(--v2-bg) !important; padding: 10px 20px !important; border-bottom: 1px solid var(--v2-line) !important; } } /* Tablet and down: toolbar items on one line, vertically centred, with a gap after "Filteri" */ @media (max-width: 991px) { .shop-loop-before { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px; } .shop-loop-before .woocommerce-ordering, .shop-loop-before .woocommerce-viewing { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; } .shop-loop-before .woocommerce-ordering label, .shop-loop-before .woocommerce-viewing label { margin: 0 !important; line-height: 1 !important; white-space: nowrap; } .shop-loop-before .woocommerce-pagination { display: flex !important; align-items: center; margin: 0 0 0 auto !important; padding: 0 !important; } .shop-loop-before .woocommerce-ordering select, .shop-loop-before .woocommerce-viewing select { height: 44px !important; margin: 0 !important; } } /* Phones: add-to-cart button spans the card and reads "U korpu" (screen readers keep the full aria-label) */ @media (max-width: 575px) { ul.products li.product .add-links-wrap, ul.products li.product .add-links { width: 100% !important; max-width: none !important; } ul.products li.product .add-links .add_to_cart_button { flex: 1 1 auto; width: 100% !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 0 10px !important; font-size: 0 !important; } ul.products li.product .add-links .add_to_cart_button::after { content: 'Dodaj u korpu'; font: 600 13px/1 var(--v2-body); letter-spacing: 0; text-transform: none; } ul.products li.product .add-links .add_to_cart_button.loading::after { content: 'Dodajem…'; } ul.products li.product .add-links .add_to_cart_button.added::after { content: 'U korpi'; } } /* ========================================================================== Client change list (Izmene 1, 6–9) ========================================================================== */ /* Izmena 1: bigger logo */ #header .sif-hrow .logo img { max-height: 76px !important; } @media (max-width: 991px) { #header .sif-hrow .logo img { max-height: 52px !important; } } /* Izmena 6: size line on product cards (name → price → size → button) */ .sif-loop-size { margin: 4px 0 0; font: 400 13px/1.4 var(--v2-body); color: var(--v2-mute); } .sif-loop-size strong { color: var(--v2-ink); font-weight: 600; } /* Izmena 7: trust block on the product page */ .sif-trust { margin: 18px 0 20px; } .sif-trust-last { display: inline-block; margin: 0 0 12px !important; padding: 8px 14px; border: 1px solid #f1c3bf; border-radius: var(--v2-r-btn); background: #fdf1f0; color: #b3261e; font: 600 14px/1.3 var(--v2-body); } .sif-trust ul, .sif-cart-trust ul, .sif-checkout-trust ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } .sif-trust li { margin: 0 0 6px !important; padding: 0 !important; font: 400 14px/1.45 var(--v2-body); color: var(--v2-fg); } .sif-trust li::before, .sif-cart-trust li::before, .sif-checkout-trust li::before { display: none !important; } /* Izmena 8: cart — old coupon row and "update cart" out; coupon box in the totals; trust box */ .woocommerce-cart-form .coupon, .woocommerce-cart-form button[name="update_cart"] { display: none !important; } .sif-coupon-row td { padding: 14px 0 !important; border: 0 !important; } .sif-coupon { padding: 16px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-btn); background: var(--v2-bg); } .sif-coupon-title { margin: 0 0 2px !important; font: 600 15px/1.3 var(--v2-display); color: var(--v2-ink); } .sif-coupon-hint { margin: 0 0 10px !important; font: 400 13px/1.4 var(--v2-body); color: var(--v2-mute); } .sif-coupon input.input-text { width: 100%; height: 42px; margin: 0 0 8px !important; background: #fff !important; } .sif-coupon .button { width: 100%; height: 42px; } .sif-cart-trust { margin-top: 16px; padding: 14px 16px; border-radius: var(--v2-r-btn); background: var(--v2-bg); font: 400 14px/1.5 var(--v2-body); color: var(--v2-fg); } .sif-cart-trust li { margin: 0 0 4px !important; padding: 0 !important; } .sif-reserve { margin: 10px 0 0 !important; padding-top: 10px; border-top: 1px solid var(--v2-line); font-weight: 600; color: var(--v2-ink); } [data-sif-reserve] { font-variant-numeric: tabular-nums; } /* Izmena 9: checkout — trust row + reservation countdown above the form */ .sif-checkout-trust { margin: 0 0 24px; } .sif-checkout-trust ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 12px !important; font: 400 14px/1.45 var(--v2-body); color: var(--v2-fg); } .sif-checkout-trust li { margin: 0 !important; padding: 0 !important; } .sif-reserve-box { padding: 14px 18px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-btn); background: #fff; } .sif-reserve-title { margin: 0 !important; font: 600 16px/1.35 var(--v2-display); color: var(--v2-ink); } .sif-reserve-text { margin: 2px 0 0 !important; font: 400 13px/1.45 var(--v2-body); color: var(--v2-mute); } .sif-coupon-row td, .sif-coupon { text-align: left !important; } .woocommerce-cart .cart_totals .woocommerce-shipping-destination { display: none !important; } /* Trust blocks (product page, cart, checkout): one-colour line icons in the site palette */ .sif-ico { flex: 0 0 auto; width: 18px; height: 18px; color: var(--v2-plum); } .sif-trust-list li { display: flex !important; align-items: flex-start; gap: 10px; margin: 0 0 6px !important; padding: 0 !important; font: 400 14px/1.45 var(--v2-body); color: var(--v2-mute); } .sif-trust-list li .sif-ico { margin-top: 1px; } .sif-trust-last { display: inline-flex !important; align-items: center; gap: 10px; margin: 0 0 14px !important; padding: 10px 16px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-btn); background: #fff; color: var(--v2-ink); font: 600 14px/1.35 var(--v2-body); } .sif-trust-last .sif-ico { color: var(--v2-coral); } .sif-cart-trust .sif-trust-list li { margin-bottom: 4px !important; } .sif-reserve, .sif-reserve-title { display: flex; align-items: center; gap: 10px; } .sif-reserve .sif-ico, .sif-reserve-title .sif-ico { color: var(--v2-coral); } .sif-reserve-text { padding-left: 28px; } .sif-checkout-trust .sif-trust-list { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 12px !important; } .sif-checkout-trust .sif-trust-list li { margin: 0 !important; align-items: center; } /* Cart recommendations (same gender + size) */ .sif-cart-recs { margin: 32px 0 8px; } .sif-cart-recs h3 { margin: 0 0 16px !important; font: 700 20px/1.25 var(--v2-display) !important; letter-spacing: -.01em; color: var(--v2-ink) !important; text-transform: none !important; } /* Cart recommendations as a slider: 4 / 3 / 2 cards, buttons stay visible (unlike the home carousels) */ .sif-cart-recs.sif-carousel { padding: 0; } .sif-cart-recs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; } .sif-cart-recs-head h3 { margin: 0 !important; } .sif-cart-recs .s2-arrows { flex: 0 0 auto; } .sif-cart-recs .s2-arrows button { width: 40px; height: 40px; padding: 0; border: 1px solid var(--v2-line-2); border-radius: 50%; background: #fff; color: var(--v2-ink); font-size: 17px; line-height: 1; cursor: pointer; } .sif-cart-recs .s2-arrows button:hover { border-color: var(--v2-ink); } .sif-cart-recs.sif-car-static .s2-arrows { display: none; } .sif-cart-recs.sif-carousel ul.products { gap: 16px; padding: 0 0 6px !important; scroll-padding-left: 0; } .sif-cart-recs.sif-carousel ul.products li.product { flex: 0 0 calc((100% - 3 * 16px) / 4) !important; } .sif-cart-recs.sif-carousel ul.products li.product .add-links-wrap, .sif-cart-recs.sif-carousel ul.products li.product .add-links { display: flex !important; } .sif-cart-recs.sif-carousel ul.products li.product .add-links-wrap { display: block !important; } @media (max-width: 991px) { .sif-cart-recs.sif-carousel ul.products { gap: 12px; } .sif-cart-recs.sif-carousel ul.products li.product { flex-basis: calc((100% - 2 * 12px) / 3) !important; } } @media (max-width: 575px) { .sif-cart-recs-head h3 { font-size: 17px !important; } .sif-cart-recs.sif-carousel ul.products li.product { flex-basis: calc((100% - 12px) / 2) !important; } } /* Narrow cards in the cart slider: full-width "U korpu" button at every screen size */ .sif-cart-recs ul.products li.product .add-links-wrap, .sif-cart-recs ul.products li.product .add-links { width: 100% !important; max-width: none !important; } .sif-cart-recs ul.products li.product .add-links .add_to_cart_button { flex: 1 1 auto; width: 100% !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 0 10px !important; font-size: 0 !important; } .sif-cart-recs ul.products li.product .add-links .add_to_cart_button::after { content: 'Dodaj u korpu'; font: 600 13px/1 var(--v2-body); letter-spacing: 0; text-transform: none; } .sif-cart-recs ul.products li.product .add-links .add_to_cart_button.loading::after { content: 'Dodajem…'; } .sif-cart-recs ul.products li.product .add-links .add_to_cart_button.added::after { content: 'U korpi'; } /* Cart totals on tablet and phone only (desktop unchanged): coupon field and button in one row; on tablet the totals box is a compact 520px column on the right */ @media (min-width: 360px) and (max-width: 991px) { .sif-coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; } .sif-coupon .sif-coupon-title, .sif-coupon .sif-coupon-hint { grid-column: 1 / -1; } .sif-coupon input.input-text { margin: 0 !important; } .sif-coupon .button { width: auto; padding: 0 18px !important; white-space: nowrap; } } @media (min-width: 576px) and (max-width: 991px) { .woocommerce-cart .cart_totals { max-width: 520px; margin-left: auto; } } /* "Dodaj u korpu" on narrow cards (phones, cart slider): no icon, tighter padding so the full text fits */ @media (max-width: 575px) { ul.products li.product .add-links .add_to_cart_button::before { display: none !important; } ul.products li.product .add-links .add_to_cart_button { padding: 0 6px !important; } ul.products li.product .add-links .add_to_cart_button::after { white-space: nowrap; } } .sif-cart-recs ul.products li.product .add-links .add_to_cart_button::before { display: none !important; } .sif-cart-recs ul.products li.product .add-links .add_to_cart_button { padding: 0 6px !important; } .sif-cart-recs ul.products li.product .add-links .add_to_cart_button::after { white-space: nowrap; } /* Phones: narrower card padding makes room for a smaller cart icon next to "Dodaj u korpu" */ @media (max-width: 575px) { ul.products li.product .product-content { padding-left: 10px !important; padding-right: 10px !important; } ul.products li.product .add-links .add_to_cart_button { gap: 3px; padding: 0 2px !important; } ul.products li.product .add-links .add_to_cart_button::before { display: inline-block !important; font-size: 12px !important; margin: 0 !important; line-height: 1 !important; } } /* Checkout: age checkbox lines up with the privacy text above it; label text flows as one paragraph */ .woocommerce-checkout .place-order .woocommerce-privacy-policy-text p, .woocommerce-checkout .place-order .sif-age-confirm { padding-left: 16px !important; padding-right: 16px !important; } .sif-age-confirm label { display: block !important; position: relative; padding-left: 28px !important; } .sif-age-confirm input[type='checkbox'] { position: absolute; left: 0; top: 3px; margin: 0 !important; } /* ========================================================================== Cookie consent banner (cookie-consent.php + sif.js) ========================================================================== */ .sif-cc { position: fixed; left: 20px; bottom: 20px; z-index: 100000; width: min(440px, calc(100vw - 40px)); } .sif-cc[hidden] { display: none !important; } .sif-cc-box { padding: 20px 22px; border: 1px solid var(--v2-line); border-radius: var(--v2-r); background: #fff; box-shadow: 0 12px 40px rgba(22, 25, 30, .16); font: 400 14px/1.5 var(--v2-body); color: var(--v2-fg); } .sif-cc-title { margin: 0 0 6px !important; font: 700 17px/1.3 var(--v2-display); color: var(--v2-ink); } .sif-cc-text { margin: 0 0 14px !important; font-size: 13.5px; color: var(--v2-mute); } .sif-cc-text a { color: var(--v2-plum) !important; text-decoration: underline; text-underline-offset: 2px; } .sif-cc-prefs { margin: 0 0 14px; border-top: 1px solid var(--v2-line); } .sif-cc-prefs[hidden] { display: none !important; } .sif-cc-opt { display: flex !important; gap: 10px; align-items: flex-start; margin: 0 !important; padding: 10px 0 !important; border-bottom: 1px solid var(--v2-line); font: 400 13px/1.45 var(--v2-body) !important; color: var(--v2-mute) !important; cursor: pointer; } .sif-cc-opt input { flex: 0 0 auto; margin: 2px 0 0 !important; accent-color: var(--v2-coral); width: 16px; height: 16px; } .sif-cc-opt strong { display: block; color: var(--v2-ink); font-weight: 600; } .sif-cc-actions { display: flex; flex-wrap: wrap; gap: 8px; } .sif-cc-btn { flex: 1 1 auto; min-height: 42px; padding: 0 14px !important; border-radius: var(--v2-r-btn) !important; font: 600 13.5px/1 var(--v2-body) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; } .sif-cc-btn[hidden] { display: none !important; } .sif-cc-btn-ghost { border: 1px solid var(--v2-line-2) !important; background: #fff !important; color: var(--v2-ink) !important; } .sif-cc-btn-ghost:hover { border-color: var(--v2-ink) !important; } .sif-cc-btn-primary { border: 1px solid var(--v2-coral) !important; background: var(--v2-coral) !important; color: #fff !important; } .sif-cc-btn-primary:hover { background: var(--v2-coral-deep) !important; border-color: var(--v2-coral-deep) !important; } @media (max-width: 575px) { .sif-cc { left: 0; right: 0; bottom: 0; width: 100%; } .sif-cc-box { border-radius: var(--v2-r) var(--v2-r) 0 0; border-width: 1px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); } .sif-cc-btn { flex-basis: calc(50% - 4px); } .sif-cc-btn-primary { flex-basis: 100%; order: -1; } } /* Tables in legal pages (Politika kolačića) */ .s2-table-wrap { overflow-x: auto; margin: 10px 0 22px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-btn); } .s2-table { width: 100%; border-collapse: collapse; font: 400 13.5px/1.45 var(--v2-body); color: var(--v2-fg); } .s2-table th { padding: 10px 12px; background: var(--v2-bg); text-align: left; font: 600 12px/1.3 var(--v2-body); color: var(--v2-ink); } .s2-table td { padding: 10px 12px; border-top: 1px solid var(--v2-line); vertical-align: top; } .s2-table td:first-child { width: 30%; } .s2-table code { font: 400 12px/1.4 var(--v2-mono); color: var(--v2-plum); background: none; padding: 0; word-break: break-word; } .s2-doc h3 { margin: 18px 0 4px !important; font: 600 16px/1.3 var(--v2-display) !important; color: var(--v2-ink) !important; } @media (max-width: 600px) { .s2-table-wrap { border: 0; overflow: visible; } .s2-table thead { display: none; } .s2-table, .s2-table tbody, .s2-table tr, .s2-table td { display: block; width: 100% !important; } .s2-table tr { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-btn); } .s2-table td { padding: 4px 0; border: 0; } .s2-table td::before { content: attr(data-label); display: block; font: 600 11px/1.4 var(--v2-body); color: var(--v2-soft); text-transform: uppercase; letter-spacing: .04em; } } /* Checkout: country is fixed to Serbia (hidden input) – hide its label row too */ .woocommerce-checkout .form-row.sif-hidden-row { display: none !important; } /* Thank-you page: coupon message (legacy-live.php) as a card */ .woocommerce-order h3.cuponmsg, h3.cuponmsg { margin: 18px 0 22px !important; padding: 16px 20px; border: 1px solid #f1c3bf; border-radius: var(--v2-r-btn); background: #fdf1f0; font: 600 16px/1.45 var(--v2-display) !important; color: var(--v2-ink) !important; } h3.cuponmsg strong { color: var(--v2-coral-deep); font-family: var(--v2-mono); letter-spacing: .04em; } h3.cuponmsg .cuponmsg-note { display: block; margin-top: 6px; font: 400 13px/1.45 var(--v2-body); color: var(--v2-mute); } /* Home hero facts: rows keep their own height, so the small texts start on one line */ .s2-facts li { align-content: start; } /* Thank-you page: order overview values (e.g. "Plaćanje pouzećem") with a tighter line-height */ .order-info .order-item mark { line-height: 1.3 !important; } /* Sold item label on product images: Porto's fixed 160×48 box cut "Nema na stanju" – size to the text instead */ ul.products .product-image .stock.out-of-stock { width: auto !important; height: auto !important; min-width: 0 !important; max-width: calc(100% - 24px); top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; margin: 0 !important; transform: translate(-50%, -50%); padding: 9px 16px !important; white-space: nowrap; border-radius: 999px; background: rgba(255, 255, 255, .94) !important; color: var(--v2-ink) !important; font: 600 12px/1.2 var(--v2-body) !important; letter-spacing: .06em !important; text-transform: uppercase; } ul.products .product-image .stock.out-of-stock::before { display: none !important; }