:root {

    /* Layout */

    --page-width: 90rem;
    --wide-width: 80rem;
    --site-width: 62.5rem;
    --footer-aside-width: 25rem;
    
    --wide-card-width: 52.5rem;

    --breakout-width: 55rem;
    
    --content-width: 42.5rem;
    --content-table-width: 43.5rem;

    /* Hur smal får en tabell bli innan den måste skrollas? */
    --table-min-width: 37.5rem;

    /* Maxbredden för text under en sektionsrubrik */
    /* --paragraph-wide-width: 48.75rem; */
    --paragraph-wide-width: 48rem;
    
    --site-logo-width: 255px;

    /* Produktkort (kuddar) */
    /* --card-width: 18.75rem; */


    /* Färger */

    --black: #000;
    --yellow: #fdd000;
    --red: #cc0000;

    --bg-site-body: var(--bg-content);
    --bg-site-header: var(--bg-content);
    --bg-site-footer: #faf7f5;
    --bg-content: #fff;

    /* --bg-warm-grey: #faf7f5; */

    /* --border-ultra-light: #f1f1f1; */
    --border-light: #edebe5;
    --border-medium-dark: #999;
    --border-dark: #333;

    --text-semi-dark: #333;
    --text-dark: #222;

    --bg-thead: #ffd70066;
    --bg-even-row: #edebe5cc;
    --bg-tag-alt-1: #ddf4ff;
    --bg-tag-alt-2: #63ae2d33;
    --bg-tag-shown: #ffd700; /* gold */
    --bg-tag-shown-light: #ffd70099;
    --bg-tag-other: #f8ede5;
    --bg-tag-other-light: #faf7f5;
    --bg-tag-offer: crimson;
    --text-color-bg-offer: #fff; /* Om mörk bakgrundsfärg */
    --bg-tag-offer-2: #ff69b455;
    --bg-tag-order: #ebebeb;
    --bg-tag-stock: #32CD3277;
    
    /* Länkfärger */
    --link-color: #067ea7;
    --link-color-hover: #32a3c3;

    /* Den röda färgen som finns i loggan */
    --logo-red: #ed1c24;


    /* Skuggor */
    
    --shadow-1:  4px 4px 4px 0 #00000026;
    --shadow-subtle-1: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    /* Skuggor från WordPress */
    /* --wp--preset--shadow--sharp */
    /* --shadow-wp-sharp: 6px 6px 0px rgba(0, 0, 0, 0.2); */
    /* Tillsammans med border: 1px solid #333 */

    /* */
    /* --shadow-gallery-1: 0px 0px 10px 0 rgba(0, 0, 0, 0.2); */
    /* Utan ram? */

    /* fcl-box-shadow */
    --shadow-card-1: 3px 3px 3px 0 rgba(0, 0, 0, 0.2);
    /* Tillsammans med border: 1px solid rgba(0, 0, 0, 0.2) */



    /* Fluid spacing (med hjälp av Utopia fluid space calculator) */

    /* @link https://utopia.fyi/clamp/calculator?a=320,1000 */

    --fluid-0-10: clamp(0rem, -0.2941rem + 1.4706vw, 0.625rem);
    --fluid-0-15: clamp(0rem, -0.4412rem + 2.2059vw, 0.9375rem);

    --fluid-5-10: clamp(0.3125rem, 0.1654rem + 0.7353vw, 0.625rem);
    --fluid-5-15: clamp(0.3125rem, 0.0184rem + 1.4706vw, 0.9375rem);

    --fluid-10-15: clamp(0.625rem, 0.4779rem + 0.7353vw, 0.9375rem);
    --fluid-10-20: clamp(0.625rem, 0.3309rem + 1.4706vw, 1.25rem);
    --fluid-10-30: clamp(0.625rem, 0.0368rem + 2.9412vw, 1.875rem);
    --fluid-10-40: clamp(0.625rem, -0.2574rem + 4.4118vw, 2.5rem);

    --fluid-15-20: clamp(0.9375rem, 0.7904rem + 0.7353vw, 1.25rem);

    --fluid-20-30: clamp(1.25rem, 0.9559rem + 1.4706vw, 1.875rem);
    --fluid-20-40: clamp(1.25rem, 0.6618rem + 2.9412vw, 2.5rem);
    --fluid-20-50: clamp(1.25rem, 0.3676rem + 4.4118vw, 3.125rem);
    --fluid-20-60: clamp(1.25rem, 0.0735rem + 5.8824vw, 3.75rem);

    --fluid-30-40: clamp(1.875rem, 1.5809rem + 1.4706vw, 2.5rem);
    --fluid-30-50: clamp(1.875rem, 1.2868rem + 2.9412vw, 3.125rem);
    --fluid-30-60: clamp(1.875rem, 0.9926rem + 4.4118vw, 3.75rem);
    --fluid-30-70: clamp(1.875rem, 0.6985rem + 5.8824vw, 4.375rem);
    --fluid-30-80: clamp(1.875rem, 0.4044rem + 7.3529vw, 5rem);
    --fluid-30-90: clamp(1.875rem, 0.1103rem + 8.8235vw, 5.625rem);

    --fluid-40-80: clamp(2.5rem, 1.3235rem + 5.8824vw, 5rem);
    --fluid-50-80: clamp(3.125rem, 2.2426rem + 4.4118vw, 5rem);

    --fluid-30-58: clamp(1.875rem, 1.0515rem + 4.1176vw, 3.625rem);
    --fluid-26-48: clamp(1.625rem, 0.9779rem + 3.2353vw, 3rem);
    --fluid-22-38: clamp(1.375rem, 0.9044rem + 2.3529vw, 2.375rem);
    --fluid-18-28: clamp(1.125rem, 0.8309rem + 1.4706vw, 1.75rem);
    --fluid-18-22: clamp(1.125rem, 1.0074rem + 0.5882vw, 1.375rem);
    --fluid-18-20: clamp(1.125rem, 1.0662rem + 0.2941vw, 1.25rem);
    --fluid-15-17: clamp(0.9375rem, 0.8787rem + 0.2941vw, 1.0625rem);
    --fluid-14-16: clamp(0.875rem, 0.8162rem + 0.2941vw, 1rem);
    --fluid-14-15: clamp(0.875rem, 0.8456rem + 0.1471vw, 0.9375rem);
    --fluid-13-15: clamp(0.8125rem, 0.7537rem + 0.2941vw, 0.9375rem);


    /* Avstånd, mellanrum och sånt */
    --gutter: var(--fluid-20-60);
    --section-block-padding: var(--fluid-30-70);

    /* Fast bredd som därmed även kan användas inom smala behållare*/
    --gallery-gap: 1.25rem;

    /* Styckesavstånd */
    --paragraph-spacing: 1.5em;

    /* Listor */
    --list-item-spacing: 0.5em;
    --list-item-offset: 0.625rem;

    /* Avstånd mellan element */
    --flow-spacing: var(--paragraph-spacing);
    --content-spacing: var(--paragraph-spacing);
    
    /* Avstånd mellan text och linje "rakt igenom" */
    --text-divider-gap: 1rem;


    /* Typografi */

    --font-size-normal: 1rem;

    --h1: var(--fluid-30-58);
    --h2: var(--fluid-26-48);
    --h3: var(--fluid-22-38);
    --h4: var(--fluid-18-28);

    --font-size-large:    var(--fluid-18-22);
    --font-size-larger:   larger;
    --font-size-medium:   var(--fluid-15-17);
    --font-size-small:    var(--fluid-14-16);
    --font-size-smaller:  var(--fluid-13-15);

    --font-size-table:    var(--fluid-14-16);

    --font-size-table-th: var(--fluid-13-15);
    --font-size-table-td: var(--fluid-14-16);


    /* Radhöjd */

    --line-height-text: 1.6;
    --line-height-heading: 1.25;
    --line-height-h3: 1.3;
    --line-height-h4: 1.4;

    /* Huvudmeny */

    --site-nav-font-size: var(--font-size-small);
    --site-nav-font-size: var(--font-size-medium);
    /* --site-nav-font-size: var(--font-size-normal); */
    /* --site-nav-font-weight: 700; */
    --site-nav-font-weight: 600;
    --site-nav-link-color: inherit;

    /* TEST */
    --site-nav-font-weight: 400;
    --site-nav-link-color: inherit;


    /* Bilder och bildgallerier */

    --gallery-min-col-width: 21.75rem;
    
    /* Produktmeny */

    --nav-btn-font-size: smaller;
    --nav-btn-font-weight: 600;
    --nav-btn-border-radius: 3px;
    --nav-btn-gap: 0.6rem 0.5rem;
    --nav-btn-padding: 0.3em 0.5em 0.3em 0.5em;


    /* Safari resize fix */
    min-height: 0vw;
}

*, *::before, *:after {
    box-sizing: inherit;
}

html {

    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    box-sizing: border-box;
    color: var(--text-semi-dark);
    line-height: var(--line-height-text);

}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    min-height: 100vh;

    margin: 0;
    padding: 0;

    font-family: system-ui, sans-serif;
    font-size: var(--font-size-medium);

    line-height: var(--line-height-text);
    
    /* TEST */
    /* background-color: red; */

}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}


img,
video {
   vertical-align: middle;
}

img,
video {
    max-width: 100%;
    height: auto;
    font-style: italic;
}

figure {
    margin: 0;
}

h1 {
    font-size: var(--h1);
    line-height: var(--line-height-heading);
}

.size-h1 {
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
    line-height: var(--line-height-heading);
}

.size-h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
    /* line-height: var(--line-height-heading); */
    line-height: var(--line-height-h3);
}

.size-h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
    line-height: var(--line-height-h4);
}

.size-h4 {
    font-size: var(--h4);
}

h1, h2, h3, h4 {

    text-wrap: pretty;
	color: var(--black);
    margin-block: 0;
    /* font-weight: 800; */
    font-weight: 700;

}

.font-weight--600 {
    font-weight: 600;
}

.font-weight--700 {
    font-weight: 700;
}

/* .line-height-h {
    line-height: var(--line-height-heading);
} */

p, blockquote, caption, figcaption {

    text-wrap: pretty;
    margin-block: 0;

}

.size-p {
    font-size: var(--font-size-medium);
}

.size-large {
    font-size: var(--font-size-large);
}

.size-p-larger {
    font-size: var(--font-size-larger);
}

.size-p-smaller {
    font-size: var(--font-size-smaller);
}

.line-height-p {
    line-height: var(--line-height-text);
}

input, button, textarea, select {

  font-family: inherit;
  font-size: inherit;

}

span.no-wrap {
    white-space: preserve nowrap;
}

/* Länkar */

a {
    color: var(--link-color);
	text-decoration-thickness: 0.1em !important;
	text-underline-offset: 0.1em;
}

a:hover,
a:focus-visible {
    color: var(--link-color-hover);
}

/* Extra marginal för ankarlänkars mål */
:target {
    scroll-margin-block: var(--fluid-20-50);
}

/* Listor */

ul {

    margin-block: 0;

}

/* Hjälpklasser */

.centered {
    text-align: center;
}

.centered p {
    margin-inline: auto;
}

.align-right {
    text-align: right !important;
}

.high-contrast a {

    color: var(--text-dark);
}

.gutter {
    padding-inline: var(--gutter) !important;
}

/* .no-gutter {
    padding-inline: 0 !important;
} */

/* .section-gap {
    gap: var(--section-block-padding);
} */

/* .gap--fluid-30-40 {
    gap: var(--fluid-30-40) !important;
} */

.block-padding--small {
    padding-block: var(--fluid-15-17);
}

.section-block-padding {
    padding-block: var(--section-block-padding);
}

.section-top-padding {
    padding-block-start: var(--section-block-padding);
}

.section-bottom-padding {
    padding-block-end: var(--section-block-padding);
}

.justify-items-start {
    justify-items: start;
}

.top-border-dashed {
    border-top: 1px dashed var(--border-medium-dark);
}

.bottom-border-dashed {
    border-bottom: 1px dashed var(--border-medium-dark);
}

.box-shadow-subtle {
    box-shadow: var(--shadow-subtle-1);
}

.content-background {
    background-color: var(--bg-content);
}

.footer-background {
    background-color: var(--bg-site-footer);
}

/* .text-divider {
    display: flex;
    align-items: center;
}

.text-divider::before,
.text-divider::after {
    content: '';
    height: 1px;
    background-color: var(--border-medium-dark);
    flex-grow: 1;
}

.text-divider::before {
    margin-inline-end: var(--text-divider-gap);
}

.text-divider::after {
    margin-inline-start: var(--text-divider-gap);
} */

/*
 * Använd klassen content-spacing för att återskapa marginaler mellan element eftersom
 * marginalerna tagits bort för att slippa problem med "collapsing margins".
 *
 */

.content-spacing > * + * {
    margin-top: var(--content-spacing, 1em);
}

.content-spacing--compact > * + * {
    margin-top: 1em;
}

.narrow-paragraph p {
    width: 100%;
    max-width: var(--content-width);
}

.wide-paragraph p {
    width: 100%;
    max-width: var(--paragraph-wide-width);
}

.centered.wide-paragraph p,
.centered-600.wide-paragraph p,
.centered-782.wide-paragraph p {
    margin-inline: auto;
}



/*
 * Generella 'wrappers'
 *
 * Komplettera med hjälpklasser.
 *
 */

/* .grid-wrapper {

    max-width: 100%;
    
    display: grid;
    grid-template-columns: 1fr;

} */

/*
.wrapper,
.wrapper-680,
.wrapper-840,
.wrapper-1000,
.wrapper-1280,
.wrapper-page {

    width: 100%;
    max-width: 100%;
    margin-inline: auto;
}

.wrapper-680 {
    max-width: var(--content-width);
}

.wrapper-840 {
    max-width: var(--wide-card-width);
}

.wrapper-1000 {
    max-width: var(--site-width);
}

.wrapper-1280 {
    max-width: var(--wide-width);
}

.wrapper-page {
    max-width: var(--page-width);
}
*/


.table-wrapper {
    
    overflow: auto;

    width: 100%;
    max-width: var(--content-table-width) !important; /* BEHÖVS !important ? */
    margin-inline: auto;
}



/* Sidhuvuet */

.site-header {

    background-color: var(--bg-site-header);

    max-width: 100%;
    
    padding-inline: var(--gutter);

}

.site-header__wrapper {

    background-color: var(--bg-content);

    width: 100%;
    /* max-width: var(--wide-width); */
    max-width: var(--page-width);

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    column-gap: 0;
    row-gap: var(--fluid-20-30);
    row-gap: 1.25rem;
    
    margin-inline: auto;
    padding-block: var(--fluid-20-30);

    /* text-align: center; */

}

.site-header__logotype img {

    width: 100%;
    max-width: var(--site-logo-width);
    height: auto;

}

/* Huvudmeny */

.site-header__navigation ul {

    list-style: '';
    margin: 0;
    padding: 0;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    column-gap: 1em;
    row-gap: 0.5em;

}

.site-header__navigation a {

    color: var(--site-nav-link-color);
    
    text-decoration: none;

    font-size: var(--site-nav-font-size);
    font-weight: var(--site-nav-font-weight);
    line-height: 1;
    
}

.site-header__navigation a:hover,
.site-header__navigation a:focus-visible {

    color: var(--link-color-hover);

    text-decoration: underline;
    /* text-underline-offset: 0.2em; */
    
}


/*
 * Sidfoten
 *
*/

.site-footer {

    background-color: var(--bg-site-footer);

    max-width: 100%;
    
    padding-block-start: var(--gutter);
    padding-block-end: var(--fluid-30-40);

    padding-inline: var(--gutter);

}

.site-footer__wrapper {

    width: 100%;
    max-width: var(--content-width);
    
    margin-inline: auto;

}

.site-footer__grid-wrapper {

    width: 100%;
    max-width: var(--wide-width); /* Byt till --page-width ? */
    
    margin-inline: auto;

    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;

    
    column-gap: var(--fluid-20-30);
    row-gap: var(--fluid-20-60);

}


.site-footer__customer-service {

    max-width: var(--content-width);

}

.site-footer__aside {
    
    /* width: 100%; */
    max-width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    text-align: center;

    background-color: var(--bg-content);

    padding-block: var(--fluid-30-60);
    padding-inline: var(--fluid-30-60);

    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-subtle-1);

}

.site-footer h2 {

    font-size: var(--font-size-medium);
    /* font-weight: 800; */

}

.site-footer h2 + p {
    
    margin-block-start: 0.5em;

}

.site-footer__aside p {

    margin-block-start: var(--fluid-20-60);
    margin-block-end: var(--fluid-15-20);

}

.site-footer a {

    font-weight: 600;

}

.site-footer__navigation ul {

    list-style: '';
    margin: 0;
    padding: 0;

}

.site-footer__navigation li {

    margin-block-end: var(--list-item-spacing);

}

.site-footer__navigation a {

    text-decoration: none;
    
    color: inherit;
    font-size: var(--site-nav-font-size);
    font-weight: var(--site-nav-font-weight);
    /* font-weight: inherit; */
    line-height: 1;
    
}

.site-footer__navigation a:hover,
.site-footer__navigation a:focus-visible {

    color: var(--link-color-hover);
    text-decoration: underline;
    
}


/*
 * Sidans innehåll (main)
 *
 */

.site-main {
    
    max-width: 100%;

}



/*
 * Sektionen 'page-hero'
 *
 */

.page-hero__header {

    width: 100%;
    max-width: var(--site-width);
    margin-inline: auto;

    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fluid-20-30);

    text-align: center;

}

.page-hero__header .accent-heading {

    order: -1;
    margin-block-start: 0;

}

.page-hero__header p {

    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;

}

.page-hero__content {

    max-width: 100%;

    display: grid;
    grid-template-columns: 1fr;

    gap: var(--gallery-gap);

}


/*
 * Aktuella öppettider visas i en ruta i sektionen page-hero.
 *
 */

.opening-hours {

    width: 100%;
    max-width: var(--site-width);
    margin-inline: auto;

    text-align: center;

    border: 1px solid var(--border-medium-dark);
    box-shadow: var(--shadow-card-1);

    padding-block-end: var(--fluid-30-40);
    padding-inline: var(--fluid-10-40);

    margin-block-start: var(--section-block-padding);

}

.opening-hours h2 {

    font-size: var(--font-size-medium);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.0625em;

    background-color: var(--bg-content);

    display: inline-block;
    position: relative;
    top: -0.85em;

    padding-inline: 0.5rem;

}

.opening-hours p:first-of-type {

    margin-block-start: 0.4em;

}


span.closed {

    color: var(--red);

}

/*
 * Aktuella erbjudande
 *
 */

.current-offer {

    padding-block-start: var(--fluid-10-15);
    padding-block-end: var(--fluid-0-15);

}

/*
 * Katalog och prislista
 *
 *
 */

.catalogue__header {

    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;

    text-align: center;

    padding-block-end: var(--fluid-30-40);

}

.catalogue__header p {

    max-width: var(--content-width);
    margin-inline: auto;

}

.catalogue__content {

    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;

    text-align: center;

}


.catalogue__cover {

    width: 100%;
    max-width: var(--breakout-width);
    margin-inline: auto;

    text-align: center;

    padding-block-end: var(--fluid-30-40);

}

.catalogue__cover img {

    width: 100%;
    max-width: 100%;

    box-shadow: var(--shadow-subtle-1);

}


/*
 * Sektionen 'product-listing' listar alla bäddsoffor och dagbäddar vi vill lyfta
 * fram, det vill säga skriva om på denna sida. I en framtid kommer denna sektion att
 * bilda en egen (kategori)sida med undersidor för respektive produkt.
 *
 */

.product-listing__hero {

    max-width: 100%;

    /* TEST */
    /* text-align: center; */

    display: grid;
    gap: 1rem;

    padding-block-end: var(--section-block-padding);
    padding-inline: var(--gutter);

}

.product-listing__hero h3 {

    font-size: var(--font-size-medium);
    /* font-weight: 700; */

    margin-block-start: var(--fluid-10-30);
    
}


/*
 * Produktmenyn - länkar till alla produkter som vi presenterar på sidan.
 *
 */

.product-listing__navigation ul {
   
    list-style: '';
    margin: 0;
    padding: 0;

    display: flex;
    flex-wrap: wrap;

    max-width: var(--content-width);
    margin-inline: auto;

    /* TEST */
    /* justify-content: center; */

    gap: var(--nav-btn-gap);

}

.product-listing__navigation a {

    display: block; /* Håller allt inom li-elementet utan 'overflow'. */

    background-color: var(--bg-tag-other);

    font-size: var(--nav-btn-font-size);
    font-weight: var(--nav-btn-font-weight);
    line-height: inherit;

    padding: var(--nav-btn-padding);
    border-radius: var(--nav-btn-border-radius);

    color: var(--site-nav-link-color);
    
    text-decoration: none;

}

.product-listing__navigation a:hover,
.product-listing__navigation a:focus-visible {

    background-color: var(--bg-tag-other-light);
    color: var(--black);
    
}

.product-listing__navigation a.shown {

    background-color: var(--bg-tag-shown);

}

.product-listing__navigation a.shown:hover,
.product-listing__navigation a.shown:focus-visible {

    background-color: var(--bg-tag-shown-light);
    color: var(--black);

}


/*
 * Varje produkt (bäddsoffa eller dagbädd) är en egen 'article'.
 *
 */

.product {

    max-width: 100%;

    padding-block: var(--fluid-30-70);
    padding-inline: var(--gutter);

    /* Om bäddsoffor i "kort" */
    /* margin-block-start: var(--gallery-gap); */

}

.product__header {

    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;

    display: grid;
    justify-items: start;

    margin-block-end: var(--paragraph-spacing);

}

.product__price-summary {

    font-weight: 700;

}

.product p,
.product h4,
.key-features {

    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;

}

.price {

    font-weight: 600;

}

.textile {

    font-weight: 600;

}

.dimensions {

    font-weight: inherit;
}

.key-features {

    list-style-type: square;
    padding-inline-start: 1em !important;

}

.key-features + p {

    margin-block-start: 2em;

}

.key-features li {

    padding-inline-start: var(--list-item-offset);
    margin-block-end: var(--list-item-spacing);

}

.product h4 {
    margin-block-start: 2em;
}

.product h4 + p {
    margin-block-start: 1em;
}


/*
 * Pristabeller
 *
 *
 */

.product__price-table {

    width: max(var(--table-min-width), 100%);

    border-collapse: collapse;
    border-spacing: 0;
  
}

.product__price-table,
.product__price-table th,
.product__price-table td {

    border: 1px solid var(--border-dark);

}

.product__price-table th,
.product__price-table td {

    text-align: left;
    padding: 0.5rem;

}

.product__price-table thead {

    background-color: var(--bg-thead);

}

/* Baserat på att pristabeller har 4 kolumner. */
.product__price-table thead th {
    width: 25%;
}

.product__price-table tr:nth-child(even) {
    background-color: var(--bg-even-row);
}


/*
 * Madrasser
 *
 */

.mattress {

    width: 100%;
    max-width: var(--site-width);

    padding-block: var(--fluid-30-70);
    padding-inline: var(--gutter);

    margin-block-start: var(--gallery-gap);

}

.mattress:nth-child(2) {

    margin-block-start: var(--fluid-30-70);
}

.mattress-hero {

    width: 100%;
    max-width: 100%;

    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fluid-20-30);

    align-items: start;

    margin-block-end: var(--fluid-30-40);
}

.mattress-hero__image img {

    aspect-ratio: 16 / 9;
    object-fit: cover;

    border-radius: 5px;

    box-shadow: var(--shadow-subtle-1);
    
}

.mattress-hero__header {

    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;

    display: grid;
    justify-items: start;

}

.mattress-hero__description {

    font-weight: 700;

}

.mattress p,
.mattress h4 {

    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;

}

.mattress h4 {

    font-size: var(--font-size-medium);
    font-weight: 700;
    margin-block-start: 1.6em;

}

.mattress h4 + p {

    margin-block-start: 0.4em;

}

.mattress .table-wrapper {

    margin-block-start: 2em;
}


/*
 * Soffkuddar, puffar, klädsel och ev andra kort
 *
 */

.card-grid,
.cushion-grid {

    width: 100%;
    max-width: 100%;

    display: grid;
    grid-template-columns: 1fr;

}

.card {

    width: 100%;
    max-width: 100%;

    display: grid;
    grid-template-columns: 1fr;

}

.card__content-wrapper {

    /* padding-block: var(--fluid-20-30); */

    padding-block-start: var(--fluid-10-20);
    padding-block-end: var(--fluid-30-60);

    padding-inline: var(--gutter);
    
}

.card__media-wrapper {

    order: -1;
    text-align: center;
    
}

/* .flip-card .card__media-wrapper {

    order: unset;
    
} */

.card__media-wrapper img {

    object-fit: scale-down;
    
}

.card__media-wrapper.image-cover img {

    object-fit: cover;

}

.card__media-wrapper.image-cover-1 img {

    object-fit: cover;
    aspect-ratio: 1;

}

.card__media-wrapper.image-cover-16-9 img {

    object-fit: cover;
    aspect-ratio: 16/9;

}

.card__media-wrapper.image-cover-3-2 img {

    object-fit: cover;
    aspect-ratio: 3/2;

}

.card__media-wrapper.image-contain img {

    object-fit: contain;

}

.card__media-wrapper.image-contain-3-2 img {

    object-fit: contain;
    aspect-ratio: 3/2;

}

.card__media-wrapper.image-padding {

    padding: var(--gutter);

}

.card h3 {

    font-size: var(--font-size-large);
    font-size: var(--h4);
}


/*
 * Pristabeller (madrasser)
 *
 *
 */

.price-table {

    width: max(var(--table-min-width), 100%);
    

    border-collapse: collapse;
    border-spacing: 0;
  
}

.price-table,
.price-table th,
.price-table td {

    border: 1px solid var(--border-dark);

}

.price-table th {

    font-size: var(--font-size-table-th);;

}

.price-table td {

    font-size: var(--font-size-table-td);;

}


.price-table th,
.price-table td {

    text-align: left;
    padding: 0.4rem;

}

.price-table thead {

    background-color: var(--bg-thead);

}

/* Baserat på att pristabeller har 4 kolumner. */
.price-table thead th {
    width: 25%;
}

.price-table tr:nth-child(even) {
    background-color: var(--bg-even-row);
}


/*
 * Etiketter / märken
 *
 */

.tag {

    order: -1;

    margin-block-start: 0;
    margin-block-end: 1em;

}

.tag-list {

    order: -1;
    
    list-style: '';
    margin: 0;
    padding: 0;

    margin-block-end: 1em;

    display: flex;
    flex-wrap: wrap;

    gap: var(--nav-btn-gap);
}

.tag,
.tag-list span {

    display: block;

    margin: 0;
    padding: 0;

    font-size: var(--nav-btn-font-size);
    font-weight: var(--nav-btn-font-weight);
    line-height: inherit;

    padding: var(--nav-btn-padding);
    border-radius: var(--nav-btn-border-radius);

}

.tag.shown,
.tag-list .shown {
    background-color: var(--bg-tag-shown, none);
}

.tag.alt-1,
.tag-list .alt-1 {
    background-color: var(--bg-tag-alt-1, none);
}

.tag.alt-2,
.tag-list .alt-2 {
    background-color: var(--bg-tag-alt-2, none);
}

.tag.offer,
.tag-list .offer {
    background-color: var(--bg-tag-offer, none);
    color: var(--text-color-bg-offer, inherit);
}

.tag.offer-2,
.tag-list .offer-2 {
    background-color: var(--bg-tag-offer-2, none);
}

.tag.order,
.tag-list .order {
    background-color: var(--bg-tag-order, none);
}


.tag.stock,
.tag-list .stock {
    background-color: var(--bg-tag-stock, none);
}

.tag.other,
.tag-list .other {
    background-color: var(--bg-tag-other, none);
}


/*
 * Bildgalleri
 *
 */

.product__gallery {

    width: 100%;
    max-width: var(--site-width);
    margin-inline: auto;

    list-style: '';
    
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gallery-gap);

    padding-inline: 0;
    padding-block: var(--fluid-30-40);

}

.product__gallery li {

    margin: 0;
    padding: 0;

    /*
    Om det ska vara ram runt bilderna, komplettera även med padding.

    padding: var(--gallery-gap);
    
    border: 1px solid var(--border-medium-dark);
    box-shadow: var(--shadow-subtle-1);
    */

}

.product__gallery li.align-end {

    align-self: end;

}

.product__gallery li.align-center {

    align-self: center;
    
}

.product__gallery figcaption,
.product__video figcaption {

    font-size: smaller;
    /* font-weight: 700; */
    font-weight: 600;

    margin-top: var(--content-spacing, 1em);

    text-align: center;

}

.product__gallery img {

    object-fit: scale-down;

}

.product__gallery.align-items-end {
    align-items: end;
}

.product__gallery.align-items-center {
    align-items: center;
}

.product__gallery.col-gap--fluid-30-40 {
    column-gap: var(--fluid-30-40) !important;
}

.product__gallery.row-gap--fluid-20-40 {
    row-gap: var(--fluid-20-40) !important;
}

.product__gallery.row-gap--fluid-30-40 {
    row-gap: var(--fluid-30-40) !important;
}

.product__gallery.row-gap--fluid-20-60 {
    row-gap: var(--fluid-20-60) !important;
}

.product__gallery.row-gap--fluid-30-60 {
    row-gap: var(--fluid-30-60) !important;
}

.aspect-ratio-3-2 img {

    object-fit: scale-down;
    aspect-ratio: 3/2;

}

.aspect-ratio-16-9 img {

    object-fit: scale-down;
    aspect-ratio: 16/9;

}

.aspect-ratio-16-10 img {

    object-fit: scale-down;
    aspect-ratio: 16/10;

}

.aspect-ratio-1-1 img {

    object-fit: scale-down;
    aspect-ratio: 1;

}


/*
 * Video
 *
 * Inbäddad video från egen server
 *
 */

.product__video {

    width: 100%;
    max-width: var(--breakout-width);
    margin-inline: auto;

    text-align: center;
}

.product__video video {

    box-shadow: var(--shadow-subtle-1);

    margin-inline: auto;
}



/* 
 * Och nu alla...
 *
 * MEDIA QUERIES
 *
 */

@media (min-width: 600px) { 

    /* GENERELLA GREJER */

    .centered-600 {
        text-align: center;
    }
    
    .centered-600 header {
        text-align: center;
    }

    /* KORT */

    .cushion-grid .card {

        grid-template-columns: 2fr 3fr;
        align-items: center;
    
    }

    .cushion-grid .card__content-wrapper {

        padding-block: var(--fluid-20-30);
        padding-inline: 0;
        
    }

    .cushion-grid .card__media-wrapper.image-padding {

        padding: var(--fluid-20-30);

    }

    .cushion-grid .card__media-wrapper img {

        aspect-ratio: 1;
        
    }

    .card-grid .narrow-paragraph p {

        margin-inline: auto;
        
    }

}

@media (min-width: 782px) {

    /* GENERELLA GREJER */

    .centered-782 {
        text-align: center;
    }
    
    .centered-782 header {
        text-align: center;
    }

    .show-on-mobile {
        display: none !important;
    }

    /* SIDHUVUDET */

    /* .site-header__wrapper {

        align-items: center;

    }

    .site-header__navigation ul {

        justify-content: center;

    } */


    /* PAGE HERO */

    .page-hero__content {

        width: 100%;
        max-width: var(--site-width);
        margin-inline: auto;

        grid-template-columns: 1fr 2fr;
    
    }

    /* ÖPPETTIDER */

    /* BÄDDSOFFOR */

    .product-listing__hero {

        text-align: center;
    
    }

    .product-listing__hero h2,
    .product-listing__hero h3 {

        width: 100%;
        max-width: var(--breakout-width);

    }

    .product-listing__hero nav {

        width: 100%;
        max-width: var(--site-width);
    
    }    

    .product-listing__navigation ul {

        justify-content: center;
    }

    .product-listing__hero h2,
    .product-listing__hero h3,
    .product-listing__hero p,
    .product-listing__hero nav {

        margin-inline: auto;

    }

    /* BILDGALLERIER */

    .product__gallery {

        grid-template-columns: repeat(2, 1fr);
    
    }

    .product__gallery li.span-2 {

        grid-column: span 2;
    }

    .product__gallery li.center figure {
        text-align: center;
    }

    .product__gallery li.center img {
        max-width: 50%;
    }

    /* MADRASSER */

    .mattress-hero {

        max-width: var(--content-width);
        margin-inline: auto;
    
        grid-template-columns: 3fr 2fr;
        
    }

    .mattress-hero__image img {

        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 50%;
        
    }

    /* SOFFKUDDAR OCH ANDRA KORT */

    .cushion-grid {

        padding-inline: var(--gutter);
        gap: var(--gallery-gap);
    }

    .cushion-grid .card {

        width: 100%;
        max-width: var(--__card-grid-width, 100%);
        margin-inline: auto;

        padding-inline: 0;
    
        border: 1px solid var(--border-medium-dark);
        box-shadow: var(--shadow-card-1);
    }

    .cushion-grid.wide-grid {

        --__card-grid-width: var(--wide-card-width);

    }

    .cushion-grid.site-grid {

        --__card-grid-width: var(--site-width);

    }

    .cushion-grid .card__content-wrapper {

        padding-inline-end: var(--fluid-20-30);
        
    }

    .site-footer__grid-wrapper {

        grid-template-columns: 4fr 3fr;
    
    }

    .site-footer__customer-service {

        padding-block: var(--fluid-30-40);
    
    }

    .site-footer__aside {

        max-width: var(--footer-aside-width);
        justify-self: end;
    
        text-align: left;

        padding-block: var(--fluid-30-40);
        padding-inline: var(--fluid-30-40);
    
    }

}

@media (min-width: 1000px) {

   
    /* Sektionen "Aktuella erbjudanden" */

    .current-offer {

        /* padding-block-start: var(--fluid-20-40); */
        padding-block-end: var(--section-block-padding);
    
    }

    /* KORT */

    .card-grid {

        padding-inline: var(--gutter);
        gap: var(--gallery-gap);
    }

    .card-grid .card {

        width: 100%;
        max-width: var(--__card-grid-width, 100%);
        margin-inline: auto;

        grid-template-columns: 1fr 1fr;
        align-items: center;

        padding-inline: 0;
    
        border: 1px solid var(--border-medium-dark);
        box-shadow: var(--shadow-card-1);
    }

    .card-grid.wide-grid {

        --__card-grid-width: var(--wide-card-width);

    }

    .card-grid.site-grid {

        --__card-grid-width: var(--site-width);

    }

    .card-grid .card__content-wrapper {

        padding-block: var(--fluid-20-30);
        padding-inline-start: 0;
        padding-inline-end: var(--fluid-20-50);
        
    }

    .card-grid .card__content-wrapper p {

        font-size: var(--fluid-14-16);
        
    }

    .card-grid .card__media-wrapper.image-padding {

        padding: var(--fluid-20-30);

    }
    
    /* MADRASSER */

    .mattress-listing {

        padding-inline: var(--gutter);

    }

    .mattress {

        width: 100%;
        max-width: var(--wide-card-width);
        margin-inline: auto;
    
        padding-inline: 0;

        border: 1px solid var(--border-medium-dark);
        box-shadow: var(--shadow-card-1);

    }

}

@media (min-width: 1440px) {

    /* .wrapper-page {

        max-width: var(--page-width);
        border-inline: 1px solid var(--border-light);
        box-shadow: var(--shadow-subtle-1);

    } */

    .site-header__wrapper {

        /* Loggan och huvudmenyn är centrerade till dess allt ryms på en och samma rad. */

        flex-direction: row;
        column-gap: 2em;
        justify-content: space-between;
    
    }

}


/* Gå igenom resten vid tillfälle */

.hidden,
[hidden] {
  display: none !important;
}


.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}