-varianten (inga
default link-styles som underline eller blå färg). */
a.content-box__background-media {
color: inherit;
text-decoration: none;
}
/* Image-with-text-overlay — optional padding runt bilden.
Aktiveras via `add_padding`-settingen på sektionen → klassen
`.image-with-text-overlay--padded` läggs på color-scheme-wrappern.
Padding-värdet ärvs från theme settings → Spacing → Container gutter. */
.image-with-text-overlay--padded {
padding: var(--container-gutter);
}
/* Image-with-text-overlay — play-seal-overlay centrerat på bilden.
Positioneras absolut i content-box__background-media (som är `position:
relative` i Stretch). currentColor från inline style på span:en gör att
SVG-paths (som använder currentColor) renderas i den valda färgen. */
.image-with-text-overlay__play-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 1;
}
/* Feature card — used as feature_card block on main-product-rings (AC PDP).
Image left + heading/content right. Optional play-icon overlay on image.
All spacing (gap, margin) inherits from theme settings so admin can control
it globally without touching the block. */
.feature-card {
display: flex;
align-items: center;
gap: var(--container-gutter);
}
.feature-card__media {
position: relative;
flex: 0 0 var(--feature-card-image-width, 110px);
width: var(--feature-card-image-width, 110px);
aspect-ratio: 1 / 1;
overflow: hidden;
background-color: rgb(var(--text-color) / 0.04);
/* When the wrapper is an
(image_link set) — reset link-styling so the
visual is identical to the -variant. */
display: block;
color: inherit;
text-decoration: none;
}
.feature-card__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.feature-card__play-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.feature-card__content {
flex: 1;
min-width: 0;
}
.feature-card__heading {
margin: 0;
}
/* ============================================================================
AC BADGE — PDP (sites/main-product-rings → appraisers_badge block)
----------------------------------------------------------------------------
*** HARDKODAD ATT MATCHA EMAIL AC-BADGE (Product Grid 7) EXAKT ***
Alla värden hardkodade enligt CD-godkänd spec. Inga theme-variabler eller
inheritance från Stretch — varje property explicit satt här. För att ändra
utseendet, redigera värdena direkt här. Samma spec ska gälla för product
card badge (.badge--ac) längre ner i filen.
========================================================================== */
.ac-badge {
display: inline-block;
background: #F5F795; /* citron-gul */
color: #1c1c1c; /* sajtens huvud-textfärg (samma som body/heading) */
font-family: 'Futura PT', 'Futura', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400; /* Book / Regular */
font-size: 10px;
letter-spacing: 0.3px; /* ≈0.03em vid 10px */
line-height: 1; /* ingen leading */
text-transform: uppercase;
padding: 7px 8px 6px 8px; /* T/R/B/L — bumped bottom +1px för optisk centrering på PDP-kontext */
border-radius: 4px;
}
/* ============================================================================
AC BADGE — Product card (snippets/product-badges.liquid → .badge--ac span)
----------------------------------------------------------------------------
*** HARDKODAD ATT MATCHA EMAIL AC-BADGE (Product Grid 7) EXAKT ***
Identisk spec som .ac-badge ovan. Alla värden hardkodade — overrider Stretchs
default `.badge`-regel (font-family, size, weight, letter-spacing, padding).
Använder `.badge.badge--ac` compound selector för specificity 0,2,0 → vinner
över `.badge` (0,1,0).
========================================================================== */
.badge.badge--ac {
display: inline-block;
background: #F5F795; /* citron-gul */
color: #1c1c1c; /* sajtens huvud-textfärg (samma som body/heading) */
font-family: 'Futura PT', 'Futura', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400; /* Book / Regular */
font-size: 10px;
letter-spacing: 0.3px; /* ≈0.03em vid 10px */
line-height: 1; /* ingen leading */
text-transform: uppercase;
padding: 7px 8px 7px 8px; /* T/R/B/L — bumped bottom +2px för optisk centrering på card-kontext */
border-radius: 4px;
border: none;
}
/* NEW-badge — behåller font-weight 400 så den inte är default 600. Övrigt
beteende från Stretch's `.badge`-regel oförändrat. */
.badge--new {
font-weight: 400;
}
/* Reset prose-spacing on icons inside buttons.
The theme's .prose :where(.icon, .link) rule adds a top margin to
any .icon inside a .prose container (intended for icons used as
standalone block elements next to text). That top margin pushes
button icons below the text baseline. Buttons use flex with
align-items:center, so we explicitly zero the margin here. */
.button .icon,
.button__content .icon {
margin-block-start: 0;
margin-block-end: 0;
}
/* Blog post card — optional fixed aspect ratios on the image container.
Used by AC episode grids (3:4) plus available for any standard blog grid
that wants consistent card heights. */
.blog-post-card__image-container--1-1 { aspect-ratio: 1 / 1; }
.blog-post-card__image-container--4-5 { aspect-ratio: 4 / 5; }
.blog-post-card__image-container--3-4 { aspect-ratio: 3 / 4; }
.blog-post-card__image-container--16-9 { aspect-ratio: 16 / 9; }
.blog-post-card__image-container--1-1 > img,
.blog-post-card__image-container--4-5 > img,
.blog-post-card__image-container--3-4 > img,
.blog-post-card__image-container--16-9 > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Blog post card — OVERLAY variant.
Text positioned over the image in a 3x3 cell grid where each text field
can be placed independently. Multiple fields sharing the same cell stack
vertically. All visual styling (color, padding, typography, spacing) is
inherited from theme settings — no hardcoded design values. */
.blog-post-card--overlay {
text-decoration: none;
color: inherit;
display: block;
}
.blog-post-card__image-container--overlay {
position: relative;
background-color: rgb(var(--text-color) / 0.04);
}
.blog-post-card__image-container--overlay > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 3x3 grid covers the whole image; each cell is a flex-column so multiple
text fields placed in the same cell stack vertically.
Padding ärvs från theme settings → container-gutter (same pattern as
.content-box used by media-blocks).
Text-färg ärvs från overlay_color_scheme (set on the same element via
color-scheme--{id} class in the snippet). */
.blog-post-card__overlay-grid {
position: absolute;
inset: 0;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
padding: max(1.5rem, var(--container-gutter));
color: rgb(var(--text-color));
}
.blog-post-card__overlay-cell {
display: flex;
flex-direction: column;
min-width: 0;
}
/* Position each cell into its grid slot (row / column) with self-alignment */
.blog-post-card__overlay-cell--top-left { grid-row: 1; grid-column: 1; align-self: start; justify-self: start; text-align: left; }
.blog-post-card__overlay-cell--top-center { grid-row: 1; grid-column: 2; align-self: start; justify-self: center; text-align: center; }
.blog-post-card__overlay-cell--top-right { grid-row: 1; grid-column: 3; align-self: start; justify-self: end; text-align: right; }
.blog-post-card__overlay-cell--middle-left { grid-row: 2; grid-column: 1; align-self: center; justify-self: start; text-align: left; }
.blog-post-card__overlay-cell--middle-center{ grid-row: 2; grid-column: 2; align-self: center; justify-self: center; text-align: center; }
.blog-post-card__overlay-cell--middle-right { grid-row: 2; grid-column: 3; align-self: center; justify-self: end; text-align: right; }
.blog-post-card__overlay-cell--bottom-left { grid-row: 3; grid-column: 1; align-self: end; justify-self: start; text-align: left; }
.blog-post-card__overlay-cell--bottom-center{ grid-row: 3; grid-column: 2; align-self: end; justify-self: center; text-align: center; }
.blog-post-card__overlay-cell--bottom-right { grid-row: 3; grid-column: 3; align-self: end; justify-self: end; text-align: right; }
/* Text inherits color from the grid (which itself inherits from overlay color scheme).
Background of the color-scheme wrapper is ignored — we only want text-color. */
.blog-post-card__overlay-grid.color-scheme {