| with no */
}
.product-page__description table thead th,
.product-page__description table thead td,
.product-page__description table tr:first-child td:only-child,
.product-page__description table th {
background-color: var(--pp-accent);
color: #fff;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
text-align: left;
font-weight: 700;
}
.product-page__description table thead th:where([dir="ltr"], [dir="ltr"] *),
.product-page__description table thead td:where([dir="ltr"], [dir="ltr"] *),
.product-page__description table tr:first-child td:only-child:where([dir="ltr"], [dir="ltr"] *),
.product-page__description table th:where([dir="ltr"], [dir="ltr"] *){
text-align: left;
}
.product-page__description table thead th:where([dir="rtl"], [dir="rtl"] *),
.product-page__description table thead td:where([dir="rtl"], [dir="rtl"] *),
.product-page__description table tr:first-child td:only-child:where([dir="rtl"], [dir="rtl"] *),
.product-page__description table th:where([dir="rtl"], [dir="rtl"] *){
text-align: right;
}
.product-page__description table td{
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
text-align: center;
border-top: 1px solid var(--pp-line);
}
.product-page__description table {
/* zebra striping so long spec lists stay readable */
}
.product-page__description table tbody tr:nth-child(odd) td {
background-color: #faf6f2;
}
.product-page__description table tbody tr:nth-child(even) td {
background-color: #fff;
}
.product-page__description {
/* a table must scroll inside itself rather than widen the page */
}
.product-page__description .article--main > table,
.product-page__description table{
display: block;
overflow-x: auto;
}
@media (min-width: 640px){
.product-page__description .article--main > table,
.product-page__description table{
display: table;
}
}
.product-page__description {
/* list-style itself is left to the rules further down this file, which the
merchant's own markup relies on — only the rhythm is set here */
}
.product-page__description li{
margin-bottom: 0.5rem;
}
.product-page {
/* ---- related products heading + shop-all button ---- */
}
.product-page__related-head{
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.product-page__related-subtitle{
margin-top: 0.5rem;
margin-bottom: 0px;
max-width: 36rem;
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 2;
color: var(--pp-muted);
}
.product-page__related-btn{
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 0.375rem;
padding-left: 1.75rem;
padding-right: 1.75rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
text-decoration-line: none;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
background-color: var(--pp-accent);
color: #fff;
}
.product-page__related-btn:hover {
color: #fff;
filter: brightness(0.92);
}
.product-page__related-btn:focus-visible {
outline: 2px solid var(--pp-accent);
outline-offset: 3px;
}
.s-button-primary-outline {
background-color: var(--product-card-add-btn-bg);
color: var(--product-card-add-btn-text-color);
}
.product-options-wrapper, .product-options-wrapper salla-product-options {
padding: 0;
padding: initial;
}
.product-options-wrapper .s-product-options-option {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
/* ═══════════════════════════════════════════════════════════════════
PRODUCT CARD — quick-view / wishlist buttons over the image
Hidden by default, revealed on card hover. Always visible on touch
devices (no hover), where the reveal would be unreachable.
Directional offsets use [dir] selectors, not logical properties.
═══════════════════════════════════════════════════════════════════ */
.s-product-card-entry .s-product-card-image,
.s-product-card-entry .s-product-card-image-full{
position: relative;
/* Salla paints the image well grey-100, which shows as a pale plate behind
any photo that doesn't cover it — a `contain` fit, a transparent PNG, or
the gap before a lazy image arrives. The card's own background (the
merchant's, from the Theme Editor) belongs there instead. */
background: transparent;
}
.s-product-card-entry .pc-hover-actions{
position: absolute;
top: 0.75rem;
z-index: 10;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
input[type=radio].sr-only div.s-product-card-entry .pc-hover-actions {
transition: all 0.3s;
}
input[type=radio].sr-only:checked ~ div.s-product-card-entry .pc-hover-actions {
border-color: var(--color-main);
}
.s-product-card-entry .pc-hover-actions {
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.s-product-card-entry:hover .pc-hover-actions, .s-product-card-entry:focus-within .pc-hover-actions {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.s-product-card-entry .pc-hover-actions salla-button {
position: static !important;
}
.s-product-card-entry .pc-hover-actions salla-button {
/* beat the card's other absolute wishlist rules */
}
.s-product-card-entry .pc-hover-actions salla-button .s-button-element{
height: 2.5rem !important;
width: 2.5rem !important;
border-radius: 9999px !important;
border-width: 0px !important;
--tw-bg-opacity: 1 !important;
background-color: rgba(255, 255, 255, 1) !important;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1)) !important;
--tw-text-opacity: 1 !important;
color: rgba(55, 65, 81, 1) !important;
color: rgba(55, 65, 81, var(--tw-text-opacity, 1)) !important;
box-shadow: 0 2px 8px rgba(43, 45, 52, 0.14) !important;
}
.s-product-card-entry .pc-hover-actions salla-button .s-button-element{
transition: background-color 0.2s ease;
}
.s-product-card-entry .pc-hover-actions salla-button:hover .s-button-element{
--tw-bg-opacity: 1 !important;
background-color: rgba(243, 244, 246, 1) !important;
background-color: rgba(243, 244, 246, var(--tw-bg-opacity, 1)) !important;
}
.s-product-card-entry .pc-hover-actions salla-button i{
font-size: 1.125rem;
line-height: 1.75rem;
}
.s-product-card-entry .pc-hover-actions .s-product-card-wishlist-added i{
--tw-text-opacity: 1;
color: rgba(239, 68, 68, 1);
color: rgba(239, 68, 68, var(--tw-text-opacity, 1));
}
[dir=rtl] .s-product-card-entry .pc-hover-actions {
right: 0.75rem;
left: auto;
}
[dir=ltr] .s-product-card-entry .pc-hover-actions {
left: 0.75rem;
right: auto;
}
/* badge sits opposite the wishlist button, so the two never collide */
[dir=rtl] .s-product-card-vertical .s-product-card-discount-badge {
left: 0.75rem;
right: auto;
}
[dir=ltr] .s-product-card-vertical .s-product-card-discount-badge {
right: 0.75rem;
left: auto;
}
/* Touch / no-hover devices: keep the buttons on screen */
@media (hover: none) {
.s-product-card-entry .pc-hover-actions {
opacity: 1;
visibility: visible;
transform: none;
}
}
/* ═══════════════════════════════════════════════════════════════════
PRODUCT CARD — content stack
Reading order: countdown → title → options → stars → price → stock
→ add-to-cart, all centred on a white card.
Every colour/radius maps to the Theme-Editor setting emitted as a
--product-card-* variable in layouts/variables.twig, with the sampled hex
as the fallback — so the card matches the design on an untouched theme and
still follows whatever the merchant picks.
═══════════════════════════════════════════════════════════════════ */
/* The tokens live on the base class every card carries, NOT on the vertical
variant — they used to sit inside .s-product-card-vertical, which the card JS
only adds when the card is neither minimal, full-image nor horizontal. Every
Theme-Editor value therefore stopped at the vertical card and the other
variants fell through to Salla's unthemed base CSS. Declaring them here paints
nothing on its own; it just puts the merchant's values within reach of all of
them. */
.s-product-card-entry {
--pc-title: var(--product-card-title-color, #2f231c);
--pc-muted: var(--product-card-subtitle-color, #8d8781);
--pc-line: var(--product-card-border-color, #e7e2dc);
--pc-accent: var(--product-card-price-color, #9a7f36);
--pc-btn: var(--product-card-add-btn-bg, #3a2b22);
--pc-btn-text: var(--product-card-add-btn-text-color, #fff);
--pc-radius: var(--product-card-border-radius, 8px);
--pc-radius-btn: var(--product-card-border-radius-btns, 6px);
/* width/height — above 1 the image is wider than tall, which is what keeps
the card short. Driven by the Theme-Editor slider. */
--pc-img-ratio: var(--product-card-image-ratio, 1.2);
/* one height for every control in the action row. Before this the add button
sized itself from its padding and the icon buttons stretched to match, so
the icons came out as tall rectangles and the row's height moved with the
font size. Now all three are set from here. */
--pc-btn-h: var(--product-card-btn-height, 2.6rem);
/* the action row restacks below 250px — of card, not of viewport. A card that
narrow can happen at any screen size (four-up grids, sliders, a sidebar), so
the query has to measure the card itself. */
container-type: inline-size;
container-name: product-card;
}
.s-product-card-vertical {
/* card shell — bg / radius / border all come from the Theme Editor */
overflow: hidden;
background: #fff;
background: var(--product-card-bg, #fff);
border: 1px solid var(--pc-line);
border-radius: var(--pc-radius);
/* the base card lets the image flex-grow, so a tall photo stretches the whole
card. Pin it to a ratio instead — every card in the grid then starts its
content at the same y, and the ratio stays tweakable from one variable */
}
.s-product-card-vertical .s-product-card-image{
flex: none !important;
overflow: hidden !important;
height: auto !important;
max-height: none !important;
}
.s-product-card-vertical .s-product-card-image{
aspect-ratio: var(--pc-img-ratio);
}
.s-product-card-vertical .s-product-card-image img{
height: 100%;
width: 100%;
}
html .s-add-product-button-main:not(.s-product-card-vertical .s-product-card-image img) > salla-button {
width: 100%;
}
.s-product-card-vertical {
/* "image takes the most space it can": drop the ratio and let the image
absorb every pixel the content leaves over. Only does anything when the
card has a height to divide up — i.e. a grid with stretched rows, which is
how the product listings render — so the content keeps its natural size and
the image grows into the rest. */
}
.s-product-card-vertical.s-product-card-image-fill .s-product-card-image{
flex: 1 1 0% !important;
}
.s-product-card-vertical.s-product-card-image-fill .s-product-card-image{
aspect-ratio: auto;
min-height: 0;
}
.s-product-card-vertical.s-product-card-image-fill .s-product-card-content{
flex: none;
}
.s-product-card-vertical {
/* ---- discount badge: outlined chip on the image, opposite the wishlist ---- */
}
.s-product-card-vertical .s-product-card-discount-badge {
/* same pill as the promotion ribbon it sits opposite — the two chips read as
one pair rather than a pill next to a rectangle */
pointer-events: none;
position: absolute;
top: 0.75rem;
z-index: 2;
border-radius: 9999px;
}
input[type=radio].sr-only div.s-product-card-vertical .s-product-card-discount-badge {
transition: all 0.3s;
}
input[type=radio].sr-only:checked ~ div.s-product-card-vertical .s-product-card-discount-badge {
border-color: var(--color-main);
}
.s-product-card-vertical .s-product-card-discount-badge {
padding: 0.3rem 0.7rem;
border: 1px solid var(--pc-accent);
background: rgba(255, 255, 255, 0.85);
color: var(--pc-accent);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1;
}
.s-product-card-vertical .s-product-card-content{
display: flex;
flex-direction: column;
padding-left: 0.625rem;
padding-right: 0.625rem;
padding-bottom: 0.625rem;
text-align: center;
gap: 0.2rem;
/* the gap above is the only vertical rhythm — strip the stray margins
the base card/option styles add, or they stack on top of it */
}
.s-product-card-vertical .s-product-card-content > *{
margin: 0px;
}
.s-product-card-vertical {
/* ---- offer countdown: bare digits split by hairline rules ---- */
}
.s-product-card-vertical .s-product-card-countdown-wrap{
width: 100%;
padding-top: 0.25rem;
padding-bottom: 0px;
}
html .s-add-product-button-main:not(.s-product-card-vertical .s-product-card-countdown-wrap) > salla-button {
width: 100%;
}
.s-product-card-vertical .s-product-card-countdown-wrap .s-count-down-list{
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
}
.s-product-card-vertical .s-product-card-countdown-wrap .s-count-down-item{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.s-product-card-vertical .s-product-card-countdown-wrap .s-count-down-item{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
min-width: 2.6rem;
padding: 0 0.5rem;
}
.s-product-card-vertical .s-product-card-countdown-wrap .s-count-down-item-value{
font-weight: 700;
line-height: 1;
font-size: 0.95rem;
color: var(--product-card-countdown-color, var(--pc-title));
}
.s-product-card-vertical .s-product-card-countdown-wrap .s-count-down-item-label{
margin-top: 0.125rem;
line-height: 1;
font-size: 0.6rem;
color: var(--pc-muted);
}
.s-product-card-vertical {
/* ---- title ---- */
}
.s-product-card-vertical .s-product-card-content-main{
margin: 0px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0px;
padding: 0px;
}
.s-product-card-vertical {
/* flex row, not inline flow: the anchor below is a -webkit-box (block-level)
for the line clamp, so in normal flow it would push the dot onto its own
line above the name instead of sitting beside it */
}
.s-product-card-vertical .s-product-card-content-title{
margin: 0px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.95rem;
line-height: 1.45;
/* cap at two lines so a long name can't stretch one card past the rest */
}
.s-product-card-vertical .s-product-card-content-title a{
display: block;
min-width: 0px;
overflow: hidden;
color: var(--pc-title);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.s-product-card-vertical .s-product-card-category-line,
.s-product-card-vertical .s-product-card-brand-line {
font-size: 0.78rem;
color: var(--pc-muted);
}
.s-product-card-vertical .s-product-card-content-subtitle {
font-size: 0.8rem;
color: var(--product-card-subtitle-color, var(--pc-muted));
}
.s-product-card-vertical {
/* ---- options: centred label above centred controls ---- */
}
.s-product-card-vertical .product-options-wrapper{
width: 100%;
}
html .s-add-product-button-main:not(.s-product-card-vertical .product-options-wrapper) > salla-button {
width: 100%;
}
.s-product-card-vertical .product-options-wrapper salla-product-options{
margin: 0px;
padding: 0px;
}
.s-product-card-vertical .product-options-wrapper .s-product-options-option{
text-align: center;
}
.s-product-card-vertical .product-options-wrapper {
/* the swatches read on their own inside a card — hide the label visually
but keep it in the DOM, since screen readers still need to know what the
row of controls is for */
}
.s-product-card-vertical .product-options-wrapper .s-product-options-option-label{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
input[type=radio].s-product-card-vertical .product-options-wrapper .s-product-options-option-label div.absolute {
transition: all 0.3s;
}
input[type=radio].s-product-card-vertical .product-options-wrapper .s-product-options-option-label:checked ~ div.absolute {
border-color: var(--color-main);
}
.s-product-card-vertical .product-options-wrapper .s-product-options-colors-wrapper,
.s-product-card-vertical .product-options-wrapper .s-product-options-option-content{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.375rem;
}
.s-product-card-vertical .product-options-wrapper {
/* colour swatches: plain circles, selected one gets a ring */
}
.s-product-card-vertical .product-options-wrapper .s-product-options-colors-item label{
border-radius: 9999px;
width: 1.75rem;
height: 1.75rem;
border: 1px solid var(--pc-line);
}
.s-product-card-vertical .product-options-wrapper .s-product-options-colors-item input:checked + label {
box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--pc-title);
}
.s-product-card-vertical .product-options-wrapper {
/* button-type options (size): outlined chip, selected chip fills dark */
}
.s-product-card-vertical .product-options-wrapper .s-product-options-grid-mode-span{
cursor: pointer;
border-radius: 0.375rem;
}
.s-product-card-vertical .product-options-wrapper .s-product-options-grid-mode-span * {
pointer-events: none;
}
.s-product-card-vertical .product-options-wrapper .s-product-options-grid-mode-span {
min-width: 1.9rem;
padding: 0.25rem 0.5rem;
font-size: 0.8rem;
border: 1px solid var(--pc-line);
color: var(--pc-title);
background: #fff;
transition: background-color 0.2s ease, color 0.2s ease;
}
.s-product-card-vertical .product-options-wrapper input:checked + .s-product-options-grid-mode-span,
.s-product-card-vertical .product-options-wrapper .s-product-options-grid-mode-span.selected {
background: var(--pc-btn);
border-color: var(--pc-btn);
color: #fff;
}
.s-product-card-vertical {
/* ---- stars → price → stock ---- */
}
.s-product-card-vertical .s-product-card-content-sub{
margin: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.125rem;
padding: 0px;
}
.s-product-card-vertical .s-product-card-rating-stars {
--star-color: var(--pc-accent);
font-size: 0.8rem;
}
.s-product-card-vertical .s-product-card-price,
.s-product-card-vertical .s-product-card-sale-price h4,
.s-product-card-vertical .s-product-card-starting-price h4{
color: var(--pc-accent) !important;
}
.s-product-card-vertical .s-product-card-price,
.s-product-card-vertical .s-product-card-sale-price h4,
.s-product-card-vertical .s-product-card-starting-price h4{
margin: 0px;
font-weight: 700;
font-size: 1.15rem;
}
.s-product-card-vertical .s-product-card-sale-price{
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.5rem;
}
.s-product-card-vertical .s-product-card-sale-price span{
text-decoration-line: line-through;
font-size: 0.85rem;
color: var(--product-card-discount-price-color, var(--pc-muted));
}
.s-product-card-vertical {
/* stock indicator: a pulsing dot beside the product name.
--pc-dot drives both the fill and the halo, so is-in / is-out only swap
one value. Green = in stock, red = out. */
}
.s-product-card-vertical .s-product-card-stock{
display: inline-flex;
flex: none;
align-items: center;
margin-left: 0.4rem;
margin-right: 0.4rem;
}
.s-product-card-vertical .s-product-card-stock.is-in {
--pc-dot: var(--product-card-status-color, #16a34a);
}
.s-product-card-vertical .s-product-card-stock.is-out {
--pc-dot: var(--product-card-status-out-color, #ef4444);
}
.s-product-card-vertical .s-product-card-stock-dot{
display: block;
border-radius: 9999px;
width: 0.45rem;
height: 0.45rem;
background: var(--pc-dot);
animation: pc-stock-glow 1.8s ease-in-out infinite;
}
.s-product-card-vertical {
/* ---- action row: add-to-cart takes the slack, icon buttons stay square ---- */
}
.s-product-card-vertical .s-product-card-content-footer{
margin: 0px;
margin-top: auto;
display: flex;
width: 100%;
align-items: center;
gap: 0.5rem;
padding: 0px;
}
html .s-add-product-button-main:not(.s-product-card-vertical .s-product-card-content-footer) > salla-button {
width: 100%;
}
.s-product-card-vertical .s-product-card-content-footer {
padding-top: 0.5rem;
}
.s-product-card-vertical {
/* `static !important` beats the base card rules that pin the wishlist button
absolutely over the image — here it belongs in the row */
}
.s-product-card-vertical .s-product-card-quickview-btn,
.s-product-card-vertical .s-product-card-wishlist-btn{
position: static !important;
flex: none !important;
}
.s-product-card-vertical .s-product-card-quickview-btn .s-button-element,
.s-product-card-vertical .s-product-card-wishlist-btn .s-button-element{
--tw-bg-opacity: 1 !important;
background-color: rgba(255, 255, 255, 1) !important;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1)) !important;
width: var(--pc-btn-h) !important;
height: var(--pc-btn-h) !important;
padding: 0 !important;
border-radius: var(--pc-radius-btn) !important;
border: 1px solid var(--pc-line) !important;
color: var(--pc-title) !important;
}
.s-product-card-vertical .s-product-card-quickview-btn .s-button-element,
.s-product-card-vertical .s-product-card-wishlist-btn .s-button-element{
/* square, and the same height as the add button beside it */
transition: background-color 0.2s ease;
}
.s-product-card-vertical .s-product-card-quickview-btn .s-button-element:hover,
.s-product-card-vertical .s-product-card-wishlist-btn .s-button-element:hover {
background: #f6f3ef !important;
}
.s-product-card-vertical .s-product-card-quickview-btn i,
.s-product-card-vertical .s-product-card-wishlist-btn i{
font-size: 1rem;
line-height: 1.5rem;
}
.s-product-card-vertical .s-product-card-wishlist-btn.s-product-card-wishlist-added i{
--tw-text-opacity: 1;
color: rgba(239, 68, 68, 1);
color: rgba(239, 68, 68, var(--tw-text-opacity, 1));
}
.s-product-card-vertical {
/* ---- narrow card: icons on their own row, add-to-cart full width below ----
Under 250px the three buttons in one row leave the add-to-cart button too
little to say anything, so the row wraps: the two icon buttons take a line
of their own and split it, and the add button drops underneath at the full
width of the card. `order` does the reordering — the add button is first in
the DOM, and it has to end up last. */
}
@container product-card (max-width: 250px) {
.s-product-card-vertical .s-product-card-content-footer{
flex-wrap: wrap;
}
.s-product-card-vertical .s-product-card-quickview-btn,
.s-product-card-vertical .s-product-card-wishlist-btn{
order: 1 !important;
flex: 1 1 0% !important;
}
.s-product-card-vertical .s-product-card-quickview-btn,
.s-product-card-vertical .s-product-card-wishlist-btn{
/* they stop being squares here — half the row each, same height */
}
.s-product-card-vertical .s-product-card-quickview-btn .s-button-element,
.s-product-card-vertical .s-product-card-wishlist-btn .s-button-element {
width: 100% !important;
}
.s-product-card-vertical .s-product-card-add-btn{
order: 2;
flex: 0 0 100%;
}
}
/* ═══════════════════════════════════════════════════════════════════
PRODUCT CARD — add-to-cart button, every variant
These rules used to live inside .s-product-card-vertical, so only the
vertical card got them. The markup, though, is rendered by the card JS for
every non-minimal variant — the horizontal and full-image cards were getting
the second label copy (.pc-add-btn-ghost) with none of the CSS that parks it
off-screen, so it sat inline and the button read its own label twice.
Scoped to .s-product-card-entry, the class every card carries, the height /
colour / radius and the hover swap now hold in the same shape everywhere —
which also keeps the swap's travel distance (--pc-btn-h) equal to the height
the button actually has.
═══════════════════════════════════════════════════════════════════ */
.s-product-card-entry .s-product-card-add-btn{
display: block;
min-width: 0px;
flex: 1 1 0%;
}
.s-product-card-entry .s-product-card-add-btn .s-button-element{
width: 100% !important;
justify-content: center !important;
gap: 0.5rem !important;
border-width: 0px !important;
}
html .s-add-product-button-main:not(.s-product-card-entry .s-product-card-add-btn .s-button-element) > salla-button {
width: 100% !important;
}
.s-product-card-entry .s-product-card-add-btn .s-button-element {
height: var(--pc-btn-h) !important;
padding: 0 0.9rem !important;
font-size: 0.85rem !important;
line-height: 1 !important;
border-radius: var(--pc-radius-btn) !important;
background: var(--pc-btn) !important;
color: var(--pc-btn-text) !important;
}
.s-product-card-entry .s-product-card-add-btn .s-button-element {
/* height, not vertical padding — the icon buttons next to it are squares
of the same value, and a padding-driven height would drift away from
them the moment the label wraps or the font scales */
/* clips the label while it is still below the button, so the rise on
hover starts from out of sight instead of sliding over the border */
overflow: hidden;
position: relative;
/* keeps the fill layer's z-index a local matter, so it can never end up
over a dropdown or a badge outside the button */
isolation: isolate;
}
.s-product-card-entry .s-product-card-add-btn {
/* The primary colour rises with the label rather than cross-fading into
place — one movement upward instead of two effects that happen to
coincide. It travels a hair further than the labels do, so the colour is
already behind the incoming word by the time that word arrives. */
}
.s-product-card-entry .s-product-card-add-btn .s-button-element::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
input[type=radio].sr-only div.s-product-card-entry .s-product-card-add-btn .s-button-element::before {
transition: all 0.3s;
}
input[type=radio].sr-only:checked ~ div.s-product-card-entry .s-product-card-add-btn .s-button-element::before {
border-color: var(--color-main);
}
.s-product-card-entry .s-product-card-add-btn .s-button-element::before {
z-index: 0;
background: #414042;
background: var(--color-primary);
transform: translateY(101%);
transition: transform 0.55s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.s-product-card-entry .s-product-card-add-btn .s-button-element:hover::before {
transform: translateY(0);
}
.s-product-card-entry .s-product-card-add-btn {
/* ---- hover: the label swaps with a copy of itself from below ----
Two layers inside the clipped button. At rest the original sits in place
and the copy (.pc-add-btn-ghost, rendered by product-card.js) waits below
the bottom edge. On hover both travel up by the same distance: the
original leaves through the top as the copy lands where it was.
Transitions, not keyframes, so taking the pointer away plays the move
backwards from wherever it had reached instead of cutting it. */
}
.s-product-card-entry .s-product-card-add-btn .s-button-text,
.s-product-card-entry .s-product-card-add-btn .s-button-loader{
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
z-index: 1;
}
.s-product-card-entry .s-product-card-add-btn .pc-add-btn-ghost{
pointer-events: none;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
input[type=radio].sr-only div.s-product-card-entry .s-product-card-add-btn .pc-add-btn-ghost {
transition: all 0.3s;
}
input[type=radio].sr-only:checked ~ div.s-product-card-entry .s-product-card-add-btn .pc-add-btn-ghost {
border-color: var(--color-main);
}
.s-product-card-entry .s-product-card-add-btn .pc-add-btn-ghost {
white-space: nowrap;
z-index: 1;
}
.s-product-card-entry .s-product-card-add-btn {
/* Every piece travels one button height. A percentage would be a share of
each piece's own box — the icon and the label are different sizes, so
they would leave at different distances and one of them would still be
showing a sliver at the edge. */
}
.s-product-card-entry .s-product-card-add-btn .s-button-text > i,
.s-product-card-entry .s-product-card-add-btn .s-button-text > .s-product-card-add-btn-text,
.s-product-card-entry .s-product-card-add-btn .pc-add-btn-ghost > * {
transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
will-change: transform;
}
.s-product-card-entry .s-product-card-add-btn .pc-add-btn-ghost > * {
transform: translateY(var(--pc-btn-h));
}
.s-product-card-entry .s-product-card-add-btn .s-button-element:hover .s-button-text > i,
.s-product-card-entry .s-product-card-add-btn .s-button-element:hover .s-button-text > .s-product-card-add-btn-text {
transform: translateY(calc(var(--pc-btn-h) * -1));
}
.s-product-card-entry .s-product-card-add-btn .s-button-element:hover .pc-add-btn-ghost > * {
transform: translateY(0);
}
.s-product-card-entry .s-product-card-add-btn {
/* the icon leads and the label follows a beat later, in both layers — the
pair reads as one thing sliding rather than two things moving in lockstep */
}
.s-product-card-entry .s-product-card-add-btn .s-button-text > .s-product-card-add-btn-text,
.s-product-card-entry .s-product-card-add-btn .pc-add-btn-ghost > span {
transition-delay: 0.06s;
}
.s-product-card-entry .s-product-card-add-btn {
/* the press itself gets an answer straight away, before the request that
follows it has anything to report */
}
.s-product-card-entry .s-product-card-add-btn .s-button-element {
transition: transform 0.12s ease;
}
.s-product-card-entry .s-product-card-add-btn .s-button-element:active {
transform: scale(0.97);
}
.s-product-card-entry .s-product-card-add-btn {
/* ---- in flight ----
.is-adding is set by product-card.js for as long as the add request is
out. Salla's own answer to the click is `disabled` (opacity 0.5), which
is invisible on a filled button and is also how an out-of-stock button
sits permanently — so the click gets its own answer here: both label
copies step aside (the ghost included, since the pointer is still on the
button and its hover label would otherwise cover this), the hover fill
holds where it is, and a spinner takes the middle. */
}
.s-product-card-entry .s-product-card-add-btn.is-adding .s-button-element {
cursor: wait;
pointer-events: none;
}
.s-product-card-entry .s-product-card-add-btn.is-adding .s-button-element::before {
transform: translateY(0);
}
.s-product-card-entry .s-product-card-add-btn.is-adding .s-button-text {
opacity: 0;
transition: opacity 0.15s ease;
}
.s-product-card-entry .s-product-card-add-btn.is-adding {
/* physical centring, not logical: translate is physical either way, so
top/left + a -50% shift lands in the middle in both directions */
}
.s-product-card-entry .s-product-card-add-btn.is-adding .s-button-element::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1.05rem;
height: 1.05rem;
transform: translate(-50%, -50%);
border-radius: 9999px;
border: 2px solid color-mix(in srgb, var(--pc-btn-text) 32%, transparent);
border-top-color: var(--pc-btn-text);
animation: pc-add-btn-spin 0.7s linear infinite;
z-index: 2;
}
.s-product-card-entry .s-product-card-add-btn-text{
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (min-width: 768px){
.s-product-card-entry .s-product-card-add-btn-text{
display: inline;
}
}
@keyframes pc-add-btn-spin {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* the halo breathes out from the dot; colour-mix keeps it tied to --pc-dot so
green and red both get a matching glow instead of a hardcoded one */
@keyframes pc-stock-glow {
0%, 100% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc-dot) 65%, transparent);
}
50% {
box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--pc-dot) 0%, transparent);
}
}
/* a pulsing dot is motion — hold it steady for anyone who asked for less */
@media (prefers-reduced-motion: reduce) {
.s-product-card-vertical .s-product-card-stock-dot {
animation: none;
box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--pc-dot) 25%, transparent);
}
/* no swap and no rising fill for anyone who asked for less motion — the
button changes colour on the spot and the copy underneath stays away */
.s-product-card-entry .s-product-card-add-btn .s-button-text > i,
.s-product-card-entry .s-product-card-add-btn .s-button-text > .s-product-card-add-btn-text {
transform: none !important;
}
.s-product-card-entry .s-product-card-add-btn .s-button-text > i,
.s-product-card-entry .s-product-card-add-btn .s-button-text > .s-product-card-add-btn-text {
transition: none;
}
.s-product-card-entry .s-product-card-add-btn .pc-add-btn-ghost {
display: none;
}
.s-product-card-entry .s-product-card-add-btn .s-button-element::before {
transition: none;
transform: translateY(101%);
}
.s-product-card-entry .s-product-card-add-btn .s-button-element:hover::before {
transform: translateY(0);
}
}
/* "one line" toggles from the Theme Editor — the clamp above is the 2-line
default, these collapse it to a single truncated line */
.s-product-card-title-one-line.s-product-card-vertical .s-product-card-content-title a {
-webkit-line-clamp: 1;
line-clamp: 1;
}
.s-product-card-subtitle-one-line.s-product-card-vertical .s-product-card-content-subtitle{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.s-infinite-scroll-wrapper {
margin-bottom: 1rem;
}
.s-fast-checkout-button {
border-radius: var(--border-radius-button) !important;
}
/* ---- Category listing: merchant-controlled columns per row ----
The grid lives in the light DOM of , so the theme owns
its columns; the vars come from the container in pages/product/index.twig. */
.container--products-list .s-products-list-wrapper {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-columns: repeat(var(--products-cols-mobile, 2), minmax(0, 1fr)) !important;
}
@media (min-width: 768px) {
.container--products-list .s-products-list-wrapper {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-template-columns: repeat(var(--products-cols-tablet, 3), minmax(0, 1fr)) !important;
}
}
@media (min-width: 1280px) {
.container--products-list .s-products-list-wrapper {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
grid-template-columns: repeat(var(--products-cols-desktop, 4), minmax(0, 1fr)) !important;
}
}
.s-product-options-option {
display: flex !important;
flex-direction: column !important;
background: transparent !important;
}
.s-product-options-option {
align-items: center;
}
.s-product-options-option-label small {
display: none !important;
}
.s-slider-vertical .s-slider-thumbs-container {
padding: 0 !important;
}
.product-buy-grid .s-button-btn, .s-price-range-number-input {
border-radius: var(--border-radius-button) !important;
}
.s-quantity-input-container {
border-radius: var(--border-radius-button) !important;
}
/* ═══════════════════════════════════════════════════════════════════
Minimal & full-image variants — the Theme Editor reaches them too.
Both used to fall through to Salla's base card CSS, which hard-codes its own
palette and radii, so nothing the merchant set on the product card showed up
on either of them. The tokens are declared on .s-product-card-entry above;
these rules are what spend them.
═══════════════════════════════════════════════════════════════════ */
/* ---- minimal: compact card, image on the logical start ---- */
.s-product-card-minimal {
background: #fff;
background: var(--product-card-bg, #fff);
border: 1px solid var(--pc-line);
border-radius: var(--pc-radius);
overflow: hidden;
}
.s-product-card-minimal .s-product-card-content-title a {
color: var(--pc-title);
}
.s-product-card-minimal .s-product-card-content-subtitle {
color: var(--pc-muted);
}
.s-product-card-minimal .s-product-card-price,
.s-product-card-minimal .s-product-card-starting-price h4 {
color: var(--pc-accent);
}
.s-product-card-minimal .s-product-card-sale-price span {
color: #c0392b;
color: var(--product-card-discount-price-color, #c0392b);
}
.s-product-card-minimal {
/* the base rounds the image on the start side only — keep that shape, but at
the merchant's radius rather than a fixed .75rem */
}
.s-product-card-minimal .s-product-card-image {
border-radius: 0;
}
[dir=rtl] .s-product-card-minimal .s-product-card-image {
border-top-right-radius: var(--pc-radius);
border-bottom-right-radius: var(--pc-radius);
}
[dir=ltr] .s-product-card-minimal .s-product-card-image {
border-top-left-radius: var(--pc-radius);
border-bottom-left-radius: var(--pc-radius);
}
.s-product-card-minimal salla-add-product-button .s-button-element {
background: var(--pc-btn);
color: var(--pc-btn-text);
border-radius: var(--pc-radius-btn);
}
.s-product-card-minimal {
/* action row — the base gives the minimal card a bare `display:flex` with no
gap and no sizing, so the add button and the quick-view icon ran into each
other and the row's height came from whatever padding the base button had.
Same shape as the vertical and horizontal cards: the add button takes the
slack, the icon stays a square of the shared control height. */
}
.s-product-card-minimal .s-product-card-content-footer{
margin: 0px;
margin-top: auto;
display: flex;
width: 100%;
align-items: center;
gap: 0.5rem;
padding: 0px;
}
html .s-add-product-button-main:not(.s-product-card-minimal .s-product-card-content-footer) > salla-button {
width: 100%;
}
.s-product-card-minimal .s-product-card-content-footer {
padding-top: 0.5rem;
}
.s-product-card-minimal .s-product-card-quickview-btn{
position: static !important;
flex: none !important;
}
.s-product-card-minimal .s-product-card-quickview-btn .s-button-element{
--tw-bg-opacity: 1 !important;
background-color: rgba(255, 255, 255, 1) !important;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1)) !important;
width: var(--pc-btn-h) !important;
height: var(--pc-btn-h) !important;
padding: 0 !important;
border-radius: var(--pc-radius-btn) !important;
border: 1px solid var(--pc-line) !important;
color: var(--pc-title) !important;
}
.s-product-card-minimal .s-product-card-quickview-btn i{
font-size: 1rem;
line-height: 1.5rem;
}
/* ---- full image: copy sits over the photo ----
Its text is deliberately not the card title/price colour — those are picked
against a card background, and here the backdrop is the photograph. It gets
its own colour setting so the merchant still owns it without being able to
accidentally make the card unreadable by restyling the vertical one. */
.s-product-card-full-image {
border-radius: var(--pc-radius);
overflow: hidden;
}
.s-product-card-full-image img {
border-radius: var(--pc-radius);
}
.s-product-card-full-image .s-product-card-content-title a,
.s-product-card-full-image .s-product-card-content-subtitle,
.s-product-card-full-image .s-product-card-price,
.s-product-card-full-image .s-product-card-sale-price,
.s-product-card-full-image .s-product-card-sale-price span {
color: #fff;
color: var(--product-card-full-image-text-color, #fff);
}
.s-product-card-full-image .s-product-card-content-title a:hover {
color: var(--pc-accent);
}
.s-product-card-full-image salla-add-product-button {
border-radius: var(--pc-radius-btn);
background: var(--pc-btn);
}
.s-product-card-full-image salla-add-product-button .s-button-element {
background: var(--pc-btn);
color: var(--pc-btn-text);
border-radius: var(--pc-radius-btn);
}
/* ---- horizontal card: image beside the content (cart drawer, search, list views) ----
Its own colour block, like minimal / full-image. The vertical block mixes
layout with colour, so the horizontal card was rendering Salla's defaults and
ignoring the Theme-Editor product-card colours entirely. Tokens are inherited
from .s-product-card-entry (present on every card).
NOTE: no `overflow: hidden` here on purpose — on mobile the wishlist button is
pinned just outside the card with a negative inset (see the layout block above),
and clipping the card would swallow it. */
.s-product-card-horizontal {
background: #fff;
background: var(--product-card-bg, #fff);
border: 1px solid var(--pc-line);
border-radius: var(--pc-radius);
}
.s-product-card-horizontal .s-product-card-image {
border-radius: var(--pc-radius);
}
.s-product-card-horizontal .s-product-card-content-title a {
color: var(--pc-title);
}
.s-product-card-horizontal .s-product-card-category-line,
.s-product-card-horizontal .s-product-card-brand-line,
.s-product-card-horizontal .s-product-card-content-subtitle {
color: var(--pc-muted);
}
.s-product-card-horizontal .s-product-card-price,
.s-product-card-horizontal .s-product-card-starting-price h4 {
color: var(--pc-accent);
}
.s-product-card-horizontal .s-product-card-sale-price span {
color: #c0392b;
color: var(--product-card-discount-price-color, #c0392b);
}
.s-product-card-horizontal .s-product-card-discount-badge{
border-radius: 9999px;
border: 1px solid var(--pc-accent);
color: var(--pc-accent);
}
.s-product-card-horizontal salla-add-product-button .s-button-element {
background: var(--pc-btn);
color: var(--pc-btn-text);
border-radius: var(--pc-radius-btn);
}
.s-product-card-horizontal {
/* action row — same as the vertical card: add-to-cart takes the slack, the
quick-view + wishlist icons sit square in the row. Without this the base
card pins BOTH icons absolutely over the image at the same corner, so they
stack and the quick-view button disappears behind the wishlist one. */
}
.s-product-card-horizontal .s-product-card-content-footer{
margin: 0px;
margin-top: auto;
display: flex;
width: 100%;
align-items: stretch;
gap: 0.375rem;
padding: 0px;
padding-top: 0.125rem;
}
html .s-add-product-button-main:not(.s-product-card-horizontal .s-product-card-content-footer) > salla-button {
width: 100%;
}
.s-product-card-horizontal .s-product-card-add-btn{
display: block;
min-width: 0px;
flex: 1 1 0%;
}
.s-product-card-horizontal .s-product-card-quickview-btn,
.s-product-card-horizontal .s-product-card-wishlist-btn{
position: static !important;
flex: none !important;
}
.s-product-card-horizontal .s-product-card-quickview-btn .s-button-element,
.s-product-card-horizontal .s-product-card-wishlist-btn .s-button-element{
height: 100% !important;
--tw-bg-opacity: 1 !important;
background-color: rgba(255, 255, 255, 1) !important;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1)) !important;
width: 2.35rem !important;
padding: 0 !important;
border-radius: var(--pc-radius-btn) !important;
border: 1px solid var(--pc-line) !important;
color: var(--pc-title) !important;
}
.s-product-card-horizontal {
/* ---- small screens: icons on the top line, add-to-cart full width below ----
The horizontal card gives its image a fixed 8rem and the content column
whatever is left, which on a phone is not enough for three controls side by
side — the add button ends up a stub. So the row wraps: the two icons take a
line of their own and split it, and the add button drops underneath at the
content column's full width. `order` does the reordering — the add button is
first in the DOM and has to come out last. */
}
@media (max-width: 640px) {
.s-product-card-horizontal .s-product-card-content-footer{
flex-wrap: wrap;
gap: 0.5rem;
}
.s-product-card-horizontal .s-product-card-quickview-btn,
.s-product-card-horizontal .s-product-card-wishlist-btn{
order: 1 !important;
flex: 1 1 0% !important;
}
.s-product-card-horizontal .s-product-card-quickview-btn,
.s-product-card-horizontal .s-product-card-wishlist-btn{
/* they stop being squares here — half the line each, at the shared
control height (h-full has no line to fill once the row wraps) */
}
.s-product-card-horizontal .s-product-card-quickview-btn .s-button-element,
.s-product-card-horizontal .s-product-card-wishlist-btn .s-button-element {
width: 100% !important;
height: var(--pc-btn-h) !important;
}
.s-product-card-horizontal .s-product-card-add-btn{
order: 2;
flex: 0 0 100%;
}
}
/* ═══════════════════════════════════════════════════════════════════
Hover shadow (`shadow-on-hover`) — one treatment, every variant
Salla's base rule is `.s-product-card-shadow:hover { box-shadow: 5px 10px 30px … }`
— a shadow pushed 5px to the right, which reads as lit-from-the-left in RTL
and lit-from-the-right in LTR, and it only ever reached the vertical card
because the JS withheld the class from the minimal one. This replaces it with
a straight-down shadow that sits the same way in both directions, and lets it
land on whichever variant carries the attribute — vertical, horizontal,
full-image, minimal or special.
The card also lifts a hair. Kept to 2px so it never overlaps the card next to
it in a tight grid, and dropped entirely for reduced motion (the shadow, which
is not movement, stays).
═══════════════════════════════════════════════════════════════════ */
.s-product-card-shadow {
border-radius: var(--pc-radius);
transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
will-change: box-shadow;
}
.s-product-card-shadow:hover {
box-shadow: 0 12px 28px -14px rgba(47, 35, 28, 0.28) !important;
}
.s-product-card-shadow:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--pc-accent) 35%, var(--pc-line));
}
/* the full-image card is its own photograph — a border colour there would draw a
line around the image, so only the shadow moves */
.s-product-card-shadow.s-product-card-full-image:hover {
border-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
.s-product-card-shadow {
transition: box-shadow 0.3s ease;
}
.s-product-card-shadow:hover {
transform: none;
}
}
/* the promotion ribbon was scoped to the vertical card only */
.s-product-card-minimal .s-product-card-promotion-title,
.s-product-card-full-image .s-product-card-promotion-title,
.s-product-card-horizontal .s-product-card-promotion-title {
background: #3a2b22;
background: var(--product-card-promotion-bg, #3a2b22);
color: #fff;
color: var(--product-card-promotion-text-color, #fff);
}
/* ---- option titles on the card, off ----
Set from the Theme Editor (product_card_show_option_labels), surfaced to the
browser as tabby_features.option_labels and applied by ProductCard in
js/partials/product-card.js. Clipped rather than `display:none`: the
|