/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* Arabic webfont, per the design system (tokens/fonts.css): IBM Plex Sans
   Arabic, chosen because it shares the logo's low-contrast geometric skeleton.
   Must stay at the top of this file: @import is ignored anywhere after a rule. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap");


/* ==========================================================================
   Uniform book covers
   --------------------------------------------------------------------------
   Catalogue covers come from mixed sources (OpenLibrary, Google Books,
   iTunes) so their native aspect ratios run from 1.91:1 down to 0.56:1.
   WooCommerce is set to "uncropped" thumbnails, so every card inherited a
   different height and the grid rendered ragged.

   Fix: every cover sits in a fixed 2:3 portrait frame on a paper matte and
   is scaled with object-fit:contain, so it is never cropped and never
   distorted. 2:3 is the true book-cover ratio and already matches ~70% of
   the catalogue, so most covers fill the frame edge to edge.
   Direction-agnostic (centred), so it holds for EN and AR/RTL alike.
   ========================================================================== */

:root {
	--dec-cover-ratio: 2 / 3;
	--dec-cover-matte: #f6f2e9;
}

/* --- Product cards: shop archive, category pages, carousels, related --- */
.wd-product .wd-product-thumb > .wd-product-img-link,
.wd-product .product-image-link {
	display: block;
	position: relative;
	aspect-ratio: var(--dec-cover-ratio);
	background-color: var(--dec-cover-matte);
	overflow: hidden;
}

.wd-product .wd-product-thumb > .wd-product-img-link > img,
.wd-product .product-image-link > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

/* --- Sidebar / footer product widgets (top rated, recently viewed, etc.) --- */
.product_list_widget .widget-product-img {
	display: block;
	position: relative;
	aspect-ratio: var(--dec-cover-ratio);
	background-color: var(--dec-cover-matte);
	overflow: hidden;
	flex-shrink: 0;
}

.product_list_widget .widget-product-img > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

/* ==========================================================================
   Site-wide trust strip
   --------------------------------------------------------------------------
   Delivery cost, timing, returns window and payment method, printed at
   wp_body_open by inc/dec-trust-bar.php.

   These rules lived on style attributes until 2026-07-28, because WP Rocket's
   remove_unused_css dropped this stylesheet's <link> entirely and emptied
   inline <style> blocks. That option is off now, so they belong here where
   they cache with everything else.

   Logical properties throughout, so the strip mirrors itself on the Arabic
   side without a second rule set.
   ========================================================================== */

.dec-trust-bar {
	background: var(--wd-primary-color, #3b5ea3);
	color: #fff;
	font-size: clamp(0.72rem, 0.5rem + 0.5vw, 0.85rem);
	line-height: 1.4;
}

.dec-trust-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35em 0.75em;
	max-width: 1400px;
	margin-inline: auto;
	padding-block: 0.5em;
	padding-inline: 1em;
	text-align: center;
}

.dec-trust-bar__item a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dec-trust-bar__item a:hover {
	text-decoration: none;
}

.dec-trust-bar__dot {
	opacity: 0.55;
}

/* ==========================================================================
   Home sections: category grid + editors' shelf
   --------------------------------------------------------------------------
   Rendered by inc/dec-home-sections.php. Both replace blocks that were
   spending ~1,100px on a single book; the grid below carries a category every
   ~40px and the shelf six books in the space one feature used.

   Colours come from the design system's blue ramp (tokens/colors.css).
   Logical properties throughout so both mirror on the Arabic side.
   ========================================================================== */

.dec-cats,
.dec-shelf {
	max-width: 1400px;
	margin-inline: auto;
	padding-block: clamp(2rem, 1rem + 3vw, 3.5rem);
	padding-inline: clamp(1rem, 0.5rem + 2vw, 2rem);
}

.dec-cats__head,
.dec-shelf__head {
	margin-block-end: 1.5rem;
}

.dec-cats__title,
.dec-shelf__title-main {
	margin: 0 0 0.25em;
	font-size: clamp(1.35rem, 1rem + 1.2vw, 1.75rem);
	line-height: 1.2;
}

.dec-cats__note,
.dec-shelf__note {
	margin: 0;
	color: #6b6b6b;
	font-size: 0.95rem;
}

/* --- Category grid: dense, no cards. Rules instead of boxes. --- */
.dec-cats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid #dcdfe5;
}

.dec-cats__item {
	border-block-end: 1px solid #dcdfe5;
}

.dec-cats__item a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.85rem;
	padding-inline: 0.25rem;
	color: inherit;
	text-decoration: none;
	transition: color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.dec-cats__item a:hover .dec-cats__name {
	color: #35528f;
}

.dec-cats__name {
	font-weight: 500;
}

.dec-cats__count {
	color: #6b6b6b;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

/* --- Editors' shelf ---
   auto-fill kept minting empty tracks: three picks in a ~1300px row left the
   right 40% of the band blank. auto-fit + a capped track + centring lets the
   three cards sit balanced in the middle at any width, and phones get a
   two-up grid instead of one lonely 208px column. */
.dec-shelf__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 19rem));
	justify-content: center;
	gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 600px) {
	.dec-shelf__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem 1.25rem;
	}
}

.dec-shelf__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.dec-shelf__cover {
	display: block;
	margin-block-end: 0.75rem;
}

.dec-shelf__cover img {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: contain;
	background: #f6f2e9;
}

.dec-shelf__title {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.dec-shelf__author,
.dec-shelf__price {
	display: block;
	font-size: 0.9rem;
	color: #6b6b6b;
}

.dec-shelf__price {
	color: #35528f;
	font-weight: 600;
}

/* The note is what makes this a shelf rather than another product rail. */
.dec-shelf__why {
	margin: 0.6rem 0 0;
	padding-block-start: 0.6rem;
	border-block-start: 1px solid #dcdfe5;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #3a4048;
}

/* ==========================================================================
   Home page: tonal rhythm
   --------------------------------------------------------------------------
   Every one of the 14 top-level blocks rendered on rgba(0,0,0,0): the whole
   page was one white column, so nothing grouped and nothing anchored.

   The fix is deliberately not a repaint. Antoine's homepage is also mostly
   white; its colour comes from 53 cover images in 6,789px (one every ~128px)
   plus two flat tones. So this adds four tinted zones and leaves the rest
   white, letting the covers carry the colour.

   Surfaces are the design system's own (tokens/colors.css):
     ink-050  #f7f8fa  quiet grouping tint
     blue-100 #e4eaf5  soft accent, for the quote
     blue-800 #22345a  the one deep anchor. White on it = 12.3:1.

   Blocks are targeted by their stable WoodMart blockId class rather than
   nth-child, so re-ordering the page in the editor cannot silently repaint
   the wrong section.
   ========================================================================== */

:root {
	--dec-surface-tint: #f7f8fa;
	--dec-surface-soft: #e4eaf5;
	--dec-surface-deep: #22345a;
	--dec-on-deep: #ffffff;
}

/* --- Bands must reach the page edge.
       Painting background on these blocks tinted .entry-content, which is
       1192px inside a 1280px viewport, so each band rendered as a floating
       rectangle with 44px white gutters instead of a band. box-shadow with a
       large spread paints past the container without touching layout, and the
       clip-path stops it bleeding vertically into the neighbouring section.
       Neither affects document width, so no horizontal scrollbar. --- */
.home .wd-7daf838e,
.home .dec-cats,
.home .wd-cab2cc70,
.home .wd-67932f57,
.home .wd-0f34bee7 {
	background: var(--dec-band);
	box-shadow: 0 0 0 100vmax var(--dec-band);
	clip-path: inset(0 -100vmax);
}

/* --- Zone 1: browse. Category tiles + the full grid read as one band. --- */
.home .wd-7daf838e,
.home .dec-cats {
	--dec-band: var(--dec-surface-tint);
}

.home .wd-7daf838e {
	padding-block-start: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.home .dec-cats {
	padding-block-start: 0;
}

/* --- Zone 2: the services row, the page's anchor. --- */
.home .wd-cab2cc70 {
	--dec-band: var(--dec-surface-deep);
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	padding-inline: clamp(1rem, 0.5rem + 2vw, 2rem);
}

.home .wd-cab2cc70 :is(h1, h2, h3, h4, p, span, li, div) {
	color: var(--dec-on-deep);
}

.home .wd-cab2cc70 a {
	color: var(--dec-on-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.home .wd-cab2cc70 a:hover {
	text-decoration: none;
}

/* --- Zone 3: the quote, on the soft accent. --- */
.home .wd-67932f57 {
	--dec-band: var(--dec-surface-soft);
}

/* --- Zone 4: the publishing CTA.
       Its first column is empty: no text, no image, 377px wide and 1191px
       tall. That was invisible while the row was white on white; tinting the
       band turned it into a large blank panel that reads as a broken layout.
       Collapsing it lets the copy and the covers fill the row. --- */
.home .wd-0f34bee7 {
	--dec-band: var(--dec-surface-tint);
}

.home .wd-0f34bee7 > .wp-block-wd-column:first-child:empty,
.home .wd-0f34bee7 > .wp-block-wd-column:first-child:not(:has(img)):not(:has(p)):not(:has(h2)) {
	display: none;
}

/* With the empty column gone the remaining two kept their original fixed
   widths, so the copy and covers occupied 665px of a 1192px row and the band
   still read as half-empty. Let them share the freed space, weighted so the
   text column takes more of it than the covers. */
.home .wd-0f34bee7 > .wp-block-wd-column:nth-child(2) {
	flex: 1 1 auto;
	max-width: none;
}

.home .wd-0f34bee7 > .wp-block-wd-column:nth-child(3) {
	flex: 0 1 38%;
	max-width: 38%;
}

/* The two covers were stacked, so filling the row widened them to 453px each
   and pushed the section to 1,426px tall: denser horizontally, worse
   vertically. Side by side keeps the fill and halves the height. */
.home .wd-0f34bee7 > .wp-block-wd-column:nth-child(3) > * {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	align-items: flex-start;
}

.home .wd-0f34bee7 > .wp-block-wd-column:nth-child(3) img {
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
}

/* --- Two blocks render 59px tall carrying ~15 characters and no links.
       They are spacing accidents, not sections.
       The two paragraphs are the orphaned "JUST ADDED / Recently added"
       intro of a New Arrivals section whose product grid no longer exists:
       it rendered as an eyebrow, a sub-line and then the footer. The "Just
       in" rail higher up already covers new arrivals, so the whole dead
       tail goes. --- */
.home .wd-56636b1e,
.home .wd-8e14e3ce,
.home .wd-666e9896,
.home .wd-fe339225 {
	display: none;
}

/* ==========================================================================
   Category families + product rail
   --------------------------------------------------------------------------
   Fourteen categories, five colours. The consensus in the literature is 3-5
   hues before a palette turns to noise, and this design system already scopes
   the spine accents to "small doses only", so categories group into families
   on hues the brand owns rather than each getting its own.

   The mark is a dot, never a leading border: a coloured inline-start stripe on
   a list item is a pattern worth avoiding, and the dot doubles as a legend.
   Colour is never the only signal, the category name always carries it.

   The -600/-700 steps are used because the spine primaries fail as marks:
   yellow-500 scores 1.35 against white. These all clear 3:1, the threshold
   for a non-text UI element.
   ========================================================================== */

.dec-cats__item a::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--dec-fam, #3b5ea3);
	/* Nudge off the text baseline so it reads as a marker, not punctuation. */
	transform: translateY(-0.1em);
}

.dec-fam-fiction   { --dec-fam: #3b5ea3; } /* blue-500   */
.dec-fam-young     { --dec-fam: #c01d16; } /* red-600    */
.dec-fam-knowledge { --dec-fam: #008541; } /* green-600  */
.dec-fam-study     { --dec-fam: #8a7c00; } /* yellow-700 */
.dec-fam-arabic    { --dec-fam: #22345a; } /* blue-800   */

/* The name should take the free space so the count stays pinned to the end. */
.dec-cats__name {
	flex: 1 1 auto;
}

/* --- Product rail --- */
.dec-rail {
	max-width: 1400px;
	margin-inline: auto;
	padding-block: clamp(2rem, 1rem + 3vw, 3.5rem);
	padding-inline: clamp(1rem, 0.5rem + 2vw, 2rem);
}

.dec-rail__head {
	margin-block-end: 1.25rem;
}

.dec-rail__heading {
	margin: 0 0 0.25em;
	font-size: clamp(1.35rem, 1rem + 1.2vw, 1.75rem);
	line-height: 1.2;
}

.dec-rail__note {
	margin: 0;
	color: #6b6b6b;
	font-size: 0.95rem;
}

.dec-rail__grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(9rem, 1fr);
	gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
	margin: 0;
	padding-block-end: 0.5rem;
	padding-inline: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
}

.dec-rail__item {
	scroll-snap-align: start;
}

.dec-rail__item a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.dec-rail__cover img {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: contain;
	background: #f6f2e9;
}

.dec-rail__title {
	display: block;
	margin-block-start: 0.6rem;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
}

.dec-rail__price {
	display: block;
	color: #35528f;
	font-weight: 600;
	font-size: 0.9rem;
}

/* The two duplicate carousels that used to be hidden here have been deleted
   from the page content itself, so the rules are gone with them. */

/* ==========================================================================
   Arabic typography
   --------------------------------------------------------------------------
   The Arabic side had no typeface at all: body font resolved to
   "Roboto, Arial, Helvetica", none of which carry Arabic glyphs, so every
   Arabic character fell through to whatever the visitor's OS happened to
   pick. Half the storefront was rendering in an unspecified system font.

   IBM Plex Sans Arabic is the design system's choice. Arabic also needs more
   room than Latin at the same nominal size: the script has taller ascenders,
   deeper descenders and no uppercase, so it reads smaller and sets tighter.
   Hence the modest size bump and the relaxed leading (1.65, the design
   system's --leading-relaxed).
   ========================================================================== */

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
[dir="rtl"] body {
	font-family: "IBM Plex Sans Arabic", "Figtree", system-ui, sans-serif;
}

html[lang="ar"] :is(h1, h2, h3, h4, h5, h6),
[dir="rtl"] :is(h1, h2, h3, h4, h5, h6) {
	font-family: "IBM Plex Sans Arabic", "Figtree", system-ui, sans-serif;
	line-height: 1.35;
}

html[lang="ar"] body,
[dir="rtl"] body {
	font-size: 1.0625rem; /* 17px against the Latin 16, so the two read level */
	line-height: 1.65;
}

html[lang="ar"] :is(p, li, .dec-cats__name, .dec-shelf__why),
[dir="rtl"] :is(p, li, .dec-cats__name, .dec-shelf__why) {
	line-height: 1.65;
}

/* Latin runs inside Arabic text (titles, prices, ISBNs) keep the Latin face,
   which has the matching geometric skeleton and better Latin fit. */
html[lang="ar"] bdi,
[dir="rtl"] bdi {
	font-family: "Figtree", system-ui, sans-serif;
}

/* ==========================================================================
   The two single-book features
   --------------------------------------------------------------------------
   1,160px and 1,106px, each for a single cover and about 150 characters. The
   covers were rendering at 600x960 and 600x906, which is what set the height:
   the sections were tall because the image was, not because the layout needed
   it. Capping the cover collapses both to roughly a third.
   ========================================================================== */

.home .wd-6ad13a4d img,
.home .wd-36909510 img {
	width: auto;
	max-width: 100%;
	max-height: 420px;
	height: auto;
	object-fit: contain;
}

.home .wd-6ad13a4d .wp-block-wd-column,
.home .wd-36909510 .wp-block-wd-column {
	justify-content: center;
}

/* --- Hero: the cover drove a 742px block. Capping it keeps the hero
       generous without letting one image set the fold. --- */
.home .wd-78d7ab0f img {
	max-height: 460px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ==========================================================================
   The spine rule
   --------------------------------------------------------------------------
   Straight from the design system's tokens/base.css: a 4px bar in the three
   book-spine colours from the logo artwork (yellow, green, red). It is the
   one piece of brand furniture the system ships, and it does the job a plain
   divider would otherwise do while actually saying Dar El Chimal.

   direction:ltr is deliberate and comes from the system: the spine order is
   a fixed picture of the logo, not reading order, so it must not mirror on
   the Arabic side.

   Used here to close the deep anchor band, which is the one edge on the page
   that benefits from a hard stop.
   ========================================================================== */

.home .wd-cab2cc70 {
	position: relative;
}

.home .wd-cab2cc70::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 4px;
	direction: ltr;
	background: linear-gradient(
		to right,
		var(--dec-spine-yellow) 0 33.333%,
		var(--dec-spine-green) 33.333% 66.666%,
		var(--dec-spine-red) 66.666% 100%
	);
}

:root {
	--dec-spine-yellow: #f6e01c;
	--dec-spine-green: #00a24f;
	--dec-spine-red: #e62b23;
}

/* ==========================================================================
   Breathing room + fill (2026-07-29)
   --------------------------------------------------------------------------
   Two complaints, one cause each way:
   - text sat ~15px from the viewport edge below 1366px, because WoodMart's
     .container keeps a fixed 15px gutter at every width;
   - several bands were half-empty, because fixed-width columns kept their
     desktop widths after their siblings collapsed or never existed.
   The gutter becomes fluid, and the half-empty bands either fill or shrink.
   Logical properties throughout, so every rule mirrors on the Arabic side.
   ========================================================================== */

/* --- Fluid page gutter. 15px was the floor everywhere; now the content
       keeps clamp(20px..36px) of air from the glass at laptop and phone
       widths. Above 1366px the container is narrower than the viewport
       anyway, so the rule stops there and changes nothing on big screens. */
@media (max-width: 1366px) {
	body .container {
		padding-inline: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
	}
}

/* Custom full-bleed sections keep the same floor so all left edges align. */
.dec-cats,
.dec-shelf,
.dec-rail,
.dec-trust-bar__inner {
	padding-inline: clamp(1.25rem, 0.75rem + 2vw, 2rem);
}

/* --- Tablet: the four category tiles stacked into one narrow left-hugging
       column with a void on the right. Two-up keeps them scannable and
       fills the band. --- */
@media (min-width: 577px) and (max-width: 1024px) {
	.home .wd-7daf838e {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.75rem 2.5rem;
	}

	.home .wd-7daf838e > .wp-block-wd-column {
		width: auto;
		max-width: none;
		flex: none;
	}
}

/* --- The two single-book features again: images are already capped at
       420px, but the first one still carries 140px/100px of built-in
       padding from its block CSS (.wd.wd doubles the class for
       specificity, and that sheet loads after this one, hence the body
       prefix + doubled class here). --- */
body.home .wd-7cbd0f38.wd-7cbd0f38 {
	padding-block-start: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
	padding-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* --- Services band: each card is a WoodMart cover block with no image
       set, so it painted the default #f0f0f0 placeholder — three grey
       slabs on the navy anchor that read as broken images. The empty
       image layer goes; the card becomes a frosted navy tile and its
       height comes from its own text instead of the placeholder's 492px. */
.home .wd-cab2cc70 .wp-block-wd-cover {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	overflow: hidden;
}

.home .wd-cab2cc70 .wp-block-wd-cover > .wd-block-cover-img:not(:has(img)) {
	display: none;
}

.home .wd-cab2cc70 .wp-block-wd-cover .wp-block-wd-container {
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
	/* The block CSS gives this inner container a translucent white slab and
	   a 452px min-height — the actual grey rectangle, and white-on-white
	   text on the navy band. The tile above is the surface now. */
	background: transparent;
	min-height: 0;
}

/* ==========================================================================
   Homepage hero — bento
   --------------------------------------------------------------------------
   Replaces the single-slide WoodMart slider. Six tiles on a 12-column grid:
   the lede owns 7 columns and the Back to School portal owns 5, so the eye
   reads "who this is" and then "the thing to click" without a carousel.

   Only one tile is colour-filled (Back to School). That is the whole
   hierarchy mechanism — there are no shadows, gradients or glows here.

   Everything is authored with logical properties, so the Arabic page needs no
   mirrored rules: `dir=rtl` flips the grid, the text and the arrows on its own.
   ========================================================================== */

.dec-hero {
	--dec-hero-field: #f6f2e9;
	--dec-hero-tile: #ffffff;
	--dec-hero-line: #e6ded0;
	--dec-hero-ink: #1d2433;
	--dec-hero-muted: #6b7280;
	--dec-hero-deep: #22345a;
	--dec-hero-accent: #3b5ea3;
	--dec-hero-hi: #fbbc34;

	margin-block: 0 clamp(2.5rem, 2rem + 2vw, 3.75rem);
	padding-block: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem);
	padding-inline: clamp(1rem, 0.5rem + 2vw, 2rem);
	background: var(--dec-hero-field);
}

.dec-hero__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(0.75rem, 0.5rem + 0.9vw, 1.25rem);
	max-width: 1192px;
	margin-inline: auto;
}

.dec-hero__tile {
	background: var(--dec-hero-tile);
	border: 1px solid var(--dec-hero-line);
	border-radius: 14px;
	padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
	margin: 0;
}

/* -- A: lede --------------------------------------------------------------- */

.dec-hero__lede {
	grid-column: span 7;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.85rem;
}

.dec-hero__badge {
	margin: 0;
	font-size: clamp(0.7rem, 0.66rem + 0.15vw, 0.78rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dec-hero-accent);
}

.dec-hero__h1 {
	margin: 0;
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
	line-height: 1.08;
	font-weight: 500;
	color: var(--dec-hero-ink);
	text-wrap: balance;
}

.dec-hero__sub {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--dec-hero-muted);
}

.dec-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.35rem 0 0;
}

.dec-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: 48px;
	padding-inline: 1.6rem;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.dec-hero__btn--fill {
	background: var(--dec-hero-accent);
	color: #fff;
	border: 1px solid var(--dec-hero-accent);
}

.dec-hero__btn--fill:hover,
.dec-hero__btn--fill:focus-visible {
	background: var(--dec-hero-deep);
	border-color: var(--dec-hero-deep);
	color: #fff;
}

.dec-hero__btn--line {
	background: transparent;
	color: var(--dec-hero-deep);
	border: 1px solid #cfd6e2;
}

.dec-hero__btn--line:hover,
.dec-hero__btn--line:focus-visible {
	border-color: var(--dec-hero-deep);
	color: var(--dec-hero-deep);
}

.dec-hero__terms {
	margin: 0.25rem 0 0;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--dec-hero-muted);
}

/* -- B: Back to School ----------------------------------------------------- */

.dec-hero__bts {
	grid-column: span 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	background: var(--dec-hero-deep);
	border-color: var(--dec-hero-deep);
	color: #fff;
	text-decoration: none;
}

.dec-hero__chip {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.dec-hero__bts-head {
	font-size: clamp(1.35rem, 1rem + 1.1vw, 1.85rem);
	line-height: 1.2;
	font-weight: 500;
	text-wrap: balance;
}

.dec-hero__bts-body {
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.dec-hero__btn--cream {
	/* Pushed to the tile's bottom edge so the CTA lands on the same baseline
	   whatever the length of the copy above it. */
	margin-block-start: auto;
	background: var(--dec-hero-hi);
	color: #21324f;
	border: 1px solid var(--dec-hero-hi);
}

.dec-hero__bts:hover .dec-hero__btn--cream,
.dec-hero__bts:focus-visible .dec-hero__btn--cream {
	background: #ffd06b;
	border-color: #ffd06b;
}

.dec-hero__bts-host {
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.55);
}

/* -- D: cover strip -------------------------------------------------------- */

.dec-hero__covers {
	grid-column: span 6;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.9rem;
	padding-block: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
}

.dec-hero__strip {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dec-hero__strip li {
	margin: 0;
}

.dec-hero__strip img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--dec-cover-ratio, 2 / 3);
	object-fit: contain;
	background: var(--dec-cover-matte, #f6f2e9);
	border-radius: 3px;
}

.dec-hero__strip-link,
.dec-hero__cats a {
	color: var(--dec-hero-accent);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.dec-hero__strip-link:hover,
.dec-hero__cats a:hover {
	text-decoration: underline;
}

/* -- C: weekly ------------------------------------------------------------- */

.dec-hero__weekly {
	grid-column: span 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.35rem;
}

.dec-hero__weekly-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--dec-hero-accent);
}

.dec-hero__weekly-figure {
	font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.4rem);
	line-height: 1.25;
	font-weight: 600;
	color: var(--dec-hero-ink);
}

.dec-hero__weekly-note {
	font-size: 0.85rem;
	color: var(--dec-hero-muted);
}

/* -- E: categories --------------------------------------------------------- */

.dec-hero__cats {
	grid-column: span 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
}

.dec-hero__cats-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--dec-hero-muted);
}

.dec-hero__cats ul {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dec-hero__cats li {
	margin: 0;
}

/* -- F: since -------------------------------------------------------------- */

/* A full-width line rather than a sixth card: as a 2-column tile it was a
   mostly-empty box, and it stretched row 2 to the height of its wrapped text. */
.dec-hero__since {
	grid-column: 1 / -1;
	margin: 0.25rem 0 0;
	text-align: center;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--dec-hero-muted);
}


/* The forward arrow is a glyph, so it keeps pointing right when the page flips
   to RTL and ends up pointing back at the text it follows. Mirrored here rather
   than swapping the character, so the markup stays one string per language. */
.dec-hero [aria-hidden="true"] {
	display: inline-block;
}

[dir="rtl"] .dec-hero [aria-hidden="true"] {
	transform: scaleX(-1);
}

/* -- Focus ----------------------------------------------------------------- */

.dec-hero a:focus-visible {
	outline: 2px solid var(--dec-hero-accent);
	outline-offset: 3px;
}

.dec-hero__bts:focus-visible {
	outline: 2px solid var(--dec-hero-hi);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.dec-hero * {
		transition: none !important;
	}
}

/* -- Tablet ---------------------------------------------------------------- */

@media (max-width: 1023px) {
	.dec-hero__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.dec-hero__lede,
	.dec-hero__bts,
	.dec-hero__covers {
		grid-column: span 6;
	}

	.dec-hero__weekly {
		grid-column: span 3;
	}

	.dec-hero__cats {
		grid-column: span 3;
	}
}

/* -- Mobile ---------------------------------------------------------------- */

@media (max-width: 640px) {
	.dec-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.dec-hero__lede,
	.dec-hero__bts,
	.dec-hero__covers,
	.dec-hero__weekly,
	.dec-hero__cats {
		grid-column: span 1;
	}

	.dec-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.dec-hero__btn {
		width: 100%;
	}

	/* Four covers instead of six: at 390px, six 2:3 frames are 48px wide and
	   read as a barcode rather than as books. */
	.dec-hero__strip {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.dec-hero__cats ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.4rem 1rem;
	}

	.dec-hero__since {
		text-align: center;
		justify-content: center;
	}
}

/* ==========================================================================
   Cover-frame follow-ups
   ========================================================================== */

/* The rail's cover wrapper is an inline span, so its own box is a 19px line
   box while the image inside it is 216px tall. The image carries the 2:3
   frame, so nothing shifts — but the wrapper should still be a block, or any
   future rule that measures it (a skeleton, a badge, a hover overlay) will be
   working against a box that is not the cover. */
.dec-rail__cover {
	display: block;
}

/* The quote row's image is lazy and its wrapper reserves no space, so the
   left half of a 496px-wide row is empty until the image arrives. Hold the
   frame so the row is composed from first paint. */
/* Addressed by content, not by the generated wd-<hash>, which differs between
   the English and Arabic copies of the page. */
.home .entry-content > .wp-block-wd-row .wp-block-wd-image {
	max-width: 300px;
	margin-inline: auto;
}

/* No forced 2:3 here: this one is a decorative square-ish plate, and a contain
   frame gave it an 85px band of matte top and bottom. Its own ratio is right. */
.home .entry-content > .wp-block-wd-row .wp-block-wd-image img {
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* The rails overflow horizontally with no sign that they do. A fade on the
   inline-end edge says "there is more", and reverses itself under RTL. */
.dec-rail__grid {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);
}

[dir="rtl"] .dec-rail__grid {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent 100%);
	mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent 100%);
}

/* ==========================================================================
   Homepage — one surface language
   --------------------------------------------------------------------------
   The hero is a bento of white tiles on a warm paper field. Below it the page
   was a stack of blocks that each invented their own surface: a hairline-
   divided text row, a full-bleed navy band, a lavender 50/50, two bare product
   rails, two unstyled feature rows and a black promo. Nine sections, six
   background systems, two heading styles, three button styles.

   These rules give every section the hero's vocabulary — paper field, white
   tile, 14px radius, one hairline, one heading style, one button — without
   rebuilding the blocks.

   Sections are addressed as the direct children of .entry-content rather than
   by their generated wd-<hash> classes, because those hashes differ between the
   English and Arabic copies of the same page and would need two stylesheets.
   Everything is scoped to .home, so inner pages are untouched.
   ========================================================================== */

.home {
	--dec-u-field: #f6f2e9;
	--dec-u-tile: #ffffff;
	--dec-u-line: #e6ded0;
	--dec-u-ink: #1d2433;
	--dec-u-muted: #6b7280;
	--dec-u-deep: #22345a;
	--dec-u-accent: #3b5ea3;
	--dec-u-radius: 14px;
	--dec-u-pad: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
	--dec-u-gap: clamp(0.75rem, 0.5rem + 0.9vw, 1.25rem);
	--dec-u-rhythm: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}

/* The page field. Every section sits on paper, so a tile reads as a tile and
   the hero stops being the one styled thing on the page. */
.home .site-content,
.home .main-page-wrapper,
.home .entry-content {
	background: var(--dec-u-field);
}

/* -- Every section is a tile ----------------------------------------------- */

.home .entry-content > * {
	background: var(--dec-u-tile);
	border: 1px solid var(--dec-u-line);
	border-radius: var(--dec-u-radius);
	padding: var(--dec-u-pad);
	margin-block: 0 var(--dec-u-rhythm);
	/* Several of these shipped as full-bleed bands painted with a 100vmax
	   box-shadow. That shadow escapes any radius, so it has to go. */
	box-shadow: none;
	overflow: hidden;
}

/* The hero brings its own field and its own tiles. */
.home .entry-content > .dec-hero {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	overflow: visible;
}

/* The category cards are tiles in their own right; the group is not. */
.home .entry-content > .dec-catcards {
	background: transparent;
	border: 0;
	padding: 0;
	overflow: visible;
}

/* The two coloured sections keep their colour, but as tiles. */
.home .entry-content > .wp-block-wd-row:has(.wp-block-wd-cover) {
	background: var(--dec-u-deep);
}

/* -- "From our shelves": eyebrow + subtitle + tabs are one card ------------- */

/* Three consecutive blocks that are really one section. Stitched into a single
   tile by dropping the borders and radii where they meet. */
.home .entry-content > .wp-block-wd-paragraph {
	border-block-end: 0;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
	padding-block: 0;
	margin-block-end: 0;
	text-align: center;
}

.home .entry-content > .wp-block-wd-paragraph:first-of-type {
	padding-block-start: var(--dec-u-pad);
}

.home .entry-content > .wp-block-wd-paragraph + .wp-block-wd-paragraph,
.home .entry-content > .wp-block-wd-paragraph + .wp-block-wd-products-tabs {
	border-block-start: 0;
	border-start-start-radius: 0;
	border-start-end-radius: 0;
}

/* -- One heading style ----------------------------------------------------- */

/* "FROM OUR SHELVES" was grey sans caps while every neighbouring heading was
   serif sentence case. The eyebrow keeps its caps, but in the accent colour
   the rest of the page uses for eyebrows. */
.home .entry-content > .wp-block-wd-paragraph:first-of-type {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--dec-u-accent);
}

.home .dec-cats__title,
.home .dec-shelf__heading,
.home .dec-rail__heading {
	color: var(--dec-u-ink);
}

/* -- One button ------------------------------------------------------------ */

/* The two feature rows shipped black pills, the promo an underlined link and
   the hero a blue pill. One shape, one fill, one outline. */
/* The class sits on the <a> itself, not on a wrapper. WoodMart also paints the
   fill through .btn-color-black, so the colour has to be overridden by name
   rather than by resetting the base class. */
.home .entry-content a.wp-block-wd-button,
.home .entry-content .wp-block-wd-button > a {
	min-height: 44px;
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.home .entry-content a.wp-block-wd-button.btn-color-black,
.home .entry-content a.wp-block-wd-button.btn-style-default {
	background-color: var(--dec-u-accent);
	border-color: var(--dec-u-accent);
	color: #fff;
}

.home .entry-content a.wp-block-wd-button.btn-color-black:hover,
.home .entry-content a.wp-block-wd-button.btn-style-default:hover {
	background-color: var(--dec-u-deep);
	border-color: var(--dec-u-deep);
	color: #fff;
}

.home .entry-content a.wp-block-wd-button.btn-style-bordered {
	border-color: #cfd6e2;
	color: var(--dec-u-deep);
}

.home .entry-content a.wp-block-wd-button.btn-style-bordered:hover {
	border-color: var(--dec-u-deep);
	color: var(--dec-u-deep);
}

/* -- Category cards -------------------------------------------------------- */

.dec-catcards__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--dec-u-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dec-catcard {
	margin: 0;
}

.dec-catcard__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--dec-u-tile);
	border: 1px solid var(--dec-u-line);
	border-radius: var(--dec-u-radius);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.dec-catcard__link:hover,
.dec-catcard__link:focus-visible {
	border-color: var(--dec-u-accent);
	transform: translateY(-2px);
}

.dec-catcard__media {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--dec-u-field);
}

.dec-catcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dec-catcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.3rem;
	padding: clamp(0.9rem, 0.7rem + 0.6vw, 1.25rem);
}

.dec-catcard__name {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--dec-u-ink);
}

.dec-catcard__count {
	font-size: 0.85rem;
	color: var(--dec-u-muted);
}

.dec-catcard__cta {
	margin-block-start: auto;
	padding-block-start: 0.5rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--dec-u-accent);
}

.dec-catcard__link:hover .dec-catcard__cta {
	text-decoration: underline;
}

[dir="rtl"] .dec-catcard__cta [aria-hidden="true"] {
	display: inline-block;
	transform: scaleX(-1);
}

/* -- Category list: give every row its shelf plate ------------------------- */

.home .dec-cats__item > a {
	align-items: center;
	gap: 0.7rem;
}

.dec-cats__thumb {
	flex: 0 0 auto;
	display: block;
	width: 52px;
	aspect-ratio: 3 / 2;
	border-radius: 4px;
	background: var(--dec-u-field);
	overflow: hidden;
}

.dec-cats__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -- Rails inside a padded tile -------------------------------------------- */

.home .dec-rail__grid {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
}

[dir="rtl"] .home .dec-rail__grid {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent 100%);
}

/* -- The three editorial cards --------------------------------------------- */

/* They sat at different heights because nothing stretched them. */
.home .entry-content > .wp-block-wd-row > .wp-block-wd-column {
	display: flex;
	align-items: stretch;
}

.home .entry-content > .wp-block-wd-row > .wp-block-wd-column > * {
	width: 100%;
}

/* The middle card ran 51px short of its neighbours because the card and the
   container inside it both sized to their own text. */
.home .entry-content > .wp-block-wd-row .wp-block-wd-cover,
.home .entry-content > .wp-block-wd-row .wp-block-wd-cover > .wp-block-wd-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* -- Responsive ------------------------------------------------------------ */

@media (max-width: 1023px) {
	.dec-catcards__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.dec-catcards__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.dec-cats__thumb {
		width: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dec-catcard__link {
		transition: none;
	}

	.dec-catcard__link:hover {
		transform: none;
	}
}

/* ==========================================================================
   Typography — two families, not three
   --------------------------------------------------------------------------
   The page was running Playfair Display for headings and Roboto for body, plus
   a third serif, Lora, on product titles alone. Three families, and the odd one
   out landed on the most repeated element on the page: every book title in the
   grid and both rails.

   One display serif, one text sans. Book titles are headings, so they take the
   display serif wherever they appear — the homepage and the shop should not
   disagree about what a book title looks like.
   ========================================================================== */

:root {
	--dec-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--dec-font-text: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Book titles: the one place Lora was still being used. */
.wd-product .wd-entities-title,
.wd-product .wd-entities-title a,
.dec-shelf__title,
.dec-rail__title,
.product_list_widget .wd-entities-title {
	font-family: var(--dec-font-display);
}

/* Headings, on the homepage, in one voice. */
.home .dec-hero__h1,
.home .dec-hero__bts-head,
.home .dec-catcard__name,
.home .dec-cats__title,
.home .dec-shelf__heading,
.home .dec-rail__heading,
.home .entry-content .wp-block-wd-title {
	font-family: var(--dec-font-display);
}

/* Everything that is not a heading. */
.home .dec-hero__badge,
.home .dec-hero__sub,
.home .dec-hero__terms,
.home .dec-hero__bts-body,
.home .dec-hero__chip,
.home .dec-hero__bts-host,
.home .dec-hero__btn,
.home .dec-hero__weekly-label,
.home .dec-hero__weekly-note,
.home .dec-hero__cats-label,
.home .dec-hero__since,
.home .dec-catcard__count,
.home .dec-catcard__cta,
.home .dec-cats__name,
.home .dec-cats__count,
.home .dec-cats__note,
.home .dec-shelf__note,
.home .dec-rail__note,
.home .dec-rail__price,
.home .entry-content .wp-block-wd-paragraph,
.home .entry-content .wp-block-wd-button > a {
	font-family: var(--dec-font-text);
}

/* The weekly figure is a number, not a heading: it reads better in the sans at
   this size, and it sits next to two other sans lines in the same tile. */
.home .dec-hero__weekly-figure {
	font-family: var(--dec-font-text);
}

/* ==========================================================================
   Alignment — one column edge
   --------------------------------------------------------------------------
   Every section on the page sat in the 1192px content column except the two
   "World bestsellers" feature rows, which shipped as stretched sections and ran
   the full 1440px viewport width. Two rows breaking the column edge is what
   made the stack read as unaligned.
   ========================================================================== */

.home .entry-content > .wp-block-wd-section {
	width: auto;
	max-width: none;
	margin-inline: 0;
	/* WoodMart stretches these with negative inline margins and a 100vw width.
	   Both have to be unset or the tile keeps escaping the column. */
	inset-inline: auto;
	left: auto;
	right: auto;
	transform: none;
}

.home .entry-content > .wp-block-wd-section > .wd-section-inner,
.home .entry-content > .wp-block-wd-section > .container,
.home .entry-content > .wp-block-wd-section > .wp-block-wd-row {
	max-width: none;
	width: 100%;
	padding-inline: 0;
	margin-inline: 0;
}

/* ==========================================================================
   Arabic
   --------------------------------------------------------------------------
   Playfair Display and Roboto carry no Arabic glyphs. Naming them alone left
   every Arabic string falling through to whatever the visitor's OS happens to
   pick — Geeza Pro on a Mac, Segoe UI on Windows, Noto on Android — so the
   Arabic homepage rendered in a different face on every device and none of them
   was chosen.

   IBM Plex Sans Arabic is already enqueued and loaded on this site, so naming
   it costs nothing and makes the Arabic side deterministic. It is appended to
   both stacks rather than replacing them, so a mixed string (an English book
   title inside an Arabic sentence) keeps the Latin face for its Latin run.
   ========================================================================== */

:root {
	--dec-font-arabic: "Cairo", "IBM Plex Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", sans-serif;
	--dec-font-display: "Playfair Display", var(--dec-font-arabic), Georgia, serif;
	--dec-font-text: "Roboto", var(--dec-font-arabic), -apple-system, Arial, sans-serif;
}

/* Arabic headings do not carry the Latin display serif at all: there is no
   Arabic in Playfair, so an Arabic h1 was silently a fallback face. Give the
   Arabic side one deliberate family and let weight carry the hierarchy. */
[dir="rtl"] .dec-hero__h1,
[dir="rtl"] .dec-hero__bts-head,
[dir="rtl"] .dec-catcard__name,
[dir="rtl"] .dec-cats__title,
[dir="rtl"] .dec-shelf__heading,
[dir="rtl"] .dec-rail__heading,
[dir="rtl"] .entry-content .wp-block-wd-title {
	font-family: var(--dec-font-arabic);
	font-weight: 600;
	letter-spacing: 0;
}

/* Arabic script sits lower and needs more room between lines than Latin. */
[dir="rtl"] .dec-hero__h1 {
	line-height: 1.35;
}

[dir="rtl"] .dec-hero__sub,
[dir="rtl"] .dec-hero__bts-body,
[dir="rtl"] .dec-cats__name,
[dir="rtl"] .dec-rail__title,
[dir="rtl"] .dec-shelf__title {
	line-height: 1.75;
}

/* ==========================================================================
   Category tabs — no JavaScript
   --------------------------------------------------------------------------
   Panels switch on a radio group, so nothing here waits on WP Rocket's delayed
   JS and the tabs are keyboard-operable without any ARIA scaffolding.
   ========================================================================== */

.dec-tabs__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.dec-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 0.6rem + 1.4vw, 2.25rem);
	margin-block-end: clamp(1.25rem, 1rem + 1vw, 2rem);
	border-block-end: 1px solid var(--dec-u-line, #e6ded0);
}

.dec-tabs__label {
	padding-block: 0 0.7rem;
	margin-block-end: -1px;
	border-block-end: 2px solid transparent;
	font-family: var(--dec-font-display);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	color: var(--dec-u-muted, #6b7280);
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease;
}

[dir="rtl"] .dec-tabs__label {
	font-family: var(--dec-font-arabic);
	font-weight: 600;
}

.dec-tabs__label:hover {
	color: var(--dec-u-ink, #1d2433);
}

.dec-tabs__radio:focus-visible + .dec-tabs__nav .dec-tabs__label,
.dec-tabs__radio:nth-of-type(1):focus-visible ~ .dec-tabs__nav .dec-tabs__label:nth-of-type(1),
.dec-tabs__radio:nth-of-type(2):focus-visible ~ .dec-tabs__nav .dec-tabs__label:nth-of-type(2),
.dec-tabs__radio:nth-of-type(3):focus-visible ~ .dec-tabs__nav .dec-tabs__label:nth-of-type(3) {
	outline: 2px solid var(--dec-u-accent, #3b5ea3);
	outline-offset: 3px;
}

.dec-tabs__radio:nth-of-type(1):checked ~ .dec-tabs__nav .dec-tabs__label:nth-of-type(1),
.dec-tabs__radio:nth-of-type(2):checked ~ .dec-tabs__nav .dec-tabs__label:nth-of-type(2),
.dec-tabs__radio:nth-of-type(3):checked ~ .dec-tabs__nav .dec-tabs__label:nth-of-type(3) {
	color: var(--dec-u-ink, #1d2433);
	border-block-end-color: var(--dec-u-accent, #3b5ea3);
}

.dec-tabs__panel {
	display: none;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dec-tabs__radio:nth-of-type(1):checked ~ .dec-tabs__panel--1,
.dec-tabs__radio:nth-of-type(2):checked ~ .dec-tabs__panel--2,
.dec-tabs__radio:nth-of-type(3):checked ~ .dec-tabs__panel--3 {
	display: grid;
}

.dec-tabs__item a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.dec-tabs__cover {
	display: block;
	margin-block-end: 0.7rem;
}

.dec-tabs__cover img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--dec-cover-ratio, 2 / 3);
	object-fit: contain;
	background: var(--dec-cover-matte, #f6f2e9);
	border-radius: 4px;
}

.dec-tabs__title {
	display: block;
	font-family: var(--dec-font-display);
	font-size: 0.95rem;
	line-height: 1.35;
	color: var(--dec-u-ink, #1d2433);
}

[dir="rtl"] .dec-tabs__title {
	font-family: var(--dec-font-arabic);
	line-height: 1.7;
}

.dec-tabs__price {
	display: block;
	margin-block-start: 0.35rem;
	font-family: var(--dec-font-text);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--dec-u-accent, #3b5ea3);
}

@media (max-width: 1023px) {
	.dec-tabs__panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.dec-tabs__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Publisher brand chip
   --------------------------------------------------------------------------
   A wordmark, not the publisher's logo. Twenty-odd corporate marks at
   different aspect ratios, colours and weights would fight each other and the
   page; the same names set in the site's own display face read as part of the
   bookshop. It is text, so it stays sharp at any density, needs no hosted
   asset, and mirrors under RTL without a second rule.
   ========================================================================== */

.dec-pub-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: 0.9rem 1.1rem;
}

.dec-pub {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--dec-u-line, #e6ded0);
	border-radius: 9px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	transition: border-color 0.18s ease;
}

.dec-pub:hover,
.dec-pub:focus-visible {
	border-color: var(--dec-u-accent, #3b5ea3);
}

.dec-pub__mono {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	padding-inline: 0.55rem;
	background: var(--dec-u-deep, #22345a);
	color: #f6f2e9;
	font-family: var(--dec-font-display, Georgia, serif);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
}

.dec-pub__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.1rem;
	padding: 0.4rem 0.75rem;
}

.dec-pub__label {
	font-family: var(--dec-font-text, sans-serif);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--dec-u-muted, #6b7280);
}

.dec-pub__name {
	font-family: var(--dec-font-display, Georgia, serif);
	font-size: 0.98rem;
	line-height: 1.2;
	color: var(--dec-u-ink, #1d2433);
}

/* Arabic has no Latin display serif to fall back on. */
[dir="rtl"] .dec-pub__name,
[dir="rtl"] .dec-pub__mono {
	font-family: var(--dec-font-arabic, sans-serif);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.dec-pub { transition: none; }
}

/* ==========================================================================
   Book details table
   --------------------------------------------------------------------------
   Rendered from the attributes rather than hand-written into each description,
   so the page can no longer contradict itself.
   ========================================================================== */

.dec-details {
	margin-block-start: 2rem;
}

.dec-details__head {
	margin-block: 0 0.6rem;
	font-family: var(--dec-font-display, Georgia, serif);
	font-size: 1.15rem;
	color: var(--dec-u-ink, #1d2433);
}

[dir="rtl"] .dec-details__head {
	font-family: var(--dec-font-arabic, sans-serif);
}

.dec-details__table {
	width: 100%;
	max-width: 32rem;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.dec-details__table th,
.dec-details__table td {
	padding: 0.55rem 0;
	text-align: start;
	vertical-align: top;
	border-block-end: 1px solid var(--dec-u-line, #e6ded0);
}

.dec-details__table th {
	width: 11rem;
	padding-inline-end: 1.2rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--dec-u-muted, #6b7280);
}

.dec-details__table tr:last-child th,
.dec-details__table tr:last-child td {
	border-block-end: 0;
}

@media (max-width: 480px) {
	.dec-details__table th { width: 8rem; white-space: normal; }
}

/* The publisher already appears as the brand chip under the price and as a row
   in the Details table. The product-meta line was a third copy. It ships with
   the same .posted_in class as the category line, so it is identified by the
   brand link it contains rather than by a class of its own. */
.single-product .product_meta .posted_in:has(a[href*="/brand/"]),
.single-product .wd-product-meta .posted_in:has(a[href*="/brand/"]) {
	display: none;
}