/**
 * The content pages: shipping, contact, FAQs, announcements.
 *
 * WHM-85.
 *
 * WHAT THESE WERE. Four pages built in Elementor, each carrying a complete
 * second design in a <style> block inside post_content: an @import for Anton
 * and Barlow Condensed, #FF6B00 headings, black panels, and a full-bleed hack
 * that pulled each one out of the page container with left:50% and -50vw. The
 * FAQ page went further and held an entire <!DOCTYPE html> document, head and
 * all, pasted into the post body.
 *
 * WHAT THEY ARE NOW. Semantic markup carrying class names, styled from here.
 * Every word survives; the diff was checked word by word against the rendered
 * text of the originals before anything was written. What went is the styling,
 * the duplicate fonts and the full-bleed hack, so these pages sit in the same
 * container, on the same type scale, in the same palette as the rest of the
 * store.
 *
 * THE FAQ IS NATIVE <details>. No accordion script, no ARIA to get wrong, and
 * it works on a page served from a week-long full page cache. Open state is the
 * browser's, and a find-in-page in Chrome will open a closed answer to show a
 * match, which no JavaScript accordion does for free.
 */

.ep-pg {
	--ep-pg-w: 860px;
	max-width: var(--ep-pg-w);
	margin: 0 auto;
	padding: var(--ep-s-10) var(--ep-gutter-now, var(--ep-s-5)) var(--ep-s-16);
	color: var(--ep-lt-ink);
	font-size: var(--ep-t-base);
	line-height: var(--ep-lh-body);
}

/* ---------------------------------------------------------------------------
   THE HEAD
   --------------------------------------------------------------------------- */
.ep-pg__head { margin-bottom: var(--ep-s-8); }
.ep-pg__eyebrow {
	margin: 0 0 var(--ep-s-2);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ep-vio-deep);
}
.ep-pg h1 {
	margin: 0;
	font-size: var(--ep-t-3xl);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-head);
	line-height: var(--ep-lh-tight);
	text-wrap: balance;
	color: var(--ep-lt-ink);
}
.ep-pg__lead {
	max-width: 60ch;
	margin: var(--ep-s-3) 0 0;
	font-size: var(--ep-t-lg);
	line-height: 1.55;
	color: var(--ep-lt-mut);
}

/* The credential strip that opened the FAQ page. */
.ep-pg__cred {
	margin: 0 0 var(--ep-s-8);
	padding: var(--ep-s-5) var(--ep-s-6);
	background: var(--ep-lt-tint);
	border: 1px solid var(--ep-lt-tint-e);
	border-radius: var(--ep-r-md);
}
.ep-pg__cred h2 {
	margin: 0 0 var(--ep-s-2);
	font-size: var(--ep-t-lg);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-sub);
	color: var(--ep-lt-ink);
}
.ep-pg__cred p { margin: 0; font-size: var(--ep-t-sm); color: var(--ep-lt-ink-2); }

/* ---------------------------------------------------------------------------
   THE HIGHLIGHT

   One claim per page gets this: the free delivery threshold on shipping. It is
   the fact a customer came to the page for.
   --------------------------------------------------------------------------- */
.ep-pg__note {
	margin: 0 0 var(--ep-s-6);
	padding: var(--ep-s-5) var(--ep-s-6);
	background: var(--ep-lt-tint);
	border: 1px solid var(--ep-lt-tint-e);
	border-left: 3px solid var(--ep-vio-deep);
	border-radius: var(--ep-r-md);
}
.ep-pg__note h2 {
	margin: 0 0 var(--ep-s-1);
	font-size: var(--ep-t-lg);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-sub);
	color: var(--ep-vio-deep);
}
.ep-pg__note p { margin: 0; font-size: var(--ep-t-sm); color: var(--ep-lt-ink-2); }

/* ---------------------------------------------------------------------------
   THE CARD LISTS

   Icons are drawn from CSS through a modifier class rather than sitting in the
   page body as SVG. That keeps post_content plain text, which matters because
   the client edits these in wp-admin: kses strips inline SVG from anyone
   without unfiltered_html, and a page that loses its icons on someone else's
   save is a page that will lose them.
   --------------------------------------------------------------------------- */
.ep-pg__list,
.ep-pg__chan {
	display: grid;
	gap: var(--ep-s-3);
	margin: 0 0 var(--ep-s-8);
	padding: 0;
	list-style: none;
}
.ep-pg__item {
	position: relative;
	margin: 0;
	padding: var(--ep-s-5) var(--ep-s-6) var(--ep-s-5) 66px;
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
}
.ep-pg__item h2 {
	margin: 0 0 var(--ep-s-2);
	font-size: var(--ep-t-md);
	font-weight: var(--ep-w-bold);
	letter-spacing: var(--ep-track-sub);
	color: var(--ep-lt-ink);
}
.ep-pg__item p { margin: 0; font-size: var(--ep-t-sm); line-height: 1.6; color: var(--ep-lt-ink-2); }
.ep-pg__item p + .ep-pg__btns { margin-top: var(--ep-s-4); }
.ep-pg__item strong { color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); }
.ep-pg__item::before {
	content: "";
	position: absolute;
	left: var(--ep-s-5);
	top: var(--ep-s-5);
	width: 26px;
	height: 26px;
	background: var(--ep-vio-deep);
	-webkit-mask: var(--ep-pg-icon, none) center / contain no-repeat;
	mask: var(--ep-pg-icon, none) center / contain no-repeat;
}
.ep-pg__item.is-truck { --ep-pg-icon: var(--ep-icon-truck); }
.ep-pg__item.is-clock { --ep-pg-icon: var(--ep-icon-clock); }
.ep-pg__item.is-shield { --ep-pg-icon: var(--ep-icon-shield); }
.ep-pg__item.is-globe { --ep-pg-icon: var(--ep-icon-globe); }
.ep-pg__item.is-wa { --ep-pg-icon: var(--ep-icon-wa); }
.ep-pg__item.is-tg { --ep-pg-icon: var(--ep-icon-tg); }
.ep-pg__item.is-wa::before { background: var(--ep-lt-ok); }

/* ---------------------------------------------------------------------------
   SECTIONS AND GRIDS
   --------------------------------------------------------------------------- */
.ep-pg__sec { margin: 0 0 var(--ep-s-8); }
.ep-pg__h2 {
	margin: 0 0 var(--ep-s-4);
	padding-bottom: var(--ep-s-3);
	border-bottom: 1px solid var(--ep-lt-line);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ep-lt-mut);
}
.ep-pg__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ep-s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ep-pg__grid li {
	margin: 0;
	padding: var(--ep-s-5);
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
}
.ep-pg__grid h3 {
	margin: 0 0 var(--ep-s-2);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-bold);
	color: var(--ep-lt-ink);
}
.ep-pg__grid p { margin: 0; font-size: var(--ep-t-sm); line-height: 1.55; color: var(--ep-lt-ink-2); }

/* ---------------------------------------------------------------------------
   THE FAQ

   <details> with a real disclosure triangle drawn as a chevron, because the
   browser's default marker is inconsistent across engines and cannot be
   coloured.
   --------------------------------------------------------------------------- */
.ep-pg__faq {
	display: grid;
	gap: var(--ep-s-2);
}
.ep-pg__faq details {
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
	overflow: hidden;
}
.ep-pg__faq details[open] { border-color: var(--ep-lt-line-2); }
.ep-pg__faq summary {
	position: relative;
	display: block;
	padding: var(--ep-s-4) 52px var(--ep-s-4) var(--ep-s-5);
	font-size: var(--ep-t-base);
	font-weight: var(--ep-w-semi);
	color: var(--ep-lt-ink);
	cursor: pointer;
	list-style: none;
}
.ep-pg__faq summary::-webkit-details-marker { display: none; }
.ep-pg__faq summary::marker { content: ""; }
.ep-pg__faq summary:hover { color: var(--ep-vio-deep); }
.ep-pg__faq summary:focus-visible { outline: var(--ep-focus); outline-offset: calc(var(--ep-focus-offset) * -1); }
.ep-pg__faq summary::after {
	content: "";
	position: absolute;
	right: var(--ep-s-5);
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -6px;
	border-right: 2px solid var(--ep-lt-mut);
	border-bottom: 2px solid var(--ep-lt-mut);
	transform: rotate(45deg);
	transition: transform var(--ep-dur-1) var(--ep-ease);
}
.ep-pg__faq details[open] summary::after {
	transform: rotate(-135deg);
	margin-top: -2px;
	border-color: var(--ep-vio-deep);
}
.ep-pg__faq details > p {
	margin: 0;
	padding: 0 var(--ep-s-5) var(--ep-s-5);
	font-size: var(--ep-t-sm);
	line-height: 1.65;
	color: var(--ep-lt-ink-2);
}
.ep-pg__faq details strong { color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); }
.ep-pg__faq details a { color: var(--ep-vio-deep); font-weight: var(--ep-w-semi); }

/* ---------------------------------------------------------------------------
   OPENING HOURS
   --------------------------------------------------------------------------- */
.ep-pg__hours {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ep-s-2);
	margin: 0 0 var(--ep-s-6);
	padding: 0;
	list-style: none;
}
.ep-pg__hours li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ep-s-4);
	margin: 0;
	padding: var(--ep-s-4) var(--ep-s-5);
	background: var(--ep-lt-sunk);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
}
.ep-pg__hk {
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ep-lt-mut);
}
.ep-pg__hours b { font-size: var(--ep-t-base); font-weight: var(--ep-w-bold); color: var(--ep-lt-ink); }

.ep-pg__foot {
	margin: 0;
	padding: var(--ep-s-5) var(--ep-s-6);
	background: var(--ep-lt-sunk);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
	font-size: var(--ep-t-sm);
	line-height: 1.65;
	color: var(--ep-lt-ink-2);
}

/* ---------------------------------------------------------------------------
   THE CLOSING PANEL
   --------------------------------------------------------------------------- */
.ep-pg__cta {
	margin: var(--ep-s-10) 0 0;
	padding: var(--ep-s-8) var(--ep-s-6);
	text-align: center;
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-lg);
}
.ep-pg__cta h2 {
	margin: 0 0 var(--ep-s-2);
	font-size: var(--ep-t-xl);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-sub);
	color: var(--ep-lt-ink);
}
.ep-pg__cta > p {
	max-width: 52ch;
	margin: 0 auto;
	font-size: var(--ep-t-sm);
	line-height: 1.6;
	color: var(--ep-lt-ink-2);
}
.ep-pg__btns { margin: var(--ep-s-5) 0 0; }
.ep-pg__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ep-s-2);
	min-height: var(--ep-control);
	padding: 0 var(--ep-s-6);
	border-radius: var(--ep-r-md);
	background: var(--ep-vio-deep);
	color: #FFFFFF !important;
	font-size: var(--ep-t-base);
	font-weight: var(--ep-w-bold);
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(109, 40, 217, 0.24);
}
.ep-pg__btn:hover { background: #5B21B6; }
.ep-pg__btn::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--ep-pg-btn-icon, none) center / contain no-repeat;
	mask: var(--ep-pg-btn-icon, none) center / contain no-repeat;
}
.ep-pg__btn::after { content: " \2192"; }
.ep-pg__btn.is-wa { --ep-pg-btn-icon: var(--ep-icon-wa); background: var(--ep-lt-ok); box-shadow: 0 8px 22px rgba(15, 123, 79, 0.22); }
.ep-pg__btn.is-wa:hover { background: #0C6640; }
.ep-pg__btn.is-tg { --ep-pg-btn-icon: var(--ep-icon-tg); }
/* Inside a channel card the buttons sit left, not centred. */
.ep-pg__item .ep-pg__btns { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   ANNOUNCEMENTS

   The list itself comes from the express-peds-announcements plugin through a
   shortcode, so this only gives it room and a top rule. Whatever it renders is
   its own.
   --------------------------------------------------------------------------- */
.ep-pg__ann { margin-top: var(--ep-s-6); }
.ep-pg__ann:empty { display: none; }

/* ---------------------------------------------------------------------------
   WIDER SCREENS
   --------------------------------------------------------------------------- */
@media (min-width: 700px) {
	.ep-pg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ep-pg__chan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ep-pg__hours { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ep-pg__hours li { flex-direction: column; align-items: flex-start; gap: var(--ep-s-1); }
}

/* ---------------------------------------------------------------------------
   THE ANNOUNCEMENTS LIST

   This markup is not the page's. It comes from the express-peds-announcements
   plugin through a shortcode, with its own <style> block printed after this
   sheet, so these rules carry .ep-pg__ann to out-rank it rather than relying on
   order.

   WHAT IS RESTYLED IS THE PLUGIN'S CHROME ONLY: the date band, the card frame,
   the tag and the button. Each announcement's own body is client-written HTML
   with its own inline styling, the same way a post's content is, and it is left
   alone. It will read as its author wrote it, which on a page of updates is the
   right answer.
   --------------------------------------------------------------------------- */

/* The full bleed hack. The plugin pulls itself to 100vw with -50vw margins and
   !important, which on this page tore it out of the container the heading sits
   in and, on a phone, out of the viewport. */
.ep-pg__ann .epa-wrap {
	position: static;
	width: auto;
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
	left: auto;
	font-family: var(--ep-font);
}

/* Today's date. A black band the width of the screen becomes a quiet rule with
   the date on it. */
.ep-pg__ann .epa-date {
	padding: var(--ep-s-4) var(--ep-s-5);
	background: var(--ep-lt-sunk);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
	color: var(--ep-lt-ink);
}
.ep-pg__ann .epa-date__label,
.ep-pg__ann .epa-date__live {
	font-family: var(--ep-font);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ep-lt-mut);
}
.ep-pg__ann .epa-date__main {
	font-family: var(--ep-font);
	font-size: var(--ep-t-xl);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-sub);
	color: var(--ep-lt-ink);
}
.ep-pg__ann .epa-date__main span,
.ep-pg__ann .epa-date__main b { color: var(--ep-vio-deep); }

.ep-pg__ann .epa-list,
.ep-pg__ann .epa-list__inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	background: none;
}
.ep-pg__ann .epa-card {
	margin: var(--ep-s-4) 0 0;
	padding: var(--ep-s-6);
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
	box-shadow: none;
	font-family: var(--ep-font);
}
.ep-pg__ann .epa-card__title {
	font-family: var(--ep-font);
	font-size: var(--ep-t-lg);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-sub);
	color: var(--ep-lt-ink);
}
.ep-pg__ann .epa-card__date {
	font-family: var(--ep-font);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ep-lt-mut);
}
.ep-pg__ann .epa-card__tag {
	font-family: var(--ep-font);
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--ep-vio-deep);
	color: #FFFFFF;
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.ep-pg__ann .epa-card__body { font-family: var(--ep-font); color: var(--ep-lt-ink-2); }
/* The plugin's own toggle disc in the corner of each card. The card is a
   <details>, and the open state is a separate rule at (0,2,1), so the closed
   one alone left it orange the moment anybody expanded an announcement. */
.ep-pg__ann .epa-card__icon {
	background: var(--ep-lt-tint);
	color: var(--ep-vio-deep);
	border: 0;
}
.ep-pg__ann .epa-card[open] .epa-card__icon {
	background: var(--ep-vio-deep);
	color: #FFFFFF;
}
.ep-pg__ann .epa-card__btn {
	font-family: var(--ep-font);
	min-height: var(--ep-control-sm);
	padding: 0 var(--ep-s-5);
	border-radius: var(--ep-r-md);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0;
	text-transform: none;
}