fallbacks if the metafield isn't a real table.
============================================================ */
.ingredient-table-wrapper,
.ingredient-content {
font-family: var(--font-body--family);
color: var(--color-foreground, #363835);
font-size: 0.9375rem;
line-height: 1.55;
}
.ingredient-table-wrapper table,
.ingredient-content table,
table.ingredient-table {
width: 100%;
border-collapse: collapse;
margin: 8px 0 16px;
font-size: 0.9375rem;
}
.ingredient-table-wrapper table thead,
.ingredient-content table thead,
table.ingredient-table thead {
background: #f9faf9;
}
.ingredient-table-wrapper table th,
.ingredient-content table th,
table.ingredient-table thead th {
text-align: left;
font-weight: 700;
font-family: var(--font-heading--family);
color: var(--color-foreground-heading, #363835);
padding: 12px 14px;
border-bottom: 2px solid #00893e;
font-size: 0.875rem;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.ingredient-table-wrapper table td,
.ingredient-content table td,
table.ingredient-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid #eee;
vertical-align: top;
}
.ingredient-table-wrapper table td:first-child,
.ingredient-content table td:first-child,
table.ingredient-table tbody td:first-child {
font-weight: 600;
color: var(--color-foreground-heading, #363835);
text-align: left;
width: 55%;
}
.ingredient-table-wrapper table td:not(:first-child),
.ingredient-content table td:not(:first-child),
table.ingredient-table tbody td:not(:first-child) {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.ingredient-table-wrapper table tbody tr:nth-child(even),
.ingredient-content table tbody tr:nth-child(even),
table.ingredient-table tbody tr:nth-child(even) {
background: #fafafa;
}
.ingredient-table-wrapper table tbody tr:hover,
.ingredient-content table tbody tr:hover,
table.ingredient-table tbody tr:hover {
background: #f0f7f3;
}
.ingredient-table-wrapper table tr:last-child td,
.ingredient-content table tr:last-child td,
table.ingredient-table tbody tr:last-child td {
border-bottom: 0;
}
/* Pseudo-table fallback: rows */
.ingredient-table-wrapper > p,
.ingredient-content > p {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid #eee;
margin: 0;
}
.ingredient-table-wrapper > p strong,
.ingredient-content > p strong {
font-weight: 600;
color: var(--color-foreground-heading, #363835);
flex-shrink: 0;
}
.ingredient-table-wrapper > p:last-child,
.ingredient-content > p:last-child {
border-bottom: 0;
}
/* Definition-list fallback */
.ingredient-table-wrapper dl,
.ingredient-content dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 10px 24px;
margin: 0;
padding: 0;
}
.ingredient-table-wrapper dt,
.ingredient-content dt {
font-weight: 600;
color: var(--color-foreground-heading, #363835);
}
.ingredient-table-wrapper dd,
.ingredient-content dd {
margin: 0;
text-align: right;
}
.ingredient-table-wrapper small,
.ingredient-content small,
.ingredient-table-wrapper sup,
.ingredient-content sup {
font-size: 0.8125rem;
color: #5a5c59;
}
/* Generic table styling fallback for blogs/pages */
.rte table,
article table,
.shopify-section table:not([class]) {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
font-size: 0.9375rem;
}
.rte table th,
article table th,
.shopify-section table:not([class]) th {
text-align: left;
font-weight: 700;
background: #f9faf9;
padding: 12px 14px;
border-bottom: 2px solid #00893e;
text-transform: uppercase;
font-size: 0.8125rem;
letter-spacing: 0.02em;
}
.rte table td,
article table td,
.shopify-section table:not([class]) td {
padding: 12px 14px;
border-bottom: 1px solid #eee;
}
.rte table tr:nth-child(even),
article table tr:nth-child(even),
.shopify-section table:not([class]) tr:nth-child(even) {
background: #fafafa;
}
@media (max-width: 600px) {
.ingredient-table-wrapper table th,
.ingredient-content table th,
table.ingredient-table thead th,
.ingredient-table-wrapper table td,
.ingredient-content table td,
table.ingredient-table tbody td {
padding: 10px 8px;
font-size: 0.875rem;
}
}
/* ============================================================
BRAND CONSISTENCY PASS — typography rhythm, eyebrows,
section spacing, CTA harmony, editorial hierarchy
============================================================ */
/* ---- Eyebrows: tight, uppercase, brand-green by default ---- */
.cstm-subhead p,
[class*="subhead"] p,
.eyebrow,
.section-eyebrow {
font-family: var(--font-heading--family);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-primary, #00893e);
margin: 0 0 12px;
line-height: 1.4;
}
/* ---- Display headings: tighter leading, more presence ---- */
h1, .h1, .text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
letter-spacing: -0.025em;
line-height: 1.05;
}
h2, .h2, .text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
letter-spacing: -0.02em;
line-height: 1.1;
}
h3, .h3, .text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
letter-spacing: -0.015em;
line-height: 1.2;
}
/* ---- Hero h1 italic span: brand-green emphasis (matches existing pattern) ---- */
h1 span, h2 span {
color: #00893e;
font-style: italic;
font-weight: inherit;
}
/* ---- Body copy: comfortable, readable ---- */
p {
line-height: 1.6;
}
/* ---- CTAs: Always uppercase, consistent letter-spacing ---- */
.button, .button-secondary,
button.shopify-payment-button__button--unbranded {
letter-spacing: 0.1em;
font-weight: 700;
font-size: 0.875rem;
padding: 16px 28px;
min-height: 52px;
}
/* ---- Section spacing rhythm — generous, editorial ---- */
.shopify-section + .shopify-section {
margin-top: 0; /* let section padding handle it, no double-stacking */
}
section.section--page-width {
padding-block: clamp(60px, 8vw, 110px);
}
/* ---- Footer cert chips: tighter pill treatment ---- */
.cert-chip {
background: rgba(255,255,255,0.08);
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.15);
font-weight: 500;
font-size: 0.75rem;
letter-spacing: 0.04em;
}
/* ---- Trust-strip icons row (homepage just below hero) — uniform sizing ---- */
.icon-with-text__section .icon-block .icon-block__media {
max-width: 18px;
margin-right: 8px;
opacity: 0.85;
}
.icon-with-text__section p {
font-size: 0.8125rem;
letter-spacing: 0.02em;
font-weight: 500;
color: var(--color-foreground, #363835);
}
/* ---- Section headings get visual breathing room ---- */
.section-content-wrapper > h2:first-child,
.section-content-wrapper > .text-block.h2:first-child {
margin-top: 0;
}
/* ---- Pull-quote / testimonial polish: brand-green left bar ---- */
.review-card,
.testimonial-card,
[class*="testimonial"] blockquote {
border-left: 3px solid #00893e;
padding-left: 20px;
}
/* ---- Doctor-name treatment in testimonials ---- */
.scientists-name,
.r-nickname {
font-family: var(--font-heading--family);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #00893e;
background: #e6f3ec;
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
/* ---- Stat numbers (40+, 500+, 30+) — make them magnetic ---- */
.number-block .num-txt > div {
font-family: var(--font-heading--family);
font-weight: 700;
font-size: clamp(1.75rem, 3vw, 2.25rem); /* 28–36px */
line-height: 1;
color: #00893e;
letter-spacing: -0.02em;
}
.number-block .num-txt > p {
font-size: 0.875rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-foreground, #363835);
margin-top: 12px;
font-weight: 500;
}
/* ---- Detail boxes (homepage ingredient highlights) — premium card ---- */
.detail-box {
background: #fafafa;
border-radius: 8px;
padding: 24px;
border: 1px solid #e6e6e6;
transition: border-color 0.2s ease;
}
.detail-box:hover {
border-color: #00893e;
}
.detail-box strong {
display: block;
font-family: var(--font-heading--family);
font-weight: 700;
font-size: 1rem;
color: #00893e;
margin-bottom: 8px;
letter-spacing: 0.02em;
}
.detail-box p {
font-size: 0.875rem;
margin: 0;
color: var(--color-foreground, #5a5c59);
}
/* ---- "Verify" line: tight pharma-grade pill ---- */
.verify {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
letter-spacing: 0.04em;
color: #00893e;
margin-top: 8px;
font-weight: 600;
}
/* ---- Star ratings: tight inline-flex ---- */
.review-star {
display: inline-flex;
gap: 1px;
margin-bottom: 12px;
}
/* ---- Quote text in testimonials — italics + larger leading ---- */
em {
font-style: italic;
color: var(--color-foreground-heading, #363835);
}
/* ---- Background hero overlay — subtle brand green tint ---- */
.hero-wrapper .hero {
position: relative;
}
.hero-wrapper .hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,90,40,0.35) 0%, rgba(0,0,0,0.5) 100%);
pointer-events: none;
z-index: 1;
}
.hero-wrapper .hero > * {
position: relative;
z-index: 2;
}
/* ---- Mobile: tighten everything ---- */
@media (max-width: 749px) {
section.section--page-width {
padding-block: clamp(40px, 12vw, 70px);
}
.button, .button-secondary {
width: 100%;
justify-content: center;
}
}
/* Stat blocks: gap between number columns (40+ / 500+ / 30+).
Scoped ONLY to .number-block (the inline stat row), NOT to ancestor section
wrappers — that broke 2-column "image right + text left" section layouts. */
.number-block {
display: flex;
flex-wrap: wrap;
gap: clamp(28px, 4vw, 56px);
justify-content: flex-start;
align-items: flex-start;
}
.num-txt {
text-align: left;
min-width: 100px;
}
.num-txt p {
margin-top: 6px;
white-space: nowrap;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-foreground, #5a5c59);
font-weight: 500;
}
@media (max-width: 600px) {
.number-block {
gap: 24px;
}
}
/* ============================================================
FEATURE CARDS — readable on ANY parent scheme (was inheriting white)
============================================================ */
/* When cards are rendered as actual cards (white background) on dark sections,
force explicit text colors so they don't inherit the dark scheme's white. */
.feature-item {
background: #ffffff;
border-radius: 8px;
padding: 24px 28px;
border: 1px solid #e6e6e6;
margin-bottom: 12px;
border-bottom: 1px solid #e6e6e6; /* override the original underline-style border */
}
.feature-item:last-child {
margin-bottom: 0;
border-bottom: 1px solid #e6e6e6;
}
.feature-number {
background: #e6f3ec;
color: #00893e;
font-weight: 700;
}
/* Force readable text on cards regardless of parent scheme */
.feature-content,
.feature-content * {
color: #363835;
}
.feature-content h4 {
color: #00893e !important;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0;
margin: 0 0 6px;
}
.feature-content p {
color: #5a5c59 !important;
font-size: 0.9375rem;
line-height: 1.55;
margin: 0;
}
/* Same treatment for the homepage detail-box if it lands on a dark section */
.detail-box {
background: #ffffff !important;
color: #363835;
}
.detail-box strong {
color: #00893e !important;
}
.detail-box p {
color: #5a5c59 !important;
}
/* ============================================================
BLOG INDEX CARDS — proper editorial treatment
============================================================ */
/* Card container */
.blog-post-card {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid #e6e6e6;
border-radius: 8px;
overflow: hidden;
transition: transform 0.2s ease, border-color 0.2s ease;
height: 100%;
}
.blog-post-card:hover {
transform: translateY(-3px);
border-color: var(--color-primary, #00893e);
}
/* Image */
.blog-post-card__image-container {
aspect-ratio: 16 / 10;
overflow: hidden;
background: #fafafa;
}
.blog-post-card__image,
.blog-post-card__image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.blog-post-card:hover .blog-post-card__image,
.blog-post-card:hover .blog-post-card__image-container img {
transform: scale(1.04);
}
/* Card body */
.blog-post-card__content,
.blog-post-card .text-block,
.blog-post-card > div:not(.blog-post-card__image-container) {
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
/* Title — brand-green, becomes darker on hover */
.blog-post-card h3,
.blog-post-card h2,
.blog-post-card .blog-post-card__title {
font-family: var(--font-heading--family);
font-weight: 700;
font-size: 1.125rem;
line-height: 1.3;
letter-spacing: -0.01em;
color: #00893e;
margin: 0;
}
.blog-post-card a:hover h3,
.blog-post-card a:hover h2 { color: #006830; }
/* Summary clamp to 3 lines */
.blog-post-card .blog-post-card__excerpt,
.blog-post-card .summary,
.blog-post-card p {
font-size: 0.875rem;
line-height: 1.5;
color: #5a5c59;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Meta row (date, reading time) */
.blog-post-card__meta,
.blog-post-card .blog-post-card__date,
.blog-post-card time {
font-size: 0.75rem;
letter-spacing: 0.04em;
color: #5a5c59;
text-transform: none;
margin: 0;
font-weight: 500;
}
/* Tag chips at the bottom */
.blog-post-card .article-tags,
.blog-post-card .tags-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: auto;
}
.blog-post-card .article-tags a,
.blog-post-card .tags-list a {
display: inline-block;
font-size: 0.6875rem;
letter-spacing: 0.04em;
text-transform: uppercase;
background: #e6f3ec;
color: #00893e;
padding: 3px 9px;
border-radius: 999px;
text-decoration: none;
font-weight: 600;
transition: background 0.15s ease;
}
.blog-post-card .article-tags a:hover { background: #00893e; color: #fff; }
/* Index grid spacing */
.blog-posts-list .resource-list,
.blog-posts__grid {
gap: 32px;
}
/* Empty-state image fallback when post has no image */
.blog-post-card__image-container:empty {
background: linear-gradient(135deg, #e6f3ec 0%, #ffffff 100%);
position: relative;
}
.blog-post-card__image-container:empty::before {
content: 'Soria Natural';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading--family);
font-size: 1rem;
letter-spacing: 0.06em;
color: #00893e;
opacity: 0.4;
font-weight: 700;
}
/* ============================================================
ARTICLE PAGE — typography for individual blog post
============================================================ */
article.article,
.article-template,
main:has(article) {
font-family: var(--font-body--family);
}
article.article h1,
.article-template h1 {
font-family: var(--font-heading--family);
font-weight: 800;
font-size: clamp(2rem, 5vw, 3.25rem);
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--color-foreground-heading, #363835);
margin: 0 0 16px;
}
article.article h2,
.article-template h2,
article.article .rte h2 {
font-family: var(--font-heading--family);
font-weight: 700;
font-size: 1.5rem;
margin: 36px 0 12px;
color: var(--color-foreground-heading, #363835);
}
article.article h3,
.article-template h3,
article.article .rte h3 {
font-family: var(--font-heading--family);
font-weight: 600;
font-size: 1.25rem;
margin: 28px 0 8px;
color: var(--color-foreground-heading, #363835);
}
article.article p,
.article-template p,
article.article .rte p {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-foreground, #363835);
margin: 0 0 16px;
max-width: 70ch;
}
article.article ul,
article.article ol,
article.article .rte ul,
article.article .rte ol {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-foreground, #363835);
padding-left: 1.5em;
margin: 0 0 20px;
max-width: 70ch;
}
article.article li,
article.article .rte li {
margin-bottom: 6px;
}
article.article a,
article.article .rte a {
color: #00893e;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.15s;
}
article.article a:hover,
article.article .rte a:hover {
color: #006830;
}
article.article blockquote,
article.article .rte blockquote {
border-left: 4px solid #00893e;
padding: 8px 0 8px 24px;
margin: 24px 0;
font-style: italic;
color: #5a5c59;
font-size: 1.125rem;
}
article.article img,
article.article .rte img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 20px 0;
}
/* Article meta (date, author, reading time) */
.article-meta,
.article__date,
article.article header time {
font-family: var(--font-body--family);
font-size: 0.875rem;
letter-spacing: 0.04em;
color: #5a5c59;
font-weight: 500;
text-transform: none;
}
/* ============================================================
GAIA-STYLE FILTER SIDEBAR (Soria Natural collection pages)
Targets Horizon's facet block with vertical layout.
============================================================ */
/* Container */
.facets--vertical {
--facets-spacing: 22px;
background: #ffffff;
border-right: 1px solid rgba(54,56,53,0.08);
padding: 24px 24px 32px !important;
}
/* "Filters" main heading at top of sidebar */
.facets--filters-title {
font-family: var(--font-heading--family);
font-weight: 700;
font-size: 1.375rem;
color: #363835;
margin: 0 0 20px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(54,56,53,0.12);
letter-spacing: -0.005em;
}
/* Each filter group (Benefit / Form / Price ...) */
.facets--vertical .facets__item {
border-bottom: 1px solid rgba(54,56,53,0.08);
padding: 0;
margin: 0;
}
.facets--vertical .facets__panel {
padding: 18px 0;
}
.facets--vertical .facets__summary {
display: flex !important;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 4px 0;
list-style: none;
}
.facets--vertical .facets__summary::-webkit-details-marker {
display: none;
}
.facets--vertical .facets__label {
font-family: var(--font-heading--family);
font-weight: 700 !important;
font-size: 0.95rem !important;
text-transform: none !important;
letter-spacing: 0.01em;
color: #363835 !important;
font-style: normal;
}
/* Chevron rotation (existing Horizon SVGs) */
.facets--vertical details[open] > summary svg.icon-caret,
.facets--vertical details[open] > summary svg[class*="caret"] {
transform: rotate(180deg);
transition: transform .2s ease;
}
.facets--vertical details > summary svg.icon-caret,
.facets--vertical details > summary svg[class*="caret"] {
transition: transform .2s ease;
}
/* List of values (checkboxes) */
.facets--vertical .facets__list {
list-style: none;
padding: 8px 0 4px;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.facets--vertical .facets__list-item,
.facets--vertical .facets__item-list-item {
padding: 0;
margin: 0;
}
/* Checkbox row */
.facets--vertical label.facet-checkbox,
.facets--vertical .facet-checkbox-label,
.facets--vertical .facets__list label {
display: flex !important;
align-items: center !important;
gap: 10px;
padding: 6px 0;
cursor: pointer;
font-family: var(--font-body--family);
font-size: 0.9375rem;
color: #363835;
line-height: 1.4;
font-weight: 400;
transition: color .12s ease;
}
.facets--vertical label:hover { color: #00893e; }
/* Checkbox visual */
.facets--vertical input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
min-width: 18px;
border: 1.5px solid rgba(54,56,53,0.35);
border-radius: 4px;
background: #fff;
cursor: pointer;
position: relative;
transition: all .15s ease;
margin: 0;
flex-shrink: 0;
}
.facets--vertical input[type="checkbox"]:hover {
border-color: #00893e;
}
.facets--vertical input[type="checkbox"]:checked {
background: #00893e;
border-color: #00893e;
}
.facets--vertical input[type="checkbox"]:checked::after {
content: "";
position: absolute;
top: 1px;
left: 4px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.facets--vertical input[type="checkbox"]:focus-visible {
outline: 2px solid #00893e;
outline-offset: 2px;
}
/* "Show more" link */
.facets--vertical .facets__show-more,
.facets--vertical button.facets__show-more {
font-family: var(--font-body--family);
font-size: 0.875rem;
color: #00893e;
background: none;
border: none;
padding: 8px 0 0;
cursor: pointer;
text-decoration: underline;
}
/* Active count badge */
.facets--vertical .facets__status,
.facets--vertical .facets__bubble {
background: #00893e;
color: #fff;
font-size: 0.75rem;
border-radius: 999px;
padding: 2px 8px;
font-weight: 600;
min-width: 20px;
text-align: center;
line-height: 1.4;
}
/* Price range filter */
.facets--vertical .price-filter,
.facets--vertical .facets__price {
padding: 12px 0 4px;
}
.facets--vertical input[type="number"],
.facets--vertical input.price-filter__input {
border: 1px solid rgba(54,56,53,0.2);
border-radius: 6px;
padding: 8px 10px;
font-size: 0.875rem;
width: 100%;
background: #fff;
}
.facets--vertical input[type="number"]:focus {
outline: none;
border-color: #00893e;
box-shadow: 0 0 0 3px rgba(0,137,62,0.15);
}
/* Active filter chips at top (filter-remove-buttons) */
.facets__active-values,
.filter-remove-buttons {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 18px;
}
.facets__active-value-button,
.filter-remove-buttons a,
.filter-remove-buttons button {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(0,137,62,0.08);
color: #006830;
border: 1px solid rgba(0,137,62,0.25);
border-radius: 999px;
padding: 4px 10px;
font-size: 0.8125rem;
font-family: var(--font-body--family);
cursor: pointer;
text-decoration: none;
transition: all .12s ease;
}
.facets__active-value-button:hover,
.filter-remove-buttons a:hover {
background: #00893e;
color: #fff;
border-color: #00893e;
}
/* Clear-all link */
.facets__clear-all,
.facets__clear,
a[data-clear-all] {
font-family: var(--font-body--family);
font-size: 0.8125rem;
color: #5a5c59;
text-decoration: underline;
margin-left: auto;
background: none;
border: none;
cursor: pointer;
}
.facets__clear-all:hover,
.facets__clear:hover { color: #00893e; }
/* Mobile: filters open in drawer */
@media (max-width: 749px) {
.facets--vertical {
border-right: none;
padding: 16px !important;
}
}
/* Hide redundant section heading "Filtri" on horizontal toolbar (vertical layout uses sidebar heading instead) */
.facets--horizontal .facets--filters-title {
display: none;
}
/* ============================================================
COLLECTION PAGE BRAND POLISH (P0 + P1)
- DODAJ pill button on product cards
- Editorial hero typography
- Brand chevrons in filter accordions
- SVG category icons next to Korist values
============================================================ */
/* Quick-add disabled at the theme-settings level (settings.quick_add = false).
Best-practice for supplements: card click → PDP, where dosage / ingredients
/ contraindications are shown before add-to-cart.
No CSS overlay needed. */
/* Hide quick-add wrapper if it ever renders (defensive, in case a setting flips back on) */
.product-grid__item quick-add-component,
.card-gallery quick-add-component {
display: none !important;
}
/* Make the entire card hover effect more pleasant since the whole card is now the CTA */
.product-grid__item .card-gallery {
transition: transform .25s ease;
}
.product-grid__item:hover .card-gallery {
transform: translateY(-3px);
}
.product-grid__item:hover img {
transform: scale(1.02);
transition: transform .35s ease;
}
/* P0 - Editorial hero on collection page
Scoped to the actual collection-heading section (not announcement bar etc).
Horizon's static collection heading lives inside `.template-collection main > .section` */
/* Headings inside main only (excludes header-group and footer-group sections) */
.template-collection main .section h1 {
font-size: clamp(2.25rem, 4.5vw, 3.5rem);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.05;
color: #363835;
margin: 0 0 12px;
}
/* P1 - Brand chevrons on filter accordion summaries */
.facets--vertical .facets__summary::after {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-left: auto;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
transition: transform .2s ease;
}
.facets--vertical details[open] > .facets__summary::after {
transform: rotate(180deg);
}
/* Hide the existing default +/- icon if any */
.facets--vertical .facets__summary svg.facets__icon,
.facets--vertical .facets__summary .facets__plus-icon,
.facets--vertical .facets__summary .facets__minus-icon {
display: none !important;
}
/* P1 reverted - SVG category icons removed (visual noise, inconsistent shapes).
Filters are clean text-only now. Counts come from Search & Discovery. */
/* P2 - More grid padding */
.template-collection .product-grid-container,
.template-collection .results-list,
.template-collection results-list {
padding-left: clamp(8px, 1vw, 16px);
}
/* ============================================================
FILTER POLISH (best-practice cleanup)
- Hide redundant "+" icon in summary headers (chevron is enough)
- Bigger, more visible checkboxes
- Active state more obvious
============================================================ */
/* Hide existing facet plus/minus/expand icons (chevron from earlier rule covers it) */
.facets--vertical .facets__summary svg:not(.icon-checkmark),
.facets--vertical .facets__summary .facets__expand-icon,
.facets--vertical .facets__summary .icon-plus,
.facets--vertical .facets__summary .icon-minus {
display: none !important;
}
/* Make sure label has room for chevron-only marker */
.facets--vertical .facets__summary {
padding-block: 14px;
}
/* Bigger Horizon checkmark visual (Horizon uses .icon-checkmark inside .checkbox__label) */
.facets--vertical .checkbox .icon-checkmark {
width: 20px !important;
height: 20px !important;
border-width: 1.5px !important;
border-radius: 5px !important;
}
/* Active/checked state: filled brand green */
.facets--vertical .checkbox__input:checked + .checkbox__label .icon-checkmark {
background-color: #00893e !important;
border-color: #00893e !important;
}
/* Hover state: green border preview */
.facets--vertical .checkbox:hover .icon-checkmark {
border-color: #00893e !important;
}
/* Bolder label when checked */
.facets--vertical .checkbox__input:checked + .checkbox__label .checkbox__label-text {
color: #006830;
font-weight: 600;
}
/* Generous spacing between filter rows */
.facets--vertical .facets__list {
gap: 12px !important;
}
.facets--vertical .checkbox__label-text {
padding-inline-start: 12px !important;
font-size: 0.9375rem;
line-height: 1.4;
}
/* ============================================================
PDP Ingredient table — brand styling for the auto-generated tables
============================================================ */
.ingredient-context {
font-family: var(--font-body--family);
color: #5a5c59;
font-size: 0.9375rem;
margin: 0 0 12px;
}
.ingredient-context strong {
color: #363835;
font-weight: 600;
}
.ingredient-data-table {
width: 100%;
border-collapse: collapse;
margin: 8px 0 16px;
font-family: var(--font-body--family);
font-size: 0.9375rem;
}
.ingredient-data-table thead th {
background: #f7f8f5;
color: #363835;
font-family: var(--font-heading--family);
font-weight: 700;
text-align: left;
padding: 12px 14px;
border-bottom: 2px solid #00893e;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ingredient-data-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid rgba(54,56,53,0.08);
color: #363835;
vertical-align: top;
line-height: 1.45;
}
.ingredient-data-table tbody tr:last-child td {
border-bottom: none;
}
.ingredient-data-table tbody tr:hover td {
background: rgba(0,137,62,0.02);
}
.ingredient-data-table td:nth-child(2),
.ingredient-data-table td:nth-child(3) {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-weight: 500;
color: #006830;
}
.ingredient-data-table em {
font-style: italic;
color: #5a5c59;
font-weight: normal;
}
.ingredient-pdv-note {
margin: 4px 0 16px;
color: #8a8c89;
font-size: 0.8125rem;
font-style: italic;
}
.ingredient-others {
color: #5a5c59;
font-size: 0.875rem;
line-height: 1.5;
margin: 12px 0 0;
padding: 12px 16px;
background: #f7f8f5;
border-left: 3px solid rgba(0,137,62,0.4);
border-radius: 0 6px 6px 0;
}
.ingredient-others strong {
color: #363835;
}
/* Fallback bullet list for low-confidence parses */
.ingredient-list {
list-style: none;
margin: 8px 0 16px;
padding: 0;
}
.ingredient-list li {
padding: 10px 0 10px 18px;
border-bottom: 1px solid rgba(54,56,53,0.06);
color: #363835;
font-family: var(--font-body--family);
font-size: 0.9375rem;
line-height: 1.45;
position: relative;
}
.ingredient-list li::before {
content: "";
position: absolute;
left: 0;
top: 18px;
width: 6px;
height: 6px;
background: #00893e;
border-radius: 50%;
}
.ingredient-list li:last-child {
border-bottom: none;
}
.ingredient-list strong {
color: #006830;
font-weight: 600;
}
.ingredient-list em {
font-style: italic;
color: #5a5c59;
}
/* Mobile */
@media (max-width: 749px) {
.ingredient-data-table thead {
font-size: 0.75rem;
}
.ingredient-data-table tbody td {
padding: 10px 8px;
font-size: 0.875rem;
}
}
/* ============================================================
HEALTH CONCERN DETAIL PAGE
============================================================ */
.sn-hc { padding: 32px 0 60px; }
.sn-hc__inner { max-width: 1180px; margin: 0 auto; }
.sn-hc__breadcrumb {
font-family: var(--font-paragraph--family);
font-size: 0.8125rem;
color: #5a5c59;
margin-bottom: 24px;
}
.sn-hc__breadcrumb a {
color: #00893e;
text-decoration: none;
}
.sn-hc__breadcrumb a:hover { text-decoration: underline; }
.sn-hc__breadcrumb span[aria-hidden] {
margin: 0 8px;
color: #b8b8b3;
}
.sn-hc__header { margin-bottom: 36px; max-width: 760px; }
.sn-hc__eyebrow {
display: inline-block;
background: #f3f9f4;
color: #006830;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 99px;
margin-bottom: 14px;
}
.sn-hc__h1 {
font-family: var(--font-heading--family);
font-size: 2.5rem;
font-weight: 700;
color: #1f2620;
margin: 0 0 14px;
letter-spacing: -0.015em;
line-height: 1.15;
}
.sn-hc__lead {
font-family: var(--font-paragraph--family);
font-size: 1.0625rem;
line-height: 1.6;
color: #363835;
margin: 0;
}
.sn-hc__layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 40px;
align-items: start;
}
.sn-hc__content { min-width: 0; }
.sn-hc__sidebar { position: sticky; top: 100px; }
.sn-hc__section { margin-bottom: 40px; }
.sn-hc__h2 {
font-family: var(--font-heading--family);
font-size: 1.5rem;
font-weight: 700;
color: #1f2620;
margin: 0 0 18px;
letter-spacing: -0.01em;
}
.sn-hc__copy {
font-family: var(--font-paragraph--family);
font-size: 0.9375rem;
line-height: 1.7;
color: #363835;
}
.sn-hc__copy p { margin: 0 0 12px; }
.sn-hc__products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.sn-hc__product {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(54,56,53,0.10);
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.sn-hc__product:hover {
border-color: rgba(0,137,62,0.30);
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(0,137,62,0.10);
}
.sn-hc__product-img {
aspect-ratio: 1 / 1;
background: #fff;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.sn-hc__product-img img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.sn-hc__product-body {
padding: 14px 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.sn-hc__product-title {
font-family: var(--font-heading--family);
font-size: 0.9375rem;
font-weight: 700;
color: #1f2620;
margin: 0;
line-height: 1.3;
}
.sn-hc__product-desc {
font-size: 0.75rem;
color: #5a5c59;
margin: 0;
line-height: 1.4;
}
.sn-hc__product-price {
font-weight: 700;
color: #00893e;
font-size: 0.9375rem;
}
.sn-hc__product-cta {
font-size: 0.75rem;
color: #006830;
}
.sn-hc__faq-item {
background: #fff;
border: 1px solid rgba(54,56,53,0.10);
border-radius: 10px;
margin-bottom: 10px;
overflow: hidden;
}
.sn-hc__faq-item summary {
padding: 14px 18px;
cursor: pointer;
font-family: var(--font-heading--family);
font-weight: 700;
font-size: 0.9375rem;
color: #1f2620;
list-style: none;
position: relative;
padding-right: 40px;
}
.sn-hc__faq-item summary::-webkit-details-marker { display: none; }
.sn-hc__faq-item summary::after {
content: '+';
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25rem;
color: #00893e;
font-weight: 400;
transition: transform 0.18s ease;
}
.sn-hc__faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.sn-hc__faq-item > div {
padding: 0 18px 16px;
font-family: var(--font-paragraph--family);
font-size: 0.875rem;
color: #5a5c59;
line-height: 1.6;
}
.sn-hc__cta-card {
background: linear-gradient(135deg, #f3f9f4 0%, #e8f3ea 100%);
border: 1px solid rgba(0,137,62,0.18);
border-radius: 14px;
padding: 22px;
margin-bottom: 20px;
}
.sn-hc__cta-card h3 {
font-family: var(--font-heading--family);
font-size: 1.0625rem;
font-weight: 700;
color: #1f2620;
margin: 0 0 8px;
}
.sn-hc__cta-card p {
font-size: 0.8125rem;
color: #5a5c59;
margin: 0 0 14px;
line-height: 1.5;
}
.sn-hc__cta {
display: inline-block;
background: #00893e;
color: #fff;
font-weight: 700;
font-size: 0.875rem;
padding: 10px 18px;
border-radius: 99px;
text-decoration: none;
}
.sn-hc__cta:hover { background: #006830; }
.sn-hc__related {
background: #fafdfa;
border: 1px solid rgba(0,137,62,0.14);
border-radius: 14px;
padding: 20px 22px;
}
.sn-hc__related h3 {
font-family: var(--font-heading--family);
font-size: 1rem;
font-weight: 700;
color: #1f2620;
margin: 0 0 12px;
}
.sn-hc__related ul {
list-style: none;
padding: 0;
margin: 0 0 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.sn-hc__related a {
color: #006830;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
}
.sn-hc__related a:hover { text-decoration: underline; }
.sn-hc__related-all {
display: inline-block;
color: #00893e;
font-weight: 700;
font-size: 0.8125rem;
text-decoration: none;
padding-top: 8px;
border-top: 1px solid rgba(0,137,62,0.14);
width: 100%;
}
@media (max-width: 900px) {
.sn-hc__h1 { font-size: 1.875rem; }
.sn-hc__layout { grid-template-columns: 1fr; }
.sn-hc__sidebar { position: static; }
}
/* ============================================================
BODY DIAGRAM — "Iskanje po težavah"
v2: anatomy hero + SVG hotspots + pathology colors + Montserrat
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
.sn-body {
padding: 48px 0 64px;
background: #fafaf8;
font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
color: #363835;
}
.sn-body__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.sn-body__header { text-align: center; margin: 0 auto 24px; max-width: 720px; }
.sn-body__breadcrumb {
font-size: 0.75rem;
color: #6b6e6a;
margin-bottom: 18px;
letter-spacing: 0.01em;
}
.sn-body__breadcrumb a {
color: #00893e;
text-decoration: none;
font-weight: 500;
}
.sn-body__breadcrumb a:hover { text-decoration: underline; }
.sn-body__breadcrumb span[aria-hidden] { margin: 0 7px; color: #b8b8b3; }
.sn-body__h1 {
font-family: 'Montserrat', sans-serif;
font-size: 2.125rem;
font-weight: 700;
color: #363835;
margin: 0 0 12px;
letter-spacing: -0.018em;
line-height: 1.15;
}
.sn-body__sub {
font-size: 1rem;
color: #6b6e6a;
margin: 0;
line-height: 1.55;
font-weight: 400;
}
.sn-body__searchbar {
position: relative;
max-width: 560px;
margin: 0 auto 32px;
}
.sn-body__searchbar-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #00893e;
pointer-events: none;
}
.sn-body__search {
width: 100%;
padding: 14px 18px 14px 48px;
font-family: 'Montserrat', sans-serif;
font-size: 0.9375rem;
font-weight: 400;
background: #fff;
border: 1px solid rgba(0,137,62,0.18);
border-radius: 10px;
color: #363835;
outline: none;
box-sizing: border-box;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sn-body__search:focus {
border-color: #00893e;
box-shadow: 0 0 0 4px rgba(0,137,62,0.10);
}
.sn-body__layout {
display: grid;
grid-template-columns: 320px 1fr;
gap: 32px;
align-items: start;
}
.sn-body__diagram-col {
position: sticky;
top: 88px;
display: flex;
flex-direction: column;
gap: 14px;
}
.sn-body__gender {
display: inline-flex;
align-self: center;
padding: 3px;
background: #ececea;
border-radius: 99px;
gap: 2px;
}
.sn-body__gender-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: transparent;
border: none;
border-radius: 99px;
font-family: 'Montserrat', sans-serif;
font-size: 0.75rem;
font-weight: 600;
color: #6b6e6a;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.sn-body__gender-btn:hover { color: #363835; }
.sn-body__gender-btn.is-active {
background: #fff;
color: #00893e;
box-shadow: 0 1px 3px rgba(54,56,53,0.10);
}
.sn-body__figure-wrap {
position: relative;
background: #fff;
border: 1px solid #ececea;
border-radius: 14px;
padding: 12px;
overflow: hidden;
aspect-ratio: 5 / 7;
}
.sn-body__figure-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.sn-body__figure-img[hidden] {
display: none !important;
}
.sn-body__figure-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.sn-body__figure-placeholder svg {
width: 70%;
height: auto;
max-height: 100%;
}
.sn-body__hotspots {
position: absolute;
inset: 12px;
width: calc(100% - 24px);
height: calc(100% - 24px);
pointer-events: none;
}
.sn-body__hot {
--sys: #00893e;
fill: rgba(0, 137, 62, 0);
stroke: rgba(0, 137, 62, 0);
stroke-width: 0.6;
cursor: pointer;
pointer-events: auto;
transition: fill 0.18s ease, stroke 0.18s ease;
}
.sn-body__hot:hover {
fill: color-mix(in srgb, var(--sys) 20%, transparent);
stroke: color-mix(in srgb, var(--sys) 70%, transparent);
}
.sn-body__hot:focus {
outline: none;
fill: color-mix(in srgb, var(--sys) 22%, transparent);
stroke: var(--sys);
}
.sn-body__hot.is-active {
fill: color-mix(in srgb, var(--sys) 30%, transparent);
stroke: var(--sys);
stroke-width: 0.9;
}
.sn-body__hot--skin { fill-rule: evenodd; }
.sn-body__hotspots--debug .sn-body__hot {
fill: color-mix(in srgb, var(--sys) 28%, transparent);
stroke: var(--sys);
stroke-width: 0.5;
}
.sn-body__active-pill {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: center;
padding: 7px 12px 7px 10px;
background: #fff;
border: 1px solid #ececea;
border-radius: 99px;
font-family: 'Montserrat', sans-serif;
font-size: 0.8125rem;
font-weight: 600;
color: #363835;
}
.sn-body__active-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #cfd0cc;
transition: background 0.18s ease;
}
.sn-body__active-clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-left: 2px;
background: rgba(54,56,53,0.06);
border: none;
border-radius: 50%;
color: #6b6e6a;
font-size: 14px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.sn-body__active-clear:hover { background: rgba(54,56,53,0.12); color: #363835; }
.sn-body__chips-label {
font-family: 'Montserrat', sans-serif;
font-size: 0.6875rem;
font-weight: 600;
color: #6b6e6a;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 4px;
text-align: center;
}
.sn-body__chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
.sn-body__chip {
--sys: #00893E;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
background: #fff;
border: 1px solid #ececea;
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 0.75rem;
font-weight: 500;
color: #363835;
cursor: pointer;
text-align: left;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
line-height: 1.25;
}
.sn-body__chip-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sys);
flex-shrink: 0;
}
.sn-body__chip:hover {
border-color: var(--sys);
background: #fafaf8;
}
.sn-body__chip.is-active {
background: var(--sys);
border-color: var(--sys);
color: #fff;
font-weight: 600;
}
.sn-body__chip.is-active .sn-body__chip-dot { background: rgba(255,255,255,0.85); }
.sn-body__problems-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
padding: 0 2px;
}
.sn-body__count {
font-family: 'Montserrat', sans-serif;
font-size: 0.8125rem;
font-weight: 500;
color: #6b6e6a;
}
.sn-body__reset-text {
background: transparent;
border: none;
font-family: 'Montserrat', sans-serif;
font-size: 0.8125rem;
font-weight: 600;
color: #00893e;
cursor: pointer;
padding: 4px 8px;
}
.sn-body__reset-text:hover { text-decoration: underline; }
.sn-body__problems {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.sn-body__card {
--sys: #00893E;
display: flex;
flex-direction: column;
padding: 14px 14px 13px;
background: #fff;
border: 1px solid #ececea;
border-left: 3px solid var(--sys);
border-radius: 10px;
text-decoration: none;
color: #363835;
font-family: 'Montserrat', sans-serif;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.sn-body__card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(54,56,53,0.08);
border-top-color: var(--sys);
border-right-color: var(--sys);
border-bottom-color: var(--sys);
}
.sn-body__card-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.625rem;
font-weight: 700;
color: var(--sys);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 7px;
}
.sn-body__card-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sys);
}
.sn-body__card-title {
font-size: 0.9375rem;
font-weight: 600;
color: #363835;
letter-spacing: -0.005em;
margin-bottom: 5px;
line-height: 1.3;
}
.sn-body__card-desc {
font-size: 0.8125rem;
color: #6b6e6a;
line-height: 1.5;
font-weight: 400;
margin-bottom: 10px;
flex: 1;
}
.sn-body__card-cta {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.75rem;
font-weight: 600;
color: #00893e;
}
.sn-body__empty {
grid-column: 1 / -1;
text-align: center;
padding: 48px 24px;
background: #fff;
border: 1px dashed rgba(0,137,62,0.20);
border-radius: 10px;
color: #6b6e6a;
font-size: 0.9375rem;
}
@media (min-width: 1100px) {
.sn-body__problems { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.sn-body { padding: 32px 0 48px; }
.sn-body__h1 { font-size: 1.625rem; }
.sn-body__layout { grid-template-columns: 1fr; gap: 24px; }
.sn-body__diagram-col { position: static; }
.sn-body__figure-wrap { max-width: 280px; margin: 0 auto; }
.sn-body__problems { grid-template-columns: 1fr; }
.sn-body__chips { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
QUIZ — "Poiščite svojo formulo"
============================================================ */
.sn-quiz {
background: #fafdfa;
border-radius: 0;
padding-top: 40px;
padding-bottom: 60px;
min-height: 80vh;
}
.sn-quiz__inner {
max-width: 880px;
margin: 0 auto;
position: relative;
}
/* Progress bar */
.sn-quiz__progress {
height: 4px;
background: rgba(0,137,62,0.10);
border-radius: 99px;
overflow: hidden;
margin-bottom: 32px;
}
.sn-quiz__bar {
height: 100%;
background: linear-gradient(90deg, #00893e 0%, #006830 100%);
border-radius: 99px;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Step show/hide */
.sn-quiz__step {
display: none;
animation: snQuizFadeIn 0.35s ease-out;
}
.sn-quiz__step.is-active {
display: block;
}
@keyframes snQuizFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Intro */
.sn-quiz__intro {
text-align: center;
padding: 40px 20px 20px;
}
.sn-quiz__eyebrow {
display: inline-block;
font-family: var(--font-paragraph--family);
font-size: 0.8125rem;
font-weight: 600;
color: #00893e;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 16px;
}
.sn-quiz__h1 {
font-family: var(--font-heading--family);
font-size: 2.5rem;
font-weight: 700;
color: #1f2620;
margin: 0 0 16px;
letter-spacing: -0.015em;
line-height: 1.1;
}
.sn-quiz__lead {
font-family: var(--font-paragraph--family);
font-size: 1.0625rem;
color: #5a5c59;
line-height: 1.55;
max-width: 540px;
margin: 0 auto 32px;
}
.sn-quiz__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
background: #00893e;
color: #fff;
font-family: var(--font-paragraph--family);
font-size: 1rem;
font-weight: 700;
border: none;
border-radius: 999px;
cursor: pointer;
letter-spacing: 0.02em;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.sn-quiz__cta:hover {
background: #006830;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0,137,62,0.20);
}
.sn-quiz__note {
margin-top: 20px;
font-size: 0.8125rem;
color: #8a8c89;
font-style: italic;
}
/* Question heading */
.sn-quiz__heading {
text-align: center;
margin-bottom: 28px;
}
.sn-quiz__step-label {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
color: #00893e;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 10px;
}
.sn-quiz__h2 {
font-family: var(--font-heading--family);
font-size: 1.75rem;
font-weight: 700;
color: #1f2620;
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.sn-quiz__sub {
font-family: var(--font-paragraph--family);
font-size: 0.9375rem;
color: #5a5c59;
margin: 0;
}
/* Options grid — primary concern (4 cols on desktop, dense) */
.sn-quiz__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.sn-quiz__grid--3 { grid-template-columns: repeat(3, 1fr); }
.sn-quiz__grid--4 { grid-template-columns: repeat(4, 1fr); }
.sn-quiz__opt {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 20px 12px;
background: #fff;
border: 1.5px solid rgba(54,56,53,0.10);
border-radius: 14px;
cursor: pointer;
font-family: var(--font-paragraph--family);
font-size: 0.875rem;
font-weight: 600;
color: #1f2620;
transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
appearance: none;
line-height: 1.3;
}
.sn-quiz__opt:hover {
border-color: #00893e;
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0,137,62,0.10);
}
.sn-quiz__opt-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: linear-gradient(135deg, #f3f9f4 0%, #e8f3ea 100%);
color: #00893e;
border-radius: 50%;
margin-bottom: 4px;
}
/* Card-style options (duration, format, age) */
.sn-quiz__opt--card {
align-items: flex-start;
text-align: left;
padding: 20px 22px;
font-size: 0.9375rem;
}
.sn-quiz__opt--card strong {
font-family: var(--font-heading--family);
font-size: 1.0625rem;
font-weight: 700;
color: #1f2620;
display: block;
margin-bottom: 6px;
}
.sn-quiz__opt--card span {
font-size: 0.8125rem;
font-weight: 400;
color: #5a5c59;
line-height: 1.45;
}
/* Result step */
.sn-quiz__results {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.sn-quiz__card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(54,56,53,0.10);
border-radius: 14px;
overflow: hidden;
position: relative;
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
text-decoration: none;
color: inherit;
}
.sn-quiz__card:hover {
border-color: rgba(0,137,62,0.30);
box-shadow: 0 14px 32px rgba(0,137,62,0.10);
transform: translateY(-2px);
}
.sn-quiz__badge {
position: absolute;
top: 12px;
left: 12px;
background: #00893e;
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 99px;
z-index: 1;
}
.sn-quiz__card-img {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
box-sizing: border-box;
}
.sn-quiz__card-img img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.sn-quiz__card-body {
padding: 16px 18px 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.sn-quiz__card-title {
font-family: var(--font-heading--family);
font-size: 0.9375rem;
font-weight: 700;
color: #1f2620;
margin: 0;
line-height: 1.3;
}
.sn-quiz__card-price {
font-weight: 700;
color: #00893e;
font-size: 1rem;
}
.sn-quiz__card-link {
font-size: 0.8125rem;
color: #006830;
margin-top: 4px;
}
.sn-quiz__cta-row {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.sn-quiz__restart,
.sn-quiz__browse {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: transparent;
border: 1.5px solid #00893e;
color: #00893e;
font-family: var(--font-paragraph--family);
font-size: 0.9375rem;
font-weight: 600;
border-radius: 99px;
cursor: pointer;
text-decoration: none;
transition: background 0.18s ease, color 0.18s ease;
}
.sn-quiz__restart:hover,
.sn-quiz__browse:hover {
background: #00893e;
color: #fff;
}
.sn-quiz__empty {
text-align: center;
padding: 40px 20px;
background: #fff;
border: 1px dashed rgba(54,56,53,0.15);
border-radius: 14px;
color: #5a5c59;
}
.sn-quiz__empty a {
color: #00893e;
font-weight: 700;
}
@media (max-width: 749px) {
.sn-quiz { padding-top: 24px; padding-bottom: 40px; }
.sn-quiz__h1 { font-size: 1.875rem; }
.sn-quiz__lead { font-size: 0.9375rem; }
.sn-quiz__h2 { font-size: 1.375rem; }
.sn-quiz__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sn-quiz__grid--3 { grid-template-columns: 1fr; }
.sn-quiz__grid--4 { grid-template-columns: 1fr 1fr; }
.sn-quiz__opt { padding: 14px 8px; font-size: 0.8125rem; }
.sn-quiz__opt-icon { width: 36px; height: 36px; }
.sn-quiz__opt-icon svg { width: 18px; height: 18px; }
.sn-quiz__opt--card { padding: 16px 16px; }
.sn-quiz__opt--card strong { font-size: 0.9375rem; }
.sn-quiz__results { grid-template-columns: 1fr; gap: 12px; }
}
/* ============================================================
KLAVIYO REVIEWS — hero star rating + full reviews section
============================================================ */
.sn-klaviyo-rating {
margin: 6px 0 4px 0;
min-height: 18px; /* reserve space so layout doesn't jump when widget loads */
}
.sn-klaviyo-rating .klaviyo-onsite-reviews-stars {
display: inline-flex;
align-items: center;
}
.sn-klaviyo-reviews-section {
margin-top: 40px;
}
.sn-klaviyo-reviews__header {
text-align: center;
margin-bottom: 24px;
}
.sn-klaviyo-reviews__title {
font-family: var(--font-heading--family);
font-size: 1.875rem;
font-weight: 700;
color: #1f2620;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.sn-klaviyo-reviews__sub {
font-family: var(--font-paragraph--family);
font-size: 0.9375rem;
color: #5a5c59;
margin: 0;
}
.sn-klaviyo-reviews-section .klaviyo-onsite-reviews-widget {
max-width: 980px;
margin: 0 auto;
}
@media (max-width: 749px) {
.sn-klaviyo-reviews__title { font-size: 1.5rem; }
.sn-klaviyo-reviews__sub { font-size: 0.875rem; }
}
/* ============================================================
PDP — PACK SAVINGS SELECTOR (1×/2×/3× tiered)
============================================================ */
/* Hide the standard quantity widget on PDPs — pack selector controls qty now.
The underlying stays in the DOM (visually-hidden, not display:none)
so the pack selector's JS can still update its value and Horizon's reactive
state continues to work. Horizon uses . */
.product-information quantity-selector-component,
.product-information .quantity-selector,
.product-information quantity-input,
.product-information .quantity-input {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
border: 0 !important;
}
.sn-pack {
margin: 18px 0;
}
.sn-pack__heading {
font-family: var(--font-heading--family);
font-size: 0.9375rem;
font-weight: 700;
color: #1f2620;
margin-bottom: 10px;
}
.sn-pack__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.sn-pack__opt {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 8px 14px;
background: #fff;
border: 2px solid #e8e8e3;
border-radius: 12px;
cursor: pointer;
font-family: var(--font-paragraph--family);
color: #363835;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
appearance: none;
font-size: 14px;
box-shadow: none;
}
.sn-pack__opt:hover {
border-color: rgba(0,137,62,0.40);
}
.sn-pack__opt.is-active {
border-color: #00893e;
box-shadow: 0 0 0 1px rgba(0,137,62,0.18);
}
.sn-pack__badge {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
font-weight: 700;
padding: 3px 10px;
border-radius: 99px;
letter-spacing: 0.04em;
white-space: nowrap;
line-height: 1;
}
.sn-pack__badge--ghost { background: transparent; padding: 0; }
.sn-pack__badge--rec { background: #00893e; color: #fff; }
.sn-pack__badge--best { background: #006830; color: #fff; }
.sn-pack__qty {
font-weight: 700;
font-size: 0.9375rem;
color: #1f2620;
margin-bottom: 4px;
}
.sn-pack__save {
font-size: 0.75rem;
font-weight: 700;
color: #00893e;
letter-spacing: 0.03em;
margin-bottom: 4px;
}
.sn-pack__price {
font-weight: 700;
font-size: 0.9375rem;
color: #1f2620;
margin-top: 2px;
}
.sn-pack__per {
font-size: 0.75rem;
color: #888880;
margin-top: 2px;
}
.sn-pack__note {
font-family: var(--font-paragraph--family);
font-size: 0.8125rem;
color: #5a5c59;
margin: 10px 0 0 0;
font-style: italic;
}
@media (max-width: 480px) {
.sn-pack__opt { padding: 22px 4px 12px; font-size: 13px; }
.sn-pack__badge { font-size: 9px; padding: 2px 7px; }
.sn-pack__qty { font-size: 0.875rem; }
.sn-pack__save { font-size: 0.6875rem; }
.sn-pack__price { font-size: 0.875rem; }
.sn-pack__per { font-size: 0.6875rem; }
}
/* ============================================================
PDP — MONEY-BACK GUARANTEE BADGE
============================================================ */
.sn-guarantee {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin: 14px 0;
background: #f9fbf9;
border: 1px solid rgba(0,137,62,0.18);
border-radius: 10px;
}
.sn-guarantee__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: #00893e;
color: #fff;
border-radius: 50%;
flex-shrink: 0;
}
.sn-guarantee__body { flex: 1; min-width: 0; }
.sn-guarantee__title {
font-family: var(--font-heading--family);
font-weight: 700;
font-size: 0.875rem;
color: #1f2620;
margin-bottom: 2px;
line-height: 1.2;
}
.sn-guarantee__sub {
font-family: var(--font-paragraph--family);
font-size: 0.75rem;
color: #5a5c59;
line-height: 1.35;
}
/* ============================================================
PDP — BENEFIT CHIPS (Opositiv-inspired, Soria-brand)
Renders a small icon-chip row of 3-4 product benefits.
============================================================ */
.sn-benefit-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 14px 0 18px 0;
padding: 0;
}
.sn-benefit-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px 10px 12px;
background: linear-gradient(135deg, #f3f9f4 0%, #e8f3ea 100%);
border: 1px solid rgba(0,137,62,0.18);
border-radius: 999px;
color: #006830;
font-family: var(--font-paragraph--family);
font-weight: 600;
font-size: 0.875rem;
letter-spacing: 0.01em;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sn-benefit-chip:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0,137,62,0.12);
}
.sn-benefit-chip__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: #00893e;
color: #fff;
border-radius: 50%;
flex-shrink: 0;
}
.sn-benefit-chip__icon svg {
width: 16px;
height: 16px;
}
.sn-benefit-chip__label { white-space: nowrap; }
@media (max-width: 749px) {
.sn-benefit-chips { gap: 8px; }
.sn-benefit-chip { padding: 8px 14px 8px 8px; font-size: 0.8125rem; }
.sn-benefit-chip__icon { width: 26px; height: 26px; }
.sn-benefit-chip__icon svg { width: 14px; height: 14px; }
}
/* ============================================================
PDP — "Za koga je primerno?" CHECKLIST
Use-case identification block, brand-green checks.
============================================================ */
.sn-foryou {
margin: 18px 0 8px 0;
padding: 20px 22px;
background: #fafdfa;
border: 1px solid rgba(0,137,62,0.14);
border-radius: 14px;
}
.sn-foryou__title {
font-family: var(--font-heading--family);
font-size: 1.0625rem;
font-weight: 700;
color: #1f2620;
margin: 0 0 4px;
letter-spacing: -0.005em;
}
.sn-foryou__sub {
font-family: var(--font-paragraph--family);
font-size: 0.8125rem;
color: #5a5c59;
margin: 0 0 14px;
line-height: 1.45;
}
.sn-foryou__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.sn-foryou__item {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: var(--font-paragraph--family);
font-size: 0.875rem;
line-height: 1.4;
color: #363835;
}
.sn-foryou__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
background: #00893e;
color: #fff;
border-radius: 50%;
margin-top: 0;
}
.sn-foryou__check svg { width: 14px; height: 14px; }
.sn-foryou__text { padding-top: 1px; }
@media (max-width: 749px) {
.sn-foryou { padding: 18px 16px; margin: 18px 0 8px; }
.sn-foryou__title { font-size: 1rem; }
}
/* ============================================================
PDP — INGREDIENT DEEP-DIVE CARDS
Hero ingredient cards under the Sestavine table.
============================================================ */
.sn-ingredient-deepdive {
margin: 40px 0 8px;
padding-top: 32px;
border-top: 1px solid rgba(54,56,53,0.08);
grid-column: 1 / -1;
}
.sn-ingredient-deepdive__header {
margin: 0 0 24px;
}
.sn-ingredient-deepdive__title {
font-family: var(--font-heading--family);
font-size: 1.5rem;
font-weight: 700;
color: #1f2620;
margin: 0 0 4px;
letter-spacing: -0.005em;
}
.sn-ingredient-deepdive__sub {
font-family: var(--font-accent--family, var(--font-paragraph--family));
font-size: 0.875rem;
font-style: italic;
color: #00893e;
margin: 0;
letter-spacing: 0.01em;
}
.sn-ingredient-deepdive__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.sn-ingredient-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(54,56,53,0.10);
border-radius: 14px;
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.sn-ingredient-card:hover {
border-color: rgba(0,137,62,0.30);
box-shadow: 0 10px 28px rgba(0,137,62,0.08);
transform: translateY(-2px);
}
.sn-ingredient-card__img {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #f7faf6;
}
.sn-ingredient-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sn-ingredient-card__body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
gap: 12px;
}
.sn-ingredient-card__name {
font-family: var(--font-heading--family);
font-size: 1.1875rem;
font-weight: 700;
color: #006830;
margin: 0;
letter-spacing: -0.005em;
}
.sn-ingredient-card__use {
font-family: var(--font-paragraph--family);
font-size: 0.875rem;
color: #363835;
margin: 0;
line-height: 1.5;
}
.sn-ingredient-card__label {
display: block;
font-weight: 700;
color: #00893e;
font-size: 0.75rem;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 4px;
}
.sn-ingredient-card__science {
font-family: var(--font-paragraph--family);
font-size: 0.875rem;
color: #5a5c59;
line-height: 1.55;
}
.sn-ingredient-card__science p { margin: 0 0 8px; }
.sn-ingredient-card__science p:last-child { margin-bottom: 0; }
@media (max-width: 749px) {
.sn-ingredient-deepdive { margin: 32px 0 8px; padding-top: 24px; }
.sn-ingredient-deepdive__title { font-size: 1.25rem; }
.sn-ingredient-deepdive__grid { grid-template-columns: 1fr; gap: 16px; }
}
/* ============================================================
PDP gallery thumbnails — Soria brand polish
Strip inherited .button padding (was collapsing image to 0px)
then size + style them to look like a proper PDP gallery.
============================================================ */
.slideshow-controls__thumbnails {
gap: 10px !important;
padding: 12px 4px !important;
}
.slideshow-controls__thumbnail,
.slideshow-controls__thumbnails .slideshow-control,
.dialog-thumbnails-list__thumbnail {
padding: 0 !important;
box-shadow: none !important;
background: transparent !important;
overflow: hidden !important;
width: 64px !important;
height: 64px !important;
min-width: 64px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 10px !important;
border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
outline: none !important;
transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
cursor: pointer;
position: relative;
}
@media (min-width: 750px) {
.slideshow-controls__thumbnail,
.slideshow-controls__thumbnails .slideshow-control,
.dialog-thumbnails-list__thumbnail {
width: 72px !important;
height: 72px !important;
min-width: 72px !important;
border-radius: 12px !important;
}
}
.slideshow-controls__thumbnail:hover,
.slideshow-controls__thumbnails .slideshow-control:hover,
.dialog-thumbnails-list__thumbnail:hover {
border-color: #00893e !important;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 137, 62, 0.12) !important;
}
.slideshow-controls__thumbnail[aria-selected='true'],
.slideshow-controls__thumbnails .slideshow-control[aria-selected='true'],
.dialog-thumbnails-list__thumbnail[aria-selected='true'] {
border: 2px solid #00893e !important;
box-shadow: 0 0 0 1px rgba(0, 137, 62, 0.15) !important;
outline: none !important;
}
.slideshow-controls__thumbnail .slideshow-controls__thumbnail-img,
.slideshow-controls__thumbnails .slideshow-control img,
.dialog-thumbnails-list__thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 8px !important;
background: #fafaf7;
}
/* Center the thumbnail strip horizontally on desktop, scroll on mobile */
.slideshow-controls__thumbnails-container {
scrollbar-width: none;
}
.slideshow-controls__thumbnails-container::-webkit-scrollbar {
display: none;
}
/* ============================================================
PDP Uporaba tab — DTC best-practice (Athletic Greens / Ritual style)
============================================================ */
.sn-howtouse {
/* keep the tab content padded */
}
.tab-content.sn-howtouse.active,
.tab-content#how.active {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
grid-template-columns: none !important;
}
.pdp-tabs .sn-howtouse__grid,
.tab-content .sn-howtouse__grid,
.sn-howtouse__grid {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 20px !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
max-width: 760px;
width: 100%;
margin: 0;
float: none !important;
}
.sn-howtouse__grid > .sn-howtouse__usage,
.sn-howtouse__grid > .sn-howtouse__warnings-inline,
.sn-howtouse__grid > .sn-howtouse__pack,
.sn-howtouse__grid > .sn-howtouse__disclaimer {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 0 0 auto !important;
grid-column: 1 / -1 !important;
grid-row: auto !important;
float: none !important;
display: block !important;
}
/* The usage card stays flex internally (icon | text) */
.sn-howtouse__grid > .sn-howtouse__usage {
display: flex !important;
flex-direction: row !important;
}
/* USAGE CARD — the headline info */
.sn-howtouse__usage {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 24px 28px;
background: linear-gradient(135deg, #f3f9f4 0%, #f7faf6 100%);
border: 1px solid rgba(0,137,62,0.18);
border-radius: 14px;
}
.sn-howtouse__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 10px;
background: #00893e;
color: #fff;
display: grid;
place-items: center;
margin-top: 2px;
}
.sn-howtouse__title {
font-family: var(--font-heading--family);
font-weight: 700;
font-size: 1.125rem;
color: #363835;
margin: 0 0 8px;
letter-spacing: -0.005em;
}
.sn-howtouse__copy {
color: #363835;
font-family: var(--font-body--family);
font-size: 1rem;
line-height: 1.55;
}
.sn-howtouse__copy p {
margin: 0 0 8px;
}
.sn-howtouse__copy p:last-child {
margin-bottom: 0;
}
.sn-howtouse__copy strong {
color: #006830;
font-weight: 600;
}
/* Hide the inherited "NASVETI ZA UPORABO ..." all-caps heading inside copy */
.sn-howtouse__heading-strip {
display: none;
}
/* WARNINGS — collapsed by default, transparent disclosure */
.sn-howtouse__warnings {
border: 1px solid rgba(54,56,53,0.15);
border-radius: 12px;
background: #fff;
overflow: hidden;
}
.sn-howtouse__warnings summary {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
cursor: pointer;
font-family: var(--font-heading--family);
font-weight: 600;
font-size: 0.9375rem;
color: #363835;
background: #fafafa;
transition: background-color .15s ease;
list-style: none;
}
.sn-howtouse__warnings summary::-webkit-details-marker {
display: none;
}
.sn-howtouse__warnings summary svg {
color: #b87a00;
flex-shrink: 0;
}
.sn-howtouse__warnings summary > span:nth-child(2) {
flex-grow: 1;
}
.sn-howtouse__chevron {
color: #5a5c59;
transition: transform .2s ease;
}
.sn-howtouse__warnings[open] .sn-howtouse__chevron {
transform: rotate(180deg);
}
.sn-howtouse__warnings:hover summary {
background: #f5f5f3;
}
.sn-howtouse__warnings-body {
padding: 18px 22px 22px;
color: #363835;
font-size: 0.9375rem;
line-height: 1.6;
border-top: 1px solid rgba(184,122,0,0.18);
background: #fffbf2;
}
.sn-howtouse__warnings-body p {
margin: 0 0 10px;
color: #363835;
}
.sn-howtouse__warnings-body p:last-child {
margin-bottom: 0;
}
.sn-howtouse__warnings-body strong {
color: #1f2620;
font-weight: 700;
}
.sn-howtouse__warnings-body a {
color: #00893e;
text-decoration: underline;
}
/* Hide the leftover "OPOZORILA IN PRIPOROČILA" header inside warnings (we have our own) */
.sn-howtouse__warnings-body p:first-child:has-text("OPOZORILA"),
.sn-howtouse__warnings-body strong:first-child {
/* Best-effort hide via CSS won't work perfectly without JS; rely on visual treatment */
}
/* DISCLAIMER — small, calm, transparent */
.sn-howtouse__disclaimer {
color: #8a8c89;
font-size: 0.8125rem;
line-height: 1.5;
font-style: italic;
margin: 0;
padding-top: 8px;
border-top: 1px dashed rgba(54,56,53,0.12);
}
@media (max-width: 749px) {
.sn-howtouse__usage {
padding: 18px 18px;
gap: 14px;
}
.sn-howtouse__icon {
width: 40px;
height: 40px;
}
.sn-howtouse__warnings summary {
padding: 12px 14px;
font-size: 0.875rem;
}
}
/* ============================================================
PDP Opis tab — proper editorial styling (not a wall of text)
============================================================ */
/* Tab body container — establish max-width and reading rhythm */
.pdp-tabs .tab-content#description {
max-width: 760px;
font-family: var(--font-body--family);
}
/* Hero/intro paragraph — first paragraph gets a slightly larger lead style */
.pdp-tabs .tab-content#description > p:first-of-type {
font-size: 1.1875rem;
line-height: 1.55;
color: #363835;
margin: 0 0 24px;
font-weight: 500;
}
/* H2 — SCALED DOWN from giant. Was inheriting 56px from collection rules */
.pdp-tabs .tab-content#description h2 {
font-size: 1.5rem !important;
font-weight: 700 !important;
line-height: 1.25 !important;
color: #00893e !important;
margin: 36px 0 14px !important;
letter-spacing: -0.005em !important;
position: relative;
padding-left: 14px;
}
.pdp-tabs .tab-content#description h2::before {
content: '';
position: absolute;
left: 0;
top: 0.35em;
width: 4px;
height: 0.7em;
background: #00893e;
border-radius: 2px;
}
/* H3 — smaller still, charcoal */
.pdp-tabs .tab-content#description h3 {
font-size: 1.125rem !important;
font-weight: 700 !important;
color: #363835 !important;
margin: 24px 0 10px !important;
letter-spacing: -0.005em !important;
}
/* Body paragraphs */
.pdp-tabs .tab-content#description p {
color: #363835;
font-size: 1rem;
line-height: 1.6;
margin: 0 0 14px;
}
/* Lists — proper bullet styling with brand-green markers */
.pdp-tabs .tab-content#description ul,
.pdp-tabs .tab-content#description ol {
margin: 16px 0 24px;
padding-left: 0;
list-style: none;
}
.pdp-tabs .tab-content#description ul li,
.pdp-tabs .tab-content#description ol li {
position: relative;
padding-left: 28px;
margin-bottom: 10px;
color: #363835;
font-size: 1rem;
line-height: 1.55;
}
.pdp-tabs .tab-content#description ul li::before {
content: '';
position: absolute;
left: 8px;
top: 0.7em;
width: 7px;
height: 7px;
background: #00893e;
border-radius: 50%;
}
.pdp-tabs .tab-content#description ol {
counter-reset: section;
}
.pdp-tabs .tab-content#description ol li {
counter-increment: section;
}
.pdp-tabs .tab-content#description ol li::before {
content: counter(section);
position: absolute;
left: 0;
top: 0;
width: 22px;
height: 22px;
background: rgba(0,137,62,0.12);
color: #006830;
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--font-heading--family);
font-size: 0.8125rem;
font-weight: 700;
line-height: 1;
}
/* Bold + strong — brand-green for emphasis cues */
.pdp-tabs .tab-content#description strong {
color: #006830;
font-weight: 600;
}
/* Pull quote — wrap last paragraph with "promise" feel.
Will trigger when paragraph is short + has bold at start. */
.pdp-tabs .tab-content#description p:has(> strong:only-child) {
font-family: var(--font-heading--family);
font-size: 1.25rem;
font-weight: 600;
color: #006830;
line-height: 1.35;
text-align: center;
margin: 32px 0;
padding: 20px 24px;
background: linear-gradient(135deg, #f3f9f4 0%, #fafdf9 100%);
border-left: 3px solid #00893e;
border-radius: 0 10px 10px 0;
letter-spacing: -0.005em;
}
.pdp-tabs .tab-content#description p:has(> strong:only-child) strong {
color: #006830;
font-weight: 600;
}
/* Optional: section divider between H2s for breathing room */
.pdp-tabs .tab-content#description h2:not(:first-child) {
padding-top: 8px;
border-top: 1px dashed rgba(54,56,53,0.08);
}
/* Short description — when rendered below price in the buy box */
.pdp-short-description {
margin: 12px 0 18px;
padding: 14px 16px;
background: linear-gradient(135deg, #f3f9f4 0%, #fafdf9 100%);
border: 1px solid rgba(0,137,62,0.18);
border-radius: 10px;
font-size: 0.9375rem;
line-height: 1.55;
color: #363835;
}
.pdp-short-description p {
margin: 0 0 8px;
}
.pdp-short-description p:last-child {
margin-bottom: 0;
}
.pdp-short-description strong {
color: #006830;
}
.pdp-short-description ul {
margin: 6px 0;
padding-left: 18px;
list-style: disc;
}
.pdp-short-description li {
margin-bottom: 4px;
}
@media (max-width: 749px) {
.pdp-tabs .tab-content#description h2 {
font-size: 1.3125rem !important;
}
.pdp-tabs .tab-content#description > p:first-of-type {
font-size: 1.0625rem;
}
}
/* ============================================================
PDP Opis tab — Visual decorations (no images required)
============================================================ */
/* Section divider with leaf icon — between H2 sections */
.pdp-tabs .tab-content#description h2:not(:first-child) {
border-top: none;
position: relative;
margin-top: 56px !important;
}
.pdp-tabs .tab-content#description h2:not(:first-child)::after {
content: '';
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
/* "Prednosti" section — convert plain ul into 2-col grid of feature chips
Triggered when ul follows a heading with "Prednosti" or "✔" content. */
.pdp-tabs .tab-content#description h2:has(+ ul) + ul:not(.no-grid) li[data-feature],
.pdp-tabs .tab-content#description ul li:has(strong:first-child) {
/* base list item already styled; this is just a hook */
}
/* When ul has ≥4 items AND we're under a "Prednosti" header → grid layout */
.pdp-tabs .tab-content#description h2 + ul,
.pdp-tabs .tab-content#description h3 + ul {
/* leave default single column for clarity */
}
/* Feature chip layout — for Prednosti sections with all-bullet feature lists.
Use selector that detects benefit-style lists (checkbox words). */
.pdp-tabs .tab-content#description ul li {
/* Already styled above with green dot bullet */
}
/* Drop cap removed — looked weird on Slovenian diacritic letters */
/* CTA-style closing line — final standalone strong paragraph */
.pdp-tabs .tab-content#description > p:last-child:has(> strong:only-child) {
margin-top: 40px;
background: #00893e;
color: #fff;
padding: 28px 32px;
border-radius: 14px;
text-align: center;
font-size: 1.25rem;
font-family: var(--font-heading--family);
font-weight: 700;
border-left: none;
letter-spacing: -0.005em;
box-shadow: 0 8px 24px rgba(0,137,62,0.18);
}
.pdp-tabs .tab-content#description > p:last-child:has(> strong:only-child) strong {
color: #fff;
}
/* H2 leaf decoration — small leaf next to H2 instead of just bar */
.pdp-tabs .tab-content#description h2::before {
content: '';
position: absolute;
left: -2px;
top: 0.3em;
width: 6px;
height: 0.85em;
background: #00893e;
border-radius: 3px;
}
/* Add a soft side-leaf SVG accent to first paragraphs after H2 */
.pdp-tabs .tab-content#description h2 + p {
position: relative;
}
/* Numbered list (program steps) — convert to visual step cards */
.pdp-tabs .tab-content#description ol {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin: 20px 0 28px;
counter-reset: step;
}
.pdp-tabs .tab-content#description ol li {
background: linear-gradient(135deg, #f7faf6 0%, #ffffff 100%);
border: 1px solid rgba(0,137,62,0.15);
border-radius: 12px;
padding: 18px 20px 18px 64px;
position: relative;
margin: 0;
counter-increment: step;
font-size: 1rem;
line-height: 1.55;
}
.pdp-tabs .tab-content#description ol li::before {
content: counter(step);
position: absolute;
left: 16px;
top: 16px;
width: 32px;
height: 32px;
background: #00893e;
color: #fff;
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--font-heading--family);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1;
}
/* Bigger spacing between H2-H3 nested */
.pdp-tabs .tab-content#description h3 {
margin-top: 28px !important;
}
/* Lead paragraph: no drop cap when very short (less than 80 chars) — could look weird */
@supports selector(:has(*)) {
.pdp-tabs .tab-content#description > p:first-of-type:not(:has(strong)) {
/* keep drop cap */
}
}
/* Fallback: if a h2 contains text "Prednosti" — subtle herb watermark behind */
/* (skipped to keep CSS-only and avoid JS dependency) */
/* ============================================================
PDP Trust strip — replace emoji-style PNG icons with brand SVGs
The cards use class .pdp-box-point with nested .icon-block + text.
============================================================ */
/* Hide the stock PNG icon images inside trust strip cards */
.pdp-box-point img,
.pdp-box-point svg.icon,
.pdp-box-point .icon-block img,
.pdp-box-point [class*="icon"] img {
display: none !important;
}
/* Restyle trust strip cards: cream tile, brand-green icon at top, charcoal label */
.pdp-box-point > div,
.pdp-box-point > .group {
background: #fff !important;
border: 1px solid rgba(0,137,62,0.15) !important;
border-radius: 12px !important;
padding: 18px 14px !important;
text-align: center !important;
position: relative;
transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.pdp-box-point > div:hover,
.pdp-box-point > .group:hover {
border-color: rgba(0,137,62,0.4) !important;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,137,62,0.08);
}
/* Inject brand SVG via ::before — different icon per card based on text content */
.pdp-box-point > div::before,
.pdp-box-point > .group::before {
content: '';
display: block;
margin: 0 auto 10px;
width: 36px;
height: 36px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* Default icon (fallback) — leaf */
.pdp-box-point > div::before,
.pdp-box-point > .group::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* GMP certificate card */
.pdp-box-point > div:has(*:is(p, span, div):where(:not(:empty))[*|text()*="GMP"]),
.pdp-box-point > div:has(p:where([class*="text"])):has(p:where(:not(:empty))) {
/* :has with text content matching is limited — use attribute selector below */
}
/* Use simple positional fallback: 1st card = certificate, 2nd = lab, 3rd = truck */
.pdp-box-point > div:nth-child(1)::before,
.pdp-box-point > .group:nth-child(1)::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Lab flask / microscope */
.pdp-box-point > div:nth-child(2)::before,
.pdp-box-point > .group:nth-child(2)::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Shipping truck (3rd) */
.pdp-box-point > div:nth-child(3)::before,
.pdp-box-point > .group:nth-child(3)::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* 4th card if it exists — leaf for natural */
.pdp-box-point > div:nth-child(4)::before,
.pdp-box-point > .group:nth-child(4)::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Card text styling — small, charcoal, line-height tight */
.pdp-box-point p,
.pdp-box-point .text-block p {
font-family: var(--font-body--family);
font-size: 0.8125rem !important;
line-height: 1.35 !important;
color: #363835 !important;
margin: 0 !important;
font-weight: 500;
}
/* Mobile */
@media (max-width: 749px) {
.pdp-box-point > div::before,
.pdp-box-point > .group::before {
width: 30px;
height: 30px;
}
.pdp-box-point p {
font-size: 0.75rem !important;
}
}
/* ============================================================
PDP Trust panel — stock + shipping cutoff + payment + delivery
FutuNatura-style status dots + info cards.
============================================================ */
.sn-trust-panel {
margin-top: 18px;
font-family: var(--font-body--family);
}
/* Status rows — green dot + text */
.sn-trust-panel__status {
list-style: none;
margin: 0 0 14px;
padding: 16px 18px;
background: #ffffff;
border: 1px solid rgba(54,56,53,0.1);
border-radius: 10px;
}
.sn-trust-status {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9375rem;
color: #363835;
padding: 6px 0;
line-height: 1.4;
}
.sn-trust-status + .sn-trust-status {
border-top: 1px dashed rgba(54,56,53,0.08);
margin-top: 2px;
padding-top: 10px;
}
.sn-trust-status strong {
color: #006830;
font-weight: 600;
}
.sn-trust-dot {
display: inline-block;
width: 9px;
height: 9px;
background: #00893e;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(0,137,62,0.12);
}
.sn-trust-status--off .sn-trust-dot {
background: #c7572d;
box-shadow: 0 0 0 4px rgba(199,87,45,0.12);
}
.sn-trust-status--off strong {
color: #c7572d;
}
/* Info cards — payment + shipping */
.sn-trust-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.sn-trust-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px;
background: #ffffff;
border: 1px solid rgba(54,56,53,0.1);
border-radius: 10px;
transition: border-color .15s ease, transform .12s ease;
}
.sn-trust-card:hover {
border-color: rgba(0,137,62,0.4);
transform: translateY(-1px);
}
.sn-trust-card__icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: grid;
place-items: center;
background: rgba(0,137,62,0.1);
color: #00893e;
border-radius: 8px;
}
.sn-trust-card__icon svg {
width: 20px;
height: 20px;
}
.sn-trust-card__title {
font-family: var(--font-heading--family);
font-size: 0.875rem;
font-weight: 700;
color: #363835;
margin-bottom: 2px;
line-height: 1.2;
}
.sn-trust-card__sub {
font-size: 0.75rem;
color: #5a5c59;
line-height: 1.35;
}
@media (max-width: 749px) {
.sn-trust-cards {
grid-template-columns: 1fr;
}
}
/* ============================================================
Defensive: any stray inside the Uporaba tab gets
styled like our brand accordion, never the browser default.
============================================================ */
.sn-howtouse details:not(.sn-howtouse__warnings) {
display: none !important; /* hide stray empty details from legacy content */
}
.sn-howtouse__copy details {
display: none !important;
}
/* Force the warnings accordion summary to ALWAYS show its label */
.sn-howtouse__warnings summary {
list-style: none !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.sn-howtouse__warnings summary::-webkit-details-marker {
display: none !important;
}
.sn-howtouse__warnings summary::marker {
display: none !important;
content: '' !important;
}
/* Make sure summary children render */
.sn-howtouse__warnings summary > *,
.sn-howtouse__warnings summary span {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ============================================================
Opozorila — inline panel (replaces the broken accordion)
============================================================ */
.sn-howtouse__warnings-inline {
border: 1px solid rgba(184,122,0,0.25);
border-radius: 12px;
background: #fffbf2;
overflow: hidden;
}
.sn-howtouse__warnings-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
font-family: var(--font-heading--family);
font-weight: 700;
font-size: 0.9375rem;
color: #8b5a00;
background: #fff7e6;
border-bottom: 1px solid rgba(184,122,0,0.18);
}
.sn-howtouse__warnings-header svg {
color: #b87a00;
flex-shrink: 0;
}
/* Hide the old accordion-style warnings if they ever render */
.sn-howtouse__warnings {
display: none !important;
}
/* ============================================================
FAQ tab — proper Q/A accordion
============================================================ */
.sn-faq {
max-width: 760px;
}
.sn-faq__title {
font-family: var(--font-heading--family);
font-size: 1.5rem;
font-weight: 700;
color: #363835;
margin: 0 0 20px;
letter-spacing: -0.005em;
}
.sn-faq__list {
display: flex;
flex-direction: column;
gap: 8px;
}
.sn-faq__item {
background: #fff;
border: 1px solid rgba(54,56,53,0.1);
border-radius: 10px;
overflow: hidden;
transition: border-color .15s ease;
}
.sn-faq__item:hover {
border-color: rgba(0,137,62,0.3);
}
.sn-faq__item[open] {
border-color: rgba(0,137,62,0.4);
background: linear-gradient(180deg, #fafdf9 0%, #ffffff 100%);
}
.sn-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
cursor: pointer;
font-family: var(--font-heading--family);
font-weight: 600;
font-size: 1rem;
color: #363835;
list-style: none;
line-height: 1.4;
}
.sn-faq__q::-webkit-details-marker { display: none; }
.sn-faq__q::marker { content: ''; display: none; }
.sn-faq__chev {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(0,137,62,0.1);
color: #00893e;
display: grid;
place-items: center;
font-size: 1.25rem;
font-weight: 700;
line-height: 1;
transition: transform .2s ease, background-color .15s ease;
}
.sn-faq__item[open] .sn-faq__chev {
transform: rotate(45deg);
background: #00893e;
color: #fff;
}
.sn-faq__a {
padding: 0 20px 18px 20px;
color: #5a5c59;
font-family: var(--font-body--family);
font-size: 0.9375rem;
line-height: 1.55;
}
.sn-faq__a p {
margin: 0 0 10px;
}
@media (max-width: 749px) {
.sn-faq__q {
padding: 14px 16px;
font-size: 0.9375rem;
}
.sn-faq__a {
padding: 0 16px 14px;
font-size: 0.875rem;
}
}
/* Packaging info row (Neto količina, Vsebina, etc.) — neutral, small */
.sn-howtouse__pack {
padding: 12px 16px;
background: #fafaf8;
border: 1px solid rgba(54,56,53,0.08);
border-radius: 10px;
font-size: 0.875rem;
color: #5a5c59;
line-height: 1.5;
}
.sn-howtouse__pack p {
margin: 0 0 6px;
}
.sn-howtouse__pack p:last-child { margin-bottom: 0; }
.sn-howtouse__pack strong {
color: #363835;
}
/* Cert chips inside trust panel */
.sn-trust-certs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed rgba(54,56,53,0.1);
}
.sn-trust-cert {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(0,137,62,0.08);
border: 1px solid rgba(0,137,62,0.2);
border-radius: 999px;
color: #006830;
font-family: var(--font-heading--family);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.02em;
white-space: nowrap;
}
.sn-trust-cert svg {
width: 14px;
height: 14px;
color: #00893e;
}
/* Paket (multi-product) ingredient sections — clean separator between products */
.sn-paket-section + .sn-paket-section {
margin-top: 32px;
padding-top: 32px;
border-top: 2px solid rgba(0,137,62,0.15);
}
.sn-paket-title {
font-family: var(--font-heading--family);
font-weight: 700;
font-size: 1.25rem;
color: #00893e;
margin: 0 0 16px;
letter-spacing: -0.005em;
padding-left: 14px;
position: relative;
}
.sn-paket-title::before {
content: '';
position: absolute;
left: 0;
top: 0.3em;
width: 4px;
height: 0.8em;
background: #00893e;
border-radius: 2px;
}
/* ============================================================
Cross-sell cards — DTC best practice: minimal info per card
============================================================ */
.product-recommendations .short-desc,
.product-recommendations .pdp-short-description {
display: none !important;
}
/* If any text element rendered as a description, truncate to 2 lines */
.product-recommendations .resource-list__item p:not(.product-type):not(.h6):not([class*="price"]) {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.875rem;
color: #5a5c59;
line-height: 1.4;
margin: 4px 0;
}
/* Card structure: tighter typography */
.product-recommendations .resource-list__item product-title,
.product-recommendations .resource-list__item .product-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: var(--font-heading--family);
font-weight: 600;
font-size: 0.9375rem;
color: #363835;
line-height: 1.3;
margin: 8px 0 4px;
min-height: 2.6em; /* reserve 2 lines so cards align */
}
/* Price */
.product-recommendations .resource-list__item .price,
.product-recommendations .resource-list__item [class*="price"]:not(.product-card__sale-badge) {
font-family: var(--font-heading--family);
font-weight: 700;
font-size: 1rem;
color: #006830;
margin-top: auto;
}
/* Card padding tighter */
.product-recommendations .resource-list__item {
padding-bottom: 12px;
}
/* ============================================================
STORE LOCATOR — "Prodajna mesta"
Leaflet + filterable list
============================================================ */
.sn-locator {
padding: 48px 0 64px;
background: #fafaf8;
font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
color: #363835;
}
.sn-locator__inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.sn-locator__header { text-align: center; margin: 0 auto 24px; max-width: 720px; }
.sn-locator__breadcrumb {
font-size: 0.75rem; color: #6b6e6a; margin-bottom: 14px; letter-spacing: 0.01em;
}
.sn-locator__breadcrumb a { color: #00893e; text-decoration: none; font-weight: 500; }
.sn-locator__breadcrumb a:hover { text-decoration: underline; }
.sn-locator__breadcrumb span[aria-hidden] { margin: 0 6px; color: #b8b8b3; }
.sn-locator__h1 {
font-family: 'Montserrat', sans-serif;
font-size: 2.125rem; font-weight: 700; color: #363835;
margin: 0 0 12px; letter-spacing: -0.018em; line-height: 1.15;
}
.sn-locator__sub {
font-size: 1rem; color: #6b6e6a; margin: 0; line-height: 1.55; font-weight: 400;
}
.sn-locator__filters {
display: flex; flex-direction: column; gap: 12px;
margin-bottom: 22px;
}
.sn-locator__search-wrap {
position: relative; max-width: 520px; margin: 0 auto; width: 100%;
}
.sn-locator__search-icon {
position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
color: #00893e; pointer-events: none;
}
.sn-locator__search {
width: 100%; padding: 12px 16px 12px 44px;
font-family: 'Montserrat', sans-serif; font-size: 0.9375rem; font-weight: 400;
background: #fff; border: 1px solid rgba(0,137,62,0.18); border-radius: 10px;
color: #363835; outline: none; box-sizing: border-box;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sn-locator__search:focus {
border-color: #00893e; box-shadow: 0 0 0 4px rgba(0,137,62,0.10);
}
.sn-locator__regions {
display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.sn-locator__region {
padding: 7px 14px;
background: #fff; border: 1px solid #ececea; border-radius: 99px;
font-family: 'Montserrat', sans-serif; font-size: 0.8125rem; font-weight: 500;
color: #363835; cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sn-locator__region:hover { border-color: #00893e; }
.sn-locator__region.is-active {
background: #00893e; color: #fff; border-color: #00893e; font-weight: 600;
}
.sn-locator__layout {
display: grid; grid-template-columns: 1fr 380px; gap: 18px;
align-items: stretch;
min-height: 620px;
}
.sn-locator__map-wrap {
position: relative;
background: #fff; border: 1px solid #ececea; border-radius: 14px; overflow: hidden;
}
.sn-locator__map {
width: 100%; height: 100%; min-height: 620px;
}
.sn-locator__count {
position: absolute; bottom: 12px; left: 12px;
padding: 6px 12px; background: rgba(255,255,255,0.95);
border: 1px solid #ececea; border-radius: 99px;
font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 600;
color: #363835; z-index: 500; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.sn-locator__list-wrap {
background: #fff; border: 1px solid #ececea; border-radius: 14px;
overflow-y: auto; max-height: 720px;
}
.sn-locator__list {
list-style: none; padding: 8px; margin: 0;
}
.sn-locator__item {
padding: 12px 14px; border-bottom: 1px solid #f0efea;
cursor: pointer;
transition: background 0.12s;
}
.sn-locator__item:hover { background: #fafaf8; }
.sn-locator__item:last-child { border-bottom: none; }
.sn-locator__item-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
margin-bottom: 4px;
}
.sn-locator__item-title {
font-size: 0.9375rem; font-weight: 600; color: #363835; line-height: 1.3;
}
.sn-locator__item-region {
font-size: 0.6875rem; font-weight: 600; color: #00893e;
text-transform: uppercase; letter-spacing: 0.06em;
background: rgba(0,137,62,0.08); padding: 2px 8px; border-radius: 99px;
white-space: nowrap;
}
.sn-locator__item-addr {
font-size: 0.8125rem; color: #6b6e6a; line-height: 1.45;
margin-bottom: 4px;
}
.sn-locator__item-phone {
font-size: 0.8125rem; color: #00893e; font-weight: 500;
margin-bottom: 6px;
}
.sn-locator__item-phone a { color: inherit; text-decoration: none; }
.sn-locator__item-phone a:hover { text-decoration: underline; }
.sn-locator__item-hours { margin-bottom: 6px; }
.sn-locator__item-hours summary {
cursor: pointer; font-size: 0.75rem; font-weight: 500; color: #6b6e6a;
list-style: none; user-select: none; padding: 2px 0;
}
.sn-locator__item-hours summary::-webkit-details-marker { display: none; }
.sn-locator__item-hours summary::before {
content: '▸'; display: inline-block; margin-right: 4px;
transition: transform 0.15s;
}
.sn-locator__item-hours[open] summary::before { transform: rotate(90deg); }
.sn-locator__hours-body {
margin-top: 4px; padding-left: 14px;
font-size: 0.75rem; color: #6b6e6a; line-height: 1.5;
}
.sn-locator__item-dir {
display: inline-block; margin-top: 4px;
font-size: 0.75rem; font-weight: 600; color: #00893e;
text-decoration: none;
}
.sn-locator__item-dir:hover { text-decoration: underline; }
.sn-locator__empty {
text-align: center; padding: 48px 20px;
color: #6b6e6a; font-size: 0.9375rem;
}
.sn-locator__error {
padding: 20px; text-align: center; color: #c5392c;
font-family: 'Montserrat', sans-serif;
}
/* Leaflet popup styling */
.sn-locator__popup { font-family: 'Montserrat', sans-serif; min-width: 200px; }
.sn-locator__popup-title {
font-size: 0.9375rem; font-weight: 700; color: #363835; margin-bottom: 6px;
}
.sn-locator__popup-addr {
font-size: 0.8125rem; color: #6b6e6a; line-height: 1.4; margin-bottom: 6px;
}
.sn-locator__popup-phone { font-size: 0.8125rem; margin-bottom: 8px; }
.sn-locator__popup-phone a {
color: #00893e; text-decoration: none; font-weight: 600;
}
.sn-locator__popup-dir {
display: inline-block; font-size: 0.75rem; font-weight: 700; color: #00893e;
text-decoration: none; padding-top: 4px;
border-top: 1px solid rgba(0,137,62,0.18);
}
.sn-locator__popup-dir:hover { text-decoration: underline; }
/* Override leaflet defaults to match brand */
.leaflet-popup-content-wrapper {
border-radius: 10px;
}
.leaflet-popup-content { margin: 12px 14px; }
.marker-cluster-small { background-color: rgba(0,137,62,0.30); }
.marker-cluster-small div { background-color: rgba(0,137,62,0.65); color: #fff; }
.marker-cluster-medium { background-color: rgba(0,137,62,0.40); }
.marker-cluster-medium div { background-color: rgba(0,137,62,0.75); color: #fff; }
.marker-cluster-large { background-color: rgba(0,137,62,0.50); }
.marker-cluster-large div { background-color: rgba(0,137,62,0.85); color: #fff; }
@media (max-width: 900px) {
.sn-locator__layout {
grid-template-columns: 1fr;
min-height: auto;
}
.sn-locator__map { min-height: 420px; }
.sn-locator__list-wrap { max-height: 520px; }
.sn-locator__h1 { font-size: 1.625rem; }
.sn-locator__regions { justify-content: flex-start; }
}
/* Leaflet attribution — keep but make subtle (OSM data license requires credit) */
.sn-locator .leaflet-control-attribution {
font-size: 9px;
color: #888880;
background: rgba(255,255,255,0.75);
padding: 1px 6px;
border-radius: 99px 0 0 0;
}
.sn-locator .leaflet-control-attribution a { color: #6b6e6a; }
/* Inline hours in list — always visible, subtle */
.sn-locator__item-hours-inline {
margin: 6px 0 8px;
font-size: 0.75rem; color: #6b6e6a; line-height: 1.5;
}
.sn-locator__item-hours-inline div { padding: 1px 0; }
/* Popup hours block */
.sn-locator__popup-hours {
font-size: 0.75rem; color: #6b6e6a; line-height: 1.45;
margin: 6px 0 8px;
padding: 6px 8px;
background: #fafaf8;
border-radius: 6px;
}
.sn-locator__popup-hours div { padding: 1px 0; }
/* Search input — force padding to not collide with icon (theme defaults override) */
.sn-locator .sn-locator__search,
.sn-locator input[type="search"].sn-locator__search {
padding-left: 44px !important;
}
/* ============================================================
STORE LOCATOR — v3 best-practice UI overrides
============================================================ */
.sn-locator__toolbar {
display: flex; gap: 10px; align-items: center;
margin: 0 auto 14px; max-width: 760px;
}
.sn-locator__toolbar .sn-locator__search-wrap { flex: 1; max-width: none; }
.sn-locator__geo {
display: inline-flex; align-items: center; gap: 7px;
padding: 11px 16px;
background: #fff;
border: 1px solid rgba(0,137,62,0.25); border-radius: 10px;
font-family: 'Montserrat', sans-serif; font-size: 0.8125rem; font-weight: 600;
color: #00893e; cursor: pointer; white-space: nowrap;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sn-locator__geo:hover { background: #00893e; color: #fff; border-color: #00893e; }
.sn-locator__geo.is-active { background: #00893e; color: #fff; border-color: #00893e; }
.sn-locator__geo.is-loading { opacity: 0.6; cursor: wait; }
.sn-locator__geo svg { flex-shrink: 0; }
.sn-locator__viewswitch {
display: none;
margin: 0 auto 14px;
padding: 3px; background: #ececea; border-radius: 99px;
gap: 2px;
}
.sn-locator__viewbtn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
flex: 1; padding: 8px 14px;
background: transparent; border: none; border-radius: 99px;
font-family: 'Montserrat', sans-serif; font-size: 0.8125rem; font-weight: 600;
color: #6b6e6a; cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.sn-locator__viewbtn.is-active {
background: #fff; color: #00893e;
box-shadow: 0 1px 3px rgba(54,56,53,0.10);
}
/* Override layout to give map more room */
.sn-locator__layout {
grid-template-columns: 1.7fr 1fr !important;
min-height: 680px !important;
gap: 16px;
}
.sn-locator__map { min-height: 680px; }
.sn-locator__list-wrap { max-height: 760px; }
/* Sticky list header */
.sn-locator__list-head {
position: sticky; top: 0; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 14px;
background: #fff; border-bottom: 1px solid #ececea;
}
.sn-locator__list-head .sn-locator__count {
position: static; padding: 0; background: none; border: none; box-shadow: none;
font-family: 'Montserrat', sans-serif; font-size: 0.8125rem; font-weight: 600;
color: #363835;
}
.sn-locator__reset {
background: transparent; border: none;
font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 600;
color: #00893e; cursor: pointer; padding: 4px 6px;
}
.sn-locator__reset:hover { text-decoration: underline; }
/* Loading state */
.sn-locator__loading {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 60px 20px; color: #6b6e6a; font-size: 0.875rem;
}
.sn-locator__loading-spinner {
width: 18px; height: 18px;
border: 2px solid #ececea; border-top-color: #00893e;
border-radius: 50%; animation: snLocSpin 0.7s linear infinite;
}
@keyframes snLocSpin { to { transform: rotate(360deg); } }
/* List item — best-practice layout */
.sn-locator__item-meta {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
margin-bottom: 6px;
}
.sn-locator__item-today {
font-size: 0.75rem; color: #6b6e6a; font-weight: 500;
}
.sn-locator__item-dist {
display: none; font-size: 0.75rem; color: #00893e; font-weight: 600;
padding: 1px 8px; background: rgba(0,137,62,0.08); border-radius: 99px;
}
.sn-locator__item-dist.is-shown { display: inline-block; }
.sn-locator__item.is-selected {
background: rgba(0,137,62,0.06) !important;
box-shadow: inset 3px 0 0 #00893e;
}
/* Badge — open/closed */
.sn-locator__badge {
display: inline-block; font-size: 0.6875rem; font-weight: 700;
padding: 2px 8px; border-radius: 99px;
text-transform: uppercase; letter-spacing: 0.04em;
}
.sn-locator__badge--open {
background: rgba(0,137,62,0.12); color: #006830;
}
.sn-locator__badge--closed {
background: rgba(232,60,77,0.12); color: #a32d2d;
}
/* Details for full hours */
.sn-locator__item-hours-details { margin: 6px 0 8px; }
.sn-locator__item-hours-details summary {
cursor: pointer; font-size: 0.75rem; font-weight: 500; color: #6b6e6a;
list-style: none; user-select: none; padding: 2px 0;
}
.sn-locator__item-hours-details summary::-webkit-details-marker { display: none; }
.sn-locator__item-hours-details summary::before {
content: '▸'; display: inline-block; margin-right: 4px;
transition: transform 0.15s;
}
.sn-locator__item-hours-details[open] summary::before { transform: rotate(90deg); }
/* Hide the inline-always hours rule from v2 (replaced with details + today badge) */
.sn-locator__item-hours-inline { display: none !important; }
/* Branded marker pin (divIcon) */
.sn-locator__pin {
background: transparent !important;
border: none !important;
}
.sn-locator__pin-inner {
display: flex; align-items: center; justify-content: center;
width: 34px; height: 42px;
position: relative;
color: #fff;
}
.sn-locator__pin-inner::before {
content: '';
position: absolute; top: 0; left: 0; width: 34px; height: 34px;
background: #00893e;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
.sn-locator__pin-inner svg {
position: relative; z-index: 1;
}
/* Branded cluster icon */
.sn-locator__cluster {
background: transparent !important;
}
.sn-locator__cluster > div {
width: 40px; height: 40px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: #00893E;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 0.875rem;
box-shadow: 0 0 0 5px rgba(0,137,62,0.20), 0 3px 8px rgba(0,0,0,0.15);
}
.sn-locator__cluster--medium > div {
background: #006830;
box-shadow: 0 0 0 6px rgba(0,104,48,0.25), 0 3px 8px rgba(0,0,0,0.18);
}
.sn-locator__cluster--large > div {
background: #004d22;
box-shadow: 0 0 0 7px rgba(0,77,34,0.30), 0 3px 8px rgba(0,0,0,0.20);
width: 48px; height: 48px;
}
/* Popup polish */
.sn-locator__popup-dist {
font-size: 0.75rem; color: #00893e; font-weight: 600;
margin: 4px 0;
}
/* Mobile tabs visible only on small screens */
@media (max-width: 900px) {
.sn-locator__layout { grid-template-columns: 1fr !important; min-height: auto !important; }
.sn-locator__map { min-height: 480px !important; }
.sn-locator__list-wrap { max-height: 560px; }
.sn-locator__viewswitch { display: flex; max-width: 320px; }
.sn-locator[data-active-view="map"] .sn-locator__list-wrap { display: none; }
.sn-locator[data-active-view="list"] .sn-locator__map-wrap { display: none; }
.sn-locator__toolbar { flex-direction: column; align-items: stretch; }
.sn-locator__geo { justify-content: center; }
}
/* Related articles section on per-concern page */
.sn-hc__related-blogs {}
.sn-hc__blogs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.sn-hc__blog-card {
display: flex; flex-direction: column;
padding: 16px 18px 14px;
background: #fff;
border: 1px solid #ececea;
border-left: 3px solid #00893E;
border-radius: 12px;
text-decoration: none;
color: #363835;
font-family: 'Montserrat', sans-serif;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.sn-hc__blog-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(54,56,53,0.10);
border-color: #00893e;
}
.sn-hc__blog-card-eyebrow {
font-size: 0.6875rem; font-weight: 700; color: #00893e;
text-transform: uppercase; letter-spacing: 0.08em;
margin-bottom: 8px;
}
.sn-hc__blog-card-title {
font-size: 0.9375rem; font-weight: 600; color: #363835;
letter-spacing: -0.005em; line-height: 1.3;
margin-bottom: 12px;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.sn-hc__blog-card-cta {
font-size: 0.75rem; font-weight: 600; color: #00893e;
}