/* OstuGrupp 1.2.132: tokens main */
:root{
--brand:#047857;
--brand-hover:#035e43;
--brand-active:#024430;
--brand-on-dark:#34d399;
--surface:#ffffff;
--surface-raised:#ffffff;
--surface-page:#f8fafc;
--surface-muted:#f1f5f9;
--surface-inverse:#0f172a;
--border:#e2e8f0;
--border-strong:#cbd5e1;
--border-inverse:#334155;
--text:#0f172a;
--text-muted:#475569;
--text-subtle:#64748b;
--text-on-dark:#ffffff;
--text-on-dark-muted:#cbd5e1;
--text-on-brand:#ffffff;
--state-success:#047857;
--state-error:#b91c1c;
--state-error-hover:#991b1b;
--state-error-active:#7f1d1d;
--state-warning:#b45309;
--state-info:#0369a1;
--state-oos:#475569;
--price:#0f172a;
--price-sale:#b91c1c;
--rating:#b45309;
--rating-empty:#cbd5e1;
--wishlist:var(--state-error);
--text-shop-name:400 14.5px/20px var(--font-text);
--text-shop-name-tracking:0;
--bp-trustbar:940px;
--brand-a1:rgb(4 120 87/.06);
--brand-a2:rgb(4 120 87/.12);
--brand-a3:rgb(4 120 87/.20);
--brand-a4:rgb(4 120 87/.32);
--brand-a5:rgb(4 120 87/.48);
--danger-a1:rgb(185 28 28/.06);
--danger-a2:rgb(185 28 28/.12);
--danger-a3:rgb(185 28 28/.20);
--danger-a4:rgb(185 28 28/.32);
--danger-a5:rgb(185 28 28/.48);
--ink-a1:rgb(15 23 42/.04);
--ink-a2:rgb(15 23 42/.08);
--ink-a3:rgb(15 23 42/.12);
--ink-a4:rgb(15 23 42/.24);
--ink-a5:rgb(15 23 42/.48);
--on-dark-a1:rgb(255 255 255/.06);
--on-dark-a2:rgb(255 255 255/.12);
--on-dark-a3:rgb(255 255 255/.20);
--on-dark-a4:rgb(255 255 255/.32);
--on-dark-a5:rgb(255 255 255/.48);
--brand-on-dark-a1:rgb(52 211 153/.06);
--brand-on-dark-a2:rgb(52 211 153/.12);
--brand-on-dark-a3:rgb(52 211 153/.20);
--brand-on-dark-a4:rgb(52 211 153/.32);
--brand-on-dark-a5:rgb(52 211 153/.48);
--brand-on-dark-hover:#5fe0b3;
--brand-on-dark-active:#25c48c;
--text-on-dark-subtle:#94a3b8;
--black-a1:rgb(0 0 0/.45);
--black-a2:rgb(0 0 0/.55);
--black-a3:rgb(0 0 0/.80);
--shadow-card-on-dark:0 1px 2px var(--black-a2),0 2px 8px var(--black-a1);
--shadow-modal-on-dark:0 24px 64px var(--black-a3);
--surface-translucent:rgb(255 255 255/.92);
--surface-translucent-strong:rgb(255 255 255/.96);
--surface-inverse-translucent:rgb(15 23 42/.92);
--scrim-photo:rgb(15 23 42/.55);
--scrim-photo-strong:rgb(15 23 42/.72);
--blur-sticky:12px;
--font-display:'Space Grotesk','Segoe UI',sans-serif;
--font-text:'DM Sans','Segoe UI',sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
--fw-regular:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--fs-2xs:12px;  --fs-xs:13px;  --fs-sm:14px;  --fs-md:16px;  --fs-lg:18px;
--fs-h1:clamp(28px,4.4vw,44px);
--fs-h2:clamp(24px,3.2vw,32px);
--fs-h3:clamp(20px,2.2vw,24px);
--fs-h4:18px;
--fs-price-lg:clamp(26px,5vw,32px);
--fs-price-md:20px;
--fs-price-sm:14px;
--lh-flat:1;
--lh-2xs:16px;  --lh-xs:18px;  --lh-sm:20px;  --lh-md:24px;  --lh-lg:28px;
--lh-h1:1.08;  --lh-h2:1.15;  --lh-h3:1.25;  --lh-h4:26px;
--lh-price-lg:1.12;  --lh-price-md:24px;  --lh-price-sm:18px;
--text-2xs:var(--fw-medium) var(--fs-2xs)/var(--lh-2xs) var(--font-text);   --text-2xs-tracking:.02em;
--text-xs:var(--fw-regular) var(--fs-xs)/var(--lh-xs) var(--font-text);     --text-xs-tracking:0;
--text-sm:var(--fw-regular) var(--fs-sm)/var(--lh-sm) var(--font-text);     --text-sm-tracking:0;
--text-md:var(--fw-regular) var(--fs-md)/var(--lh-md) var(--font-text);     --text-md-tracking:0;
--text-lg:var(--fw-regular) var(--fs-lg)/var(--lh-lg) var(--font-text);     --text-lg-tracking:0;
--label-sm:var(--fw-semibold) var(--fs-2xs)/var(--lh-flat) var(--font-text); --label-sm-tracking:.06em;
--label-md:var(--fw-semibold) var(--fs-sm)/16px var(--font-text);           --label-md-tracking:.02em;
--h1:var(--fw-bold) var(--fs-h1)/var(--lh-h1) var(--font-display);      --h1-tracking:-.02em;
--h2:var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-display);      --h2-tracking:-.015em;
--h3:var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-display);  --h3-tracking:-.01em;
--h4:var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-display);  --h4-tracking:-.005em;
--price-lg:var(--fw-bold) var(--fs-price-lg)/var(--lh-price-lg) var(--font-display); --price-lg-tracking:-.02em;
--price-md:var(--fw-bold) var(--fs-price-md)/var(--lh-price-md) var(--font-display); --price-md-tracking:-.015em;
--price-sm:var(--fw-medium) var(--fs-price-sm)/var(--lh-price-sm) var(--font-text);  --price-sm-tracking:0;
--space-2:2px;
--space-4:4px;
--space-8:8px;
--space-12:12px;
--space-16:16px;
--space-20:20px;
--space-24:24px;
--space-32:32px;
--space-40:40px;
--space-48:48px;
--space-56:56px;
--space-64:64px;
--space-80:80px;
--space-96:96px;
--tap-min:44px;
--radius-8:8px;
--radius-12:12px;
--radius-16:16px;
--radius-20:20px;
--radius-pill:999px;
--radius-circle:50%;
--shadow-card:0 1px 2px var(--ink-a1),0 2px 8px var(--ink-a2);
--shadow-card-hover:0 2px 4px var(--ink-a2),0 8px 24px var(--ink-a3);
--shadow-modal:0 24px 64px var(--ink-a4);
--shadow-sticky:0 -2px 16px var(--ink-a3);
--focus-ring:0 0 0 2px var(--surface),0 0 0 5px var(--brand);
--focus-ring-danger:0 0 0 2px var(--surface),0 0 0 5px var(--state-error);
--focus-ring-on-dark:0 0 0 2px var(--surface-inverse),0 0 0 5px var(--brand-on-dark);
--glow-brand:0 4px 16px var(--brand-a4);
--glow-brand-sm:0 1px 3px var(--brand-a3);
--bp-sm:480px;
--bp-md:768px;
--bp-lg:1024px;
--bp-xl:1280px;
--container-max:1440px;
--container-pad:16px;
--z-sticky:400;
--z-header:600;
--z-cookie:800;
--z-modal:1000;
--z-toast:1200;
--sticky-h:72px;
--dur-fast:120ms;
--dur:200ms;
--ease:cubic-bezier(.2,.6,.3,1);
}
@media (min-width:768px){ :root{ --container-pad:24px; } }
@media (min-width:1280px){ :root{ --container-pad:32px; } }
@media (prefers-reduced-motion:reduce){
:root{ --dur-fast:0ms; --dur:0ms; }
[data-pulse]{ animation:none; }
}
@keyframes oos-pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.08) } }

:root {
color-scheme: light;
--slate-dark: #1e293b;
--slate: #334155;
--green: var(--brand, #047857);
--green-dark: var(--brand-hover, #035e43);
--bg: var(--surface-page, #f8fafc);
--fg: var(--text, #0f172a);
--muted: var(--surface-muted, #f1f5f9);
--border: #e2e8f0;
--slate-300: var(--border-strong, #cbd5e1);
--slate-400: #94a3b8;
--slate-500: var(--text-subtle, #64748b);
--slate-600: var(--text-muted, #475569);
--surface: #ffffff;
--surface-2: #f8fafc;
--green-bright: var(--brand-on-dark, #34d399);
--danger: #ef4444;
--danger-dark: var(--state-error, #b91c1c);
--radius: var(--radius-12, 12px);
--radius-lg: var(--radius-16, 16px);
--radius-2xl: var(--radius-20, 20px);
--shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
--shadow-card-hover: 0 14px 32px -14px rgba(15,23,42,.22), 0 6px 12px -8px rgba(15,23,42,.10);
--shadow-nav: 0 1px 0 rgba(15,23,42,.05), 0 10px 30px -22px rgba(15,23,42,.30);
--shadow-green: 0 10px 26px -10px rgba(5,150,105,.50);
--font-display: "Space Grotesk", "Space Grotesk Fallback", "DM Sans", system-ui, sans-serif;
--font-body: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-text: "DM Sans", "DM Sans Fallback", "Segoe UI", sans-serif;
--container: 1440px;
}
@font-face {
font-family: "DM Sans Fallback";
src: local("Arial"), local("ArialMT");
font-weight: 100 550;
size-adjust: 103.07%;
ascent-override: 96.25%;
descent-override: 30.08%;
line-gap-override: 0%;
}
@font-face {
font-family: "DM Sans Fallback";
src: local("Arial Bold"), local("Arial-BoldMT");
font-weight: 551 900;
size-adjust: 100.47%;
ascent-override: 98.73%;
descent-override: 30.85%;
line-gap-override: 0%;
}
@font-face {
font-family: "Space Grotesk Fallback";
src: local("Arial"), local("ArialMT");
font-weight: 100 550;
size-adjust: 107.23%;
ascent-override: 91.77%;
descent-override: 27.23%;
line-gap-override: 0%;
}
@font-face {
font-family: "Space Grotesk Fallback";
src: local("Arial Bold"), local("Arial-BoldMT");
font-weight: 551 900;
size-adjust: 100.61%;
ascent-override: 97.81%;
descent-override: 29.02%;
line-gap-override: 0%;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (max-width: 768px) { html { scroll-padding-top: 68px; } }
body {
font-family: var(--font-body);
font-size: var(--fs-md, 16px);
line-height: 1.6;
color: var(--fg);
background: var(--bg);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, picture, svg { max-width: 100%; display: block; height: auto; }
video, iframe { max-width: 100%; }
.wp-video, .wp-video-shortcode, .mejs-container, .mejs-overlay,
.wp-block-embed__wrapper, .wp-block-video { width: 100% !important; max-width: 100% !important; }
.wp-video video, video.wp-video-shortcode, .mejs-mediaelement video,
.mejs-container video { width: 100% !important; height: auto !important; max-width: 100% !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.15; color: var(--slate-dark); font-weight: var(--fw-bold, 700); }
::selection { background: rgb(4 120 87 / .22); }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-24, 24px); }
.section-y { padding-block: var(--space-56, 56px); }
@media (min-width: 768px) { .section-y { padding-block: var(--space-80, 80px); } }
.screen-reader-text {
position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--slate-dark); color: #fff; padding: 10px 16px; z-index: 1000; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
.btn-primary, .btn-secondary {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8, 8px);
min-height: 48px; padding-inline: var(--space-24, 24px); border-radius: var(--radius);
font-weight: var(--fw-semibold, 600); font-size: 15px; transition: all .2s ease; border: 1px solid transparent;
}
.btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-green); }
.btn-primary:hover { background: var(--green-dark); transform: translateY(-2px); }
.btn-secondary { background: #fff; color: var(--slate); border-color: var(--border); box-shadow: var(--shadow-card); }
.btn-secondary:hover { border-color: rgba(5,150,105,.5); color: var(--green); transform: translateY(-2px); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.card-premium {
background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-card); overflow: hidden; transition: all .2s ease;
}
.card-premium:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: rgba(5,150,105,.3); }
.card-premium__body { padding: var(--space-16, 16px); }
.card-premium__title { font-size: var(--fs-md, 16px); }
.card-premium__title a:hover { color: var(--green); }
.announcement-bar { background: var(--slate-dark); color: #e2e8f0; font-size: var(--fs-xs, 13px); }
.announcement-bar__inner { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 38px; flex-wrap: wrap; }
.announcement-bar__msg { font-weight: var(--fw-semibold, 600); }
.announcement-bar__ship { color: var(--green-bright); font-weight: var(--fw-semibold, 600); }
.announcement-bar__ship::before { content: "·"; margin-right: var(--space-12, 12px); color: #94a3b8; }
@media (max-width: 640px) { .announcement-bar__ship { display: none; } }
.site-header { z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-nav); }
.site-header.is-sticky { position: sticky; top: 0; }
.site-header__inner { display: flex; align-items: center; gap: var(--space-24, 24px); height: 72px; }
.site-logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.site-header .site-logo__img, .site-header .custom-logo { display: block; height: 26px; width: auto; }
@media (min-width: 768px)  { .site-header .site-logo__img, .site-header .custom-logo { height: 30px; } }
@media (min-width: 1024px) { .site-header .site-logo__img, .site-header .custom-logo { height: 30px; } }
.site-wordmark__accent { color: var(--green); }
.site-nav { display: none; }
.site-nav__menu { display: flex; gap: 18px; }
.site-nav__menu a { font-weight: var(--fw-medium, 500); color: var(--slate); transition: color .2s; }
.site-nav__menu a:hover { color: var(--green); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-12, 12px); margin-left: auto; }
.header-search { display: none; align-items: center; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.header-search input { border: 0; background: transparent; padding: 10px 14px; min-width: 180px; outline: none; }
.header-search button { background: var(--green); color: #fff; border: 0; width: 44px; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: var(--lh-flat, 1); transition: background .2s ease; }
.header-search button:hover { background: var(--green-dark); }
.header-search:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.header-search input:focus-visible { outline: none; }
.header-account, .header-cart { font-weight: var(--fw-semibold, 600); color: var(--slate); padding: var(--space-8, 8px) var(--space-12, 12px); border-radius: var(--radius); transition: background .2s; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.header-account:hover, .header-cart:hover { background: var(--muted); color: var(--green); }
.header-cart__count { background: var(--green); color: #fff; border-radius: var(--radius-pill, 999px); min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-2xs, 12px); font-weight: var(--fw-bold, 700); padding: 0 6px; }
.header-cart__count.is-empty { display: none; }
.mobile-menu-toggle { display: inline-flex; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); width: 44px; height: 44px; align-items: center; justify-content: center; font-size: 20px; }
@media (min-width: 1024px) {
.site-nav { display: block; }
.header-search { display: flex; }
.mobile-menu-toggle { display: none; }
}
.site-footer { background: var(--slate-dark); color: #cbd5e1; margin-top: var(--space-64, 64px); padding-block: var(--space-56, 56px) var(--space-24, 24px); }
.site-footer a { color: #cbd5e1; transition: color .2s; }
.site-footer a:hover { color: #fff; }
.site-footer__cols { display: grid; grid-template-columns: 1fr; gap: var(--space-32, 32px); padding-bottom: var(--space-40, 40px); border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-widget__title { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-12, 12px); }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-16, 16px); justify-content: space-between; align-items: center; padding-top: var(--space-24, 24px); font-size: 14px; color: #94a3b8; }
.site-footer__menu { display: flex; gap: var(--space-20, 20px); flex-wrap: wrap; }
@media (min-width: 640px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); } }
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-20, 20px); }
@media (min-width: 768px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(4, 1fr); } }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-8, 8px); font-size: var(--fs-2xs, 12px); font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: .14em; color: var(--green); margin-bottom: 10px; }
.home-section__title { font-size: clamp(24px, 3.5vw, 36px); margin-bottom: 0; }
.home-section__head { max-width: 640px; margin-bottom: var(--space-32, 32px); }
.home-section__head .eyebrow { margin-bottom: var(--space-12, 12px); }
.home-section__head .home-section__title { margin-bottom: 0; }
.home-section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-20, 20px); max-width: none; flex-wrap: wrap; }
.home-section__more { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold, 600); font-size: 15px; color: var(--green); white-space: nowrap; transition: gap .2s ease, color .2s ease; padding-bottom: var(--space-4, 4px); }
.home-section__more:hover { color: var(--green-dark); gap: 10px; }
.home-hero { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: #fff; position: relative; overflow: hidden; }
.home-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 20%, rgb(4 120 87 / .18) 0%, transparent 60%); pointer-events: none; }
.home-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(80% 70% at 70% 30%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(80% 70% at 70% 30%, #000 0%, transparent 70%); pointer-events: none; }
.home-hero__inner { padding-block: 88px; position: relative; z-index: 1; }
.home-hero__content { max-width: 660px; }
.home-hero .eyebrow { color: var(--green-bright); background: rgba(52,211,153,.12); padding: 6px 14px; border-radius: var(--radius-pill, 999px); border: 1px solid rgba(52,211,153,.22); }
.home-hero__title { color: #fff; font-size: clamp(36px, 6.4vw, 64px); line-height: 1.04; margin: 18px 0; letter-spacing: -.03em; }
.home-hero__title span { color: var(--green-bright); }
.home-hero__sub { color: #cbd5e1; font-size: clamp(17px, 2vw, 19px); line-height: 1.6; max-width: 560px; }
.home-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 26px; }
.home-hero__cta .btn-primary,
.home-hero__cta .btn-secondary { min-height: 54px; padding-inline: 28px; }
.home-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.home-hero__chips li { display: inline-flex; align-items: center; gap: var(--space-8, 8px); padding: 8px 14px 8px 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius-pill, 999px); color: #e2e8f0; font-size: 13.5px; font-weight: var(--fw-semibold, 600); }
.home-hero__chips li::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-pill, 999px); background: rgba(52,211,153,.16); color: var(--green-bright); font-size: 11px; font-weight: var(--fw-bold, 700); }
.home-hero__grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.home-hero--split .home-hero__content { max-width: 620px; }
@media (min-width: 900px) {
.home-hero--split .home-hero__grid { grid-template-columns: 1.15fr .85fr; gap: 28px; }
.home-hero--split .home-hero__content { max-width: none; }
}
.home-hero__products { display: flex; flex-direction: column; gap: var(--space-12, 12px); }
.home-hero__plabel { display: inline-flex; align-items: center; gap: var(--space-8, 8px); align-self: flex-start; padding: 7px 14px; border-radius: var(--radius-pill, 999px); background: rgba(52,211,153,.10); border: 1px solid rgba(52,211,153,.24); color: var(--green-bright); font-family: var(--font-display); font-size: var(--fs-2xs, 12px); font-weight: var(--fw-bold, 700); letter-spacing: .12em; text-transform: uppercase; }
.home-hero__plabel-star { color: var(--green-bright); font-size: var(--fs-xs, 13px); line-height: var(--lh-flat, 1); }
.home-mini-card { display: flex; align-items: center; gap: var(--space-12, 12px); padding: 9px; background: #fff; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); box-shadow: 0 12px 28px -16px rgba(0,0,0,.55); transition: transform .2s ease, box-shadow .2s ease; }
.home-mini-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(0,0,0,.6); }
.home-mini-card:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; }
.home-mini-card__media { flex: none; width: 52px; height: 52px; border-radius: 9px; background: var(--muted); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.home-mini-card__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-4, 4px); }
.home-mini-card__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-mini-card__title { font-family: var(--font-body); font-size: 12.5px; font-weight: var(--fw-medium, 500); color: var(--slate-dark); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-mini-card__price { font-family: var(--font-display); font-size: 14.5px; font-weight: var(--fw-bold, 700); color: var(--green); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-mini-card__price del { color: var(--slate-400); font-weight: var(--fw-medium, 500); font-size: var(--fs-2xs, 12px); margin-right: 5px; }
.home-mini-card__price ins { text-decoration: none; color: var(--price-sale, #b91c1c); }
.product-card .price del,
.single-product .price del,
.home-mini-card__price del,
.og-ls-price del,
.ostu-cs-card__price del,
.sticky-atc__price del,
.ostu-bundle__price del,
.ostu-fbt-card__price del,
.og-mega__rail-price del,
.search-result__price .price del,
.ostu-qv-product__price del,
.ostu-wl-card .price del,
.ostu-cmp-table__price del { color: var(--slate-500) !important; opacity: 1 !important; }
@media (min-width: 768px) and (max-width: 899px) {
.home-hero__products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12, 12px); align-items: stretch; }
.home-hero__plabel { grid-column: 1 / -1; }
.home-mini-card { height: 100%; }
.home-mini-card__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.home-props { background: var(--surface); border-bottom: 1px solid var(--border); }
.home-props__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-16, 16px); padding-block: var(--space-32, 32px); }
@media (min-width: 480px) { .home-props__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .home-props__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .home-props__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .home-props__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: var(--space-40, 40px); } }
.home-props__grid > * { min-width: 0; }
.home-prop { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.home-prop:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: rgba(5,150,105,.3); }
.home-prop__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: rgb(4 120 87 / .09); color: var(--green); }
.home-prop__icon svg { width: 24px; height: 24px; }
.home-seasonal__inner { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); color: #fff; border-radius: var(--radius-2xl); padding: clamp(28px, 5vw, 56px); }
.home-seasonal__inner::before { content: ""; position: absolute; right: -90px; top: -90px; width: 340px; height: 340px; border-radius: var(--radius-circle, 50%); background: radial-gradient(circle, rgba(52, 211, 153, .28), transparent 70%); pointer-events: none; }
.home-seasonal__eyebrow { position: relative; display: inline-block; font-size: var(--fs-2xs, 12px); font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: .14em; color: var(--green-bright); margin-bottom: 14px; }
.home-seasonal__title { position: relative; font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 44px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 22px; max-width: 640px; }
.home-seasonal__cta { position: relative; display: inline-flex; align-items: center; gap: var(--space-8, 8px); background: #fff; color: var(--green-dark); font-weight: var(--fw-bold, 700); padding: 13px 24px; border-radius: var(--radius-pill, 999px); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45); transition: transform .2s ease; }
.home-seasonal__cta:hover { transform: translateY(-2px); color: var(--green-dark); }
.home-prop__title { font-family: var(--font-display); font-size: 15.5px; font-weight: var(--fw-bold, 700); color: var(--slate-dark); line-height: 1.25; }
.home-prop__text { color: var(--slate-500); font-size: 13.5px; line-height: 1.5; margin-top: 5px; }
.home-promo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: var(--space-8, 8px); padding: 22px 26px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%); border: 1px solid rgb(4 120 87 / .18); }
.home-promo__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: #fff; color: var(--green); box-shadow: var(--shadow-card); }
.home-promo__icon svg { width: 26px; height: 26px; }
.home-promo__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; }
.home-promo__title { font-family: var(--font-display); font-size: 17px; font-weight: var(--fw-bold, 700); color: var(--slate-dark); }
.home-promo__sub { color: var(--slate-600); font-size: 14px; line-height: 1.5; }
.home-promo__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold, 600); font-size: 15px; color: var(--green); white-space: nowrap; transition: gap .2s ease, color .2s ease; }
.home-promo__cta:hover { color: var(--green-dark); gap: 10px; }
.home-cta { background: linear-gradient(135deg, #047857 0%, #065f46 100%); color: #fff; margin-top: var(--space-64, 64px); position: relative; overflow: hidden; }
.home-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 120% at 80% 0%, rgba(255,255,255,.12) 0%, transparent 60%); pointer-events: none; }
.home-cta__inner { padding-block: 72px; text-align: center; position: relative; z-index: 1; }
.home-cta__inner h2 { color: #fff; font-size: clamp(26px, 4vw, 40px); }
.home-cta__inner p { color: #fff; max-width: 520px; margin: 12px auto 26px; font-size: 17px; }
.home-cta__inner .btn-primary { background: #fff; color: var(--green-dark); box-shadow: 0 10px 30px -10px rgba(0,0,0,.3); }
.home-cta__inner .btn-primary:hover { background: #f1f5f9; }
.home-cta__inner .btn-primary { min-height: 54px; padding-inline: 30px; }
.home-rail .home-section__head--row { margin-bottom: var(--space-24, 24px); }
@media (min-width: 1100px) {
.home-rail ul.products,
.home-rail .woocommerce ul.products { grid-template-columns: repeat(5, 1fr); gap: 14px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
.home-rail ul.products,
.home-rail .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
.home-rail ul.products li.product .product-card__body { padding: var(--space-12, 12px); gap: 5px; }
.home-rail ul.products li.product .product-card__media img { padding: 11px; }
.home-rail ul.products li.product .woocommerce-loop-product__title { font-size: 14px; line-height: 1.35; }
.home-rail ul.products li.product .price { font-size: 18px; }
.home-rail ul.products li.product .price del { font-size: var(--fs-2xs, 12px); }
.home-rail ul.products li.product .star-rating { font-size: var(--fs-2xs, 12px); }
.home-rail ul.products li.product .product-card__actions { gap: 6px; margin-top: 6px; }
.home-rail ul.products li.product .product-card__actions .button,
.home-rail ul.products li.product .product-card__actions a.add_to_cart_button { min-height: 44px; font-size: 13.5px; padding-inline: 14px; }
.home-rail ul.products li.product .product-card__tools { gap: 6px; }
.home-section__head { margin-bottom: 36px; }
#kategooriad .home-section__head { max-width: 720px; }
.home-rail { padding-block: var(--space-56, 56px); }
@media (min-width: 768px) { .home-rail { padding-block: 72px; } }
@media (max-width: 767px) {
.container { padding-inline: 18px; }
.home-hero__inner { padding-block: 48px 44px; }
.home-hero__grid { grid-template-columns: 1fr; gap: 28px; align-items: stretch; }
.home-hero--split .home-hero__content { max-width: none; }
.home-hero__title { font-size: clamp(30px, 9vw, 40px); margin: 14px 0; line-height: 1.08; }
.home-hero__sub { font-size: var(--fs-md, 16px); max-width: none; }
.home-hero__cta { gap: var(--space-12, 12px); margin: 24px 0 22px; }
.home-hero__cta .btn-primary,
.home-hero__cta .btn-secondary { flex: 1 1 100%; width: 100%; justify-content: center; min-height: 54px; }
.home-hero__chips { gap: var(--space-8, 8px); }
.home-hero__chips li { font-size: 12.5px; padding: 7px 12px 7px 10px; }
.home-hero__products { gap: 10px; }
.home-mini-card { padding: 10px; gap: var(--space-12, 12px); min-height: 64px; }
.home-mini-card__media { width: 56px; height: 56px; }
.home-mini-card__title { font-size: var(--fs-xs, 13px); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-mini-card__price { font-size: 15px; }
.home-section__head { margin-bottom: 22px; }
.home-section__title { font-size: clamp(22px, 6.4vw, 28px); }
.home-section__head--row { align-items: center; gap: 10px 16px; }
.home-section__more { font-size: 14px; min-height: 44px; padding-block: var(--space-8, 8px); padding-bottom: var(--space-8, 8px); }
.home-props__grid { gap: var(--space-12, 12px); padding-block: 26px; }
.home-prop { padding: var(--space-16, 16px); gap: 13px; align-items: center; }
.home-prop__icon { width: 42px; height: 42px; }
.home-prop__title { font-size: 15px; }
.home-prop__text { font-size: var(--fs-xs, 13px); margin-top: 3px; }
.home-rail { padding-block: var(--space-40, 40px); }
.home-rail .home-section__head--row { margin-bottom: 18px; }
.home-rail ul.products,
.home-rail .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-12, 12px); }
.home-promo { flex-direction: column; align-items: flex-start; text-align: left; gap: 14px; padding: var(--space-20, 20px); }
.home-promo__text { flex: 1 1 auto; }
.home-promo__title { font-size: var(--fs-md, 16px); }
.home-promo__cta { align-self: stretch; justify-content: center; min-height: 48px; border-radius: var(--radius); background: var(--green); color: #fff; padding-inline: 18px; }
.home-promo__cta:hover { background: var(--green-dark); color: #fff; }
.home-cta { margin-top: var(--space-48, 48px); }
.home-cta__inner { padding-block: 52px; }
.home-cta__inner h2 { font-size: clamp(24px, 7vw, 30px); }
.home-cta__inner p { font-size: var(--fs-md, 16px); margin: 12px auto 22px; }
.home-cta__inner .btn-primary { width: 100%; max-width: 360px; justify-content: center; min-height: 54px; }
}
@media (max-width: 380px) {
.home-rail ul.products,
.home-rail .woocommerce ul.products { gap: 10px; }
}
.ostu-emptystate { max-width: 46rem; margin: 0 auto; padding: var(--space-48, 48px) 0 var(--space-24, 24px); text-align: center; }
.ostu-emptystate__title {
font-family: var(--font-display, 'Space Grotesk'), sans-serif;
font-size: clamp(24px, 3.4vw, 34px); font-weight: var(--fw-bold, 700); line-height: 1.2;
color: var(--slate-dark); margin: 0 0 10px; text-wrap: balance;
}
.ostu-emptystate__text { color: var(--slate-600); font-size: var(--fs-md, 16px); line-height: 1.65; margin: 0 0 var(--space-24, 24px); }
.ostu-emptystate__actions { display: flex; flex-wrap: wrap; gap: var(--space-12, 12px); justify-content: center; margin: 0; }
@media (max-width: 560px) {
.ostu-emptystate { padding-top: var(--space-32, 32px); }
.ostu-emptystate__actions .btn-primary,
.ostu-emptystate__actions .btn-secondary { flex: 1 1 100%; justify-content: center; }
}
.is-busy { opacity: .8; pointer-events: none; }
.btn-primary:disabled, .btn-secondary:disabled,
.btn-primary[aria-disabled="true"], .btn-secondary[aria-disabled="true"] {
opacity: .6; box-shadow: none; transform: none; pointer-events: none;
}
@media (min-width: 768px) and (max-width: 1023px) {
.home-section__more {
min-height: 44px;
padding-block: var(--space-8, 8px);
padding-bottom: var(--space-8, 8px);
}
.home-promo__cta {
min-height: 44px;
padding-inline: var(--space-12, 12px);
}
}
.oga-cc-btn.oga-cc-btn { min-height: 44px; }
body.og-cc-footer-link .oga-cc-float {
display: none !important;
}
.site-footer__cc {
margin: 0;
}
.site-footer__cc a {
color: inherit;
text-decoration: underline;
text-decoration-color: rgba(148, 163, 184, .5);
text-underline-offset: 3px;
}
.site-footer__cc a:hover {
color: #fff;
}
@media (max-width: 1023.98px) {
body.og-calm-float .back-to-top {
display: none;
}
}
body.og-checkout-focus .announcement-bar,
body.og-checkout-focus .og-catrail,
body.og-checkout-focus .og-bottomnav {
display: none;
}
@media (max-width: 1023.98px) {
body.og-checkout-focus {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
html:has(body.og-checkout-focus) {
scroll-padding-bottom: 12px;
}
}
body.og-tight-top:not(.og-pt-compact) .woo-content.section-y,
body.og-tight-top .page-wrap.section-y,
body.og-tight-top .search-results.section-y {
padding-top: var(--space-16, 16px);
}
@media (min-width: 768px) {
body.og-tight-top .woo-content.section-y,
body.og-tight-top .page-wrap.section-y,
body.og-tight-top .search-results.section-y {
padding-top: 28px;
}
}
.announcement-bar .announcement-bar__inner.has-ll {
display: block;
padding-block: 0;
}
.og-ll {
position: relative;
height: 38px;
overflow: hidden;
}
.og-ll__row {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 0;
white-space: nowrap;
color: inherit;
text-decoration: none;
transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease;
}
.og-ll__row.is-in {
transform: translateY(100%);
opacity: 0;
transition: none;
}
.og-ll__row.is-out {
transform: translateY(-100%);
opacity: 0;
}
.og-ll__row--own {
gap: 14px;
}
.og-ll__row--own .announcement-bar__msg,
.og-ll__txt {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.og-ll__txt b {
color: #fff;
font-weight: var(--fw-semibold, 600);
}
.og-ll__txt em {
font-style: normal;
color: var(--slate-400, #94a3b8);
}
.og-ll__img {
flex: 0 0 auto;
width: 22px;
height: 22px;
border-radius: 6px;
background-color: #fff;
object-fit: contain;
}
.og-ll__dot {
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--green-bright, #34d399);
box-shadow: 0 0 0 3px rgba(52, 211, 153, .2);
}
@media (hover: hover) {
a.og-ll__row:hover .og-ll__txt {
text-decoration: underline;
text-underline-offset: 3px;
}
}
@media (max-width: 640px) {
.og-ll {
height: 44px;
}
.og-ll__row--own {
white-space: normal;
text-align: center;
line-height: 1.3;
}
.og-ll__row--own .announcement-bar__msg {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
@media (prefers-reduced-motion: reduce) {
.og-ll__row {
transition: none;
}
}
@media (max-width: 767px) {
body.og-card-compact ul.products li.product-card:not(.ostu-wl-card) .product-card__body {
position: relative;
gap: 4px;
padding: 10px 10px 12px;
}
body.og-card-compact ul.products li.product-card .woocommerce-loop-product__title,
body.og-card-compact ul.products li.product-card .product-card__title-text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.6em;
font-size: 13.5px;
line-height: 1.3;
white-space: normal;
}
body.og-card-compact ul.products li.product-card .product-card__body .price {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 40px;
margin: auto 0 0;
padding-right: 48px;
font-size: 17px;
line-height: 1.15;
}
body.og-card-compact ul.products li.product-card .product-card__body .price del {
font-size: 12px;
}
body.og-card-compact ul.products li.product-card:not(.ostu-wl-card) .product-card__actions {
position: absolute;
right: 10px;
bottom: 12px;
width: 40px;
margin: 0;
gap: 0;
}
body.og-card-compact ul.products li.product-card .product-card__actions .product-card__tools,
body.og-card-compact ul.products li.product-card .product-card__actions .added_to_cart {
display: none;
}
body.og-card-compact ul.products li.product-card .product-card__actions a.button,
body.og-card-compact ul.products li.product-card .product-card__actions .product-card__oos {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
min-width: 40px;
height: 40px;
min-height: 40px;
padding: 0;
border-radius: 12px;
font-size: 0;
line-height: 0;
gap: 0;
overflow: hidden;
}
body.og-card-compact ul.products li.product-card .product-card__actions a.add_to_cart_button:not(.added)::before {
display: block;
width: 20px;
height: 20px;
}
body.og-card-compact ul.products li.product-card .product-card__actions a.button:not(.add_to_cart_button)::before,
body.og-card-compact ul.products li.product-card .product-card__actions .product-card__oos::before {
content: "";
display: block;
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}
body.og-card-compact ul.products li.product-card .product-card__actions .product-card__oos {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border, #e2e8f0);
color: var(--slate, #334155);
}
body.og-card-compact ul.products li.product-card .product-card__actions a.add_to_cart_button.added::after {
content: "";
display: block;
margin: 0;
width: 18px;
height: 18px;
background-color: #fff;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
}