/* ==========================================================================
   Marmaria — front-end stylesheet
   --------------------------------------------------------------------------
   Sections (jump-to):

      1.  Tokens / variables
      2.  Reset & globals
      3.  Typography
      4.  Layout primitives (container, grid, section)
      5.  Buttons & link buttons
      6.  Forms
      7.  Tags / pills / breadcrumbs
      8.  Cards (product card)
      9.  Shop archive
      10. Single product
      11. Cart page + cart table
      12. Checkout
      13. Thank-you
      14. Drawer
      15. Pagination
      16. 404 / empty states
      17. Misc helpers
      18. Media queries

   The aesthetic: dark, classy, gothic-leaning. Cinzel for ceremonial
   uppercase headings; Cormorant Garamond for editorial body; Inter for UI.
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Colour ----------------------------------------------------------- */
	--mar-bg:            #0b0b0c;
	--mar-bg-elev:       #1d1d1e;
	--mar-bg-elev-2:     #232325;
	--mar-ink:           #e9e6e0;
	--mar-ink-soft:      #c8c4bb;
	--mar-ink-mute:      #8a8378;
	--mar-line:          #2a2a2c;
	--mar-line-strong:   #3a3a3d;
	--mar-pewter:        #b9b3a7;
	--mar-pewter-warm:   #d4cdbe;
	--mar-oxblood:       #7a1e1e;
	--mar-oxblood-soft:  #9a3030;
	--mar-success:       #5e7a4f;
	--mar-overlay:       rgba(0,0,0,0.65);

	/* Type ------------------------------------------------------------- */
	--mar-font-display:  'Cinzel', 'Cormorant Garamond', Georgia, serif;
	--mar-font-serif:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--mar-font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

	--mar-text-base:     17px;
	--mar-leading:       1.65;
	--mar-tracking:      0.02em;
	--mar-tracking-wide: 0.18em;

	/* Spacing ---------------------------------------------------------- */
	--mar-gap-1:   8px;
	--mar-gap-2:  16px;
	--mar-gap-3:  24px;
	--mar-gap-4:  32px;
	--mar-gap-5:  48px;
	--mar-gap-6:  72px;
	--mar-gap-7:  96px;
	--mar-gap-8: 128px;

	/* Sizing ---------------------------------------------------------- */
	--mar-container:      1240px;
	--mar-container-text: 720px;
	--mar-radius:           2px;
	--mar-radius-md:        4px;

	/* Motion ---------------------------------------------------------- */
	--mar-ease:        cubic-bezier(.2,.7,.2,1);
	--mar-dur-fast:    160ms;
	--mar-dur-base:    280ms;
	--mar-dur-slow:    520ms;
}


/* ==========================================================================
   2. Reset & globals
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	background: var(--mar-bg);
}

body.mar-body {
	margin: 0;
	font-family: var(--mar-font-serif);
	font-size: var(--mar-text-base);
	line-height: var(--mar-leading);
	color: var(--mar-ink);
	background: var(--mar-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--mar-ink);
	text-decoration: none;
	transition: color var(--mar-dur-fast) var(--mar-ease),
	            opacity var(--mar-dur-fast) var(--mar-ease);
}
a:hover { color: var(--mar-pewter-warm); }

::selection {
	background: var(--mar-pewter);
	color: var(--mar-bg);
}

.mar-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 8px 14px;
	background: var(--mar-ink);
	color: var(--mar-bg);
	font-family: var(--mar-font-sans);
	font-size: 13px;
}
.mar-skip:focus { left: 12px; top: 12px; }

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


/* ==========================================================================
   3. Typography
   ========================================================================== */

.mar-display {
	font-family: var(--mar-font-display);
	font-weight: 500;
	font-size: clamp(2.4rem, 5vw, 4rem);
	line-height: 1.1;
	letter-spacing: 0.04em;
	margin: 0 0 var(--mar-gap-3);
	color: var(--mar-ink);
}

.mar-h2 {
	font-family: var(--mar-font-display);
	font-weight: 500;
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	letter-spacing: 0.06em;
	line-height: 1.2;
	margin: 0 0 var(--mar-gap-3);
}

.mar-h3 {
	font-family: var(--mar-font-display);
	font-weight: 500;
	font-size: 1.2rem;
	letter-spacing: var(--mar-tracking-wide);
	text-transform: uppercase;
	margin: 0 0 var(--mar-gap-2);
}

.mar-h4 {
	font-family: var(--mar-font-sans);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: var(--mar-tracking-wide);
	text-transform: uppercase;
	color: var(--mar-ink-mute);
	margin: 0 0 var(--mar-gap-1);
}

.mar-eyebrow {
	font-family: var(--mar-font-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: var(--mar-tracking-wide);
	text-transform: uppercase;
	color: var(--mar-ink-mute);
	margin: 0 0 var(--mar-gap-2);
}
.mar-eyebrow a { color: inherit; border-bottom: 1px solid transparent; }
.mar-eyebrow a:hover { border-bottom-color: var(--mar-ink-mute); }

.mar-lede {
	font-family: var(--mar-font-serif);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.6;
	color: var(--mar-ink-soft);
	max-width: 56ch;
	margin: 0 0 var(--mar-gap-4);
}

.mar-prose {
	font-family: var(--mar-font-serif);
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--mar-ink-soft);
	margin-bottom: var(--mar-gap-5);
}
.mar-prose p { margin: 0 0 var(--mar-gap-3); }
.mar-prose h2 { color: var(--mar-ink); margin-top: var(--mar-gap-5); }
.mar-prose h3 { color: var(--mar-ink); }
.mar-prose a {
	color: var(--mar-pewter-warm);
	border-bottom: 1px solid var(--mar-line-strong);
}
.mar-prose a:hover { border-bottom-color: var(--mar-pewter-warm); }
.mar-prose img { margin: var(--mar-gap-4) 0; }
.mar-prose blockquote {
	margin: var(--mar-gap-4) 0;
	padding-left: var(--mar-gap-3);
	border-left: 2px solid var(--mar-line-strong);
	font-style: italic;
	color: var(--mar-ink);
}


/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.mar-section {
	padding: var(--mar-gap-7) 0;
	background: var(--mar-bg);
}
.mar-section--narrow    { padding: var(--mar-gap-6) 0; }
.mar-section--editorial { background: var(--mar-bg-elev); }
.mar-section--related   { border-top: 1px solid var(--mar-line); }

.mar-container {
	width: min(100% - 48px, var(--mar-container));
	margin: 0 auto;
}
.mar-container--text {
	width: min(100% - 48px, var(--mar-container-text));
	margin: 0 auto;
}

.mar-grid {
	display: grid;
	gap: var(--mar-gap-4);
}
.mar-grid--products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mar-page-head { margin-bottom: var(--mar-gap-5); }
.mar-page-head--centered { text-align: center; }
.mar-page-head--centered .mar-lede { margin-left: auto; margin-right: auto; }
.mar-page-head--shop { display: flex; flex-direction: column; }


/* ==========================================================================
   5. Buttons
   ========================================================================== */

.mar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mar-font-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: var(--mar-tracking-wide);
	text-transform: uppercase;
	padding: 14px 26px;
	border: 1px solid var(--mar-ink);
	color: var(--mar-ink);
	background: transparent;
	cursor: pointer;
	transition: background var(--mar-dur-base) var(--mar-ease),
	            color var(--mar-dur-base) var(--mar-ease),
	            border-color var(--mar-dur-base) var(--mar-ease),
	            transform var(--mar-dur-fast) var(--mar-ease);
	text-align: center;
	border-radius: var(--mar-radius);
}
.mar-button:hover {
	background: var(--mar-ink);
	color: var(--mar-bg);
}
.mar-button:active { transform: translateY(1px); }
.mar-button[disabled],
.mar-button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	background: transparent;
	color: var(--mar-ink-mute);
	border-color: var(--mar-line-strong);
}

.mar-button--primary {
	background: var(--mar-ink);
	color: var(--mar-bg);
}
.mar-button--primary:hover {
	background: var(--mar-pewter-warm);
	border-color: var(--mar-pewter-warm);
	color: var(--mar-bg);
}

.mar-button--ghost {
	border-color: var(--mar-line-strong);
	color: var(--mar-ink-soft);
}
.mar-button--ghost:hover {
	background: var(--mar-bg-elev);
	color: var(--mar-ink);
	border-color: var(--mar-ink-soft);
}

.mar-button--block { display: flex; width: 100%; }

.mar-link-button {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--mar-ink-mute);
	cursor: pointer;
	letter-spacing: 0.01em;
	border-bottom: 1px solid transparent;
	transition: color var(--mar-dur-fast) var(--mar-ease),
	            border-color var(--mar-dur-fast) var(--mar-ease);
}
.mar-link-button:hover {
	color: var(--mar-ink);
	border-bottom-color: var(--mar-ink-mute);
}

.mar-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mar-gap-2);
	margin-top: var(--mar-gap-4);
}


/* ==========================================================================
   6. Forms
   ========================================================================== */

.mar-field { margin-bottom: var(--mar-gap-3); }

.mar-field label {
	display: block;
	font-family: var(--mar-font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--mar-tracking-wide);
	text-transform: uppercase;
	color: var(--mar-ink-mute);
	margin-bottom: 6px;
}

.mar-field input[type="text"],
.mar-field input[type="email"],
.mar-field input[type="tel"],
.mar-field input[type="number"],
.mar-field input[type="search"],
.mar-field textarea,
.mar-field select {
	width: 100%;
	font-family: var(--mar-font-sans);
	font-size: 15px;
	color: var(--mar-ink);
	background: var(--mar-bg-elev);
	border: 1px solid var(--mar-line-strong);
	padding: 12px 14px;
	border-radius: var(--mar-radius);
	transition: border-color var(--mar-dur-fast) var(--mar-ease),
	            background var(--mar-dur-fast) var(--mar-ease);
}
.mar-field textarea { resize: vertical; min-height: 80px; }
.mar-field input:focus,
.mar-field textarea:focus,
.mar-field select:focus {
	outline: none;
	border-color: var(--mar-pewter-warm);
	background: var(--mar-bg-elev-2);
}

.mar-field-grid {
	display: grid;
	gap: 0 var(--mar-gap-3);
	grid-template-columns: 1fr 1fr;
}
.mar-field-grid--three {
	grid-template-columns: 2fr 1fr 1.4fr;
}

.mar-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 var(--mar-gap-5);
}
.mar-fieldset legend { padding: 0; margin-bottom: var(--mar-gap-3); }

.mar-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* Quantity stepper */
.mar-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--mar-line-strong);
	border-radius: var(--mar-radius);
	background: var(--mar-bg-elev);
	overflow: hidden;
}
.mar-qty__btn {
	background: transparent;
	border: 0;
	color: var(--mar-ink-soft);
	width: 40px;
	font-size: 18px;
	font-family: var(--mar-font-sans);
	cursor: pointer;
	transition: background var(--mar-dur-fast) var(--mar-ease),
	            color var(--mar-dur-fast) var(--mar-ease);
}
.mar-qty__btn:hover { background: var(--mar-bg-elev-2); color: var(--mar-ink); }
.mar-qty__input {
	width: 56px;
	border: 0;
	border-left: 1px solid var(--mar-line-strong);
	border-right: 1px solid var(--mar-line-strong);
	background: transparent;
	color: var(--mar-ink);
	font-family: var(--mar-font-sans);
	font-size: 15px;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.mar-qty__input::-webkit-outer-spin-button,
.mar-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.mar-qty--compact .mar-qty__btn { width: 32px; }
.mar-qty--compact .mar-qty__input { width: 40px; font-size: 14px; }


/* ==========================================================================
   7. Tags / pills / breadcrumbs
   ========================================================================== */

.mar-tag {
	display: inline-block;
	font-family: var(--mar-font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: var(--mar-tracking-wide);
	text-transform: uppercase;
	padding: 4px 10px;
	background: var(--mar-bg-elev-2);
	color: var(--mar-ink-soft);
	border: 1px solid var(--mar-line-strong);
	border-radius: 999px;
}
.mar-tag--sale { background: var(--mar-oxblood); color: var(--mar-ink); border-color: var(--mar-oxblood-soft); }
.mar-tag--ooak { background: transparent; color: var(--mar-pewter-warm); border-color: var(--mar-pewter); }
.mar-tag--sold { background: var(--mar-bg); color: var(--mar-ink-mute); }

.mar-breadcrumbs {
	font-family: var(--mar-font-sans);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--mar-ink-mute);
	margin-bottom: var(--mar-gap-4);
}
.mar-breadcrumbs a { color: inherit; }
.mar-breadcrumbs a:hover { color: var(--mar-ink); }
.mar-breadcrumbs__sep { margin: 0 8px; opacity: 0.5; }
.mar-breadcrumbs [aria-current="page"] { color: var(--mar-ink-soft); }


/* ==========================================================================
   8. Cards (product card)
   ========================================================================== */

.mar-card { display: block; }

.mar-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--mar-bg-elev);
	aspect-ratio: 3/4;
	border: 1px solid var(--mar-line);
}
.mar-card__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--mar-dur-slow) var(--mar-ease),
	            opacity var(--mar-dur-base) var(--mar-ease);
}
.mar-card__media:hover .mar-card__img {
	transform: scale(1.04);
	opacity: 0.92;
}
.mar-card__placeholder {
	display: block;
	width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--mar-bg-elev), var(--mar-bg-elev-2));
}

.mar-card__tags {
	position: absolute;
	left: 12px; top: 12px;
	display: flex;
	gap: 6px;
}

.mar-card__body {
	padding: var(--mar-gap-2) 0 var(--mar-gap-3);
	text-align: center;
}
.mar-card__title {
	font-family: var(--mar-font-display);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: var(--mar-tracking-wide);
	text-transform: uppercase;
	margin: 0 0 6px;
}
.mar-card__title a { color: var(--mar-ink); }
.mar-card__title a:hover { color: var(--mar-pewter-warm); }
.mar-card__subtitle {
	font-family: var(--mar-font-serif);
	font-style: italic;
	color: var(--mar-ink-mute);
	font-size: 0.95rem;
	margin: 0 0 6px;
}
.mar-card__price {
	font-family: var(--mar-font-sans);
	font-size: 14px;
	color: var(--mar-ink-soft);
}

.mar-price del { color: var(--mar-ink-mute); margin-right: 6px; }
.mar-price ins { text-decoration: none; color: var(--mar-pewter-warm); }
.mar-price--unavailable { color: var(--mar-ink-mute); font-style: italic; }


/* ==========================================================================
   9. Shop archive
   ========================================================================== */

.mar-shop-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mar-gap-2);
	padding: var(--mar-gap-3) 0;
	margin-bottom: var(--mar-gap-4);
	border-top: 1px solid var(--mar-line);
	border-bottom: 1px solid var(--mar-line);
	flex-wrap: wrap;
}
.mar-shop-bar__count {
	font-family: var(--mar-font-sans);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--mar-ink-mute);
	margin: 0;
}
.mar-shop-bar__sort select {
	font-family: var(--mar-font-sans);
	font-size: 13px;
	color: var(--mar-ink);
	background: transparent;
	border: 1px solid var(--mar-line-strong);
	padding: 8px 12px;
	border-radius: var(--mar-radius);
	cursor: pointer;
}


/* ==========================================================================
   10. Single product
   ========================================================================== */

.mar-product {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--mar-gap-6);
	align-items: start;
}

.mar-product__gallery { position: sticky; top: var(--mar-gap-4); }

.mar-product__hero {
	position: relative;
	aspect-ratio: 4/5;
	overflow: hidden;
	background: var(--mar-bg-elev);
	border: 1px solid var(--mar-line);
}
.mar-product__hero-img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.mar-product__hero--placeholder {
	display: flex; align-items: center; justify-content: center;
	color: var(--mar-ink-mute);
	font-style: italic;
}
.mar-product__hero .mar-tag { position: absolute; top: 14px; left: 14px; }

.mar-product__thumbs {
	display: flex;
	gap: var(--mar-gap-1);
	margin: var(--mar-gap-2) 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
}
.mar-product__thumb {
	border: 1px solid var(--mar-line);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: border-color var(--mar-dur-fast) var(--mar-ease);
	width: 80px; height: 80px;
}
.mar-product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mar-product__thumb:hover { border-color: var(--mar-ink-soft); }
.mar-product__thumb.is-active { border-color: var(--mar-pewter-warm); }

.mar-product__title {
	font-family: var(--mar-font-display);
	font-weight: 500;
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: 0.04em;
	margin: 0 0 var(--mar-gap-1);
}
.mar-product__subtitle {
	font-family: var(--mar-font-serif);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--mar-ink-mute);
	margin: 0 0 var(--mar-gap-3);
}
.mar-product__price {
	font-family: var(--mar-font-sans);
	font-size: 1.25rem;
	color: var(--mar-pewter-warm);
	margin-bottom: var(--mar-gap-4);
	padding-bottom: var(--mar-gap-3);
	border-bottom: 1px solid var(--mar-line);
}
.mar-product__short {
	font-family: var(--mar-font-serif);
	font-size: 1.05rem;
	color: var(--mar-ink-soft);
	margin-bottom: var(--mar-gap-4);
}

.mar-product__attrs {
	margin: 0 0 var(--mar-gap-4);
	padding: 0;
	border-top: 1px solid var(--mar-line);
}
.mar-product__attrs-row {
	display: grid;
	grid-template-columns: 140px 1fr;
	padding: 10px 0;
	border-bottom: 1px solid var(--mar-line);
	font-family: var(--mar-font-sans);
	font-size: 14px;
	gap: var(--mar-gap-2);
}
.mar-product__attrs dt { color: var(--mar-ink-mute); letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; padding-top: 2px; }
.mar-product__attrs dd { margin: 0; color: var(--mar-ink); }

.mar-add-to-cart {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--mar-gap-2);
	margin-bottom: var(--mar-gap-3);
}
.mar-add-to-cart .mar-button { grid-column: 2; }
.mar-add-to-cart__feedback {
	grid-column: 1 / -1;
	margin: 0;
	font-family: var(--mar-font-sans);
	font-size: 13px;
	color: var(--mar-ink-soft);
	min-height: 1.4em;
}
.mar-add-to-cart__feedback.is-error { color: var(--mar-oxblood-soft); }
.mar-add-to-cart__feedback.is-success { color: var(--mar-pewter-warm); }

.mar-product__meta {
	list-style: none; padding: 0; margin: var(--mar-gap-3) 0 0;
	display: grid;
	gap: 6px;
	font-family: var(--mar-font-sans);
	font-size: 12px;
	color: var(--mar-ink-mute);
}
.mar-product__meta li { display: flex; gap: var(--mar-gap-2); }
.mar-product__meta span {
	min-width: 60px;
	letter-spacing: var(--mar-tracking-wide);
	text-transform: uppercase;
	font-weight: 500;
}


/* ==========================================================================
   11. Cart page
   ========================================================================== */

.mar-cart {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: var(--mar-gap-5);
	align-items: start;
}

.mar-cart-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--mar-font-sans);
	font-size: 14px;
}
.mar-cart-table thead th {
	text-align: left;
	font-size: 11px;
	letter-spacing: var(--mar-tracking-wide);
	text-transform: uppercase;
	color: var(--mar-ink-mute);
	padding: 12px 14px;
	border-bottom: 1px solid var(--mar-line);
}
.mar-cart-table__th-price,
.mar-cart-table__th-qty,
.mar-cart-table__th-total,
.mar-cart-table__th-remove { text-align: right; }
.mar-cart-table tbody td {
	padding: var(--mar-gap-3) 14px;
	border-bottom: 1px solid var(--mar-line);
	vertical-align: middle;
}
.mar-cart-table__product {
	display: flex;
	gap: var(--mar-gap-2);
	align-items: center;
}
.mar-cart-table__thumb img {
	width: 72px; height: 72px;
	object-fit: cover;
	border: 1px solid var(--mar-line);
}
.mar-cart-table__title a {
	font-family: var(--mar-font-display);
	font-size: 0.85rem;
	letter-spacing: var(--mar-tracking-wide);
	text-transform: uppercase;
}
.mar-cart-table__sku {
	display: block;
	font-family: var(--mar-font-sans);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--mar-ink-mute);
	margin-top: 4px;
}
.mar-cart-table__price,
.mar-cart-table__total { text-align: right; color: var(--mar-ink-soft); }
.mar-cart-table__total { color: var(--mar-ink); }
.mar-cart-table__qty { text-align: right; }
.mar-cart-table__remove { text-align: right; }

.mar-cart__summary {
	background: var(--mar-bg-elev);
	border: 1px solid var(--mar-line);
	padding: var(--mar-gap-4);
	position: sticky;
	top: var(--mar-gap-4);
}
.mar-summary {
	margin: 0 0 var(--mar-gap-3);
	font-family: var(--mar-font-sans);
	font-size: 14px;
}
.mar-summary__row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--mar-line);
	color: var(--mar-ink-soft);
}
.mar-summary__row dt { color: var(--mar-ink-mute); }
.mar-summary__row dd { margin: 0; }
.mar-summary__row--total {
	border-bottom: none;
	padding-top: var(--mar-gap-2);
	font-size: 1rem;
	color: var(--mar-ink);
}
.mar-summary__row--total dt,
.mar-summary__row--total dd { font-family: var(--mar-font-display); letter-spacing: var(--mar-tracking-wide); text-transform: uppercase; font-weight: 500; }
.mar-summary__note { margin-top: var(--mar-gap-2); font-size: 13px; }
.mar-summary--compact .mar-summary__row { padding: 4px 0; }


/* ==========================================================================
   12. Checkout
   ========================================================================== */

.mar-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: var(--mar-gap-5);
	align-items: start;
}

.mar-checkout__form { background: var(--mar-bg); }
.mar-checkout__summary {
	background: var(--mar-bg-elev);
	border: 1px solid var(--mar-line);
	padding: var(--mar-gap-4);
	position: sticky;
	top: var(--mar-gap-4);
}

.mar-checkout__lines {
	list-style: none;
	margin: 0 0 var(--mar-gap-3);
	padding: 0 0 var(--mar-gap-3);
	border-bottom: 1px solid var(--mar-line);
	display: grid;
	gap: var(--mar-gap-2);
}
.mar-checkout__lines li {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: var(--mar-gap-2);
	align-items: center;
	font-size: 13px;
}
.mar-checkout__thumb img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--mar-line); }
.mar-checkout__line-meta { display: flex; flex-direction: column; }
.mar-checkout__line-name {
	font-family: var(--mar-font-display);
	font-size: 0.78rem;
	letter-spacing: var(--mar-tracking-wide);
	text-transform: uppercase;
	color: var(--mar-ink);
}
.mar-checkout__line-qty { color: var(--mar-ink-mute); font-family: var(--mar-font-sans); font-size: 12px; }
.mar-checkout__line-total { color: var(--mar-ink-soft); font-family: var(--mar-font-sans); }

.mar-checkout__shipping-note {
	margin-top: var(--mar-gap-2);
	padding-top: var(--mar-gap-2);
	border-top: 1px solid var(--mar-line);
	font-size: 13px;
	color: var(--mar-ink-mute);
	font-style: italic;
}

.mar-checkout__feedback {
	min-height: 1.4em;
	margin: 0 0 var(--mar-gap-2);
	font-family: var(--mar-font-sans);
	font-size: 14px;
	color: var(--mar-ink-soft);
}
.mar-checkout__feedback.is-error   { color: var(--mar-oxblood-soft); }
.mar-checkout__feedback.is-success { color: var(--mar-pewter-warm); }

.mar-fineprint {
	font-size: 12px;
	color: var(--mar-ink-mute);
	margin-top: var(--mar-gap-2);
	font-style: italic;
}


/* ==========================================================================
   13. Thank-you
   ========================================================================== */

.mar-thanks-card {
	background: var(--mar-bg-elev);
	border: 1px solid var(--mar-line);
	padding: var(--mar-gap-5);
	margin: var(--mar-gap-4) 0;
}
.mar-thanks-lines {
	list-style: none;
	margin: 0 0 var(--mar-gap-3);
	padding: 0 0 var(--mar-gap-3);
	border-bottom: 1px solid var(--mar-line);
	font-family: var(--mar-font-sans);
}
.mar-thanks-lines li {
	display: flex;
	justify-content: space-between;
	gap: var(--mar-gap-2);
	padding: 6px 0;
}
.mar-thanks-lines__qty { color: var(--mar-ink-mute); margin-left: 6px; }
.mar-thanks-card__where { margin-top: var(--mar-gap-4); padding-top: var(--mar-gap-3); border-top: 1px solid var(--mar-line); }
.mar-thanks-card address { font-style: normal; color: var(--mar-ink-soft); line-height: 1.6; }


/* ==========================================================================
   14. Drawer
   ========================================================================== */

.mar-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	pointer-events: none;
	visibility: hidden;
}
.mar-drawer[aria-hidden="false"] { pointer-events: auto; visibility: visible; }

.mar-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: var(--mar-overlay);
	opacity: 0;
	transition: opacity var(--mar-dur-base) var(--mar-ease);
}
.mar-drawer[aria-hidden="false"] .mar-drawer__backdrop { opacity: 1; }

.mar-drawer__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(420px, 100%);
	background: var(--mar-bg);
	border-left: 1px solid var(--mar-line);
	transform: translateX(100%);
	transition: transform var(--mar-dur-base) var(--mar-ease);
	display: flex;
	flex-direction: column;
}
.mar-drawer[aria-hidden="false"] .mar-drawer__panel { transform: translateX(0); }

.mar-drawer__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--mar-gap-3) var(--mar-gap-4);
	border-bottom: 1px solid var(--mar-line);
}
.mar-drawer__head .mar-h3 { margin: 0; }
.mar-drawer__close {
	background: transparent;
	border: 0;
	color: var(--mar-ink-soft);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	transition: color var(--mar-dur-fast) var(--mar-ease);
}
.mar-drawer__close:hover { color: var(--mar-ink); }

.mar-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var(--mar-gap-3) var(--mar-gap-4);
}
.mar-drawer__empty { text-align: center; padding: var(--mar-gap-5) 0; color: var(--mar-ink-mute); }
.mar-drawer__empty p { margin: 0 0 var(--mar-gap-3); }

.mar-drawer__lines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mar-gap-3);
}
.mar-drawer__lines li {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: var(--mar-gap-2);
	padding-bottom: var(--mar-gap-3);
	border-bottom: 1px solid var(--mar-line);
}
.mar-drawer__thumb img { width: 80px; height: 80px; object-fit: cover; border: 1px solid var(--mar-line); }
.mar-drawer__name {
	font-family: var(--mar-font-display);
	font-size: 0.78rem;
	letter-spacing: var(--mar-tracking-wide);
	text-transform: uppercase;
	color: var(--mar-ink);
	display: block;
	margin-bottom: 4px;
}
.mar-drawer__price {
	font-family: var(--mar-font-sans);
	font-size: 14px;
	color: var(--mar-pewter-warm);
	margin-bottom: var(--mar-gap-1);
}
.mar-drawer__controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--mar-gap-2);
}
.mar-drawer__remove { font-size: 12px; }

.mar-drawer__foot {
	border-top: 1px solid var(--mar-line);
	padding: var(--mar-gap-3) var(--mar-gap-4);
	background: var(--mar-bg-elev);
}
.mar-drawer__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mar-gap-2);
	margin-top: var(--mar-gap-2);
}


/* ==========================================================================
   15. Pagination
   ========================================================================== */

.nav-links,
.mar-pagination {
	display: flex;
	gap: var(--mar-gap-1);
	justify-content: center;
	margin: var(--mar-gap-5) 0 0;
	font-family: var(--mar-font-sans);
}
.page-numbers {
	display: inline-flex;
	min-width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid var(--mar-line);
	color: var(--mar-ink-soft);
	font-size: 14px;
	transition: border-color var(--mar-dur-fast) var(--mar-ease),
	            color var(--mar-dur-fast) var(--mar-ease);
}
.page-numbers:hover { border-color: var(--mar-ink-soft); color: var(--mar-ink); }
.page-numbers.current {
	background: var(--mar-ink);
	color: var(--mar-bg);
	border-color: var(--mar-ink);
}


/* ==========================================================================
   16. 404 / empty states
   ========================================================================== */

.mar-empty {
	text-align: center;
	padding: var(--mar-gap-6) 0;
	color: var(--mar-ink-mute);
	font-family: var(--mar-font-serif);
	font-style: italic;
	font-size: 1.1rem;
}
.mar-empty p { margin: 0 0 var(--mar-gap-3); }
.mar-empty--cart .mar-button { font-style: normal; }


/* ==========================================================================
   17. Misc helpers
   ========================================================================== */

.mar-section-head { text-align: center; margin-bottom: var(--mar-gap-5); }
.mar-page { padding: var(--mar-gap-7) 0; }
.mar-page__content { max-width: var(--mar-container); margin: 0 auto; padding: 0 24px; }


/* ==========================================================================
   18. Media queries
   ========================================================================== */

@media (min-width: 600px) {
	.mar-grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
	.mar-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mar-add-to-cart { grid-template-columns: auto 1fr; }
}

@media (max-width: 960px) {
	.mar-product { grid-template-columns: 1fr; gap: var(--mar-gap-4); }
	.mar-product__gallery { position: static; }
	.mar-cart { grid-template-columns: 1fr; }
	.mar-checkout { grid-template-columns: 1fr; }
	.mar-cart__summary,
	.mar-checkout__summary { position: static; }
}

@media (max-width: 720px) {
	.mar-section { padding: var(--mar-gap-5) 0; }
	.mar-page-head { margin-bottom: var(--mar-gap-3); }
	.mar-field-grid,
	.mar-field-grid--three { grid-template-columns: 1fr; }
	.mar-cart-table thead { display: none; }
	.mar-cart-table tbody td {
		display: block;
		text-align: left;
		border-bottom: 0;
		padding: 4px 0;
	}
	.mar-cart-table tbody tr {
		display: grid;
		grid-template-columns: 1fr;
		padding: var(--mar-gap-3) 0;
		border-bottom: 1px solid var(--mar-line);
	}
	.mar-cart-table__product { padding-bottom: var(--mar-gap-2); }
}

@media (max-width: 480px) {
	.mar-button { padding: 12px 18px; font-size: 12px; }
	.mar-display { font-size: 2rem; }
}


/* ==========================================================================
   19. Header
   ========================================================================== */

.mar-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(11,11,12,0.85);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--mar-line);
}

.mar-header__inner {
	width: min(100% - 48px, var(--mar-container));
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mar-gap-3);
	padding: 16px 0;
}

.mar-logo {
	font-family: var(--mar-font-display);
	font-weight: 500;
	font-size: 1.35rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--mar-ink);
	flex: 0 0 auto;
	white-space: nowrap;
}
.mar-logo:hover { color: var(--mar-pewter-warm); }

.mar-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}
.mar-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--mar-gap-4);
}
.mar-nav-list a {
	font-family: var(--mar-font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--mar-tracking-wide);
	text-transform: uppercase;
	color: var(--mar-ink-soft);
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	transition: color var(--mar-dur-fast) var(--mar-ease),
	            border-color var(--mar-dur-fast) var(--mar-ease);
}
.mar-nav-list a:hover,
.mar-nav-list .current-menu-item > a,
.mar-nav-list .current_page_item > a {
	color: var(--mar-ink);
	border-bottom-color: var(--mar-pewter);
}

.mar-cart-toggle {
	position: relative;
	background: transparent;
	border: 0;
	color: var(--mar-ink);
	cursor: pointer;
	padding: 8px;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	transition: color var(--mar-dur-fast) var(--mar-ease);
}
.mar-cart-toggle:hover { color: var(--mar-pewter-warm); }

.mar-cart-toggle__count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--mar-pewter-warm);
	color: var(--mar-bg);
	font-family: var(--mar-font-sans);
	font-size: 10px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	transition: opacity var(--mar-dur-fast) var(--mar-ease),
	            transform var(--mar-dur-fast) var(--mar-ease);
}
.mar-cart-toggle__count.is-empty {
	opacity: 0;
	transform: scale(0.6);
}

.mar-mobile-toggle {
	display: none;
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
	color: var(--mar-ink);
	width: 40px;
	height: 40px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
}
.mar-mobile-toggle span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--mar-dur-fast) var(--mar-ease),
	            opacity var(--mar-dur-fast) var(--mar-ease);
}
body.is-nav-open .mar-mobile-toggle span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
body.is-nav-open .mar-mobile-toggle span:nth-child(2) {
	opacity: 0;
}
body.is-nav-open .mar-mobile-toggle span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 960px) {
	.mar-mobile-toggle { display: flex; }
	.mar-header__inner { padding: 12px 0; }
	.mar-logo { font-size: 1.15rem; letter-spacing: 0.22em; }

	.mar-nav {
		position: fixed;
		inset: 64px 0 0;
		background: var(--mar-bg);
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: var(--mar-gap-5) var(--mar-gap-3);
		opacity: 0;
		pointer-events: none;
		transform: translateY(-12px);
		transition: opacity var(--mar-dur-base) var(--mar-ease),
		            transform var(--mar-dur-base) var(--mar-ease);
		z-index: 90;
	}
	body.is-nav-open .mar-nav {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}
	.mar-nav-list {
		flex-direction: column;
		align-items: center;
		gap: var(--mar-gap-3);
	}
	.mar-nav-list a {
		font-size: 14px;
		letter-spacing: 0.22em;
	}
	body.is-nav-open { overflow: hidden; }
}


/* ==========================================================================
   20. Footer
   ========================================================================== */

.mar-footer {
	background: var(--mar-bg);
	border-top: 1px solid var(--mar-line);
	padding: var(--mar-gap-7) 0 var(--mar-gap-4);
	color: var(--mar-ink-soft);
}

.mar-footer__inner {
	width: min(100% - 48px, var(--mar-container));
	margin: 0 auto;
}

.mar-footer__top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--mar-gap-5);
	margin-bottom: var(--mar-gap-5);
}

.mar-footer__brand .mar-eyebrow { color: var(--mar-pewter); }
.mar-footer__tagline {
	font-family: var(--mar-font-serif);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--mar-ink-soft);
	max-width: 32ch;
	margin: 0;
}

.mar-footer__heading {
	font-family: var(--mar-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--mar-tracking-wide);
	text-transform: uppercase;
	color: var(--mar-ink-mute);
	margin: 0 0 var(--mar-gap-2);
}

.mar-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mar-footer__col a {
	font-family: var(--mar-font-serif);
	font-size: 1rem;
	color: var(--mar-ink-soft);
	transition: color var(--mar-dur-fast) var(--mar-ease);
}
.mar-footer__col a:hover { color: var(--mar-ink); }

.mar-footer__divider {
	position: relative;
	height: 1px;
	background: var(--mar-line);
	margin: var(--mar-gap-4) 0;
}
.mar-footer__diamond {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	background: var(--mar-pewter);
	transform: translate(-50%, -50%) rotate(45deg);
}

.mar-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--mar-gap-2);
	font-family: var(--mar-font-sans);
	font-size: 12px;
	color: var(--mar-ink-mute);
}
.mar-footer__bottom p { margin: 0; }
.mar-footer__legal { font-style: italic; }

@media (max-width: 720px) {
	.mar-footer { padding: var(--mar-gap-5) 0 var(--mar-gap-3); }
	.mar-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: var(--mar-gap-4);
	}
	.mar-footer__brand { grid-column: 1 / -1; }
	.mar-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}
/* ==========================================================================
   21. Mobile polish — assertive overrides
   ========================================================================== */

/* ---------- Hero on mobile: drop the photo, keep the type ---------------- */
@media (max-width: 720px) {
	.mar-home-hero {
		background:
			linear-gradient(180deg, rgba(11,11,12,0.45) 0%, rgba(11,11,12,0.95) 100%),
			#0b0b0c !important;
		min-height: 72vh !important;
	}
	.mar-home-hero .mar-display {
		font-size: clamp(2rem, 8vw, 2.6rem) !important;
	}
}

/* ---------- Header on mobile: visible hamburger + slide-in nav ----------- */
@media (max-width: 960px) {
	.mar-mobile-toggle { display: flex !important; }
	.mar-header__inner { padding: 12px 0 !important; }
	.mar-logo {
		font-size: 1.05rem !important;
		letter-spacing: 0.22em !important;
	}
	.mar-nav {
		position: fixed !important;
		inset: 60px 0 0 !important;
		background: var(--mar-bg) !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 48px 24px !important;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-12px);
		transition: opacity .28s ease, transform .28s ease;
		z-index: 90;
	}
	body.is-nav-open .mar-nav {
		opacity: 1 !important;
		pointer-events: auto !important;
		transform: translateY(0) !important;
	}
	.mar-nav .mar-nav-list,
	.mar-nav ul {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 28px !important;
	}
	.mar-nav .mar-nav-list li,
	.mar-nav ul li {
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.mar-nav .mar-nav-list a,
	.mar-nav ul a {
		font-family: var(--mar-font-sans) !important;
		font-size: 14px !important;
		font-weight: 500 !important;
		letter-spacing: 0.22em !important;
		text-transform: uppercase !important;
		color: var(--mar-ink) !important;
		border-bottom: 0 !important;
		padding: 0 !important;
	}
	body.is-nav-open { overflow: hidden; }
}

/* ---------- Footer on mobile: clean, compact, no bullets ---------------- */
@media (max-width: 720px) {
	.mar-footer { padding: 56px 0 24px !important; }
	.mar-footer__inner {
		width: min(100% - 32px, var(--mar-container)) !important;
	}
	.mar-footer__top {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
		margin-bottom: 24px !important;
	}
	.mar-footer__brand {
		grid-column: 1 / -1;
		padding-bottom: 8px;
	}
	.mar-footer__tagline {
		max-width: none !important;
		font-size: 1rem !important;
	}
	.mar-footer__col {
		padding-top: 20px;
		margin-top: 8px;
		border-top: 1px solid var(--mar-line);
	}
	.mar-footer__heading {
		font-family: var(--mar-font-sans) !important;
		font-size: 11px !important;
		font-weight: 600 !important;
		letter-spacing: 0.18em !important;
		text-transform: uppercase !important;
		color: var(--mar-ink-mute) !important;
		margin: 0 0 14px !important;
	}
	.mar-footer ul,
	.mar-footer__col ul {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
	}
	.mar-footer ul li,
	.mar-footer__col li {
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.mar-footer__col a {
		font-family: var(--mar-font-serif) !important;
		font-size: 1.05rem !important;
		color: var(--mar-ink-soft) !important;
	}
	.mar-footer__divider { margin: 24px 0 !important; }
	.mar-footer__bottom {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 6px !important;
		font-size: 11px !important;
	}
}