/** Shopify CDN: Minification failed

Line 36:0 Unexpected "$"
Line 268:0 Unexpected "$"

**/
/* HoC footer - yksi täyslevyinen viiva ja maski vanhan viivan päälle */

.hoc-footer {

 position: relative;
 z-index: 1;
}

/* Peittää teeman mahdollisen borderin ja piirtää tilalle yhden viivan */

.hoc-footer::before {

 content: "";
 position: absolute;
 top: -2px;
 left: 50%;
 transform: translateX(-50%);
 width: 100vw;
 height: 4px; /* valkoinen "nauha", joka peittää vanhan viivan */
 background-color: var(--color-background); /* footerin taustaväri */
 /* uusi varsinainen viiva tämän nauhan alareunaan */
 border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.16);
 pointer-events: none;
}

/* =============================
 ACCESSIBILITY HELPER
 ============================= */

$1-1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

/* Estä taustan scroll, kun menu on auki (kaikki näkymät) */

html.hoc-menu-open {

 overflow: hidden;
}

html.hoc-menu-open body {

 overflow: hidden;
}

/* =============================
 HOC HEADER
 ============================= */

html {

 --hoc-header-height: 5.5rem; /* oletus: desktop-header */
}

.hoc-header {

 /* pinned header */
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 50;

 padding-inline: clamp(24px, 6vw, 72px);
 height: var(--hoc-header-height);
 display: flex;
 align-items: center;
 background-color: transparent;

 /* peruspositio – näkyvissä */
 transform: translateY(0);

 /* pehmeä liike + nykyiset taustatransitionit */
 transition:
 transform 220ms ease-out,
 background-color 260ms ease,
 box-shadow 260ms ease;
}

.hoc-header__inner {

 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center; /* logo keskelle */
 position: relative;
}

/* Hover + “solid” + menu-tila: vain tausta ja varjo */

.hoc-header:hover,
.hoc-header--solid,
.hoc-header--menu-open {

 /* Sama täysi valkoinen kuin menupaneelissa */
 background-color: #ffffff;
 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* Piilotettu tila: liu'uta header ylös pois näkyvistä */

.hoc-header--hidden {

 transform: translateY(-100%);
}

.hoc-header__menu-toggle {

 border: none;
 background: none;
 display: inline-flex;
 align-items: center;
 gap: 1rem;
 cursor: pointer;

 font-size: .875rem;
 font-weight: 400;
 letter-spacing: .025rem;
 line-height: 1rem;

 text-transform: none;
 padding: 4px 0;
 position: absolute;
 left: 0; /* kiinni vasempaan reunaan headerin sisällä */
 flex-direction: row-reverse; /* ikoni vasemmalle, teksti oikealle */
 transition: opacity 180ms ease;
}

.hoc-header__menu-toggle:hover {

 opacity: 0.7; /* Menu-teksti + ikoni hieman vaaleammaksi */
}

.hoc-header__menu-label {

 position: relative;
 transition: opacity 180ms ease;
}

/* Menu ↔ Close -tekstin vaihtoon käytettävä fade-luokka */

.hoc-header__menu-label--switching {

 opacity: 0;
}

.hoc-header__menu-label::after {

 content: "";
 position: absolute;
 left: 0;
 bottom: -3px;
 height: 1px;
 width: 100%;
 background-color: currentColor;
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform 200ms ease;
}

.hoc-header__menu-toggle:hover .hoc-header__menu-label::after {

 transform: scaleX(0);
}

/* Menu / Close -tekstin vaihto header-napissa */

.hoc-header__menu-text {

 display: inline-block;
 transition: opacity 200ms ease;
}

.hoc-header__menu-text--close {

 position: absolute;
 left: 0;
 top: 0;
 opacity: 0;
}

/* Kun menu on auki (aria-expanded="true"), näytetään "Close" "Menu":n sijaan */

.hoc-header__menu-toggle[aria-expanded="true"] .hoc-header__menu-text--menu {

 opacity: 0;
}

.hoc-header__menu-toggle[aria-expanded="true"] .hoc-header__menu-text--close {

 opacity: 1;
}

.hoc-header__menu-icon {

 display: inline-flex;
 flex-direction: column;
 gap: 4px;
}

.hoc-header__menu-icon-line {

 width: 1rem;
 height: 1.1px;
 background-color: currentColor;
 transition: transform 180ms ease, opacity 180ms ease;
}

.hoc-header__menu-toggle[aria-expanded="true"] .hoc-header__menu-icon-line:nth-child(1) {

 transform: translateY(5px) rotate(45deg);
}

.hoc-header__menu-toggle[aria-expanded="true"] .hoc-header__menu-icon-line:nth-child(2) {

 opacity: 0;
}

.hoc-header__menu-toggle[aria-expanded="true"] .hoc-header__menu-icon-line:nth-child(3) {

 transform: translateY(-5px) rotate(-45deg);
}

.hoc-header__logo {

 text-align: center;
 text-decoration: none;
 color: inherit;
}

.hoc-header__logo-img {

 height: 2.5rem;
 max-height: 100%;
}

.hoc-header__actions {

 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 position: absolute;
 right: 0; /* aivan oikeaan laitaan headerin sisällä */
}

.hoc-header__icon-link {

 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 32px;
 height: 32px;
 border-radius: 999px;
 right: 0;
 text-decoration: none;
 color: inherit;
}

$1/* =============================
 HEADER – MOBILE & TABLET
 ============================= */

@media (max-width: 990px) {

 .hoc-header__menu-label {
 display: none;
 }

 /* Kaikissa leveysluokissa header käyttää samaa muuttujaa */
 html {
 --hoc-header-height: 3.5rem;
 }

 .hoc-header {
 display: flex;
 height: var(--hoc-header-height);
 }

 .hoc-header__logo-img {
 height: 1.5rem;
 }
}

/* HEADER – PHONE COLOR LOGIC */

@media (max-width: 749px) {

 /* transparent-tilassa (ylhäällä, header läpinäkyvä) → valkoinen sisältö */
 .hoc-header__logo-img {
 filter: invert(1) brightness(200%);
 transition: filter 200ms ease;
 }

 .hoc-header__menu-icon-line,
 .hoc-header__icon,
 .hoc-header__icon::before,
 .hoc-header__icon::after,
 .hoc-header__icon svg {
 color: #fff;
 fill: #fff;
 border-color: #fff;
 transition:
 color 200ms ease,
 fill 200ms ease,
 border-color 200ms ease;
 }

 /* kun header on solid (scroll down) tai menu auki → mustat elementit */
 .hoc-header--solid .hoc-header__logo-img,
 .hoc-header--menu-open .hoc-header__logo-img {
 filter: none;
 }

 .hoc-header--solid .hoc-header__menu-icon-line,
 .hoc-header--menu-open .hoc-header__menu-icon-line,
 .hoc-header--solid .hoc-header__icon,
 .hoc-header--menu-open .hoc-header__icon,
 .hoc-header--solid .hoc-header__icon::before,
 .hoc-header--menu-open .hoc-header__icon::before,
 .hoc-header--solid .hoc-header__icon::after,
 .hoc-header--menu-open .hoc-header__icon::after,
 .hoc-header--solid .hoc-header__icon svg,
 .hoc-header--menu-open .hoc-header__icon svg {
 color: #000;
 fill: #000;
 border-color: #000;
 }
}

/* =============================
 HEADER MENU PANEL
 ============================= */

.hoc-header-menu {

 position: fixed;
 inset: 0;
 display: flex;
 align-items: stretch;
 justify-content: flex-start;
 pointer-events: none;
 opacity: 0;
 transition: opacity 260ms ease;
 z-index: 45;

 /* Perusväli S ja 1/3 S menun sisäisiin väleihin */
 --hoc-menu-space-lg: 2rem;
 --hoc-menu-space-md: calc(var(--hoc-menu-space-lg) * 1 / 3);
}

.hoc-header-menu.is-open {

 pointer-events: auto;
 opacity: 1;
}

/* Paneli vasemmalle, backdrop oikealle */

.hoc-header-menu__backdrop {

 flex: 1 1 auto;
 order: 2; /* oikea puoli */
 background: rgba(0, 0, 0, 0);
 transition: background 260ms ease;
}

.hoc-header-menu.is-open .hoc-header-menu__backdrop {

 background: rgba(0, 0, 0, 0.35);
}

.hoc-header-menu__panel {

 flex: 0 0 33%; /* ~1/3 sivusta desktopissa */
 max-width: 560px;
 background: #ffffff;
 display: flex;
 flex-direction: column;

 /* yläpadding = 32px + headerin korkeus, ala = 32px */
 padding-top: calc(32px + var(--hoc-header-height));
 padding-bottom: 32px;

 /* tallenna sivupadding muuttujaan ja käytä sitä myös dividerissä */
 --hoc-panel-padding-inline: clamp(24px, 6vw, 72px);
 padding-inline: var(--hoc-panel-padding-inline);

 box-shadow: 10px 0 40px rgba(0, 0, 0, 0.12);
 transform: translateX(-12px);
 transition: transform 260ms ease;
 max-width: 480px;
 flex: 0 0 auto;
}

.hoc-header-menu.is-open .hoc-header-menu__panel {

 transform: translateX(0);
}

/* House Letter -paneeli oikealle puolelle */

.hoc-header-menu__houseletter-panel {

 order: 1;
 flex: 0 0 0;
 max-width: 0;
 background: #ffffff;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 opacity: 0;
 pointer-events: none;
 transform: translateX(12px);
 transition:
 flex-basis 260ms ease,
 max-width 260ms ease,
 opacity 260ms ease,
 transform 260ms ease,
 padding 260ms ease;
}

/* Kun House Letter -paneeli on auki */

.hoc-header-menu--houseletter-open .hoc-header-menu__houseletter-panel {

 flex: 0 0 33%;
 max-width: 480px;
 opacity: 1;
 pointer-events: auto;
 transform: translateX(0);

 padding-top: calc(32px + var(--hoc-header-height));
 padding-bottom: 32px;
 padding-inline: var(--hoc-panel-padding-inline);
}

/* Tablet: 50 % + 50 %, ei ylimääräistä harmaata oikealla */

@media screen and (min-width: 750px) and (max-width: 989px) {

 .hoc-header-menu--houseletter-open .hoc-header-menu__panel {
 flex: 0 0 50%;
 max-width: none;
 }

 .hoc-header-menu--houseletter-open .hoc-header-menu__houseletter-panel {
 flex: 0 0 50%;
 max-width: none;
 }

 .hoc-header-menu--houseletter-open .hoc-header-menu__backdrop {
 display: none;
 }
}

/* Mobiili: House Letter täyttää koko leveyden, nav-paneeli piiloon */

@media (max-width: 749px) {

 .hoc-header-menu__houseletter-panel {
 order: 0;
 }

 .hoc-header-menu--houseletter-open .hoc-header-menu__panel {
 display: none;
 }

 .hoc-header-menu--houseletter-open .hoc-header-menu__houseletter-panel {
 flex: 1 1 auto;
 max-width: 100%;
 width: 100%;
 opacity: 1;
 pointer-events: auto;
 transform: translateX(0);
 padding-top: calc(32px + 3.5rem);
 padding-bottom: 32px;
 padding-inline: var(--hoc-panel-padding-inline);
 }
}

@media (max-width: 768px) {

 .hoc-header-menu__panel {
 flex-basis: 80%;
 }
}

/* Tablet: paneeli 50 % leveä ja sisältö alkaa 3.5rem headerin alta */

@media screen and (min-width: 750px) and (max-width: 989px) {

 .hoc-header-menu__panel {
 flex: 0 0 50%;
 max-width: none;
 }
}

/* Mobiili: paneeli täyttää koko leveyden, ei harmaata oikeaa reunaa */

@media (max-width: 749px) {

 .hoc-header-menu__panel {
 flex: 1 1 auto;
 width: 100%;
 max-width: 100%;
 }

 .hoc-header-menu__backdrop {
 display: none;
 }
}

/* Sulku tapahtuu headerin napista */

.hoc-header-menu__close-row {

 display: none;
}

.hoc-header-menu__nav {

 display: flex;
 flex-direction: column;
 gap: 0;
 /* "Pala taivasta" ↔ seuraava divider = S */
 margin-bottom: var(--hoc-menu-space-lg);
}

.hoc-header-menu__link {

 text-decoration: none;
 color: inherit;
 font-size: 1rem;
 letter-spacing: .025rem;
 line-height: 1.25rem;
 text-transform: none;
 font-weight: 400;
 transition: opacity 200ms ease;
}

.hoc-header-menu__link:hover {

 opacity: 0.6;
}

.hoc-header-menu__divider {

 border: 0;
 border-top: 1px solid #f1f1f1;
 margin: 0;
 /* ota paneelin sivupadding “takaisin” → viiva reunasta reunaan */
 margin-left: calc(-1 * var(--hoc-panel-padding-inline));
 margin-right: calc(-1 * var(--hoc-panel-padding-inline));
}

.hoc-header-menu__meta {

 font-size: 1rem;
 font-weight: 400;
 letter-spacing: .025rem;
 line-height: 1.25rem;
 padding-bottom: .5rem;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: .5rem;
 /* Divider ↔ meta-osion ensimmäinen teksti = S
 Meta-osion viimeinen teksti ↔ seuraava divider = S */
 margin: var(--hoc-menu-space-lg) 0;
}

/* Viimeinen meta-osio (legal) ei tarvitse ylimääräistä väliä alas */

.hoc-header-menu__meta:last-of-type {

 margin-bottom: 0;
}

/* Poista oletusmarginit kappaleilta */

.hoc-header-menu__meta p {

 margin: 0;
}

/* Meta-osion sisäiset kappaleet:
 esim. "Liity House Letter -listalle" ↔ "Instagram / Facebook" = 1/3 S */

.hoc-header-menu__meta p + p {

 margin-top: var(--hoc-menu-space-md);
}

/* Väli otsikon ("Voimmeko auttaa? Ota yhteyttä.") ja seuraavan tekstirivin väliin */

.hoc-header-menu__section-title {

 margin: 0;
}

.hoc-header-menu__section-title + * {

 margin-top: var(--hoc-menu-space-md);
}

.hoc-header-menu__section-title {

 font-family: var(--font-heading-family, inherit);
 font-size: .625rem;
 font-weight: 400;
 letter-spacing: .0625rem;
 line-height: 1rem;
 text-transform: uppercase;
 margin-bottom: 16px;
 font-weight: 400;
}

.hoc-header-menu__meta-link {

 color: inherit;
 text-decoration: none;
 display: inline-block;

 /* jotta toimii sekä <a> että <button> -elementeillä samannäköisenä linkkinä */
 border: none;
 background: none;
 padding: 0;
 font: inherit;
 cursor: pointer;
}

/* Sama väli (1/3 S) kaikille "toisille" linkeille:
 - Instagram → Facebook
 - Tietosuoja & ehdot → Evästeet */

.hoc-header-menu__meta-link + .hoc-header-menu__meta-link,
.hoc-header-menu__meta-link + br + .hoc-header-menu__meta-link {

 margin-top: var(--hoc-menu-space-md);
}

.hoc-header-menu__meta p .hoc-header-menu__meta-link:first-child {

 margin-top: 0;
}

@media screen and (max-width: 749px) {

 .hoc-header-menu__nav,
 .hoc-header-menu__meta {
 text-align: center;
 }
}

/* Menu-otsikoiden väli seuraavaan riviin (THE HOUSE, CONTACT US, CONNECT) */

.hoc-header-menu__section-title {

 margin: 0 0 var(--hoc-menu-space-md);
}

.hoc-header-menu__section-title + * {

 margin-top: 0;
}

/* Ikonit */

/* Nollaa vanhat ::before/::after -piirrot */

.hoc-header__icon--account::before,
.hoc-header__icon--account::after,
.hoc-header__icon--cart::before,
.hoc-header__icon--cart::after {

 content: none !important;
}

/* Ikonien koko: sama symbolikorkeus kuin burger/X */

.hoc-header__icon-link svg {

 width: 18px;
 height: 18px;
 display: block;
}

/* Desktop + tablet: oletuksena mustat ikonit (teeman tyyli) */

.hoc-header__icon-link svg {

 color: #000;
 stroke: currentColor;
 fill: none;
}

@media screen and (max-width: 749px) {

 /* Läpinäkyvä header (ei .hoc-header--solid eikä .hoc-header--menu-open) -> valkoiset ikonit */
 .hoc-header:not(.hoc-header--solid):not(.hoc-header--menu-open) .hoc-header__icon-link svg {
 color: #fff;
 stroke: #fff;
 fill: none;
 }

 /* Kun header on solid valkoinen tai menu auki -> mustat ikonit */
 .hoc-header.hoc-header--solid .hoc-header__icon-link svg,
 .hoc-header.hoc-header--menu-open .hoc-header__icon-link svg {
 color: #000;
 stroke: #000;
 fill: none;
 }
}