/* ==========================================================================
Shop archive — Estelia
Loaded on: shop, product category/tag
========================================================================== */
/* --------------------------------------------------------------------------
Grid — 2 mobile, 3 tablet, 4 desktop
!important is required: WooCommerce core sets width/float on li.product
at equal specificity and loads after this file.
-------------------------------------------------------------------------- */
body.woocommerce nav.woocommerce-pagination,
body.woocommerce-page nav.woocommerce-pagination{
display: none !important;
}
body.woocommerce ul.products,
body.woocommerce-page ul.products{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: clamp(1rem, 4vw, 2.25rem);
width: 100%;
margin: 0;
padding: 0;
list-style: none;
clear: both;
}
body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after{
content: none !important;
}
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product{
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: none !important;
display: flex !important;
flex-direction: column;
}
@media (min-width: 48em){
body.woocommerce ul.products,
body.woocommerce-page ul.products{
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (min-width: 75em){
body.woocommerce ul.products,
body.woocommerce-page ul.products{
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
/* --------------------------------------------------------------------------
Product image + hover swap to 2nd image
Markup produced by the woocommerce_product_get_image filter:
![]()
![]()
The hover image is the second ![]()
, targeted with img + img so it works
regardless of class or attribute. !important is required throughout:
WooCommerce core sets width/height on li.product a img and loads after
this file.
-------------------------------------------------------------------------- */
body.woocommerce ul.products li.product a .est-card__media,
body.woocommerce-page ul.products li.product a .est-card__media{
position: relative !important;
display: block !important;
overflow: hidden;
width: 100%;
aspect-ratio: 3 / 4;
margin: 0 0 var(--est-space-m, 1rem);
background: var(--est-surface, #F1F1EF);
border-radius: var(--est-radius, 0);
}
body.woocommerce ul.products li.product a .est-card__media img,
body.woocommerce-page ul.products li.product a .est-card__media img{
position: absolute !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
transition: opacity var(--est-dur, 400ms) var(--est-ease, cubic-bezier(.22,1,.36,1)),
transform 600ms var(--est-ease, cubic-bezier(.22,1,.36,1));
}
/* Second image stacked on top, hidden at rest */
body.woocommerce ul.products li.product a .est-card__media.has-hover img + img,
body.woocommerce-page ul.products li.product a .est-card__media.has-hover img + img{
opacity: 0 !important;
z-index: 2;
}
@media (hover: hover) and (pointer: fine){
body.woocommerce ul.products li.product a .est-card__media.has-hover:hover img + img,
body.woocommerce-page ul.products li.product a .est-card__media.has-hover:hover img + img{
opacity: 1 !important;
}
body.woocommerce ul.products li.product a .est-card__media:hover img,
body.woocommerce-page ul.products li.product a .est-card__media:hover img{
transform: scale(1.03);
}
}
/* Keyboard parity */
body.woocommerce ul.products li.product a .est-card__media.has-hover:focus-within img + img,
body.woocommerce-page ul.products li.product a .est-card__media.has-hover:focus-within img + img{
opacity: 1 !important;
}
/* --------------------------------------------------------------------------
Star rating — dropped from archive cards only (single-product page keeps
it); a half-populated rating row was throwing off card alignment.
-------------------------------------------------------------------------- */
body.woocommerce ul.products li.product .star-rating,
body.woocommerce-page ul.products li.product .star-rating{
display: none !important;
}
/* --------------------------------------------------------------------------
Title
-------------------------------------------------------------------------- */
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title{
font-family: var(--est-font-display, "Instrument Serif", Georgia, serif);
font-size: clamp(1rem, 2.5vw, 1.25rem);
font-weight: 400;
line-height: 1.25;
letter-spacing: var(--est-tracking-display, -0.02em);
color: var(--est-ink, #131313);
margin: 0 0 .5rem;
padding: 0;
}
/* --------------------------------------------------------------------------
Price
-------------------------------------------------------------------------- */
body.woocommerce ul.products li.product .price,
body.woocommerce ul.products li.product .price ins,
body.woocommerce ul.products li.product .price bdi,
body.woocommerce ul.products li.product .price .amount,
body.woocommerce-page ul.products li.product .price,
body.woocommerce-page ul.products li.product .price bdi{
color: var(--est-ink, #131313);
font-family: var(--est-font-body, "DM Sans", system-ui, sans-serif);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
margin: 0;
}
/* Price + swatches share one row (inc/catalog-behaviour.php opens/closes this
around both) instead of stacking — shorter card, and the "fra kr X"
price from the same section keeps this row from wrapping. */
body.woocommerce ul.products li.product .est-card-pricerow,
body.woocommerce-page ul.products li.product .est-card-pricerow{
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin: 0 0 1rem;
}
body.woocommerce ul.products li.product .price del,
body.woocommerce ul.products li.product .price del .amount,
body.woocommerce ul.products li.product .price del bdi{
color: var(--est-ink, #131313);
opacity: .5;
}
/* --------------------------------------------------------------------------
Select options / Add to cart
-------------------------------------------------------------------------- */
body.woocommerce ul.products li.product a.button,
body.woocommerce ul.products li.product a.button.add_to_cart_button,
body.woocommerce ul.products li.product a.button.product_type_variable,
body.woocommerce-page ul.products li.product a.button{
font-family: var(--est-font-body, "DM Sans", system-ui, sans-serif);
font-size: clamp(.6875rem, 2vw, .8125rem);
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1.2;
color: var(--est-bg, #FFFFFF);
background-color: var(--est-accent, #4A1F45);
background-image: none;
border: 1px solid var(--est-accent, #4A1F45);
border-radius: var(--est-radius, 0);
padding: .875rem .75rem;
width: 100% !important;
display: block !important;
margin: auto 0 0 !important;
text-align: center;
text-decoration: none;
box-shadow: none;
white-space: normal;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--est-dur, 400ms) var(--est-ease, cubic-bezier(.22,1,.36,1)),
color var(--est-dur, 400ms) var(--est-ease, cubic-bezier(.22,1,.36,1)),
border-color var(--est-dur, 400ms) var(--est-ease, cubic-bezier(.22,1,.36,1));
}
body.woocommerce ul.products li.product a.button:hover,
body.woocommerce ul.products li.product a.button:focus,
body.woocommerce-page ul.products li.product a.button:hover{
color: var(--est-bg, #FFFFFF);
background-color: var(--est-accent-dark, #341530);
border-color: var(--est-accent-dark, #341530);
}
body.woocommerce ul.products li.product a.button:active{
color: var(--est-bg, #FFFFFF);
background-color: var(--est-accent-dark, #341530);
border-color: var(--est-accent-dark, #341530);
}
body.woocommerce ul.products li.product a.button:focus-visible{
outline: 2px solid var(--est-accent, #4A1F45);
outline-offset: 2px;
}
body.woocommerce ul.products li.product a.button.added,
body.woocommerce ul.products li.product a.button.loading{
background-color: var(--est-accent, #4A1F45);
color: var(--est-bg, #FFFFFF);
opacity: .7;
}
body.woocommerce ul.products li.product a.added_to_cart{
font-family: var(--est-font-body, "DM Sans", system-ui, sans-serif);
font-size: .75rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--est-ink, #131313);
text-decoration: underline;
display: block;
text-align: center;
margin-top: .5rem;
}
/* --------------------------------------------------------------------------
Default onsale flash (the round "Tilbud!" circle WooCommerce echoes into
li.product) — the square est-badge (est_product_badges_html,
inc/catalog-behaviour.php)
already covers "on sale" as a black-background overlay badge, so the
default circle is redundant and hidden here, same as on the single-product
page (single-product.css).
-------------------------------------------------------------------------- */
body.woocommerce ul.products li.product span.onsale,
body.woocommerce-page ul.products li.product span.onsale{
display: none !important;
}
/* --------------------------------------------------------------------------
Page header and sorting
-------------------------------------------------------------------------- */
body.woocommerce .woocommerce-products-header__title,
body.woocommerce-page .woocommerce-products-header__title{
font-family: var(--est-font-display, "Instrument Serif", Georgia, serif);
font-weight: 400;
letter-spacing: var(--est-tracking-display, -0.02em);
color: var(--est-ink, #131313);
margin: 0 0 var(--est-space-s, .75rem);
}
/* Title -> small gap -> description -> large gap -> rest of the archive.
Category archives (e.g. Bestselgere) render `.term-description`; the main
shop page ("Produkter") renders `.page-description` instead — both need
the same spacing. min-height reserves room for 2 lines regardless of
actual text length, so the product grid starts at the same vertical
position whether an archive's description is one line or two — it
should never depend on how long that particular archive's copy happens
to be. */
body.woocommerce .woocommerce-products-header .term-description,
body.woocommerce-page .woocommerce-products-header .term-description,
body.woocommerce .woocommerce-products-header .page-description,
body.woocommerce-page .woocommerce-products-header .page-description{
min-height: calc(var(--est-leading-body, 1.65) * 2em);
margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}
body.woocommerce .woocommerce-result-count,
body.woocommerce-page .woocommerce-result-count{
font-family: var(--est-font-body, "DM Sans", system-ui, sans-serif);
font-size: .875rem;
color: var(--est-ink, #131313);
float: none !important;
clear: both !important;
display: block;
margin: 0 0 1.25rem !important;
}
body.woocommerce .woocommerce-ordering,
body.woocommerce-page .woocommerce-ordering{
float: none !important;
clear: both !important;
display: block;
width: 100%;
margin: 0 0 clamp(1.5rem, 4vw, 2.5rem) !important;
}
body.woocommerce .woocommerce-ordering select,
body.woocommerce-page .woocommerce-ordering select{
font-family: var(--est-font-body, "DM Sans", system-ui, sans-serif);
font-size: .875rem;
line-height: 1.2;
color: var(--est-ink, #131313);
background-color: transparent;
border: 0;
border-bottom: 1px solid var(--est-line, #E2E2DF);
border-radius: var(--est-radius, 0);
padding: .625rem 2rem .625rem 0;
width: auto;
max-width: 100%;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23131313' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .25rem center;
}
body.woocommerce .woocommerce-ordering select:focus-visible,
body.woocommerce-page .woocommerce-ordering select:focus-visible{
outline: 2px solid var(--est-ink, #131313);
outline-offset: 2px;
}
@media (min-width: 48em){
body.woocommerce .woocommerce-ordering,
body.woocommerce-page .woocommerce-ordering{
width: auto;
text-align: right;
float: right !important;
clear: none !important;
margin-top: -3rem !important;
}
}
/* --------------------------------------------------------------------------
Motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
body.woocommerce ul.products li.product a.button{
transition: none;
}
body.woocommerce ul.products li.product a .est-card__media img{
transition: opacity 150ms linear;
}
body.woocommerce ul.products li.product a .est-card__media:hover img{
transform: none;
}
}
/* --------------------------------------------------------------------------
Product card — color swatches
-------------------------------------------------------------------------- */
body.woocommerce ul.products li.product .est-swatches,
body.woocommerce-page ul.products li.product .est-swatches{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
flex-shrink: 0;
gap: .375rem;
list-style: none;
margin: 0;
padding: 0;
}
body.woocommerce ul.products li.product .est-swatches__item{
margin: 0;
padding: 0;
line-height: 0;
}
body.woocommerce ul.products li.product .est-swatch{
display: block;
width: .875rem;
height: .875rem;
border-radius: 50%;
background-color: var(--est-swatch-color, #CCC);
box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .18);
cursor: pointer;
transition: transform 200ms var(--est-ease, cubic-bezier(.22,1,.36,1)),
box-shadow 200ms var(--est-ease, cubic-bezier(.22,1,.36,1));
}
@media (hover: hover) and (pointer: fine){
body.woocommerce ul.products li.product .est-swatch:hover{
transform: scale(1.15);
box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .35),
0 0 0 1px var(--est-ink, #131313);
}
}
body.woocommerce ul.products li.product .est-swatch.is-active{
box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .35),
0 0 0 1px var(--est-ink, #131313);
}
body.woocommerce ul.products li.product .est-swatches__more{
font-family: var(--est-font-body, "DM Sans", system-ui, sans-serif);
font-size: .6875rem;
letter-spacing: .04em;
color: var(--est-ink, #131313);
opacity: .6;
line-height: 1;
margin-left: .125rem;
}
/* While a swatch is previewing, suppress the second-image hover crossfade */
body.woocommerce ul.products li.product .est-card__media.is-previewing img + img,
body.woocommerce-page ul.products li.product .est-card__media.is-previewing img + img{
opacity: 0 !important;
}
@media (min-width: 48em){
body.woocommerce ul.products li.product .est-swatch{
width: 1rem;
height: 1rem;
}
}
@media (prefers-reduced-motion: reduce){
body.woocommerce ul.products li.product .est-swatch{
transition: none;
}
body.woocommerce ul.products li.product .est-swatch:hover{
transform: none;
}
}
/* --------------------------------------------------------------------------
Shop + category/tag archives use the theme's default boxed container
(.grid-container, max-width: var(--est-container)) — same width as
header/footer. Grid stays capped at 4 columns (see rule above).
-------------------------------------------------------------------------- */