/**
 * A konfigurált tétel megjelenése a WooCommerce felületein: kosár, pénztár,
 * köszönőoldal, fiók.
 *
 * MIÉRT KELL: a WooCommerce a tétel-adatokat `<dl class="variation">`-be írja,
 * `<dt>`/`<dd>` párokként. A shop témája ezekre nem ad blokk-megjelenítést,
 * ezért a 9 sor egyetlen összefolyó szövegtömbbé olvad
 * („Méret: EU 38 Orr: Teljes gyöngy Oldal: …”) — mérve az élő kosáron és
 * pénztáron. Egy két-három opciós terméknél ez nem tűnik fel; egy 9 lépéses
 * konfigurátornál olvashatatlan.
 *
 * A horgony a SOR osztálya (`woocommerce_cart_item_class` /
 * `woocommerce_order_item_class`), nem a névcella: a `<dl>` a névcellában a
 * terméknév TESTVÉRE, nem gyereke, ezért a nevet nem lehet köré csomagolni.
 *
 * A tokenek szándékosan ugyanazok, mint a configurator.css-ben: a kosárban
 * ugyanaz a dizájn-nyelv szólal meg, mint a konfigurátorban.
 */

.cipo-konfiguralt {
	--cipo-keret: #dddedf;
	--cipo-szoveg: #363636;
	--cipo-halk: #767676;
	--cipo-halvany: #f2f2f2;
}

/*
 * EGY PÁR = EGY SOR. A címke és az érték egymás mellett fut, a következő pár
 * új sorban kezdődik. Sem rács, sem flex — mindkettőt kipróbáltuk és MÉRTÜK:
 *
 * A `grid-template-columns: max-content 1fr` a széles kosártáblában szép,
 * hasábba rendezett listát ad, a PÉNZTÁR-összesítő ~215 px-es hasábjában
 * viszont a címke-hasáb felemészti a helyet, és az érték karakterenként törik
 * („Teljes gyöng / y”, „Gyöng / y + strass / z mix”). Ez ugyanaz az elem
 * ugyanazon a viewporton — vagyis viewport-media-query nem menti meg, csak
 * konténer-lekérdezés, azt viszont táblacellán nem lehet megbízhatóan
 * felvenni. Ezért az a megoldás nyert, ami MINDEN szélességen helyes.
 *
 * A `display` KÉNYSZERÍTETT — kivételesen, és csak ez az egy tulajdonság.
 * A böngésző egyeztetett szabálylistáján mérve KÉT külön téma-szabály írja
 * felül, kontextusonként másik:
 *   kosárban:  `.woocommerce-cart-form dl.variation { display: flex }`
 *   pénztárban: `.woocommerce-checkout .shop_table dl.variation { display: flex }`
 * A második 0,3,1 fajsúlyú és a mi lapunk UTÁN tölt be, vagyis szelektor-
 * fajsúllyal csak a téma belső szerkezetére hivatkozva lehetne verni
 * (`.woocommerce-checkout .shop_table tr.cipo-konfiguralt …`) — az viszont
 * elszakadna, ha a téma átnevezi az osztályait. Egy tulajdonságra szűkített
 * `!important` itt a kevésbé törékeny megoldás. A többi tulajdonság
 * szándékosan felülírható marad.
 */
tr.cipo-konfiguralt dl.variation,
.cipo-konfiguralt .variation {
	display: block !important;
	margin: 0.75em 0 0;
	padding: 0;
	font-size: 0.875em;
	line-height: 1.5;
}

.cipo-konfiguralt .variation dt {
	display: inline;
	margin: 0;
	padding: 0;
	font-weight: 500;
	color: var(--cipo-halk);
	/* A téma `float`-ot adhat a dt/dd párnak — attól a sorok egymásra csúsznának. */
	float: none;
	clear: none;
}

.cipo-konfiguralt .variation dd {
	display: inline;
	margin: 0 0 0 0.35em;
	padding: 0;
	color: var(--cipo-szoveg);
	float: none;
}

/* A pár után sortörés — így a következő címke új sorban kezd. */
.cipo-konfiguralt .variation dd::after {
	content: "";
	display: block;
}

/* A Woo `<p>`-be teszi az értéket; blokként az saját sorba ugrana. */
.cipo-konfiguralt .variation dd p {
	display: inline;
	margin: 0;
	padding: 0;
}

/*
 * Kosár-bélyegkép: a kompozit kép fekvő (1700×925), a téma viszont négyzetes
 * kép-hasábra számít, ezért a cipő egy pöttyé zsugorodik. Minimum-szélesség és
 * semleges háttér kell, hogy a fehér cipő egyáltalán látszódjon.
 */
.cipo-konfiguralt img.cipo-woo-kep {
	display: block;
	width: 100%;
	min-width: 96px;
	height: auto;
	background: var(--cipo-halvany);
}

/* Köszönőoldal, fiók és e-mail: a rendelés-tétel képe a tétel fölött. */
.cipo-konfiguralt .cipo-woo-rendeles-kep {
	display: block;
	max-width: 240px;
	width: 100%;
	height: auto;
	margin: 0 0 0.75em;
	background: var(--cipo-halvany);
	border: 1px solid var(--cipo-keret);
}