och själva länken "sträcks ut"
över hela kortet med ::after, så hela ytan är klickbar som förut - men
kampanjens telefonlänk (.campaign-tel) ligger ovanpå och går att klicka
separat (länkar får inte nästlas i varandra). */
.offers-banner-stretched { position: relative; }
.offers-banner-link { color: inherit; text-decoration: none; }
.offers-banner-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.offers-banner-stretched .campaign-tel { position: relative; z-index: 1; }
.offers-banner-icon {
width: 88px; height: 88px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
display: flex; align-items: center; justify-content: center;
font-size: 36px;
flex: none;
}
.offers-banner-text {
flex: 1 1 auto;
font-size: 30px;
font-weight: 700;
}
.offers-banner-text span {
display: block;
font-weight: 500;
font-size: 26px;
opacity: .85;
margin-top: 4px;
}
.offers-banner-badge {
margin-top: 12px;
}
/* Flera kampanjer på startsidan: märkena ligger på samma plats (höjd = det högsta) och tonas över (home.php). */
.offers-badge-rotator { display: grid; justify-items: start; }
.offers-badge-rotator > .offers-banner-badge {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transition: opacity .6s ease, visibility 0s linear .6s;
}
.offers-badge-rotator > .offers-banner-badge.is-active {
opacity: 1;
visibility: visible;
transition: opacity .6s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
.offers-badge-rotator > .offers-banner-badge { transition: none; }
}
.offers-banner-arrow { flex: none; font-size: 36px; opacity: .85; }
.promo-banner {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 16px;
padding: 18px 26px;
border-radius: var(--radius-lg);
background: linear-gradient(120deg, var(--color-accent) 0%, #103b11 100%);
color: #fff;
box-shadow: var(--shadow-md);
}
.promo-banner-icon {
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
flex: none;
}
.promo-banner-text {
flex: 1 1 240px;
font-size: 14.5px;
line-height: 1.5;
opacity: .95;
}
.promo-banner-text strong {
display: block;
font-size: 16.5px;
font-weight: 800;
margin-bottom: 3px;
}
/* Telefonknappen är en egen rad-item (mellan text och badge), inte
inklämd bredvid rubriken - annars hamnade den vänsterställd istället
för att stå fritt och centrerat i sitt eget utrymme. */
.promo-banner-phone {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
color: var(--color-accent);
padding: 7px 16px;
border-radius: 999px;
font-weight: 800;
font-size: 13.5px;
white-space: nowrap;
box-shadow: var(--shadow-sm);
transition: transform .15s ease;
flex: none;
}
.promo-banner-phone:hover { transform: scale(1.04); }
.promo-banner-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #dc2626;
border: 1px solid rgba(255,255,255,0.4);
color: #fff;
padding: 9px 16px;
border-radius: 999px;
font-weight: 800;
font-size: 13px;
white-space: nowrap;
animation: promoPulse 1.8s ease-in-out infinite;
}
@keyframes promoPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6), 0 0 10px 2px rgba(220, 38, 38, 0.45);
}
50% {
box-shadow: 0 0 0 9px rgba(220, 38, 38, 0), 0 0 24px 8px rgba(220, 38, 38, 0.7);
}
}
/* ---------- Banner-rad (erbjudanden.php: de två startsidebannerna sida
vid sida ovanför erbjudandelistan, istället för staplade som på
startsidan). Descendant-scopade overrides (.banner-row .offers-banner-
text osv, 2 klasser) för att slå grundreglernas 1-klasspecificitet
oavsett var i filen de råkar stå - normaliserar de annars mycket olika
textstorlekarna mellan de två bannertyperna så de ser enhetliga ut. ---------- */
.banner-row {
display: flex;
flex-direction: column;
gap: 16px;
}
.banner-row .offers-banner,
.banner-row .promo-banner {
margin-top: 20px;
}
@media (min-width: 861px) {
.banner-row {
flex-direction: row;
align-items: stretch;
gap: 20px;
margin: 20px 0px 0px 0px;
}
.banner-row .offers-banner,
.banner-row .promo-banner {
flex: 1 1 0;
padding: 24px 28px;
}
.banner-row .offers-banner-icon,
.banner-row .promo-banner-icon {
width: 56px;
height: 56px;
font-size: 22px;
}
.banner-row .offers-banner-text {
font-size: 19px;
}
.banner-row .offers-banner-text span {
font-size: 14.5px;
}
.banner-row .offers-banner-arrow {
font-size: 26px;
}
.banner-row .promo-banner-text {
font-size: 14.5px;
}
.banner-row .promo-banner-text strong {
font-size: 19px;
}
}
@media (max-width: 860px) {
/* Samma stapla-och-krymp-princip som .promo-banner nedanför - .offers-
banner dubblades i storlek på skrivbordet, så utan detta hade den
blivit orimligt stor och orsakat horisontell scroll på mobil. */
.offers-banner {
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 20px 18px;
}
.offers-banner-icon {
width: 52px;
height: 52px;
font-size: 22px;
}
.offers-banner-text {
font-size: 18px;
}
.offers-banner-text span {
font-size: 14px;
}
.offers-banner-arrow { display: none; }
/* Stapla hellre tidigt och tight än att klämma in allt i en rad som
radbryter mitt i - höjden ska följa innehållet, inte tvärtom.
Allt krymps också (ikon/typsnitt/padding) så den staplade remsan
inte blir onödigt hög. */
.promo-banner {
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
padding: 14px 16px;
}
.promo-banner-icon {
margin: 0 0 2px;
width: 34px;
height: 34px;
font-size: 15px;
}
.promo-banner-text {
/* flex-basis 240px från .promo-banner-text (rad 416) gäller bredd
i radlayout på desktop, men blir HÖJD när .promo-banner byter
till flex-direction:column här - det var det som gjorde fältet
onödigt högt. Nollställ till auto så höjden styrs av innehållet. */
flex: 1 1 auto;
align-self: stretch;
text-align: center;
font-size: 13.5px;
line-height: 1.35;
}
.promo-banner-text strong {
font-size: 15px;
margin-bottom: 1px;
}
.promo-banner-phone {
padding: 6px 14px;
font-size: 12.5px;
justify-content: center;
}
/* Badgetexten är lång ("Just nu: 10 000 kr extra rabatt...") - med
white-space:nowrap tvingade den sidan att bli bredare än skärmen
och orsakade horisontell scroll på mobil. */
.promo-banner-badge {
white-space: normal;
font-size: 11.5px;
padding: 7px 14px;
justify-content: center;
}
}
/* ---------- Section heading ---------- */
.section {
margin: 20px 0;
}
.section-head {
display: flex;
align-items: flex-end;
/* justify-content: space-between; */
gap: 16px;
margin-bottom: 22px;
}
.section-head h1, .section-head h2 {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.01em;
margin: 0;
}
.section-head .muted { color: var(--color-ink-faint); font-size: 14px; }
/* ---------- Category chips / grid ---------- */
.cat-grid {
display: grid;
/* auto-fit (inte auto-fill) kollapsar tomma spår så att korten sträcker
ut sig och fyller hela radens bredd när de är färre än vad som får
plats vid minimibredden - t.ex. exakt 6 kategorier på en rad. */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.cat-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
text-align: center;
font-weight: 700;
font-size: 13.5px;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cat-card .cat-thumb {
aspect-ratio: 1 / 1;
background: var(--color-media-bg);
border-bottom: 1px solid var(--color-border);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.cat-card .cat-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6px;
border-radius: 14px;
/* border: 1px solid var(--color-border); */
transition: transform .3s ease;
}
.cat-card:hover .cat-thumb img { transform: scale(1.015); }
.cat-card .cat-thumb i {
font-size: 26px;
color: var(--color-ink-faint);
}
.cat-card .cat-label {
padding: 12px 10px;
}
/* ---------- Erbjudanden (paket), en rad per erbjudande ---------- */
.offer-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
}
/* Stora skärmar: två erbjudanden bredvid varandra istället för en enda
smal kolumn - bilden krymps samtidigt så innehållet fortfarande får
plats utan att kännas trångt i den smalare halv-bredden. */
@media (min-width: 1100px) {
.offer-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
}
.offer-row {
display: flex;
gap: 24px;
align-items: flex-start;
}
/* .panel + .panel (den generella vertikala panel-stapel-regeln, t.ex.
checkout.php) ger annars varje erbjudande-panel förutom den första en
margin-top på 20px - i .offer-list's flex-kolumn (mobil) dubblerar det
bara redan satt gap, men i grid-tvåkolumnsläget (>=1100px) puttar det
ner HÖGER kolumns paneler under VÄNSTER kolumns top-kant (marginal
kollapsar inte i grid), så de två första rutorna hamnar fel i höjdled.
Extra klass-specificitet (.offer-list .panel.offer-row) för att slå
.panel + .panel oavsett var i filen den regeln råkar stå. */
.offer-list .panel.offer-row {
margin-top: 0;
}
.offer-row-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.offer-row-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.01em;
margin: 0 0 12px;
}
.offer-row-title a { color: var(--color-ink); }
/* Eget, större badge-format bara för "Spara X:-"-märket på erbjudandesidan
(/erbjudanden) - INTE en ändring av den delade .badge-basregeln, som
fortfarande ska vara liten överallt annars (produktkort, startsidan
m.m.). Descendant-scopad (2 klasser) för att slå .badge:s specificitet
oavsett var i filen den råkar stå. */
.offer-row-title .badge {
font-size: 20px;
}
.offer-row-title a:hover { color: var(--color-primary); }
.offer-row-items {
max-width: 480px;
}
/* Kompakt lista utan gråa avdelarlinjer mellan produkterna - bara här
(inte i checkout/produktsidans Paketpriser-sektion, som återanvänder
samma .order-summary-line-klass men vill behålla linjerna). */
.offer-row-items .order-summary-line {
border-bottom: none;
padding: 5px 0;
align-items: center;
}
/* Gör rabattraden tydligare bara här (inte i checkout/produktsidans
Paketpriser-sektion, som återanvänder samma .order-summary-discount-
klass) - lite större text än övriga rader så besparingen sticker ut. */
.offer-row-items .order-summary-discount {
font-size: 16px;
}
/* Den extra "inkl. kampanjpriser"-raden är ett komplement till huvudrabatten
ovanför - mindre/dämpad text så den inte konkurrerar med den. Descendant-
scopad (som regeln ovan) så specificiteten slår den delade
.order-summary-discount-basregeln (color/font-weight) oavsett var i
filen den råkar stå - samma mönster som .offer-row-items
.order-summary-discount redan använder. */
.offer-row-items .order-summary-discount-campaign {
font-size: 13px;
color: var(--color-ink-faint);
font-weight: 400;
padding-top: 0;
}
.offer-item-name {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.offer-item-thumb {
width: 50px;
height: 50px;
border-radius: 6px;
object-fit: contain;
background: #fff;
flex: none;
position: relative;
transition: transform .2s ease;
}
/* Bara riktiga bilder ska förstoras vid hover - inte den tomma vita
platshållar-rutan (.offer-item-thumb-empty), det finns ju inget att
zooma in på där. */
img.offer-item-thumb:hover {
transform: scale(4);
z-index: 3;
}
.offer-item-price {
display: flex;
align-items: baseline;
gap: 8px;
flex: none;
}
.offer-item-price-ord {
font-size: 12px;
color: var(--color-ink-faint);
text-decoration: line-through;
}
.offer-row-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 18px;
}
@media (max-width: 700px) {
.offer-row-items {
max-width: 100%;
}
.offer-row-actions .btn {
flex: 1 1 auto;
text-align: center;
}
}
/* ---------- Product grid & cards ---------- */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
}
.product-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .18s ease, box-shadow .18s ease;
position: relative;
}
.product-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.product-card .thumb {
aspect-ratio: 1 / 1;
background: var(--color-media-bg);
border-bottom: 1px solid var(--color-border);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
position: relative;
}
.product-card .thumb img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 4px;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(18, 24, 31, 0.07);
transition: transform .3s ease;
}
.product-card .thumb i.fa-image {
color: var(--color-ink-faint);
}
.product-card:hover .thumb img { transform: scale(1.015); }
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .01em;
}
.badge-offer { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-euro5 { background: var(--color-success-bg); color: var(--color-success); }
/* Kampanj (system/campaigns.php) - samma röda ton som startsidans kampanjmärke. */
.badge-campaign { background: #dc2626; color: #fff; }
.campaign-banner {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border-radius: var(--radius-md);
background: #dc2626;
color: #fff;
}
.campaign-banner-icon {
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex: none;
}
.campaign-banner-text { font-size: 14px; line-height: 1.45; }
.campaign-banner-text strong { display: block; font-size: 16px; font-weight: 800; }
.campaign-banner-text span { display: block; opacity: .9; margin-top: 2px; }
/* [telefon]-platshållaren i kampanjtexten (system/campaigns.php::campaignTextHtml). */
.campaign-tel {
color: inherit;
text-decoration: none;
white-space: nowrap;
}
.campaign-tel:hover { text-decoration: none; opacity: .85; }
/* Paketrader (produktsidans Paketpriser + /erbjudanden): luft mot rubrik/innehåll. */
.package-details .campaign-banner { margin-top: 10px; }
.offer-row-body .campaign-banner { margin-bottom: 10px; max-width: 480px; }
/* Mindre variant på paketen - en påminnelse, inte lika dominant som på
produktsidans köpruta. */
.package-details .campaign-banner,
.offer-row-body .campaign-banner {
gap: 10px;
padding: 8px 12px;
}
.package-details .campaign-banner-icon,
.offer-row-body .campaign-banner-icon {
width: 26px; height: 26px;
font-size: 12px;
}
.package-details .campaign-banner-text,
.offer-row-body .campaign-banner-text { font-size: 12px; line-height: 1.35; }
.package-details .campaign-banner-text strong,
.offer-row-body .campaign-banner-text strong { font-size: 13px; }
.package-details .campaign-banner-text span,
.offer-row-body .campaign-banner-text span { margin-top: 0; }
.product-card .badges {
position: absolute; top: 10px; left: 10px;
z-index: 2;
display: flex; flex-direction: column; gap: 6px;
}
/* Säljmärke (productSalesBanner()) nere till höger på bilden. */
.product-card .badges.badges-bottom-right {
top: auto; left: auto;
bottom: 10px; right: 10px;
align-items: flex-end;
}
.badge-hot { background: #f97316; color: #fff; padding-left: 4px; gap: 6px; }
/* Vit cirkel bakom flamman så att den syns mot den orange bakgrunden. */
.badge-hot-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
border-radius: 50%;
background: #fff;
flex: none;
}
.badge-hot-icon svg { display: block; }
/* ---------- Admin-badge (artikelnummer, visas när admin håller Ctrl) ---------- */
.admin-artnr-badge {
display: none;
position: absolute;
top: 10px; right: 10px;
z-index: 5;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
border: none;
background: var(--color-primary);
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .01em;
cursor: pointer;
box-shadow: var(--shadow-md);
}
.admin-artnr-badge:hover { background: var(--color-primary-soft); }
body.admin-ctrl-active .admin-artnr-badge { display: inline-flex; }
.product-card .body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.product-card .name {
font-weight: 700;
font-size: 15px;
line-height: 1.3;
}
.product-card .short {
color: var(--color-ink-faint);
font-size: 13px;
line-height: 1.4;
flex: 1;
}
.price-row {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.price {
font-size: 19px;
font-weight: 800;
color: var(--color-primary);
}
.price-old {
font-size: 13px;
color: var(--color-ink-faint);
text-decoration: line-through;
}
.price-label {
font-size: 11px;
color: var(--color-ink-faint);
text-transform: uppercase;
letter-spacing: .04em;
}
/* ---------- Points list (produktdatapunkter) ---------- */
.point-list {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
font-size: 13px;
color: var(--color-ink-soft);
}
.point-list span b { color: var(--color-ink); }
/* ---------- Breadcrumb ---------- */
.breadcrumb {
display: flex;
gap: 8px;
align-items: center;
font-size: 13px;
color: var(--color-ink-faint);
margin: 20px 0 4px;
flex-wrap: wrap;
}
.breadcrumb a:hover { color: var(--color-primary); }
/* ---------- Product detail ---------- */
.product-detail {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(320px, 3fr);
gap: 10px;
margin-top: 20px;
}
.gallery-main {
background: var(--color-media-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
aspect-ratio: 1 / 1;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
position: relative;
cursor: zoom-in;
}
/* box-shadow ritar upp den rundade konturen även när bildens egen bakgrund
(t.ex. gräs/mörka partier på icke-studiofoton) råkar smälta ihop med
sidans nästan-vita bakgrund runt paddingen - annars syns rundningen
inte alls på den typen av bilder, bara på rena vitbakgrundsfoton. */
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 10px; border-radius: 15px; box-shadow: 0 1px 6px rgba(18, 24, 31, 0.12); }
.gallery-main video { width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 15px; }
.gallery-zoom-hint {
position: absolute;
right: 14px; bottom: 14px;
width: 38px; height: 38px;
border-radius: 50%;
border: none;
background: rgba(16, 24, 33, 0.55);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 15px;
pointer-events: none;
opacity: 0;
transition: opacity .15s ease;
}
.gallery-main:hover .gallery-zoom-hint { opacity: 1; }
/* Säljmärke (productSalesBanner()) nere till höger på produktsidans bild -
något större än på produktkortet. Zoom-knappen flyttas upp ovanför. */
.gallery-sales-banner {
position: absolute;
right: 14px; bottom: 14px;
z-index: 2;
pointer-events: none;
}
.gallery-sales-banner .badge-hot { font-size: 14px; padding: 5px 14px 5px 5px; gap: 8px; }
.gallery-sales-banner .badge-hot-icon { width: 26px; height: 26px; }
.gallery-sales-banner .badge-hot-icon svg { width: 17px; height: 17px; }
.gallery-main.has-sales-banner .gallery-zoom-hint { bottom: 60px; }
/* Produktkortens märken (Kampanj/Erbjudande/EURO5) uppe till vänster på
produktsidans bild - något större än på korten. */
.gallery-badges {
position: absolute;
top: 14px; left: 14px;
z-index: 2;
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
pointer-events: none;
}
.gallery-badges .badge { font-size: 13px; padding: 5px 12px; }
.gallery-thumbs {
display: flex;
gap: 2px;
margin-top: 12px;
overflow-x: auto;
}
.gallery-thumbs button {
background: var(--color-media-bg);
border: 2px solid var(--color-border);
border-radius: 10px;
padding: 4px;
width: 72px; height: 72px;
flex: none;
overflow: hidden;
background: var(--color-surface);
cursor: pointer;
}
.gallery-thumbs button.active { border-color: var(--color-accent); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }
.gallery-thumbs button.is-video { position: relative; }
.gallery-thumbs video { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; background: #000; }
.gallery-thumb-play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
color: #fff; font-size: 22px; text-shadow: 0 1px 6px rgba(0,0,0,0.6);
pointer-events: none;
}
.gallery-disclaimer {
margin-top: 10px;
font-size: 12px;
color: var(--color-ink-faint);
}
/* Mobil-anpassning av produktgalleriet - MÅSTE ligga efter grundreglerna
ovan (.gallery-main m.fl.): vid lika specificitet (en enkel klass mot en
enkel klass) är det källordningen som avgör, inte var i filen en
@media-regel råkar stå. Låg den här blocket FÖRE grundregeln för
.gallery-main (som tidigare) vann grundregelns aspect-ratio:1/1 alltid
över mediafrågans aspect-ratio:unset, oavsett viewportbredd under
900px - bilden blev då alltid kvadratisk (bredd = height:60vw) istället
för full bredd, vilket gav ca 60% skärmbredd på en typisk mobilskärm. */
@media (max-width: 900px) {
.product-detail { grid-template-columns: minmax(0, 1fr); }
/* Negativa marginaler istället för width:100vw + transform: enklare
och robustare (100vw räknar in scrollbar-bredd på skrivbordswebbläsare
och kräver ett separat translateX-värde per brytpunkt). Måste matcha
.containers EGEN sidopadding exakt för att nå kant till kant utan
vare sig glapp eller att sticka ut och orsaka horisontell scroll -
.container har 5px padding på alla bredder nu, så ingen separat
justering behövs vid 640px längre. */
.gallery-col {
width: auto;
transform: none;
margin-left: -5px;
margin-right: -5px;
}
.gallery-main {
aspect-ratio: 1 / 1;
width: 100%;
height: auto;
max-height: none;
border-radius: 0;
border-left: none;
border-right: none;
}
/* object-fit: cover (inte contain) så bilden alltid fyller hela den
kant-till-kant-breda rutan utan brevlådekanter, även när fotots eget
höjd/bredd-förhållande inte matchar height:60vw exakt. */
.gallery-main img {
padding: 0;
border-radius: 0;
box-shadow: none;
object-fit: cover;
}
.gallery-thumbs, .gallery-disclaimer { padding-left: 5px; padding-right: 5px; }
.gallery-thumbs button { width: 64px; height: 64px; }
.buy-box { max-width: 100%; overflow-x: hidden; }
}
/* ---------- Bild-lightbox (helskärmsvy för produktbilder) ---------- */
.lightbox {
position: fixed; inset: 0;
background: rgba(10, 14, 19, 0.94);
z-index: 1000;
display: none;
flex-direction: column;
touch-action: pan-y;
}
.lightbox.open { display: flex; }
.lightbox-stage {
position: relative;
width: 100%;
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 90px;
}
.lightbox-stage img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 10px;
opacity: 0;
transition: opacity .2s ease;
}
.lightbox-stage img.loaded { opacity: 1; }
.lightbox-stage video {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 10px;
background: #000;
}
.lightbox-spinner {
position: absolute;
width: 34px; height: 34px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.25);
border-top-color: #fff;
animation: lightboxSpin .7s linear infinite;
display: none;
}
.lightbox-spinner.show { display: block; }
@keyframes lightboxSpin { to { transform: rotate(360deg); } }
.lightbox-close {
position: absolute; top: 18px; right: 18px;
width: 44px; height: 44px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.12);
color: #fff;
font-size: 18px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 2;
}
.lightbox-close:hover { background: rgba(255,255,255,0.22); }
.lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 50px; height: 50px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.12);
color: #fff;
font-size: 18px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 2;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-thumbs-bar {
flex: none;
padding: 4px 16px calc(14px + env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.lightbox-counter {
color: rgba(255,255,255,0.75);
font-size: 13px;
font-weight: 600;
letter-spacing: .02em;
}
.lightbox-thumbs {
display: flex;
gap: 8px;
overflow-x: auto;
max-width: 100%;
padding: 2px;
}
.lightbox-thumbs button {
background: rgba(255,255,255,0.06);
border: 2px solid transparent;
border-radius: 8px;
padding: 3px;
width: 56px; height: 56px;
flex: none;
overflow: hidden;
cursor: pointer;
position: relative;
opacity: .6;
transition: opacity .15s ease, border-color .15s ease;
}
.lightbox-thumbs button:hover { opacity: .85; }
.lightbox-thumbs button.active { opacity: 1; border-color: #fff; }
.lightbox-thumbs img, .lightbox-thumbs video {
width: 100%; height: 100%; object-fit: cover; border-radius: 4px;
}
@media (max-width: 640px) {
.lightbox-stage { padding: 70px 16px; }
.lightbox-nav { width: 42px; height: 42px; font-size: 15px; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-thumbs button { width: 46px; height: 46px; }
}
.buy-box {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 26px;
align-self: start;
top: calc(var(--header-h) + 16px);
display: flex;
flex-direction: column;
gap: 16px;
}
.product-title { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.product-artnr { color: var(--color-ink-faint); font-size: 13px; margin: 4px 0 0; }
.product-subtitle { color: var(--color-ink-soft); font-size: 14.5px; margin: 0; }
.stock-pill {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 700; color: var(--color-success);
}
.stock-pill::before {
content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success);
}
.qty-row {
display: flex; align-items: center; gap: 12px;
}
.qty-control {
display: inline-flex; align-items: center;
border: 1px solid var(--color-border);
border-radius: 999px;
overflow: hidden;
}
.qty-control button {
width: 38px; height: 38px;
border: none; background: var(--color-surface);
font-size: 18px; cursor: pointer; color: var(--color-primary);
}
.qty-control input {
width: 44px; text-align: center; border: none;
font-weight: 700; font-size: 15px; background: transparent;
}
.divider { height: 1px; background: var(--color-border); margin: 4px 0; }
.spec-list { display: flex; flex-direction: column; gap: 10px; }
.spec-row { display: flex; justify-content: space-between; font-size: 13.5px; gap: 12px; }
.spec-row span:first-child { color: var(--color-ink-faint); }
.spec-row span:last-child { font-weight: 600; text-align: right; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); margin: 48px 0 0; }
.tabs button {
border: none; background: transparent; padding: 12px 18px;
font-weight: 700; font-size: 14px; color: var(--color-ink-faint);
cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button.active { color: var(--color-primary); border-color: var(--color-accent); }
.tab-panel { padding: 26px 0; line-height: 1.7; color: var(--color-ink-soft); overflow-x: hidden; }
/* product_desc kan innehålla fri HTML som admin klistrat in (WYSIWYG,
product_desc_html=1) - t.ex. hela promo-block med egna fasta pixelbredder.
Sådant innehåll är inte byggt för den här sidans breddbegränsningar, så
vi tvingar allt inuti att aldrig bli bredare än sin behållare (!important
eftersom inklistrad HTML ofta har egna inline style="width:...") - annars
kan en enda för bred rad tvinga ut HELA sidan i horisontell scroll på
mobil. */
.product-long-desc { margin-top: 18px; max-width: 100%; overflow-x: hidden; overflow-wrap: break-word; word-break: break-word; }
.product-long-desc * { max-width: 100% !important; }
.product-long-desc p { margin: 0 0 14px; }
.tab-panel table { width: 100%; border-collapse: collapse; }
.tab-panel table td { padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.tab-panel table td:first-child { color: var(--color-ink-faint); width: 45%; }
@media (max-width: 640px) {
/* 26px padding runt om käns onödigt tilltaget på en 360-390px bred
skärm - stjäl utrymme från innehållet. .panel's motsvarande regel
ligger separat, efter .panel's grundregel längre ner (se kommentar
där) - annars vinner grundregelns padding:26px pga källordning. */
.buy-box { padding: 18px; }
.product-title { font-size: 22px; }
.section { margin: 36px 0; }
}
/* ---------- Cart drawer ---------- */
.cart-overlay {
position: fixed; inset: 0; background: rgba(15,20,26,0.45);
z-index: 900; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: min(420px, 100vw);
background: var(--color-surface);
z-index: 901;
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform .25s ease;
box-shadow: var(--shadow-lg);
}
.cart-drawer.open { transform: translateX(0); }
.cart-drawer-head {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 22px; border-bottom: 1px solid var(--color-border);
}
.cart-drawer-head .chrome-title { margin: 0; font-size: 17px; font-weight: 800; }
.cart-items { flex: 1; overflow-y: auto; padding: 12px 22px; }
.cart-line {
display: flex; gap: 12px; padding: 14px 0;
border-bottom: 1px solid var(--color-border);
}
.cart-line-thumb {
width: 64px;
height: 64px;
display: block;
flex: none;
position: relative;
}
.cart-line img {
width: 64px; height: 64px; object-fit: contain;
background: var(--color-media-bg);
border-radius: 10px; padding: 6px; flex: none;
}
.cart-line .info { flex: 1; min-width: 0; }
.cart-line .info .name {
display: inline-block;
color: var(--color-ink);
font-weight: 700;
font-size: 13.5px;
margin-bottom: 4px;
}
.cart-line .info .name:hover { color: var(--color-primary); }
.cart-line .line-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; flex-wrap: wrap; gap: 6px 12px; }
.cart-empty { text-align: center; padding: 60px 20px; color: var(--color-ink-faint); }
.cart-empty i { font-size: 36px; display: block; margin-bottom: 12px; opacity: .5; }
.cart-drawer-foot {
padding: 18px 22px 22px;
border-top: 1px solid var(--color-border);
display: flex; flex-direction: column; gap: 12px;
}
.cart-summary-row { display: flex; justify-content: space-between; font-size: 14.5px; }
.cart-summary-row.total { font-size: 17px; font-weight: 800; }
.link-remove { color: var(--color-danger); font-size: 12.5px; font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; }
.cart-quote-note {
text-align: center;
font-weight: 800;
font-size: 15px;
color: var(--color-ink);
margin-top: 16px;
}
/* ---------- Merförsäljningspopup (visas efter "Lägg i varukorgen") ---------- */
.upsell-overlay {
position: fixed; inset: 0; background: rgba(15,20,26,0.45);
z-index: 920; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.upsell-overlay.open { opacity: 1; pointer-events: auto; }
.upsell-modal {
position: fixed; top: 50%; left: 50%;
transform: translate(-50%, -48%) scale(.97);
width: min(720px, calc(100vw - 32px));
max-height: min(640px, calc(100vh - 48px));
background: var(--color-surface);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
z-index: 921;
display: flex; flex-direction: column;
opacity: 0; pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
}
.upsell-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.upsell-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 22px;
background: linear-gradient(120deg, var(--color-accent) 0%, #103b11 100%);
border-bottom: none;
flex: none;
}
.upsell-modal-head .chrome-title { margin: 0; font-size: 17px; font-weight: 800; color: #fff; }
.upsell-modal-subtitle { margin-top: 3px; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.85); }
.upsell-modal-head .icon-btn-on-accent {
background: rgba(255,255,255,0.15);
border-color: rgba(255,255,255,0.35);
color: #fff;
}
.upsell-modal-head .icon-btn-on-accent:hover { border-color: #fff; }
.upsell-modal-items { flex: 1; overflow-y: auto; padding: 6px 22px; }
.upsell-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 0; border-bottom: 1px dashed var(--color-border);
cursor: pointer;
}
.upsell-item:last-child { border-bottom: none; }
.upsell-item-check { flex: none; width: 18px; height: 18px; accent-color: var(--color-primary); }
.upsell-item-thumb {
width: 56px; height: 56px; object-fit: contain;
background: #fff;
border-radius: 8px; flex: none;
}
/* Platshållare när merförsäljningsprodukten saknar bild - en
(till
skillnad från ![]()
) behöver display:block för att bredd/höjd ska
respekteras alls. */
.upsell-item-thumb-empty { display: block; }
.upsell-item-body { flex: 1; min-width: 0; }
.upsell-item-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.upsell-item-name { font-weight: 700; font-size: 13.5px; color: var(--color-ink); }
.upsell-item-text { display: block; font-size: 12.5px; color: var(--color-ink-faint); margin-top: 2px; }
.upsell-item-price { flex: none; white-space: nowrap; font-weight: 700; font-size: 13px; color: var(--color-ink); }
.upsell-modal-foot {
padding: 16px 22px 20px;
border-top: 1px solid var(--color-border);
flex: none;
}
.upsell-modal-prompt {
text-align: center;
font-size: 15.5px;
font-weight: 800;
color: var(--color-ink);
margin-bottom: 14px;
}
.upsell-modal-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.upsell-modal-buttons .btn { flex: 1 1 130px; white-space: nowrap; }
/* ---------- Cart / checkout pages ---------- */
.checkout-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
gap: 32px;
align-items: start;
margin-top: 24px;
}
@media (max-width: 900px) {
.checkout-grid { grid-template-columns: 1fr; }
}
.panel {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 26px;
}
.panel + .panel { margin-top: 20px; }
@media (max-width: 640px) {
/* Måste ligga efter grundregeln för .panel ovan - annars vinner
grundregelns padding:26px alltid över den här pga källordning vid
lika specificitet (samma buggmönster som fanns för produktgalleriet,
se kommentaren vid .product-detail). */
.panel { padding: 18px; }
}
.category-info {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-accent);
border-radius: var(--radius-lg);
padding: 16px 20px;
margin: 16px 0 24px;
font-size: 14.5px;
line-height: 1.65;
color: var(--color-ink-soft);
display: flex;
gap: 12px;
align-items: flex-start;
}
.category-info i { color: var(--color-accent); font-size: 16px; margin-top: 2px; flex: none; }
/* Interna länkar i introtexten (system/seo_texts.php::renderSeoIntro). */
.category-info a { color: var(--color-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.category-info a:hover { text-decoration-thickness: 2px; }
/* Startsidans "Hitta rätt lastmaskin" (pages/home.php). */
.find-machine-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
}
.find-machine-card {
display: flex; flex-direction: column; gap: 6px;
padding: 18px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-ink);
text-decoration: none;
transition: border-color .15s ease, transform .15s ease;
}
.find-machine-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.find-machine-card i { font-size: 22px; color: var(--color-accent); }
.find-machine-card strong { font-size: 15.5px; }
.find-machine-card span { font-size: 13.5px; color: var(--color-ink-soft); line-height: 1.5; }
/* Informations-/landnings-/guidesidor (pages/info.php, system/info_pages.php). */
.contact-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin: 0 0 24px;
}
.contact-card {
display: flex; flex-direction: column; gap: 4px;
padding: 20px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-ink);
text-decoration: none;
transition: border-color .15s ease;
}
.contact-card:hover { border-color: var(--color-accent); }
.contact-card i { font-size: 22px; color: var(--color-accent); margin-bottom: 6px; }
.contact-card span { font-size: 13px; color: var(--color-ink-soft); }
.contact-card strong { font-size: 16px; }
.guide-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 16px;
}
.guide-card {
display: flex; flex-direction: column;
padding: 22px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-ink);
text-decoration: none;
transition: border-color .15s ease;
}
.guide-card:hover { border-color: var(--color-accent); }
.guide-card h2 { font-size: 18px; margin: 0 0 8px; }
.guide-card p { font-size: 14px; color: var(--color-ink-soft); line-height: 1.6; margin: 0 0 12px; flex: 1; }
.guide-card-more { color: var(--color-accent); font-weight: 700; font-size: 14px; }
.guide-related { max-width: 820px; margin: 28px 0 0; }
.guide-related h2 { font-size: 18px; margin: 0 0 8px; }
.guide-related ul { padding-left: 20px; line-height: 1.9; }
.guide-related a { color: var(--color-accent); font-weight: 600; }
.info-cta {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
margin: 32px 0 0;
padding: 20px 24px;
border-radius: var(--radius-lg);
background: var(--color-success-bg);
color: var(--color-ink);
font-size: 15px;
}
.info-cta .btn { white-space: nowrap; }
.footer-info-list { font-size: 13.5px; }
/* "Passar till"-rutan på produktsidan (product_fits, system/product_seo.php). */
.fits-box {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 12px 16px;
background: var(--color-surface);
font-size: 14px;
}
.tab-panel .fits-box { margin-top: 24px; max-width: 820px; }
.fits-box-title { font-size: 16px; font-weight: 800; color: var(--color-ink); margin: 0 0 6px; }
.fits-box-title i { color: var(--color-accent); margin-right: 4px; }
.fits-list { margin: 0 0 8px; padding-left: 20px; }
.fits-list li { margin-bottom: 2px; }
.fits-list a { color: var(--color-accent); font-weight: 600; }
.fits-list a:hover { text-decoration: underline; }
.fits-box-note { font-size: 12.5px; color: var(--color-ink-soft); }
/* Maskinsidornas "Redskap och tillbehör som passar" - grupper i kolumner. */
.tab-panel .fits-box-reverse { max-width: none; }
.fits-groups {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 4px 24px;
margin-bottom: 8px;
}
.fits-group h3 { margin: 8px 0 4px; font-size: 14px; font-weight: 800; color: var(--color-ink); }
.fits-box-note .fits-tel { color: inherit; font-weight: 700; white-space: nowrap; text-decoration: none; }
/* Film på produktsidan (länkvideor, system/product_videos.php). */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.video-card { margin: 0; }
.video-card figcaption { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--color-ink); }
.video-facade, .video-card iframe {
display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg);
background: #12181f center / cover no-repeat;
}
.video-facade { position: relative; cursor: pointer; padding: 0; }
.video-facade::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(0,0,0,.15); transition: background .2s; }
.video-facade:hover::after { background: rgba(0,0,0,.05); }
.video-play {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
width: 68px; height: 68px; border-radius: 50%; background: rgba(24, 91, 25, .92); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 24px; padding-left: 4px;
box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .2s;
}
.video-facade:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
@media (max-width: 480px) { .video-grid { grid-template-columns: 1fr; } }
/* Vanliga frågor (includes/partials/faq.php) - /, inget JS. */
.faq-section { max-width: 820px; margin: 40px 0 8px; }
.faq-section h2 { font-size: 21px; font-weight: 800; margin: 0 0 14px; color: var(--color-ink); letter-spacing: -0.01em; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); margin-bottom: 8px; }
.faq-item summary {
list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; position: relative;
font-weight: 700; font-size: 15px; color: var(--color-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
font-size: 20px; font-weight: 400; color: var(--color-accent); transition: transform .2s;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover { color: var(--color-accent); }
.faq-answer { padding: 0 16px 14px; font-size: 15px; line-height: 1.7; color: var(--color-ink-soft); }
.faq-answer a { color: var(--color-accent); font-weight: 600; }
/* Långtext under produkterna på kategori-/hjullastarsidan
(system/seo_texts.php::renderSeoText). */
.seo-content {
max-width: 820px;
margin: 40px 0 16px;
font-size: 15px;
line-height: 1.7;
color: var(--color-ink-soft);
}
.seo-content h2 { margin: 32px 0 10px; font-size: 21px; font-weight: 800; color: var(--color-ink); letter-spacing: -0.01em; }
.seo-content h2:first-child { margin-top: 0; }
.seo-content h3 { margin: 22px 0 8px; font-size: 17px; font-weight: 800; color: var(--color-ink); }
.seo-content p { margin: 0 0 14px; }
.seo-content ul { margin: 0 0 16px; padding-left: 20px; }
.seo-content li { margin-bottom: 8px; }
.seo-content strong { color: var(--color-ink); }
.seo-content a { color: var(--color-accent); font-weight: 600; }
.seo-content a:hover { text-decoration: underline; }
.seo-content .seo-tel { white-space: nowrap; }
/* Startsidans text i två kolumner över hela bredden (en kolumn på mobil).
Rubriker hålls ihop med texten under, och punkter delas inte mellan kolumner. */
.seo-content-columns { max-width: none; columns: 2; column-gap: 56px; }
.seo-content-columns h2 { break-after: avoid; }
.seo-content-columns h2:first-child { margin-top: 0; }
.seo-content-columns li, .seo-content-columns p { break-inside: avoid; }
@media (max-width: 860px) {
.seo-content-columns { columns: 1; }
}
.panel h3 { margin: 0 0 18px; font-size: 16.5px; font-weight: 800; }
.panel summary { list-style: none; }
.panel summary::-webkit-details-marker { display: none; }
.panel summary::marker { content: ""; }
.panel[open] summary .fa-chevron-circle-down { transform: rotate(180deg); }
.panel summary .fa-chevron-circle-down { display: inline-block; transition: transform .15s ease; }
.panel .tab-panel { padding-top: 16px; }
/* Två paket bredvid varandra på stora skärmar, samma mönster som
.offer-list på erbjudanden.php. */
.package-grid {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
}
@media (min-width: 1100px) {
.package-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
}
/* .panel + .panel (den generella vertikala panel-stapel-regeln) ger annars
varje paket förutom det första en margin-top på 20px - i grid-
tvåkolumnsläget kollapsar marginalen inte, så höger kolumns paket hamnar
fel i höjdled mot vänster kolumn (samma bugg som fanns på
erbjudanden.php, se .offer-list .panel.offer-row). */
.package-grid .panel.package-details {
margin-top: 0;
}
.package-details { position: relative; transition: border-color .15s ease, box-shadow .15s ease; }
.package-details:hover { border-color: var(--color-accent); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
/* Extra utrymme längst ner i kortet när det är ihopfällt, så
"Se paket"-hintet i hörnet inte överlappar prisraden. :not(.expanded)
ger högre specificitet (klass + pseudoklass) än .panel's padding-regler,
så den vinner oavsett källordning - och när paketet är expanderat faller
padding-bottom tillbaka till .panel's vanliga värde av sig självt
eftersom den här regeln då inte längre matchar. */
.package-details:not(.expanded) { padding-bottom: 48px; }
.package-hint {
position: absolute;
right: 20px;
bottom: 14px;
display: flex;
align-items: center;
gap: 4px;
font-size: 12.5px;
font-weight: 700;
color: var(--color-ink-faint);
pointer-events: none;
transition: color .15s ease, opacity .15s ease;
}
.package-details:hover .package-hint { color: var(--color-accent); }
.package-details.expanded .package-hint { opacity: 0; }
@media (max-width: 640px) {
.package-hint { right: 14px; bottom: 10px; font-size: 11.5px; }
}
.package-summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; }
.package-summary .fa-chevron-circle-down { display: inline-block; transition: transform 1s ease; }
.package-details.expanded .package-summary .fa-chevron-circle-down { transform: rotate(180deg); }
/* Avstånd mellan pris och "Spara"-märke - flyttat hit från en inline
style="margin-left:8px" i product.php, så att mobil-mediafrågan nedan
kan sätta om värdet utan !important (en inline style kan annars aldrig
slås av en vanlig CSS-regel, oavsett specificitet). */
.package-summary .badge { margin-left: 8px; }
@media (max-width: 900px) {
/* Namnet får plats på en rad, pris + Spara-märke hamnar under istället
för att tvinga fram radbrytningar i namnet eller trycka ut märket
utanför kortet på smala skärmar. Ligger EFTER grundregeln för
.package-summary ovan - annars vinner grundregelns
justify-content/align-items pga källordning vid lika specificitet,
precis som tidigare hände med galleriets aspect-ratio. */
.package-summary {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.package-summary > span:last-child {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding-left: 24px; /* linjera priset med texten efter chevron-ikonen */
}
.package-summary .badge { margin-left: 0; }
}
.package-body { max-height: 0; overflow: hidden; transition: max-height 1s ease; }
.package-details.expanded .package-body { max-height: 800px; }
.package-body-inner { padding-top: 16px; }
/* Stora skärmar (samma gräns som tvåkolumnsläget i .package-grid): paketen
är alltid öppna. Ren CSS så att de visas öppna direkt vid sidladdning utan
uppfällningsanimation; app.js håller dessutom .expanded satt. Chevron och
"Se paket"-hint döljs eftersom det inte finns något att fälla ihop. */
@media (min-width: 1100px) {
.package-details:not(.expanded) { padding-bottom: 26px; }
.package-body { max-height: none; transition: none; }
.package-hint { display: none; }
.package-summary { cursor: default; }
.package-summary .fa-chevron-circle-down { display: none; }
}
.steps {
display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap;
}
.step-pill {
display: flex; align-items: center; gap: 8px;
padding: 9px 16px; border-radius: 999px;
background: var(--color-bg); font-size: 13px; font-weight: 700; color: var(--color-ink-faint);
}
.step-pill .num {
width: 20px; height: 20px; border-radius: 50%;
background: var(--color-border); color: var(--color-ink-soft);
display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.step-pill.active { background: var(--color-primary); color: #fff; }
.step-pill.active .num { background: var(--color-accent); color: var(--color-accent-ink); }
.step-pill.done { color: var(--color-success); }
.step-pill.done .num { background: var(--color-success); color: #fff; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--color-ink-soft); margin-bottom: 6px; }
.field input, .field select, .field textarea {
width: 100%; padding: 11px 13px; border-radius: 10px;
border: 1px solid var(--color-border); font-size: 14.5px;
background: var(--color-surface); color: var(--color-ink);
font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(24,91,25,0.18);
}
.radio-card {
border: 1px solid var(--color-border); border-radius: 10px;
padding: 14px 16px; display: flex; align-items: center; gap: 12px;
cursor: pointer; font-size: 14px; font-weight: 600;
}
.radio-card input { accent-color: var(--color-accent); }
.radio-card.selected { border-color: var(--color-accent); background: rgba(24,91,25,0.06); }
.order-summary-line { display: flex; justify-content: space-between; font-size: 13.5px; padding: 8px 0; border-bottom: 1px dashed var(--color-border); color: inherit; text-decoration: none; }
/* :last-child (inte :last-of-type) - erbjudanden.php blandar - och
-rader inom samma .order-summary-line-lista (klickbara produktrader
vs. rabatt-/totalsumma-raderna), och :last-of-type räknar per tagg-namn
istället för verklig position - det skulle ge FEL rad (sista
-taggen,
inte den faktiskt sista raden) sin kant borttagen. */
.order-summary-line:last-child { border-bottom: none; }
.offer-item-row-linked { cursor: pointer; border-radius: 6px; transition: background-color .15s ease; }
.offer-item-row-linked:hover { background-color: var(--color-bg); }
.order-summary-total { border-bottom: none; border-top: 2px solid var(--color-ink); margin-top: 4px; padding-top: 10px; font-weight: 700; font-size: 15px; color: var(--color-ink); }
.order-summary-discount { color: var(--color-danger); font-weight: 700; }
.alert { border-radius: 10px; padding: 14px 16px; font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; }
.alert-center { justify-content: center; align-items: center; text-align: center; }
.alert-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.alert-success { background: var(--color-success-bg); color: var(--color-success); }
/* ---------- Confirmation ---------- */
.confirm-box {
text-align: center; max-width: 520px; margin: 60px auto; padding: 40px 20px;
}
.confirm-icon {
width: 76px; height: 76px; border-radius: 50%; background: var(--color-success-bg);
color: var(--color-success); display: flex; align-items: center; justify-content: center;
font-size: 34px; margin: 0 auto 22px;
}
/* ---------- Footer ---------- */
.site-footer {
margin-top: 80px;
background: #185b19;
color: rgba(255,255,255,0.85);
padding: 48px 0 24px;
}
.footer-grid {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px;
}
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }
.site-footer h4 { color: #fff; font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 14px; }
.site-footer ul { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.site-footer a:hover { color: #fff; }
.footer-map {
display: grid;
grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.6fr);
gap: 24px;
align-items: stretch;
padding-bottom: 32px;
margin-bottom: 32px;
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-map-info h4 {
color: #fff; font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 14px;
}
.footer-map-info p {
margin: 0 0 16px;
font-size: 13.5px;
color: rgba(255,255,255,0.75);
line-height: 1.6;
}
.footer-map-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
font-size: 13px;
font-weight: 700;
transition: background .15s ease, border-color .15s ease;
}
.footer-map-link:hover {
background: #fff;
color: var(--color-accent);
border-color: #fff;
}
.footer-map-embed {
min-height: 220px;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid rgba(255,255,255,0.15);
filter: grayscale(0.15) contrast(1.02);
}
.footer-map-embed iframe { display: block; }
@media (max-width: 700px) {
.footer-map { grid-template-columns: 1fr; }
.footer-map-embed { min-height: 260px; order: -1; }
}
.footer-bottom {
margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12);
font-size: 12.5px; opacity: .7; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
/* ---------- Toast ---------- */
.toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
background: var(--color-primary); color: #fff; padding: 12px 22px; border-radius: 999px;
font-size: 13.5px; font-weight: 600; z-index: 1200; opacity: 0; transition: all .25s ease;
display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.empty-state { text-align: center; padding: 80px 20px; color: var(--color-ink-faint); }
.empty-state i { font-size: 40px; opacity: .5; display: block; margin-bottom: 14px; }
.skeleton { background: linear-gradient(90deg, var(--color-border) 25%, var(--color-bg) 37%, var(--color-border) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-md); }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
/* ---------- Mobile nav toggle ---------- */
.nav-toggle { display: none; }
/* .main-nav hade overflow-x:auto med dold scrollbar - vid alla bredder
under ca 1300px (dvs de allra flesta bärbara datorer/surfplattor, inte
bara telefoner) rymdes inte alla kategorier i raden och de senare
klipptes tyst bort utan något tecken på att det gick att scrolla.
Byt hellre till hamburgermenyn tidigt så alla kategorier alltid syns,
antingen i raden eller i menyn - aldrig delvis dolda. */
@media (max-width: 1180px) {
.main-nav { display: none; }
.nav-toggle { display: flex; }
}
@media (max-width: 860px) {
.site-header .container { gap: 12px; }
/* Header + logo var tilltagna för desktop (96px/120px) - på mobil
gjorde det att loggan spillde ut ovanför/under headerns vita yta
och överlappade innehållet under den sticky headern. */
:root { --header-h: 88px; }
.brand .brand-logo { height: 80px; }
}
.mobile-nav {
display: none;
position: fixed; inset: var(--header-h) 0 0 0;
background: var(--color-surface); z-index: 480;
padding: 20px; overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 14px 6px; font-weight: 700; font-size: 16px; border-bottom: 1px solid var(--color-border); }
/* ---------- Flytande snabbknappar (varukorg/kontakt/nyhetsbrev/Facebook) ---------- */
/* Sitter flush mot högerkanten och är bara rundade på vänstersidan, så de
ser ut att sticka ut ur sidan som flikar - inte flyta fritt som cirklar. */
.quick-actions {
position: fixed;
right: 0;
top: 45%;
transform: translateY(-50%);
z-index: 850;
display: flex;
flex-direction: column;
gap: 12px;
}
.quick-action-btn {
width: 54px; height: 54px;
border-radius: 10px 0 0 10px;
background: var(--color-accent);
border: 1px solid transparent;
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
box-shadow: -3px 3px 14px rgba(18, 24, 31, 0.22);
cursor: pointer;
transition: transform .15s ease, filter .15s ease;
}
.quick-action-btn.quick-action-facebook {
background: #1877f2;
}
.quick-action-btn.quick-action-cart {
background: #f28c00;
}
.quick-action-btn.quick-action-phone {
background: var(--color-accent);
}
.quick-action-btn:hover {
filter: brightness(1.1);
transform: translateX(-6px);
}
.quick-action-btn .cart-badge {
left: -6px;
right: auto;
}
@media (max-width: 640px) {
.quick-actions { top: 42%; gap: 9px; }
.quick-action-btn { width: 46px; height: 46px; font-size: 17px; border-radius: 10px 0 0 10px; }
}
/* ---------- Generisk modal (kontakt/nyhetsbrev) ---------- */
.modal-overlay {
position: fixed; inset: 0; background: rgba(15,20,26,0.5);
z-index: 950; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-box {
position: fixed; top: 50%; left: 50%;
transform: translate(-50%, -46%);
width: min(480px, calc(100vw - 32px));
max-height: calc(100vh - 48px);
overflow-y: auto;
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 951;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
}
.modal-box.open {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%);
}
.modal-box-sm { width: min(380px, calc(100vw - 32px)); }
@media (min-width: 900px) {
/* Bredare modaler på stor skärm - 480/380px kändes onödigt smalt när
det finns gott om plats. */
.modal-box { width: min(640px, calc(100vw - 32px)); }
.modal-box-sm { width: min(480px, calc(100vw - 32px)); }
}
.modal-box-head {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 22px; border-bottom: 1px solid var(--color-border);
position: sticky; top: 0; background: var(--color-surface);
}
.modal-box-head .chrome-title { margin: 0; font-size: 17px; font-weight: 800; }
.modal-box-body { padding: 22px; font-size: 14px; color: var(--color-ink-soft); line-height: 1.6; }
.modal-box-note { font-size: 13px; color: var(--color-ink-faint); }
.contact-info-list { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.contact-info-list a { color: var(--color-primary); font-weight: 700; }
.modal-box-body form .field { margin-bottom: 14px; }
.modal-box-body form .field:last-of-type { margin-bottom: 10px; }
.field-hint { font-size: 12px; color: var(--color-ink-faint); margin-top: 6px; }
/* Rubrikbanner i accentgrönt - samma "livfulla färgblock"-känsla som den
gamla butikens orange popup-header, fast i butikens egen brandfärg. */
.modal-box-head-accent {
background: linear-gradient(120deg, var(--color-accent) 0%, #103b11 100%);
border-bottom: none;
}
.modal-box-head-accent .chrome-title {
color: #fff;
font-size: 19px;
display: flex;
align-items: center;
gap: 10px;
}
.modal-box-head-accent .icon-btn-on-accent,
.modal-box-head-phone .icon-btn-on-accent {
background: rgba(255,255,255,0.15);
border-color: rgba(255,255,255,0.35);
color: #fff;
}
.modal-box-head-accent .icon-btn-on-accent:hover,
.modal-box-head-phone .icon-btn-on-accent:hover { border-color: #fff; }
.modal-box-head-phone {
background: linear-gradient(120deg, var(--color-accent) 0%, #103b11 100%);
border-bottom: none;
}
.modal-box-head-phone .chrome-title {
color: #fff;
display: flex;
align-items: center;
gap: 10px;
}
.phone-modal-body {
font-size: 16px;
}
.phone-modal-body a {
color: var(--color-accent);
font-weight: 800;
}
.newsletter-lead {
font-size: 15px;
font-weight: 600;
line-height: 1.5;
margin: 0 0 16px;
}
.modal-box-divider { height: 1px; background: var(--color-border); margin: 18px 0; }
.newsletter-form-heading {
display: flex; align-items: center; gap: 8px;
font-size: 17px; font-weight: 800; margin: 0 0 6px;
color: var(--color-ink);
}
/* Rabattrutan får en pulserande röd badge (samma djup som startsidans
promo-banner-badge) för att sticka ut mot den lugnare kortbakgrunden,
istället för att bli ännu en grön yta ovanpå den gröna headern. */
.newsletter-promo-box {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-accent);
border-radius: var(--radius-md);
padding: 14px 16px;
margin: 4px 0 18px;
}
.newsletter-promo-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: #dc2626;
color: #fff;
font-weight: 800;
font-size: 12.5px;
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 10px;
animation: promoPulse 1.8s ease-in-out infinite;
}
.newsletter-promo-box p {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--color-ink-soft);
}
.color-choices { display: flex; gap: 10px; margin-top: 8px; }
.color-choice { position: relative; cursor: pointer; }
.color-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.color-swatch {
display: block; width: 30px; height: 30px; border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
border: 2px solid transparent;
transition: border-color .15s ease;
}
.color-choice input:checked + .color-swatch { border-color: var(--color-primary); }
.form-msg { font-size: 13.5px; font-weight: 700; margin-top: 12px; }
.form-msg.success { color: var(--color-success); }
.form-msg.error { color: var(--color-danger); }
/* ---------- Cookiesamtycke (CookieConsent v3, includes/partials/cookie-consent.php) ----------
Bibliotekets CSS-variabler kopplas till butikens tema (följer även mörkt
läge). "Acceptera alla" och "Neka alla" har samma stil och storlek
(equalWeightButtons) - IMY: att neka ska vara lika enkelt som att acceptera. */
#cc-main {
--cc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--cc-bg: var(--color-surface);
--cc-primary-color: var(--color-ink);
--cc-secondary-color: var(--color-ink-soft);
--cc-btn-primary-bg: var(--color-accent);
--cc-btn-primary-color: var(--color-accent-ink);
--cc-btn-primary-border-color: var(--color-accent);
--cc-btn-primary-hover-bg: #12471a;
--cc-btn-primary-hover-color: #fff;
--cc-btn-primary-hover-border-color: #12471a;
--cc-btn-secondary-bg: transparent;
--cc-btn-secondary-color: var(--color-ink);
--cc-btn-secondary-border-color: var(--color-border);
--cc-btn-secondary-hover-bg: var(--color-bg);
--cc-btn-secondary-hover-color: var(--color-ink);
--cc-btn-secondary-hover-border-color: var(--color-ink-faint);
--cc-separator-border-color: var(--color-border);
--cc-toggle-on-bg: var(--color-accent);
--cc-toggle-readonly-bg: var(--color-ink-faint);
--cc-cookie-category-block-bg: var(--color-bg);
--cc-cookie-category-block-border: var(--color-border);
--cc-cookie-category-block-hover-bg: var(--color-bg);
--cc-cookie-category-block-hover-border: var(--color-border);
--cc-cookie-category-expanded-block-bg: transparent;
--cc-cookie-category-expanded-block-hover-bg: var(--color-bg);
--cc-footer-bg: var(--color-bg);
--cc-footer-color: var(--color-ink-soft);
--cc-footer-border-color: var(--color-border);
--cc-link-color: var(--color-accent);
--cc-modal-border-radius: var(--radius-lg);
--cc-btn-border-radius: 8px;
--cc-z-index: 2147483000;
}
#cc-main .cm__btn, #cc-main .pm__btn { font-weight: 700; }
/* Alla tre knapparna på en rad: Acceptera alla | Inställningar | Neka alla
(ordningen sätts i cookie-consent.php, onModalReady). Staplas på smal skärm. */
#cc-main .skipsna-btn-row { display: flex !important; flex-direction: row !important; gap: .375rem; flex: 1; }
#cc-main .skipsna-btn-row .cm__btn,
#cc-main .skipsna-btn-row .pm__btn { margin: 0 !important; flex: 1 1 0; min-width: 0; }
@media (max-width: 640px) {
#cc-main .skipsna-btn-row { flex-direction: column !important; }
}
/* Platshållare för inbäddat innehåll (karta i sidfoten, produktvideor) tills samtycke */
.cc-embed { position: relative; }
.cc-embed-placeholder {
height: 100%; min-height: 200px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
text-align: center; padding: 20px;
background: var(--color-bg); color: var(--color-ink);
border-radius: inherit; font-size: 13.5px;
}
.footer-map-embed .cc-embed-placeholder { background: rgba(255,255,255,0.06); color: inherit; }
.cc-embed-placeholder--inline { aspect-ratio: 16 / 9; min-height: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.cc-embed-placeholder p { margin: 0; max-width: 360px; }
.cc-embed-text { opacity: .8; }
.cc-embed-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.cc-embed-btn {
background: var(--color-accent); color: var(--color-accent-ink); border: 0; border-radius: 8px;
padding: 9px 16px; font: inherit; font-weight: 700; cursor: pointer;
}
.cc-embed-btn:hover { filter: brightness(1.1); }
.cc-embed-link { background: none; border: 0; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; opacity: .8; }
/* Cookiepolicy/integritetspolicy (pages/cookiepolicy.php, pages/integritetspolicy.php) */
.policy-text h2 { font-size: 19px; margin: 26px 0 8px; }
.policy-text h3 { font-size: 16px; margin: 20px 0 6px; }
.policy-table-wrap { overflow-x: auto; margin: 8px 0 16px; }
.policy-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
.policy-table th, .policy-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.policy-table th { background: var(--color-bg); font-weight: 700; white-space: nowrap; }
.policy-table code { font-size: 12.5px; white-space: nowrap; }
/* "Cookieinställningar"-länken i sidfoten är en knapp (öppnar panelen) */
.footer-cookie-settings { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: inherit; cursor: pointer; }
.footer-cookie-settings:hover { text-decoration: underline; }