/* ===================================================================== CCS Theme - woocommerce.css Katalog, kartica proizvoda, stranica proizvoda, kosarica (brief 6.7-6.9). Nasljeduje tokene iz theme.json i base.css. ===================================================================== */ /* --- Katalog: grid 4 / 2 / 2 (brief 6.8) ---------------------------- */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ccs-gap); margin: 0; padding: 0; list-style: none; } /* Broj kolona prati Woo klasu columns-N: katalog je 3 (loop_shop_columns), a sekcije naslovnice traze 4 kroz [products columns="4"]. */ .woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1024px) { .woocommerce ul.products, .woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .woocommerce ul.products, .woocommerce ul.products[class*="columns-"] { grid-template-columns: minmax(0, 1fr); } } .woocommerce ul.products::before, .woocommerce ul.products::after { content: none; } /* Woo daje kartici postotnu sirinu preko selektora s "columns-N" (npr. 30.75%) - unutar grid celije to je 30% od celije, pa kartica ispadne ~91px. Override mora nositi isti [class*="columns-"] uzorak. */ .woocommerce ul.products li.product, .woocommerce ul.products[class*="columns-"] li.product { inline-size: auto; width: auto; margin: 0; float: none; clear: none; display: flex; flex-direction: column; gap: 0.5rem; /* Woo u karticu ubacuje .screen-reader-text s position:absolute. Bez pozicioniranog roditelja njegov containing block je stranica, pa ga overflow carousela ne odsijeca - kartice izvan vidnog polja tada rastezu i cijela stranica dobije horizontalni scroll. */ position: relative; } /* --- Kartica proizvoda ---------------------------------------------- Slika zivi u .ccs-card-media okviru (inc/woocommerce.php) — zaobljeni crop u radijusu kartice, spori zoom i zlatni unutarnji okvir na hover. Isti jezik kao hero/kategorije: sand podloga, zlatni detalj, mek ease. */ .ccs-card-media { position: relative; overflow: hidden; border-radius: var(--ccs-r-card, 18px); background: var(--wp--preset--color--sand, #e8ddd0); margin-block-end: 0.75rem; } .woocommerce ul.products li.product .ccs-card-media img { display: block; aspect-ratio: 1 / 1; object-fit: cover; margin: 0; border-radius: 0; transition: transform 0.5s var(--ccs-ease), filter 0.5s var(--ccs-ease); } /* zlatni unutarnji okvir — pojavi se na hover, isti potez kao medalje/savovi */ .ccs-card-media::after { content: ""; position: absolute; inset: 10px; border: 1px solid transparent; border-radius: calc(var(--ccs-r-card, 18px) - 8px); pointer-events: none; transition: border-color 0.3s var(--ccs-ease); } .woocommerce ul.products li.product:hover .ccs-card-media img { transform: scale(1.05); filter: brightness(0.95); } .woocommerce ul.products li.product:hover .ccs-card-media::after { border-color: rgba(209, 170, 103, 0.55); } /* fallback za kartice bez okvira (npr. povezani proizvodi starog markupa) */ .woocommerce ul.products li.product > a > img { aspect-ratio: 1 / 1; object-fit: cover; margin: 0 0 0.75rem; border-radius: var(--ccs-r-card, 18px); background: var(--wp--preset--color--sand, #e8ddd0); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--sm, 0.9375rem); font-weight: 500; line-height: 1.4; padding: 0; margin: 0; transition: color var(--ccs-dur) var(--ccs-ease); } /* kartica se ne podcrtava na hover - boja i zoom slike su dovoljan signal, podcrta lomi mirnu tipografiju grida */ .woocommerce ul.products li.product a, .woocommerce ul.products li.product a:hover, .woocommerce ul.products li.product a:focus { text-decoration: none; } .woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--ccs-copper-ink, #956f2d); } .woocommerce ul.products li.product .price { color: var(--wp--preset--color--cacao, #2a1a12); font-size: var(--wp--preset--font-size--sm, 0.9375rem); font-weight: 600; margin: 0; } .woocommerce ul.products li.product .price del { color: var(--wp--preset--color--muted, #7a6b60); font-weight: 400; margin-inline-end: 0.4em; } /* Okus-tag kao eyebrow - bakar, uppercase, tihi potpis (brief 6.6 t.4) */ .ccs-flavour-tag { font-size: 0.72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ccs-copper-ink, #956f2d); } .woocommerce ul.products li.product .button { margin-block-start: auto; align-self: start; padding: 0.65rem 1.4rem; font-size: var(--wp--preset--font-size--xs, 0.8125rem); } /* na uredajima s misem gumb uklizuje tek na hover kartice - prostor mu je rezerviran (opacity, ne display) pa grid ne skace; fokus tipkovnice ga uvijek prikaze. Na touch uredajima je stalno vidljiv. */ @media (hover: hover) and (pointer: fine) { .woocommerce ul.products li.product .button { opacity: 0; transform: translateY(6px); transition: opacity .22s var(--ccs-ease, ease), transform .22s var(--ccs-ease, ease), background-color .18s var(--ccs-ease, ease); } .woocommerce ul.products li.product:hover .button, .woocommerce ul.products li.product:focus-within .button { opacity: 1; transform: none; } } /* hover fallback za kartice bez okvira */ .woocommerce ul.products li.product:hover > a > img { filter: brightness(0.94); } /* badge unutar .ccs-card-media okvira */ .woocommerce span.onsale { position: absolute; z-index: 1; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; background: var(--wp--preset--color--copper, #956f2d); color: var(--wp--preset--color--cream, #faf6f0); border-radius: var(--ccs-r-btn); padding: 0.2rem 0.6rem; font-size: var(--wp--preset--font-size--xs, 0.8125rem); font-weight: 600; min-block-size: 0; min-inline-size: 0; line-height: 1.6; } /* --- Mini-kosarica u ladici ------------------------------------------ Ladica nije unutar .woocommerce wrappera pa je Woo stilovi ne diraju; bez ovoga lista ima bullete, a slicica se razvuce preko cijele sirine. */ .ccs-drawer ul.cart_list { list-style: none; margin: 0; padding: 0; } .ccs-drawer li.mini_cart_item { position: relative; padding-block: 0.9rem; padding-inline-end: 1.9rem; border-block-end: var(--ccs-line); } /* Slika je UNUTAR linka proizvoda i Woo je floata udesno - ovdje link postaje grid pa slika stoji lijevo, naziv desno od nje. */ .ccs-drawer li.mini_cart_item > a:not(.remove) { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0.85rem; align-items: center; color: var(--wp--preset--color--cacao, #2a1a12); font-size: 0.9375rem; font-weight: 500; line-height: 1.35; text-decoration: none; } .ccs-drawer li.mini_cart_item img { float: none; margin: 0; inline-size: 64px; block-size: 64px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: var(--wp--preset--color--sand, #e8ddd0); } /* cijena i kolicina poravnate s nazivom, ne sa slikom */ .ccs-drawer li.mini_cart_item .quantity { display: block; margin-block-start: 0.35rem; margin-inline-start: calc(64px + 0.85rem); font-size: 0.8125rem; color: var(--wp--preset--color--muted, #7a6b60); } .ccs-drawer li.mini_cart_item a.remove { position: absolute; inset-block-start: 0.9rem; inset-inline-end: 0; inline-size: 1.5rem; block-size: 1.5rem; line-height: 1.4rem; text-align: center; font-size: 1.15rem; color: var(--wp--preset--color--muted, #7a6b60); border: var(--ccs-line); border-radius: 50%; text-decoration: none; } .ccs-drawer li.mini_cart_item a.remove:hover { color: var(--wp--preset--color--cream, #faf6f0); background: var(--wp--preset--color--red, #af1116); border-color: var(--wp--preset--color--red, #af1116); } .ccs-drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding-block: 1rem 0.5rem; font-weight: 600; } .ccs-drawer .woocommerce-mini-cart__buttons { display: grid; gap: 0.6rem; margin: 0; } .ccs-drawer .woocommerce-mini-cart__buttons a.button { text-align: center; margin: 0; } .ccs-drawer .woocommerce-mini-cart__empty-message { text-align: center; color: var(--wp--preset--color--muted, #7a6b60); padding-block: 2rem; } /* --- Aktivni filteri (pilule iznad grida) ---------------------------- */ .ccs-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-end: var(--wp--preset--spacing--30, 1.5rem); } .ccs-active-filters__label { font-size: var(--wp--preset--font-size--xs, 0.8125rem); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted, #7a6b60); } .ccs-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.85rem; border-radius: var(--ccs-r-btn); background: var(--wp--preset--color--cacao, #2a1a12); color: var(--wp--preset--color--cream, #faf6f0) !important; font-size: var(--wp--preset--font-size--xs, 0.8125rem); font-weight: 600; text-decoration: none; transition: background-color 0.15s var(--ccs-ease, ease); } .ccs-chip:hover { background: var(--wp--preset--color--red, #af1116); text-decoration: none; } .ccs-chip__x { font-size: 1.05em; line-height: 1; opacity: 0.75; } .ccs-active-filters__reset { font-size: var(--wp--preset--font-size--xs, 0.8125rem); color: var(--ccs-copper-ink, #956f2d); text-decoration: underline; text-underline-offset: 3px; } /* --- Alatna traka kataloga: broj rezultata i sortiranje -------------- */ .woocommerce .woocommerce-result-count { font-size: var(--wp--preset--font-size--sm, 0.9375rem); color: var(--wp--preset--color--muted, #7a6b60); margin-block-end: var(--wp--preset--spacing--30, 1.5rem); } .woocommerce .woocommerce-ordering { margin-block-end: var(--wp--preset--spacing--30, 1.5rem); } .woocommerce .woocommerce-ordering select { font: inherit; font-size: var(--wp--preset--font-size--sm, 0.9375rem); color: var(--wp--preset--color--cacao, #2a1a12); background-color: var(--wp--preset--color--paper, #fff); border: var(--ccs-line); border-radius: var(--ccs-r-btn); padding: 0.5rem 2.4rem 0.5rem 1rem; cursor: pointer; } /* --- Select: brendirani chevron + opcije u bojama teme --------------- appearance:none mice OS strelicu; zamjenjuje je kakao SVG chevron. Vrijedi za sortiranje, polja blagajne i varijacije proizvoda. */ .woocommerce .woocommerce-ordering select, .woocommerce form .form-row select, .woocommerce div.product form.cart .variations select { appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 14px; padding-inline-end: 2.4rem; } /* varijacije na stranici proizvoda dosad nisu imale nista svoje */ .woocommerce div.product form.cart .variations select { font: inherit; font-size: var(--wp--preset--font-size--sm, 0.9375rem); color: var(--wp--preset--color--cacao, #2a1a12); background-color: var(--wp--preset--color--paper, #fff); border: var(--ccs-line); border-radius: 10px; padding: 0.6rem 2.4rem 0.6rem 1rem; cursor: pointer; } /* lista opcija: papir + kakao; odabrana kakao s krem tekstom. (hover highlight ostaje OS-ov - native select ne da vise od ovoga) */ .woocommerce select option { background: var(--wp--preset--color--paper, #fff); color: var(--wp--preset--color--cacao, #2a1a12); padding: 0.4rem 0.8rem; } .woocommerce select option:checked { background: linear-gradient(var(--wp--preset--color--cacao, #2a1a12), var(--wp--preset--color--cacao, #2a1a12)); color: var(--wp--preset--color--cream, #faf6f0); } /* --- Paginacija kataloga --------------------------------------------- */ .woocommerce nav.woocommerce-pagination { text-align: center; margin-block-start: var(--wp--preset--spacing--40, 2.5rem); } .woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: 0.4rem; border: none; margin: 0; padding: 0; list-style: none; } .woocommerce nav.woocommerce-pagination ul li { border: none; float: none; overflow: visible; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: grid; place-items: center; min-inline-size: 2.5rem; min-block-size: 2.5rem; padding: 0 0.6rem; font-size: var(--wp--preset--font-size--sm, 0.9375rem); font-weight: 500; line-height: 1; color: var(--wp--preset--color--cacao, #2a1a12); background: transparent; border: var(--ccs-line); border-radius: var(--ccs-r-btn); } .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--wp--preset--color--sand, #e8ddd0); color: var(--wp--preset--color--cacao, #2a1a12); } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--wp--preset--color--cacao, #2a1a12); color: var(--wp--preset--color--cream, #faf6f0); border-color: var(--wp--preset--color--cacao, #2a1a12); } /* --- "Ucitaj jos" (nadogradnja paginacije, main.js) ------------------- */ .ccs-load-more { text-align: center; margin-block-start: var(--wp--preset--spacing--40, 2.5rem); min-block-size: 2.5rem; } .ccs-load-more__status { margin: 0 0 0.75rem; font-size: var(--wp--preset--font-size--xs, 0.8125rem); color: var(--wp--preset--color--muted, #7a6b60); } .ccs-load-more__status:empty { margin: 0; } .woocommerce .ccs-load-more .ccs-load-more__btn { padding-inline: 2.5rem; } .woocommerce nav.woocommerce-pagination.is-js-hidden { display: none; } /* --- Carousel povezanih proizvoda (4+ komada) ------------------------- Vodoravni klizac sa scroll-snapom; strelice dodaje main.js. Bez JS-a se i dalje moze skrolati prstom/trackpadom. */ .woocommerce div.product .related.ccs-carousel ul.products { display: grid; grid-auto-flow: column; /* FIKSNA sirina trake: minmax(0, x) bi dopustio stiskanje pa bi svi proizvodi stali u vidljivi dio i klizanja ne bi bilo. */ grid-auto-columns: calc(80% - var(--ccs-gap) * 0.5); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline-start: 0; padding-block-end: 0.75rem; scrollbar-width: thin; } /* 2 vidljiva na tabletu */ @media (min-width: 601px) { .woocommerce div.product .related.ccs-carousel ul.products { grid-auto-columns: calc(50% - var(--ccs-gap) * 0.5); } } /* 4 vidljiva na desktopu, ostali klizanjem */ @media (min-width: 901px) { .woocommerce div.product .related.ccs-carousel ul.products { grid-auto-columns: calc(25% - var(--ccs-gap) * 0.75); } } .woocommerce div.product .related.ccs-carousel ul.products > li { scroll-snap-align: start; } .ccs-carousel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ccs-carousel__nav { display: flex; gap: 0.5rem; flex: none; } .ccs-carousel__btn { inline-size: 44px; block-size: 44px; display: grid; place-items: center; border: var(--ccs-line); border-radius: 50%; background: var(--wp--preset--color--paper, #fff); color: var(--wp--preset--color--cacao, #2a1a12); cursor: pointer; transition: border-color 0.15s var(--ccs-ease, ease), color 0.15s var(--ccs-ease, ease), opacity 0.15s var(--ccs-ease, ease); } .ccs-carousel__btn:hover:not(:disabled) { border-color: var(--wp--preset--color--copper, #956f2d); color: var(--ccs-copper-ink, #956f2d); } .ccs-carousel__btn:disabled { opacity: 0.35; cursor: default; } .ccs-carousel__btn svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* --- Povezani proizvodi / upsell na stranici proizvoda ---------------- */ .woocommerce div.product > .related, .woocommerce div.product > .upsells { margin-block-start: var(--wp--preset--spacing--50, 4rem); padding-block-start: var(--wp--preset--spacing--40, 2.5rem); border-block-start: var(--ccs-line); } .woocommerce div.product > .related > h2, .woocommerce div.product > .upsells > h2 { font-size: var(--wp--preset--font-size--xl, 2rem); margin-block: 0 var(--wp--preset--spacing--30, 1.5rem); } /* --- Opis kategorije iznad grida (brief 6.8) ------------------------ */ .woocommerce .term-description { max-inline-size: 60ch; color: var(--wp--preset--color--muted, #7a6b60); margin-block-end: var(--wp--preset--spacing--40, 2.5rem); } /* --- Stranica proizvoda --------------------------------------------- Galerija skrola, kupovni blok se lijepi (moderni webshop obrazac). Redovi su EKSPLICITNI: bez toga sticky element pobjegne iz svoje celije i prekrije akordeon ispod. */ .woocommerce div.product { display: block; } /* Gornja sekcija: galerija + kupovni blok (omotac iz inc/woocommerce.php) */ .ccs-product-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-block-end: var(--wp--preset--spacing--50, 4rem); } /* Woo layout css daje galeriji i sazetku "width: 48%; float" (.woocommerce div.product div.images = 3 klase) - unutar grid celije to ih stisne na pola. Overridi zato nose i "width", ne samo "inline-size", i idu s istom tezinom selektora. */ .woocommerce div.product > .woocommerce-product-gallery, .woocommerce div.product div.images { inline-size: auto; width: auto; float: none; margin-block-end: 0; } .woocommerce div.product .woocommerce-product-gallery { min-inline-size: 0; } /* Kupovni blok prati skrol dok se pregledava galerija. Sticky unutar EKSPLICITNE celije (grid-row: 2) ne moze pobjeci u redove ispod. */ .woocommerce div.product .summary { min-inline-size: 0; position: sticky; inset-block-start: calc(var(--ccs-header-h, 74px) + 1rem); } /* Glavna slika u zaobljenom okviru, kao kartice kataloga */ .woocommerce div.product .woocommerce-product-gallery__wrapper, .woocommerce div.product .flex-viewport { border-radius: var(--ccs-r-card, 18px); overflow: hidden; background: var(--wp--preset--color--sand, #e8ddd0); } .woocommerce div.product .woocommerce-product-gallery__image img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1 / 1; object-fit: cover; } /* Umanjenice: Woo ih stilizira u woocommerce-general.css koji je ugasen, pa bez ovoga ispadnu numerirana lista slika pune sirine. */ .woocommerce div.product .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; list-style: none; margin: 0.75rem 0 0; padding: 0; } .woocommerce div.product .flex-control-thumbs li { margin: 0; padding: 0; list-style: none; float: none; inline-size: auto; width: auto; } .woocommerce div.product .flex-control-thumbs img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: var(--wp--preset--color--sand, #e8ddd0); cursor: pointer; opacity: 0.62; transition: opacity var(--ccs-dur, 200ms) var(--ccs-ease, ease), box-shadow var(--ccs-dur, 200ms) var(--ccs-ease, ease); } .woocommerce div.product .flex-control-thumbs img:hover, .woocommerce div.product .flex-control-thumbs img.flex-active { opacity: 1; box-shadow: 0 0 0 2px var(--wp--preset--color--copper, #956f2d); } .woocommerce div.product > .summary, .woocommerce div.product div.summary { inline-size: auto; width: auto; float: none; margin: 0; } /* Akordeon zamjenjuje .woocommerce-tabs pa mora biti u istom pravilu - inace bi sjeo u sljedecu celiju grida umjesto preko cijele sirine. */ /* (akordeon, povezani i breadcrumb su sada obicna braca izvan grida) */ @media (max-width: 900px) { .ccs-product-top { grid-template-columns: minmax(0, 1fr); } /* jedna kolona: sve u toku, nista se ne lijepi */ .woocommerce div.product .summary { position: static; } } /* h1 u theme.json je 3XL (do 89px) - to je mjera za hero, ne za naziv proizvoda koji zna imati i 60 znakova. */ .woocommerce div.product .product_title { font-size: var(--wp--preset--font-size--xl, 2rem); line-height: 1.2; margin-block: 0.25rem 0.75rem; text-wrap: balance; } /* Kupovni blok kao papirnata kartica - odvaja odluku o kupnji od galerije i daje sticky stupcu vlastitu tezinu. */ @media (min-width: 901px) { .woocommerce div.product .summary { background: var(--wp--preset--color--paper, #fff); border: var(--ccs-line); border-radius: var(--ccs-r-card, 18px); padding: clamp(1.25rem, 2.2vw, 1.9rem); box-shadow: 0 10px 30px rgba(42, 26, 18, .06); } } /* kratki opis je uvod, ne tijelo teksta */ .woocommerce div.product .woocommerce-product-details__short-description { color: var(--wp--preset--color--muted, #7a6b60); line-height: 1.6; margin-block: 0 var(--wp--preset--spacing--30, 1.5rem); max-inline-size: 46ch; } .woocommerce div.product .woocommerce-product-details__short-description p:last-child { margin-block-end: 0; } /* Cijena je nosila isti serif kao naziv proizvoda pa se stapala s njim. Sada je u body fontu, na pjeskovitoj plocici i odvojena tankom crtom - oko je nade prije nego procita naslov. */ .woocommerce div.product p.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; color: var(--wp--preset--color--cacao, #2a1a12); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--lg, 1.5rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin-block: 0 0.35rem; padding-block-start: var(--wp--preset--spacing--20, 1rem); border-block-start: var(--ccs-line); } .woocommerce div.product p.price > .woocommerce-Price-amount, .woocommerce div.product p.price ins .woocommerce-Price-amount { background: var(--wp--preset--color--sand, #e8ddd0); border-radius: 999px; padding: 0.28em 0.7em; white-space: nowrap; } .woocommerce div.product p.price .woocommerce-Price-currencySymbol { font-size: 0.72em; font-weight: 600; margin-inline-start: 0.12em; vertical-align: baseline; } .woocommerce div.product p.price del { color: var(--wp--preset--color--muted, #7a6b60); font-size: 0.62em; margin-inline-end: 0; text-decoration-thickness: 1px; } /* na akciji plocica prelazi u crvenu, stara cijena ostaje gola */ .woocommerce div.product p.price del .woocommerce-Price-amount { background: none; padding: 0; } .woocommerce div.product p.price ins { text-decoration: none; color: var(--wp--preset--color--red, #af1116); } .woocommerce div.product p.price ins .woocommerce-Price-amount { background: rgba(175, 17, 22, 0.1); } /* PDV napomena ispod cijene - Woo je ispisuje kao small */ .woocommerce div.product p.price small, .woocommerce div.product .woocommerce-price-suffix { display: block; flex: 1 0 100%; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--xs, 0.8125rem); font-weight: 400; color: var(--wp--preset--color--muted, #7a6b60); margin-block-start: 0.35rem; } /* --- Kupovni red: kolicina + CTA ------------------------------------- */ .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; margin-block: var(--wp--preset--spacing--20, 1rem) 0; } .woocommerce div.product form.cart .quantity { flex: none; } .woocommerce div.product form.cart .quantity .qty { block-size: 100%; min-block-size: 3.1rem; inline-size: 4.5rem; } .woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; min-inline-size: 12rem; min-block-size: 3.1rem; font-size: var(--wp--preset--font-size--md, 1.0625rem); padding-inline: 1.5rem; } /* varijacije zauzimaju cijeli redak iznad gumba */ .woocommerce div.product form.cart .variations, .woocommerce div.product form.cart .woocommerce-variation { flex: 1 0 100%; margin: 0; } /* --- Meta: kategorije kao pilule ------------------------------------- */ .woocommerce div.product .product_meta { margin-block-start: var(--wp--preset--spacing--30, 1.5rem); padding-block-start: var(--wp--preset--spacing--20, 1rem); border-block-start: var(--ccs-line); font-size: var(--wp--preset--font-size--xs, 0.8125rem); color: var(--wp--preset--color--muted, #7a6b60); display: flex; flex-direction: column; gap: 0.5rem; } .woocommerce div.product .product_meta > span { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .woocommerce div.product .product_meta a { display: inline-block; padding: 0.2rem 0.7rem; border: var(--ccs-line); border-radius: var(--ccs-r-btn); color: var(--wp--preset--color--cacao, #2a1a12); text-decoration: none; transition: border-color .15s var(--ccs-ease, ease), color .15s var(--ccs-ease, ease); } .woocommerce div.product .product_meta a:hover { border-color: var(--wp--preset--color--copper, #956f2d); color: var(--ccs-copper-ink, #956f2d); text-decoration: none; } /* --- Jamstva ispod CTA ------------------------------------------------ */ .ccs-product-trust { list-style: none; margin: var(--wp--preset--spacing--20, 1rem) 0 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--wp--preset--font-size--xs, 0.8125rem); color: var(--wp--preset--color--muted, #7a6b60); } .ccs-product-trust li { display: flex; align-items: center; gap: 0.55rem; } .ccs-product-trust .ccs-icon { inline-size: 16px; block-size: 16px; flex: none; color: var(--wp--preset--color--sage, #6e7a62); } .woocommerce .woocommerce-breadcrumb { font-size: var(--wp--preset--font-size--xs, 0.8125rem); color: var(--wp--preset--color--muted, #7a6b60); margin-block-end: var(--wp--preset--spacing--30, 1.5rem); } /* --- Sticky "Dodaj u kosaricu" na mobitelu (brief 6.7) -------------- Traku gradi main.js (initStickyAtc); na sirokim ekranima je nema. */ .ccs-sticky-atc { display: none; } @media (max-width: 900px) { .ccs-sticky-atc { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90; background: var(--wp--preset--color--paper, #fff); border-block-start: var(--ccs-line); padding: 0.75rem var(--wp--preset--spacing--30, 1.5rem); padding-block-end: calc(0.75rem + env(safe-area-inset-bottom)); display: flex; gap: 0.75rem; align-items: center; transform: translateY(105%); transition: transform .25s var(--ccs-ease, ease); } .ccs-sticky-atc.is-show { transform: none; } .ccs-sticky-atc__price { font-weight: 600; white-space: nowrap; } .ccs-sticky-atc .button { flex: 1; } body.single-product { padding-block-end: 5rem; } } /* --- Gumbi ---------------------------------------------------------- */ .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: var(--wp--preset--color--cacao, #2a1a12); color: var(--wp--preset--color--cream, #faf6f0); border-radius: var(--ccs-r-btn); padding: 0.9rem 1.75rem; font-size: var(--wp--preset--font-size--sm, 0.9375rem); font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; } .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce button.button.alt:hover { background: var(--wp--preset--color--copper, #956f2d); color: var(--wp--preset--color--cream, #faf6f0); } .woocommerce button.button.alt { background: var(--wp--preset--color--cacao, #2a1a12); } /* --- Obavijesti ----------------------------------------------------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-block-start: none; border: var(--ccs-line); border-radius: var(--ccs-r-card); background: var(--wp--preset--color--paper, #fff); color: var(--wp--preset--color--cacao, #2a1a12); } .woocommerce-message::before, .woocommerce-info::before { color: var(--wp--preset--color--sage, #6e7a62); } /* --- Woo blok obavijesti (wc-block-components-notice-banner) --------- Isti jezik kao klasicne obavijesti gore: papirnata kartica, tihi rub, ikona u krugu boje statusa. wc-blocks.css se ucitava u footeru pa "body" prefiks daje prednost nad njegovim pravilima iste razine. */ /* :is(.is-*) u selektoru je nuzan - wc-blocks varijante imaju 2 klase pa bi "body .wc-block-components-notice-banner" (0,1,1) izgubio od njihovog ".banner.is-info" (0,2,0) za pozadinu i rub. */ body .wc-block-components-notice-banner, body .wc-block-components-notice-banner:is(.is-info, .is-success, .is-error) { display: flex; align-items: flex-start; gap: 0.8rem; border: var(--ccs-line); border-radius: var(--ccs-r-card, 18px); background: var(--wp--preset--color--paper, #fff); color: var(--wp--preset--color--cacao, #2a1a12); box-shadow: var(--ccs-shadow, 0 1px 2px rgba(42, 26, 18, .06)); padding: 1rem 1.25rem; font-size: var(--wp--preset--font-size--sm, 0.9375rem); line-height: 1.55; } /* status zivi u ikoni, ne u pozadini cijele trake */ body .wc-block-components-notice-banner > svg, body .wc-block-components-notice-banner:is(.is-info, .is-success, .is-error) > svg { flex-shrink: 0; border-radius: 50%; padding: 2px; inline-size: 22px; block-size: 22px; fill: var(--wp--preset--color--cream, #faf6f0); background: var(--wp--preset--color--copper, #956f2d); } body .wc-block-components-notice-banner:is(.is-success) > svg { background: var(--wp--preset--color--sage, #6e7a62); } body .wc-block-components-notice-banner:is(.is-error) { border-inline-start: 3px solid var(--wp--preset--color--red, #af1116); } body .wc-block-components-notice-banner:is(.is-error) > svg { background: var(--wp--preset--color--red, #af1116); } body .wc-block-components-notice-banner__content { flex: 1; align-self: center; } body .wc-block-components-notice-banner__content a { color: var(--ccs-copper-ink, #956f2d); } /* popis gresaka blagajne unutar bannera - bez bulleta (wc ih vec mice), samo ritam medu recima */ body .wc-block-components-notice-banner .wc-block-components-notice-banner__content ul { margin: 0.5rem 0 0; padding: 0; list-style: none; } body .wc-block-components-notice-banner .wc-block-components-notice-banner__content li { margin-block: 0.3rem; } /* gumb za zatvaranje (dismiss) prati boje teme */ body .wc-block-components-notice-banner .wc-block-components-button { color: var(--wp--preset--color--muted, #7a6b60); background: transparent; } /* --- Filteri lijevo (brief 6.8) ------------------------------------- */ .ccs-shop-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } @media (max-width: 900px) { .ccs-shop-layout { grid-template-columns: minmax(0, 1fr); } } .ccs-filters details { border-block-end: var(--ccs-line); } .ccs-filters summary { padding-block: 0.8rem; font-size: 1rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; } .ccs-filters summary::-webkit-details-marker { display: none; } /* isti plus/krizic kao FAQ i deklaracije */ .ccs-filters summary::after { content: "+"; font-size: 1.1rem; color: var(--wp--preset--color--muted, #7a6b60); transition: transform var(--ccs-dur, 200ms) var(--ccs-ease, ease); } .ccs-filters details[open] summary::after { transform: rotate(45deg); } .ccs-filters__cats { list-style: none; margin: 0 0 .75rem; padding: 0; /* filter je pomocna navigacija - malo manji od sadrzaja kataloga */ font-size: .9375rem; line-height: 1.45; } .ccs-filters__cats li { line-height: 1.4; } .ccs-filters__cats ul.children { list-style: none; margin: 0; padding-inline-start: 0.9rem; } .ccs-filters__cats li { margin-block: 0.15rem; } .ccs-filters__cats a { color: var(--wp--preset--color--cacao, #2a1a12); text-decoration: none; } .ccs-filters__cats a:hover { color: var(--wp--preset--color--copper, #956f2d); text-decoration: underline; } /* broj proizvoda iza naziva - wp_list_categories ga ispisuje kao " (n)" */ .ccs-filters__cats li { color: var(--wp--preset--color--muted, #7a6b60); } .ccs-filters__cats li.current-cat > a, .ccs-filters__cats li.current-cat-parent > a { color: var(--wp--preset--color--copper, #956f2d); font-weight: 600; } /* "Na akciji" - checkbox izgled, obican link ispod akordeona */ .ccs-filters__sale { display: flex; align-items: center; gap: 0.55rem; padding-block: 0.8rem; font-size: 1rem; font-weight: 600; color: var(--wp--preset--color--cacao, #2a1a12); text-decoration: none; border-block-end: var(--ccs-line); } .ccs-filters__sale:hover { color: var(--wp--preset--color--copper, #956f2d); text-decoration: none; } .ccs-filters__box { inline-size: 1.1rem; block-size: 1.1rem; border: 1.5px solid var(--wp--preset--color--muted, #7a6b60); border-radius: 4px; display: grid; place-items: center; flex-shrink: 0; } .ccs-filters__sale.is-active .ccs-filters__box { background: var(--wp--preset--color--cacao, #2a1a12); border-color: var(--wp--preset--color--cacao, #2a1a12); } .ccs-filters__sale.is-active .ccs-filters__box::before { content: ""; inline-size: 0.55rem; block-size: 0.3rem; border-inline-start: 2px solid var(--wp--preset--color--cream, #faf6f0); border-block-end: 2px solid var(--wp--preset--color--cream, #faf6f0); transform: rotate(-45deg) translateY(-1px); } /* --- Deklaracija: akordeon, tablice (Uredba EU 1169/2011) ----------- */ .ccs-accordion__body > *:first-child { margin-block-start: 0; } /* Tablice se ne razvlace preko cijele sirine akordeona - inace naziv stoji lijevo, a vrijednost 600px dalje i oko ostane bez veze. */ .ccs-nutrition, .ccs-facts { inline-size: 100%; max-inline-size: 640px; border-collapse: collapse; font-size: var(--wp--preset--font-size--sm, 0.9375rem); } .ccs-nutrition caption { text-align: start; color: var(--wp--preset--color--muted, #7a6b60); font-size: var(--wp--preset--font-size--xs, 0.8125rem); padding-block-end: 0.5rem; } .ccs-nutrition th, .ccs-nutrition td, .ccs-facts th, .ccs-facts td { text-align: start; padding-block: 0.5rem; border-block-end: var(--ccs-line); font-weight: 400; } /* Zadnji red nema rub - inace se poklopi s rubom same sekcije akordeona i dobiju se dvije linije jedna do druge. */ .ccs-nutrition tr:last-child th, .ccs-nutrition tr:last-child td, .ccs-facts tr:last-child th, .ccs-facts tr:last-child td { border-block-end: 0; } .ccs-nutrition th, .ccs-facts th { color: var(--wp--preset--color--muted, #7a6b60); inline-size: 42%; padding-inline-end: 1.5rem; } /* Alergeni: podebljano i vizualno odvojeno */ .ccs-accordion__allergens summary { color: var(--wp--preset--color--cacao, #2a1a12); } .ccs-allergens { font-weight: 700; border-inline-start: 3px solid var(--wp--preset--color--copper, #956f2d); padding-inline-start: 0.875rem; margin: 0; } /* Upozorenje uredniku - nikad se ne prikazuje kupcu */ .ccs-editor-notice { margin-block-start: var(--wp--preset--spacing--30, 1.5rem); padding: 0.75rem 1rem; border: 1px dashed var(--wp--preset--color--copper, #956f2d); border-radius: var(--ccs-r-btn); font-size: var(--wp--preset--font-size--xs, 0.8125rem); color: var(--wp--preset--color--muted, #7a6b60); } /* ===================================================================== Kosarica, blagajna, moj racun (brief 6.9). Woo generic stilovi su iskljuceni pa je sav izgled ovdje. ===================================================================== */ /* --- Polja formi (blagajna, racun, kuponi) --------------------------- */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce form .form-row .select2-selection--single, .woocommerce .cart .coupon input.input-text, .woocommerce-cart .coupon input.input-text { inline-size: 100%; padding: 0.8rem 1rem; font: inherit; font-size: var(--wp--preset--font-size--sm, 0.9375rem); color: var(--wp--preset--color--cacao, #2a1a12); /* background-color, ne shorthand - select nosi chevron u background-image */ background-color: var(--wp--preset--color--paper, #fff); border: var(--ccs-line); border-radius: 10px; transition: border-color var(--ccs-dur, 200ms) var(--ccs-ease, ease); } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { border-color: var(--wp--preset--color--copper, #956f2d); outline: none; } /* select2 (drzava) - visina mora pratiti ostala polja */ .woocommerce form .form-row .select2-selection--single { block-size: auto; min-block-size: 3.25rem; display: flex; align-items: center; } .woocommerce form .form-row .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding-inline-start: 0; color: inherit; } .woocommerce form .form-row .select2-selection--single .select2-selection__arrow { block-size: 100%; } .woocommerce form .form-row label { font-size: var(--wp--preset--font-size--xs, 0.8125rem); font-weight: 600; letter-spacing: 0.02em; margin-block-end: 0.3rem; display: block; } .woocommerce form .form-row .required { color: var(--wp--preset--color--red, #af1116); text-decoration: none; } .woocommerce form .form-row { margin-block-end: 0.9rem; padding: 0; } /* neispravno polje mora biti vidljivo i bez citanja banner poruke */ .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid textarea, .woocommerce form .form-row.woocommerce-invalid select, .woocommerce form .form-row.woocommerce-invalid .select2-selection--single { border-color: var(--wp--preset--color--red, #af1116); } .woocommerce form .form-row.woocommerce-invalid label { color: var(--wp--preset--color--red, #af1116); } .woocommerce form .form-row.woocommerce-validated input.input-text, .woocommerce form .form-row.woocommerce-validated textarea, .woocommerce form .form-row.woocommerce-validated select { border-color: var(--wp--preset--color--sage, #6e7a62); } /* dvostupcana polja (ime/prezime) */ .woocommerce form .form-row-first, .woocommerce form .form-row-last { inline-size: calc(50% - 0.5rem); float: left; } .woocommerce form .form-row-last { float: right; } .woocommerce form .form-row-wide { clear: both; } @media (max-width: 640px) { .woocommerce form .form-row-first, .woocommerce form .form-row-last { inline-size: 100%; float: none; } } /* --- Kolicina (kosarica + proizvod) ---------------------------------- */ .woocommerce .quantity .qty { inline-size: 4.25rem; padding: 0.75rem 0.25rem; text-align: center; font: inherit; font-size: var(--wp--preset--font-size--sm, 0.9375rem); border: var(--ccs-line); border-radius: 10px; background: var(--wp--preset--color--paper, #fff); } /* --- Kosarica: tablica ----------------------------------------------- */ .woocommerce table.shop_table { inline-size: 100%; border: none; border-collapse: collapse; border-radius: 0; margin: 0 0 var(--wp--preset--spacing--40, 2.5rem); font-size: var(--wp--preset--font-size--sm, 0.9375rem); } .woocommerce table.shop_table th, .woocommerce table.shop_table td { text-align: start; padding: 0.9rem 0.75rem; border: none; border-block-end: var(--ccs-line); background: transparent; vertical-align: middle; } .woocommerce table.shop_table thead th { font-size: var(--wp--preset--font-size--xs, 0.8125rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--muted, #7a6b60); border-block-end: 2px solid var(--wp--preset--color--sand, #e8ddd0); } .woocommerce-cart table.cart img { inline-size: 72px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: var(--wp--preset--color--sand, #e8ddd0); } .woocommerce-cart table.cart td.product-name a { color: var(--wp--preset--color--cacao, #2a1a12); font-weight: 500; } .woocommerce a.remove { inline-size: 1.6rem; block-size: 1.6rem; line-height: 1.5rem; font-size: 1.25rem; font-weight: 400; color: var(--wp--preset--color--muted, #7a6b60) !important; border: var(--ccs-line); border-radius: 50%; background: var(--wp--preset--color--paper, #fff); } .woocommerce a.remove:hover { color: var(--wp--preset--color--cream, #faf6f0) !important; background: var(--wp--preset--color--red, #af1116); border-color: var(--wp--preset--color--red, #af1116); } /* red s kuponom i gumbom "Osvjezi kosaricu" */ .woocommerce-cart table.cart td.actions { padding-block-start: 1.25rem; } .woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 0.6rem; float: none; margin-block-end: 0.75rem; } .woocommerce-cart table.cart td.actions .coupon .input-text { inline-size: auto; flex: 0 1 16rem; float: none; margin: 0; } @media (min-width: 769px) { .woocommerce-cart table.cart td.actions .coupon { float: left; margin-block-end: 0; } .woocommerce-cart table.cart td.actions > .button { float: right; } } /* --- Kosarica: ukupno ------------------------------------------------- */ .woocommerce .cart-collaterals .cart_totals { inline-size: 100%; max-inline-size: 26rem; margin-inline-start: auto; float: none; padding: 1.5rem; border: var(--ccs-line); border-radius: var(--ccs-r-card, 18px); background: var(--wp--preset--color--paper, #fff); } .woocommerce .cart_totals h2 { font-size: var(--wp--preset--font-size--lg, 1.375rem); margin-block: 0 0.75rem; } .woocommerce .cart_totals table.shop_table { margin-block-end: 1rem; } .woocommerce .cart_totals .order-total td, .woocommerce .cart_totals .order-total th { font-weight: 700; font-size: var(--wp--preset--font-size--md, 1.0625rem); border-block-end: none; } .woocommerce .wc-proceed-to-checkout { padding: 0; } .woocommerce .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; font-size: var(--wp--preset--font-size--md, 1.0625rem); margin: 0; } .ccs-cart-continue { text-align: center; margin: 0.9rem 0 0; font-size: var(--wp--preset--font-size--sm, 0.9375rem); } .ccs-cart-continue a { color: var(--ccs-copper-ink, #956f2d); text-decoration: underline; text-underline-offset: 3px; } /* --- Cross-sells na kosarici ----------------------------------------- Woo ih ispisuje samo kad su na proizvodu postavljeni "Cross-sells". Trenutno ih nijedan proizvod nema - stilovi cekaju spremni. */ .woocommerce .cart-collaterals .cross-sells { inline-size: 100%; float: none; margin-block-end: var(--wp--preset--spacing--50, 4rem); } .woocommerce .cart-collaterals .cross-sells > h2 { font-size: var(--wp--preset--font-size--xl, 2rem); margin-block: 0 var(--wp--preset--spacing--30, 1.5rem); } .woocommerce .cart-collaterals .cross-sells ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1024px) { .woocommerce .cart-collaterals .cross-sells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* prazna kosarica */ .woocommerce .cart-empty { font-family: var(--wp--preset--font-family--display, Georgia, serif); font-size: var(--wp--preset--font-size--xl, 2rem); text-align: center; margin-block: var(--wp--preset--spacing--50, 4rem) 1rem; color: var(--wp--preset--color--cacao, #2a1a12); } .woocommerce .return-to-shop { text-align: center; margin-block-end: var(--wp--preset--spacing--30, 1.5rem); } .ccs-empty-cart { text-align: center; margin-block-end: var(--wp--preset--spacing--60, 6rem); } .ccs-empty-cart__label { display: block; font-size: var(--wp--preset--font-size--xs, 0.8125rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--muted, #7a6b60); margin-block-end: 0.8rem; } .ccs-empty-cart nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; } .ccs-empty-cart a { display: inline-block; padding: 0.45rem 1.1rem; border: var(--ccs-line); border-radius: var(--ccs-r-btn); font-size: var(--wp--preset--font-size--sm, 0.9375rem); font-weight: 500; color: var(--wp--preset--color--cacao, #2a1a12); text-decoration: none; transition: border-color 0.15s var(--ccs-ease, ease), color 0.15s var(--ccs-ease, ease), background-color 0.15s var(--ccs-ease, ease); } .ccs-empty-cart a:hover { border-color: var(--wp--preset--color--copper, #956f2d); color: var(--ccs-copper-ink, #956f2d); background: var(--wp--preset--color--paper, #fff); text-decoration: none; } /* --- Blagajna: dvije kolone ------------------------------------------ */ .woocommerce form.checkout .col2-set { inline-size: 100%; float: none; } /* Woo floata col-1/col-2 na 48% jedan uz drugi - unutar nase lijeve grid kolone to stisne polja na ~140px. Naplata i dostava se slazu jedna ISPOD druge, punom sirinom. */ .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; inline-size: 100%; padding: 0; } .woocommerce-checkout .col2-set .col-2 { margin-block-start: var(--wp--preset--spacing--30, 1.5rem); } /* "Dostava na drugu adresu?" je h3 - uz checkbox od 13px izgleda slomljeno; postaje obican red s labelom */ .woocommerce-checkout #ship-to-different-address { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--md, 1.0625rem); font-weight: 600; letter-spacing: 0; margin: 0; } .woocommerce-checkout #ship-to-different-address label { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; } /* checkboxi i radiji u bojama teme */ .woocommerce input[type="checkbox"], .woocommerce input[type="radio"] { accent-color: var(--wp--preset--color--cacao, #2a1a12); inline-size: 17px; block-size: 17px; } /* Skriveni inputi atribucije narudzbe su direktno dijete obrasca i pojavljuju se TEK uz marketinsku privolu - u gridu bi zauzeli gornju desnu celiju i gurnuli sazetak ispod podataka. Ostaju u DOM-u (salju se s narudzbom), samo ne sudjeluju u rasporedu. */ .woocommerce-checkout form.woocommerce-checkout > wc-order-attribution-inputs { display: none; } @media (min-width: 993px) { .woocommerce-checkout form.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; } /* eksplicitne celije - raspored ne ovisi o tome sto Woo ili plugin ubaci kao dodatno dijete obrasca */ .woocommerce-checkout form.woocommerce-checkout .col2-set { grid-column: 1; grid-row: 1 / span 2; } .woocommerce-checkout form.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; } .woocommerce-checkout form.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; } /* sazetak narudzbe prati skrol */ .woocommerce-checkout form.woocommerce-checkout #order_review { position: sticky; inset-block-start: calc(var(--ccs-header-h, 74px) + 1rem); } } .woocommerce-checkout #order_review_heading { margin-block: 0 0.75rem; font-size: var(--wp--preset--font-size--lg, 1.375rem); } .woocommerce-checkout #order_review { padding: 1.5rem; border: var(--ccs-line); border-radius: var(--ccs-r-card, 18px); background: var(--wp--preset--color--paper, #fff); } .woocommerce-checkout #order_review table.shop_table { margin-block-end: 1.25rem; } .woocommerce-checkout #order_review .order-total th, .woocommerce-checkout #order_review .order-total td { font-weight: 700; border-block-end: none; } /* --- Blagajna: nacini placanja --------------------------------------- */ .woocommerce-checkout #payment { background: transparent; border-radius: 0; } .woocommerce-checkout #payment ul.payment_methods { padding: 0 0 1rem; border-block-end: var(--ccs-line); list-style: none; } .woocommerce-checkout #payment ul.payment_methods li { padding-block: 0.4rem; } .woocommerce-checkout #payment ul.payment_methods label { font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } /* PayPal (i slicni gatewayi) ubacuju sirovi logo od 660x160px u labelu - ovdje se svaka slika metode svodi na visinu retka */ .woocommerce-checkout #payment ul.payment_methods label img { max-block-size: 24px; inline-size: auto; margin: 0; vertical-align: middle; } /* "Sto je PayPal?" pomocni link - tiho, uz logo */ .woocommerce-checkout #payment ul.payment_methods .about_paypal { font-size: var(--wp--preset--font-size--xs, 0.8125rem); color: var(--wp--preset--color--muted, #7a6b60); font-weight: 400; } .woocommerce-checkout #payment div.payment_box { background: var(--wp--preset--color--cream, #faf6f0); border-radius: 10px; font-size: var(--wp--preset--font-size--sm, 0.9375rem); color: var(--wp--preset--color--muted, #7a6b60); } .woocommerce-checkout #payment div.payment_box::before { border-block-end-color: var(--wp--preset--color--cream, #faf6f0); } .woocommerce-checkout #payment .place-order { padding: 1rem 0 0; } .woocommerce-checkout #payment #place_order { inline-size: 100%; font-size: var(--wp--preset--font-size--md, 1.0625rem); float: none; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: var(--wp--preset--font-size--xs, 0.8125rem); color: var(--wp--preset--color--muted, #7a6b60); } /* red povjerenja ispod gumba Naruci */ .ccs-checkout-trust { list-style: none; margin: 1rem 0 0; padding: 0.9rem 0 0; border-block-start: var(--ccs-line); display: flex; flex-direction: column; gap: 0.45rem; font-size: var(--wp--preset--font-size--xs, 0.8125rem); color: var(--wp--preset--color--muted, #7a6b60); } .ccs-checkout-trust li { display: flex; align-items: center; gap: 0.5rem; } .ccs-checkout-trust .ccs-icon { inline-size: 15px; block-size: 15px; flex: none; color: var(--wp--preset--color--sage, #6e7a62); } /* --- Potvrda narudzbe (Woo order-confirmation blokovi) --------------- Klasicni thankyou.php se ne renderira - block tema koristi templates/order-confirmation.html s wc-block-* klasama. */ .wc-block-order-confirmation-summary-list { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0 0 var(--wp--preset--spacing--40, 2.5rem); padding: 1.25rem 1.5rem; border: var(--ccs-line); border-radius: var(--ccs-r-card, 18px); background: var(--wp--preset--color--paper, #fff); list-style: none; font-size: var(--wp--preset--font-size--sm, 0.9375rem); } .wc-block-order-confirmation-summary-list-item { margin: 0; padding: 0; border: none; } .wc-block-order-confirmation-summary-list-item__key { display: block; color: var(--wp--preset--color--muted, #7a6b60); font-size: var(--wp--preset--font-size--xs, 0.8125rem); } .wc-block-order-confirmation-summary-list-item__value { font-weight: 600; } .wc-block-order-confirmation-totals__table { inline-size: 100%; border-collapse: collapse; border: none; font-size: var(--wp--preset--font-size--sm, 0.9375rem); } .wc-block-order-confirmation-totals__table th, .wc-block-order-confirmation-totals__table td { text-align: start; padding: 0.9rem 0.75rem; border: none; border-block-end: var(--ccs-line); } .wc-block-order-confirmation-totals__table tfoot .wc-block-order-confirmation-totals__total th, .wc-block-order-confirmation-totals__table tfoot .wc-block-order-confirmation-totals__total td { font-weight: 700; border-block-end: none; } .wc-block-order-confirmation-address-wrapper address { font-style: normal; padding: 1.25rem 1.5rem; border: var(--ccs-line); border-radius: var(--ccs-r-card, 18px); background: var(--wp--preset--color--paper, #fff); } /* --- Moj racun -------------------------------------------------------- */ .woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } /* obavijesti i naslov preko cijele sirine */ .woocommerce-account .woocommerce > .woocommerce-notices-wrapper, .woocommerce-account .woocommerce > .woocommerce-message, .woocommerce-account .woocommerce > .woocommerce-info, .woocommerce-account .woocommerce > .woocommerce-error { grid-column: 1 / -1; } /* login/registracija nema navigaciju pa ni grid */ .woocommerce-account:not(.logged-in) .woocommerce { display: block; max-inline-size: 30rem; margin-inline: auto; } /* naslov prati centriranu karticu prijave */ .woocommerce-account:not(.logged-in) main .wp-block-post-title { text-align: center; } @media (max-width: 900px) { .woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); } } /* Woo layout css cilja ".woocommerce-account .woocommerce-MyAccount-*" (2 klase, float + width 30%/68%) - override mora nositi istu tezinu, inace se navigacija stisne na 30% od 240px kolone grida (~70px). */ .woocommerce-account .woocommerce-MyAccount-navigation { float: none; inline-size: auto; width: auto; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: var(--ccs-line); border-radius: var(--ccs-r-card, 18px); background: var(--wp--preset--color--paper, #fff); overflow: hidden; } .woocommerce-MyAccount-navigation li { border-block-end: var(--ccs-line); } .woocommerce-MyAccount-navigation li:last-child { border-block-end: none; } .woocommerce-MyAccount-navigation a { display: block; padding: 0.8rem 1.1rem; color: var(--wp--preset--color--cacao, #2a1a12); font-size: var(--wp--preset--font-size--sm, 0.9375rem); font-weight: 500; text-decoration: none; } .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation a:hover { background: var(--wp--preset--color--cream, #faf6f0); color: var(--wp--preset--color--copper, #956f2d); text-decoration: none; } .woocommerce-account .woocommerce-MyAccount-content { float: none; inline-size: auto; width: auto; } .woocommerce-MyAccount-content .woocommerce-Button, .woocommerce table.my_account_orders .button { padding: 0.55rem 1.2rem; font-size: var(--wp--preset--font-size--xs, 0.8125rem); } /* adrese */ .woocommerce-account .addresses .title h3 { font-size: var(--wp--preset--font-size--lg, 1.375rem); } .woocommerce-account .addresses .title .edit { font-size: var(--wp--preset--font-size--xs, 0.8125rem); } .woocommerce-account address { font-style: normal; padding: 1.25rem 1.5rem; border: var(--ccs-line); border-radius: var(--ccs-r-card, 18px); background: var(--wp--preset--color--paper, #fff); } /* login / registracija */ .woocommerce form.login, .woocommerce form.register, .woocommerce form.lost_reset_password { border: var(--ccs-line); border-radius: var(--ccs-r-card, 18px); background: var(--wp--preset--color--paper, #fff); padding: 1.75rem; margin: 0; } .woocommerce form.login .lost_password { font-size: var(--wp--preset--font-size--xs, 0.8125rem); margin-block-end: 0; } /* prikazi lozinku (oko) - Woo ga pozicionira apsolutno */ .woocommerce form .show-password-input { inset-block-start: 0.8rem; inset-inline-end: 1rem; }