/*
Theme Name: Molex
Theme URI: https://molexcoffee.com
Author: Molex Coffee
Description: Bold, graphic block theme for Molex Coffee — a micro specialty coffee roaster in Miami Lakes, Florida. Built to replace Divi. No page builder, no jQuery dependency, self-hosted fonts.
Version: 0.6.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: molex
Tags: full-site-editing, block-patterns, e-commerce, custom-colors, custom-menu, wide-blocks
*/

/* ------------------------------------------------------------------
   Most styling lives in theme.json. This file carries only what
   theme.json cannot express: motion, pseudo-elements, and the
   WooCommerce overrides needed to make Woo's markup match the system.
   ------------------------------------------------------------------ */

:root {
  --molex-rule: 2px solid var(--wp--preset--color--ink);
  --molex-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Respect users who don't want motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Accessibility ------------------------------------------------ */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 1em 1.5em; background: var(--wp--preset--color--ember);
  color: #fff; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.8125rem;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
  outline: 3px solid var(--wp--preset--color--ember);
  outline-offset: 2px;
}

/* --- Ticker / marquee strip --------------------------------------- */

.molex-ticker {
  overflow: hidden; white-space: nowrap;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  border-block: var(--molex-rule);
  padding-block: 0.7rem;
}
.molex-ticker__track {
  display: inline-flex; gap: 3rem; padding-left: 3rem;
  animation: molex-scroll 38s linear infinite;
  font-family: var(--wp--preset--font-family--display);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(0.9rem, 1.6vw, 1.15rem);
}
.molex-ticker:hover .molex-ticker__track { animation-play-state: paused; }
.molex-ticker__track > span { display: inline-block; }
.molex-ticker__track > span::after {
  content: "●"; color: var(--wp--preset--color--ember);
  margin-left: 3rem; font-size: 0.6em; vertical-align: middle;
}
@keyframes molex-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Oversized display lockups ------------------------------------ */

.molex-outline {
  -webkit-text-stroke: 2px var(--wp--preset--color--ink);
  color: transparent;
}
.molex-ember-mark { color: var(--wp--preset--color--ember); }

/* The condensed display face needs more leading when post titles wrap. */
.wp-block-post-title { line-height: 1.08; }

/* --- Homepage hero rotation --------------------------------------- */

/*
   Three frames from the January 2022 El Zacatin origin trip, crossfading on an
   18s loop with no JavaScript.

   Slide 1 is the cover block's own <img>, so it keeps a real srcset and can be
   preloaded from wp_head — it is the LCP element and stays on the fast path.
   Slides 2 and 3 are ::before/::after on the cover itself.

   Pseudo-elements rather than nested <img> tags, for two concrete reasons found
   the hard way: a block nested in a cover can only land inside
   .wp-block-cover__inner-container, where it painted underneath slide 1 no
   matter how the stacking context was coaxed; and `height:100%` on a nested
   <img> lost to a lower-specificity `height:auto` rule, so the slides rendered
   at their intrinsic aspect and overflowed. Pseudo-elements are direct children
   of the cover and are not images, so neither problem applies.

   Every layer gets an explicit z-index rather than relying on DOM order, since
   whether .wp-block-cover forms a stacking context varies by WordPress version.
*/
.molex-hero .wp-block-cover__image-background { z-index: 0 !important; }

.molex-hero::before,
.molex-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-size: cover;
	background-position: center;
	opacity: 0;
	pointer-events: none;
}

/* !important is load-bearing here, not laziness. Core ships the cover layering as
       body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(...))
       .wp-block-cover__background { z-index: 1 }
   which no reasonable class selector outranks. Left to core, the overlay and the
   inner container both sit at z-index 1 — the same layer as the slides — and
   ::after, being last in tree order, paints straight over the dim overlay and the
   headline. Forcing the ladder is the readable fix. */
.molex-hero .wp-block-cover__background { z-index: 2 !important; }
.molex-hero .wp-block-cover__inner-container { z-index: 3 !important; }

/* Backdrops sit under a 60% ink overlay, so they are encoded well below the
   quality slide 1 needs and capped at 1700px. */
.molex-hero::before { background-image: url("assets/hero/hero-drying-beds-bg-1700.webp"); }
.molex-hero::after  { background-image: url("assets/hero/hero-valley-vista-bg-1700.webp"); }

@media (max-width: 900px) {
	.molex-hero::before { background-image: url("assets/hero/hero-drying-beds-bg-1100.webp"); }
	.molex-hero::after  { background-image: url("assets/hero/hero-valley-vista-bg-1100.webp"); }
}

/* 18s loop: 6s per frame, 1.2s crossfade (1.2/18 = 6.67%). */
@keyframes molexHeroSlide2 {
	0%, 30%          { opacity: 0; }
	36.67%, 63.33%   { opacity: 1; }
	70%, 100%        { opacity: 0; }
}

@keyframes molexHeroSlide3 {
	0%, 63.33%       { opacity: 0; }
	70%, 93.33%      { opacity: 1; }
	100%             { opacity: 0; }
}

.molex-hero::before { animation: molexHeroSlide2 18s infinite; }
.molex-hero::after  { animation: molexHeroSlide3 18s infinite; }

/* The global reduced-motion rule at the top of this file already collapses every
   animation to a single 0.01ms run, which lands both slides on their final
   keyframe — opacity 0 — and so happens to produce the right result here. This
   states it outright rather than depending on that coincidence surviving a future
   edit to either set of keyframes. Slide 1 remains, so the hero is still an image. */
@media (prefers-reduced-motion: reduce) {
	.molex-hero::before,
	.molex-hero::after { animation: none; opacity: 0; }
}

/* --- Origin route map --------------------------------------------- */

/*
   Drawn from the GPS coordinates written into the trip photographs and inlined
   as SVG: no tiles, no map library, no third-party requests. The geometry uses
   presentation attributes so the map still renders if this stylesheet never
   loads; these rules only handle typography and theming.
*/
.molex-map { margin: 0 0 var(--wp--preset--spacing--40); }
/* No border here: the SVG draws its own frame around the plot area, and a second
   one around the whole canvas just boxed a lot of empty label margin. */
.molex-map__svg {
	display: block;
	width: 100%;
	height: auto;
	background: var(--wp--preset--color--paper);
}
.molex-map__svg text { font-family: var(--wp--preset--font-family--body); }
.molex-map__svg .molex-map__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.molex-map__caption {
	margin-top: 0.75rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ash);
}

/* --- Article galleries -------------------------------------------- */

/*
   Photographs sit in galleries rather than running full-width one after another,
   which kept interrupting the reading rhythm. Square crops so a mixed set of
   portrait and landscape frames still reads as a grid.
*/
.wp-block-gallery.has-nested-images figure.wp-block-image img {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
	border: 1px solid var(--wp--preset--color--bone);
}
.wp-block-gallery.has-nested-images { gap: 0.75rem; }
.blocks-gallery-caption {
	margin-top: 0.85rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ash);
	text-align: left;
}

/* --- Article video ------------------------------------------------- */

.wp-block-video video {
	width: 100%;
	height: auto;
	display: block;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
}
/* Phone footage, shot vertically. Cap the height and centre it rather than
   letting a 9:16 clip run to two thousand pixels down the page. */
.molex-video--portrait video {
	/* Viewport-relative, so the whole clip is visible without scrolling even on a
	   short laptop screen; 520px is the ceiling on anything larger. */
	max-height: min(70vh, 520px);
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}
.molex-video--portrait figcaption { text-align: center; }

/* --- Media rows ---------------------------------------------------- */

/*
   A vertical clip alone in a text column reads as a mistake: a tall sliver
   stranded in whitespace. These rows set one beside stills — or beside a second
   clip — and stretch the stills to the clip's height, so the 9:16 proportion
   becomes the point of the layout rather than an artefact of the phone.
*/
.molex-media-row.wp-block-columns {
	align-items: stretch;
	gap: 0.75rem;
	margin-bottom: 0;
}
.molex-media-row > .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
	justify-content: center;
}
.molex-media-row .wp-block-video { margin: 0; }
.molex-media-row .wp-block-video video { max-height: min(70vh, 520px); }

/* Stills flex to share whatever height the clip sets, and crop rather than
   letterbox so the column edges stay flush with the video. */
.molex-media-row .wp-block-image {
	margin: 0;
	flex: 1 1 0;
	min-height: 0;
}
.molex-media-row .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 1px solid var(--wp--preset--color--bone);
}
.molex-media-row__caption {
	margin-top: 0.85rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ash);
}

/* Below the block editor's column breakpoint the columns stack, so the stills
   have no clip height to match and must go back to their natural proportions. */
@media (max-width: 781px) {
	.molex-media-row .wp-block-image { flex: 0 1 auto; }
	.molex-media-row .wp-block-image img { height: auto; }
}
.wp-block-video figcaption {
	margin-top: 0.75rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ash);
}

/* --- Header ------------------------------------------------------- */

.molex-header {
  border-bottom: var(--molex-rule);
  background: var(--wp--preset--color--paper);
  position: sticky; top: 0; z-index: 100;
}
.molex-header .wp-block-navigation__responsive-container-open,
.molex-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--ink); }
.molex-header .wp-block-navigation a {
  text-decoration: none; text-transform: uppercase;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em;
  position: relative; padding-block: 0.35em;
}
.molex-header .wp-block-navigation a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--wp--preset--color--ember);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s var(--molex-ease);
}
.molex-header .wp-block-navigation a:hover::after,
.molex-header .wp-block-navigation .current-menu-item a::after { transform: scaleX(1); }

/* --- Footer ------------------------------------------------------- */

.molex-footer { border-top: var(--molex-rule); }
.molex-footer a { text-decoration: none; }
.molex-footer a:hover { text-decoration: underline; }

/* --- WooCommerce: product grid ------------------------------------ */

.woocommerce ul.products,
ul.products {
  display: grid; gap: clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
/* WooCommerce ships a clearfix on this element. Inside a grid a ::before
   becomes a real grid item and silently eats the first cell, pushing every
   product one column across. Woo's selector is more specific than a bare
   `ul.products`, so this has to match its specificity to win. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none !important; display: none !important; }
ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; position: relative; }

ul.products li.product a img,
.molex-card__media img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--wp--preset--color--bone);
  border: var(--molex-rule);
  transition: transform 0.4s var(--molex-ease);
}
ul.products li.product:hover a img { transform: translate(-4px, -4px); }

ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--display);
  text-transform: uppercase; line-height: 1.02;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  letter-spacing: -0.01em;
  margin: 0.85rem 0 0.3rem;
}
ul.products li.product a { text-decoration: none; }
ul.products li.product .price {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700; font-size: 0.95rem; color: var(--wp--preset--color--ink);
}
ul.products li.product .price del { color: var(--wp--preset--color--ash); font-weight: 400; }

/* Sold-out treatment — graphic, not apologetic. */
ul.products li.product.outofstock .molex-card__media,
ul.products li.product.outofstock a img { opacity: 0.45; filter: grayscale(1); }
ul.products li.product.outofstock::before {
  content: "Sold Out"; position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2;
  background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 0.5em 0.85em;
}

span.onsale {
  background: var(--wp--preset--color--ember); color: #fff;
  border-radius: 0; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.6875rem; padding: 0.5em 0.85em;
  min-height: 0; min-width: 0; line-height: 1;
}

/* --- WooCommerce: single product ---------------------------------- */

.woocommerce div.product .product_title {
  font-family: var(--wp--preset--font-family--display);
  text-transform: uppercase; line-height: 0.95;
  font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -0.02em;
}
.woocommerce div.product p.price { font-size: 1.5rem; font-weight: 700; color: var(--wp--preset--color--ink); }
.woocommerce div.product .woocommerce-product-gallery img { border: var(--molex-rule); }

.woocommerce div.product form.cart .variations { border-collapse: collapse; width: 100%; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { padding: 0.6rem 0; vertical-align: middle; }
.woocommerce div.product form.cart .variations label {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.75rem;
}
.woocommerce div.product form.cart .variations select,
.woocommerce .quantity input[type="number"],
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], textarea, select {
  border: var(--molex-rule); border-radius: 0;
  background: var(--wp--preset--color--white);
  padding: 0.85em 1em; font-family: inherit; font-size: 0.95rem;
  width: 100%; max-width: 100%;
}
.woocommerce .quantity input[type="number"] { width: 5.5rem; text-align: center; }

.woocommerce div.product form.cart .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .widget_shopping_cart a.button {
  background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper);
  border-radius: 0; border: 0;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.8125rem; line-height: 1;
  padding: 1.15em 2em;
  transition: background 0.22s var(--molex-ease), color 0.22s var(--molex-ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce div.product form.cart .button:hover {
  background: var(--wp--preset--color--ember); color: #fff;
}
.woocommerce a.button.alt, .woocommerce button.button.alt {
  background: var(--wp--preset--color--ember); color: #fff;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper);
}
.woocommerce .button.disabled, .woocommerce button.button:disabled {
  background: var(--wp--preset--color--ash); color: var(--wp--preset--color--paper); opacity: 1;
}

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border: var(--molex-rule); border-top-width: 2px; border-radius: 0;
  background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink);
  padding: 1.15em 1.5em;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-message { border-left: 6px solid var(--wp--preset--color--ember); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.5rem; border-bottom: var(--molex-rule); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent; border: 0; border-radius: 0; margin: 0 1.75rem 0 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.75rem; padding: 0.9em 0; color: var(--wp--preset--color--ash);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--ink); box-shadow: inset 0 -3px 0 var(--wp--preset--color--ember); }

/* Breadcrumb + result count: quiet them down */
.woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-result-count {
  font-size: 0.8125rem; color: var(--wp--preset--color--ash);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--wp--preset--color--ash); text-decoration: none; }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--wp--preset--color--ember); }

/* Cart / checkout tables */
.woocommerce table.shop_table {
  border: var(--molex-rule); border-radius: 0; border-collapse: collapse;
}
.woocommerce table.shop_table th {
  font-family: var(--wp--preset--font-family--body);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; font-weight: 700;
}
.woocommerce table.shop_table td, .woocommerce table.shop_table th {
  border-top: 1px solid var(--wp--preset--color--bone); padding: 1rem;
}

/* --- Utility ------------------------------------------------------ */

.molex-rule-top { border-top: var(--molex-rule); }
.molex-rule-bottom { border-bottom: var(--molex-rule); }
.molex-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--wp--preset--color--ember);
}

/* ------------------------------------------------------------------
   Links inherit their surface colour (theme.json sets currentColor).
   These rules only handle decoration and the dark-surface hover, so a
   link is never the same colour as the ground it sits on.
   ------------------------------------------------------------------ */

.molex-footer a,
.molex-header .wp-block-navigation a,
.wp-block-button__link { text-decoration: none; }

.molex-footer a:hover,
.has-ink-background-color a:hover,
.has-ember-background-color a:hover { color: var(--wp--preset--color--ember); }

/* On the ember ground, ember-on-ember would vanish — go to paper instead. */
.has-ember-background-color a:hover { color: var(--wp--preset--color--paper); }

/* Body copy links stay underlined so they read as links in prose. */
.wp-block-post-content a:not(.wp-element-button),
.entry-content a:not(.wp-element-button) { text-decoration: underline; }

/* ------------------------------------------------------------------
   Free-sample request form
   ------------------------------------------------------------------ */

.molex-form { display: flex; flex-direction: column; gap: 1.35rem; }

.molex-form__row {
  display: grid; gap: 1.35rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.molex-form__field { display: flex; flex-direction: column; gap: .45rem; margin: 0; }

.molex-form label {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: .75rem;
}
.molex-form label span[aria-hidden] { color: var(--wp--preset--color--ember); }

.molex-form input[type="text"],
.molex-form input[type="email"],
.molex-form select,
.molex-form textarea {
  border: var(--molex-rule); border-radius: 0;
  background: var(--wp--preset--color--white);
  padding: .85em 1em; font-family: inherit; font-size: 1rem;
  width: 100%; color: var(--wp--preset--color--ink);
}
.molex-form textarea { resize: vertical; }

.molex-form__hint {
  font-size: .75rem; color: var(--wp--preset--color--ash);
  text-transform: none; letter-spacing: 0; font-weight: 400;
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.molex-form__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.molex-form__consent { margin: 0; }
.molex-form__consent label {
  display: flex; gap: .75rem; align-items: flex-start;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: .9375rem; cursor: pointer;
}
.molex-form__consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 1.35rem; height: 1.35rem; flex: none; margin-top: .1rem;
  border: var(--molex-rule); border-radius: 0;
  background: var(--wp--preset--color--white); cursor: pointer;
}
.molex-form__consent input[type="checkbox"]:checked {
  background: var(--wp--preset--color--ember);
  border-color: var(--wp--preset--color--ember);
  box-shadow: inset 0 0 0 3px var(--wp--preset--color--white);
}

.molex-form__submit {
  background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper);
  border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--wp--preset--font-family--body);
  font-size: .8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; line-height: 1;
  padding: 1.15em 2.25em;
  transition: background .22s var(--molex-ease), color .22s var(--molex-ease);
}
.molex-form__submit:hover { background: var(--wp--preset--color--ember); color: #fff; }

.molex-form__error,
.molex-form__done {
  border: var(--molex-rule); padding: 1.35rem 1.5rem;
  background: var(--wp--preset--color--white);
}
.molex-form__error { border-left: 6px solid var(--wp--preset--color--ember); }
.molex-form__done { border-left: 6px solid var(--wp--preset--color--ink); }
.molex-form__done h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); margin: 0 0 .5rem; }
.molex-form__done p { margin: 0; }

/* The corner badge already says SOLD OUT — drop Woo's duplicate red line. */
ul.products li.product .stock,
ul.products li.product p.stock { display: none; }

/* ------------------------------------------------------------------
   Category tiles: make each fill its column so the three boxes stay
   the same height even when one has a longer line of copy.
   ------------------------------------------------------------------ */
.wp-block-columns > .wp-block-column > .wp-block-group {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wp-block-columns > .wp-block-column > .wp-block-group > p:last-child {
  margin-top: auto;
}

/* ------------------------------------------------------------------
   Brewing guides
   ------------------------------------------------------------------ */

.molex-guide__byline {
  color: var(--wp--preset--color--ash);
  font-size: .8125rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: var(--wp--preset--spacing--40);
}

.molex-guide__lede { line-height: 1.45; }

.molex-guide__quick-answer {
  background: var(--wp--preset--color--bone);
  border: var(--molex-rule);
  border-left: 8px solid var(--wp--preset--color--ember);
  margin-block: var(--wp--preset--spacing--40);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.molex-guide__quick-answer > :first-child,
.molex-guide__author > :first-child,
.molex-guide__sources > :first-child { margin-top: 0; }
.molex-guide__quick-answer > :last-child,
.molex-guide__author > :last-child,
.molex-guide__sources > :last-child { margin-bottom: 0; }

.molex-guide__table { overflow-x: auto; }
.molex-guide__table table {
  border-collapse: collapse; min-width: 640px; width: 100%;
}
.molex-guide__table th,
.molex-guide__table td {
  border: 1px solid var(--wp--preset--color--ash);
  padding: .8rem .9rem; text-align: left; vertical-align: top;
}
.molex-guide__table th {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
}
.molex-guide__table tbody tr:nth-child(even) {
  background: var(--wp--preset--color--bone);
}

.molex-guide__author,
.molex-guide__sources {
  border-top: var(--molex-rule);
  margin-top: var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--40);
}
.molex-guide__author {
  background: var(--wp--preset--color--bone);
  border: var(--molex-rule);
  padding: clamp(1.25rem, 3vw, 2rem);
}