/* ============================================================
   Skin couture, deel 2: productlijst, productpagina, mandje, kassa.
   Alleen onder thema modern + skin = couture (theme.php). Zelfde
   regels als deel 1: wit, inkt, goud enkel als dunne accent,
   vierkant, kapitalen op hele pixels (tests/unit/AtelierTypeTest.php).
   De kassa (flow, velden, payloads) verandert niet: enkel opmaak.
   ============================================================ */

/* ---------- Kruimelpad ---------- */
main div#breadcrumbs a,
main div#breadcrumbs li {
	color: var(--tt-ink-soft);
	font-size: 14px;
	line-height: 22px;
}

/* ---------- Productlijst: kop in kapitalen, kaarten wit zonder rand ---------- */
main #productlist .productlist > .columns > .column > .title.is-4 {
	font-size: 40px;
	line-height: 44px;
	font-weight: 500 !important;
	letter-spacing: var(--tt-display-track);
	text-transform: uppercase;
	margin-bottom: 16px;
}
main #productlist .productlist .columns.sort > .column.is-hidden-mobile p {
	font-size: var(--tt-foot-size);
	font-weight: 600;
	line-height: var(--tt-foot-line);
	letter-spacing: var(--tt-foot-track);
	text-transform: uppercase;
	color: var(--tt-ink-mute);
}
.shop-sort__label {
	color: var(--tt-ink-mute);
}
main .select select,
main .input,
main .textarea {
	border-radius: 0 !important;
}
.shop-products .card,
main #productlist .products-wrapper .card {
	background: var(--tt-bg);
	border: 1px solid transparent;
	box-shadow: none;
	transform: none;
}
.shop-products .card:hover,
main #productlist .products-wrapper .card:hover {
	border-color: var(--tt-line);
	box-shadow: none;
	transform: none;
}
.shop-products .card-image,
main #productlist .products-wrapper .card-image {
	overflow: hidden;
	background: var(--tt-bg);
}
.shop-products .card:hover .card-image img,
main #productlist .products-wrapper .card:hover .card-image img {
	transform: scale(1.03);
}
.shop-products .card-content,
main #productlist .products-wrapper .card-content {
	padding: 16px 16px 20px;
	text-align: center;
}
.shop-products .card-content .head,
main #productlist .products-wrapper .card-content .head {
	justify-content: center;
}
.shop-products .card-content .head p:first-child,
main #productlist .products-wrapper .card-content .head p:first-child {
	color: var(--tt-ink) !important;
	font-family: var(--tt-font-ui);
	font-size: 17px !important;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0;
	text-align: center;
}
/* Prijs onder de titel: "vanaf" klein in goud (tekstgoud, 4.8:1), bedrag in inkt. */
.shop-products .card-content .content > p.is-size-6,
main #productlist .products-wrapper .card-content .content > p.is-size-6 {
	color: var(--tt-ink) !important;
	font-weight: 600;
	text-align: center;
}
main #productlist .products-wrapper .card > .card-image > .tags-wrapper > .tag {
	border-radius: 0;
	background: var(--tt-ink);
	color: #ffffff;
}
main #productlist .products-wrapper .card > .card-image > .tags-wrapper > .tag p {
	font-size: var(--tt-tiny-size);
	font-weight: 600;
	line-height: var(--tt-tiny-line);
	letter-spacing: var(--tt-tiny-track);
	text-transform: uppercase;
	color: #ffffff;
}
main #productlist .filter .tag {
	border-radius: 0 !important;
}
main #productlist .filter .tag.is-active,
main #productlist .filter .active-filters .tag {
	background: var(--tt-gold-tint);
	border: 1px solid var(--tt-ink);
	color: var(--tt-ink);
}
main .pagination-link.is-current,
main .pagination-previous.is-current {
	background: var(--tt-ink);
	border-color: var(--tt-ink);
	border-radius: 0;
}

/* ---------- Productpagina ---------- */
main #productinfo .productdetail .title.is-4 {
	font-size: 40px !important;
	line-height: 44px;
	font-weight: 500 !important;
	letter-spacing: var(--tt-display-track);
	text-transform: uppercase;
	margin-bottom: 12px !important;
}
main #productinfo .productdetail .title:not(.is-spaced) + .subtitle {
	font-family: var(--tt-font-ui) !important;
	color: var(--tt-ink-soft) !important;
	font-size: 18px;
	line-height: 28px;
}
/* Prijsblok tussen twee haarlijnen (desktop; op de gsm is het de vaste balk). */
@media screen and (min-width: 769px) {
	main #productinfo .productdetail #price-wrapper {
		padding: 16px 0;
		border-top: 1px solid var(--tt-line);
		border-bottom: 1px solid var(--tt-line);
	}
}
main section#productinfo .productdetail .price-wrapper .price {
	font-family: var(--tt-font-ui) !important;
	color: var(--tt-ink) !important;
	font-size: 28px !important;
	font-weight: 600;
	line-height: 34px;
	letter-spacing: 0;
}
main section#productinfo .productdetail #price-wrapper > span {
	color: var(--tt-ink-mute);
	font-size: var(--tt-tiny-size);
	font-weight: 600;
	line-height: var(--tt-tiny-line);
	letter-spacing: var(--tt-tiny-track);
	text-transform: uppercase;
}
/* Afhalen/leveren: een gewone lijst met gouden iconen, geen grijze vakken. */
main section#productinfo .productdetail form .dates > span {
	background: transparent;
	padding-left: 0;
	border-radius: 0;
	color: var(--tt-ink-soft);
}
main section#productinfo .productdetail form .dates > span svg {
	color: var(--tt-gold);
}
main section#productinfo .productdetail form .dates > span i:not([data-feather]) {
	color: var(--tt-ink);
	font-style: normal;
	font-weight: 500;
}
main section#productinfo .productdetail .field > .label {
	color: var(--tt-ink);
	font-size: var(--tt-caps-size);
	font-weight: 600;
	line-height: var(--tt-caps-line);
	letter-spacing: var(--tt-caps-track);
	text-transform: uppercase;
}
/* Keuzes (maat, aantal personen): vierkante tegels; gekozen = inktrand op goudtint. */
main section#productinfo .productdetail .columns.has-multi-select > .column > .control > label > p {
	border-radius: 0 !important;
	border-color: var(--tt-line-strong);
}
main section#productinfo .productdetail .columns.has-multi-select > .column > .control > input[type="radio"]:checked + label > p {
	background: var(--tt-gold-tint) !important;
	border-color: var(--tt-ink) !important;
	box-shadow: inset 0 0 0 1px var(--tt-ink);
	color: var(--tt-ink) !important;
}
main section#productinfo .productdetail .select select {
	border-radius: 0;
	border-color: var(--tt-line-strong);
}
main section#productinfo .productdetail .button.shopping-cart {
	min-height: 48px;
	padding: 0 28px;
	background: var(--tt-ink) !important;
	border-color: var(--tt-ink) !important;
	color: #ffffff !important;
	border-radius: 0 !important;
	font-family: var(--tt-font-ui) !important;
	font-size: var(--tt-btn-size);
	font-weight: 600;
	line-height: var(--tt-btn-line);
	letter-spacing: var(--tt-btn-track);
	text-transform: uppercase;
}
main section#productinfo .productdetail .button.shopping-cart:hover {
	background: #000000 !important;
}
/* Tabs: kapitalen, actieve tab met een gouden onderlijn van 2 px. */
main #productinfo .productinfo .tabs ul {
	border-bottom-color: var(--tt-line);
}
main #productinfo .productinfo .tabs a {
	color: var(--tt-ink-mute);
	font-family: var(--tt-font-ui) !important;
	font-size: var(--tt-caps-size);
	font-weight: 600;
	line-height: var(--tt-caps-line);
	letter-spacing: var(--tt-caps-track);
	text-transform: uppercase;
	border-bottom-width: 2px;
}
main #productinfo .productinfo .tabs a:hover {
	color: var(--tt-ink);
}
main #productinfo .productinfo .tabs li.is-active a {
	color: var(--tt-ink);
	border-bottom-color: var(--tt-gold);
}
/* Gsm: uitklaplijst in plaats van tabs, koppen in dezelfde kapitalen. */
main .shop-acc__head {
	color: var(--tt-ink);
	font-family: var(--tt-font-ui) !important;
	font-size: var(--tt-caps-size);
	font-weight: 600;
	line-height: var(--tt-caps-line);
	letter-spacing: var(--tt-caps-track);
	text-transform: uppercase;
}
main #productinfo .productinfo .tabs-content article.content {
	color: var(--tt-ink-soft);
	font-size: 16px;
	line-height: 26px;
}

/* ---------- Display-koppen van mandje, kassa, smaakkiezer, lade ----------
   modern zet ze in --shop-font-display (= Couture Display) op 17-20 px; de
   haarlijnen breken onder 24 px, dus 24 px, 500, kapitalen. */
.shop-co .checkout-content .head h3,
.shop-co .checkout-content .title.is-5,
.shop-flv__legend,
.shop-drawer__title,
main section#registreren .step h2 {
	font-family: var(--tt-font-display) !important;
	font-size: 24px !important;
	font-weight: 500;
	line-height: 28px;
	letter-spacing: var(--tt-display-track);
	text-transform: uppercase;
	color: var(--tt-ink) !important;
}

@media screen and (max-width: 768px) {
	main #productlist .productlist > .columns > .column > .title.is-4,
	main #productinfo .productdetail .title.is-4 {
		font-size: 30px !important;
		line-height: 34px;
	}
	main section#productinfo .productdetail .button.shopping-cart {
		min-height: 44px;
	}
}