/* LMC Catalog — House Roasts
   Scoped under .lmc-catalog so nothing here can leak into the rest of the theme. */

.lmc-catalog {
	--lmc-ink: #1b2430;
	--lmc-muted: #64748b;
	--lmc-line: #e4e2dc;
	--lmc-card: #ffffff;
	--lmc-accent: #2f3f8f;
	--lmc-bean: #8a6a3e;
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	color: var(--lmc-ink);

	/* Full-bleed cream ground, matching the Bags page. The negative margins pull the
	   block out to viewport width; the matching horizontal padding puts the grid
	   back where the theme container had it. */
	background: #eee5d1;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 48px calc(50vw - 50%) 72px;
}

@media (max-width: 900px) {
	.lmc-catalog { grid-template-columns: 1fr; gap: 18px; }
}

/* Astra styles headings and links globally; these win them back inside the catalog. */
.lmc-catalog h2.lmc-section-title,
.lmc-catalog h3.lmc-name,
.lmc-catalog h3.lmc-name a {
	text-transform: none !important;
	letter-spacing: -.01em;
	color: var(--lmc-ink) !important;
	font-weight: 600;
}
.lmc-catalog .lmc-tab { color: #4a5567; }
.lmc-catalog .lmc-tab em { opacity: 1; color: var(--lmc-accent); }
.lmc-catalog h3.lmc-name a:hover,
.lmc-catalog h3.lmc-name a:focus { color: var(--lmc-accent); }
.lmc-catalog .lmc-eyebrow { text-transform: uppercase; }

/* Astra styles headings and links globally; these win them back inside the catalog. */
.lmc-catalog h2.lmc-section-title,
.lmc-catalog h3.lmc-name,
.lmc-catalog h3.lmc-name a {
	text-transform: none;
	letter-spacing: -.01em;
	color: var(--lmc-ink);
}
.lmc-catalog h3.lmc-name a:hover,
.lmc-catalog h3.lmc-name a:focus { color: var(--lmc-accent); }
.lmc-catalog .lmc-eyebrow { text-transform: uppercase; }

/* ------------------------------------------------------------------ jump rail */
.lmc-rail { position: sticky; top: 100px; }
@media (max-width: 900px) { .lmc-rail { position: static; } }

.lmc-rail ul { list-style: none; margin: 0; padding: 0; }
.lmc-rail li { margin: 0 0 2px; }
.lmc-rail a {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 9px 14px; border-radius: 8px; text-decoration: none;
	color: var(--lmc-muted); font-size: 14px; line-height: 1.3;
	transition: background .15s ease, color .15s ease;
}
.lmc-rail a em { font-style: normal; font-size: 12px; opacity: .7; }
.lmc-rail a:hover, .lmc-rail a:focus-visible { background: #f2f1ec; color: var(--lmc-ink); }
.lmc-rail a.is-current { background: var(--lmc-accent); color: #fff; }
.lmc-rail a.is-current em { opacity: .85; }

/* ------------------------------------------------------------------- sections */
.lmc-section { scroll-margin-top: 110px; margin: 0 0 40px; }
.lmc-section-title {
	font-size: 26px; margin: 0 0 16px; font-weight: 600; letter-spacing: -.01em;
}

/* ---------------------------------------------------------------------- cards */
.lmc-card {
	background: var(--lmc-card);
	border: 1px solid var(--lmc-line);
	border-radius: 22px;
	overflow: hidden;
	margin: 0 0 18px;
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.lmc-catalog .lmc-card:hover {
	border-color: #d3d0c8;
	box-shadow: 0 10px 26px -12px rgba(27, 36, 48, .28), 0 2px 6px -2px rgba(27, 36, 48, .10);
}
@media (prefers-reduced-motion: reduce) {
	.lmc-card { transition: none; }
}

.lmc-card-top {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(190px, 0.85fr) minmax(240px, 1fr);
}
@media (max-width: 1100px) { .lmc-card-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .lmc-card-top { grid-template-columns: 1fr; } }

.lmc-cell { padding: 20px 22px; border-left: 1px solid var(--lmc-line); }
.lmc-cell:first-child { border-left: 0; }
@media (max-width: 1100px) {
	.lmc-cell { border-left: 0; border-top: 1px solid var(--lmc-line); }
	.lmc-cell:first-child, .lmc-cell:nth-child(2) { border-top: 0; }
}
@media (max-width: 700px) {
	.lmc-cell:nth-child(2) { border-top: 1px solid var(--lmc-line); }
}

/* identity — the photo is the feature of this column, text stacks beneath it */
.lmc-catalog .lmc-identity { display: flex; flex-direction: column; gap: 12px; }
.lmc-catalog .lmc-identity-head {
	display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0;
}
.lmc-catalog .lmc-identity-head img.lmc-thumb {
	width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: 16px; display: block; flex: none; background: #f2f1ec;
}
.lmc-catalog .lmc-identity-head > div { display: block; }
.lmc-catalog .lmc-roast { margin: 0; }
.lmc-catalog .lmc-notes, .lmc-catalog .lmc-finish { margin: 0; }
.lmc-catalog .lmc-badges { margin: 0; }
.lmc-eyebrow {
	margin: 2px 0 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: var(--lmc-accent);
}
.lmc-name { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 600; }
.lmc-name a { color: inherit; text-decoration: none; }
.lmc-name a:hover { text-decoration: underline; }

.lmc-roast { display: flex; align-items: center; gap: 9px; margin: 12px 0 8px; }
.lmc-dots { display: inline-flex; gap: 4px; }
.lmc-dots i {
	width: 9px; height: 9px; border-radius: 50%;
	border: 1px solid var(--lmc-bean); display: inline-block;
}
.lmc-dots i.on { background: var(--lmc-bean); }
.lmc-roast-label { font-size: 13px; color: var(--lmc-muted); }

.lmc-notes { margin: 0 0 6px; font-size: 14px; font-style: italic; color: var(--lmc-muted); line-height: 1.5; }
.lmc-finish { margin: 0 0 6px; font-size: 14px; color: var(--lmc-muted); line-height: 1.5; }

.lmc-badges { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lmc-badge {
	font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
	padding: 3px 8px; border-radius: 4px; background: #f0efe9; color: #5a5348;
}

/* specs */
.lmc-specs { display: flex; flex-direction: column; gap: 11px; }
.lmc-spec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lmc-spec-k {
	font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
	color: var(--lmc-muted); white-space: nowrap;
}
.lmc-spec-v { font-size: 14px; font-weight: 600; text-align: right; }
.lmc-spec-vary { margin: 0; font-size: 14px; color: var(--lmc-muted); font-style: italic; }

/* purchase */
.lmc-toggle {
	display: flex; gap: 6px; margin: 0 0 14px; padding: 4px;
	background: #f2f1ec; border-radius: 10px;
}
.lmc-tab {
	flex: 1; border: 0; background: transparent; cursor: pointer;
	padding: 8px 10px; border-radius: 7px; font-size: 13.5px; font-weight: 600;
	color: var(--lmc-muted); line-height: 1.3;
}
.lmc-tab em { font-style: normal; font-weight: 500; opacity: .8; }
.lmc-tab.is-active { background: #fff; color: var(--lmc-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.lmc-tab:focus-visible { outline: 2px solid var(--lmc-accent); outline-offset: 2px; }

/* --- format tiles ------------------------------------------------------- */
/* Astra uppercases buttons site-wide; these controls read as labels, not buttons. */
.lmc-catalog .lmc-tile,
.lmc-catalog .lmc-tile-label,
.lmc-catalog .lmc-plan,
.lmc-catalog .lmc-plan-title,
.lmc-catalog .lmc-plan-title em,
.lmc-catalog .lmc-plan-price,
.lmc-catalog .lmc-pill {
	text-transform: none !important;
	letter-spacing: normal !important;
}

.lmc-catalog .lmc-formats-label {
	margin: 0 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--lmc-muted);
}
/* Flex, not a fixed 3-up grid, so a coffee with only two formats gets two
   full-width tiles instead of a gap where the K-Cup would have been. */
.lmc-catalog .lmc-tiles { display: flex; gap: 8px; margin: 0 0 14px; }
.lmc-catalog .lmc-tiles > .lmc-tile { flex: 1 1 0; min-width: 0; }
.lmc-catalog .lmc-tile {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 10px 6px; cursor: pointer; background: #fff; line-height: 1.2;
	border: 2px solid var(--lmc-line); border-radius: 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.lmc-catalog .lmc-tile:hover { border-color: #c9cddc; }
.lmc-catalog .lmc-tile.is-selected { border-color: var(--lmc-accent); box-shadow: 0 0 0 3px rgba(47,63,143,.10); }
.lmc-catalog .lmc-tile:focus-visible { outline: 2px solid var(--lmc-accent); outline-offset: 2px; }
.lmc-catalog .lmc-tile-img { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; }
.lmc-catalog .lmc-tile-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lmc-catalog .lmc-tile-img--blank {
	background: radial-gradient(circle at 50% 45%, #efe9df 0%, #e3dbcd 70%, #dbd2c2 100%);
}
.lmc-catalog .lmc-tile-label { font-size: 13px; font-weight: 600; color: var(--lmc-ink); text-align: center; }
.lmc-catalog .lmc-tile.is-selected .lmc-tile-label { color: var(--lmc-accent); }
.lmc-catalog .lmc-tile-check {
	position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
	background: var(--lmc-accent); color: #fff; font-size: 12px; line-height: 20px; text-align: center;
	opacity: 0; transform: scale(.6); transition: opacity .12s ease, transform .12s ease;
}
.lmc-catalog .lmc-tile.is-selected .lmc-tile-check { opacity: 1; transform: scale(1); }

/* --- plan rows ---------------------------------------------------------- */
.lmc-catalog .lmc-plans { display: flex; flex-direction: column; gap: 7px; margin: 0 0 10px; }
.lmc-catalog .lmc-plan {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
	padding: 11px 14px; cursor: pointer; text-align: left; background: #fff;
	border: 2px solid var(--lmc-line); border-radius: 11px;
	transition: border-color .15s ease, background .15s ease;
}
.lmc-catalog .lmc-plan:hover { border-color: #c9cddc; }
.lmc-catalog .lmc-plan.is-selected { border-color: var(--lmc-accent); background: #eef0fa; }
.lmc-catalog .lmc-plan:focus-visible { outline: 2px solid var(--lmc-accent); outline-offset: 2px; }
.lmc-catalog .lmc-plan-title { font-size: 14.5px; font-weight: 700; color: var(--lmc-ink); }
.lmc-catalog .lmc-plan-title em {
	font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--lmc-muted); margin-left: 4px;
}
.lmc-catalog .lmc-plan-price {
	font-size: 15.5px; font-weight: 700; color: var(--lmc-ink);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* --- frequency pills ---------------------------------------------------- */
.lmc-catalog .lmc-freqs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.lmc-catalog .lmc-freqs-label { font-size: 13px; color: var(--lmc-muted); margin-right: 2px; }
.lmc-catalog .lmc-pill {
	padding: 5px 12px; cursor: pointer; background: #fff; font-size: 13px; font-weight: 600;
	color: var(--lmc-muted); border: 1px solid var(--lmc-line); border-radius: 999px;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.lmc-catalog .lmc-pill:hover { border-color: #c9cddc; color: var(--lmc-ink); }
.lmc-catalog .lmc-pill.is-selected { border-color: var(--lmc-accent); color: var(--lmc-accent); background: #eef0fa; }
.lmc-catalog .lmc-pill:focus-visible { outline: 2px solid var(--lmc-accent); outline-offset: 2px; }

/* --- the native form, kept but mostly out of sight ---------------------- */
.lmc-form { display: none; }
.lmc-form.is-active { display: block; }
.lmc-card--enhanced .lmc-form table.variations,
.lmc-card--enhanced .lmc-form .reset_variations { display: none !important; }
.lmc-card--enhanced .lmc-form .woocommerce-variation-price { margin: 0 0 10px; }
.lmc-card--enhanced .lmc-form .quantity { margin: 0 8px 10px 0; }
.lmc-form .price { font-size: 20px; font-weight: 600; }
.lmc-form table.variations { margin: 0 0 10px; }
.lmc-form table.variations th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.lmc-form .woocommerce-variation-price { margin: 0 0 8px; }
.lmc-form .button { width: 100%; }

/* footer */
.lmc-card-foot {
	padding: 18px 22px; border-top: 1px solid var(--lmc-line); background: #fcfbf8;
}
.lmc-desc { font-size: 14.5px; line-height: 1.6; color: #47505c; }
.lmc-desc p { margin: 0 0 8px; }
.lmc-desc p:last-child { margin-bottom: 0; }
.lmc-more {
	display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 600;
	color: var(--lmc-accent); text-decoration: none;
}
.lmc-more:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.lmc-rail a { transition: none; }
}


/* ---- roast details disclosure ---- */
.lmc-more {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
	font-size: 13.5px; font-weight: 600; cursor: pointer;
	color: var(--lmc-accent) !important; text-decoration: none;
	background: none; border: 0; padding: 0; font-family: inherit;
}
.lmc-more:hover { text-decoration: underline; }
.lmc-more:focus-visible { outline: 2px solid var(--lmc-accent); outline-offset: 3px; border-radius: 3px; }

/* chevron — points down at rest, up when the panel is open */
.lmc-chev {
	width: 8px; height: 8px; margin-top: -3px; flex: none;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .25s ease;
}
.lmc-card-foot.is-open .lmc-chev { transform: rotate(-135deg); margin-top: 2px; }

/* The expanding panel. Collapsed only once the JS marker is on the container, so
   a JS-less visitor simply reads the full text in place. */
.lmc-details-inner { min-height: 0; overflow: hidden; }
.lmc-details-inner > .lmc-desc { padding-top: 12px; }
.lmc-js .lmc-details {
	display: grid; grid-template-rows: 0fr;
	transition: grid-template-rows .28s ease;
}
.lmc-js .lmc-card-foot.is-open .lmc-details { grid-template-rows: 1fr; }
/* Without JS the trimmed summary would repeat the opening of the full text. */
.lmc-catalog:not(.lmc-js) .lmc-card-foot[data-trim="1"] .lmc-desc-summary { display: none; }
/* With JS, the panel replaces the trimmed summary rather than repeating it. */
.lmc-js .lmc-card-foot[data-trim="1"].is-open .lmc-desc-summary { display: none; }

@media (prefers-reduced-motion: reduce) {
	.lmc-rail a { transition: none; }
	.lmc-js .lmc-details { transition: none; }
	.lmc-chev { transition: none; }
}

/* The one-time plan row now carries the selected variation's price, so WooCommerce's
   own price line under the format tiles would just print the same number twice.
   The subscription pane keeps its line — that one adds the billing cycle. */
.lmc-form-once .woocommerce-variation-price { display: none; }