/*
Produktsiden.
Ligger i sin egen fil og ikke i style.css MED VILJE. Temaets regel er ét
stylesheet, og den holder for resten af sitet -- men produktsiden bygges i
et andet spor end forsiden og navigationen, og afsnittet er nu to gange
blevet slettet af en samtidig hel-fil-skrivning af style.css. En ekstra
request paa produktsider er en billigere pris end at miste arbejdet igen.
Indlaeses kun paa produktsider, efter style.css, af tp_produkt_stylesheet().
Varen er brugt og findes i ét eksemplar. Siden skal svare paa tre ting i
den raekkefoelge: hvad er det, hvilken stand er det i, og er den stadig at
faa.
========================================================================== */
@media (min-width: 820px) {
.single-product div.product {
display: grid;
/* 60/40. Fotoet er varen og maa fylde; panelet har brug for bredde nok
til at prisen og knapraekken ikke braekker. */
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
column-gap: var(--r6);
align-items: start;
}
.single-product div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
/* Graduerings-forklaringen hoerer til fotoet, ikke til koebet: den staar
under billedet i venstre spalte -- og skal vaere PRAECIS lige saa bred
som billedomraadet ovenover, ikke som hele spalten (maalt 797 px mod
584 foer).
Bredden regnes med samme udtryk som galleriets max-width, og de to
TAL SKAL FOELGES AD. De 84 px er miniature-soejlen plus mellemrummet:
med miniaturer spaender billedomraadet over dem begge, uden miniaturer
staar fotoet alene og er 84 px smallere. Det er derfor den anden regel
findes -- billedomraadet skifter bredde med antallet af billeder. */
.single-product div.product > .tp-grad {
grid-column: 1; grid-row: 2;
max-width: calc(74vh * 3 / 4 + 84px);
}
/* :not(:has(...)) og IKKE :has(...:not(:has(...))). En :has() maa ikke
staa inde i en anden :has() -- den variant er ugyldig og blev bare
ignoreret, saa boksen blev ved med at maale 584 px mod fotoets 500. */
.single-product div.product:not(:has(.flex-control-thumbs)) > .tp-grad {
max-width: calc(74vh * 3 / 4);
}
/* Panelet spaender over begge raekker, men klaeber ikke.
Sticky var slaaet til og er pillet af igen efter Hasses oenske. */
.single-product div.product > .summary {
grid-column: 2; grid-row: 1 / span 2;
align-self: start;
}
.single-product div.product > .tp-sektion,
.single-product div.product > .up-sells,
.single-product div.product > .storefront-product-pagination { grid-column: 1 / -1; }
}
/* --------------------------------------------------------------------------
Fotoet
Miniaturerne staar i en soejle til venstre for hovedbilledet. Woo bygger
dem som ol.flex-control-thumbs EFTER billedet i DOM'en; raekkefoelgen
vendes med grid, ikke med markup.
-------------------------------------------------------------------------- */
.woocommerce-product-gallery {
margin: 0;
display: grid;
gap: var(--r2);
/* Galleriet fylder sin spalte -- de 60 %.
Med miniaturer: soejle paa 76 px, mellemrum, og fotoet i resten.
Uden miniaturer: fotoet starter i venstre kant, og de 84 px reserveres
i hoejre side i stedet. Usynligt, for baggrunden er sidens egen -- og
fotoet bliver dermed PRAECIS lige saa stort paa varer med ét billede
som paa varer med flere, uden at svaeve inde midt i spalten. */
grid-template-columns: 76px minmax(0, 1fr);
margin-inline: 0;
/* Loft paa HOEJDEN, ikke paa bredden.
Fotoerne er 3:4, saa et billede der fylder spaltens 713 px bliver 950 px
hoejt -- hoejere end skaermen. Man kan ikke faa begge dele: enten fylder
fotoet bredden, eller ogsaa kan man se det hele paa én gang.
Her regnes baglaens fra hoejden: 74vh er den hoejde der er plads til
under header og broedkrumme (maalt: fotoet begynder 221 px nede naar
siden staar i toppen), gange 3/4 giver bredden, plus miniature-soejlens
84 px.
Fotoet vokser altsaa med skaermens HOEJDE i stedet for dens bredde, og
staar aldrig hoejere end vinduet. */
max-width: calc(74vh * 3 / 4 + 84px);
}
.woocommerce-product-gallery:not(:has(.flex-control-thumbs)) {
grid-template-columns: minmax(0, 1fr);
padding-right: 84px;
}
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { grid-column: -2; grid-row: 1; }
.woocommerce-product-gallery__wrapper { margin: 0; }
/* Fast billedformat 3:4.
Maalt paa 378 produktfotos: 93 % er praecis 3:4 staaende, 6 % er 4:3
liggende. Med et fast felt i 3:4 fylder de 93 % det HELT ud uden en eneste
pixel tom plads, og alle varer faar samme stoerrelse uanset motiv og uanset
om der er miniaturer. De faa liggende faar en stribe over og under --
billigere end at beskaere det eneste foto af en brugt vare. */
.woocommerce-product-gallery__image {
display: block;
aspect-ratio: 3 / 4;
background: var(--flade-dyb);
border: 1px solid var(--kant);
border-radius: var(--radius);
overflow: hidden;
}
.woocommerce-product-gallery__image img {
display: block;
width: 100%; height: 100%;
object-fit: cover;
background: none; border: 0; border-radius: 0;
}
/* Woo'ens forstoerrelsesglas er en emoji fra en anden tid. */
.woocommerce-product-gallery__trigger { display: none; }
/* Varer uden foto faar Woo'ens hvide pladsholder. Den daempes. */
.woocommerce-product-gallery__image img.woocommerce-placeholder { opacity: .1; }
.flex-control-thumbs {
grid-column: 1; grid-row: 1;
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: var(--r2);
}
.flex-control-thumbs li { margin: 0; }
.flex-control-thumbs img {
display: block; width: 100%; height: auto;
background: var(--flade-dyb);
border: 1px solid var(--kant);
border-radius: var(--radius);
cursor: pointer;
opacity: .55;
transition: opacity .12s ease, border-color .12s ease;
}
.flex-control-thumbs img:hover { opacity: .85; }
.flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--messing); }
/* --------------------------------------------------------------------------
Opsummeringen som panel
Panelet samler de fem ting koebet bestaar af og giver dem en kant at ligge
inden for, saa hoejre spalte ikke flyder ud i baggrunden.
-------------------------------------------------------------------------- */
.summary.entry-summary {
margin: 0;
background: var(--flade);
border: 1px solid var(--kant);
border-radius: var(--radius);
padding: var(--r4);
}
.tp-produkt-kat {
margin: 0 0 var(--r2);
font-size: var(--t-xs); font-weight: 700;
letter-spacing: var(--sp-mikro); text-transform: uppercase;
}
.tp-produkt-kat a { color: var(--messing); }
.tp-produkt-kat a:hover { color: var(--messing-lys); }
.single-product h1.product_title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(26px, 3.4vw, 40px);
line-height: 1.02;
text-transform: uppercase;
margin: 0 0 var(--r3);
}
/* Aarstallet. Fraktionen staar allerede som kategorilinje over navnet. */
.tp-produkt-meta {
margin: -.4rem 0 var(--r3);
font-size: var(--t-xs); color: var(--svag);
}
.single-product .summary p.price,
.single-product .summary .woocommerce-variation-price {
margin: 0 0 var(--r3);
font-size: 26px; font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
/* Streg under prisen: panelet laeses ovenfra i fire trin -- hvad er det,
hvad koster det, kan jeg faa det, koeb. */
.single-product .summary p.price { padding-bottom: var(--r3); border-bottom: 1px solid var(--kant); }
.single-product .summary p.price del { color: var(--svag); font-weight: 400; margin-right: .4em; }
.single-product .summary p.price ins { text-decoration: none; }
.tp-lager {
display: flex; align-items: center; gap: .5rem;
margin: 0 0 var(--r3);
font-size: var(--t-xs); color: var(--daempet);
}
.tp-lager::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--messing); flex: none;
}
.tp-lager--tom { color: var(--rust); }
.tp-lager--tom::before { background: var(--rust); }
/* Woo skriver "Ikke paa lager" lige under vores egen linje. Kun den ene af de
to. Rammer bevidst KUN direkte boern af .summary -- varianternes egen
lagerlinje ligger dybere og skal blive staaende paa varer med flere stande. */
.single-product .summary > p.stock { display: none; }
.woocommerce-product-details__short-description {
color: var(--daempet);
font-size: var(--t-m);
line-height: 1.6;
margin-bottom: var(--r4);
}
.woocommerce-product-details__short-description p { margin: 0 0 var(--r2); }
.woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
.woocommerce-product-details__short-description a { color: var(--messing); }
/* Foldet beskrivelse: fem linjer, resten bag "Vis mere".
-webkit-line-clamp virker i alle nuvaerende browsere (ogsaa Firefox), og
den klipper paa LINJER og ikke paa hoejde -- den eneste maade at ramme
"fem linjer" naar skriftstoerrelsen aendrer sig med skaermen. */
.woocommerce-product-details__short-description.tp-foldet {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: var(--r2);
}
/* Afsnitsmargenerne skal vaere DE SAMME i begge tilstande. De blev nulstillet
i foldet tilstand, og saa rykkede teksten sig naar man foldede ud -- det
lignede at linjeafstanden aendrede sig (den var den samme, 24 px; det var
de 8 px mellem afsnittene der kom til). Klippet taeller linjer, ikke
margener, saa der er ingen grund til at fjerne dem. */
.tp-vismere {
display: inline-flex; align-items: center;
margin: 0 0 var(--r4); padding: 0;
min-height: 0;
background: none; border: 0;
color: var(--messing); cursor: pointer;
font-family: var(--font); font-size: var(--t-s); font-weight: 600;
letter-spacing: var(--sp-knap); text-transform: none;
text-decoration: underline; text-underline-offset: 3px;
}
/* Klassen to gange, af samme grund som "Ryd" i soegeforslagene: basens
`button:hover` (0,1,1) giver messing baggrund til alt der er en knap, og
en enkelt klasse taber til den. Farven vandt allerede (produkt.css staar
efter style.css), men baggrunden sneg sig ind. */
.tp-vismere.tp-vismere:hover,
.tp-vismere.tp-vismere:focus-visible {
background: none; border: 0;
color: var(--ink);
}
/* --------------------------------------------------------------------------
Stand og koeb
-------------------------------------------------------------------------- */
.single-product table.variations {
width: 100%; margin: 0 0 var(--r3);
border: 0; border-collapse: collapse;
}
.single-product table.variations th,
.single-product table.variations td { display: block; padding: 0; border: 0; text-align: left; }
.single-product table.variations th label {
font-size: var(--t-xs); font-weight: 700;
letter-spacing: var(--sp-mikro); text-transform: uppercase;
color: var(--svag);
}
.single-product table.variations td { margin-top: var(--r1); }
/* Samme bredde som knapraekken under. */
.single-product table.variations select { width: 100%; max-width: none; }
.single-product .reset_variations { font-size: var(--t-xs); color: var(--svag); }
/* Kun én stand: der er intet at rydde. */
.tp-en-stand .reset_variations { display: none; }
/* Antal og knap paa samme raekke, som i Nexora-forlaegget: vaelgeren tager
kun sin egen bredde, knappen resten. */
.single-product form.cart { margin: 0 0 var(--r4); }
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart.cart_group,
.single-product form.cart:not(.variations_form) {
display: flex; flex-direction: row; align-items: stretch;
gap: var(--r2); flex-wrap: wrap;
}
.single-product form.cart .quantity { flex: 0 0 auto; }
/* Antalsvaelgeren: minus, tal, plus. Knapperne bygges af tp_produkt_antal_js()
og bruger samme klasse som kurvpanelets, saa de to steder ser ens ud. */
.single-product form.cart .quantity.tp-antalvaelger {
/* height og ikke min-height: med min-height straekker boernene sig kun til
indholdets hoejde, og plus/minus sad i en 30 px kasse midt i en 46 px
raekke. Med en fast hoejde fylder de raekken og staar ud for tallet. */
display: flex; align-items: stretch;
width: auto; height: 46px;
border: 1px solid var(--kant-staerk);
border-radius: var(--radius);
overflow: hidden;
}
.single-product .tp-antalvaelger .tp-antal-knap {
flex: 0 0 auto; width: 2.75rem;
/* flex og ikke bare text-align: knappen straekkes i hoejden af raekken,
og uden align-items sad tegnet klistret op under overkanten. */
display: flex; align-items: center; justify-content: center;
/* Temaets .tp-antal-knap har height: 30px til kurvpanelet. Den faste
hoejde slaar align-items: stretch, saa tegnet sad i en 30 px kasse midt
i en 46 px raekke. */
height: 100%; min-height: 0;
font-size: var(--t-xl); line-height: 1;
color: var(--daempet);
border: 0; border-radius: 0;
padding: 0;
}
.single-product .tp-antalvaelger .tp-antal-knap:hover { color: var(--messing); }
.single-product .tp-antalvaelger input.qty { width: 3rem; }
.single-product form.cart .quantity input.qty {
flex: 0 0 auto; min-width: 0;
border: 0; background: transparent;
text-align: center; color: var(--ink);
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Uden vaelgeren (ét eksemplar, eller inden JS'en har naaet det). */
.single-product form.cart .quantity:not(.tp-antalvaelger) input.qty {
width: 100%; max-width: 22rem; text-align: center;
border: 1px solid var(--kant-staerk); background: var(--flade-dyb);
}
/* WooCommerce saetter display inline med JavaScript, saa der skal !important
til. Antalsfeltet skjules kun naar der er ét eksemplar. */
.tp-en-stand form.cart .quantity { display: none !important; }
/* Lagerlinjen staar allerede oeverst; WooCommerce ville skrive den igen. */
.tp-en-stand .woocommerce-variation-availability { display: none; }
.single-product .single_add_to_cart_button {
flex: 1 1 11rem;
width: auto; min-height: 46px;
padding: .85rem 1.4rem;
background: var(--messing); border: 1px solid var(--messing);
color: var(--paa-messing); font-weight: 700;
letter-spacing: var(--sp-meta); text-transform: uppercase;
border-radius: var(--radius);
}
.single-product .single_add_to_cart_button:hover { background: var(--messing-lys); border-color: var(--messing-lys); }
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button:disabled {
background: transparent; border-color: var(--kant-staerk);
color: var(--svag); cursor: not-allowed;
}
/* Kategorierne stod og floed som en loes linje under knappen. Nu er de skilt
fra koebet med en streg, saa de laeser som en fodnote. */
.single-product .product_meta {
margin-top: var(--r4);
padding-top: var(--r3);
border-top: 1px solid var(--kant);
font-size: var(--t-xs); line-height: 1.7; color: var(--svag);
}
.single-product .product_meta a { color: var(--daempet); }
.single-product .product_meta a:hover { color: var(--ink); }
.single-product .product_meta .posted_in { display: block; }
/* Ingen af varerne har varenummer. Woo skriver "N/A" paa hver eneste side. */
.single-product .product_meta .sku_wrapper { display: none; }
/* --------------------------------------------------------------------------
Graduerings-forklaringen
Samme tekst paa tusinder af varer, saa den maa ikke fylde som var den
skrevet om denne ene.
-------------------------------------------------------------------------- */
.tp-grad {
margin: var(--r4) 0 0;
border-top: 1px solid var(--kant);
border-bottom: 1px solid var(--kant);
}
.tp-grad > summary {
list-style: none; cursor: pointer;
padding: var(--r3) 0;
display: flex; align-items: center; gap: .6rem;
font-size: var(--t-xs); font-weight: 700;
letter-spacing: var(--sp-mikro); text-transform: uppercase;
color: var(--messing);
}
.tp-grad > summary::-webkit-details-marker { display: none; }
.tp-grad > summary::after {
content: ""; margin-left: auto;
width: .45em; height: .45em;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: translateY(-.15em) rotate(45deg);
transition: transform .15s ease;
}
.tp-grad[open] > summary::after { transform: translateY(.1em) rotate(-135deg); }
.tp-grad-tekst {
padding-bottom: var(--r4);
max-width: 70ch;
color: var(--daempet); font-size: var(--t-s);
}
.tp-grad-tekst p { margin: 0 0 var(--r2); }
.tp-grad-tekst a { color: var(--messing); }
.tp-grad-tekst ol,
.tp-grad-tekst ul { margin: 0 0 var(--r3); padding-left: 1.2rem; }
.tp-grad-tekst li { margin-bottom: .3rem; }
.tp-grad-tekst strong { color: var(--ink); font-weight: 600; }
/* --------------------------------------------------------------------------
Beslaegtede varer
-------------------------------------------------------------------------- */
/* Karrusellen selv -- kort, pile, progress-bjaelke -- ligger i style.css.
Det er den samme som paa forsiden. Her staar kun afstanden ned til den. */
.single-product div.product > .tp-sektion { margin-top: var(--r6); }
/* Forrige/naeste med miniaturer: dubletter af de beslaegtede varer lige over. */
.storefront-product-pagination { display: none; }
@media (max-width: 819px) {
.single-product h1.product_title { margin-bottom: var(--r2); }
.single-product .summary.entry-summary { margin-top: var(--r4); padding: var(--r3); }
.single-product table.variations select { max-width: none; }
/* Vaelger og knap paa SAMME raekke ogsaa paa telefon (18/9). De stod i en
kolonne foer, og saa blev antalsvaelgeren en 340 px bred kasse med
minus i den ene ende og plus i den anden -- man kunne ikke se at de to
tegn hoerte til det samme tal. Nu tager vaelgeren kun sin egen bredde
og knappen resten, praecis som paa desktop. */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart.cart_group,
.single-product form.cart:not(.variations_form) {
flex-direction: row; flex-wrap: nowrap; align-items: stretch;
}
.single-product form.cart .quantity.tp-antalvaelger { width: auto; flex: 0 0 auto; }
.single-product .tp-antalvaelger .tp-antal-knap { width: 2.4rem; }
.single-product .tp-antalvaelger input.qty { flex: 0 0 auto; width: 2.2rem; }
/* min-width: 0 er ikke pynt: et flex-barn maa som udgangspunkt ikke blive
smallere end sit indhold, og "TILFØJ TIL KURV" ville skubbe raekken ud
over skaermen paa de smalleste telefoner. */
.single-product .single_add_to_cart_button {
flex: 1 1 auto; width: auto; min-width: 0;
padding: .85rem 1rem;
}
/* Den tomme variationsboks (pris/lager) staar i DOM'en hele tiden og gav
et hul mellem standvaelgeren og knapraekken. */
.single-product .woocommerce-variation:empty { display: none !important; margin: 0; }
.woocommerce-product-gallery,
.tp-grad { max-width: none; }
/* Paa telefon staar miniaturerne UNDER billedet i en vandret raekke.
En soejle ved siden af ville tage en femtedel af skaermbredden fra
det billede man faktisk kigger paa. */
.woocommerce-product-gallery,
.woocommerce-product-gallery:not(:has(.flex-control-thumbs)) {
grid-template-columns: minmax(0, 1fr);
padding-right: 0;
}
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
grid-column: 1; grid-row: 1;
}
.flex-control-thumbs {
grid-column: 1; grid-row: 2;
flex-direction: row;
overflow-x: auto;
scrollbar-width: none;
}
.flex-control-thumbs::-webkit-scrollbar { display: none; }
.flex-control-thumbs li { flex: 0 0 64px; }
}
/* --------------------------------------------------------------------------
Beskeder fra WooCommerce ("... er lagt i kurven")
Woos egen udgave er en bred kasse med en kraftig ramme og en messingknap i
fuld stoerrelse -- den raaber hoejere end det den fortaeller. Her er den en
smal linje med en messingstribe i venstre kant og en sekundaer knap.
-------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .6rem var(--r3);
margin: 0 0 var(--r4);
padding: .8rem var(--r3);
background: var(--flade);
border: 1px solid var(--kant);
border-left: 3px solid var(--messing);
border-radius: var(--radius);
color: var(--daempet);
font-size: var(--t-m);
line-height: 1.4;
list-style: none;
}
.woocommerce-error { border-left-color: var(--rust); }
/* Woos eget ikon er et tegn fra en ikonfont, placeret absolut. Det slaas fra
og erstattes af et flueben der foelger med i flexraekken. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
position: static;
flex: 0 0 auto;
content: "";
width: 18px; height: 18px;
margin: 0;
background: var(--messing);
color: transparent;
font-size: 0;
border-radius: 50%;
-webkit-mask: url("data:image/svg+xml;utf8,") center / 18px 18px no-repeat;
mask: url("data:image/svg+xml;utf8,") center / 18px 18px no-repeat;
}
.woocommerce-error::before { background: var(--rust); }
.woocommerce-message a.button,
.woocommerce-info a.button {
order: 3;
margin-left: auto;
flex: 0 0 auto;
padding: .5rem 1rem;
min-height: 0;
background: none;
border: 1px solid var(--kant-staerk);
color: var(--ink);
font-size: var(--t-xs); font-weight: 600;
letter-spacing: var(--sp-vid); text-transform: uppercase;
text-decoration: none;
border-radius: var(--radius);
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
background: none;
border-color: var(--messing);
color: var(--messing);
}