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

/* --------------------------------------------------------------------------
   Category carousel

   A white-space:nowrap rule was tried here to force single-line labels. It
   overflowed instead: the cat-design-side layout gives the thumbnail up to
   30% of the tile plus a 15px gap, leaving roughly 100px of text column at
   five across - not enough for "Kitchen Essentials" at any readable size.
   Wrapping is the correct behaviour at this column count; the fix for a
   single line is a shorter label or fewer columns, not CSS.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Product card titles - one line on mobile

   The hover-info card floats the title over the photo, and at 2 columns the
   card is only 175px wide. With the stock 25px insets that left a ~140px text
   box - about 17 characters of Instrument Sans 500 at 16px - so titles broke
   across three and four lines over the photo. Narrower insets plus smaller
   type give the title ~155px, which every product name now clears.

   The sale label is the other half of the problem: it sits in the top-right
   corner and occupies the last 46px of the card, and the theme answers that
   by pushing the title's inset-inline-end out to 60px - leaving ~110px, too
   narrow for any real name. Sizing titles around a badge that comes and goes
   with a sale is the wrong dependency, so instead the labelled card drops the
   whole title block below the badge and keeps the full width.

   Desktop is deliberately untouched: its box is ~285px, roughly 35 characters,
   and every title already fits at the inherited 16px.

   .wd-product is repeated in each selector purely to raise specificity by one
   class. Woodmart enqueues its product-loop parts (wd-product-loop,
   wd-woo-loop-prod-el-base) lazily, so they land *after* this stylesheet no
   matter how late child-style is registered - and the rules being overridden
   here match at equal specificity, where source order decides.
   -------------------------------------------------------------------------- */
@media (max-width: 768.98px) {
	.wd-product.wd-product.wd-hover-info .top-information {
		inset-inline: 10px;
	}

	/* Clear the badge by starting below it (it spans 9px-30px from the card
	   top) rather than by giving up horizontal room to it. */
	.wd-product.wd-product.wd-hover-info.wd-with-labels .top-information {
		top: 40px;
		inset-inline-end: 10px;
	}

	.wd-product.wd-product .wd-entities-title {
		font-size: 13px;
	}
}

/* --------------------------------------------------------------------------
   Product image backdrop

   Every shot is generated one at a time, so each one arrives on its own idea
   of "off-white". _shoot/bin/normalize.py pins them all to #ECE5DC, and these
   rules paint the same colour behind the images so nothing else shows through
   and breaks the match.

   Three places it would: the lazy-load gap before an image paints, the white
   .wd-product-img-hover panel that sits under the second image on hover, and
   the five PNG masters, which Woodmart puts on --wd-main-bgcolor via
   .zoomImg[src$=".png"] - a colour that has nothing to do with the sweep.

   Wallpaper, not a fix: the pixels are corrected at source. If a card here
   ever shows a band of this colour, an image escaped the pipeline.
   -------------------------------------------------------------------------- */
:root {
	--gng-shot-bg: #ECE5DC;
}

.wd-product-thumb,
.wd-product-img-hover,
.woocommerce-product-gallery .woocommerce-product-gallery__image,
.woocommerce-product-gallery .zoomImg[src$=".png"] {
	background-color: var(--gng-shot-bg);
}

/* --------------------------------------------------------------------------
   About Loofah - long-form page

   Two separate problems, fixed together here.

   Layout: the product photography is 928x1152 (4:5 portrait). Dropped into a
   half-width Elementor column at desktop it renders ~700px wide and ~870px
   tall, against a text block of maybe 250px - so the image set the row height,
   the text sat at the top of it under Elementor's default `align-items:
   stretch`, and every row opened a void beside the copy. The structural half
   of that fix lives in the document (align_items: center, 42/58 splits, fixed
   row gaps); this file does the rest.

   Typography: the page inherited Woodmart's defaults, which are tuned for
   product cards, not for reading. Body copy came out #767676 - a washed grey
   that clears WCAG AA by 0.04 and reads as unfinished - card titles were that
   same grey despite being semibold, every heading sat at line-height 1.40
   (far too loose for display sizes), and the sizes in play were 46/36/26/
   18/17/16/15, which is not a scale, just a list. All of that is restated
   below as one system.

   Everything is scoped to the .al-* classes the Elementor documents set, so
   none of it can reach the rest of the site. Those classes started as one
   page's and are now the site's long-form kit: _content/about-loofah.json and
   _content/why-us.json both dress themselves from what follows, so a change
   here lands on both pages - check the other one before shipping a change to
   either.
   -------------------------------------------------------------------------- */
:root {
	/* Ink. Headings near-black, body a touch lighter so long passages do not
	   glare, captions lighter again. Nothing here is below 7:1 on white. */
	--al-ink: #141414;
	--al-body: #3c3c3c;
	--al-muted: #6b6b6b;

	/* Type scale, ratio ~1.26 off a 17px body. */
	--al-display: 54px;
	--al-section: 34px;
	--al-sub: 24px;
	--al-lead: 21px;
	--al-body-size: 17px;
	--al-card-title: 19px;
	--al-card-body: 15px;
	--al-eyebrow: 12px;
}

/* --- headings ------------------------------------------------------------
   Display type needs to be set tight. 1.40 leading and zero tracking is the
   browser's idea of a heading, not a designer's; large sizes need both pulled
   in or the words drift apart and the page reads as unset. */
.al-lede-title .woodmart-title-container {
	font-size: var(--al-display);
	line-height: 1.06;
	letter-spacing: -0.035em;
	color: var(--al-ink);
}

.al-section-title .woodmart-title-container {
	font-size: var(--al-section);
	line-height: 1.15;
	letter-spacing: -0.022em;
	color: var(--al-ink);
}

.al-quiet-title .woodmart-title-container {
	font-size: var(--al-sub);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--al-ink);
}

/* Eyebrow. wd_title renders `subtitle` above the heading, so the kicker is
   native and stays editable in Elementor rather than being a second widget.

   `.elementor-widget` is in the selector only to raise specificity by one
   class. The colour it overrides is `.subtitle-color-default
   .subtitle-style-default` in css/parts/el-subtitle-style.css, which matches
   at (0,2,0) and is enqueued lazily - so it lands after this stylesheet and
   would win a tie on source order. */
.elementor-widget.al-section-title .title-subtitle,
.elementor-widget.al-lede-title .title-subtitle {
	font-size: var(--al-eyebrow);
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--al-muted);
	margin-bottom: 14px;
}

/* --- body ---------------------------------------------------------------- */
.al-copy {
	font-size: var(--al-body-size);
	line-height: 1.65;
	color: var(--al-body);
}

/* The measure cap is in px, not ch. Instrument Sans has a wide `0`, so 62ch
   measured 683px here - about 83 characters, the very problem the cap exists
   to stop. ch is only as predictable as the font behind it. */
.al-copy p,
.al-copy ul {
	max-width: 560px;
}

.al-copy p {
	margin-bottom: 20px;
}

.al-copy p:last-child,
.al-copy li:last-child {
	margin-bottom: 0;
}

.al-copy ul {
	padding-inline-start: 20px;
}

.al-copy li {
	margin-bottom: 14px;
}

.al-copy strong {
	color: var(--al-ink);
	font-weight: 600;
}

.al-lead {
	font-size: var(--al-lead);
	line-height: 1.55;
	color: var(--al-body);
}

.al-centred,
.al-centred .wd-text-block {
	text-align: center;
}

.al-centred p {
	margin-inline: auto;
}

/* --- images --------------------------------------------------------------
   Editorial images get a fixed height band rather than their intrinsic ratio.
   A 4:5 source at 42% of the content width is ~590x737; cropping it to a
   320-440px band puts it in the same visual weight class as the paragraph
   beside it, and object-fit keeps the subject centred instead of squashing. */
.al-media img {
	display: block;
	width: 100%;
	height: clamp(320px, 34vw, 440px);
	object-fit: cover;
}

/* The hero banner gets a height band like the editorial images, for the same
   reason: left at its natural 2048x1148 it renders ~796px tall at desktop and
   pushes the whole lede below the fold. object-position sits above centre so
   the crop takes it off the shelf timber at the bottom rather than off the
   bow at the top. */
.al-banner img {
	display: block;
	width: 100%;
	height: clamp(380px, 46vw, 660px);
	object-fit: cover;
	object-position: center 22%;
}

/* --- card rows -----------------------------------------------------------
   A grid, not Elementor's flex. Flex here needs a width per card, and a
   percentage width plus a gap overflows the row: 4 x 25% + 3 x 24px is wider
   than the container, so the row wrapped one card per line at 1024 instead of
   two. Grid's 1fr is computed after the gap is subtracted, which is the whole
   problem solved.

   A boxed Elementor container is two boxes: the children live in the
   `.e-con-inner` wrapper, so that is what has to become the grid - styling
   `.e-con` itself lays out nothing but the wrapper. `.e-con-full` has no
   wrapper, hence the second selector in each pair.

   `.e-con` is what sets display:flex, so the override is qualified with it to
   win on specificity rather than on source order - Woodmart inlines this
   stylesheet and enqueues its own parts lazily, so source order is not ours
   to rely on (see the product-card note above). */
.e-con.al-cards > .e-con-inner,
.e-con.al-cards.e-con-full {
	display: grid;
	gap: 24px;
	align-items: stretch;
}

.e-con.al-cards-4 > .e-con-inner,
.e-con.al-cards-4.e-con-full {
	grid-template-columns: repeat(4, 1fr);
}

.e-con.al-cards-3 > .e-con-inner,
.e-con.al-cards-3.e-con-full {
	grid-template-columns: repeat(3, 1fr);
}

/* The card background is the same #ECE5DC the product shots are normalised
   to, so a card sitting beside a product image reads as one surface rather
   than two near-misses. */
.al-card {
	background-color: var(--gng-shot-bg);
	padding: 28px;
	font-size: var(--al-card-body);
	line-height: 1.6;
	color: var(--al-body);
}

.al-card-title {
	font-size: var(--al-card-title);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--al-ink);
	margin-bottom: 10px;
}

.al-card p:last-child {
	margin-bottom: 0;
}

/* Links inside a card - the category links on Why Us - need to look like
   links. The theme gives body links the body colour and no decoration, which
   inside a card of the same colour makes them invisible; an underline is the
   one signal that survives. */
.al-card-body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* A row of links closing a card, separated rather than run together. */
.al-card-links a + a {
	margin-inline-start: 6px;
	padding-inline-start: 10px;
	border-inline-start: 1px solid rgba(20, 20, 20, 0.2);
}

/* A card whose image runs to its edges: the padding moves off the card and
   onto the text under the photo. */
.al-card-flush {
	padding: 0;
}

.al-card-flush .al-card-body {
	padding: 26px 28px 30px;
}

/* Side by side, these three must crop identically or the row reads as ragged.
   4:5 matches the proportion of the product cards further down the page. */
.al-card-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* --- narrow measures ------------------------------------------------------
   Centred, narrow measure for the closing note and the FAQ - a full 1400px
   line of answer text is unreadable. */
.al-narrow {
	max-width: 860px;
	margin-inline: auto;
}

.al-narrow .al-copy p {
	max-width: none;
}

/* --- FAQ + CTA ----------------------------------------------------------- */
.al-narrow .wd-accordion-title-text {
	font-size: var(--al-body-size);
	letter-spacing: -0.01em;
	color: var(--al-ink);
}

.al-narrow .wd-accordion-content {
	font-size: 16px;
	line-height: 1.65;
	color: var(--al-body);
}

/* The FAQ column is 860px so the questions have room to breathe, but an answer
   set to that full width runs about 100 characters a line. Cap the answer
   itself and let it sit left under its question. */
.al-narrow .wd-accordion-content p {
	max-width: 620px;
}

.al-cta .btn {
	letter-spacing: 0.04em;
}

/* --- breakpoints ---------------------------------------------------------- */
@media (max-width: 1024px) {
	:root {
		--al-display: 42px;
		--al-section: 30px;
		--al-lead: 19px;
	}

	.al-media img {
		height: clamp(260px, 42vw, 380px);
	}

	.e-con.al-cards-4 > .e-con-inner,
	.e-con.al-cards-4.e-con-full {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768.98px) {
	:root {
		--al-display: 34px;
		--al-section: 26px;
		--al-sub: 21px;
		--al-lead: 18px;
		--al-body-size: 16px;
		--al-card-title: 18px;
	}

	.al-media img {
		height: 260px;
	}

	/* At phone width the banner's own ratio is only ~270px tall, so the desktop
	   band's 380px floor would crop it to a near-square and take the bow off
	   the top. Let it run whole instead. */
	.al-banner img {
		height: auto;
		object-position: center;
	}

	.e-con.al-cards-4 > .e-con-inner,
	.e-con.al-cards-4.e-con-full,
	.e-con.al-cards-3 > .e-con-inner,
	.e-con.al-cards-3.e-con-full {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.al-card {
		padding: 24px;
	}

	.al-card-flush {
		padding: 0;
	}

	/* Full width, a 4:5 card image would stand 625px tall on a phone. A
	   landscape crop keeps the card scannable at a thumb's scroll. */
	.al-card-media img {
		aspect-ratio: 3 / 2;
	}
}

/* --------------------------------------------------------------------------
   Why Us - the comparison table

   The page's argument is a comparison, so it is set as one: a real <table>
   inside an Elementor text widget, three columns wide - the topic, how the
   average shop handles it, how this one does. A stack of cards would have said
   the same words without letting anyone read across a row, which is the only
   reading that makes the point.

   Our column is painted in the same #ECE5DC the cards and the product shots
   use, so it reads as one continuous panel down the right rather than as five
   separate highlights - and as the same surface the rest of the site is
   already built from.

   Everything is scoped to .wu-*; the type, measures and tokens come from the
   .al-* kit above.
   -------------------------------------------------------------------------- */
/* A guard, not a layout. The table is fluid and fits, but a long unbroken
   string in a cell should scroll its own box rather than widen the page.
   min-width is reset because an Elementor widget is a flex item, and a flex
   item's `min-width: auto` lets it grow past its container to fit its content -
   which would hand the overflow to the section instead of to this box. */
.wu-table-block,
.wu-table-wrap {
	max-width: 100%;
	min-width: 0;
}

.wu-table-wrap {
	overflow-x: auto;
}

.wu-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--al-body-size);
	line-height: 1.6;
	color: var(--al-body);
}

.wu-table th,
.wu-table td {
	text-align: start;
	vertical-align: top;
	padding: 18px 20px;
	border-bottom: 1px solid rgba(20, 20, 20, 0.1);
}

/* The column heads are the eyebrow, at the eyebrow's size - they label the
   comparison, they are not part of it. */
.wu-table thead th {
	font-size: var(--al-eyebrow);
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--al-muted);
	padding-bottom: 12px;
	border-bottom-color: rgba(20, 20, 20, 0.16);
}

/* Row labels: narrow, so the two answers get the width they need.

   text-transform is reset because the theme options emit `html table th {
   text-transform: capitalize }` inline in the head - which lands after this
   file and title-cases every row label ("The Range"). A class beats three
   element selectors, so stating it here is enough. */
.wu-table .wu-topic {
	width: 22%;
	font-weight: 600;
	text-transform: none;
	color: var(--al-ink);
}

.wu-table .wu-them {
	color: var(--al-muted);
}

.wu-table .wu-us {
	background-color: var(--gng-shot-bg);
	color: var(--al-ink);
}

.wu-table .wu-us a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 1024px) {
	.wu-table th,
	.wu-table td {
		padding: 16px;
	}

	.wu-table .wu-topic {
		width: 26%;
	}
}

/* Three columns of prose cannot hold at phone width, and sideways scrolling to
   read a sentence is worse than not comparing side by side at all. Each row
   becomes a block instead, with the column head repeated above each answer from
   the cell's own data-label - which is why the markup carries one. */
@media (max-width: 768.98px) {
	.wu-table,
	.wu-table tbody,
	.wu-table tr,
	.wu-table th,
	.wu-table td {
		display: block;
	}

	.wu-table thead {
		display: none;
	}

	.wu-table tr {
		margin-bottom: 28px;
	}

	.wu-table tr:last-child {
		margin-bottom: 0;
	}

	.wu-table th,
	.wu-table td {
		padding: 0;
		border-bottom: 0;
	}

	.wu-table .wu-topic {
		width: auto;
		font-size: var(--al-card-title);
		line-height: 1.3;
		letter-spacing: -0.01em;
		margin-bottom: 12px;
		padding-bottom: 12px;
		border-bottom: 1px solid rgba(20, 20, 20, 0.16);
	}

	.wu-table .wu-them,
	.wu-table .wu-us {
		padding: 16px 18px;
		margin-bottom: 8px;
	}

	.wu-table .wu-them {
		/* Stacked, the quieter column needs an edge of its own or it reads as a
		   caption hanging off the panel below it. */
		background-color: rgba(20, 20, 20, 0.03);
	}

	.wu-table td::before {
		content: attr(data-label);
		display: block;
		font-size: var(--al-eyebrow);
		line-height: 1;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--al-muted);
		margin-bottom: 8px;
	}
}

/* --------------------------------------------------------------------------
   Blog posts - the same kit as the long-form pages

   About Loofah and Why Us are set in the .al-* kit above: a display scale with
   the leading pulled in and the tracking negative, uppercase kickers over the
   section headings, #ECE5DC panels, editorial images cropped to a height band,
   and a lot of air between sections. A post inheriting the theme's product-page
   typography next to those two read as a different website.

   So the post is set in that kit rather than in a second one of its own: same
   tokens, same scale, same panel colour, same image bands, same 96/64/48
   section rhythm. What differs is the measure - a page composes text into
   columns beside pictures, while a post is one column of continuous reading,
   so it caps at 780px instead of 560.

   A wider version of this was tried and taken back out: text at 820px with the
   panels and the gallery breaking out to a 1040px band, on the reasoning that
   a 780px column leaves a lot of white either side of it at desktop. It filled
   the page and it read worse. The white is what the eye rests in, and three
   competing widths turned a quiet article into a layout. Left here so it is
   not rediscovered as a good idea.

   Scoped to .single-post because .wd-entry-content is not only the post body -
   the footer block carries it too.
   -------------------------------------------------------------------------- */
.single-post .wd-entry-content,
.single-post .wd-single-footer {
	/* min(), not a bare cap: the column this sits in can be wider than the
	   visible container at tablet widths, where a plain max-width would let the
	   reading column hang past the right edge of the page. */
	max-width: min(780px, 100%);
	margin-inline: auto;
}

.single-post .wd-entry-content {
	font-size: var(--al-body-size);
	line-height: 1.7;
	color: var(--al-body);
}

.single-post .wd-entry-content p {
	margin-bottom: 24px;
}

/* The opening paragraph, at the same size the pages set their lede. */
.single-post .wd-entry-content .post-lede {
	font-size: var(--al-lead);
	line-height: 1.55;
	color: var(--al-body);
}

/* --- the post header -----------------------------------------------------
   The pages open with a full-bleed banner and put the title under it. The
   theme orders a post the other way round, so the image is pulled to the top
   here and run full-bleed the same way.

   Sized by ratio rather than by a height band, unlike .al-banner and .al-media
   above. Those sit in containers of a known width, so a clamp() lands where it
   was aimed. This wrapper is 100vw up to 1390px, and a band across a variable
   width only hits the intended ratio at one viewport: clamp(340px, 42vw, 560px)
   was read as a comfortable banner and turned out to be 1390x560 at desktop -
   2.48:1 against 3:2 sources, which is the middle 60% of the picture with the
   floor and the ceiling gone. aspect-ratio holds at every width instead.

   16:9 costs about 16% of a 3:2 frame, so a room still reads as a room. The
   trade is that the post banner now runs taller than the page heroes at desktop
   - 782px against .al-banner's 660px cap - which is accepted: a hero is a
   picture chosen to be cropped, a featured image is whatever the post came
   with, and amputating the subject of every one of them to keep two numbers
   matching is the wrong way round. */
.single-post .wd-single-post-header {
	display: flex;
	flex-direction: column;
	max-width: min(780px, 100%);
	margin-inline: auto;
	margin-bottom: 44px;
}

.single-post .wd-post-image {
	order: -1;
	width: 100vw;
	max-width: 1390px;
	margin-inline: calc(50% - min(50vw, 695px));
	/* Flush under the site header, the way al-hero pulls the banner up on the
	   pages. The content area's own top padding would otherwise leave a band of
	   white above the picture and cost the opening its impact. */
	margin-top: -40px;
	margin-bottom: 56px;
}

.single-post .wd-post-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* The category, as the kicker the pages use over a section title, rather than
   as a blue pill. The theme paints the pill on the wrapper and passes the link
   its white through a custom property, so both are answered here. */
.single-post .wd-post-cat.wd-style-with-bg {
	--wd-link-color: var(--al-muted);
	--wd-link-color-hover: var(--al-ink);
	height: auto;
	padding-inline: 0;
	margin-bottom: 16px;
	background-color: transparent;
	color: var(--al-muted);
	font-size: var(--al-eyebrow);
	line-height: 1;
	letter-spacing: 0.14em;
}

/* The title takes the pages' display setting: large, tight, near-black. */
.single-post .wd-post-title {
	margin-bottom: 16px;
	font-size: var(--al-display);
	line-height: 1.06;
	letter-spacing: -0.035em;
	color: var(--al-ink);
}

.single-post .wd-post-meta {
	font-size: 14px;
	color: var(--al-muted);
}

.single-post .wd-entry-content > :first-child {
	margin-top: 0;
}

/* A default gravatar is a grey silhouette standing in for a photograph nobody
   uploaded, and the modified date repeats the published one. Neither carries
   information. */
.single-post .wd-post-meta .avatar,
.single-post .wd-modified-date {
	display: none;
}

/* --- headings and kickers ------------------------------------------------
   96/64/48 between sections is the pages' rhythm, carried by the space above
   each heading. Space below it would only push the heading away from what it
   introduces, so the margins stay lopsided. */
.single-post .wd-entry-content .post-kicker {
	margin-top: 96px;
	margin-bottom: 14px;
	font-size: var(--al-eyebrow);
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--al-muted);
}

.single-post .wd-entry-content h2 {
	margin-top: 96px;
	margin-bottom: 18px;
	font-size: var(--al-section);
	line-height: 1.15;
	letter-spacing: -0.022em;
	color: var(--al-ink);
}

/* A heading introduced by a kicker has already had its space. */
.single-post .wd-entry-content .post-kicker + h2 {
	margin-top: 0;
}

.single-post .wd-entry-content h3 {
	margin-top: 52px;
	margin-bottom: 14px;
	font-size: var(--al-sub);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--al-ink);
}

/* --- running lists -------------------------------------------------------- */
.single-post .wd-entry-content ul,
.single-post .wd-entry-content ol {
	margin-bottom: 24px;
	padding-inline-start: 20px;
}

.single-post .wd-entry-content li {
	margin-bottom: 14px;
	padding-inline-start: 4px;
}

.single-post .wd-entry-content li::marker {
	color: var(--al-muted);
}

.single-post .wd-entry-content strong {
	color: var(--al-ink);
	font-weight: 600;
}

/* A link in running text has to be findable without shouting. The theme gives
   body links the body colour and no decoration, which inside a paragraph makes
   them invisible - the same fix the cards on the pages needed. */
.single-post .wd-entry-content p > a,
.single-post .wd-entry-content li > a {
	color: var(--al-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* --- panels --------------------------------------------------------------
   Two things in the piece are not prose: the day one kit and the habits note.
   They are set as the pages set a card - the #ECE5DC ground the product shots
   are normalised to, 28px of padding, a 19px semibold title - so a panel here
   and a card there are recognisably the same object.

   The note is the outlined variant rather than a second filled box: a page of
   identical tinted panels is the clutter this was meant to cure. */
.single-post .wd-entry-content .kit-panel,
.single-post .wd-entry-content .note-panel,
.single-post .wd-entry-content .post-toc {
	margin-block: 40px;
}

.single-post .wd-entry-content .kit-panel {
	padding: 28px;
	background-color: var(--gng-shot-bg);
}

.single-post .wd-entry-content .note-panel {
	padding: 28px;
	border: 1px solid rgba(20, 20, 20, 0.14);
}

.single-post .wd-entry-content .kit-panel-label,
.single-post .wd-entry-content .note-panel-label {
	margin-bottom: 16px;
	font-size: var(--al-card-title);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--al-ink);
}

.single-post .wd-entry-content .kit-grid {
	/* Columns rather than a grid: in a grid every row is as tall as its tallest
	   item, so a one-line entry beside a two-line one opens a hole underneath
	   it. Column flow packs them. */
	columns: 2;
	column-gap: 28px;
	margin-bottom: 0;
	padding-inline-start: 0;
	list-style: none;
}

.single-post .wd-entry-content .kit-grid li {
	position: relative;
	margin-bottom: 12px;
	padding-inline-start: 16px;
	font-size: var(--al-card-body);
	line-height: 1.6;
	break-inside: avoid;
}

.single-post .wd-entry-content .kit-grid li:last-child {
	margin-bottom: 0;
}

.single-post .wd-entry-content .kit-grid li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 9px;
	width: 5px;
	height: 5px;
	background-color: var(--al-muted);
}

.single-post .wd-entry-content .note-panel ul {
	margin-bottom: 0;
	font-size: var(--al-card-body);
	line-height: 1.6;
}

/* Contents: two quiet columns between hairlines. A tinted box here would
   compete with the panels below it for no reason - this is a signpost. */
.single-post .wd-entry-content .post-toc {
	padding-block: 22px;
	border-block: 1px solid rgba(20, 20, 20, 0.12);
}

.single-post .wd-entry-content .post-toc-label {
	margin-bottom: 14px;
	font-size: var(--al-eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--al-muted);
}

.single-post .wd-entry-content .post-toc-list {
	columns: 2;
	column-gap: 32px;
	margin-bottom: 0;
	padding-inline-start: 0;
	list-style: none;
}

.single-post .wd-entry-content .post-toc-list li {
	margin-bottom: 8px;
	padding-inline-start: 0;
	font-size: 16px;
	line-height: 1.45;
	break-inside: avoid;
}

.single-post .wd-entry-content .post-toc-list a {
	color: var(--al-ink);
	text-decoration: underline;
	text-decoration-color: rgba(20, 20, 20, 0.28);
	text-underline-offset: 3px;
}

.single-post .wd-entry-content .post-toc-list a:hover {
	text-decoration-color: currentColor;
}

/* The four checks before buying plates: a list of questions reads better
   ticked than bulleted. */
.single-post .wd-entry-content .check-list {
	padding-inline-start: 0;
	list-style: none;
}

.single-post .wd-entry-content .check-list li {
	position: relative;
	padding-inline-start: 28px;
}

.single-post .wd-entry-content .check-list li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	color: var(--al-muted);
	font-weight: 600;
}

/* The buying order is a sequence and should look like one: the numeral is what
   gets scanned, so it is set large and quiet in the margin rather than as the
   small marker a browser draws. */
.single-post .wd-entry-content .step-list {
	counter-reset: step;
	margin-block: 32px;
	padding-inline-start: 0;
	list-style: none;
}

.single-post .wd-entry-content .step-list li {
	counter-increment: step;
	position: relative;
	margin-bottom: 24px;
	padding-inline-start: 56px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(20, 20, 20, 0.1);
}

.single-post .wd-entry-content .step-list li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.single-post .wd-entry-content .step-list li::before {
	content: counter(step);
	position: absolute;
	inset-inline-start: 0;
	top: -6px;
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: rgba(20, 20, 20, 0.2);
}

/* --- images --------------------------------------------------------------
   A single image breaks out to the container, as a page banner does, and takes
   the editorial height band from the kit: a 3:2 photo left at its own ratio
   stands about 690px tall, which is a screenful of picture between two
   paragraphs. The gallery stays inside the measure, where a pair of 4:5 crops
   sits at the same visual weight as one banded image. */
.single-post .wd-entry-content > figure.wp-block-image {
	width: 100vw;
	max-width: 1390px;
	margin-inline: calc(50% - min(50vw, 695px));
	margin-block: 56px;
}

.single-post .wd-entry-content > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: clamp(300px, 34vw, 460px);
	object-fit: cover;
}

.single-post .wd-entry-content > figure.wp-block-gallery {
	margin-block: 48px;
}

.single-post .wd-entry-content > figure.wp-block-gallery .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* --- quote ---------------------------------------------------------------
   A pull-quote, a line meant to land. At the theme's default it comes out
   body-sized and upright, which reads as an aside; and its rule is the accent
   blue, which is the button colour doing a typographic job. */
.single-post .wd-entry-content .wp-block-quote {
	margin-block: 48px;
	padding-inline-start: 26px;
	border-inline-start: 2px solid rgba(20, 20, 20, 0.25);
}

.single-post .wd-entry-content .wp-block-quote p {
	font-size: var(--al-lead);
	line-height: 1.5;
	font-style: italic;
	color: var(--al-ink);
}

/* --- the close -----------------------------------------------------------
   The pages end on a centred line and one button. The post does the same, so
   the piece hands off to the shop the way they do. */
.single-post .wd-entry-content .post-cta {
	margin-top: 72px;
	padding-top: 48px;
	border-top: 1px solid rgba(20, 20, 20, 0.12);
	text-align: center;
}

.single-post .wd-entry-content .post-cta-title {
	margin-bottom: 24px;
	font-size: var(--al-sub);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--al-ink);
}

.single-post .wd-entry-content .post-cta-btn {
	margin-bottom: 18px;
}

/* The same button the pages close on: theme primary, extra-large, centred.
   An ink-black one looked well enough on its own, but About Loofah and Why Us
   both hand off to the shop in this colour and a third convention helps
   nobody. */
.single-post .wd-entry-content .post-cta-btn a {
	display: inline-block;
	padding: 17px 36px;
	background-color: var(--wd-primary-color);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.single-post .wd-entry-content .post-cta-btn a:hover {
	opacity: 0.88;
	color: #fff;
}

.single-post .wd-entry-content .post-cta-links {
	margin-bottom: 0;
	font-size: 15px;
	color: var(--al-muted);
}

.single-post .wd-entry-content .post-cta-links a {
	margin-inline: 10px;
	color: var(--al-muted);
	text-decoration: underline;
	text-decoration-color: rgba(20, 20, 20, 0.22);
	text-underline-offset: 3px;
}

.single-post .wd-entry-content .post-cta-links a:hover {
	color: var(--al-ink);
}

/* --- the row under the post ----------------------------------------------
   Tags, sharing and the previous/next arrows. Five saturated brand circles are
   the loudest thing on a page of black text; outlined and inked they read as
   what they are, a row of small actions. */
.single-post .wd-single-footer {
	margin-top: 64px;
	padding-top: 28px;
	border-top: 1px solid rgba(20, 20, 20, 0.12);
}

.single-post .wd-single-footer .wd-social-icons .wd-social-icon {
	background-color: transparent;
	border: 1px solid rgba(20, 20, 20, 0.16);
	color: var(--al-muted);
}

.single-post .wd-single-footer .wd-social-icons .wd-social-icon:hover {
	border-color: var(--al-ink);
	color: var(--al-ink);
}

/* --- breakpoints ----------------------------------------------------------
   The kit's own scale already steps down at these widths (--al-display 54/42/34
   and so on), so what is left here is the spacing rhythm and the columns. */
@media (max-width: 1024px) {
	.single-post .wd-entry-content .post-kicker,
	.single-post .wd-entry-content h2 {
		margin-top: 64px;
	}

	.single-post .wd-entry-content > figure.wp-block-image {
		max-width: 100%;
		margin-inline: 0;
		margin-block: 40px;
	}

	.single-post .wd-post-image {
		max-width: 100%;
		margin-inline: 0;
		margin-top: 0;
		margin-bottom: 40px;
	}
}

@media (max-width: 768.98px) {
	.single-post .wd-entry-content .post-kicker,
	.single-post .wd-entry-content h2 {
		margin-top: 48px;
	}

	.single-post .wd-entry-content h3 {
		margin-top: 40px;
	}

	/* One column for anything that was two: at phone width a second column is
	   four words wide. */
	.single-post .wd-entry-content .post-toc-list,
	.single-post .wd-entry-content .kit-grid {
		columns: 1;
	}

	.single-post .wd-entry-content .kit-panel,
	.single-post .wd-entry-content .note-panel {
		padding: 22px;
	}

	/* The source ratio, so a phone crops nothing at all. At 390px this is the
	   260px the band used to resolve to here, so the phone is unchanged; what
	   it fixes is the top of this range, where a flat 260px was 2.7:1 and cut
	   more than the desktop did. */
	.single-post .wd-post-image img {
		aspect-ratio: 3 / 2;
	}

	.single-post .wd-entry-content > figure.wp-block-image img {
		height: 220px;
	}

	/* Full width on a phone, a 4:5 crop is most of the screen. */
	.single-post .wd-entry-content > figure.wp-block-gallery .wp-block-image img {
		aspect-ratio: 3 / 2;
	}
}

/* --------------------------------------------------------------------------
   Cart shipping calculator - Update as a secondary action

   Picking a district does nothing until Update is submitted, so a customer who
   misses the button sees the Outside Dhaka rate stay at 130 and concludes the
   calculator is broken.

   The theme does style it, via `.shipping-calculator-form .button` in
   woo-page-cart.css, which is enqueued on the cart page. That rule paints from
   --btn-default-*, which the generated theme CSS sets to #333 on #f7f7f7 at
   12px - a pale grey chip sitting directly above a full-width solid blue
   "Proceed To Checkout". Next to that CTA it reads as decoration rather than
   the control that commits the district, which is how it gets skipped.

   So the job here is weight, not colour: make Update unmistakably a button,
   while keeping it below the checkout CTA in the visual hierarchy. An outline
   in the primary blue does both - far louder than the grey it replaces, still
   clearly subordinate to the solid bar beneath it. An earlier pass made this a
   second solid blue bar, which fixed visibility but left two identical
   full-width CTAs competing, the helper action set in uppercase at 14px while
   the real goal action sat at 13px capitalize.

   Every shared value is read from the same --btn-accented-* properties that
   .cart-totals-inner .checkout-button uses, so the two buttons keep identical
   type and metrics if the theme's button settings ever change. Today those
   resolve to 13px / capitalize / 42px. letter-spacing is reset explicitly
   because the previous rule tracked it out.

   [name="calc_shipping"] lifts specificity to 0,2,1 - above the theme's 0,2,0
   rule - which matters, since woo-page-cart.css genuinely does load here.
   -------------------------------------------------------------------------- */

.woocommerce-shipping-calculator .button[name="calc_shipping"] {
	display: block;
	width: 100%;
	min-height: var(--btn-accented-height, var(--btn-height, 42px));
	padding: 5px 20px;
	border: 2px solid var(--wd-primary-color, rgb(15, 82, 214));
	border-radius: var(--btn-accented-brd-radius, 0px);
	background-color: transparent;
	color: var(--wd-primary-color, rgb(15, 82, 214));
	font-size: var(--btn-accented-font-size, var(--btn-font-size, 13px));
	font-weight: var(--btn-accented-font-weight, var(--btn-font-weight, 600));
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: var(--btn-accented-transform, var(--btn-transform, capitalize));
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.woocommerce-shipping-calculator .button[name="calc_shipping"]:hover,
.woocommerce-shipping-calculator .button[name="calc_shipping"]:focus-visible {
	background-color: var(--wd-primary-color, rgb(15, 82, 214));
	color: #fff;
}

.woocommerce-shipping-calculator .button[name="calc_shipping"]:focus-visible {
	outline: 2px solid var(--wd-primary-color, rgb(15, 82, 214));
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Product highlight icons

   The three-point strip under the short description. Everything around these
   icons - the row, the gaps, the text - is Woodmart's own .wd-info-box CSS,
   which the markup in inc/product-highlights.php reuses verbatim; only the
   icon itself is ours and so only the icon is styled here.

   32px matches what the infobox carousel this replaced was rendering, so the
   strip keeps the same weight on the page. Colour comes through currentColor
   rather than a fill on each path, which is the reason these are inline SVG:
   one declaration recolours the whole set.
   -------------------------------------------------------------------------- */
.gng-hl-icon {
	width: 32px;
	height: 32px;
	color: var(--wd-primary-color, rgb(15, 82, 214));
}

/* --------------------------------------------------------------------------
   Footer link columns

   Two theme defaults make the footer taller and more ragged than it needs to
   be once the columns carry headings.

   The indent: base.css sets `:is(ul,ol) { padding-inline-start: var(--li-pl) }`
   with --li-pl falling back to 17px. el-list.css does set --li-pl to 0 on
   .wd-list, but that only holds while that part is loaded and wins the
   cascade, and the result was links sitting indented from the heading above
   them. Setting the padding directly here does not depend on either.

   The spacing: --li-mb is 15px, which is right for a list that is the content
   of a page and too loose for a short column of footer links.
   -------------------------------------------------------------------------- */
.main-footer .wd-list {
	padding-inline-start: 0;
	--li-mb: 9px;
}

/* The gap under each heading was double what the widget asked for. Elementor
   gives every widget that is not the last in its container
   `.elementor-widget:not(:last-child) { margin-block-end: var(--kit-widget-spacing) }`,
   20px here, and that lands on top of the heading's own bottom margin.

   Two details matter in overriding it. The selector needs three classes,
   because :not() counts towards specificity and Elementor's rule is already
   at two. And it has to be margin-block-end rather than margin-bottom: both
   resolve to the same side, so the one later in the cascade wins, and
   matching the property means specificity decides it instead of load order.

   With this off, the margin set on the widget in the document is the whole
   gap, so the number in Elementor is the number on the page. */
.main-footer .elementor-widget.elementor-widget-wd_title {
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   FAQ - the accordion

   The page was a flat run of h2/h3/p: eleven questions and eleven answers,
   all open, about 1065px wide in this column. Nothing to scan. Someone who
   arrives wanting one answer - how do I pay, can I return this - had to read
   past the other ten to find it.

   So the questions are the page and the answers are folded away. It is built
   on <details>/<summary>, not on the theme's accordion: those are Elementor
   widgets and this page is deliberately a plain WordPress page (see
   _content/write-page.php), so a question is a one line diff in
   _content/pages/faq.html. Native disclosure also costs no JavaScript and
   arrives with the keyboard behaviour, the ARIA and Chrome's find-in-page
   expansion already wired - all of which a div-and-click accordion has to
   rebuild and usually gets wrong.

   No `name` attribute on the items, so they are independent rather than
   mutually exclusive. An exclusive set closes whatever is open when you open
   something else, and when the one that closes is above the one you clicked,
   the page jumps under your thumb.

   The classes come from the page source; the colours and sizes come from the
   --al-* kit above so this reads as the same hand as the long-form pages.
   -------------------------------------------------------------------------- */
.faq {
	/* Two measures, not one. The question rows run the full 820px: the chevron
	   sits at their right edge, and at a reading measure it would crowd the
	   longer questions and leave the rows looking like a narrow strip dropped
	   into a wide column. The answers are capped at 620px below - the same
	   number the Elementor FAQ uses in .al-narrow, and for the same reason. */
	max-width: 820px;
}

.faq-lede {
	margin-bottom: 42px;
	font-size: var(--al-lead);
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--al-body);
}

/* --- groups --------------------------------------------------------------
   Four headings over eleven questions. Set as eyebrows rather than as
   headings: at a section size they would out-shout the questions, which are
   what the page is for. They stay h2 in the markup. */
.faq-group + .faq-group {
	margin-top: 46px;
}

.faq-group-title {
	margin-bottom: 14px;
	font-size: var(--al-eyebrow);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--al-muted);
}

/* --- rows ----------------------------------------------------------------
   Hairlines, not cards or borders: eleven outlined boxes down a page is a
   stack of objects, and this is one list. The last row in a group carries a
   bottom rule so the group closes rather than trailing off. */
.faq-item {
	border-top: 1px solid rgba(20, 20, 20, 0.12);
}

.faq-group .faq-item:last-of-type {
	border-bottom: 1px solid rgba(20, 20, 20, 0.12);
}

.faq-item > summary {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	padding-block: 17px;
	font-size: var(--al-body-size);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--al-ink);
	cursor: pointer;
	/* Both are needed to drop the disclosure triangle: the pseudo-element is
	   WebKit's, list-style is everyone else's. */
	list-style: none;
}

.faq-item > summary::-webkit-details-marker {
	display: none;
}

/* The marker is gone, so the focus ring is the only thing telling a keyboard
   user where they are. */
.faq-item > summary:focus-visible {
	outline: 2px solid var(--al-ink);
	outline-offset: 3px;
}

/* Hover lands on the question text, underlined the way the body links are,
   because that is the part you click. A row tint was the other option and
   does not sit well here: the tint would either stop short of the hairline or
   bleed past it. */
.faq-q {
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.faq-item > summary:hover .faq-q {
	text-decoration: underline;
}

/* The chevron. Drawn from two borders rather than set as an icon font or an
   SVG: kses strips <svg> out of post content, and a rotated box needs no
   markup beyond the summary. 45deg points it down, -135deg up, and the
   rotation is what animates on open. */
.faq-item > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	/* Optically centred on the first line of the question rather than on the
	   summary box: a two line question would otherwise push it down the row. */
	margin-top: 7px;
	border-right: 1.5px solid var(--al-muted);
	border-bottom: 1.5px solid var(--al-muted);
	transform: rotate(45deg);
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.faq-item > summary:hover::after {
	border-color: var(--al-ink);
}

.faq-item[open] > summary::after {
	/* -135, not 225: the short way round, so it unrolls back the way it came. */
	transform: rotate(-135deg);
	margin-top: 10px;
	border-color: var(--al-ink);
}

/* --- answers -------------------------------------------------------------- */
.faq-answer {
	max-width: 620px;
	padding-bottom: 22px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--al-body);
}

.faq-answer p {
	margin-bottom: 14px;
}

.faq-answer p:last-child {
	margin-bottom: 0;
}

/* Theme body links are the body colour with no decoration, which inside a
   paragraph is invisible. Same treatment as the post body: ink and a rule. */
.faq-answer a {
	color: var(--al-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* Opening and closing animate where the browser can do it. ::details-content
   is the only handle on the part that folds, and height needs
   interpolate-size before it will animate to or from `auto`. Both are
   progressive: without them the panel still opens, just instantly, which is
   what <details> has always done.

   The @supports test is on the selector, because a browser that has
   ::details-content has interpolate-size too. */
@supports selector(::details-content) {
	.faq {
		interpolate-size: allow-keywords;
	}

	.faq-item::details-content {
		height: 0;
		overflow: clip;
		transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
	}

	.faq-item[open]::details-content {
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faq-item > summary::after,
	.faq-item::details-content {
		transition: none;
	}
}

/* --- still stuck ---------------------------------------------------------
   The page ends on the way to reach a person. Set as the pages set a card -
   the #ECE5DC ground, 28px, a 19px semibold label - so it reads as the same
   object as the panels in the posts and the cards on Why Us. */
.faq-still {
	margin-top: 48px;
	padding: 28px;
	background-color: var(--gng-shot-bg);
	font-size: var(--al-card-body);
	line-height: 1.6;
	color: var(--al-body);
}

.faq-still-label {
	margin-bottom: 10px;
	font-size: var(--al-card-title);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--al-ink);
}

.faq-still p:last-child {
	margin-bottom: 0;
}

.faq-still a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- breakpoints ---------------------------------------------------------
   The tap target is the whole row, which is already comfortable at this
   padding; what needs to come in on a phone is the type and the panel. */
@media (max-width: 768.98px) {
	.faq-lede {
		margin-bottom: 32px;
	}

	.faq-item > summary {
		gap: 16px;
		padding-block: 15px;
	}

	.faq-answer {
		padding-bottom: 20px;
		font-size: 15px;
	}

	.faq-still {
		margin-top: 40px;
		padding: 22px;
	}
}

/* --------------------------------------------------------------------------
   The blog rail - sidebar-1, beside posts and content pages

   Two widgets sit in this column on every post and every written page: three
   recent posts and the post categories. What was there read as leftovers from
   the theme demo rather than part of this site.

   Naming first, because that was the real problem. The categories widget was
   headed "Categories" on a shop - four entries reading Tableware, Kitchen
   Essentials, Natural Loofah, Home and Living, which are also four product
   categories. Anyone would have taken them for the shop's and found a blog
   archive. They are now "Topics", and the posts above them "From the blog",
   so the column says what it is. Both titles are set in the widgets
   themselves (sidebar-1), not here.

   The categories widget was also a block widget - a wp:group wrapping its own
   <h2> - so the two headings in one column were different elements at
   different sizes. It is a plain Categories widget now, which means both
   render the theme's h5.widget-title and this file dresses one thing.

   Scoped to the two widgets by name rather than to .wd-sidebar: that class is
   also the shop filters column and the off-canvas drawer, neither of which
   wants this. A third widget added to this rail will need adding here.
   -------------------------------------------------------------------------- */

/* The theme's title is 16px semibold #333 and capitalize - which rewrote
   "From the blog" as "From The Blog". Set as an eyebrow instead, the same one
   the FAQ groups and the long-form pages use, so the rail labels sit under
   the page rather than beside it competing. */
.sidebar-widget.woodmart-recent-posts .widget-title,
.sidebar-widget.widget_categories .widget-title {
	margin-bottom: 18px;
	font-size: var(--al-eyebrow);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--al-muted);
}

/* Links in a widget are --wd-link-color, a mid grey, on the theory that a
   sidebar should recede. At this size it just reads as disabled. The theme's
   own two properties are the lightest way to restate it. */
.sidebar-widget.woodmart-recent-posts,
.sidebar-widget.widget_categories {
	--wd-link-color: var(--al-ink);
	--wd-link-color-hover: var(--al-ink);
}

/* --- from the blog -------------------------------------------------------
   The thumbnail was 70x60 - neither the shape of the photographs nor big
   enough to show what is in them. 96x72 is 4:3, the proportion the featured
   images are already cropped to, and the widget generates that size on
   demand. The ground behind it is the same #ECE5DC as every other image on
   the site, so a slow load does not flash white. */
.sidebar-widget.woodmart-recent-posts li {
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom-color: rgba(20, 20, 20, 0.12);
}

.sidebar-widget.woodmart-recent-posts .recent-posts-thumbnail {
	margin-inline-end: 14px;
}

.sidebar-widget.woodmart-recent-posts .recent-posts-thumbnail img {
	display: block;
	width: 96px;
	height: 72px;
	object-fit: cover;
	background-color: var(--gng-shot-bg);
}

.sidebar-widget.woodmart-recent-posts .wd-entities-title {
	margin-bottom: 6px;
	font-size: 15px;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.sidebar-widget.woodmart-recent-posts .wd-entities-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* --color-gray-300 is the theme's lightest text and fails contrast at this
   size. The kit's caption grey clears 7:1. */
.sidebar-widget.woodmart-recent-posts .recent-posts-time {
	font-size: var(--al-eyebrow);
	color: var(--al-muted);
}

/* --- topics --------------------------------------------------------------
   Four links set as hairline rows, the same rows as the FAQ questions at a
   smaller size, so the column is built out of the page's own parts. The row
   is the target, not the word: `display: block` on the link means the whole
   width of it answers to the pointer. */
.sidebar-widget.widget_categories ul {
	--li-mb: 0;
}

.sidebar-widget.widget_categories li {
	border-top: 1px solid rgba(20, 20, 20, 0.12);
}

.sidebar-widget.widget_categories li:last-child {
	border-bottom: 1px solid rgba(20, 20, 20, 0.12);
}

.sidebar-widget.widget_categories li a {
	display: block;
	padding-block: 11px;
	font-size: 15px;
	line-height: 1.4;
}

.sidebar-widget.widget_categories li a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
   Content pages - the measure

   The six written pages - delivery, returns, terms, privacy, contact, track
   order - ran the full width of their column. With the blog rail beside them
   that is about 1040px, so a line of body copy finished a few pixels from the
   rail and the two columns ran together.

   820px, the same as the FAQ. One number for every written page: they sit
   under the same page title, in the same column, beside the same rail, and a
   reader moving between them should not feel the text block change width.
   It is a wide line for running prose - call it 95 characters - but holding
   the set together is worth more here than the last few characters of
   measure, and the gap to the rail is the thing that needed fixing.

   The class is set in the page sources (_content/pages/*.html), not matched
   on a body class, because `.page` on this install is also the cart, the
   checkout, the wishlist and My Account - none of which wants a reading
   measure imposed on it.
   -------------------------------------------------------------------------- */
.page-copy {
	max-width: 820px;
}

/* --------------------------------------------------------------------------
   Coming soon page

   Two lines in the middle of the screen and nothing else. The markup comes
   from goodsnglee_coming_soon_content() in functions.php, which stands in for
   WooCommerce's whole coming-soon block, so nothing of that block's own
   layout is left to lean on: the centring, the height and the type sizes are
   all set here. Colours and fonts come from the theme, like every heading.
   -------------------------------------------------------------------------- */
.goodsnglee-coming-soon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 24px 16px;
	text-align: center;
}

.goodsnglee-coming-soon__title {
	margin: 0 0 12px;
	font-size: clamp(36px, 7vw, 64px);
	line-height: 1.1;
}

.goodsnglee-coming-soon__note {
	margin: 0;
	font-size: 18px;
}