/*
 * Aoptik grund – gemensamma mått och block för alla Aoptiks sidor.
 * Laddas på hela sajten av tillägget "Aoptik sidor". Alla tillägg (sidor, erbjudanden, bågvisning, Black Week)
 * och temat använder variablerna och blocken här i stället för egna siffror.
 * Ändra ett mått här så ändras det överallt. Texternas mått är ovillkorliga (!important) så att inget tilläggs
 * eller temats egna nollställningar kan ändra dem.
 *
 * Block:
 *   .aog-wrap                 innehållsbredd + sidmarginal
 *   .aog-topp                 sidtopp med text (.aog-topp--varm = beige, .aog-topp--gra = grå)
 *   .aog-topp.aog-topp--bild  sidtopp med text till vänster och bild till höger
 *   .aog-topp__smula          brödsmulor i toppens övre luft
 *   .aog-over / .aog-h1 / .aog-ingress   texterna i toppen
 *   .aog-knappar / .aog-knapp / .aog-knapp--ljus / .aog-liten   knappar och liten text i toppen
 *   .aog-band                 det röda bandet längst ner (.aog-band__knapp vit knapp, .aog-band__kant vit kantknapp)
 */

:root{
	--aog-rod:#c00d0e;
	--aog-text:#1d1d1d;
	--aog-text-2:#3a3a3a;
	--aog-varm:#f5f1ec;
	--aog-gra:#efefef;

	--aog-bredd:1120px;        /* innehållets bredd */
	--aog-kant:24px;           /* sidmarginal */
	--aog-sektion:72px;        /* avstånd mellan sektioner */
	--aog-topp-luft:56px;      /* luft över och under innehållet i toppen */

	--aog-over-storlek:13px;
	--aog-h1-storlek:48px;
	--aog-ingress-storlek:18px;
	--aog-over-luft:14px;      /* liten rad → rubrik */
	--aog-h1-luft:16px;        /* rubrik → ingress */

	--aog-band-runda:22px;
	--aog-band-luft:40px 44px;
	--aog-band-rubrik:30px;
}
@media (max-width:1023px){
	:root{--aog-h1-storlek:40px}
}
@media (max-width:700px){
	:root{
		--aog-kant:16px;
		--aog-sektion:48px;
		--aog-topp-luft:32px;
		--aog-over-storlek:12px;
		--aog-h1-storlek:30px;
		--aog-ingress-storlek:16px;
		--aog-over-luft:10px;
		--aog-h1-luft:12px;
		--aog-band-luft:28px 22px;
		--aog-band-rubrik:24px;
	}
}

/* Innehållsbredd */
.aog-wrap{box-sizing:border-box;width:100%;max-width:calc(var(--aog-bredd) + 2 * var(--aog-kant));margin-left:auto;margin-right:auto;padding-left:var(--aog-kant);padding-right:var(--aog-kant)}

/* Sidtopp */
.aog-topp{background:var(--aog-varm)}
.aog-topp--gra{background:var(--aog-gra)}
.aog-topp__inne{position:relative;padding-top:var(--aog-topp-luft);padding-bottom:var(--aog-topp-luft)}
/* Brödsmulor ligger i toppens luft ovanför innehållet, så att rubriken börjar på samma höjd som på alla andra sidor */
.aog-topp__smula{position:absolute;top:calc((var(--aog-topp-luft) - 20px) / 2);left:var(--aog-kant);right:var(--aog-kant);font-size:13px;line-height:20px;color:#6b6b6b}
.aog-topp__smula a{color:inherit}
body .aog-over{display:block;font-family:inherit;font-size:var(--aog-over-storlek)!important;font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase;line-height:1.5!important;color:var(--aog-rod)!important;margin:0 0 var(--aog-over-luft)!important;padding:0!important}
body .aog-h1{font-size:var(--aog-h1-storlek)!important;line-height:1.08!important;letter-spacing:-.025em!important;font-weight:700!important;color:var(--aog-text)!important;margin:0 0 var(--aog-h1-luft)!important;padding:0!important;text-wrap:pretty}
body .aog-ingress{font-size:var(--aog-ingress-storlek)!important;font-weight:400!important;line-height:1.5!important;color:var(--aog-text-2)!important;max-width:46ch;margin:0!important;padding:0!important}

/* Ord med bindestreck (t.ex. Ray-Ban) hålls ihop i rubriker */
.aog-hel{white-space:nowrap}

/* Utan bild: rubrik och ingress lika breda som textspalten på sidorna med bild */
.aog-topp:not(.aog-topp--bild) .aog-h1,.aog-topp:not(.aog-topp--bild) .aog-ingress{max-width:calc((var(--aog-bredd) - 56px) / 2)}

/* Sidtopp med bild: text t.v., bild t.h. (samma som startsidan och glassidorna) */
.aog-topp--bild .aog-topp__inne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch}
.aog-topp__text{min-width:0}
.aog-topp__bild{position:relative;min-width:0;min-height:100%}
.aog-topp__bild img{display:block;width:100%;height:100%;min-height:560px;object-fit:cover;border-radius:22px}
@media (max-width:700px){
	.aog-topp--bild .aog-topp__inne{display:flex;flex-direction:column-reverse;gap:0;padding-top:0;padding-bottom:24px}
	.aog-topp--bild .aog-topp__text{padding-top:var(--aog-topp-luft)}
	.aog-topp--bild .aog-topp__smula{position:static;order:9;padding:10px 0}
	.aog-topp--bild .aog-topp__bild{margin:0 calc(-1 * var(--aog-kant));min-height:0}
	.aog-topp__bild img{min-height:0;height:230px;border-radius:0}
}

/* Knappar och liten text i toppen */
.aog-knappar{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 14px!important}
body .aog-knapp{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 20px;border-radius:50px;background:var(--aog-rod);color:#fff;border:0;font-weight:600;font-size:15px;line-height:1;white-space:nowrap;text-decoration:none}
body .aog-knapp:hover{background:#a00b0c;color:#fff}
body .aog-knapp--ljus{background:#fff;color:var(--aog-text);border:1.5px solid #bbb}
body .aog-knapp--ljus:hover{background:#fff;color:var(--aog-text);border-color:var(--aog-text)}
body .aog-liten{font-size:14px!important;color:#6b6b6b!important;margin:0!important}
@media (max-width:700px){
	.aog-knappar{flex-direction:column;margin-top:20px}
	body .aog-knapp{width:100%}
}

/* Rött band */
.aog-band{box-sizing:border-box;margin:var(--aog-sektion) 0;background:var(--aog-rod);color:#fff;border-radius:var(--aog-band-runda);padding:var(--aog-band-luft);display:flex;align-items:center;justify-content:space-between;gap:24px}
body .aog-band h2,body .aog-band .aog-band__rubrik{color:#fff!important;font-size:var(--aog-band-rubrik)!important;font-weight:700!important;line-height:1.2!important;letter-spacing:-.01em!important;margin:0 0 6px!important;padding:0!important}
body .aog-band p,body .aog-band .aog-band__text{color:#fff!important;opacity:.95;font-size:16px!important;line-height:1.5!important;margin:0!important;padding:0!important}
body .aog-band a{color:#fff;font-weight:600}
.aog-band__knappar{display:flex;gap:10px;flex:none}
body .aog-band .aog-band__knapp,body .aog-band .aog-band__kant{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:50px;font-weight:600;font-size:16px;white-space:nowrap;text-decoration:none}
body .aog-band .aog-band__knapp{background:#fff;color:var(--aog-rod);border:0}
body .aog-band .aog-band__kant{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
@media (max-width:700px){
	.aog-band{flex-direction:column;align-items:flex-start}
	.aog-band__knappar{flex-direction:column;width:100%}
	body .aog-band .aog-band__knapp,body .aog-band .aog-band__kant{width:100%}
}