17px 18px
.
Our markup puts each of those in an Elementor widget inside a flex
.subhero-inner whose gap is 0, and Elementor zeroes the widget margins — so
the three lines rendered touching, and the heading's descenders (ð, ö, ý)
ran into the lead. Restoring the prototype's own margins on the title widget
is enough; the tag and lead keep their zero margins as drawn.
This affects every page with a subhero, not just the shop.
The selector is .subhero .subhero-inner > .subhero-title, and it repeats the
value as margin-block-end, on purpose: Elementor sets widget spacing with the
logical property, which a plain `margin` shorthand at lower specificity does
not beat — verified, the margin-bottom came back 0px until both were given. */
.subhero .subhero-inner > .subhero-title{margin:16px 0 18px;margin-block-end:18px}
/* WOOCOMMERCE NOTICES — "…hefur verið bætt í vörukörfuna þína".
WooCommerce prints .woocommerce-notices-wrapper as a DIRECT CHILD OF
,
before anything else, so it rendered at y=0 — underneath the fixed header,
which occupies 16→86px. Measured: notice top 0, header bottom 86, so the
whole 88px message sat behind the bar.
Clearing it with padding on the wrapper (not a margin on the notice) keeps
WooCommerce free to swap the notice class for error/info variants, and the
:empty guard means the padding costs nothing on the vast majority of page
loads that have no notice at all. Width matches the site container so the
message lines up with the content beneath it. */
.woocommerce-notices-wrapper{
width:100%;max-width:var(--lk-width);margin:0 auto;
padding:110px 24px 0;box-sizing:border-box}
.woocommerce-notices-wrapper:empty{padding:0}
@media (max-width:1050px){
.woocommerce-notices-wrapper{padding:100px 18px 0}
}
@media (max-width:560px){
.woocommerce-notices-wrapper{padding:88px 14px 0}
}
/* CART CROSS-SELLS ("Þú gætir haft áhuga á…") — restyled to match the shop grid.
WooCommerce renders these with its own loop markup, floats and 48% widths,
so they looked nothing like our product cards. Every selector below is
prefixed .woocommerce .cart-collaterals because WooCommerce's own rules are
already that specific — a plain .cross-sells li.product{width:auto} loses to
them and the cards collapsed to 83px (measured).
Layout: .cart-collaterals becomes a column and the totals are ordered FIRST.
Left as-is, making the cross-sells full width pushed the totals and the
checkout button below the suggestions, which is the wrong thing to put in
front of someone who is ready to pay. */
.woocommerce .cart-collaterals{display:flex;flex-direction:column}
.woocommerce .cart-collaterals .cart_totals{order:1;float:none}
.woocommerce .cart-collaterals .cross-sells{order:2;width:100%;float:none;margin:60px 0 0}
.woocommerce .cart-collaterals .cross-sells > h2{
margin:0 0 22px;font-family:var(--font);font-size:26px;
font-weight:var(--heading-weight);letter-spacing:-.02em;color:var(--ink)}
.woocommerce .cart-collaterals .cross-sells ul.products{
display:grid;grid-template-columns:repeat(3,1fr);gap:34px 15px;
margin:0;padding:0;list-style:none;float:none}
/* WooCommerce clears its float with pseudo-elements; in a grid they become
phantom cells. */
.woocommerce .cart-collaterals .cross-sells ul.products::before,
.woocommerce .cart-collaterals .cross-sells ul.products::after{display:none}
.woocommerce .cart-collaterals .cross-sells ul.products li.product{
width:auto;float:none;margin:0;padding:0;display:block;position:relative}
.woocommerce .cart-collaterals .cross-sells ul.products li.product a.woocommerce-loop-product__link{
display:block;color:inherit;text-decoration:none}
.woocommerce .cart-collaterals .cross-sells ul.products li.product img{
background:#f5f2f8;object-fit:contain;mix-blend-mode:multiply;filter:saturate(.68);
width:100%;height:235px;margin:0;transition:transform .6s}
.woocommerce .cart-collaterals .cross-sells ul.products li.product:hover img{transform:scale(1.05)}
.woocommerce .cart-collaterals .cross-sells ul.products li.product .woocommerce-loop-product__title{
margin:16px 0 0;padding:0;font-family:var(--font);font-size:18px;
font-weight:var(--heading-weight);letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.woocommerce .cart-collaterals .cross-sells ul.products li.product .price{
display:block;margin:7px 0 0;font-size:14px;font-weight:800;color:var(--purple)}
.woocommerce .cart-collaterals .cross-sells ul.products li.product .price del{
color:var(--muted);font-weight:600;margin-right:7px}
.woocommerce .cart-collaterals .cross-sells ul.products li.product .price ins{text-decoration:none}
/* The lime corner button from .product-grid. The label is hidden rather than
removed so screen readers still get "Veldu kosti" / "Setja í körfu". */
.woocommerce .cart-collaterals .cross-sells ul.products li.product a.button{
position:absolute;top:195px;right:10px;width:40px;height:40px;min-height:0;
padding:0;margin:0;background:var(--lime);color:var(--purple);
font-size:0;display:grid;place-items:center}
.woocommerce .cart-collaterals .cross-sells ul.products li.product a.button::after{
content:"\2192";font-size:18px;font-weight:800;line-height:1}
@media (max-width:820px){
.woocommerce .cart-collaterals .cross-sells ul.products{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.woocommerce .cart-collaterals .cross-sells{margin-top:40px}
.woocommerce .cart-collaterals .cross-sells ul.products li.product img{height:180px}
.woocommerce .cart-collaterals .cross-sells ul.products li.product a.button{top:140px}
}
/* VARIATION TABLE — WooCommerce renders the attribute picker as a and
something in the stack paints its cells rgba(128,128,128,.07). That grey band
sat behind "TEGUND" and ran on below the select as an empty strip, which is
what the client circled. The table is flattened to blocks so the label and the
field stack like every other field on the page. */
.woocommerce table.variations,
.woocommerce table.variations tbody,
.woocommerce table.variations tr,
.woocommerce table.variations th,
.woocommerce table.variations td{
background:none;border:0;padding:0;display:block;width:100%}
.woocommerce table.variations td.value{margin:0 0 14px}
.woocommerce table.variations select{width:100%;margin:0}
/* DISABLED BUTTONS — "Setja í körfu" before a variant is chosen, and "Uppfæra
körfu" until a quantity changes. WooCommerce dims them with opacity:.5, which
fades the label along with the fill and left the text unreadable (client
flagged "Uppfæra körfu").
The fill is NOT overridable here: background-color at !important, and even an
inline !important, both leave it rgb(59,18,100) — verified. So the muted look
comes from a filter on the whole button instead, which needs no knowledge of
where the colour is set, and the label keeps its own white at full opacity.
opacity needs !important because WooCommerce's own .disabled rule is more
specific than anything sensible to write here. */
button.disabled,button:disabled,.button:disabled,a.button.disabled{
opacity:1!important;filter:grayscale(.5) brightness(1.45);cursor:not-allowed}
button.disabled:hover,button:disabled:hover,.button:disabled:hover{transform:none}
/* "Uppfæra körfu" — the cart's update button kept dark ink (#171220) on the
purple fill, measured contrast 1.33:1, which is what the client saw as
invisible text. The product page's button was fine because it already had
white; this one only carries class="button" and picked up a generic colour.
!important is needed, not laziness: a plugin stylesheet in the stack ships a
universal `*,::after,::before{color:#000!important}` rule, and no amount of
specificity beats an !important universal selector. With white restored the
contrast is 12.6:1 after the disabled filter is applied. */
button[name="update_cart"],
button[name="update_cart"]:disabled{color:#fff!important}
/* ---------------------------------------------------------------------------
* CLIENT REVIEW — round 2 (1 Oct feedback)
* ------------------------------------------------------------------------ */
/* Hero: more air above the copy, and a slightly smaller headline.
The client later confirmed this applies to EVERY page, so the sub-hero block
below carries the same treatment. */
.hero{padding-top:175px}
.hero-title{font-size:clamp(40px,3.6vw,52px)}
@media (max-width:1050px){
.hero-title{font-size:clamp(40px,5.2vw,50px)}
}
/* SHOP SUB-HERO SLIDER ([leiklist_shop_slider]).
Slides are stacked .subhero-image elements; only .is-active is visible.
The single-image case keeps the original rule untouched — when the shortcode
renders one slide it emits no .is-active class at all, so a static sub-hero
behaves exactly as before and none of this applies. */
/* SPECIFICITY, THE HARD WAY: the first version of this hid every slide,
including the active one. `.subhero:has(.subhero-image.is-active)` scores
0,3,0 on its own — :has() takes the specificity of its argument — so the
hide rule landed at 0,4,0 and out-specified a plain
`.subhero .subhero-image.is-active` at 0,3,0. Both rules now share the same
:has() prefix, so the active one wins on the extra class alone. */
.subhero-image{transition:opacity .9s ease}
.subhero:has(.subhero-image.is-active) .subhero-image{
opacity:0;
/* The zoom-in belongs to the first paint only; re-running it on every slide
change made the whole hero pulse. */
animation:none}
.subhero:has(.subhero-image.is-active) .subhero-image.is-active{opacity:1}
.subhero-slides{display:none}
.subhero-nav{
z-index:7;opacity:0;cursor:pointer;color:#fff;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.26);
backdrop-filter:blur(14px) saturate(1.1);
place-items:center;width:52px;height:52px;padding:0;display:grid;
position:absolute;top:50%;transform:translateY(-50%);
transition:opacity .28s,background .2s,border-color .2s,color .2s}
.subhero-nav.prev{left:24px}
.subhero-nav.next{right:24px}
.subhero:hover .subhero-nav{opacity:1}
.subhero-nav:hover{background:var(--lime);border-color:var(--lime);color:var(--purple-deep)}
.subhero-nav:focus-visible{opacity:1;outline:2px solid var(--lime);outline-offset:3px}
/* Touch: no hover to reveal arrows, and the gutters are gone — swipe drives it,
the same decision as the homepage hero. */
@media (max-width:820px){
.subhero-nav{display:none}
}
/* SUB-HERO on every inner page — content was pinned to the top, 2px under the
header, with 236px of dead space beneath it.
WHY GRID: .subhero is display:flex with align-items:flex-end, and that has no
effect — measured, the content sat at padding-top regardless of the alignment
value, so flex-end and center both rendered identically. Grid's align-content
does what the flex rule was supposed to, on every page, without having to
find whatever is defeating it.
Result across Fréttir, Skóli, Aðildarfélög: 67px clear of the header and 185px
below, instead of 2px and 236px. */
.subhero{display:grid;align-content:center;padding:150px 24px 110px}
/* One headline size for the whole site. Sub-heroes were 82px against the
homepage hero's 62px, which is what made every inner page read as shouting.
Same clamp as .hero-title so the two match at every width. */
.subhero-title,
.subhero-title h1{font-size:clamp(36px,3.6vw,52px);line-height:1.04}