/* =========================================================================
   VARM — 2026-10-08. Kvällsljus i krom, aldrig i bilderna.
   Laddas sist (inc/varm.php). Av: option viraine_varm = '0', eller ta bort
   'varm' ur modullistan i functions.php.

   HÅRD REGEL: inget i den här filen lägger filter, tonade lager eller
   blandlägen på foton. Gradienter och korn ligger bara på ytor utan bild.
   ========================================================================= */

:root{
	/* ---------- palett: grädde, champagne, espresso ---------- */
	--bg:#F5ECE1;                       /* varm grädde (var #F7F3ED)            */
	--surface:#FAF4EC;
	--white:#FFFAF3;
	--ink:#241713;                      /* varm nästan-svart (var #171313) 14,9:1 */
	--muted:#6A5248;                    /* varm sekundärtext 6,2:1 mot --bg      */
	--cherry:#5C4033;                   /* mocka (var vin #8A1C33), 8,9:1 – ägaren: inget rött */
	--cherry-deep:#3E2B21;
	--blush:#E6D6C4;
	--stone:#ECDDCB;                    /* champagnesten bakom bilder/paneler    */
	--line:rgba(60,36,26,.15);
	--line-soft:rgba(60,36,26,.08);
	--line-strong:rgba(60,36,26,.56);   /* kontrollgränser 3,3:1                 */

	/* ---------- nya: kvällstonerna ---------- */
	--espresso:#1F1411;
	--wine:#3A2A21;                     /* djup brun (var vin #3B1219) */
	--gilt:#7A5A3E;                     /* champagne som text på ljust, 5,3:1    */
	--gilt-light:#C9A57A;               /* champagne som text på mörkt, 7,8:1    */
	--hair:rgba(168,128,84,.34);        /* champagne hårlinje, dekor             */
	--glow:rgba(226,160,98,.20);        /* ljuslåga                              */
	--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	--ease-slow:cubic-bezier(.25,.46,.25,1);
	--dur-slow:.9s;
}

/* ---------- grund: grädde med fint korn (bara bakgrund, aldrig över bild) ---------- */
body{background-color:var(--bg);background-image:var(--grain)}
::selection{background:#E4D2BC;color:var(--ink)}

/* ---------- typografi: serif med kursiva accenter ---------- */
.v-eyebrow{
	font-family:var(--serif);font-style:italic;font-weight:400;
	font-size:1.1875rem;letter-spacing:.005em;text-transform:none;color:var(--gilt);line-height:1.2;
}
.v-shead .v-eyebrow{margin-bottom:.15rem}
.v-h2{letter-spacing:-.012em}
.v-display,.v-hero h1{font-style:italic;letter-spacing:-.025em}
.v-lede{color:var(--muted)}
.v-link::after{background:currentColor;opacity:.55}

/* ---------- annonsrad: espresso mot vin ---------- */
.v-announce{
	background:linear-gradient(90deg,var(--espresso) 0%,var(--wine) 50%,var(--espresso) 100%);
	color:#EBDCC8;letter-spacing:.2em;
}

/* ---------- header ---------- */
.v-header{border-bottom:1px solid var(--hair)}
html.js .v-header--over.is-solid{border-bottom-color:var(--hair)}
.v-nav__link::after{background:var(--gilt)}
.v-mega{background:var(--surface);border-bottom:1px solid var(--hair)}
.v-mega__col h3,.v-mega__rub{color:var(--gilt)}
.v-mega__col a:hover{color:var(--cherry)}

/* ---------- knappar: espresso, vin vid hover, mjukare tempo ---------- */
.v-btn{transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.v-btn:hover{background:var(--cherry);border-color:var(--cherry);color:#FFF7EE}
.v-btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.v-btn--light:hover{background:#FFF7EE;border-color:#FFF7EE;color:var(--ink)}

/* ---------- kort: långsam, mjuk avtäckning av hoverbilden ---------- */
.v-card__media,.v-piece__media,.v-entry__media,.v-mood__tile{background:var(--stone)}
.v-card__media img{transition:opacity var(--dur-slow) var(--ease-slow),transform 1.8s var(--ease-slow)}
@media(hover:hover){
	.v-card:hover .v-card__media img{transform:scale(1.022)}
	.v-piece:hover .v-piece__media img{transform:scale(1.025)}
}
.v-piece__media img,.v-mood__tile img,.v-entry__media img{transition:transform 1.8s var(--ease-slow)}
.v-card__name,.v-piece__name{letter-spacing:.015em}
.v-card__tag{background:var(--surface);color:var(--ink)}

/* ---------- formulär och val ---------- */
.v-input{background:var(--white);border-color:var(--line-strong)}
.v-chip{background:rgba(255,250,243,.55)}
.v-chip:hover{border-color:var(--gilt)}
body .v-pdp__form button.button.single_add_to_cart_button.disabled,
body .v-pdp__form button.button.single_add_to_cart_button:disabled{
	background:#E4D3C1;border-color:#E4D3C1;color:#3E2C24;   /* 8,7:1 */
}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{
	background:var(--surface);border-top-color:var(--gilt);
}
.woocommerce-error{border-top-color:var(--cherry)}

/* ---------- servicerad: champagnehårlinjer ---------- */
.v-service ul{border-color:var(--hair)!important}

/* ---------- kategorihjälten: panelen får kvällsljus ---------- */
.v-shero{background:transparent}
.v-shero__copy{
	background:
		radial-gradient(120% 90% at 85% 100%,rgba(226,160,98,.16),transparent 60%),
		radial-gradient(90% 70% at 0% 0%,rgba(255,250,243,.7),transparent 70%),
		var(--stone);
}
.v-shero__eyebrow{color:var(--gilt)}
.v-shero__title{font-style:italic;letter-spacing:-.02em}

/* =========================================================================
   MOKA-BANDET — mörkt, varmt rum med ljuslåga.
   Rättar samtidigt en krock: PLP:ns .v-look-ruta (absolut bild över hela
   rutan) gjorde att startsidans Moka-sektion visade bara bilden, med
   texten under den. Här får sektionen tillbaka sitt tvåspaltsgrid.
   ========================================================================= */
.v-section:has(> .v-look--moka){
	position:relative;isolation:isolate;color:#F2E6D8;
	background:
		radial-gradient(48% 60% at 92% 18%,rgba(226,160,98,.20),transparent 70%),
		radial-gradient(55% 70% at 6% 96%,rgba(120,84,54,.30),transparent 72%),
		var(--espresso);
	box-shadow:0 0 0 100vmax var(--espresso);clip-path:inset(0 -100vmax);
	margin-block:clamp(2rem,4vw,4rem);
}
.v-look.v-look--moka{
	position:static;display:grid;grid-template-columns:1.1fr .9fr;grid-column:auto;grid-row:auto;
	gap:clamp(1.5rem,5vw,6rem);align-items:center;overflow:visible;background:none;color:inherit;
}
.v-look--moka::after{display:none}
.v-look--moka .v-look__media{position:relative;inset:auto;display:block;overflow:hidden;background:#2B1C17}
.v-look--moka .v-look__media img{position:static;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;
	transition:transform 2s var(--ease-slow)}
.v-look--moka .v-eyebrow{color:var(--gilt-light)}
.v-look--moka .v-look__name{font-family:var(--serif);font-style:italic;font-size:clamp(3.5rem,2rem + 4.5vw,7rem);
	line-height:.9;letter-spacing:-.02em;margin:.4rem 0 0;color:#F7EBDD}
.v-look--moka .v-look__price{color:#EBDCC8}
.v-look--moka .v-look__hook,.v-look--moka .v-look__farger{color:rgba(242,230,216,.74)}
.v-look--moka .v-look__farg .v-sw{box-shadow:inset 0 0 0 1px rgba(242,230,216,.35)}
.v-look--moka .v-look__with{color:var(--gilt-light)}
.v-look--moka .v-look__item{border-top-color:rgba(201,165,122,.22)}
.v-look--moka .v-look__item:last-child{border-bottom-color:rgba(201,165,122,.22)}
.v-look--moka .v-card__name{color:#F7EBDD}
.v-look--moka .v-card__price{color:rgba(242,230,216,.72)}
.v-look--moka .v-btn{background:#F2E6D8;border-color:#F2E6D8;color:var(--espresso)}
.v-look--moka .v-btn:hover{background:var(--gilt-light);border-color:var(--gilt-light);color:var(--espresso)}
.v-look--moka :focus-visible{outline-color:#FFF7EE;box-shadow:0 0 0 5px rgba(31,20,17,.9)}
@media(max-width:900px){
	.v-look.v-look--moka{grid-template-columns:1fr}
	.v-look--moka .v-look__name{font-size:clamp(3rem,13vw,4.25rem)}
}

/* =========================================================================
   LISTAN — salongsbilden bredvid inbjudan (inc/varm.php lägger in bilden).
   ========================================================================= */
.v-join--bild{
	display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,5vw,6rem);align-items:center;
	position:relative;isolation:isolate;
	background:
		radial-gradient(60% 80% at 100% 0%,rgba(226,160,98,.18),transparent 70%),
		radial-gradient(70% 90% at 0% 100%,rgba(235,210,200,.55),transparent 70%),
		#F0E2D4;
	box-shadow:0 0 0 100vmax #F0E2D4;clip-path:inset(0 -100vmax);
}
.v-join__media{margin:0;display:block;overflow:hidden;background:var(--stone);position:relative}
.v-join__media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 35%;display:block;
	transition:transform 2s var(--ease-slow)}
@media(hover:hover){.v-join__media:hover img{transform:scale(1.02)}}
.v-join--bild > div{max-width:560px!important}
.v-join--bild .v-h2{font-style:italic;font-size:clamp(2.25rem,1.5rem + 2.4vw,3.75rem);line-height:.98}
@media(max-width:760px){
	.v-join--bild{grid-template-columns:1fr}
	.v-join__media img{aspect-ratio:4/5}
}

/* ---------- startsidans flöde: lite mer luft mellan rummen ---------- */
.v-mood__label h3{font-style:italic}
.v-entry__name{font-family:var(--serif);font-size:1.5rem;line-height:1.1;letter-spacing:-.005em}

/* ---------- välkommen tillbaka (Mitt konto) ---------- */
.v-valkommen{font-family:var(--serif);font-size:clamp(2rem,1.4rem + 1.8vw,3rem);line-height:1;margin:0 0 1rem;color:var(--ink)}
.v-valkommen em{font-style:italic;color:var(--cherry)}

/* =========================================================================
   SIDFOT — espresso med en låga i hörnet
   ========================================================================= */
.v-footer{
	background:
		radial-gradient(40% 55% at 100% 0%,rgba(226,160,98,.12),transparent 70%),
		radial-gradient(50% 70% at 0% 100%,rgba(120,84,54,.28),transparent 72%),
		var(--espresso);
	color:#F2E6D8;border-top:1px solid rgba(201,165,122,.25);
}
.v-footer a{color:rgba(242,230,216,.74)}
.v-footer a:hover{color:#FFF7EE}
.v-footer h4,.v-footer__rub{color:var(--gilt-light)}
.v-footer__bottom{border-top-color:rgba(201,165,122,.2);color:rgba(242,230,216,.6)}
.v-footer .v-btn{background:#F2E6D8;border-color:#F2E6D8;color:var(--espresso)}
.v-footer .v-btn:hover{background:var(--gilt-light);border-color:var(--gilt-light)}

/* Ljusa luckor bakom bilder (stamtrio/hjälte) i varm espresso i stället för svartbrunt. */
.v-hero--stamning,.v-hero__trio,.v-stamtrio{background:var(--espresso)}
.v-stamtrio{border-top-color:var(--espresso)}

/* Sektionerna glider in i lugnare takt. */
html.js .v-reveal.is-in{transition:opacity 1.1s var(--ease-slow),transform 1.1s var(--ease-slow)}

@media(prefers-reduced-motion:reduce){
	.v-card__media img,.v-piece__media img,.v-look--moka .v-look__media img,.v-join__media img{transition:none}
}

/* Kopfix 2026-10-08: Moka Signature Set i look-ytan (inc/home.php vesper_sc_look_signatur). */
.v-look--signatur .v-look__name{font-size:clamp(2.75rem,1.5rem + 3.4vw,5.25rem);line-height:.95}
.v-look--signatur .v-look__spar{margin:.35rem 0 0;font-size:var(--t-sm);color:rgba(242,230,216,.74)}
.v-look--signatur .v-look__spar del{color:inherit;opacity:.85}
@media(max-width:900px){.v-look--signatur .v-look__name{font-size:clamp(2.5rem,11vw,3.5rem)}}

/* 2026-10-09: pris i "Shop the look"-rutan */
.v-look__price{display:block;margin-top:.5rem;font-size:var(--t-sm,.95rem);letter-spacing:.04em}
.v-look__price .woocommerce-Price-amount{color:inherit}
/* 2026-10-09: mobilens stora områdesruta var 4:3 – porträttfotot kapades vid hjässan och mitt på låren.
   Nu 4:5 (fotots egen form) så hela figuren med luft ovanför huvudet syns. */
@media(max-width:860px){
	.v-mood__tile:first-child img{aspect-ratio:4/5;object-position:50% 35%}
}