/* Global styles — loaded on every page. */
/* =========================================================================
Product card (Figma: Avemed Redesign — product list item)
Applies to EVERY Flatsome/WooCommerce product loop output:
- homepage sections ([ux_products style="default"])
- shop page, category/tag archives
- related products / upsells / cross-sells
- widgets that use content-product.php
Markup is in themes/avemed/woocommerce/content-product.php.
The green "DODAJ V KOŠARICO" pill is NOT added by the template — it's
emitted by Flatsome's own `flatsome_product_box_after` action (when
theme_mod 'add_to_cart_icon' === 'button'). We reposition it here via
flex `order: -1` + negative margin-top so it sits 50% over the image.
========================================================================= */
:root {
--av-card-line: rgba(0,0,0,0.08);
--av-card-ink: var(--fs-color-base);
--av-card-muted: inherit;
--av-card-soft: inherit;
--av-card-radius: 14px;
--av-card-green: var(--fs-color-primary);
}
.accent-color-text {
color: var(--accent-color-text);
}
.primary-color-text {
color: var(--fs-color-primary);
}
.xs-text {
font-size: 0.688rem;
font-weight: 500;
}
.semi-bold , .semi-bold *{
font-weight: 600;
}
/* Card shell ---------------------------------------------------------------- */
.av-product-card .av-card-media {
border: 1px solid var(--av-card-line);
border-radius: var(--av-card-radius);
background: #fff;
padding: 1rem;
margin-bottom: 12px;
display: flex;
flex-direction: column;
height: 100%;
transition: box-shadow 0.2s ease, transform 0.2s ease;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
overflow: visible; /* needed so the add-to-cart button can overflow upward over the image */
}
/* Image --------------------------------------------------------------------- */
.av-product-card .box-image {
border-radius: 10px;
overflow: hidden;
background: rgba(0,0,0,0.02);
margin-bottom: 0;
position: relative;
width: 100%;
}
.av-product-card .box-image img { border-radius: 0; aspect-ratio: 1; object-fit: contain; background: #FFF; }
/* Text area: flex column so we can reorder children via `order:` ------------ */
.av-product-card .box-text {
padding: 0 8px 4px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
flex: 1 1 auto;
}
.product-data__brand {
display: block;
font-size: 0.625rem;
text-transform: uppercase;
margin-bottom: 0.5rem;
color: var(--accent-color-text);
font-weight: 500;
line-height: 15px;
letter-spacing: 0.5px;
}
/* Add-to-cart bar — between .box-image and .box-text ----------------------- */
.av-add-to-cart {
display: flex;
justify-content: center;
gap: 6px;
padding: 1rem 0 0 0;
}
/* Button pill (shared by simple + variable) -------------------------------- */
.av-add-to-cart__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background-color: var(--fs-color-primary);
color: #fff;
border: 0;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
padding: 12px 22px;
min-height: 2.375rem;
white-space: nowrap;
cursor: pointer;
flex: 1 1 auto;
min-width: 0;
transition: transform .3s,border .3s,background .3s,box-shadow .3s,opacity .3s,color .3s;
}
.av-add-to-cart__btn:hover {
box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .2);
background-color: var(--primary-color);
color: #fff;
}
/* "+" glyph */
.av-add-to-cart__btn::before {
content: "+";
font-weight: 600;
margin-right: 2px;
}
/* AJAX loading state */
.av-add-to-cart__btn.loading {
color: transparent;
pointer-events: none;
position: relative;
}
.av-add-to-cart__btn.loading::before { color: transparent; }
.av-add-to-cart__btn.loading::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: av-spin 0.6s linear infinite;
}
@keyframes av-spin {
to { transform: rotate(360deg); }
}
/* Variation dropdown pill -------------------------------------------------- */
.av-add-to-cart .av-variation-select {
flex: 0 0 auto;
width: auto;
min-width: 0;
padding: 0 20px 0 14px; /* right padding reserves space for the custom arrow */
margin: 0;
border: 1px solid var(--av-card-line);
border-radius: 999px;
font-size: 0.625rem;
font-weight: 500;
color: #091120;
text-align: center;
text-align-last: center;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
min-height: 2.375rem;
line-height: 2.375rem;
background-color: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position-x: right 6px;
background-position-y: calc(50% + 1px);
background-size: 8px 5px;
}
.av-add-to-cart .av-variation-select:focus {
outline: none;
border-color: var(--av-card-green);
}
/* Icon-only variant — toggled by variable-cart.js when the row is too
narrow for the text label (available button width < 120px). Works at any
viewport size; no media query needed. */
.av-add-to-cart .av-add-to-cart__btn--icon {
font-size: 0;
padding: 10px 12px;
flex: 1 1 auto;
gap: 0;
}
.av-add-to-cart .av-add-to-cart__btn--icon::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin: 0;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Hide Flatsome's default add-to-cart-button (no longer used) -------------- */
.av-product-card .add-to-cart-button { display: none !important; }
/* WC "View cart" link after AJAX add */
.av-add-to-cart .added_to_cart {
display: none;
}
/* Toolbar row: badges (left) + compare/wishlist icons (right) — above image.
Rendered by content-product.php as the first child of .av-product-card. */
.av-card-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 0px 10px 0px;
}
.av-card-toolbar__badges {
display: flex;
align-items: center;
gap: 6px;
flex: 1 1 auto;
min-width: 0;
}
/* Reset Flatsome's default badge-container absolute positioning — it now
lives inside the toolbar flow, not as an overlay. */
.av-card-toolbar .badge-container {
position: static !important;
margin: 0 !important;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.av-card-toolbar__icons {
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
}
.av-badge {
display: inline-block;
padding: 6px 14px;
background: var(--fs-color-secondary); /* salmon — matches the Avemed Figma spec */
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
border-radius: 999px;
white-space: nowrap;
}
/* Per-type hooks (inherit the base pill for now; override here if the design
system wants distinct colors per badge type). */
.av-badge--sale,
.av-badge--new,
.av-badge--bestseller,
.av-badge--featured { /* reserved */ }
/* Low stock ("ZADNJI KOSI") — auto-added when tracked stock hits the threshold
(default 5, see woocommerce/loop/sale-flash.php). Amber so it reads as a
gentle scarcity cue, distinct from the salmon sale/secondary pills. */
.av-badge--lowstock {
background: #d98324;
}
/* Out-of-stock card variant ------------------------------------------------- */
/* Image fades back so the "Trenutno ni na zalogi" pill reads clearly. */
.av-product-card.out-of-stock .box-image img {
opacity: 0.45;
filter: saturate(0.6);
}
/* "Obvesti me" pill — replaces the green primary on out-of-stock cards.
Muted background so it doesn't compete with in-stock CTAs on the same row. */
.av-add-to-cart__btn--notify {
background-color: #f0f1f3;
color: var(--av-card-muted, #6a7282);
}
.av-add-to-cart__btn--notify::before {
content: none; /* drop the "+" glyph — not an add-to-cart action */
}
.av-add-to-cart__btn--notify:hover {
background-color: #e6e8ec;
color: var(--av-card-ink);
box-shadow: none;
}
/* Title --------------------------------------------------------------------- */
.av-product-card .title-wrapper { margin: 0; width: 100%; }
.av-product-card .woocommerce-loop-product__title,
.av-product-card .name.product-title,
.av-product-card .name.product-title > a {
font-size: 14px !important;
font-weight: 500 !important;
color: var(--av-card-ink) !important;
line-height: 1.35 !important;
letter-spacing: -0.005em;
margin: 0 !important;
padding: 0 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.7em;
}
/* Price --------------------------------------------------------------------- */
.av-product-card .price-wrapper { margin: 2px 0 0; }
.av-product-card .price {
font-size: 16px;
font-weight: 500;
color: var(--av-card-ink);
line-height: 1.25;
}
.av-product-card .price del {
color: var(--av-card-soft);
font-weight: 400;
margin-right: 6px;
}
.av-product-card .price ins {
text-decoration: none;
color: var(--av-card-ink);
font-weight: 500;
}
/* Sale / badge bubble ------------------------------------------------------- */
.av-product-card .badge.onsale,
.av-product-card .onsale {
background: var(--fs-color-secondary) !important; /* matches color_secondary / Figma coral */
color: #fff !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.06em;
padding: 6px 12px !important;
text-transform: uppercase;
border: 0 !important;
}
/* Remove Flatsome default decorations that clash ---------------------------- */
.av-product-card .box-text .is-divider,
.av-product-card .box-text .product-short-description { display: none; }
/* Star rating — keep subtle if present, but hide by default to match Figma */
.av-product-card .star-rating { display: none; }
.cf7-description{
margin-top: -15px !important;
margin-bottom: 15px !important;
font-size: 12px;
color: #706f6fd9;
}
.max-h-80 img{
max-height: 80px;
object-fit: contain;
}
.max-h-160{
width: fit-content !important;
}
.max-h-160 img{
width: auto !important;
max-height: 160px;
object-fit: contain;
}
.newsletter-section form{
margin: 0 auto;
max-width: 500px;
}
.newsletter-section form input[type="email"]{
border: 1px solid #E5E7EB !important;
background: #FFFFFF !important;
height: 44px;
padding: 12px 24px;
}
.newsletter-section form input[type="submit"]{
background: #091120;
font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.6px;
text-transform: uppercase;
height: 44px;
margin-left: 10px;
}
.newsletter-section .wpcf7-spinner{
display: none;
}
.newsletter-section .flex-col.ml-half{
margin: 0;
}
.newsletter-section .wpcf7-response-output{
margin: 0 !important;
margin-top: 10px !important;
background: var(--fs-color-primary);
border-color: var(--fs-color-primary) !important;
color: #FFF;
}
@media (max-width: 849px){
.newsletter-section form input[type="submit"]{
width: 100%;
margin: 0;
}
}
.section-has-products .page-numbers li{
margin-left: 0;
}
.brands-hp-logos .kw-carousel__track .img {
display: flex;
align-items: center;
justify-content: center;
}
/* Mobile -------------------------------------------------------------------- */
@media (max-width: 549px) {
.av-product-card .woocommerce-loop-product__title { font-size: 15px !important; }
.av-add-to-cart { padding: 0.75rem 0 0 0; }
.av-add-to-cart__btn {
font-size: 11px;
padding: 10px 14px;
min-height: 40px;
}
.av-add-to-cart .av-variation-select {
min-height: 40px;
line-height: 40px;
font-size: 11px;
padding: 0 26px 0 10px;
}
.av-product-card .av-card-media { padding: 0.75rem; }
}
/* ── Flush lists ─────────────────────────────────────────
Flatsome indents list items 1.3em inside content wrappers
(.col-inner / .entry-content / .entry-summary). Zero it so
lists align with paragraphs; bullets move inside the box
so they stay visible without the indent. */
.col-inner ol li,
.col-inner ul li,
.entry-content ol li,
.entry-content ul li,
.entry-summary ol li,
.entry-summary ul li {
margin-left: 0;
}
.col-inner ol,
.col-inner ul,
.entry-content ol,
.entry-content ul,
.entry-summary ol,
.entry-summary ul {
list-style-position: inside;
padding-left: 10px;
}
/* ── .av-links-primary ───────────────────────────────────
Utility: add to any parent element and every link inside
becomes semibold + brand primary green. */
.av-links-primary a {
font-weight: 600;
color: #92c096;
}
.av-links-primary a:hover,
.av-links-primary a:focus {
color: #7fb083;
}
/* =========================================================================
Mobile heading scale (override Flatsome)
------------------------------------------------------------------------
Flatsome (flatsome.css) drops the heading custom properties to FIXED rem
values below 550px:
:root { --h1:1.75rem; --h2:1.5rem; --h3:1.25rem; --h4:1.125rem; }
Because these are flat `rem` (relative to the 16px html root), a heading
stops scaling with its container — e.g. an
inside a
[ux_text font_size="1.5"] block collapses to a flat 20px on phones, even
though the block sets the surrounding text to 24px. On desktop --h3 is
`1.5625em`, so it DOES scale with the block (1.5625 × 24px = 37.5px).
We restore the `em` (container-relative) behavior for --h3 on mobile so
ux_text font sizes keep boosting the heading. Loaded after flatsome.css,
so this equal-specificity :root wins on source order — no !important.
========================================================================= */
@media (max-width: 549px) {
:root {
--h1: 1.75em;
--h2: 1.5em;
--h3: 1.25em;
--h4: 1.125em;
}
}