/* ==========================================================================
SkinKick — Design System
Vanilla CSS for Shoptet. All classes namespaced `sk-` to avoid collisions.
See BRAND-GUIDELINES.md for the full system.
NOTE ON UNITS: Shoptet's theme sets the root font-size to 14px, which
would make `1rem` = 14px. Since we already override the theme heavily, we
force `html { font-size: 16px }` (below) so `1rem` = 16px, and use `rem` for
sizing throughout. Borders (1px), shadow offsets, media-query breakpoints,
and the --maxw/--radius layout tokens stay in px on purpose.
Fonts (add once in ):
https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Jost:wght@400;500;600&display=swap
========================================================================== */
/* Shoptet sets font-size:14px on ; drives rem. Force BOTH to 16px
so 1rem = 16px AND body-inherited text is not stuck at 14px. */
html,
body {
font-size: 16px !important;
}
/* ---- Tokens ------------------------------------------------------------- */
:root {
/* core */
--sk-bg: #F0ECE8;
--sk-bg-alt: #EDE7E1;
--sk-surface: #FAF8F6;
--sk-ink: #241E19;
--sk-body: #6A6058;
--sk-muted: #9A8C80;
/* accents */
--sk-clay: #C69881;
--sk-clay-dark: #B07F66;
--sk-rose: #B99682;
--sk-gold: #B6907B;
/* lines & shadow */
--sk-border: #E4D9CF;
--sk-border-soft: rgba(36, 30, 25, .08);
--sk-shadow: 0 24px 60px -24px rgba(54, 40, 30, .28);
/* type */
--sk-serif: "Cormorant Garamond", "Times New Roman", serif;
--sk-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
--fs-hero: clamp(2.75rem, 6vw, 5rem);
--fs-h2: clamp(2.125rem, 4.5vw, 3.5rem);
--fs-h3: clamp(1.3125rem, 2vw, 1.625rem);
--fs-eyebrow: clamp(0.6875rem, 1vw, 0.8125rem);
--fs-body: clamp(1rem, 1.2vw, 1.125rem);
--fs-lead: clamp(1.125rem, 1.6vw, 1.375rem);
/* layout */
--space-section: clamp(3.5rem, 8vw, 7rem);
--space-gutter: clamp(1.25rem, 5vw, 4rem);
--maxw: 1418px;
--radius: 4px;
--radius-lg: 10px;
--radius-pill: 999px;
}
/* ---- Scoped reset ------------------------------------------------------- */
.sk-section,
.sk-section * {
box-sizing: border-box;
}
.sk-section {
font-family: var(--sk-sans);
color: var(--sk-body);
font-size: var(--fs-body);
line-height: 1.65;
background: var(--sk-bg);
padding: var(--space-section) 0;
-webkit-font-smoothing: antialiased;
}
.sk-section img {
max-width: 100%;
height: auto;
display: block;
}
.sk-section p {
margin: 0;
}
.sk-container {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--space-gutter);
}
/* ---- Typography helpers ------------------------------------------------- */
.sk-eyebrow {
font-family: var(--sk-sans);
font-weight: 500;
font-size: var(--fs-eyebrow);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--sk-rose);
text-wrap: balance;
margin: 0;
}
.sk-sep {
color: var(--sk-gold);
}
.sk-h1,
.sk-h2,
.sk-h3 {
font-family: var(--sk-serif);
color: var(--sk-ink);
font-weight: 500;
line-height: 1.08;
letter-spacing: -.01em;
text-wrap: balance;
margin: 0;
}
.sk-h1 {
font-size: var(--fs-hero);
}
.sk-h2 {
font-size: var(--fs-h2);
}
.sk-h3 {
font-size: var(--fs-h3);
line-height: 1.15;
}
.sk-lead {
font-size: var(--fs-lead);
color: var(--sk-body);
max-width: min(46ch, 100%);
text-wrap: balance;
}
/* branded text selection, scoped so it never touches the rest of the Shoptet theme */
.sk-section ::selection {
background: var(--sk-clay);
color: #fff;
}
.sk-link {
color: inherit;
text-decoration: none;
transition: color .2s ease;
}
.sk-link:hover {
color: var(--sk-clay-dark);
}
/* ---- Buttons ------------------------------------------------------------ */
.sk-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
font-family: var(--sk-sans);
font-weight: 600;
font-size: 0.8125rem;
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
padding: 1.0625rem 2.125rem;
border-radius: var(--radius);
border: 1px solid transparent;
cursor: pointer;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sk-btn--primary {
background: var(--sk-clay);
color: #fff !important;
/* override Shoptet theme's global link color */
}
.sk-btn--primary:hover {
background: var(--sk-clay-dark);
color: #fff !important;
}
.sk-btn--outline {
background: transparent;
color: var(--sk-ink);
border-color: var(--sk-ink);
}
.sk-btn--outline:hover {
background: var(--sk-ink);
color: #fff !important;
}
/* outline on a dark/photo background */
.sk-btn--outline-light {
background: transparent;
color: #fff !important;
border-color: rgba(255, 255, 255, .7);
}
.sk-btn--outline-light:hover {
background: #fff;
color: var(--sk-ink) !important;
}
/* ---- Icons -------------------------------------------------------------- */
.sk-icon {
width: 2.25rem;
height: 2.25rem;
stroke: var(--sk-gold);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
flex: none;
}
.sk-icon--sm {
width: 1.25rem;
height: 1.25rem;
}
/* ---- Media placeholder (drop real photos in later) ---------------------- */
.sk-media {
background: linear-gradient(135deg, #EFE5DC 0%, #E3D2C6 55%, #D9C2B3 100%);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
min-height: 17.5rem;
}
.sk-media::after {
content: "Fotografie";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--sk-sans);
font-size: 0.75rem;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(36, 30, 25, .32);
}
/* =========================================================================
HERO (titul.webp)
========================================================================= */
.sk-hero {
background: linear-gradient(120deg, var(--sk-bg) 0%, #ECE0D7 100%);
position: relative;
}
/* when a real photo is set: add class sk-hero--photo and a background-image on .sk-hero__bg */
.sk-hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center bottom;
}
.sk-hero--photo .sk-hero__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(36, 30, 25, .72) 0%, rgba(36, 30, 25, .42) 50%, rgba(36, 30, 25, .2) 100%);
}
.sk-hero--photo .sk-hero__copy .sk-h1,
.sk-hero--photo .sk-hero__copy .sk-lead {
color: #fff;
}
.sk-hero--photo .sk-hero__copy .sk-btn--outline {
color: #fff !important;
border-color: rgba(255, 255, 255, .7);
}
.sk-hero .sk-container {
position: relative;
z-index: 1;
}
.sk-hero__grid {
display: grid;
gap: clamp(2rem, 5vw, 3.5rem);
align-items: center;
}
.sk-hero__copy {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sk-hero__copy .sk-lead {
margin-top: -0.25rem;
}
.sk-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 0.5rem;
}
/* contact panel */
.sk-panel {
background: var(--sk-surface);
border-radius: var(--radius-lg);
box-shadow: var(--sk-shadow);
padding: clamp(1.75rem, 3vw, 2.75rem);
}
.sk-panel__title {
margin: 0.375rem 0 1.75rem;
}
.sk-rows {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.sk-row {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.sk-row__text {
font-size: 1rem;
line-height: 1.45;
}
.sk-row__text strong {
display: block;
color: var(--sk-ink);
font-weight: 500;
font-size: 1rem;
}
.sk-row__text span {
color: var(--sk-muted);
font-size: 0.875rem;
}
@media (min-width: 1024px) {
.sk-hero__grid {
grid-template-columns: 1.1fr .9fr;
}
}
/* =========================================================================
ABOUT (baner2.webp)
========================================================================= */
.sk-about__head {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 60ch;
}
.sk-about__head .sk-lead {
max-width: min(52ch, 100%);
}
.sk-features {
margin-top: clamp(2.5rem, 5vw, 4rem);
display: grid;
grid-template-columns: 1fr;
background: var(--sk-surface);
border: 1px solid var(--sk-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.sk-feature {
padding: clamp(1.75rem, 3vw, 2.5rem);
display: flex;
flex-direction: column;
gap: 1rem;
border-bottom: 1px solid var(--sk-border);
}
.sk-feature:last-child {
border-bottom: none;
}
.sk-feature__title {
margin: 0;
}
.sk-feature__desc {
font-size: 0.9375rem;
color: var(--sk-body);
text-wrap: balance;
}
@media (min-width: 600px) {
.sk-features {
grid-template-columns: 1fr 1fr;
}
.sk-feature {
border-bottom: 1px solid var(--sk-border);
}
.sk-feature:nth-child(odd) {
border-right: 1px solid var(--sk-border);
}
}
@media (min-width: 1024px) {
.sk-features {
grid-template-columns: repeat(4, 1fr);
}
.sk-feature {
border-bottom: none;
border-right: 1px solid var(--sk-border);
}
.sk-feature:last-child {
border-right: none;
}
.sk-feature:nth-child(odd) {
border-right: 1px solid var(--sk-border);
}
}
/* =========================================================================
PROMO (rty.webp + fullface.webp)
========================================================================= */
.sk-promo {
background: var(--sk-bg);
}
.sk-promo__grid {
display: grid;
gap: clamp(2rem, 5vw, 3.5rem);
align-items: center;
background: var(--sk-surface);
border: 1px solid var(--sk-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.sk-promo__copy {
padding: clamp(2rem, 5vw, 3.5rem);
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sk-promo__brand {
display: flex;
align-items: center;
gap: 0.625rem;
}
.sk-promo__brand .sk-eyebrow {
color: var(--sk-ink);
letter-spacing: .26em;
}
.sk-dot {
width: 0.6875rem;
height: 0.6875rem;
fill: var(--sk-gold);
flex: none;
}
.sk-promo__head {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.sk-promo__title {
font-family: var(--sk-serif);
color: var(--sk-ink);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .04em;
line-height: 1;
text-wrap: balance;
font-size: clamp(2.1875rem, 5.5vw, 3.625rem);
}
.sk-promo__sub {
font-family: var(--sk-sans);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .18em;
font-size: 0.8125rem;
color: var(--sk-rose);
}
/* price flourish: "1/3 ceny!" */
.sk-price {
display: flex;
align-items: baseline;
gap: 0.625rem;
margin-top: 0.25rem;
}
.sk-price__frac {
font-family: var(--sk-serif);
font-weight: 600;
color: var(--sk-clay-dark);
font-size: clamp(3.5rem, 9vw, 5.5rem);
line-height: .9;
}
.sk-price__word {
font-family: var(--sk-serif);
font-style: italic;
color: var(--sk-ink);
font-size: clamp(1.8125rem, 4.5vw, 2.625rem);
}
.sk-promo__lede {
font-style: italic;
font-family: var(--sk-serif);
color: var(--sk-body);
font-size: clamp(1.0625rem, 2vw, 1.3125rem);
line-height: 1.4;
max-width: min(40ch, 100%);
text-wrap: balance;
}
/* feature pills */
.sk-pills {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
.sk-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--sk-bg);
border: 1px solid var(--sk-border);
border-radius: var(--radius-pill);
padding: 0.5rem 0.875rem;
font-size: 0.75rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--sk-ink);
font-weight: 500;
}
.sk-pill .sk-icon {
width: 1.125rem;
height: 1.125rem;
}
/* installment note box */
.sk-note {
background: var(--sk-bg);
border: 1px solid var(--sk-clay);
border-radius: var(--radius-lg);
padding: 1.25rem 1.5rem;
display: grid;
grid-template-columns: auto 1fr;
gap: 0.25rem 1.125rem;
align-items: center;
max-width: 32rem;
}
.sk-note__icon {
grid-row: 1 / span 3;
align-self: center;
}
.sk-note__icon .sk-icon {
width: 2.5rem;
height: 2.5rem;
stroke: var(--sk-clay-dark);
}
.sk-note__tag {
font-family: var(--sk-serif);
font-style: italic;
color: var(--sk-clay-dark);
font-size: 1.125rem;
}
.sk-note__main {
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--sk-ink);
font-size: 0.9375rem;
}
.sk-note__sub {
text-transform: uppercase;
letter-spacing: .08em;
font-size: 0.75rem;
color: var(--sk-muted);
}
.sk-note__calc {
grid-column: 1 / -1;
margin-top: 0.625rem;
padding-top: 0.625rem;
border-top: 1px solid var(--sk-border);
font-size: 1rem;
color: var(--sk-body);
}
.sk-note__hl {
background: var(--sk-clay);
color: #fff;
font-weight: 600;
padding: .12em .5em;
border-radius: var(--radius);
white-space: nowrap;
}
.sk-nowrap {
white-space: nowrap;
}
.sk-promo__actions {
margin-top: 0.25rem;
}
.sk-promo__media {
width: 100%;
min-height: 20rem;
align-self: stretch;
object-fit: cover;
object-position: center 28%;
display: block;
border-radius: 0;
}
/* when the media is a link wrapping an ![]()
(clickable promo) */
.sk-promo__media-link {
overflow: hidden;
}
.sk-promo__media-link img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 28%;
transition: transform .5s ease;
}
.sk-promo__media-link:hover img {
transform: scale(1.04);
}
@media (min-width: 768px) {
.sk-promo__grid {
grid-template-columns: 1.05fr .95fr;
}
.sk-promo--reverse .sk-promo__copy {
order: 2;
}
.sk-promo--reverse .sk-promo__media {
order: 1;
}
}
/* =========================================================================
STORY (editorial text block, e.g. SkinCeuticals partnership)
========================================================================= */
.sk-story__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.25rem, 4vw, 2.5rem);
align-items: start;
}
.sk-story__head {
display: flex;
flex-direction: column;
gap: 1rem;
}
.sk-story__head .sk-h2 {
max-width: 16ch;
}
.sk-prose {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: min(62ch, 100%);
font-size: var(--fs-body);
color: var(--sk-body);
}
.sk-prose p {
line-height: 1.75;
text-wrap: pretty;
}
.sk-prose strong {
color: var(--sk-ink);
font-weight: 600;
}
@media (min-width: 900px) {
.sk-story__grid {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: clamp(3rem, 7vw, 6.5rem);
}
}
/* =========================================================================
Motion / a11y
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.sk-section * {
transition: none !important;
animation: none !important;
}
}
/* =========================================================================
SHOPTET THEME OVERRIDES
These deliberately target Shoptet's own theme DOM (NOT our `sk-` scope) to
make the surrounding page match our sections: shared surface color, removed
default wrapper margins, and our container width on the tabs wrapper.
========================================================================= */
:root {
--colors-surface-primary: var(--sk-bg);
--color-header-background: var(--sk-clay);
}
.body-banners,
.homepage-texts-wrapper,
.welcome-wrapper,
.banners-row,
.content-wrapper.container .banners-row {
margin: 0;
}
.shp-tabs-wrapper {
max-width: var(--maxw);
margin: 0 auto;
padding: 0;
}
.content {
padding: 0;
}
/* ---- Product cards ------------------------------------------------------
Shoptet card DOM: .product > .p > .image (photo), .p-in (.name,
.availability), .p-bottom (.price-final strong, cart button), .p-desc,
.p-code. Cards go pure white so the white-background product photos blend
seamlessly against the ivory page; button + type adopt the theme. */
.product .p {
background: #fff;
border: 1px solid var(--sk-border);
border-radius: var(--radius-lg);
padding-top: 1.5rem;
overflow: hidden;
transition: box-shadow .25s ease, transform .25s ease;
}
.product .p:hover {
box-shadow: var(--sk-shadow);
transform: translateY(-2px);
}
.product .p .image {
background: #fff;
}
.product .p .name,
.product .p .name span {
font-family: var(--sk-serif);
color: var(--sk-ink);
font-weight: 500;
font-size: 1.3rem;
text-wrap: balance;
}
.product .p .price-final strong,
.product .p .price strong {
font-family: var(--sk-sans);
color: var(--sk-ink);
}
.product .p .p-desc {
color: var(--sk-body);
padding-inline: clamp(1rem, 7%, 2rem);
text-wrap: balance;
}
.product .p .p-code {
color: var(--sk-muted);
}
/* add-to-cart button → clay theme (overrides the theme's dark button) */
.product .btn-cart,
.product .add-to-cart-button {
background: var(--sk-clay) !important;
border-color: var(--sk-clay) !important;
border-radius: var(--radius) !important;
font-family: var(--sk-sans);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
}
.product .btn-cart,
.product .btn-cart span,
.product .add-to-cart-button,
.product .add-to-cart-button span {
color: #fff !important;
}
.product .btn-cart:hover,
.product .add-to-cart-button:hover {
background: var(--sk-clay-dark) !important;
border-color: var(--sk-clay-dark) !important;
}
/* ---- Category / listing page -------------------------------------------- */
/* page heading → serif */
.category-title {
font-family: var(--sk-serif);
color: var(--sk-ink);
font-weight: 500;
letter-spacing: -.01em;
text-wrap: balance;
}
/* subcategory tiles (ul.subcategories.with-image) → light white cards.
Override Bootstrap col widths with an explicit equal-height grid. */
.subcategories.with-image {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
list-style: none;
margin: 0 0 2rem;
padding: 0;
}
@media (min-width: 992px) {
.subcategories.with-image {
grid-template-columns: repeat(4, 1fr);
}
}
/* neutralise Bootstrap col widths so each tile fills its grid cell */
.subcategories.with-image>li {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.subcategories.with-image>li>a {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background: #fff;
border: 1px solid var(--sk-border);
border-radius: var(--radius-lg);
padding: 1.25rem;
text-decoration: none;
transition: box-shadow .25s ease, transform .25s ease;
}
.subcategories.with-image>li>a:hover {
box-shadow: var(--sk-shadow);
transform: translateY(-0.125rem);
}
/* image area grows so the labels line up along the bottom of every tile */
.subcategories.with-image .image {
display: flex;
align-items: center;
justify-content: center;
flex: 1 0 auto;
padding: 0.5rem 0;
}
.subcategories.with-image .image img {
width: 100%;
height: auto;
max-width: 12.5rem;
margin: 0 auto;
}
.subcategories.with-image .text {
margin-top: 1rem;
font-family: var(--sk-serif);
font-size: 1.125rem;
color: var(--sk-ink);
text-align: center;
text-wrap: balance;
}
/* sort tabs (.listSorting) → segmented control */
.listSorting__controls {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.listSorting__control {
font-family: var(--sk-sans);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--sk-body) !important;
background: transparent !important;
border: 1px solid var(--sk-border) !important;
border-radius: var(--radius) !important;
padding: 0.625rem 1rem;
cursor: pointer;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.listSorting__control:hover {
border-color: var(--sk-clay) !important;
color: var(--sk-ink) !important;
}
.listSorting__control--current {
background: var(--sk-clay) !important;
border-color: var(--sk-clay) !important;
color: #fff !important;
}
/* sidebar / filter section headings (Kategorie, Cena, Značky …) → eyebrow style */
.pageElement__heading span,
.filters h4,
.filters h4 span {
font-family: var(--sk-sans);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--sk-ink);
}
.pageElement__heading {
margin-bottom: 0.875rem;
}
/* sidebar category links → roomier vertical rhythm (was clumpy) */
#categories {
font-size: 0.875rem;
}
#categories a {
display: block;
padding-block: 0.4375rem;
color: var(--sk-body);
text-decoration: none;
transition: color .2s ease;
}
#categories a:hover {
color: var(--sk-clay-dark);
}
#categories .topic.active>a {
color: var(--sk-ink);
font-weight: 600;
}
#categories ul {
margin: 0.125rem 0 0.375rem;
padding-left: 1rem;
list-style: none;
}
#categories .cat-trigger {
float: right;
}
/* spacing between sidebar blocks */
.filters .slider-wrapper,
.filters .filter-sections {
margin-top: 1.5rem;
}
/* price slider (noUiSlider) */
#slider .noUi-connect {
background: var(--sk-clay) !important;
}
#slider .noUi-handle {
background: var(--sk-clay-dark) !important;
border: none !important;
border-radius: var(--radius) !important;
box-shadow: none !important;
}
#slider .noUi-handle::before,
#slider .noUi-handle::after {
display: none;
}
.slider-header .from,
.slider-header .to {
color: var(--sk-body);
}
/* manufacturer / tag filter checkboxes */
.filters input[type="checkbox"] {
accent-color: var(--sk-clay);
width: 1rem;
height: 1rem;
}
.filter-label {
color: var(--sk-body);
padding-left: 0.25rem;
}
.filter-count,
.filter-total-count {
color: var(--sk-muted);
}
.filter-total-count strong {
color: var(--sk-ink);
}
/* strip Shoptet's boxed backgrounds around the sidebar filter sections */
.box.box-bg-variant,
.filter-sections {
background: none;
}
#category-filter-hover .filter-section:first-child {
border: 0;
padding: 0;
}
/* outline buttons: filter toggles, load-more, scroll-to-top */
.unveil-button,
.toggle-filters,
.loadMore__button,
.goToTop__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: var(--sk-sans);
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: .12em;
padding: 0.8125rem 1.375rem !important;
background: transparent !important;
color: var(--sk-ink) !important;
border: 1px solid var(--sk-ink) !important;
border-radius: var(--radius) !important;
text-decoration: none;
transition: background-color .2s ease, color .2s ease;
}
.unveil-button:hover,
.toggle-filters:hover,
.loadMore__button:hover,
.goToTop__button:hover {
background: var(--sk-ink) !important;
color: #fff !important;
}
/* pagination → outline page chips, clay current page */
.pagination__list {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.pagination__link,
.pagination__currentPage {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.625rem;
font-family: var(--sk-sans);
font-weight: 600;
font-size: 0.875rem;
border-radius: var(--radius);
text-decoration: none;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pagination__link {
color: var(--sk-ink) !important;
background: transparent !important;
border: 1px solid var(--sk-border) !important;
}
.pagination__link:hover {
border-color: var(--sk-clay) !important;
color: var(--sk-clay-dark) !important;
}
.pagination__currentPage {
background: var(--sk-clay) !important;
color: #fff !important;
border: 1px solid var(--sk-clay) !important;
}
.itemsTotal {
color: var(--sk-muted);
text-align: center;
}
.itemsTotal strong {
color: var(--sk-ink);
}
/* unify button shape/typography site-wide (per-type colors handled above) */
.btn {
font-family: var(--sk-sans);
border-radius: var(--radius);
}
/* =========================================================================
NAVIGATION (header menu + dropdowns)
Desktop-scoped so the mobile burger / off-canvas menu keeps Shoptet's
default behaviour. `#navigation` prefix beats the theme's specificity.
========================================================================= */
@media (min-width: 992px) {
/* top-level menu items */
#navigation .menu-level-1>li>a {
font-family: var(--sk-sans);
transition: opacity .2s ease;
}
#navigation .menu-level-1>li>a:hover {
opacity: .82;
}
/* dropdown → clean white card (was a flat clay panel with cramped text) */
#navigation .menu-level-2 {
background: var(--sk-surface) !important;
border: 1px solid var(--sk-border);
border-radius: var(--radius-lg);
box-shadow: var(--sk-shadow);
padding: 0.625rem !important;
min-width: 15rem;
/* size to content, but never wider than the longest item or the viewport */
width: max-content !important;
max-width: min(22rem, calc(100vw - 2rem)) !important;
list-style: none;
}
#navigation .menu-level-2>li {
margin: 0;
}
#navigation .menu-level-2>li>a {
display: block;
padding: 0.5625rem 0.875rem;
border-radius: var(--radius);
color: var(--sk-ink) !important;
font-family: var(--sk-sans);
font-weight: 500;
font-size: 0.875rem;
line-height: 1.3;
white-space: normal;
/* let long labels wrap instead of forcing the panel wide */
text-decoration: none;
transition: background-color .2s ease, color .2s ease;
}
#navigation .menu-level-2>li>a span {
color: inherit !important;
}
#navigation .menu-level-2>li>a:hover {
background: var(--sk-bg);
color: var(--sk-clay-dark) !important;
}
}
/* ---- Mobile menu (< 992px): full-width white overlay ---------------------
The theme drawer is `position:fixed; height:100%` but only `width:60%` when
open (`.navigation-window-visible`), so it reads as a half sheet. Force it
full-width so it's a proper overlay; keep the theme's clean white panel and
theme our type/colors. */
@media (max-width: 991px) {
.navigation-window-visible #navigation {
width: 100% !important;
}
/* #navigation spans the full viewport incl. behind the header (padding-top:60px),
so keep it transparent — otherwise its white bg hides the white logo. The
white panel goes on .navigation-in, which sits below the header offset. */
#navigation {
background: transparent !important;
}
#navigation .navigation-in {
background: var(--sk-surface) !important;
}
#navigation .menu-level-2 {
background: transparent !important;
}
/* menu items → our type + ink color */
#navigation .navigation-in a {
font-family: var(--sk-sans);
}
#navigation .menu-level-1>li>a,
#navigation .menu-level-1>li>a b,
#navigation .menu-level-1>li>a span {
color: var(--sk-ink) !important;
}
#navigation .menu-level-2>li>a,
#navigation .menu-level-2>li>a span {
color: var(--sk-body) !important;
font-weight: 400;
}
#navigation .menu-level-1>li>a:hover,
#navigation .menu-level-1>li>a:focus-visible,
#navigation .menu-level-1>li.exp>a,
#navigation .menu-level-2>li>a:hover {
color: var(--sk-clay-dark) !important;
}
/* divider rhythm + close button */
#navigation .menu-level-1>li {
border-top: 1px solid var(--sk-border);
}
.navigation-close {
color: var(--sk-ink);
}
.menu-helper {
font-family: var(--sk-sans);
}
}
/* =========================================================================
PRODUCT DETAIL PAGE
========================================================================= */
/* Stack the params (Kategorie / EAN) and the print-ask-share row vertically
so the actions sit BELOW the category (they are siblings in .p-param-block,
which the theme lays out side-by-side). DOM order is params → social, so a
column flow gives the desired order with no reordering hacks. */
.p-param-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
}
/* price */
.p-to-cart-block .price-final,
.p-to-cart-block .price-final-holder {
font-family: var(--sk-sans);
color: var(--sk-ink);
}
/* quantity stepper */
.p-to-cart-block .quantity {
border: 1px solid var(--sk-border);
border-radius: var(--radius);
background: #fff;
}
.p-to-cart-block .quantity .amount {
color: var(--sk-ink);
font-family: var(--sk-sans);
background: transparent;
}
.p-to-cart-block .quantity .increase,
.p-to-cart-block .quantity .decrease {
color: var(--sk-ink);
}
.p-to-cart-block .quantity .increase:hover,
.p-to-cart-block .quantity .decrease:hover {
color: var(--sk-clay-dark);
background: var(--sk-bg);
}
/* add-to-cart (conversion) button → clay primary */
.btn-conversion,
.p-to-cart-block .add-to-cart-button {
background: var(--sk-clay) !important;
border-color: var(--sk-clay) !important;
color: #fff !important;
font-family: var(--sk-sans);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .12em;
border-radius: var(--radius) !important;
transition: background-color .2s ease, color .2s ease;
}
.btn-conversion span,
.p-to-cart-block .add-to-cart-button span {
color: #fff !important;
}
.btn-conversion:hover,
.p-to-cart-block .add-to-cart-button:hover {
background: var(--sk-clay-dark) !important;
border-color: var(--sk-clay-dark) !important;
color: #fff !important;
}
/* print / ask / share */
.link-icons .link-icon {
color: var(--sk-body);
transition: color .2s ease;
}
.link-icons .link-icon:hover {
color: var(--sk-clay-dark);
}
/* parameters table (Kategorie / EAN) */
.detail-parameters .row-header-label {
color: var(--sk-muted);
}
.detail-parameters td,
.detail-parameters td a {
color: var(--sk-ink);
}
.detail-parameters td a:hover {
color: var(--sk-clay-dark);
}
/* =========================================================================
OVERLAYS — Search & Cart (.content-window) + Account (login