@charset "UTF-8";
/* ==========================================================================
   LÉYA — Reset, typography, layout primitives, controls
   --------------------------------------------------------------------------
   Everything here is written with CSS logical properties (inline/block rather
   than left/right), so the Arabic RTL storefront and the English LTR one are
   the same stylesheet mirrored by `dir` alone. rtl.css only holds the handful
   of cases logical properties can't express.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor targets clear the fixed header instead of hiding beneath it. */
	scroll-padding-block-start: calc(var(--header-h) + var(--s-5));
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--t-base);
	line-height: var(--lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/* Locks the page behind an open drawer or modal without the iOS scroll-jump
   that `position: fixed` causes. JS stores the offset in --scroll-lock. */
body.is-locked {
	position: fixed;
	inset-inline: 0;
	inset-block-start: calc(var(--scroll-lock, 0px) * -1);
	width: 100%;
	overflow: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; border: 0; }

/* The icon set is stroked, not filled. A blanket `svg { fill: currentColor }`
   here would beat the `fill="none"` presentation attribute that inc/icons.php
   writes on every icon — CSS always wins over a presentation attribute — and
   turn all fifty icons into solid blobs. Fill is declared per icon instead:
   `none` on the family, `currentColor` on the paths of the `-fill` variants. */
.icon { fill: none; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }

hr {
	border: 0;
	border-block-start: var(--hair);
	margin-block: var(--s-6);
}

/* One focus treatment for the entire site. Visible, on-brand, never removed —
   an outline that disappears is an accessibility bug, not a design decision. */
:focus-visible {
	outline: 2px solid var(--wine);
	outline-offset: 3px;
	border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--wine); color: var(--paper); }

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: var(--lh-display);
	letter-spacing: var(--track-tight);
	text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

h5, h6 {
	font-family: var(--font-body);
	font-size: var(--t-sm);
	font-weight: 500;
}

p { text-wrap: pretty; }

strong, b { font-weight: 600; }

small { font-size: var(--t-sm); }

/* The display sizes that carry a section. `.display--xl` is reserved for the
   hero: one per page, never two. */
.display    { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-display); letter-spacing: var(--track-tight); }
.display--xl { font-size: var(--t-3xl); line-height: var(--lh-tight); }
.display--lg { font-size: var(--t-2xl); line-height: var(--lh-tight); }

/* The Latin wordmark voice. Only the brand name and editorial numerals. */
.latin { font-family: var(--font-latin); font-weight: 500; letter-spacing: .01em; }

/* Small caps label above a heading. Latin gets the wide tracking; Arabic must
   not, because letter-spacing severs the cursive joins and produces the
   broken-looking headings you see on most templated Arabic stores. */
.eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: var(--t-xs);
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink-3);
	text-transform: uppercase;
	letter-spacing: var(--track-wide);
	margin-block-end: var(--s-4);
}
[dir="rtl"] .eyebrow,
.eyebrow:lang(ar) {
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--t-sm);
}

/* Standing lede under a section heading. */
.lede {
	font-size: var(--t-md);
	line-height: 1.62;
	color: var(--ink-2);
	max-width: 54ch;
}

/* Long-form prose: legal pages, the journal, product descriptions. */
.prose { max-width: var(--read-max); }
.prose > * + * { margin-block-start: var(--s-5); }
.prose h2 { font-size: var(--t-lg); margin-block-start: var(--s-8); }
.prose h3 { font-size: var(--t-md); margin-block-start: var(--s-7); }
.prose h2:first-child, .prose h3:first-child { margin-block-start: 0; }
.prose ul, .prose ol { padding-inline-start: var(--s-5); }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-inline-start: var(--s-4); }
.prose ul li + li, .prose ol li + li { margin-block-start: var(--s-3); }
.prose ul li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .78em;
	width: 5px;
	height: 1px;
	background: var(--gold);
}
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--ink-3); font-size: var(--t-sm); }
.prose a {
	color: var(--wine);
	text-decoration: underline;
	text-underline-offset: .22em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wine-edge);
	transition: text-decoration-color var(--d-1) var(--ease);
}
.prose a:hover { text-decoration-color: var(--wine); }
.prose blockquote {
	border-inline-start: 2px solid var(--gold);
	padding-inline-start: var(--s-5);
	font-family: var(--font-display);
	font-size: var(--t-md);
	color: var(--ink-2);
}

/* Prices, sizes, order numbers, phone numbers. Tabular figures stop a column
   of prices from jittering, and `latn` keeps Arabic-Indic numerals from being
   substituted where the shop owner has asked for Western digits. */
.num {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: var(--page-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Narrower measure for text-led pages so lines never run past ~68ch. */
.wrap--narrow { max-width: 980px; }
.wrap--text   { max-width: calc(var(--read-max) + var(--gutter) * 2); }

/* Full-bleed escape hatch for a child inside `.wrap`. */
.bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* Vertical rhythm between page sections. `--section` is the single knob. */
.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-8); }
.section--loose { padding-block: var(--s-10); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

/* Alternating grounds. Used sparingly — two per page at most. */
.section--sunk { background: var(--paper-sunk); }
.section--sand { background: var(--sand); }
.section--ink  { background: var(--ink); color: var(--paper); }
.section--ink .eyebrow { color: rgba(251, 248, 244, .5); }
.section--ink .lede    { color: rgba(251, 248, 244, .74); }
.section--wine { background: var(--wine); color: var(--paper); }
.section--wine .eyebrow { color: rgba(251, 248, 244, .56); }
.section--wine .lede    { color: rgba(251, 248, 244, .78); }

/* Section header: eyebrow + title + optional link, aligned to the baseline. */
.sec-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--s-4) var(--s-6);
	margin-block-end: var(--s-7);
}
.sec-head__title { max-width: min(34rem, 100%); }
.sec-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.sec-head--center .sec-head__title { max-width: min(30rem, 100%); }
.sec-head--center .lede { margin-inline: auto; text-align: center; }

/* Auto-fitting grid. `--min` sets the smallest a column may get before the
   track count drops — no media queries needed for the common cases. */
.grid {
	display: grid;
	gap: var(--gap, var(--s-6));
	grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 260px), 100%), 1fr));
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* A pair, sized as if it were part of a wider row. Two cards stretched across
   a full desktop measure read as a mistake — the images tower, the excerpts
   run to two lines, and the section stops looking like a journal index. The
   grid narrows and the cards keep their proportions. */
.grid--pair {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 46rem;
}

@media (max-width: 1024px) {
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.grid--pair { max-width: none; }
}
@media (max-width: 560px) {
	.grid--4 { grid-template-columns: minmax(0, 1fr); }

	/* These two carry the journal, and a journal card stays legible in a
	   half-width column — so the cards pair off on a phone instead of stacking
	   into a page-long ribbon. See the post-card rules in layout.css for the
	   phone typography that goes with it. */
	.grid--3, .grid--pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-5) var(--s-4);
	}
	.grid--3 > :last-child:nth-child(odd),
	.grid--pair > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.stack > * + * { margin-block-start: var(--flow, var(--s-4)); }

.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap, var(--s-3));
}

/* A media box that reserves its aspect ratio before the image loads, so the
   page never reflows. Every product and editorial image goes through this. */
.media {
	position: relative;
	overflow: hidden;
	background: var(--sand-deep);
	aspect-ratio: var(--ratio, var(--ratio-product));
}
.media > img,
.media > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.media--contain > img { object-fit: contain; }

/* --------------------------------------------------------------------------
   4. Ornament
   -------------------------------------------------------------------------- */

/* A single hairline with a diamond at its centre — the house mark. Used to
   close a section or separate a quote. One per screenful, never decorative
   filler between every block. */
.rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	color: var(--gold);
}
.rule::before, .rule::after {
	content: "";
	height: 1px;
	background: currentColor;
	opacity: .4;
	flex: 1;
	max-width: 84px;
}
.rule__mark {
	width: 5px;
	height: 5px;
	background: currentColor;
	transform: rotate(45deg);
	flex: none;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
	--btn-bg: var(--wine);
	--btn-fg: var(--paper);
	--btn-edge: var(--wine);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 52px;
	padding-inline: var(--s-6);
	padding-block: var(--s-3);
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 1px solid var(--btn-edge);
	border-radius: var(--r-0);
	font-family: var(--font-body);
	font-size: var(--t-sm);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition:
		background-color var(--d-2) var(--ease),
		border-color var(--d-2) var(--ease),
		color var(--d-2) var(--ease),
		opacity var(--d-1) var(--ease);
	-webkit-tap-highlight-color: transparent;
}
.btn:hover { --btn-bg: var(--wine-deep); --btn-edge: var(--wine-deep); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] {
	opacity: .42;
	pointer-events: none;
}

.btn--ghost  { --btn-bg: transparent; --btn-fg: var(--ink); --btn-edge: var(--line); }
.btn--ghost:hover { --btn-bg: transparent; --btn-fg: var(--wine); --btn-edge: var(--wine); }

.btn--quiet  { --btn-bg: transparent; --btn-fg: var(--wine); --btn-edge: transparent; padding-inline: var(--s-2); min-height: 40px; }
.btn--quiet:hover { --btn-bg: var(--wine-wash); --btn-edge: transparent; --btn-fg: var(--wine-deep); }

.btn--light  { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-edge: var(--paper); }
.btn--light:hover { --btn-bg: var(--white); --btn-edge: var(--white); --btn-fg: var(--wine); }

.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--paper); --btn-edge: rgba(251, 248, 244, .42); }
.btn--outline-light:hover { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-edge: var(--paper); }

.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 42px; padding-inline: var(--s-4); font-size: var(--t-xs); }
.btn--lg { min-height: 60px; padding-inline: var(--s-7); font-size: var(--t-base); }

.btn__icon { flex: none; }

/* Busy state for AJAX submits: the label stays (so width is stable) and a
   spinner replaces it visually. */
.btn.is-busy { pointer-events: none; color: transparent; }
.btn.is-busy::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 1.5px solid currentColor;
	border-block-start-color: var(--btn-fg);
	border-radius: var(--r-pill);
	color: color-mix(in srgb, var(--btn-fg) 34%, transparent);
	animation: leya-spin .7s linear infinite;
}
@keyframes leya-spin { to { transform: rotate(360deg); } }

/* Underlined text link with an animated rule — the site's tertiary action. */
.link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--t-sm);
	font-weight: 500;
	color: var(--ink);
	padding-block-end: 2px;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: color var(--d-2) var(--ease), background-size var(--d-2) var(--ease);
}
[dir="rtl"] .link { background-position: 100% 100%; }
.link:hover { color: var(--wine); background-size: 0 1px; }

/* The rule is drawn with a background gradient pinned to the bottom of the
   padding box, so padding the element would detach the underline from the
   text. The hit area is expanded with a pseudo-element instead: the link looks
   identical and the finger gets ~45px to aim at. Applied unconditionally
   rather than behind `(hover: none)` — a media query cannot be relied on for
   something this load-bearing, and the larger target costs a mouse nothing. */
.link { position: relative; }
.link::after {
	content: "";
	position: absolute;
	inset: -10px -6px;
}

/* Round icon control in the header and on cards. 44px hit area throughout. */
.iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--ink);
	border-radius: var(--r-pill);
	transition: background-color var(--d-1) var(--ease), color var(--d-1) var(--ease);
	-webkit-tap-highlight-color: transparent;
}
.iconbtn:hover { background: var(--wine-wash); color: var(--wine); }

/* Count bubble on the bag and wishlist icons. */
.iconbtn__count {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 3px;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	display: grid;
	place-items: center;
	background: var(--wine);
	color: var(--paper);
	border-radius: var(--r-pill);
	font-family: var(--font-num);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.iconbtn__count[hidden] { display: none; }

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */

.field { display: block; }
.field + .field { margin-block-start: var(--s-4); }

.field__label {
	display: block;
	font-size: var(--t-xs);
	font-weight: 500;
	color: var(--ink-2);
	margin-block-end: var(--s-2);
}
.field__hint { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-block-start: var(--s-2); }
.field__error { display: block; font-size: var(--t-xs); color: var(--err); margin-block-start: var(--s-2); }

.input,
.select,
.textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"], input[type="date"],
textarea, select {
	width: 100%;
	min-height: 52px;
	padding-inline: var(--s-4);
	padding-block: var(--s-3);
	background: var(--white);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--r-xs);
	font-size: var(--t-base);
	line-height: 1.5;
	transition: border-color var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease);
	appearance: none;
}
textarea { min-height: 130px; resize: vertical; }

input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }

.input:focus, .textarea:focus, .select:focus,
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--wine);
	box-shadow: 0 0 0 3px var(--wine-wash);
}
.input[aria-invalid="true"], input[aria-invalid="true"], .has-error .input {
	border-color: var(--err);
	background: var(--err-wash);
}

/* Native select needs its own caret; the arrow is drawn as a background image
   and flipped for RTL in rtl.css. */
select, .select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23191210' stroke-width='1.3'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left var(--s-4) center;
	background-size: 12px 8px;
	padding-inline-end: var(--s-4);
	padding-inline-start: var(--s-7);
	cursor: pointer;
}
[dir="ltr"] select, [dir="ltr"] .select {
	background-position: right var(--s-4) center;
	padding-inline-start: var(--s-4);
	padding-inline-end: var(--s-7);
}

/* Checkbox / radio drawn from scratch so they match the square design language. */
.check {
	display: flex;
	align-items: start;
	gap: var(--s-3);
	cursor: pointer;
	font-size: var(--t-sm);
	line-height: 1.5;
}
.check input[type="checkbox"], .check input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	margin-block-start: .18em;
	padding: 0;
	border: 1px solid var(--line);
	background: var(--white);
	border-radius: var(--r-0);
	cursor: pointer;
	display: grid;
	place-content: center;
	transition: background-color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.check input[type="radio"] { border-radius: var(--r-pill); }
.check input:checked { background: var(--wine); border-color: var(--wine); }
.check input[type="checkbox"]::after {
	content: "";
	width: 9px;
	height: 5px;
	border: 1.6px solid var(--paper);
	border-block-start: 0;
	border-inline-end: 0;
	transform: rotate(-45deg) translate(1px, -1px);
	opacity: 0;
	transition: opacity var(--d-1) var(--ease);
}
.check input[type="radio"]::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--r-pill);
	background: var(--paper);
	opacity: 0;
	transition: opacity var(--d-1) var(--ease);
}
.check input:checked::after { opacity: 1; }

/* Quantity stepper. */
.qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line);
	background: var(--white);
	height: 52px;
}
.qty__btn {
	width: 46px;
	height: 100%;
	display: grid;
	place-items: center;
	color: var(--ink-2);
	transition: color var(--d-1) var(--ease), background-color var(--d-1) var(--ease);
}
.qty__btn:hover { color: var(--wine); background: var(--wine-wash); }
.qty__btn[disabled] { opacity: .3; pointer-events: none; }
.qty input {
	width: 46px;
	min-height: 0;
	height: 100%;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--line);
	border-radius: 0;
	text-align: center;
	font-family: var(--font-num);
	font-size: var(--t-sm);
	font-variant-numeric: tabular-nums;
	background: transparent;
}
.qty input:focus { box-shadow: none; border-color: var(--line); }
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.qty input[type="number"] { -moz-appearance: textfield; }

/* --------------------------------------------------------------------------
   7. Notices, badges, pills
   -------------------------------------------------------------------------- */

.notice {
	display: flex;
	align-items: start;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-5);
	background: var(--paper-sunk);
	border-inline-start: 2px solid var(--ink-3);
	font-size: var(--t-sm);
	line-height: 1.6;
}
.notice--ok   { border-inline-start-color: var(--ok);   background: rgba(74, 107, 79, .07); }
.notice--warn { border-inline-start-color: var(--warn); background: rgba(138, 90, 43, .07); }
.notice--err  { border-inline-start-color: var(--err);  background: var(--err-wash); }
.notice__icon { flex: none; margin-block-start: .15em; color: var(--ink-2); }
.notice a { color: var(--wine); text-decoration: underline; text-underline-offset: .2em; }

/* Corner flag on a product card: «قطعة واحدة», «جديد», «تُفصَّل لك». */
.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	padding: 5px var(--s-3);
	background: var(--paper);
	color: var(--ink);
	font-size: var(--t-2xs);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .02em;
	white-space: nowrap;
}
.badge--wine { background: var(--wine); color: var(--paper); }
.badge--ink  { background: var(--ink);  color: var(--paper); }
.badge--gold { background: transparent; color: var(--gold); border: 1px solid var(--gold-soft); }
.badge--out  { background: rgba(25, 18, 16, .58); color: var(--paper); }

/* Selectable pill: size chips, filter chips, colour names. */
.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 42px;
	padding-inline: var(--s-4);
	background: var(--white);
	border: 1px solid var(--line);
	color: var(--ink);
	font-size: var(--t-sm);
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--d-1) var(--ease), color var(--d-1) var(--ease), background-color var(--d-1) var(--ease);
}
.pill:hover { border-color: var(--ink-3); }
.pill.is-active, .pill[aria-pressed="true"], .pill[aria-selected="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}
/* An unavailable size is shown, struck through, not hidden — she needs to know
   it exists before she can ask us to make it. */
.pill.is-out {
	color: var(--ink-3);
	background: var(--paper-sunk);
	border-style: dashed;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
   8. Accessibility helpers
   -------------------------------------------------------------------------- */

.sr-only,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: var(--s-4);
	z-index: var(--z-toast);
	padding: var(--s-3) var(--s-5);
	background: var(--wine);
	color: var(--paper);
	font-size: var(--t-sm);
	transition: inset-block-start var(--d-2) var(--ease);
}
.skip-link:focus { inset-block-start: var(--s-4); }

/* --------------------------------------------------------------------------
   9. Scroll-in reveal
   -------------------------------------------------------------------------- */

/* Applied by JS via IntersectionObserver. The `no-js`/reduced-motion guard is
   inverted deliberately: content is visible by default and only hidden once
   the observer confirms it will be able to reveal it again. */
.js .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--d-3) var(--ease),
		transform var(--d-3) var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   10. Print
   -------------------------------------------------------------------------- */

@media print {
	.site-header, .site-footer, .drawer, .modal, .announce,
	.fab, .sticky-buy, .skip-link { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.section { padding-block: 1rem; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}