/* ========================================================= Tweety 2026 ========================================================= */ :root { --tw-pink: #ff6a88; --tw-pink-600: #f2456b; --tw-pink-200: #ffc2ce; --tw-pink-050: #fff2f5; --tw-butter: #ffd9a0; --tw-mint: #79cfc0; --tw-ink: #241d26; --tw-ink-600: #5d5563; --tw-ink-400: #8b8391; --tw-line: #ece7ea; --tw-bg: #fffaf8; --tw-white: #fff; --tw-radius: 18px; --tw-radius-sm: 12px; --tw-radius-pill: 999px; --tw-shadow: 0 2px 8px rgba(36, 29, 38, .05), 0 12px 32px rgba(36, 29, 38, .06); --tw-shadow-lg: 0 24px 60px rgba(242, 69, 107, .16); --tw-shell: 1360px; --tw-gap: 24px; --tw-header-h: 76px; --tw-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body.tw { margin: 0; overflow-x: clip; background: var(--tw-bg); color: var(--tw-ink); font-family: var(--tw-font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: var(--tw-pink-600); } h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; } h1 { font-size: clamp(30px, 4vw, 46px); } h2 { font-size: clamp(24px, 3vw, 34px); } h3 { font-size: 19px; } p { margin: 0 0 1em; } button { font: inherit; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .tw-skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--tw-ink); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--tw-radius-sm) 0; } .tw-skip:focus { left: 0; color: #fff; } .tw-shell { width: 100%; max-width: var(--tw-shell); margin: 0 auto; padding: 0 20px; } /* ---------- Buttons ---------- */ .tw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: var(--tw-radius-pill); border: 1.5px solid transparent; font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; text-align: center; } .tw-btn:hover { transform: translateY(-1px); color: inherit; } .tw-btn--primary { background: var(--tw-pink); color: #fff; box-shadow: 0 8px 22px rgba(255, 106, 136, .32); } .tw-btn--primary:hover { background: var(--tw-pink-600); color: #fff; box-shadow: 0 12px 28px rgba(242, 69, 107, .38); } .tw-btn--dark { background: var(--tw-ink); color: #fff; } .tw-btn--dark:hover { background: #0f0b11; color: #fff; } .tw-btn--ghost { background: var(--tw-white); border-color: var(--tw-line); color: var(--tw-ink); } .tw-btn--ghost:hover { border-color: var(--tw-pink); color: var(--tw-pink-600); } .tw-btn--ghost-light { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .7); color: #fff; } .tw-btn--ghost-light:hover { background: #fff; color: var(--tw-pink-600); } .tw-link { font-weight: 700; color: var(--tw-pink-600); white-space: nowrap; } .tw-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--tw-radius-pill); background: transparent; border: 0; cursor: pointer; color: var(--tw-ink); } .tw-iconbtn:hover { background: var(--tw-pink-050); color: var(--tw-pink-600); } .tw-chip { display: inline-block; padding: 4px 11px; border-radius: var(--tw-radius-pill); font-size: 12px; font-weight: 700; letter-spacing: .01em; vertical-align: middle; } .tw-chip--sale { background: var(--tw-pink-050); color: var(--tw-pink-600); } /* ---------- Header ---------- */ .tw-topbar { background: var(--tw-ink); color: #fff; font-size: 13px; } .tw-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; } .tw-topbar span { display: inline-flex; align-items: center; gap: 8px; } .tw-topbar .tw-i { opacity: .7; } .tw-topbar__right { gap: 18px; } .tw-topbar__menu { display: flex; gap: 16px; margin: 0; padding: 0 0 0 8px; list-style: none; border-left: 1px solid rgba(255,255,255,.18); } .tw-topbar__menu a { opacity: .85; } .tw-topbar__menu a:hover { opacity: 1; color: var(--tw-pink-200); } .tw-header { position: sticky; top: 0; z-index: 200; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--tw-line); } .tw-header.is-stuck { box-shadow: 0 6px 24px rgba(36, 29, 38, .07); } /* Pri skrolanju u sticky headeru ostaje samo red s logom i trazilicom. Koristimo display:none, a ne max-height: .tw-nav ne smije dobiti overflow:hidden jer bi odrezao mega izbornik koji iz njega ispada. Vrijedi samo iznad 860px - ispod toga je .tw-nav mobilna ladica. */ @media (min-width: 861px) { .tw-header.is-condensed .tw-nav { display: none; } } .tw-header__in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; min-height: var(--tw-header-h); } .tw-header__burger { display: none; } .tw-header__logo { display: flex; align-items: center; } .tw-header__logo img { width: 164px; height: 48px; object-fit: contain; object-position: left center; } .tw-logo__text { font-weight: 800; font-size: 22px; color: var(--tw-pink); } .tw-header__actions { display: flex; align-items: center; gap: 4px; } /* Na desktopu je tražilica uvijek vidljiva, pa ikona nema svrhu. */ .tw-header__searchbtn { display: none; } .tw-search { position: relative; max-width: 520px; width: 100%; justify-self: center; } .tw-search input[type="search"] { width: 100%; padding: 12px 48px 12px 18px; border-radius: var(--tw-radius-pill); border: 1.5px solid var(--tw-line); background: var(--tw-white); font: inherit; color: var(--tw-ink); /* Ispod 16px iOS Safari sam zumira stranicu kad se polje fokusira. */ font-size: 16px; transition: border-color .2s ease, box-shadow .2s ease; } .tw-search input[type="search"]:focus { outline: 0; border-color: var(--tw-pink-200); box-shadow: 0 0 0 4px var(--tw-pink-050); } .tw-search button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: var(--tw-radius-pill); background: var(--tw-pink); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .tw-search button:hover { background: var(--tw-pink-600); } .tw-cart__count { position: absolute; top: 4px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--tw-radius-pill); background: var(--tw-pink); color: #fff; font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; } /* Category nav */ .tw-nav { border-top: 1px solid var(--tw-line); background: var(--tw-white); } .tw-nav__in { position: relative; } .tw-nav__head { display: none; } .tw-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } .tw-nav__list::-webkit-scrollbar { display: none; } .tw-nav__item > a { display: block; padding: 14px 11px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: var(--tw-ink-600); } .tw-nav__item > a:hover { color: var(--tw-pink-600); } .tw-nav__item--sale > a { color: var(--tw-pink-600); } .tw-nav__toggle { display: none; } .tw-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--tw-white); border-top: 1px solid var(--tw-line); box-shadow: var(--tw-shadow); border-radius: 0 0 var(--tw-radius) var(--tw-radius); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .tw-nav__item.has-sub:hover .tw-mega, .tw-nav__item.has-sub:focus-within .tw-mega { opacity: 1; visibility: visible; transform: none; } .tw-mega__in { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; padding: 26px 20px 30px; align-items: start; } /* Linkovi: tezina prati stvarnu velicinu kategorije, bez izmisljenih grupa. */ .tw-mega__list { columns: 3; column-gap: 26px; margin: 0; padding: 0; list-style: none; } .tw-mega__list li { break-inside: avoid; } .tw-mega__list a { display: block; padding: 7px 10px; margin-left: -10px; border-radius: var(--tw-radius-sm); font-size: 14.5px; font-weight: 500; color: var(--tw-ink-600); } .tw-mega__list li.is-lead a { font-size: 16px; font-weight: 650; color: var(--tw-ink); } .tw-mega__list a:hover { background: var(--tw-pink-050); color: var(--tw-pink-600); } .tw-mega__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--tw-pink-600); transition: gap .15s ease; } .tw-mega__all:hover { gap: 11px; color: var(--tw-pink-600); } /* Kartice: stvarni proizvod iz kategorije, povucen uzivo iz zaliha. */ .tw-mega__rail { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .tw-mega__card { display: block; padding: 8px 8px 12px; color: var(--tw-ink); background: var(--tw-bg); border-radius: var(--tw-radius); transition: transform .18s ease, box-shadow .18s ease; } .tw-mega__card:hover { transform: translateY(-3px); box-shadow: var(--tw-shadow); color: var(--tw-ink); } .tw-mega__card-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--tw-radius-sm); background: var(--tw-white); } .tw-mega__card-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .tw-mega__card-eyebrow { display: block; margin: 10px 0 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tw-ink-400); } .tw-mega__card-title { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tw-mega__card-price { display: block; margin-top: 2px; font-size: 13px; color: var(--tw-ink-600); } .tw-mega__card-price del { margin-left: 6px; color: var(--tw-ink-400); font-size: 12px; text-decoration: line-through; } .tw-mega__card--sale { background: var(--tw-pink-050); } .tw-mega__card--sale .tw-mega__card-eyebrow { color: var(--tw-pink-600); } @media (prefers-reduced-motion: reduce) { .tw-mega__card, .tw-mega__all { transition: none; } .tw-mega__card:hover { transform: none; } } .tw-nav__backdrop { display: none; } /* ---------- Hero ---------- */ .tw-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(131deg, #ff6a88 0%, #ff99ac 100%); } .tw-hero::after { content: ""; position: absolute; inset: auto -10% -60% 40%; height: 70%; background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent); } .tw-hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 40px; padding: clamp(48px, 7vw, 92px) 20px; } .tw-hero__eyebrow { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: var(--tw-radius-pill); background: rgba(255, 255, 255, .2); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .tw-hero__title { font-size: clamp(38px, 6vw, 68px); margin-bottom: 18px; } .tw-hero__title span { color: var(--tw-butter); } .tw-hero__text { max-width: 46ch; font-size: clamp(16px, 1.4vw, 18px); opacity: .95; } .tw-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .tw-hero__art { position: relative; min-height: 380px; } .tw-hero__fig { margin: 0; position: absolute; overflow: hidden; border-radius: 22px; box-shadow: var(--tw-shadow-lg); } .tw-hero__fig img { width: 100%; height: 100%; object-fit: cover; } .tw-hero__fig--1 { width: 58%; aspect-ratio: 3/4; top: 0; left: 4%; transform: rotate(-3deg); z-index: 2; } .tw-hero__fig--2 { width: 44%; aspect-ratio: 1/1; bottom: 2%; right: 2%; transform: rotate(4deg); z-index: 3; } .tw-hero__fig--3 { width: 38%; aspect-ratio: 4/5; top: 8%; right: 6%; transform: rotate(6deg); z-index: 1; opacity: .95; } /* ---------- Sections ---------- */ .tw-section { padding: clamp(40px, 5vw, 68px) 0; } .tw-section--sale { background: var(--tw-pink-050); } .tw-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; } .tw-section__head h2 { margin: 0; } /* Category tiles */ .tw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--tw-gap); } .tw-tile { display: block; background: var(--tw-white); border-radius: var(--tw-radius); overflow: hidden; box-shadow: var(--tw-shadow); transition: transform .18s ease, box-shadow .2s ease; } .tw-tile:hover { transform: translateY(-4px); box-shadow: var(--tw-shadow-lg); } .tw-tile__media { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--tw-pink-050); } .tw-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .tw-tile:hover .tw-tile__media img { transform: scale(1.05); } .tw-tile__body { display: block; padding: 16px 18px 18px; } .tw-tile__body strong { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; } .tw-tile__body em { font-style: normal; font-size: 13px; color: var(--tw-ink-400); } /* ---------- Product grid ---------- */ .tw-grid { display: grid; gap: var(--tw-gap); } .tw-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tw-grid--posts { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .tw-card { position: relative; display: flex; flex-direction: column; background: var(--tw-white); border-radius: var(--tw-radius); overflow: hidden; box-shadow: var(--tw-shadow); transition: transform .18s ease, box-shadow .2s ease; } .tw-card:hover { transform: translateY(-4px); box-shadow: var(--tw-shadow-lg); } .tw-card__media { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; background: linear-gradient(160deg, var(--tw-pink-050), #fff); } .tw-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease, transform .5s ease; } .tw-card__img--hover { opacity: 0; } .tw-card:hover .tw-card__img--hover { opacity: 1; } .tw-card:hover .tw-card__img { transform: scale(1.04); } .tw-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--tw-pink-200); background: linear-gradient(160deg, var(--tw-pink-050), #fff); } .tw-ph svg { width: 42%; height: 42%; } .tw-card__badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .tw-badge { display: inline-block; padding: 5px 11px; border-radius: var(--tw-radius-pill); font-size: 12px; font-weight: 800; letter-spacing: .01em; color: #fff; background: var(--tw-ink); } .tw-badge--sale { background: var(--tw-pink); } .tw-badge--new { background: var(--tw-mint); } .tw-badge--out { background: var(--tw-ink-400); } .tw-card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; flex: 1; } .tw-card__cat { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tw-ink-400); } .tw-card__cat:hover { color: var(--tw-pink-600); } .tw-card__title { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; } .tw-card__price { font-size: 17px; font-weight: 800; color: var(--tw-ink); } .tw-card__price del { color: var(--tw-ink-400); font-weight: 500; font-size: 14px; margin-right: 6px; } .tw-card__price ins { text-decoration: none; color: var(--tw-pink-600); } .tw-card__price .woocommerce-Price-amount { white-space: nowrap; } .tw-card__sizes { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; } /* Velicine i boje su jedan par - drze se skupa i odvojeni su od cijene iznad i gumba ispod. Negativne margine skracuju flex gap na .tw-card__body. */ .tw-card .tw-card__sizes { margin-top: -4px; } .tw-card .twvar-swatches { margin-top: -4px; } .tw-card .tw-card__cta { margin-top: auto; padding-top: 10px; } .tw-card__sizes li { padding: 3px 8px; border: 1px solid var(--tw-line); border-radius: 7px; font-size: 11.5px; font-weight: 600; color: var(--tw-ink-600); } .tw-card__cta { margin-top: auto; padding-top: 10px; } .tw-card__cta .button, .tw-card__cta a.button, .tw-card__cta .added_to_cart { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 11px 16px; border: 1.5px solid var(--tw-line); border-radius: var(--tw-radius-pill); background: var(--tw-white); color: var(--tw-ink); font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .tw-card__cta .button:hover { background: var(--tw-pink); border-color: var(--tw-pink); color: #fff; } .tw-card__cta .added_to_cart { margin-top: 8px; background: var(--tw-pink-050); border-color: var(--tw-pink-200); color: var(--tw-pink-600); } .tw-card__cta .button.loading { opacity: .6; } /* ---------- Shop layout ---------- */ .tw-shop { display: block; padding: 28px 20px 60px; } .tw-shop--sidebar { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 34px; align-items: start; } .tw-shop__side { position: sticky; top: calc(var(--tw-header-h) + 16px); background: var(--tw-white); border-radius: var(--tw-radius); padding: 18px; box-shadow: var(--tw-shadow); max-height: calc(100vh - var(--tw-header-h) - 40px); overflow-y: auto; } .tw-shop__side-head { display: none; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 800; } .tw-widget + .tw-widget { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--tw-line); } .woof_container { margin-bottom: 16px; } .woof_container h4, .woof_sid_auto_shortcode h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--tw-ink-600); margin-bottom: 8px; } .woof_list, .woof_list li { list-style: none; margin: 0; padding: 0; } .woof_list li { padding: 3px 0; font-size: 14px; } .woof_childs_list_opener { color: var(--tw-ink-400); } .woof_price_search_container .price_slider_wrapper { margin: 10px 4px; } .woof_submit_search_form_container { margin-top: 12px; } .woof_reset_search_form, .woof_submit_search_form_container button { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: var(--tw-radius-pill); border: 1.5px solid var(--tw-line); background: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; } .tw-widget__title { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--tw-ink-600); } .tw-shop__main { min-width: 0; } .woocommerce-products-header { padding: 4px 0 10px; } .woocommerce-products-header__title { font-size: clamp(26px, 3vw, 36px); margin-bottom: 6px; } .term-description { color: var(--tw-ink-600); max-width: 70ch; } .tw-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 22px; background: var(--tw-white); border-radius: var(--tw-radius-sm); box-shadow: var(--tw-shadow); } .tw-toolbar__filters { display: none; padding: 9px 16px; font-size: 14px; } .tw-toolbar__count { color: var(--tw-ink-600); font-size: 14px; margin: 0; } .tw-toolbar .woocommerce-result-count { margin: 0; } .tw-toolbar__sort { margin-left: auto; } .tw-toolbar__sort form { margin: 0; } .tw-toolbar select, .woocommerce-ordering select { padding: 9px 14px; border-radius: var(--tw-radius-pill); border: 1.5px solid var(--tw-line); background: var(--tw-white); font: inherit; font-size: 14px; color: var(--tw-ink); cursor: pointer; } .woocommerce-pagination { margin: 36px 0 0; } .woocommerce-pagination ul, .tw-page .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; margin: 0; padding: 0; border: 0 !important; } .woocommerce-pagination li { border: 0 !important; } .woocommerce-pagination a, .woocommerce-pagination span, .tw-page .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: var(--tw-radius-pill); background: var(--tw-white); border: 1.5px solid var(--tw-line); font-weight: 700; font-size: 14px; } .woocommerce-pagination .current, .tw-page .nav-links .current { background: var(--tw-pink); border-color: var(--tw-pink); color: #fff; } /* ---------- Single product ---------- */ .single-product .tw-shop { padding-top: 22px; } .single-product div.product { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; align-items: start; } /* Sale badge ide preko galerije, ne u vlastitu kolonu. */ .single-product div.product > .onsale, .single-product div.product > .tw-badge { position: absolute; top: 14px; left: 14px; z-index: 5; width: auto; } /* Galerija lijevo, sažetak desno – bez obzira koji plugin renderira galeriju. */ .single-product div.product > .woocommerce-product-gallery, .single-product div.product > .woo-variation-gallery-wrapper, .single-product div.product > .twvar-gallery, .single-product div.product > .images { grid-column: 1; grid-row: 1; min-width: 0; max-width: 100%; } .single-product div.product > .summary, .single-product div.product > .entry-summary { grid-column: 2; grid-row: 1; min-width: 0; /* WooCommerce nametne width:48% i float:right iz starog float layouta. U gridu to samo stisne stupac na pola njegove sirine. !important jer njihov selektor (.woocommerce div.product div.summary) ima vecu specificnost i ponavlja se kroz vise media queryja. */ width: auto !important; float: none !important; max-width: none !important; } .single-product div.product > .woocommerce-tabs, .single-product div.product > .related, .single-product div.product > .up-sells, .single-product div.product > .upsells { grid-column: 1 / -1; grid-row: auto; } /* woo-variation-gallery: neka se ponaša kao normalan blok u gridu. */ .woo-variation-gallery-wrapper { width: 100% !important; max-width: 100% !important; float: none !important; } .woo-variation-gallery-container { width: 100% !important; } .woo-variation-gallery-wrapper img { border-radius: var(--tw-radius); } .wvg-gallery-image-placeholder img { border-radius: var(--tw-radius); opacity: .5; } .single-product div.product .woocommerce-product-gallery { position: sticky; top: calc(var(--tw-header-h) + 16px); } .single-product div.product .woocommerce-product-gallery img { border-radius: var(--tw-radius); } .single-product div.product .entry-summary { margin: 0; } .single-product .product_title { font-size: clamp(26px, 3vw, 38px); margin-bottom: 10px; } .tw-single__cat a { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tw-ink-400); } .single-product .price, .single-product .price .amount, .single-product .price .woocommerce-Price-amount { font-size: 28px; font-weight: 800; color: var(--tw-ink); margin: 0 0 4px; } .single-product .price ins .amount, .single-product .price ins .woocommerce-Price-amount { color: var(--tw-pink-600); } .single-product .price del .amount, .single-product .price del .woocommerce-Price-amount { color: var(--tw-ink-400); font-size: 20px; } .single-product .price del { color: var(--tw-ink-400); font-weight: 500; font-size: 20px; margin-right: 8px; } .single-product .price ins { text-decoration: none; color: var(--tw-pink-600); } /* WooCommerce svoju cijenu boja specifičnijim selektorom – nadjačavamo istom težinom. */ .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce div.product p.price .amount, .woocommerce div.product span.price .amount { color: var(--tw-ink); } .woocommerce div.product p.price ins, .woocommerce div.product span.price ins, .woocommerce div.product p.price ins .amount { color: var(--tw-pink-600); text-decoration: none; } .woocommerce div.product p.price del, .woocommerce div.product span.price del, .woocommerce div.product p.price del .amount { color: var(--tw-ink-400); font-size: 20px; font-weight: 500; } .woocommerce div.product .stock { color: #3f8f5a; font-weight: 600; font-size: 14px; } .woocommerce div.product .stock.out-of-stock { color: #c0392b; } .woocommerce ul.products li.product .price, .tw-card__price .amount { color: var(--tw-ink); } .tw-card__price ins .amount { color: var(--tw-pink-600); } .tw-card__price del .amount { color: var(--tw-ink-400); } .single-product .iworks-omnibus, .single-product .iworks_omnibus { font-size: 13px; color: var(--tw-ink-400); margin: 0 0 18px; } .single-product .woocommerce-product-details__short-description { color: var(--tw-ink-600); } .single-product .variations { width: 100%; margin-bottom: 12px; border-collapse: collapse; } .single-product .variations th, .single-product .variations td { padding: 6px 0; text-align: left; vertical-align: middle; } .single-product .variations label { font-weight: 700; font-size: 14px; } .single-product select { padding: 11px 14px; border-radius: var(--tw-radius-sm); border: 1.5px solid var(--tw-line); background: var(--tw-white); font: inherit; min-width: 180px; } .single-product .quantity input[type="number"] { width: 84px; padding: 13px 10px; text-align: center; border: 1.5px solid var(--tw-line); border-radius: var(--tw-radius-pill); font: inherit; font-weight: 700; } .single-product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 20px; } .single-product form.cart.variations_form { display: block; } .single-product form.cart .single_add_to_cart_button { flex: 1 1 220px; padding: 15px 28px; border: 0; border-radius: var(--tw-radius-pill); background: var(--tw-pink); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px rgba(255, 106, 136, .32); transition: background .2s ease, transform .15s ease; } .single-product form.cart .single_add_to_cart_button:hover { background: var(--tw-pink-600); transform: translateY(-1px); } .single-product .woocommerce-variation-add-to-cart { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .tw-single__usp { list-style: none; margin: 20px 0; padding: 16px 18px; border-radius: var(--tw-radius-sm); background: var(--tw-pink-050); } .tw-single__usp li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--tw-ink-600); } .tw-single__usp li + li { margin-top: 8px; } .tw-single__usp .tw-i { color: var(--tw-pink); flex: none; } .tw-acc { border-top: 1px solid var(--tw-line); } .tw-acc__item { border-bottom: 1px solid var(--tw-line); } .tw-acc__item summary { list-style: none; cursor: pointer; padding: 15px 0; font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; } .tw-acc__item summary::-webkit-details-marker { display: none; } .tw-acc__item summary::after { content: "+"; font-size: 20px; color: var(--tw-ink-400); font-weight: 400; } .tw-acc__item[open] summary::after { content: "–"; } .tw-acc__body { padding-bottom: 16px; color: var(--tw-ink-600); font-size: 14.5px; } .tw-acc__body a { color: var(--tw-pink-600); font-weight: 700; text-decoration: underline; } .woocommerce-tabs { grid-column: 1 / -1; margin-top: 20px; } .woocommerce-tabs ul.tabs { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0 0 18px; padding: 0; border-bottom: 1px solid var(--tw-line); } .woocommerce-tabs ul.tabs li { margin: 0; } .woocommerce-tabs ul.tabs a { display: block; padding: 12px 18px; font-weight: 700; font-size: 14.5px; color: var(--tw-ink-600); border-bottom: 2px solid transparent; } .woocommerce-tabs ul.tabs li.active a { color: var(--tw-pink-600); border-bottom-color: var(--tw-pink); } .woocommerce-tabs .panel { color: var(--tw-ink-600); max-width: 80ch; } .related.products, .upsells.products { grid-column: 1 / -1; margin-top: 46px; } .related.products > h2, .upsells.products > h2 { margin-bottom: 22px; } /* ---------- Cart / checkout / account ---------- */ .tw-woo .woocommerce { min-width: 0; } .woocommerce table.shop_table { width: 100%; border-collapse: collapse; background: var(--tw-white); border-radius: var(--tw-radius); overflow: hidden; box-shadow: var(--tw-shadow); border: 0; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--tw-line); text-align: left; } .woocommerce table.shop_table th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--tw-ink-600); } .woocommerce table.shop_table img { width: 62px; border-radius: 10px; } .woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border: 0; border-radius: var(--tw-radius-pill); background: var(--tw-ink); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; transition: background .2s ease, transform .15s ease; } .woocommerce .button:hover { background: #0f0b11; color: #fff; transform: translateY(-1px); } .woocommerce .button.alt, .woocommerce button.button.alt, .woocommerce #place_order { background: var(--tw-pink); box-shadow: 0 10px 24px rgba(255, 106, 136, .3); } .woocommerce .button.alt:hover, .woocommerce #place_order:hover { background: var(--tw-pink-600); } .woocommerce .cart_totals, .woocommerce-checkout-review-order, .woocommerce-order, .woocommerce-MyAccount-content { background: var(--tw-white); border-radius: var(--tw-radius); padding: 22px; box-shadow: var(--tw-shadow); } .woocommerce form .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .woocommerce form .form-row label { font-weight: 700; font-size: 14px; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row .select2-selection { padding: 12px 14px; border: 1.5px solid var(--tw-line); border-radius: var(--tw-radius-sm); background: var(--tw-white); font: inherit; width: 100%; } .woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; padding: 14px 18px; margin: 0 0 20px; border-radius: var(--tw-radius-sm); background: var(--tw-pink-050); border-left: 4px solid var(--tw-pink); font-size: 14.5px; } .woocommerce-error { background: #fff1f1; border-left-color: #e5484d; } /* ---------- USP strip + footer ---------- */ .tw-usp { background: var(--tw-white); border-top: 1px solid var(--tw-line); } .tw-usp__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 28px 20px; } .tw-usp__item { display: flex; align-items: center; gap: 12px; } .tw-usp__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: var(--tw-radius-pill); background: var(--tw-pink-050); color: var(--tw-pink); } .tw-usp__txt strong { display: block; font-size: 14.5px; font-weight: 800; } .tw-usp__txt em { font-style: normal; font-size: 13px; color: var(--tw-ink-400); } .tw-footer { background: var(--tw-ink); color: rgba(255, 255, 255, .74); padding: 52px 0 26px; } .tw-footer__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; } .tw-footer a { color: rgba(255, 255, 255, .74); } .tw-footer a:hover { color: #fff; } .tw-footer__brand img { width: 150px; height: 44px; object-fit: contain; object-position: left center; margin-bottom: 14px; filter: brightness(0) invert(1); opacity: .95; } .tw-footer__brand p { font-size: 14px; max-width: 34ch; } .tw-footer__addr { font-size: 14px; line-height: 1.8; } .tw-foot__title { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; } .tw-footer__col ul { list-style: none; margin: 0; padding: 0; font-size: 14.5px; } .tw-footer__col li + li { margin-top: 9px; } .tw-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: rgba(255, 255, 255, .5); } /* ---------- Store block ---------- */ .tw-store { padding: clamp(40px, 5vw, 70px) 0; } .tw-store__in { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; } .tw-store__copy p { color: var(--tw-ink-600); max-width: 52ch; } .tw-store__list { list-style: none; margin: 20px 0 26px; padding: 0; } .tw-store__list li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; } .tw-store__list li + li { margin-top: 10px; } .tw-store__list .tw-i { color: var(--tw-pink); } .tw-store__art img { border-radius: 24px; box-shadow: var(--tw-shadow-lg); aspect-ratio: 4/3; object-fit: cover; width: 100%; } /* ---------- Pages ---------- */ .tw-page { padding: 26px 20px 64px; } .tw-page--narrow { max-width: 860px; } .tw-page__head { margin-bottom: 26px; } .tw-page__meta { color: var(--tw-ink-400); font-size: 14px; } .tw-page__hero img { border-radius: var(--tw-radius); } .tw-prose { font-size: 16.5px; color: var(--tw-ink-600); } .tw-prose h2, .tw-prose h3 { color: var(--tw-ink); margin-top: 1.6em; } .tw-prose img { border-radius: var(--tw-radius); margin: 1.2em 0; } .tw-prose a { color: var(--tw-pink-600); text-decoration: underline; } .tw-legacy__img { margin: 1.2em 0; border-radius: var(--tw-radius); } .tw-empty { padding: 40px 0; color: var(--tw-ink-400); } .tw-404 { text-align: center; } .tw-404 .tw-search { margin: 0 auto 22px; } .tw-crumbs { font-size: 13px; color: var(--tw-ink-400); margin-bottom: 14px; } .tw-crumbs-wrap { padding-top: 18px; } .tw-crumbs-wrap .tw-crumbs { margin-bottom: 0; } .tw-crumbs a { color: var(--tw-ink-400); } .tw-crumbs a:hover { color: var(--tw-pink-600); } .tw-crumbs__sep { margin: 0 7px; opacity: .5; } .tw-post { background: var(--tw-white); border-radius: var(--tw-radius); overflow: hidden; box-shadow: var(--tw-shadow); } .tw-post__media { display: block; aspect-ratio: 16/10; position: relative; overflow: hidden; } .tw-post__media img { width: 100%; height: 100%; object-fit: cover; } .tw-post__body { padding: 16px 18px 20px; } .tw-post__body time { font-size: 12.5px; color: var(--tw-ink-400); } .tw-post__body h2 { font-size: 19px; margin: 6px 0 8px; } .tw-post__body p { font-size: 14.5px; color: var(--tw-ink-600); margin: 0; } /* ========================================================= WooCommerce stranice: košarica, blagajna, moj račun ========================================================= */ /* Ove stranice trebaju punu širinu, ne uski tekstualni stupac. */ .woocommerce-cart .tw-page--narrow, .woocommerce-checkout .tw-page--narrow, .woocommerce-account .tw-page--narrow, .woocommerce-order-received .tw-page--narrow { max-width: var(--tw-shell); } /* Obavijesti – WooCommerce ubacuje ikonu preko teksta, gasimo je. */ .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none !important; } .woocommerce-message, .woocommerce-info, .woocommerce-error { padding: 14px 18px; } .woocommerce-message a, .woocommerce-info a { color: var(--tw-pink-600); font-weight: 700; text-decoration: underline; } .woocommerce-message .button, .woocommerce-info .button { float: right; margin-left: 14px; padding: 8px 16px; font-size: 13.5px; } /* ---------- Košarica ---------- */ .woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .85fr); gap: 28px; align-items: start; } .woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-cart .woocommerce-cart-form { grid-column: 1; margin: 0; } .woocommerce-cart .cart-collaterals { grid-column: 2; width: 100%; position: sticky; top: calc(var(--tw-header-h) + 16px); } .woocommerce-cart .cart-collaterals .cross-sells { grid-column: 1 / -1; margin-top: 30px; } /* WooCommerce blok s iznosom drži na 48% i floata ga – u našem gridu treba punu širinu. */ .woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-cart .cart-collaterals .cross-sells, .woocommerce-cart .cart-collaterals .shipping_calculator { width: 100%; float: none; } .woocommerce-cart .cart_totals { padding: 22px; border-radius: var(--tw-radius); background: #fff; box-shadow: var(--tw-shadow); } .woocommerce table.cart { border-radius: var(--tw-radius); table-layout: fixed; } .woocommerce table.cart thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tw-ink-400); font-weight: 700; padding: 14px 16px; background: #fff; } .woocommerce table.cart td { padding: 18px 16px; vertical-align: middle; } .woocommerce table.cart th.product-remove, .woocommerce table.cart td.product-remove { width: 56px; text-align: center; padding-right: 0; } .woocommerce table.cart th.product-thumbnail, .woocommerce table.cart td.product-thumbnail { width: 104px; padding-right: 0; } .woocommerce table.cart th.product-price, .woocommerce table.cart td.product-price { width: 120px; } .woocommerce table.cart th.product-quantity, .woocommerce table.cart td.product-quantity { width: 110px; } .woocommerce table.cart th.product-subtotal, .woocommerce table.cart td.product-subtotal { width: 130px; } .woocommerce table.cart td.product-thumbnail img { width: 78px; height: 78px; object-fit: cover; border-radius: 12px; } .woocommerce table.cart td.product-name { font-weight: 700; } .woocommerce table.cart td.product-name a { color: var(--tw-ink); text-decoration: none; } .woocommerce table.cart td.product-name a:hover { color: var(--tw-pink-600); } .woocommerce table.cart td.product-name .variation { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: 13px; font-weight: 500; color: var(--tw-ink-400); } .woocommerce table.cart td.product-name .variation dt { font-weight: 600; } .woocommerce table.cart td.product-name .variation dd { margin: 0; } .woocommerce table.cart td.product-price, .woocommerce table.cart td.product-subtotal { white-space: nowrap; font-weight: 700; } .woocommerce table.cart td.product-subtotal { text-align: right; } .woocommerce table.cart th.product-subtotal { text-align: right; } .woocommerce table.cart .quantity input[type="number"] { width: 78px; padding: 10px; text-align: center; font-weight: 700; border: 1.5px solid var(--tw-line); border-radius: var(--tw-radius-pill); font-family: inherit; } .woocommerce a.remove { display: inline-flex !important; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tw-pink-050); color: var(--tw-pink-600) !important; font-size: 17px; line-height: 1; text-decoration: none; font-weight: 400; } .woocommerce a.remove:hover { background: var(--tw-pink); color: #fff !important; } .woocommerce table.cart td.actions { padding: 16px; background: #fdfbfc; border-top: 1px solid var(--tw-line); } .woocommerce table.cart td.actions::after { content: ""; display: table; clear: both; } .woocommerce table.cart td.actions .coupon { display: flex; gap: 8px; align-items: center; margin: 0; float: left; } .woocommerce table.cart td.actions .coupon input[type="text"] { width: 190px; padding: 12px 16px; border: 1.5px solid var(--tw-line); border-radius: var(--tw-radius-pill); font: inherit; font-size: 14px; } .woocommerce table.cart td.actions .coupon .button { background: var(--tw-ink); } .woocommerce table.cart td.actions > .button[name="update_cart"] { float: right; } .woocommerce .button:disabled, .woocommerce .button[disabled] { opacity: .45; cursor: not-allowed; } .woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading { font-size: 20px; margin: 0 0 16px; } /* Sifra se ponavlja: WooCommerce je ispisuje u product_meta, a nas QR blok odmah ispod. Ostavljamo samo kategoriju. */ .single-product .product_meta .sku_wrapper { display: none; } .single-product .product_meta { font-size: 13px; color: var(--tw-ink-400); } .single-product .product_meta a { color: var(--tw-ink-600); } .single-product .product_meta a:hover { color: var(--tw-pink-600); } .woocommerce .cart_totals table { border: 0; box-shadow: none; background: transparent; } /* Tablicu vadimo iz table layouta. Redak s dostavom je display:block, ali unutar prave tablice preglednik ga svrsta u stupcanu strukturu i naslijedi sirinu prvog stupca (~135px) umjesto pune. Kao blok + flex to nestaje. */ .woocommerce .cart_totals table, .woocommerce .cart_totals table tbody { display: block; width: 100%; } .woocommerce .cart_totals table tr { display: flex; width: 100%; gap: 14px; justify-content: space-between; align-items: baseline; } .woocommerce .cart_totals table tr th, .woocommerce .cart_totals table tr td { display: block; width: auto; } .woocommerce .cart_totals table th, .woocommerce .cart_totals table td { padding: 12px 0; border-bottom: 1px solid var(--tw-line); } .woocommerce .cart_totals table th { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--tw-ink-600); font-weight: 600; } .woocommerce .cart_totals table td { text-align: right; font-weight: 700; } .woocommerce .cart_totals tr.woocommerce-shipping-totals th, .woocommerce .cart_totals tr.woocommerce-shipping-totals td, .woocommerce-checkout #order_review tr.woocommerce-shipping-totals th, .woocommerce-checkout #order_review tr.woocommerce-shipping-totals td { display: block; width: 100%; text-align: left; border-bottom: 0; padding: 10px 0 0; } .woocommerce .cart_totals tr.woocommerce-shipping-totals, .woocommerce-checkout #order_review tr.woocommerce-shipping-totals { display: block; border-bottom: 1px solid var(--tw-line); padding-bottom: 10px; } /* Tablicu sazetka na blagajni vadimo iz table layouta, isto kao u kosarici. Redak dostave je display:block, ali unutar prave tablice ne dobiva punu sirinu - naslijedi stupcanu strukturu, pa je karta paketomata ostajala uza od kolone. */ .woocommerce-checkout .woocommerce-checkout-review-order-table, .woocommerce-checkout .woocommerce-checkout-review-order-table thead, .woocommerce-checkout .woocommerce-checkout-review-order-table tbody, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot { display: block; width: 100%; } .woocommerce-checkout .woocommerce-checkout-review-order-table tr { display: flex; width: 100%; gap: 14px; justify-content: space-between; align-items: baseline; /* Otkad su redci flex, obrub po celiji se crta isprekidano i udvojeno. Crta pripada retku, ne celijama. */ border-bottom: 1px solid var(--tw-line); } /* :last-child vrijedi unutar svake sekcije tablice, pa bi pojeo crtu i ispod zaglavlja i ispod zadnjeg artikla. Skidamo je samo na kraju. */ .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child { border-bottom: 0; } .woocommerce-checkout .woocommerce-checkout-review-order-table tr th, .woocommerce-checkout .woocommerce-checkout-review-order-table tr td { display: block; width: auto; border: 0; } .woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { display: block; } .woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { display: block; width: 100%; /* WooCommerce responzivnim tablicama nametne text-align:right !important, pa su natpisi dostave bili poravnati udesno i djelovali razbacano. */ text-align: left !important; padding-left: 16px !important; padding-right: 16px !important; } /* Popis dostava: kruzic i natpis u istom redu, karta ispod punom sirinom. */ .woocommerce-checkout #shipping_method, .woocommerce-checkout .woocommerce-shipping-methods { margin: 8px 0 0; } .woocommerce-checkout #shipping_method li, .woocommerce-checkout .woocommerce-shipping-methods li { align-items: flex-start; gap: 10px; padding: 9px 0; text-align: left; border-bottom: 1px solid var(--tw-line); } .woocommerce-checkout #shipping_method li:last-child, .woocommerce-checkout .woocommerce-shipping-methods li:last-child { border-bottom: 0; } .woocommerce-checkout #shipping_method li label, .woocommerce-checkout .woocommerce-shipping-methods li label { text-align: left; line-height: 1.4; font-weight: 600; } #shipping_method { list-style: none; margin: 6px 0 0; padding: 0; } #shipping_method li, .woocommerce-shipping-methods li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 14px; flex-wrap: wrap; } /* BOX NOW ubaci kartu paketomata kao susjeda natpisu, pa se oboje stisne na pola retka. Karta mora u svoj red i punom sirinom. */ #shipping_method li > div, .woocommerce-shipping-methods li > div { flex: 0 0 100%; width: 100%; max-width: 100%; margin-top: 10px; } #shipping_method li > label, .woocommerce-shipping-methods li > label { flex: 1 1 auto; min-width: 0; } #shipping_method li > div > div, .woocommerce-shipping-methods li > div > div { max-width: 100%; } /* BOX NOW okviru je ugradeno height:70% spremnika, sto ispadne oko 500px i premalo je za biranje paketomata. !important jer je vrijednost inline. */ #shipping_method li iframe, .woocommerce-shipping-methods li iframe { max-width: 100%; height: 660px !important; min-height: 660px; } #shipping_method li input { margin-top: 3px; flex: none; } #shipping_method li label { font-weight: 600; color: var(--tw-ink); } #shipping_method li .amount { font-weight: 800; } .woocommerce-shipping-destination { margin: 8px 0 0; font-size: 13px; color: var(--tw-ink-400); } .woocommerce .cart_totals .order-total th, .woocommerce .cart_totals .order-total td { border-bottom: 0; font-size: 19px; color: var(--tw-ink); } .woocommerce .cart_totals .order-total td .amount { color: var(--tw-pink-600); } .woocommerce .wc-proceed-to-checkout { margin-top: 18px; padding: 0; } .woocommerce .wc-proceed-to-checkout .checkout-button { display: flex; width: 100%; padding: 16px 24px; font-size: 16px; } .woocommerce .cart_totals .shipping-calculator-button { color: var(--tw-pink-600); font-size: 13.5px; } .cart-empty { font-size: 18px; } .woocommerce .return-to-shop { margin-top: 18px; } /* ---------- Blagajna ---------- */ .woocommerce-checkout form.checkout { display: grid; /* Desna kolona nosi karte paketomata (BOX NOW), pa joj treba vise mjesta nego obicnom sazetku narudzbe. */ grid-template-columns: minmax(0, 1fr) minmax(440px, .95fr); grid-template-areas: "customer review"; gap: 34px; align-items: start; } .woocommerce-checkout form.checkout #customer_details { grid-area: customer; } .woocommerce-checkout form.checkout #order_review_heading, .woocommerce-checkout form.checkout #order_review { grid-area: review; } .woocommerce-checkout form.checkout #order_review_heading { align-self: start; } .woocommerce-checkout form.checkout #order_review { position: sticky; top: calc(var(--tw-header-h) + 16px); margin-top: 44px; } /* Podaci za naplatu i dostavu idu jedno ispod drugog, ne u dva uska stupca. */ .woocommerce-checkout #customer_details, .woocommerce-checkout #customer_details > .col-1, .woocommerce-checkout #customer_details > .col-2 { width: 100%; float: none; margin: 0; } .woocommerce-checkout #customer_details > .col-2 { margin-top: 26px; } .woocommerce-checkout #customer_details::after { content: ""; display: table; clear: both; } .woocommerce-checkout h3 { font-size: 20px; margin-bottom: 14px; } .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: calc(50% - 7px); float: left; } .woocommerce-checkout .form-row-last { float: right; } .woocommerce-checkout .form-row::after { content: ""; display: table; clear: both; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { overflow: hidden; } .woocommerce-checkout #order_review table.shop_table { box-shadow: none; border: 1px solid var(--tw-line); } .woocommerce-checkout #order_review table.shop_table td, .woocommerce-checkout #order_review table.shop_table th { padding: 14px 16px; border: 0; } .woocommerce-checkout #order_review table.shop_table tfoot th { font-size: 14px; text-transform: none; letter-spacing: 0; } .woocommerce-checkout #order_review table.shop_table tfoot td { text-align: right; font-weight: 700; } .woocommerce-checkout #order_review .order-total td .amount { color: var(--tw-pink-600); font-size: 19px; } .woocommerce-checkout #payment { background: transparent; border-radius: 0; margin-top: 18px; } .woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 16px; padding: 0; border: 0; } .woocommerce-checkout #payment ul.payment_methods li { padding: 14px 16px; margin-bottom: 10px; border: 1.5px solid var(--tw-line); border-radius: var(--tw-radius-sm); background: #fff; } .woocommerce-checkout #payment ul.payment_methods li label { font-weight: 700; cursor: pointer; } .woocommerce-checkout #payment .payment_box { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--tw-pink-050); font-size: 13.5px; color: var(--tw-ink-600); } .woocommerce-checkout #payment .payment_box::before { display: none; } .woocommerce-checkout #payment .form-row.place-order { margin: 0; padding: 0; } .woocommerce-checkout #place_order { width: 100%; padding: 16px 24px; font-size: 16px; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; font-size: 13.5px; } /* ---------- Moj račun ---------- */ .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; border-radius: var(--tw-radius-sm); font-weight: 600; font-size: 14.5px; color: var(--tw-ink-600); } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--tw-pink-050); color: var(--tw-pink-600); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--tw-ink); color: #fff; } .woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) { max-width: 460px; } /* ---------- Narudžba zaprimljena ---------- */ .woocommerce-order .woocommerce-thankyou-order-received { font-size: 20px; font-weight: 800; color: var(--tw-ink); } .woocommerce-order ul.order_details { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 18px 0; padding: 16px; border-radius: var(--tw-radius-sm); background: var(--tw-pink-050); } .woocommerce-order ul.order_details li { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tw-ink-400); } .woocommerce-order ul.order_details li strong { display: block; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--tw-ink); } /* ---------- Filteri (WOOF) aktivni odabir iznad grida ---------- */ /* Plugin gura z-index:99 na ovaj panel, pa probija sticky header i mega izbornik. */ .woof_products_top_panel { position: relative; z-index: auto; overflow: visible; line-height: normal; margin: 0 0 16px; padding: 0; } .woof_products_top_panel_ul { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; padding: 0; list-style: none; } .woof_products_top_panel_ul > li { display: inline-flex; align-items: center; margin: 0; padding: 0; list-style: none; } /* Aktivni filter — roza pill s ✕ */ .woof_products_top_panel_ul > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--tw-radius-pill); background: var(--tw-pink-050); border: 1px solid transparent; color: var(--tw-pink-600); font-size: 13px; font-weight: 600; line-height: 1.4; transition: background .15s ease, border-color .15s ease; } .woof_products_top_panel_ul > li > a:hover { background: var(--tw-white); border-color: var(--tw-pink-200); color: var(--tw-pink-600); } .woof_products_top_panel .woof_remove_ppi { display: inline-flex; align-items: center; gap: 6px; background: none; padding: 0; color: inherit; font-size: inherit; } .woof_products_top_panel .woof_remove_ppi::after { content: "\00d7"; font-size: 15px; line-height: 1; font-weight: 700; opacity: .5; } .woof_products_top_panel_ul > li > a:hover .woof_remove_ppi::after { opacity: 1; } /* "Clear All" — tamni pill, gasi default izgled