/** Shopify CDN: Minification failed
Line 179:0 Unexpected "<"
Line 187:0 Unexpected "<"
**/
/* =========================================================================
custom.css — brand layer on top of base.css
Values pulled from mshop-core-5_3_7_min.css (Magento).
Load this AFTER base.css in layout/theme.liquid:
{{ 'custom.css' | asset_url | stylesheet_tag }}
========================================================================= */
/* -------------------------------------------------------------------------
1. FONTS
Upload the woff2/woff files to the theme's /assets folder (same folder as
this file, so relative URLs work). Magento serves them from /static/font/.
------------------------------------------------------------------------- */
@font-face {
font-family: 'xmx-text';
src: url('xmx-text-book.min.woff2') format('woff2'),
url('xmx-text-book.min.woff') format('woff');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'xmx-text';
src: url('xmx-text-demi.min.woff2') format('woff2'),
url('xmx-text-demi.min.woff') format('woff');
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'xmx-text';
src: url('xmx-text-bold.min.woff2') format('woff2'),
url('xmx-text-bold.min.woff') format('woff');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'xmx-display';
src: url('xmx-display-bold.min.woff2') format('woff2'),
url('xmx-display-bold.min.woff') format('woff');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'xmx-display';
src: url('xmx-display-titling.min.woff2') format('woff2'),
url('xmx-display-titling.min.woff') format('woff');
font-weight: 900; font-style: normal; font-display: swap;
}
/* -------------------------------------------------------------------------
2. CORE TOKENS
`html:root` beats the `:root` block the theme prints in theme.liquid,
regardless of load order.
NOTE: base.css uses rgb(var(--color-x)), so colour vars are "R,G,B"
triplets, NOT hex.
------------------------------------------------------------------------- */
html:root {
/* Typography */
--font-body-family: 'xmx-text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-heading-family: 'xmx-display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-heading-style: normal;
--font-heading-weight: 900; /* "titling" cut, used for h1/h2 */
--font-heading-case: uppercase;
--font-heading-letter-spacing: 0;
--font-heading-scale: 0.68; /* h1 ≈ 23.5px mobile → ≈ 35px desktop */
/* Buttons */
--font-button-case: uppercase;
--font-button-font-weight: 700;
--font-button-letter-spacing: 0.025em;
--font-button-text-size: 1.176rem; /* 11.76px, Magento default label */
--buttons-radius: 0px;
--buttons-radius-outset: 0px;
/* Inputs */
--inputs-radius: 0px;
/* Extra brand colours (not covered by theme colour schemes) */
--mx-text-medium: 59, 59, 59; /* #3b3b3b descriptions, secondary copy */
--mx-text-low: 118, 118, 118; /* #767676 labels, hints */
--mx-border: 230, 230, 230; /* #e6e6e6 inputs, secondary buttons */
--mx-sale: 219, 43, 28; /* #db2b1c sale price, special badge */
--mx-success: 0, 144, 48; /* #009030 in stock, confirmations */
--mx-info-bg: 213, 235, 247; /* #d5ebf7 message boxes */
--mx-content-link: 52, 102, 247; /* #3466f7 links inside rich text */
--mx-yellow: 250, 217, 84; /* #fad954 campaign accent */
}
/* -------------------------------------------------------------------------
3. OPENTYPE FEATURES (copied from Magento)
------------------------------------------------------------------------- */
body {
font-feature-settings: "kern" 1, "lnum" 1, "ss01" 1, "liga" 0, "clig" 0;
}
/* Big headings: 900 titling cut */
h1, h2, .hxl, .h0, .h1, .h2 {
font-feature-settings: "kern" 1, "lnum" 1, "titl" 1, "ss01" 0, "liga" 0, "clig" 0;
}
/* Smaller headings: 700 bold cut */
h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
font-weight: 700;
font-feature-settings: "kern" 1, "lnum" 1, "ss01" 1, "titl" 1, "liga" 0, "clig" 0;
}
h3 {
font-weight: 600;
font-size: 17.65px;
line-height: 24px;
color: #000;
margin-bottom: 6px;
font-feature-settings: "kern" 1, "lnum" 1, "ss01" 1, "titl" 1, "liga" 0, "clig" 0;
}
/* -------------------------------------------------------------------------
4. BUTTONS
base.css sets `font: inherit` on .button (= body font). Magento buttons
use the display face.
------------------------------------------------------------------------- */
.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
font-family: var(--font-heading-family);
font-feature-settings: "kern" 1, "lnum" 1, "ss01" 1, "titl" 1, "liga" 0, "clig" 0;
}
.button--primary:not([disabled]):hover { background-color: #3e3e3e; }
.button--primary:not([disabled]):active { background-color: #1f1f1f; }
/* -------------------------------------------------------------------------
5. INPUTS — Magento: 1px #e6e6e6 border, 2px black on focus
------------------------------------------------------------------------- */
.field__input:focus,
.select__select:focus {
box-shadow: inset 0 0 0 2px rgb(var(--color-foreground));
}
/* -------------------------------------------------------------------------
6. TEXT HELPERS
------------------------------------------------------------------------- */
.rte a {
color: rgb(var(--mx-content-link));
}
.rte p {
font-size: 17.65px;
line-height: 24px;
color: #3b3b3b;
margin-bottom: 12px;
}
.caption-with-letter-spacing { /* ≈ Magento .xmx-label */
font-family: var(--font-heading-family);
font-weight: 700;
letter-spacing: 0.025em;
color: rgb(var(--mx-text-low));
}
/* Example: point your theme's sale-price class at the brand red.
Check the real class name in your product card snippet first. */
/* .price--on-sale .price-item--sale { color: rgb(var(--mx-sale)); } */
.shopify-payment-button__more-options {
display: none !important;
}
/* ===== Mshop: Ignites "Custom" och "New" badges i samma stil som custom-badges =====
Klistra in i Temainställningar → Anpassad CSS (eller längst ned i assets/base.css). */
/* Formen: rak vänsterkant mot bilden, rundad höger sida */
.badge.badge--custom,
.badge.badge--new {
display: inline-block;
padding: 6px 14px 6px 10px !important;
border: 0 !important;
border-radius: 0 999px 999px 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-transform: none !important;
white-space: nowrap;
}
/* Standardfärger: svart med vit text (metafältets färger på custom-badgen vinner fortfarande) */
.badge.badge--new {
background: #000 !important;
color: #fff !important;
}
.badge.badge--custom:not([style*="background"]) {
background: #000;
color: #fff;
}
/* Produktkort: lägg badgen kant i kant med bildens vänsterkant */
.card__inner > .card__content--badge {
padding-left: 0 !important;
}
.card__inner > .card__content--badge .card__badge {
margin-left: 0 !important;
margin-inline-start: 0 !important;
}
/* ===== Mshop: Kollektionssida – desktoplayout i stil med referensen =====
Klistra in i Temainställningar → Anpassad CSS (eller längst ned i assets/base.css).
Gäller bara desktop (≥ 990px). Mobilens filterlåda påverkas inte. */
@media screen and (min-width: 990px) {
/* ---------- 1. Ljusgrå yta bakom filter + produkter ---------- */
.facets-vertical.page-width {
background: #f5f5f5;
padding: 40px 48px 56px !important;
column-gap: 40px;
}
.facets-vertical .facets-wrapper {
padding-right: 0 !important;
}
/* ---------- 2. Filterkolumnen: ingen panel, ren lista ---------- */
.facets-vertical #FacetFiltersForm,
.facets-vertical .facets__form--panel {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
}
.facets-vertical .facets__form--panel::before,
.facets-vertical .facets__form--panel::after {
display: none !important;
}
.facets-vertical #FacetsWrapperDesktop {
--spacer-color: 0, 0, 0, 0 !important;
}
/* "Filtrera efter" ovanför listan */
.facets-vertical #FacetsWrapperDesktop::before {
content: "Filtrera efter";
display: block;
margin: 0 0 4px;
font-size: 16px;
font-weight: 400;
color: #000;
}
.facets-vertical #FacetsWrapperDesktop .facets__disclosure-vertical {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
}
.facets-vertical #FacetsWrapperDesktop custom-accordion {
border: 0 !important;
margin: 0 !important;
}
/* Filterrubrik: "Varumärke +" */
.facets-vertical #FacetsWrapperDesktop .facets__summary {
padding: 18px 0 !important;
background: transparent !important;
}
.facets-vertical #FacetsWrapperDesktop .facets__summary > div {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.facets-vertical #FacetsWrapperDesktop .facets__summary-label,
.facets-vertical #FacetsWrapperDesktop .facets__summary > div > span,
.facets-vertical #FacetsWrapperDesktop .facets__summary {
font-size: 17px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #000;
}
/* Byt pilen mot + / – */
.facets-vertical #FacetsWrapperDesktop .facets__summary .icon-caret {
display: none !important;
}
.facets-vertical #FacetsWrapperDesktop .facets__summary > div::after {
content: "+";
font-size: 24px;
font-weight: 300;
line-height: 1;
color: #000;
}
.facets-vertical #FacetsWrapperDesktop details[open] > .facets__summary > div::after {
content: "–";
}
/* Filtervalen */
.facets-vertical #FacetsWrapperDesktop .facets__display-vertical,
.facets-vertical #FacetsWrapperDesktop .custom-accordion__panel {
background: transparent !important;
padding-left: 0 !important;
}
.facets-vertical #FacetsWrapperDesktop .facet-checkbox__text-label {
font-size: 15px;
color: #000;
}
.facets-vertical #FacetsWrapperDesktop .facet__results {
color: #000;
opacity: .7;
}
/* ---------- 3. Raden med antal produkter + sortering ---------- */
.facets-vertical .facets-vertical-sort {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 0 16px !important;
}
.facets-vertical .facets-vertical-sort::before,
.facets-vertical .facets-vertical-sort::after {
display: none !important;
}
.facets-vertical .product-count__text {
font-size: 16px !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: #000;
}
/* Sortering: "Sortera:" + rundad ruta */
.facets-vertical .facets-vertical-sort .facet-filters__field {
display: flex !important;
align-items: center;
gap: 12px;
}
/* Ingen ram runt "Sort by" + rutan */
.facets-vertical .facets-vertical-sort .facet-filters__field,
.facets-vertical .facets-vertical-sort .facet-filters__field.field {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
}
.facets-vertical .facets-vertical-sort .facet-filters__field::before,
.facets-vertical .facets-vertical-sort .facet-filters__field::after,
.facets-vertical .facets-vertical-sort .field::before,
.facets-vertical .facets-vertical-sort .field::after {
display: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* "Sort by" i normal vikt */
.facets-vertical .facets-vertical-sort .facet-filters__label,
.facets-vertical .facets-vertical-sort .facet-filters__label label {
font-weight: 400 !important;
}
/* Antalet i fet stil (siffran läggs i av skriptet i collection-filters-first-open) */
.facets-vertical .product-count__text strong {
font-weight: 700 !important;
}
.facets-vertical .facets-vertical-sort .icon-sort {
display: none !important;
}
.facets-vertical .facets-vertical-sort .facet-filters__label.visually-hidden {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
clip: auto !important;
overflow: visible !important;
white-space: nowrap;
font-size: 15px;
color: #000;
}
.facets-vertical .facets-vertical-sort .select {
position: relative;
}
.facets-vertical .facets-vertical-sort .nice-select,
.facets-vertical .facets-vertical-sort select {
min-width: 200px;
height: 46px !important;
padding: 0 44px 0 20px !important;
border: 1px solid #000 !important;
border-radius: 999px !important;
background: #fff !important;
font-size: 15px !important;
text-transform: none !important;
letter-spacing: 0 !important;
display: flex !important;
align-items: center;
box-shadow: none !important;
}
.facets-vertical .facets-vertical-sort .select .icon-caret {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* ---------- 4. Produktkort: vita kort med vit ram runt bilden ---------- */
.facets-vertical #product-grid {
column-gap: 16px !important;
row-gap: 16px !important;
}
.facets-vertical #product-grid .card--card {
--image-padding: 10px;
background: #fff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.facets-vertical #product-grid .card--card::after,
.facets-vertical #product-grid .card--card::before {
box-shadow: none !important;
border-radius: 0 !important;
}
.facets-vertical #product-grid .card__inner,
.facets-vertical #product-grid .card__media {
border-radius: 0 !important;
}
.facets-vertical #product-grid .card__content:not(.card__content--badge) {
padding: 16px 20px 20px !important;
}
.facets-vertical #product-grid .card__heading {
font-weight: 400 !important;
font-size: 15px !important;
line-height: 1.4 !important;
}
.facets-vertical #product-grid .price .price-item {
font-size: 20px !important;
}
.facets-vertical #product-grid .price--on-sale .price-item--regular {
font-size: 15px !important;
}
}