/* Honest Junk — Christmas page (templates/christmas.php) and Christmas set product pages
   (templates/single-christmas-set.php), from the hj-christmas.html design.
   Loaded after hj-home.css and hj-cheese-barks.css (and, on set pages, hj-product.css and
   hj-gift-boxes.css). Class names start with xm- so they never collide with other pages'. */

body.hj-christmas,
body.hj-christmas-set,
body.hj-xmas-bag,
.xm-home {
	--pine: #0B3D2C;
	--holly: #B3122E;
	--holly-dk: #7D0C1F;
}

/* ── Delivery bar ────────────────────────────────────────── */
.xm-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; background: var(--holly); color: var(--paper); text-align: center; padding: 11px var(--pad-x); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; line-height: 1.4; }
.xm-bar strong { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.02em; }
.xm-bar svg { flex-shrink: 0; }
.xm-bar__sep { opacity: .6; }

/* ── Eyebrow on dark backgrounds ─────────────────────────── */
.xm-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp3); }
.xm-eyebrow::before { content: ''; width: 16px; height: 1.5px; background: currentColor; opacity: .7; }
.xm-eyebrow--light { color: rgba(255, 255, 255, 0.72); }

/* ── Hero ────────────────────────────────────────────────── */
.xm-hero,
.xm-pine { background-color: var(--pine); background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.5px, transparent 1.5px); background-size: 26px 26px; color: var(--paper); }
.xm-hero { padding: var(--sp10) 0 var(--sp9); }
.xm-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp8); align-items: center; }
.xm-hero__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.93; font-size: clamp(38px, 5.6vw, 68px); color: var(--paper); margin-bottom: var(--sp5); }
.xm-hero__title span { color: var(--yellow); }
.xm-hero__title::after,
.xm-pine__title::after { content: ''; display: block; width: 52px; height: 4px; margin-top: 14px; background-image: radial-gradient(var(--yellow) 2px, transparent 2px); background-size: 10px 4px; background-repeat: repeat-x; }
.xm-hero__body { font-family: var(--font-body); font-size: 17px; color: rgba(255, 255, 255, 0.78); line-height: 1.75; max-width: 490px; margin-bottom: var(--sp6); }
.xm-hero__btns { display: flex; gap: var(--sp3); flex-wrap: wrap; }
.xm-hero__note { display: flex; align-items: center; gap: var(--sp4); margin-top: var(--sp7); padding-top: var(--sp6); border-top: 1px solid rgba(255, 255, 255, 0.16); max-width: 520px; }
.xm-hero__note-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.xm-hero__note-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: var(--yellow); line-height: 1.2; }
.xm-hero__note-sub { font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, 0.66); line-height: 1.55; margin-top: 4px; }
.xm-hero__photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: 5px 5px 0 0 var(--ink); border: 2px solid var(--ink); }
.xm-hero__photo img { width: 100%; height: auto; display: block; }

/* Scalloped edge under the hero */
.xm-scallop { height: 14px; width: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0,0 a14,14 0 0,0 28,0' fill='none' stroke='%230B3D2C' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 28px 14px; }

/* ── Sets ────────────────────────────────────────────────── */
.xm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--sp5); margin-top: var(--sp6); }
.xm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp4); }
.xm-grid--4 .xm-set__img { margin: var(--sp3) var(--sp3) 0; }
.xm-grid--4 .xm-set__body { padding: var(--sp4); }
.xm-grid--4 .xm-set__name { font-size: 18px; }
.xm-set { position: relative; background: var(--paper); border: 1.5px solid var(--cloud); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.xm-set:hover { box-shadow: 3px 3px 0 0 var(--ink); transform: translateY(-3px); }
.xm-set__img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--cloud); margin: var(--sp4) var(--sp4) 0; border-radius: var(--r-md); }
.xm-set__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xm-set__sprig { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--pine); display: flex; align-items: center; justify-content: center; }
.xm-set__badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); background: var(--ink); color: var(--yellow); }
.xm-set__body { padding: var(--sp5); flex: 1; display: flex; flex-direction: column; }
.xm-set__code { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--holly); margin-bottom: 6px; }
.xm-set__name { font-family: var(--font-display); font-size: 19px; font-weight: 900; text-transform: uppercase; line-height: 1.08; color: var(--ink); margin-bottom: var(--sp4); }
.xm-set__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.xm-set__items { list-style: none; margin: 0; padding: 0; }
.xm-set__items li,
.xm-inside li { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; padding-left: 16px; position: relative; margin-bottom: 5px; }
.xm-set__items li::before,
.xm-inside li::before { content: ''; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--cloud); border: 1px solid var(--ink-muted); }
.xm-set__items .xm-set__free,
.xm-inside .xm-inside__free { color: var(--green); }
.xm-set__items .xm-set__free::before,
.xm-inside .xm-inside__free::before { background: var(--mint); border-color: var(--green); }
.xm-set__note { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--sp3); font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; line-height: 1.45; color: var(--holly); }
.xm-set__note svg { flex-shrink: 0; margin-top: 1px; }
.xm-set__foot { margin-top: auto; padding-top: var(--sp4); border-top: 1px solid var(--cloud); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp3); }
.xm-set__note + .xm-set__foot { margin-top: var(--sp4); }
.xm-set__body > .xm-set__note { margin-bottom: auto; }
.xm-set__was { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); text-decoration: line-through; }
.xm-set__price { font-family: var(--font-display); font-size: 22px; font-weight: 900; line-height: 1; margin-top: 3px; color: var(--ink); }
.xm-set--out .xm-set__img img { filter: grayscale(.35); opacity: .85; }
.xm-empty { margin-top: var(--sp6); font-family: var(--font-body); font-size: 15px; color: var(--ink-soft); }
.xm-empty a { color: var(--rose); border-bottom: 1px solid currentColor; }

/* ── How it works ────────────────────────────────────────── */
.xm-pine__title { color: var(--paper); }
.xm-pine__sub { color: rgba(255, 255, 255, 0.66); }
.xm-tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp6); margin-top: var(--sp7); }
.xm-tl__step { position: relative; padding-top: var(--sp6); }
.xm-tl__n { position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; font-weight: 900; }
.xm-tl__when { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); margin: var(--sp3) 0 6px; }
.xm-tl__t { font-family: var(--font-display); font-size: 17px; font-weight: 900; text-transform: uppercase; color: var(--paper); margin-bottom: var(--sp3); line-height: 1.1; }
.xm-tl__d { font-family: var(--font-body); font-size: 14px; color: rgba(255, 255, 255, 0.7); line-height: 1.7; }

/* ── Corporate ───────────────────────────────────────────── */
.xm-corp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp8); align-items: center; }
.xm-corp__list { list-style: none; margin: var(--sp5) 0 0; padding: 0; }
.xm-corp__list li { font-family: var(--font-body); font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; padding-left: 24px; position: relative; margin-bottom: var(--sp3); }
.xm-corp__list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: var(--holly); }
.xm-corp__btns { margin-top: var(--sp6); }
.xm-corp__photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: 3px 3px 0 0 var(--ink); border: 1.5px solid var(--cloud); }
.xm-corp__photo img { width: 100%; height: auto; display: block; }

/* ── FAQ (item styles from hj-gift-boxes.css) ────────────── */
.xm-faq-wrap { max-width: 820px; }
.xm-faq { margin-top: var(--sp6); }
.xm-star { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 var(--sp6); color: var(--holly); }
.xm-star::before,
.xm-star::after { content: ''; height: 1px; width: 64px; background: var(--cloud); }

/* ── Order band ──────────────────────────────────────────── */
.xm-band { position: relative; overflow: hidden; background: repeating-linear-gradient(135deg, var(--holly) 0 28px, var(--holly-dk) 28px 56px); color: var(--paper); text-align: center; }
.xm-band__inner { background: var(--holly); border-radius: var(--r-xl); padding: var(--sp8) var(--sp7); }
.xm-band__t { font-family: var(--font-display); font-size: clamp(28px, 4.4vw, 48px); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; color: var(--paper); margin-bottom: var(--sp5); }
.xm-band__t::before { content: ''; display: block; width: 120px; height: 3px; margin: 0 auto var(--sp5); background-image: repeating-linear-gradient(90deg, #fff 0 8px, transparent 8px 16px); opacity: .6; }
.xm-band__s { font-family: var(--font-body); font-size: 17px; color: rgba(255, 255, 255, 0.88); line-height: 1.7; max-width: 620px; margin: 0 auto var(--sp6); }
.xm-band__btns { display: flex; gap: var(--sp3); justify-content: center; flex-wrap: wrap; }
.xm-band__c { display: flex; gap: var(--sp4) var(--sp6); justify-content: center; flex-wrap: wrap; margin-top: var(--sp7); padding-top: var(--sp6); border-top: 1px solid rgba(255, 255, 255, 0.25); font-family: var(--font-mono); font-size: 13px; }
.xm-band__c strong { display: block; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); margin-bottom: 4px; }
.xm-band__c a:hover { text-decoration: underline; text-underline-offset: 3px; }
.xm-band__corner { position: absolute; width: 52px; height: 52px; opacity: .5; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 21V9a5 5 0 0 1 10 0'/%3E%3C/svg%3E") center / contain no-repeat; }
.xm-band__corner--tl { top: 14px; left: 14px; }
.xm-band__corner--br { bottom: 14px; right: 14px; transform: rotate(180deg); }

/* ── Home page Christmas section (parts/home-christmas.php) ── */
.xm-home { background-color: var(--pine); background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.5px, transparent 1.5px); background-size: 26px 26px; color: var(--paper); }
.xm-home .section__header { align-items: flex-end; }
.xm-home__title { color: var(--paper); }
.xm-home__title span { color: var(--yellow); }
.xm-home__sub { color: rgba(255, 255, 255, 0.72); }
.xm-home .link-more.xm-home__more { color: var(--yellow); border-bottom-color: var(--yellow); }
.xm-home__note { display: inline-flex; align-items: center; gap: var(--sp3); margin-top: var(--sp5); padding: 8px 18px 8px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); }
.xm-home__note .xm-hero__note-icon { width: 38px; height: 38px; }
.xm-home__note-text { font-family: var(--font-display); font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: var(--yellow); line-height: 1.25; }
.xm-home .xm-set { border-color: transparent; }
.xm-home .xm-set:hover { box-shadow: 4px 4px 0 0 var(--yellow); }

/* ── Christmas set product page ──────────────────────────── */
.xm-inside { list-style: none; margin: 0 0 var(--sp5); padding: 0; max-width: 520px; }
.xm-notice { display: flex; align-items: center; gap: var(--sp4); margin: 0 0 var(--sp5); padding: var(--sp4) var(--sp5); max-width: 560px; border-radius: var(--r-lg); background: var(--pine); color: var(--paper); box-shadow: 3px 3px 0 0 var(--ink); }
.xm-notice__icon { width: 42px; height: 42px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.xm-notice__title { font-family: var(--font-display); font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.2; color: var(--yellow); }
.xm-notice__sub { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); margin-top: 3px; }
.xm-pdp .pdp-assure li:first-child { color: var(--holly); font-weight: 700; }
.xm-pdp .pdp-assure li:first-child svg { color: var(--holly); }
.xm-pdp-band { background: var(--holly); }
.xm-pdp .pdp-features { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
	.xm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp5); }
	.xm-grid--4 .xm-set__img { margin: var(--sp4) var(--sp4) 0; }
	.xm-grid--4 .xm-set__body { padding: var(--sp5); }
}
@media (max-width: 1000px) {
	.xm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xm-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.xm-hero__photo { max-width: 520px; width: 100%; }
	.xm-tl { grid-template-columns: minmax(0, 1fr); gap: var(--sp5); }
	.xm-corp { grid-template-columns: minmax(0, 1fr); gap: var(--sp6); }
}
@media (max-width: 640px) {
	.xm-grid--3, .xm-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.xm-bar { font-size: 11.5px; }
	.xm-bar__sep, .xm-bar__sep + span { display: none; }
	.xm-hero { padding: var(--sp8) 0 var(--sp7); }
	.xm-hero__body { font-size: 15.5px; }
	.xm-hero__note { gap: var(--sp3); }
	.xm-hero__note-title { font-size: 15px; }
	.xm-band__inner { padding: var(--sp6) var(--sp4); }
	.xm-band__s { font-size: 15px; }
	.xm-band__corner { display: none; }
	.xm-home__note { border-radius: var(--r-lg); padding: 8px 14px 8px 8px; }
	.xm-home__note-text { font-size: 13px; }
	.xm-notice { padding: var(--sp3) var(--sp4); gap: var(--sp3); }
	.xm-notice__title { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.xm-set { transition: none; }
	.xm-set:hover { transform: none; }
}

/* ── Extra Christmas gift bag: card on the Christmas page, and the bag's own page ───── */
.xm-extra { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: var(--sp5); align-items: center; margin-top: var(--sp6); padding: var(--sp4); background: var(--paper); border: 1.5px dashed var(--holly); border-radius: var(--r-lg); }
.xm-extra__img { display: block; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: var(--cloud); }
.xm-extra__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xm-extra__name { font-family: var(--font-display); font-size: 19px; font-weight: 900; text-transform: uppercase; line-height: 1.08; color: var(--ink); margin: 0 0 var(--sp2); }
.xm-extra__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.xm-extra__desc { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 540px; }
.xm-extra__foot { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp3); }
.xm-extra__foot .xm-set__price { margin-top: 0; }
.xm-extra__btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp2); }
.xm-extra a.added_to_cart { flex-basis: 100%; text-align: right; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hj-xmas-bag .footer { padding-bottom: var(--sp6); }
.hj-xmas-bag .grecaptcha-badge { bottom: 14px !important; }
@media (max-width: 640px) {
	.xm-extra { grid-template-columns: 88px minmax(0, 1fr); gap: var(--sp4); }
	.xm-extra__name { font-size: 17px; }
	.xm-extra__foot { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-top: var(--sp3); border-top: 1px solid var(--cloud); }
	.xm-extra a.added_to_cart { text-align: left; }
}