/* Domased Homepage Sections
 *
 * Typography follows the rest of the site: Playfair Display for headings (the
 * theme already loads it), self-hosted Inter for everything else. Colours are
 * the same palette used by the slider and header — #14110e ink, #FFBC00 accent.
 */

.domased-section {
	padding: 64px 0;
	font-family: 'Inter', sans-serif;
	color: #14110e;
}

/* Tinted band, used to separate consecutive product grids so the page has some
   rhythm instead of reading as one long white column. Full-bleed like the
   slider — the section sits inside the constrained content column, so it has to
   break out to reach the viewport edges. */
.domased-section--alt {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: #f6f4f0;
}

.domased-section__inner {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
}

/* ---- hero: the visible page heading, directly under the slider ---- */
.domased-section--hero {
	padding: 52px 0 40px;
	text-align: center;
}

.domased-hero__title {
	margin: 0;
	font-family: 'Playfair Display', serif;
	font-size: clamp(30px, 3.8vw, 52px);
	font-weight: 400;
	line-height: 1.1;
	color: #14110e;
}

.domased-hero__lead {
	max-width: 62ch;
	margin: 16px auto 0;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.5;
	color: #4a423a;
}

@media (max-width: 778px) {
	.domased-section--hero { padding: 34px 0 26px; }
}

/* ---- full-width shipping banner ----
   Edge-to-edge like the slider: the section is rendered inside the constrained
   content column, so it breaks out with the same calc(50% - 50vw) trick. The
   ancestor overflow-x guard in booklovers-child/style.css keeps 100vw (which
   includes the scrollbar) from producing a horizontal scrollbar. */
.domased-banner {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 30px;
	box-sizing: border-box;
	background: #FFBC00;
	font-family: 'Inter', sans-serif;
	text-align: center;
}

.domased-banner__text {
	margin: 0;
	font-size: clamp(16px, 1.5vw, 21px);
	line-height: 1.45;
	color: #14110e;
}

.domased-banner__strong {
	font-weight: 700;
}

.domased-banner__link {
	margin-left: 10px;
	color: #14110e !important;
	font-weight: 700;
	text-decoration: underline !important;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
	white-space: nowrap;
}
.domased-banner__link:hover,
.domased-banner__link:focus-visible {
	color: #fff !important;
}

@media (max-width: 480px) {
	.domased-banner { padding: 20px; }
	.domased-banner__link { display: block; margin: 6px 0 0; }
}

/* ---- section heading ---- */
.domased-section__head {
	margin: 0 0 36px;
	text-align: center;
}

.domased-section__eyebrow {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6b6259;
}

.domased-section__title {
	margin: 0;
	font-family: 'Playfair Display', serif;
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 400;
	line-height: 1.15;
	color: #14110e;
}

/* ---- grid ---- */
.domased-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) { .domased-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 778px)  { .domased-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } }
@media (max-width: 420px)  { .domased-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } }

/* The theme adds bullets/margins to list items site-wide — neutralise here. */
.domased-grid > li { margin: 0; padding: 0; }
.domased-grid > li:before { content: none !important; display: none !important; }

/* ---- card ----
   The whole card is one link, so there is a single tab stop per product and
   the accessible name is the title plus price, rather than a bare "read more". */
.domased-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none !important;
	color: inherit;
}

/* Fixed-ratio box so every card in the row is the same height and the titles
   line up. Real covers here run about 0.69–0.82 wide-to-tall while the box is
   0.75, so `contain` (which never crops a cover) almost always leaves slack in
   one direction. The box is therefore transparent — that slack now shows
   whatever is behind the card instead of a grey strip. */
.domased-card__media {
	display: block;
	aspect-ratio: 3 / 4;
	margin-bottom: 12px;
	background: transparent;
	overflow: hidden;
}

.domased-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;      /* book covers vary in ratio — never crop them */
	/* Sit the covers on a common baseline, like books on a shelf: any slack
	   collects above the cover rather than being split top and bottom. */
	object-position: center bottom;
	display: block;
	transition: transform .25s ease;
}

.domased-card__link:hover .domased-card__img,
.domased-card__link:focus-visible .domased-card__img {
	transform: scale(1.04);
}

.domased-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;    /* keeps every card the same height */
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 500;
}

.domased-card__link:hover .domased-card__title { color: #a37800; }

.domased-card__price {
	margin-top: 6px;
	font-size: 15px;
	font-weight: 700;
	color: #14110e;
}
/* WooCommerce wraps sale prices in <del>/<ins>.
   trx_addons sets a global `del { color: #ddd }`, which on white is barely
   there — and the opacity this rule used to add made it worse. The old price is
   given a real colour instead, dimmer than the sale price but still readable
   (#6b6259 on white is ~5.6:1, comfortably past the 4.5:1 minimum). */
.domased-card__price del {
	color: #6b6259 !important;
	opacity: 1;
	font-weight: 400;
	margin-right: 8px;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}
/* The sale price carries the emphasis: full weight, full ink. */
.domased-card__price ins {
	color: #14110e;
	text-decoration: none;
	font-weight: 700;
}

/* ---- category tiles ----
   Distinct from the product cards on purpose: the name sits over the image on a
   scrim, so a row of categories reads as navigation rather than as products.
   Only one product_cat in the shop has a term image, so the visual is normally
   the newest cover in that category (see category_image()). */
.domased-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) { .domased-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 778px)  { .domased-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

.domased-tiles > li { margin: 0; padding: 0; }
.domased-tiles > li:before { content: none !important; display: none !important; }

.domased-tile__link {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 6px;
	background: #14110e;
	text-decoration: none !important;
}

.domased-tile__media,
.domased-tile__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.domased-tile__img {
	object-fit: cover;        /* tiles are decorative crops, unlike product covers */
	object-position: center;
	transition: transform .3s ease;
}

.domased-tile__link:hover .domased-tile__img,
.domased-tile__link:focus-visible .domased-tile__img {
	transform: scale(1.05);
}

/* Scrim over the LOWER HALF of the image, so the label reads clearly whatever
   cover lands behind it while the top half of the artwork stays untouched.
   Previously the whole image was dimmed to 78% opacity and the gradient only
   covered the label's own height — which washed out the picture and still left
   the text fighting busy covers. */
.domased-tile__media:after {
	content: "";
	position: absolute;
	inset: 50% 0 0 0;
	background: linear-gradient(
		to bottom,
		rgba(20, 17, 14, 0)    0%,
		rgba(20, 17, 14, .55) 18%,
		rgba(20, 17, 14, .88) 45%,
		rgba(20, 17, 14, 1)   72%,
		rgba(20, 17, 14, 1)  100%
	);
	pointer-events: none;
}

.domased-tile__label {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;               /* above the scrim */
	padding: 16px;
	color: #fff;
	text-align: center;
}

.domased-tile__name {
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: clamp(17px, 1.4vw, 22px);
	line-height: 1.2;
	color: #fff;
}

.domased-tile__count {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	letter-spacing: .04em;
	color: #FFBC00;
}

/* ---- author chips ----
   Deliberately lighter than the category tiles: two image rows in a row would
   flatten the page, and these are navigation, not merchandising. */
.domased-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.domased-chips > li { margin: 0; padding: 0; }
.domased-chips > li:before { content: none !important; display: none !important; }

.domased-chip__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 14px 26px;
	border: 1px solid #d9d6d0;
	border-radius: 6px;
	background: #fff;
	color: #14110e !important;
	text-decoration: none !important;
	transition: border-color .15s ease, background-color .15s ease;
}

.domased-chip__link:hover,
.domased-chip__link:focus-visible {
	border-color: #14110e;
	background: #FFBC00;
}

.domased-chip__name {
	font-family: 'Playfair Display', serif;
	font-size: 19px;
	line-height: 1.2;
}

.domased-chip__count {
	font-size: 13px;
	letter-spacing: .04em;
	color: #6b6259;
}
.domased-chip__link:hover .domased-chip__count { color: #14110e; }

@media (max-width: 480px) {
	.domased-chips { gap: 10px; }
	.domased-chip__link { padding: 11px 18px; }
	.domased-chip__name { font-size: 17px; }
}

/* ---- "more" button ---- */
.domased-section__more {
	margin: 40px 0 0;
	text-align: center;
}

/* Shape taken from the slider's button (2026-08-22).
   These three ("Všetky zlacnené", "Viac noviniek", "Obchod") were a 5px-radius
   rectangle — radius/height 0.085 — next to a carousel button that is a soft
   pill at 0.391. Two different button shapes on one page.

   So the geometry is now the same recipe as .domased-slider__btn: vertical size
   comes from `line-height: 2.8` rather than padding, and the radius is `1.2em`,
   which keeps the 0.391 ratio at any font size instead of pinning it to one
   height. Measured before / after: 59.0px tall, r=5px → 46.0px tall, r=18px.

   Colours (2026-08-22): yellow fill, black 2px outline, black label; on hover
   and focus the fill goes black and the label white, with the outline held at
   #121212 through both states so the button never changes size. This is the
   reverse of what it was — the resting state used to be the black fill and the
   yellow was the hover.

   Contrast: #121212 on #FFBC00 is 12.7:1, #fff on #121212 is 18.9:1 — both
   clear AAA, and the label carries the meaning on its own, so the colour swap
   is not the only hover cue for anyone who cannot see it. */
.domased-btn {
	display: inline-block;
	padding: 0 1.25em;
	border: 2px solid #121212;
	border-radius: 1.2em;
	background: #FFBC00;
	color: #121212 !important;
	font-size: 15px;
	font-weight: 700;
	line-height: 2.8;
	letter-spacing: .06em;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}
.domased-btn:hover,
.domased-btn:focus {
	border-color: #121212;
	background: #121212;
	color: #fff !important;
}

@media (max-width: 778px) {
	.domased-section { padding: 44px 0; }
	.domased-section__head { margin-bottom: 26px; }
}