/* ==========================================================================
JOEL HAUS — Global reset. Sits at the top of the cascade so every later
rule can override intentionally; browser defaults do NOT leak through.
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* Links: no default underline site-wide. Editorial contexts opt back in below. */
a, a:visited { text-decoration: none; color: inherit; }
a:hover { color: inherit; }
/* Lists: no bullets by default. Editorial contexts opt back in. */
ul, ol { list-style: none; padding: 0; margin: 0; }
/* Form controls: strip radius + normalize appearance + inherit type. */
input, select, textarea, button {
border-radius: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
button {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
/* Focus: single site-wide contract. */
:focus-visible {
outline: 2px solid var(--wp--preset--color--vermilion);
outline-offset: 2px;
}
/* Touch targets ≥44 on mobile. */
@media (max-width: 720px) {
button,
[role="button"],
.wp-block-button__link,
.joelhaus-btn,
.joelhaus-header__icon,
a.button,
.button {
min-height: 44px;
}
}
/* Kill disclosure markers site-wide (details/summary). */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
/* -------- Opt-back-in for editorial content -------- */
.entry-content a,
.wp-block-post-content a,
.joelhaus-pdp-description__body a,
.woocommerce-terms-and-conditions-wrapper a,
.woocommerce-product-details__short-description a,
.woocommerce-Tabs-panel a {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.entry-content ul,
.entry-content ol,
.wp-block-post-content ul,
.wp-block-post-content ol,
.wp-block-list,
.joelhaus-pdp-description__body ul,
.joelhaus-pdp-description__body ol,
.woocommerce-product-details__short-description ul,
.woocommerce-product-details__short-description ol,
.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol {
list-style: revert;
padding: revert;
margin: revert;
}
/*
* JOEL HAUS theme styles — v0.1.0
* Layout & component layer on top of theme.json tokens.
* No animation-heavy effects by design (restrained, editorial direction).
*/
/* ---------------------------------------------------------------------------
* 1. Base refinements
* ------------------------------------------------------------------------- */
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection {
background: var(--wp--preset--color--vermilion);
color: var(--wp--preset--color--paper);
}
/* Visible focus for keyboard users — never remove outlines. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
outline: 2px solid var(--wp--preset--color--vermilion);
outline-offset: 2px;
border-radius: 0;
}
/* Respect users who prefer reduced 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;
}
}
img {
height: auto;
max-width: 100%;
}
/* ---------------------------------------------------------------------------
* 2. Header
* ------------------------------------------------------------------------- */
.joelhaus-header {
border-bottom: 1px solid var(--wp--preset--color--rule);
background: var(--wp--preset--color--paper);
}
/* ---------------------------------------------------------------------------
* 3. Footer
* ------------------------------------------------------------------------- */
.joelhaus-footer {
border-top: 1px solid var(--wp--preset--color--rule);
background: var(--wp--preset--color--sand);
}
.joelhaus-footer a {
text-decoration: none;
}
.joelhaus-footer a:hover {
text-decoration: underline;
text-underline-offset: 0.3em;
}
.joelhaus-footer .joelhaus-footer-note {
color: var(--wp--preset--color--ink-2);
font-size: 0.8125rem;
}
/* ---------------------------------------------------------------------------
* 4. Homepage sections
* ------------------------------------------------------------------------- */
/* Section label — small caps eyebrow above headings. */
.joelhaus-eyebrow {
font-family: var(--wp--preset--font-family--body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--wp--preset--color--ink-3);
}
/* Category entry cards */
.joelhaus-category-card {
border: 1px solid var(--wp--preset--color--rule);
background: var(--wp--preset--color--card);
}
.joelhaus-category-card a {
text-decoration: none;
}
.joelhaus-category-card:hover {
border-color: var(--wp--preset--color--vermilion);
}
/* Editorial image block — keep images composed, never stretched. */
.joelhaus-editorial-media img,
.joelhaus-category-card img {
width: 100%;
object-fit: cover;
display: block;
}
/* Newsletter */
.joelhaus-newsletter {
background: var(--wp--preset--color--sand);
border-top: 1px solid var(--wp--preset--color--rule);
border-bottom: 1px solid var(--wp--preset--color--rule);
}
.joelhaus-newsletter form {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
}
.joelhaus-newsletter label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.joelhaus-newsletter input[type="email"],
.joelhaus-newsletter button {
box-sizing: border-box;
}
.joelhaus-newsletter input[type="email"] {
min-width: min(320px, 80vw);
padding: 0.7rem 1rem;
border: 1px solid var(--wp--preset--color--ink-2);
background: var(--wp--preset--color--card);
color: var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--body);
font-size: 0.9375rem;
border-radius: 0;
}
.joelhaus-newsletter button {
padding: 0.7rem 1.6rem;
border: 1px solid var(--wp--preset--color--ink);
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--paper);
font-family: var(--wp--preset--font-family--body);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 0;
cursor: pointer;
}
.joelhaus-newsletter button:hover {
background: var(--wp--preset--color--vermilion);
border-color: var(--wp--preset--color--vermilion);
}
.joelhaus-placeholder-note {
font-size: 0.75rem;
letter-spacing: 0.04em;
color: var(--wp--preset--color--ink-2);
}
/* ---------------------------------------------------------------------------
* 5. WooCommerce — catalog
* ------------------------------------------------------------------------- */
/* Restrained sale badge — no loud discount styling. */
.woocommerce span.onsale {
background: var(--wp--preset--color--vermilion);
color: var(--wp--preset--color--paper);
border-radius: 0;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 0.7rem;
padding: 0.35em 0.9em;
min-width: 0;
min-height: 0;
line-height: 1.6;
}
/* Buttons across Woo screens */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.wc-block-components-button {
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--paper);
border-radius: 0;
font-family: var(--wp--preset--font-family--body);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 0.8125rem;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover {
background: var(--wp--preset--color--vermilion);
color: var(--wp--preset--color--paper);
}
/* ---------------------------------------------------------------------------
* 6. WooCommerce — single product
* ------------------------------------------------------------------------- */
/* Keep gallery images inside a stable frame; jewelry stays sharp and
* un-stretched. Contain (not cover) on the main image so nothing is cropped
* away from the actual product photo. */
.woocommerce div.product div.images img {
width: 100%;
object-fit: contain;
background: var(--wp--preset--color--card);
}
.woocommerce div.product .product_title {
font-family: var(--wp--preset--font-family--heading);
font-weight: 500;
font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.woocommerce div.product p.price {
color: var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--body);
font-size: 1.125rem;
}
.woocommerce div.product form.cart .quantity .qty {
border: 1px solid var(--wp--preset--color--ink-2);
border-radius: 0;
padding: 0.55rem 0.5rem;
}
/* ---------------------------------------------------------------------------
* 7. WooCommerce — cart / checkout / account (block-based)
* ------------------------------------------------------------------------- */
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"] {
border-radius: 0;
}
.woocommerce-MyAccount-navigation ul {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid var(--wp--preset--color--rule);
}
.woocommerce-MyAccount-navigation li {
border-bottom: 1px solid var(--wp--preset--color--rule);
}
.woocommerce-MyAccount-navigation li:last-child {
border-bottom: 0;
}
.woocommerce-MyAccount-navigation li a {
display: block;
padding: 0.8rem 1rem;
text-decoration: none;
font-size: 0.9rem;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
background: var(--wp--preset--color--sand);
}
/* ---------------------------------------------------------------------------
* 8. Forms (generic)
* ------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
border: 1px solid var(--wp--preset--color--ink-2);
border-radius: 0;
padding: 0.6rem 0.8rem;
background: var(--wp--preset--color--card);
}
.woocommerce form .form-row label {
font-size: 0.8125rem;
letter-spacing: 0.03em;
}
/* ---------------------------------------------------------------------------
* 9. Responsive refinements
* ------------------------------------------------------------------------- */
/* Mobile */
@media (max-width: 600px) {
.joelhaus-newsletter form {
flex-direction: column;
align-items: stretch;
}
.joelhaus-newsletter input[type="email"],
.joelhaus-newsletter button {
width: 100%;
min-width: 0;
}
/* Comfortable touch targets in cart controls. */
.woocommerce div.product form.cart .quantity .qty,
.wc-block-components-quantity-selector input {
min-height: 44px;
}
.woocommerce a.button,
.woocommerce button.button,
.wc-block-components-button {
min-height: 44px;
}
}
/* Cart page (block) — small screens.
* Root cause of the horizontal overflow at 390px: the constrained
* page layout leaves the cart block only ~250px of width (≈70px of
* combined padding each side), while WooCommerce's mobile grid row
* (image + product + totals) needs ~330px, so the totals cell was
* pushed past the viewport. Fix the cause: let the cart block
* "full-bleed" to the viewport with a 16px gutter on small screens
* so Woo's own mobile layout has the width it was designed for.
* (Verified live: scrollWidth 390 == clientWidth 390.) */
@media (max-width: 480px) {
.wp-block-woocommerce-cart {
margin-left: calc(50% - 50vw + 16px);
margin-right: calc(50% - 50vw + 16px);
}
.wp-block-woocommerce-cart table.wc-block-cart-items {
width: 100%;
}
}
/* Footer wordmark — same typographic treatment as the header mark. */
.joelhaus-footer .joelhaus-wordmark {
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: 1.15rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--wp--preset--color--ink);
}
/* ==========================================================================
JOEL HAUS — My Account
Scoped to WooCommerce account pages (body.woocommerce-account).
Presentation only: no markup, endpoint, nonce or handler changes.
========================================================================== */
body.woocommerce-account{
--joelhaus-acc-max:1240px;
--joelhaus-acc-nav:244px;
--joelhaus-acc-gap:52px;
--joelhaus-acc-accent:var(--wp--preset--color--vermilion-text);
--joelhaus-acc-line:var(--wp--preset--color--rule);
--joelhaus-acc-ink:var(--wp--preset--color--ink);
--joelhaus-acc-soft:var(--wp--preset--color--ink-2);
--joelhaus-acc-ivory:var(--wp--preset--color--paper);
}
/* ---- Page shell ---------------------------------------------------------- */
body.woocommerce-account main.wp-block-group{
--wp--style--global--content-size:var(--joelhaus-acc-max);
--wp--style--global--wide-size:var(--joelhaus-acc-max);
padding:clamp(36px,4.5vw,56px) clamp(20px,4vw,56px) clamp(72px,8vw,96px) !important;
}
body.woocommerce-account .wp-block-post-title,
body.woocommerce-account .entry-content{
max-width:var(--joelhaus-acc-max) !important;
margin-left:auto !important;
margin-right:auto !important;
}
body.woocommerce-account .wp-block-post-title{
font-size:clamp(30px,4vw,54px) !important;
line-height:1.06;
letter-spacing:-.012em;
margin-bottom:clamp(26px,3.2vw,44px) !important;
}
/* WooCommerce clearfix pseudo-elements become grid items and steal the first
cell of every grid below, so they are switched off inside the account. */
body.woocommerce-account .woocommerce::before,
body.woocommerce-account .woocommerce::after,
body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after,
body.woocommerce-account #customer_login::before,
body.woocommerce-account #customer_login::after,
body.woocommerce-account form.woocommerce-EditAccountForm::before,
body.woocommerce-account form.woocommerce-EditAccountForm::after{display:none !important;}
/* ---- Two-column account shell (signed in) -------------------------------- */
body.woocommerce-account.logged-in .woocommerce{
display:grid;
grid-template-columns:[joelhaus-nav] var(--joelhaus-acc-nav) [joelhaus-main] minmax(0,1fr);
gap:var(--joelhaus-acc-gap);
align-items:start;
max-width:none !important;
width:100%;
}
body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation{grid-column:joelhaus-nav;}
body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content{grid-column:joelhaus-main;}
body.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper{grid-column:1 / -1;}
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content{
float:none !important;
width:auto !important;
margin:0 !important;
min-width:0 !important;
}
/* ---- Account navigation -------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-navigation ul{
list-style:none;
margin:0;
padding:0;
border-top:1px solid var(--joelhaus-acc-line);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li{
margin:0 !important;
padding:0 !important;
border-bottom:1px solid var(--joelhaus-acc-line);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a{
display:flex;
align-items:center;
min-height:54px;
padding:0 14px;
font-size:12px;
font-weight:500;
line-height:1.3;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--joelhaus-acc-soft);
text-decoration:none;
border-left:2px solid transparent;
transition:background .18s ease,color .18s ease,border-color .18s ease;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
color:var(--joelhaus-acc-ink);
background:var(--joelhaus-acc-ivory);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible{
outline:2px solid var(--joelhaus-acc-accent);
outline-offset:-2px;
color:var(--joelhaus-acc-ink);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a,
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{text-decoration:none;}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
background:var(--joelhaus-acc-ivory);
color:var(--joelhaus-acc-ink);
border-left-color:var(--joelhaus-acc-accent);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{
border-bottom:0;
margin-top:14px !important;
border-top:1px solid var(--joelhaus-acc-line);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{
min-height:48px;
font-size:11px;
color:var(--joelhaus-acc-soft);
}
/* ---- Content typography -------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content > p{
font-size:15.5px;
line-height:1.68;
color:var(--joelhaus-acc-soft);
max-width:64ch;
margin:0 0 16px;
}
body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type{
font-size:17px;
color:var(--joelhaus-acc-ink);
}
body.woocommerce-account .joelhaus-account-logout{
margin-left:10px;
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--joelhaus-acc-soft);
white-space:nowrap;
}
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3{
font-size:clamp(1.05rem,1.5vw,1.25rem);
letter-spacing:.01em;
margin:0 0 14px;
}
body.woocommerce-account .woocommerce-MyAccount-content a{
color:var(--joelhaus-acc-ink);
text-underline-offset:3px;
text-decoration-color:var(--joelhaus-acc-line);
}
body.woocommerce-account .woocommerce-MyAccount-content a:hover{text-decoration-color:var(--joelhaus-acc-accent);}
/* ---- Tables (orders, downloads, order detail) ---------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table{
width:100%;
border:0;
border-radius:0;
border-collapse:collapse;
margin:0 0 28px;
font-size:14.5px;
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th{
padding:0 16px 12px 0;
border:0;
border-bottom:1px solid var(--joelhaus-acc-line);
font-size:10.5px;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--joelhaus-acc-soft);
text-align:left;
white-space:nowrap;
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td{
padding:15px 16px 15px 0;
border:0;
border-bottom:1px solid var(--joelhaus-acc-line);
vertical-align:middle;
color:var(--joelhaus-acc-ink);
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th:last-child,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td:last-child{
padding-right:0;
text-align:right;
}
body.woocommerce-account .woocommerce-orders-table__cell-order-number,
body.woocommerce-account .woocommerce-orders-table__cell-order-date,
body.woocommerce-account .woocommerce-orders-table__cell-order-total{white-space:nowrap;}
body.woocommerce-account .woocommerce-orders-table__cell-order-total{font-variant-numeric:tabular-nums;}
/* The order-number cell is a | inside | ; give it body-cell styling. */
body.woocommerce-account .woocommerce-orders-table tbody th{
padding:15px 16px 15px 0;
border:0;
border-bottom:1px solid var(--joelhaus-acc-line);
font-weight:400;
vertical-align:middle;
color:var(--joelhaus-acc-ink);
}
body.woocommerce-account .woocommerce-orders-table__cell-order-number,
body.woocommerce-account .woocommerce-orders-table__cell-order-number a{
font-size:14.5px;
letter-spacing:0;
text-transform:none;
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
body.woocommerce-account .woocommerce-orders-table__header-order-actions,
body.woocommerce-account .woocommerce-orders-table__cell-order-actions{width:1%;}
/* ---- Order status label -------------------------------------------------- */
body.woocommerce-account .joelhaus-order-status{
display:inline-block;
padding:5px 11px;
border:1px solid var(--joelhaus-acc-line);
border-radius:0;
background:var(--joelhaus-acc-ivory);
font-size:10.5px;
font-weight:500;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--joelhaus-acc-soft);
white-space:nowrap;
}
body.woocommerce-account .joelhaus-order-status--processing,
body.woocommerce-account .joelhaus-order-status--on-hold,
body.woocommerce-account .joelhaus-order-status--pending{
border-color:var(--joelhaus-acc-accent);
color:var(--joelhaus-acc-accent);
background:#fff;
}
body.woocommerce-account .joelhaus-order-status--completed{
border-color:var(--wp--preset--color--success);
color:var(--wp--preset--color--success);
background:#fff;
}
/* ---- Buttons ------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content .button,
body.woocommerce-account .woocommerce-MyAccount-content button.button,
body.woocommerce-account .woocommerce-MyAccount-content input.button{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-height:44px;
padding:0 24px;
border:1px solid var(--joelhaus-acc-ink);
border-radius:0;
background:var(--joelhaus-acc-ink);
color:#fff;
font-size:11.5px;
font-weight:500;
letter-spacing:.12em;
text-transform:uppercase;
line-height:1;
text-decoration:none;
transition:background .18s ease,color .18s ease,border-color .18s ease;
}
body.woocommerce-account .woocommerce-MyAccount-content .button:hover{background:var(--joelhaus-acc-accent);border-color:var(--joelhaus-acc-accent);color:#fff;}
body.woocommerce-account .woocommerce-MyAccount-content .button:focus-visible{outline:2px solid var(--joelhaus-acc-accent);outline-offset:2px;}
body.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button,
body.woocommerce-account .woocommerce-MyAccount-content td .button{
margin:0 !important;
min-height:40px;
padding:0 18px;
background:transparent;
color:var(--joelhaus-acc-ink);
border-color:var(--joelhaus-acc-line);
}
body.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:hover,
body.woocommerce-account .woocommerce-MyAccount-content td .button:hover{
background:var(--joelhaus-acc-ivory);
border-color:var(--joelhaus-acc-ink);
color:var(--joelhaus-acc-ink);
}
/* ---- Addresses ----------------------------------------------------------- */
body.woocommerce-account .woocommerce-Addresses{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
gap:24px;
margin:0;
}
body.woocommerce-account .woocommerce-Address{
float:none !important;
width:auto !important;
margin:0 !important;
padding:26px 28px;
border:1px solid var(--joelhaus-acc-line);
background:var(--joelhaus-acc-ivory);
}
body.woocommerce-account .woocommerce-Address-title{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:18px;
margin-bottom:14px;
padding-bottom:12px;
border-bottom:1px solid var(--joelhaus-acc-line);
}
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3{
margin:0;
flex:1 1 auto;
min-width:0;
font-size:12px;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--joelhaus-acc-soft);
}
body.woocommerce-account .woocommerce-Address-title .edit{
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
white-space:nowrap;
}
body.woocommerce-account .woocommerce-Address address{
font-style:normal;
font-size:14.5px;
line-height:1.72;
color:var(--joelhaus-acc-ink);
overflow-wrap:anywhere;
}
/* ---- Forms --------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content form{max-width:640px;}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > p.form-row{margin-bottom:0;}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:20px;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row{grid-column:1 / -1;}
body.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:20px;
}
body.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > *{grid-column:1 / -1;}
body.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > .form-row-first,
body.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > .form-row-last,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-first,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-last{grid-column:auto;}
body.woocommerce-account .woocommerce-MyAccount-content .form-row{
display:flex;
flex-direction:column;
gap:7px;
float:none !important;
width:auto !important;
padding:0;
margin:0 0 18px;
}
body.woocommerce-account .woocommerce-MyAccount-content .form-row label{
font-size:10.5px;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--joelhaus-acc-soft);
}
body.woocommerce-account .woocommerce-MyAccount-content .form-row .required{color:var(--joelhaus-acc-accent);text-decoration:none;}
body.woocommerce-account .woocommerce-MyAccount-content input.input-text,
body.woocommerce-account .woocommerce-MyAccount-content select,
body.woocommerce-account .woocommerce-MyAccount-content .select2-container .select2-selection--single{
width:100%;
height:46px;
padding:0 14px;
border:1px solid var(--joelhaus-acc-line);
border-radius:0;
background:#fff;
font-size:15px;
color:var(--joelhaus-acc-ink);
box-sizing:border-box;
}
body.woocommerce-account .woocommerce-MyAccount-content textarea.input-text{
width:100%;
min-height:110px;
padding:12px 14px;
border:1px solid var(--joelhaus-acc-line);
border-radius:0;
background:#fff;
font-size:15px;
box-sizing:border-box;
}
body.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
body.woocommerce-account .woocommerce-MyAccount-content select:focus,
body.woocommerce-account .woocommerce-MyAccount-content textarea.input-text:focus{
outline:2px solid var(--wp--preset--color--vermilion);
outline-offset:2px;
border-color:var(--joelhaus-acc-accent);
}
body.woocommerce-account .woocommerce-MyAccount-content fieldset{
margin:28px 0 0;
padding:22px 0 0;
border:0;
border-top:1px solid var(--joelhaus-acc-line);
}
body.woocommerce-account .woocommerce-MyAccount-content fieldset legend{
padding:0;
font-size:12px;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--joelhaus-acc-soft);
}
body.woocommerce-account .woocommerce-MyAccount-content span.password-input{display:block;position:relative;}
body.woocommerce-account .woocommerce-MyAccount-content em,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-password-hint{
display:block;
margin-top:6px;
font-size:12.5px;
font-style:normal;
color:var(--joelhaus-acc-soft);
}
/* ---- Notices ------------------------------------------------------------- */
body.woocommerce-account .wc-block-components-notice-banner.is-info{
background:var(--joelhaus-acc-ivory);
border-color:var(--joelhaus-acc-line);
color:var(--joelhaus-acc-ink);
border-radius:0;
}
body.woocommerce-account .wc-block-components-notice-banner.is-info svg,
body.woocommerce-account .wc-block-components-notice-banner.is-info svg path,
body.woocommerce-account .wc-block-components-notice-banner.is-info svg circle{fill:var(--joelhaus-acc-soft);}
/* ---- Order detail: customer details --------------------------------------- */
body.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
gap:24px;
}
body.woocommerce-account .woocommerce-customer-details .woocommerce-column{
float:none !important;
width:auto !important;
margin:0 !important;
}
body.woocommerce-account .woocommerce-customer-details .woocommerce-column__title{
margin:0 0 12px;
font-size:12px;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--joelhaus-acc-soft);
}
body.woocommerce-account .woocommerce-customer-details address{
padding:22px 24px;
border:1px solid var(--joelhaus-acc-line);
border-radius:0;
background:var(--joelhaus-acc-ivory);
font-style:normal;
font-size:14.5px;
line-height:1.72;
color:var(--joelhaus-acc-ink);
overflow-wrap:anywhere;
}
body.woocommerce-account .woocommerce-order-details__title,
body.woocommerce-account .woocommerce-column__title{scroll-margin-top:120px;}
/* ---- Signed-out: login / register / lost password ------------------------ */
body.woocommerce-account #customer_login{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:40px;
max-width:940px;
margin-inline:auto;
}
body.woocommerce-account #customer_login > .col-1,
body.woocommerce-account #customer_login > .col-2{
float:none !important;
width:auto !important;
margin:0 !important;
padding:34px 34px 30px;
border:1px solid var(--joelhaus-acc-line);
background:var(--joelhaus-acc-ivory);
}
body.woocommerce-account #customer_login h2{
margin:0 0 20px;
font-size:13px;
font-weight:500;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--joelhaus-acc-soft);
}
body.woocommerce-account .woocommerce-ResetPassword{max-width:520px;margin-inline:auto;}
body.woocommerce-account form.woocommerce-form input.input-text,
body.woocommerce-account form.woocommerce-form select{
width:100%;
height:46px;
padding:0 14px;
border:1px solid var(--joelhaus-acc-line);
border-radius:0;
background:#fff;
font-size:15px;
box-sizing:border-box;
}
body.woocommerce-account form.woocommerce-form .form-row{
display:flex;
flex-direction:column;
gap:7px;
float:none !important;
width:auto !important;
padding:0;
margin:0 0 18px;
}
body.woocommerce-account form.woocommerce-form label:not(.woocommerce-form-login__rememberme){
font-size:10.5px;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--joelhaus-acc-soft);
}
body.woocommerce-account .woocommerce-form-login__rememberme{
display:flex;
align-items:center;
gap:8px;
font-size:13px;
letter-spacing:0;
text-transform:none;
}
body.woocommerce-account .woocommerce-form-login .button,
body.woocommerce-account .woocommerce-form-register .button,
body.woocommerce-account .woocommerce-ResetPassword .button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 26px;
border:1px solid var(--joelhaus-acc-ink);
border-radius:0;
background:var(--joelhaus-acc-ink);
color:#fff;
font-size:11.5px;
letter-spacing:.12em;
text-transform:uppercase;
line-height:1;
}
body.woocommerce-account .woocommerce-LostPassword{margin:14px 0 0;font-size:13px;}
body.woocommerce-account .form-row > .button,
body.woocommerce-account .form-row > button.button,
body.woocommerce-account .form-row > input.button{align-self:flex-start;}
body.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"]{width:auto;height:auto;min-height:0;accent-color:var(--joelhaus-acc-accent);}
/* ---- Mobile -------------------------------------------------------------- */
@media (max-width:900px){
body.woocommerce-account.logged-in .woocommerce{display:block;}
body.woocommerce-account .woocommerce-MyAccount-navigation{margin:0 0 30px !important;}
body.woocommerce-account .woocommerce-MyAccount-navigation ul{
display:flex;
flex-wrap:wrap;
gap:8px;
border:0 !important;
padding:0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:0 !important;}
body.woocommerce-account .woocommerce-MyAccount-navigation li a{
min-height:42px;
padding:0 16px;
border:1px solid var(--joelhaus-acc-line);
border-radius:0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
background:var(--joelhaus-acc-ink);
border-color:var(--joelhaus-acc-ink);
color:#fff;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{
margin-top:0 !important;
border-top:0;
flex-basis:100%;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{
display:inline-flex;
border-style:dashed;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper,
body.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm{grid-template-columns:minmax(0,1fr);}
body.woocommerce-account .woocommerce-MyAccount-content form{max-width:none;}
}
@media (max-width:768px){
body.woocommerce-account .woocommerce-orders-table thead{display:none;}
body.woocommerce-account .woocommerce-orders-table,
body.woocommerce-account .woocommerce-orders-table tbody,
body.woocommerce-account .woocommerce-orders-table tr,
body.woocommerce-account .woocommerce-orders-table td{display:block;width:100%;}
body.woocommerce-account .woocommerce-orders-table,
body.woocommerce-account .woocommerce-orders-table tr,
body.woocommerce-account .woocommerce-orders-table th,
body.woocommerce-account .woocommerce-orders-table td{box-sizing:border-box;max-width:100%;}
body.woocommerce-account .woocommerce-orders-table tbody th{
display:flex !important;
align-items:center;
justify-content:space-between;
gap:18px;
width:100%;
padding:7px 0 !important;
border:0 !important;
font-size:14.5px;
letter-spacing:0;
text-transform:none;
text-align:right;
white-space:normal;
}
body.woocommerce-account .woocommerce-orders-table tbody th::before{
content:attr(data-title);
flex:0 0 auto;
font-size:10.5px;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--joelhaus-acc-soft);
}
body.woocommerce-account .woocommerce-orders-table tr{
margin:0 0 14px;
padding:16px 18px;
border:1px solid var(--joelhaus-acc-line);
}
body.woocommerce-account .woocommerce-orders-table td{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:7px 0 !important;
border:0 !important;
text-align:right !important;
white-space:normal;
overflow-wrap:anywhere;
}
body.woocommerce-account .woocommerce-orders-table td::before{
content:attr(data-title) !important;
flex:0 0 auto;
font-size:10.5px;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--joelhaus-acc-soft);
}
body.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{
margin-top:10px;
padding-top:14px !important;
border-top:1px solid var(--joelhaus-acc-line) !important;
}
body.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before{display:none;}
body.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions a.button{width:100%;}
body.woocommerce-account #customer_login > .col-1,
body.woocommerce-account #customer_login > .col-2{padding:26px 22px 24px;}
}
/* ==========================================================================
JOEL HAUS — Footer + social icons (site-wide)
========================================================================== */
.wp-site-blocks > footer.wp-block-template-part{margin-top:0 !important;}
.joelhaus-footer{border-top:1px solid var(--wp--preset--color--rule);}
.joelhaus-footer .joelhaus-fgrid{gap:clamp(24px,4vw,64px);margin-bottom:0;}
.joelhaus-footer .joelhaus-fcol h3{
margin:0 0 14px;
font-family:var(--wp--preset--font-family--body);
font-size:10.5px;
font-weight:500;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--wp--preset--color--ink-2);
}
.joelhaus-footer .joelhaus-fcol ul{list-style:none;margin:0;padding:0;}
.joelhaus-footer .joelhaus-fcol li{margin:0 0 10px;}
.joelhaus-footer .joelhaus-fcol a{
font-family:var(--wp--preset--font-family--body);
font-size:14px;
color:var(--wp--preset--color--ink);
text-decoration:none;
border-bottom:1px solid transparent;
padding-bottom:2px;
}
.joelhaus-footer .joelhaus-fcol a:hover{border-bottom-color:var(--wp--preset--color--rule);}
.joelhaus-footer .joelhaus-fbottom{
margin-top:clamp(28px,3vw,44px);
padding-top:22px;
border-top:1px solid var(--wp--preset--color--rule);
}
.joelhaus-footer .joelhaus-copyright{
font-family:var(--wp--preset--font-family--body);
margin:16px 0 0;
font-size:12px;
letter-spacing:.04em;
color:var(--wp--preset--color--ink-2);
}
.joelhaus-social{
display:flex;
justify-content:center;
gap:16px;
list-style:none;
margin:0;
padding:0;
}
.joelhaus-social__link{
display:inline-flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border:1px solid var(--wp--preset--color--rule);
color:var(--wp--preset--color--ink);
transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.joelhaus-social__link:hover{background:#fff;border-color:var(--wp--preset--color--vermilion-text);color:var(--wp--preset--color--vermilion-text);}
.joelhaus-social__link:focus-visible{outline:2px solid var(--wp--preset--color--vermilion-text);outline-offset:2px;}
@media (max-width:700px){
.joelhaus-footer .joelhaus-fgrid{gap:26px;}
.joelhaus-footer .joelhaus-fcol{flex-basis:100% !important;}
}
/* ==========================================================================
JOEL HAUS — Header utilities, search and welcome popup
========================================================================== */
.joelhaus-search{position:relative;display:inline-flex;}
.joelhaus-search__toggle{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
cursor:pointer;
color:var(--wp--preset--color--ink);
list-style:none;
border-radius:0;
}
.joelhaus-search__toggle::-webkit-details-marker{display:none;}
.joelhaus-search__toggle:hover{color:var(--wp--preset--color--vermilion-text);}
.joelhaus-search__toggle:focus-visible{outline:2px solid var(--wp--preset--color--vermilion-text);outline-offset:2px;}
.joelhaus-search__form{
position:absolute;
top:calc(100% + 12px);
right:0;
z-index:130;
display:flex;
gap:8px;
padding:12px;
background:var(--wp--preset--color--card);
border:1px solid var(--wp--preset--color--rule);
}
.joelhaus-search__input{
width:210px;
height:40px;
padding:0 12px;
border:1px solid var(--wp--preset--color--rule);
border-radius:0;
font-size:14px;
background:#fff;
}
.joelhaus-search__input:focus{outline:none;border-color:var(--wp--preset--color--vermilion-text);}
.joelhaus-search__submit{
height:40px;
padding:0 16px;
border:1px solid var(--wp--preset--color--ink);
border-radius:0;
background:var(--wp--preset--color--ink);
color:#fff;
font-size:11px;
letter-spacing:.12em;
text-transform:uppercase;
cursor:pointer;
}
@media (max-width:700px){
.joelhaus-search__form{position:fixed;left:16px;right:16px;top:auto;}
.joelhaus-search__input{width:100%;}
}
.woocommerce-customer-account:focus-visible{outline:2px solid var(--wp--preset--color--vermilion-text);outline-offset:3px;}
/* ---- New Arrivals CTA ---------------------------------------------------- */
.joelhaus-mod-cta{max-width:1560px;margin:clamp(22px,2.4vw,34px) auto 0;text-align:center;}
.joelhaus-mod-cta a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 30px;
border:1px solid var(--wp--preset--color--ink);
background:var(--wp--preset--color--ink);
color:#fff;
font-size:11.5px;
letter-spacing:.14em;
text-transform:uppercase;
text-decoration:none;
}
.joelhaus-mod-cta a:hover{background:var(--wp--preset--color--vermilion-text);border-color:var(--wp--preset--color--vermilion-text);}
/* ---- Welcome popup ------------------------------------------------------- */
.joelhaus-popup{
padding:0;
border:0;
background:transparent;
max-width:min(560px,calc(100vw - 32px));
width:100%;
}
.joelhaus-popup::backdrop{background:rgba(30,28,25,.42);}
.joelhaus-popup__panel{
position:relative;
padding:clamp(30px,4vw,44px) clamp(26px,3.6vw,44px) clamp(26px,3.2vw,36px);
background:var(--wp--preset--color--paper);
border:1px solid var(--wp--preset--color--rule);
text-align:center;
}
.joelhaus-popup__close{
position:absolute;
top:12px;
right:12px;
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border:1px solid transparent;
background:transparent;
color:var(--wp--preset--color--ink-2);
cursor:pointer;
border-radius:0;
}
.joelhaus-popup__close:hover{color:var(--wp--preset--color--ink);border-color:var(--wp--preset--color--rule);}
.joelhaus-popup__close:focus-visible{outline:2px solid var(--wp--preset--color--vermilion-text);outline-offset:2px;}
.joelhaus-popup__eyebrow{
margin:0 0 14px;
font-size:10.5px;
letter-spacing:.28em;
text-transform:uppercase;
color:var(--wp--preset--color--ink-2);
}
.joelhaus-popup__title{
margin:0 0 14px;
font-family:var(--wp--preset--font-family--heading);
font-size:clamp(26px,3vw,33px);
line-height:1.15;
color:var(--wp--preset--color--ink);
}
.joelhaus-popup__body{
margin:0 auto 24px;
max-width:40ch;
font-size:15px;
line-height:1.6;
color:var(--wp--preset--color--ink-2);
}
.joelhaus-popup__form{display:flex;flex-direction:column;gap:12px;}
.joelhaus-popup__input{
width:100%;
height:48px;
padding:0 14px;
border:1px solid var(--wp--preset--color--rule);
border-radius:0;
background:#fff;
font-size:15px;
box-sizing:border-box;
}
.joelhaus-popup__input:focus{outline:2px solid var(--wp--preset--color--vermilion);outline-offset:2px;border-color:var(--wp--preset--color--vermilion-text);}
.joelhaus-popup__cta{
height:48px;
border:1px solid var(--wp--preset--color--ink);
border-radius:0;
background:var(--wp--preset--color--ink);
color:#fff;
font-size:11.5px;
letter-spacing:.14em;
text-transform:uppercase;
cursor:pointer;
}
.joelhaus-popup__cta:hover:not(:disabled){background:var(--wp--preset--color--vermilion-text);border-color:var(--wp--preset--color--vermilion-text);}
.joelhaus-popup__cta:disabled{opacity:.45;cursor:not-allowed;}
.joelhaus-popup__cta:focus-visible{outline:2px solid var(--wp--preset--color--vermilion-text);outline-offset:2px;}
.joelhaus-popup__status{margin:0;font-size:13px;min-height:0;}
.joelhaus-popup__status.is-error{color:var(--wp--preset--color--vermilion-text);}
.joelhaus-popup__notice{
margin:0;
font-size:12px;
line-height:1.5;
color:var(--wp--preset--color--ink-2);
}
.joelhaus-popup__consent{
margin:6px 0 0;
font-size:11.5px;
line-height:1.55;
color:var(--wp--preset--color--ink-2);
}
.joelhaus-popup__consent a{color:var(--wp--preset--color--ink);text-underline-offset:2px;}
@media (max-width:700px){
.joelhaus-popup{
max-width:100%;
width:100%;
margin:auto auto 0;
border-radius:0;
}
.joelhaus-popup__panel{padding:26px 22px 22px;}
.joelhaus-popup__title{font-size:24px;}
.joelhaus-popup__body{margin-bottom:18px;font-size:14.5px;}
}
/* ==========================================================================
JOEL HAUS — Details in Motion
Two media panes of identical visible height; copy sits beneath the media.
The video uses object-fit:contain by default so no part of the piece can be
cropped away. Switch --joelhaus-dim-video-fit to cover once the framing is checked.
========================================================================== */
.joelhaus-dim{
background:var(--wp--preset--color--card);
--joelhaus-dim-video-fit:cover;
/* Row height drives both panes. The left pane is sized to the video's own
9:16 ratio, so the clip fills it edge to edge with nothing cropped away. */
/* Same expression the hero uses, so both bands are exactly the same height. */
--joelhaus-dim-h:min(calc(100svh - 142px),780px);
--joelhaus-dim-video-focus:center 46%;
/* Sampled from the still's own corners (var(--wp--preset--color--paper)) so the letterbox is seamless. */
--joelhaus-dim-still-bg:var(--wp--preset--color--paper);
}
.joelhaus-dim-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:10px;
height:var(--joelhaus-dim-h);
max-width:1240px;
margin:0 auto;
}
.joelhaus-dim-media{
position:relative;
height:100%;
min-width:0;
overflow:hidden;
background:var(--wp--preset--color--sand);
}
.joelhaus-dim-media--right{background:var(--joelhaus-dim-still-bg);}
/* The still is a square product photo in a tall strip: contain keeps the whole
piece visible and its scale honest instead of cropping the brooch. */
.joelhaus-dim-media--right img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;}
.joelhaus-dim-media--left img{width:100%;height:100%;object-fit:cover;display:block;}
.joelhaus-dim-media video{width:100%;height:100%;object-fit:var(--joelhaus-dim-video-fit);object-position:var(--joelhaus-dim-video-focus);display:block;background:var(--wp--preset--color--sand);}
.joelhaus-dim-toggle{
position:absolute;
left:14px;
bottom:14px;
min-height:34px;
padding:0 15px;
border:1px solid rgba(255,255,255,.75);
border-radius:0;
background:rgba(30,28,25,.5);
color:#fff;
font-size:10.5px;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
cursor:pointer;
}
.joelhaus-dim-toggle:hover{background:rgba(30,28,25,.75);}
.joelhaus-dim-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.joelhaus-dim-copy{max-width:1240px;margin:clamp(22px,2.4vw,34px) auto 0;text-align:center;}
/* Split mode: no still image, so the copy occupies the right third of the band. */
.joelhaus-dim--split .joelhaus-dim-copy--side{
box-sizing:border-box;
min-width:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
height:100%;
margin:0;
max-width:none;
padding:clamp(26px,3vw,52px);
text-align:left;
background:var(--wp--preset--color--paper);
}
.joelhaus-dim--split .joelhaus-dim-copy--side .joelhaus-dim-body{margin:0;max-width:34ch;}
.joelhaus-dim--split .joelhaus-dim-copy--side .joelhaus-dim-products{justify-content:flex-start;}
.joelhaus-dim--split .joelhaus-dim-copy--side .joelhaus-dim-cta{align-self:flex-start;}
.joelhaus-dim-h2{margin:0 0 12px !important;}
.joelhaus-dim-body{
margin:0 auto;
max-width:54ch;
font-size:15.5px;
line-height:1.6;
color:var(--wp--preset--color--ink-2);
}
.joelhaus-dim-products{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:clamp(14px,2vw,28px);
margin:clamp(20px,2.4vw,32px) 0 0;
}
.joelhaus-dim-product{width:clamp(120px,14vw,160px);text-decoration:none;color:inherit;}
.joelhaus-dim-product__media{display:block;aspect-ratio:1 / 1;overflow:hidden;background:var(--wp--preset--color--sand);}
.joelhaus-dim-product__media img{width:100%;height:100%;object-fit:cover;display:block;}
.joelhaus-dim-product__name{display:block;margin-top:10px;font-size:13px;line-height:1.35;}
.joelhaus-dim-product__price{display:block;margin-top:3px;font-size:12.5px;color:var(--wp--preset--color--ink-2);}
.joelhaus-dim-cta{margin:clamp(18px,2vw,26px) 0 0;}
.joelhaus-dim-cta a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 30px;
border:1px solid var(--wp--preset--color--ink);
background:var(--wp--preset--color--ink);
color:#fff;
font-size:11.5px;
letter-spacing:.14em;
text-transform:uppercase;
text-decoration:none;
}
.joelhaus-dim-cta a:hover{background:var(--wp--preset--color--vermilion-text);border-color:var(--wp--preset--color--vermilion-text);}
@media (max-width:900px){
.joelhaus-dim--split .joelhaus-dim-copy--side{
height:auto;
align-items:center;
text-align:center;
padding:clamp(22px,6vw,34px) 20px;
}
.joelhaus-dim--split .joelhaus-dim-copy--side .joelhaus-dim-body{max-width:44ch;}
.joelhaus-dim--split .joelhaus-dim-copy--side .joelhaus-dim-products,
.joelhaus-dim--split .joelhaus-dim-copy--side .joelhaus-dim-cta{justify-content:center;align-self:center;}
.joelhaus-dim-grid{
grid-template-columns:minmax(0,1fr);
grid-auto-rows:auto;
height:auto;
gap:10px;
}
/* Same crop discipline as desktop, so the supplier card stays out of frame. */
.joelhaus-dim{--joelhaus-dim-video-focus:center 58%;}
.joelhaus-dim-media--left{aspect-ratio:4 / 5;height:auto;}
.joelhaus-dim-media--right{aspect-ratio:1 / 1;height:auto;}
.joelhaus-dim-body{font-size:14.5px;}
}
/* Product row inside the Details in Motion side column */
.joelhaus-dim--split .joelhaus-dim-copy--side .joelhaus-dim-products{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
width:100%;
margin-top:clamp(18px,2vw,26px);
}
.joelhaus-dim--split .joelhaus-dim-copy--side .joelhaus-dim-product{width:auto;}
.joelhaus-dim--split .joelhaus-dim-copy--side .joelhaus-dim-product__name{font-size:12px;}
.joelhaus-dim--split .joelhaus-dim-copy--side .joelhaus-dim-product__price{font-size:11.5px;}
/* ==========================================================================
JOEL HAUS — Shop archive
One heading, a quiet breadcrumb, and products reachable without scrolling
past a full screen of introduction.
========================================================================== */
body.woocommerce-shop main.wp-block-group,
body.post-type-archive-product main.wp-block-group,
body.tax-product_cat main.wp-block-group{
padding-top:clamp(30px,3.6vw,48px) !important;
padding-bottom:clamp(60px,7vw,90px) !important;
}
body.woocommerce-shop main h2,
body.post-type-archive-product main h2,
body.tax-product_cat main h2{
font-size:clamp(28px,3.4vw,44px) !important;
line-height:1.12;
margin:0 0 14px !important;
}
body.woocommerce-shop main h2 + p,
body.post-type-archive-product main h2 + p,
body.tax-product_cat main h2 + p{
max-width:56ch;
margin-left:auto;
margin-right:auto;
font-size:15.5px !important;
line-height:1.6;
color:var(--wp--preset--color--ink-2);
}
.woocommerce-breadcrumb{
margin:clamp(22px,2.4vw,34px) 0 clamp(14px,1.6vw,22px) !important;
font-size:11px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--wp--preset--color--ink-2);
}
.woocommerce-breadcrumb a{color:var(--wp--preset--color--ink-2);text-decoration:none;border-bottom:1px solid var(--wp--preset--color--rule);}
.woocommerce-breadcrumb a:hover{color:var(--wp--preset--color--ink);}
.woocommerce-result-count,
.woocommerce-ordering select{
font-size:12px;
letter-spacing:.06em;
color:var(--wp--preset--color--ink-2);
}
/* Informational notices site-wide: warm neutral instead of the default blue.
Error and success keep their own colours so states stay distinguishable. */
.wc-block-components-notice-banner.is-info,
.woocommerce-info,
.woocommerce-message{
background:var(--wp--preset--color--paper) !important;
border-color:var(--wp--preset--color--rule) !important;
border-radius:0;
color:var(--wp--preset--color--ink) !important;
}
.wc-block-components-notice-banner.is-info svg,
.wc-block-components-notice-banner.is-info svg path,
.wc-block-components-notice-banner.is-info svg circle{fill:var(--wp--preset--color--ink-2) !important;}
.woocommerce-info::before,
.woocommerce-message::before{color:var(--wp--preset--color--ink-2) !important;}
/* ---------------------------------------------------------------- */
/* JOEL HAUS - Shop archive, second pass */
/* 1. the intro heading was pinned left by its own 720px max-width */
/* while the paragraph centred; both are centred now. */
/* 2. the notice icon still carried WooCommerce blue as a background */
/* colour on the svg element itself, not on a child. */
/* 3. tighter vertical rhythm above the product area. */
/* ---------------------------------------------------------------- */
body.woocommerce-shop main > .wp-block-group:first-of-type > .wp-block-heading,
body.post-type-archive-product main > .wp-block-group:first-of-type > .wp-block-heading,
body.tax-product_cat main > .wp-block-group:first-of-type > .wp-block-heading{
max-width:none;
margin-left:auto;
margin-right:auto;
}
body.woocommerce-shop main > .wp-block-group:first-of-type,
body.post-type-archive-product main > .wp-block-group:first-of-type,
body.tax-product_cat main > .wp-block-group:first-of-type{
margin-bottom:clamp(14px,1.6vw,22px);
}
body.woocommerce-shop main > .wp-block-group:first-of-type > p,
body.post-type-archive-product main > .wp-block-group:first-of-type > p,
body.tax-product_cat main > .wp-block-group:first-of-type > p{
margin-top:clamp(10px,1.1vw,16px);
}
body.woocommerce-shop .woocommerce-breadcrumb,
body.post-type-archive-product .woocommerce-breadcrumb,
body.tax-product_cat .woocommerce-breadcrumb{
margin-top:0 !important;
margin-bottom:clamp(12px,1.3vw,18px) !important;
}
/* The blue disc lives on the svg element, so it has to be cleared there. */
.wc-block-components-notice-banner.is-info > svg,
.wc-block-components-notice-banner.is-info svg{
background:transparent !important;
background-color:transparent !important;
fill:var(--wp--preset--color--ink-2) !important;
}
/* ---------------------------------------------------------------- */
/* JOEL HAUS - archive intro (shop, category and tag archives). */
/* Replaces the old static heading block, so a category archive now */
/* carries its own name as the page H1. */
/* ---------------------------------------------------------------- */
.joelhaus-arch-intro{
max-width:1200px;
margin:0 auto clamp(14px,1.6vw,22px);
padding:0 25px;
text-align:center;
}
.joelhaus-arch-title{
margin:0;
font-family:var(--wp--preset--font-family--heading);
font-weight:400;
font-size:clamp(28px,3.4vw,44px);
line-height:1.12;
color:var(--wp--preset--color--ink);
}
.joelhaus-arch-lede{
max-width:56ch;
margin:clamp(10px,1.1vw,16px) auto 0;
font-size:15.5px;
line-height:1.62;
color:var(--wp--preset--color--ink-2);
}
@media (max-width:600px){
.joelhaus-arch-intro{padding:0 20px;}
.joelhaus-arch-lede{font-size:15px;}
}
/* ==========================================================================
JOEL HAUS — Round-3 homepage + product card
Signature move helpers, homepage bands, spec-compliant product cards.
========================================================================== */
/* Section rhythm — 96px between homepage sections, 48px mobile. */
.joelhaus-home > * + * {
margin-top: 96px;
}
@media (max-width: 900px) {
.joelhaus-home > * + * {
margin-top: 48px;
}
}
.joelhaus-section {
padding: 0 40px;
}
.joelhaus-section--tight {
padding: 0 40px;
}
@media (max-width: 900px) {
.joelhaus-section,
.joelhaus-section--tight {
padding: 0 20px;
}
}
/* ---- Signature move: italic kicker → uppercase caps title → 26x2 vermilion rule ---- */
.joelhaus-kicker {
font-family: var(--wp--preset--font-family--heading);
font-style: italic;
font-weight: 400;
font-size: clamp(1rem, 1.4vw, 1.25rem);
line-height: 1.4;
margin: 0 0 12px;
color: var(--wp--preset--color--ink-2);
}
.joelhaus-kicker--light {
color: var(--wp--preset--color--card);
}
.joelhaus-caps-title {
font-family: var(--wp--preset--font-family--heading);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.15em;
line-height: 1.18;
font-size: clamp(1.25rem, 2.4vw, 2rem);
margin: 0 0 24px;
color: var(--wp--preset--color--ink);
}
.joelhaus-caps-title--display {
font-size: clamp(1.75rem, 3.4vw, 2.75rem);
}
.wp-block-cover .joelhaus-caps-title {
color: var(--wp--preset--color--card);
}
.joelhaus-vrule {
margin: 24px 0;
padding: 0;
line-height: 0;
}
.joelhaus-vrule__bar {
display: inline-block;
width: 26px;
height: 2px;
background: var(--wp--preset--color--vermilion);
}
/* ---- Hero (Autumn 2026 — 640px full-bleed) ---- */
.joelhaus-hero {
min-height: 640px;
}
.joelhaus-hero .wp-block-cover__inner-container {
max-width: 1440px;
margin: 0 auto;
width: 100%;
padding: 0 40px 96px;
color: var(--wp--preset--color--card);
}
.joelhaus-hero .joelhaus-kicker {
color: var(--wp--preset--color--card);
}
.joelhaus-hero .joelhaus-caps-title,
.joelhaus-hero .wp-block-heading {
color: var(--wp--preset--color--card);
}
.joelhaus-hero__cta .wp-block-button__link {
background: var(--wp--preset--color--vermilion);
color: var(--wp--preset--color--on-vermilion);
padding: 16px 32px;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 0;
border: 0;
}
.joelhaus-hero__cta .wp-block-button__link:hover {
background: var(--wp--preset--color--ember);
color: var(--wp--preset--color--on-vermilion);
}
@media (max-width: 900px) {
.joelhaus-hero {
min-height: 480px;
}
.joelhaus-hero .wp-block-cover__inner-container {
padding: 0 20px 48px;
}
}
/* ---- Category cards (4-col 3:4) ---- */
.joelhaus-cat-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.joelhaus-cat-grid__tile {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.joelhaus-cat-grid__media {
display: block;
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--wp--preset--color--card);
}
.joelhaus-cat-grid__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 760ms cubic-bezier(.22, 1, .36, 1);
}
.joelhaus-cat-grid__tile:hover .joelhaus-cat-grid__media img {
transform: scale(1.045);
}
.joelhaus-cat-grid__label {
font-family: var(--wp--preset--font-family--heading);
font-weight: 400;
font-size: 1.25rem;
line-height: 1.3;
margin-top: 16px;
color: var(--wp--preset--color--ink);
}
@media (max-width: 1200px) {
.joelhaus-cat-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.joelhaus-cat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
}
/* ---- Featured "Stylish Jewelry" + chip tabs ---- */
.joelhaus-feat {
max-width: 1440px;
margin: 0 auto;
}
.joelhaus-feat__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding-bottom: 16px;
border-bottom: 1px solid var(--wp--preset--color--rule);
margin-bottom: 32px;
}
.joelhaus-feat__h2 {
font-family: var(--wp--preset--font-family--heading);
font-weight: 300;
font-size: clamp(1.5rem, 2.8vw, 2.25rem);
letter-spacing: -0.012em;
line-height: 1.15;
margin: 0;
color: var(--wp--preset--color--ink);
}
.joelhaus-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.joelhaus-chip {
appearance: none;
background: transparent;
border: 1px solid var(--wp--preset--color--rule-strong);
color: var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--body);
font-size: 0.656rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 8px 14px;
cursor: pointer;
line-height: 1.4;
transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.joelhaus-chip:hover {
border-color: var(--wp--preset--color--ink);
}
.joelhaus-chip.is-active,
.joelhaus-chip[aria-selected="true"] {
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--card);
border-color: var(--wp--preset--color--ink);
}
.joelhaus-chip:focus-visible {
outline: 2px solid var(--wp--preset--color--vermilion);
outline-offset: 2px;
}
.joelhaus-feat__panel {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.joelhaus-feat__panel[hidden] {
display: none;
}
@media (max-width: 1200px) {
.joelhaus-feat__panel {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.joelhaus-feat__panel {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
}
/* ---- Product card (used inside .joelhaus-feat__panel) ---- */
.joelhaus-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
position: relative;
}
.joelhaus-card__media {
position: relative;
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--wp--preset--color--card);
}
.joelhaus-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 760ms cubic-bezier(.22, 1, .36, 1);
}
.joelhaus-card:hover .joelhaus-card__media img {
transform: scale(1.045);
}
.joelhaus-card__badge {
position: absolute;
top: 12px;
left: 12px;
background: var(--wp--preset--color--vermilion);
color: var(--wp--preset--color--on-vermilion);
font-size: 0.656rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 4px 8px;
z-index: 2;
line-height: 1.4;
}
.joelhaus-card__name {
font-family: var(--wp--preset--font-family--heading);
font-weight: 400;
font-size: 1.125rem;
line-height: 1.3;
color: var(--wp--preset--color--ink);
margin-top: 12px;
}
.joelhaus-card__meta {
font-size: 0.78rem;
color: var(--wp--preset--color--ink-3);
margin-top: 4px;
line-height: 1.5;
}
.joelhaus-card__price {
font-size: 0.8125rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--wp--preset--color--ink);
margin-top: 4px;
}
.joelhaus-card__cta {
display: inline-block;
margin-top: 12px;
padding: 12px 16px;
border: 1px solid var(--wp--preset--color--ink);
background: transparent;
color: var(--wp--preset--color--ink);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
text-align: center;
transition: background 200ms ease, color 200ms ease;
}
.joelhaus-card:hover .joelhaus-card__cta {
background: var(--wp--preset--color--vermilion);
color: var(--wp--preset--color--on-vermilion);
border-color: var(--wp--preset--color--vermilion);
}
.joelhaus-card:focus-visible {
outline: 2px solid var(--wp--preset--color--vermilion);
outline-offset: 2px;
}
/* ---- Shop for… (2 cols 16:10) ---- */
.joelhaus-shop-for {
max-width: 1440px;
margin: 0 auto;
}
.joelhaus-shop-for__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 48px;
}
.joelhaus-shop-for__tile {
display: flex;
flex-direction: column;
}
.joelhaus-shop-for__media {
margin: 0 0 16px;
overflow: hidden;
}
.joelhaus-shop-for__media img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
transition: transform 760ms cubic-bezier(.22, 1, .36, 1);
background: var(--wp--preset--color--card);
}
.joelhaus-shop-for__tile:hover .joelhaus-shop-for__media img {
transform: scale(1.045);
}
.joelhaus-shop-for__title {
font-family: var(--wp--preset--font-family--heading);
font-weight: 300;
font-size: 1.5rem;
line-height: 1.2;
margin: 0 0 8px;
color: var(--wp--preset--color--ink);
}
.joelhaus-discover-more {
margin: 0;
font-size: 0.656rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--wp--preset--color--vermilion-text);
}
.joelhaus-discover-more a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 2px;
}
.joelhaus-discover-more a:hover {
border-bottom-color: var(--wp--preset--color--vermilion-text);
}
@media (max-width: 900px) {
.joelhaus-shop-for__grid {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
}
/* ---- Shop by Category — sand band + 6 x 120px circles.
Circles are the sole exception to the design system's 0-radius rule. ---- */
.joelhaus-cat-circles-band {
padding: 64px 40px;
}
.joelhaus-cat-circles-band .joelhaus-h2 {
font-family: var(--wp--preset--font-family--heading);
font-weight: 300;
font-size: clamp(1.5rem, 2.8vw, 2.25rem);
letter-spacing: -0.012em;
margin: 0 0 32px;
color: var(--wp--preset--color--ink);
}
.joelhaus-cat-circles {
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.joelhaus-cat-circle {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-decoration: none;
color: inherit;
}
.joelhaus-cat-circle__media {
display: block;
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
background: var(--wp--preset--color--card);
transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
}
.joelhaus-cat-circle__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.joelhaus-cat-circle:hover .joelhaus-cat-circle__media {
transform: scale(1.045);
}
.joelhaus-cat-circle__label {
font-size: 0.656rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--wp--preset--color--ink);
}
@media (max-width: 900px) {
.joelhaus-cat-circles-band {
padding: 48px 20px;
}
.joelhaus-cat-circle__media {
width: 96px;
height: 96px;
}
}
/* ---- Brand philosophy (520px + paper card, left-aligned) ---- */
.joelhaus-philosophy {
min-height: 520px;
}
.joelhaus-philosophy .wp-block-cover__inner-container {
max-width: 1440px;
margin: 0 auto;
width: 100%;
padding: 0 40px;
}
.joelhaus-philosophy__card {
padding: 48px;
max-width: 560px;
background: var(--wp--preset--color--paper);
}
.joelhaus-philosophy__card .joelhaus-kicker {
color: var(--wp--preset--color--ink-2);
}
.joelhaus-philosophy__card .joelhaus-caps-title {
color: var(--wp--preset--color--ink);
}
@media (max-width: 900px) {
.joelhaus-philosophy {
min-height: 420px;
}
.joelhaus-philosophy .wp-block-cover__inner-container {
padding: 0 20px;
}
.joelhaus-philosophy__card {
padding: 32px 24px;
}
}
/* ---- Details in Motion — override the module's default 2fr/1fr grid to
spec's 1.6fr/1fr, keeping the signature-move copy in the sand panel. ---- */
.joelhaus-dim {
background: var(--wp--preset--color--sand);
padding: 48px;
max-width: 1440px;
margin: 0 auto;
}
.joelhaus-dim-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 24px;
max-width: none;
height: auto;
}
.joelhaus-dim-media--left {
aspect-ratio: 16 / 10;
height: auto;
background: var(--wp--preset--color--card);
}
.joelhaus-dim-toggle {
left: 24px;
bottom: 24px;
border: 1px solid rgba(255, 255, 255, 0.9);
background: transparent;
color: var(--wp--preset--color--card);
padding: 8px 14px;
}
.joelhaus-dim-toggle:hover {
background: rgba(255, 255, 255, 0.12);
}
.joelhaus-dim--split .joelhaus-dim-copy--side {
align-items: flex-start;
text-align: left;
padding: 0;
background: transparent;
}
.joelhaus-dim--split .joelhaus-dim-copy--side .joelhaus-dim-body {
margin: 0;
max-width: 40ch;
}
.joelhaus-dim-h2 {
color: var(--wp--preset--color--ink);
}
@media (max-width: 900px) {
.joelhaus-dim {
padding: 32px 20px;
}
.joelhaus-dim-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ---- WooCommerce catalog card — round 4b spec.
Dense archive card: 1:1 white ground; title Instrument Sans 14px on same
row as tabular-nums price (title left, price right); hover scale 1.03/300ms;
outline "Add to bag" hover → vermilion; NEW badge vermilion 11px. ---- */
.woocommerce ul.products li.product {
position: relative;
text-align: left;
list-style: none;
margin: 0;
padding: 0;
}
.woocommerce ul.products li.product > a {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"media media"
"title price";
column-gap: 12px;
row-gap: 8px;
text-decoration: none;
color: inherit;
}
.woocommerce ul.products li.product > a > img,
.woocommerce ul.products li.product > a > .attachment-woocommerce_thumbnail {
grid-area: media;
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
height: auto;
background: var(--wp--preset--color--card);
transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
margin: 0;
display: block;
}
.woocommerce ul.products li.product:hover > a > img,
.woocommerce ul.products li.product:hover > a > .attachment-woocommerce_thumbnail {
transform: scale(1.03);
}
.woocommerce ul.products li.product > a > .woocommerce-loop-product__title {
grid-area: title;
font-family: var(--wp--preset--font-family--body);
font-weight: 500;
font-size: 0.875rem;
line-height: 1.4;
color: var(--wp--preset--color--ink);
padding: 0;
margin: 0;
align-self: baseline;
}
.woocommerce ul.products li.product > a > .price,
.woocommerce ul.products li.product > a > .price ins,
.woocommerce ul.products li.product > a > .price del {
grid-area: price;
text-align: right;
align-self: baseline;
color: var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--body);
font-size: 0.875rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
margin: 0;
background: transparent;
}
.joelhaus-loop-badge {
position: absolute;
top: 12px;
left: 12px;
background: var(--wp--preset--color--vermilion);
color: var(--wp--preset--color--on-vermilion);
font-family: var(--wp--preset--font-family--body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 4px 8px;
z-index: 2;
line-height: 1.4;
}
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button.add_to_cart_button {
display: inline-block;
margin-top: 12px;
padding: 12px 16px;
border: 1px solid var(--wp--preset--color--ink);
background: transparent;
color: var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 0;
transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:hover {
background: var(--wp--preset--color--vermilion);
color: var(--wp--preset--color--on-vermilion);
border-color: var(--wp--preset--color--vermilion);
}
/* Hide the default WooCommerce sale badge — spec uses NEW instead. */
.woocommerce span.onsale {
display: none;
}
/* ==========================================================================
JOEL HAUS — Round-4 header + mini-cart drawer
Sticky 72px header, transparent-over-hero → opaque on scroll,
right-side drawer with pure-CSS transform transitions.
========================================================================== */
/* ---- Header shell ------------------------------------------------------- */
.joelhaus-header {
position: sticky;
top: 0;
z-index: 100;
min-height: 72px;
background: var(--wp--preset--color--paper);
border-bottom: 1px solid var(--wp--preset--color--rule);
color: var(--wp--preset--color--ink);
transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.joelhaus-header[data-over-dark="true"] {
/* Subtle ink tint (rgba, not gradient) instead of fully transparent so
white nav text stays legible when the hero photo underneath is light
(e.g. placeholder or a bright shot). 0.28 is barely visible over a
dark hero, definitively readable over a light one. */
background: rgba(14, 13, 12, 0.28);
color: var(--wp--preset--color--card);
border-bottom-color: transparent;
}
.joelhaus-header__inner {
max-width: 1440px;
margin: 0 auto;
min-height: 72px;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
}
/* ---- Left: primary nav + SHOP▾ mega ------------------------------------ */
.joelhaus-header__nav {
justify-self: start;
}
.joelhaus-header__nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 32px;
align-items: center;
}
.joelhaus-header__nav li {
margin: 0;
}
.joelhaus-header__nav a,
.joelhaus-header__nav a:visited {
font-family: var(--wp--preset--font-family--body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 72px;
}
.joelhaus-header__nav a:hover {
color: var(--wp--preset--color--vermilion-text);
}
.joelhaus-header[data-over-dark="true"] .joelhaus-header__nav a:hover {
color: var(--wp--preset--color--card);
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-thickness: 1px;
}
.joelhaus-header__shop {
position: relative;
}
.joelhaus-header__mega {
position: absolute;
top: 100%;
left: -40px;
right: auto;
min-width: 720px;
background: var(--wp--preset--color--paper);
border-top: 1px solid var(--wp--preset--color--rule);
border-bottom: 1px solid var(--wp--preset--color--rule);
padding: 32px 40px;
display: none;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
color: var(--wp--preset--color--ink);
z-index: 110;
}
.joelhaus-header__shop:hover .joelhaus-header__mega,
.joelhaus-header__shop:focus-within .joelhaus-header__mega {
display: grid;
}
.joelhaus-header__mega-col {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.joelhaus-header__mega-media {
display: block;
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--wp--preset--color--card);
}
.joelhaus-header__mega-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}
.joelhaus-header__mega-col:hover .joelhaus-header__mega-media img {
transform: scale(1.03);
}
.joelhaus-header__mega-label {
margin-top: 12px;
font-family: var(--wp--preset--font-family--heading);
font-weight: 400;
font-size: 1.125rem;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
}
/* ---- Center: wordmark --------------------------------------------------- */
.joelhaus-header__wordmark {
justify-self: center;
font-family: var(--wp--preset--font-family--heading);
font-weight: 400;
font-size: 1.25rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
line-height: 72px;
white-space: nowrap;
}
/* ---- Right: icons + bag badge ------------------------------------------ */
.joelhaus-header__icons {
justify-self: end;
display: flex;
align-items: center;
gap: 16px;
}
.joelhaus-header__icon {
appearance: none;
background: transparent;
border: 0;
color: inherit;
padding: 8px;
margin: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
line-height: 1;
}
.joelhaus-header__icon:hover {
color: var(--wp--preset--color--vermilion-text);
}
.joelhaus-header[data-over-dark="true"] .joelhaus-header__icon:hover {
color: var(--wp--preset--color--card);
opacity: 0.85;
}
.joelhaus-header__icon:focus-visible {
outline: 2px solid var(--wp--preset--color--vermilion);
outline-offset: 2px;
}
.joelhaus-bag-badge {
position: absolute;
top: 0;
right: 0;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: var(--wp--preset--color--vermilion);
color: var(--wp--preset--color--on-vermilion);
font-family: var(--wp--preset--font-family--body);
font-size: 0.625rem;
font-weight: 600;
line-height: 16px;
text-align: center;
pointer-events: none;
}
.joelhaus-bag-badge[hidden] {
display: none;
}
/* ---- Header inline search ---------------------------------------------- */
.joelhaus-header__search {
position: absolute;
top: 72px;
right: 40px;
background: var(--wp--preset--color--paper);
border: 1px solid var(--wp--preset--color--rule);
padding: 12px;
display: flex;
gap: 8px;
z-index: 105;
}
.joelhaus-header__search[hidden] {
display: none;
}
.joelhaus-header__search input[type="search"] {
appearance: none;
border: 1px solid var(--wp--preset--color--rule);
background: var(--wp--preset--color--card);
color: var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--body);
font-size: 0.875rem;
padding: 10px 12px;
width: 240px;
border-radius: 0;
}
.joelhaus-header__search input[type="search"]:focus {
outline: 2px solid var(--wp--preset--color--vermilion);
outline-offset: 2px;
border-color: var(--wp--preset--color--ink);
}
.joelhaus-header__search button {
appearance: none;
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--card);
border: 1px solid var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 10px 16px;
border-radius: 0;
cursor: pointer;
}
.joelhaus-header__search button:hover {
background: var(--wp--preset--color--vermilion);
border-color: var(--wp--preset--color--vermilion);
}
/* ---- Header responsive ------------------------------------------------- */
@media (max-width: 1000px) {
.joelhaus-header__inner {
padding: 0 20px;
gap: 12px;
}
.joelhaus-header__nav ul { gap: 20px; }
.joelhaus-header__mega {
left: -20px;
min-width: calc(100vw - 40px);
max-width: calc(100vw - 40px);
}
}
@media (max-width: 720px) {
.joelhaus-header__inner {
grid-template-columns: auto 1fr auto;
}
.joelhaus-header__nav { display: none !important; }
.joelhaus-header__hamburger { display: inline-flex !important; }
.joelhaus-hide-mobile { display: none !important; }
.joelhaus-header__wordmark { font-size: 1rem; letter-spacing: 0.15em; justify-self: center; }
.joelhaus-header__left { justify-self: start; }
}
/* ---- Mini-cart drawer -------------------------------------------------- */
.joelhaus-drawer {
position: fixed;
inset: 0;
z-index: 200;
pointer-events: none;
}
.joelhaus-drawer[hidden] { display: none; }
.joelhaus-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(14, 13, 12, 0.45);
opacity: 0;
transition: opacity 300ms ease;
pointer-events: none;
}
.joelhaus-drawer[data-open="true"] .joelhaus-drawer__backdrop {
opacity: 1;
pointer-events: auto;
}
.joelhaus-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(420px, 100vw);
background: var(--wp--preset--color--paper);
border-left: 1px solid var(--wp--preset--color--rule);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 300ms ease;
pointer-events: auto;
}
.joelhaus-drawer[data-open="true"] .joelhaus-drawer__panel {
transform: translateX(0);
}
.joelhaus-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px;
border-bottom: 1px solid var(--wp--preset--color--rule);
flex-shrink: 0;
}
.joelhaus-drawer__title {
font-family: var(--wp--preset--font-family--heading);
font-weight: 400;
font-size: 1.25rem;
line-height: 1.3;
margin: 0;
color: var(--wp--preset--color--ink);
}
.joelhaus-drawer__close {
appearance: none;
background: transparent;
border: 0;
color: var(--wp--preset--color--ink);
padding: 8px;
margin: -8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.joelhaus-drawer__close:hover {
color: var(--wp--preset--color--vermilion-text);
}
.joelhaus-drawer__close:focus-visible {
outline: 2px solid var(--wp--preset--color--vermilion);
outline-offset: 2px;
}
.joelhaus-drawer__body {
flex: 1 1 auto;
overflow-y: auto;
padding: 8px 24px;
}
.joelhaus-drawer__empty {
margin: 32px 0;
text-align: center;
color: var(--wp--preset--color--ink-3);
font-size: 0.875rem;
}
.joelhaus-drawer__items {
list-style: none;
margin: 0;
padding: 0;
}
.joelhaus-drawer__item {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 16px;
align-items: flex-start;
padding: 20px 0;
border-bottom: 1px solid var(--wp--preset--color--rule);
}
.joelhaus-drawer__item:last-child { border-bottom: 0; }
.joelhaus-drawer__media {
display: block;
width: 80px;
height: 80px;
overflow: hidden;
background: var(--wp--preset--color--card);
}
.joelhaus-drawer__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.joelhaus-drawer__meta {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.joelhaus-drawer__name {
font-family: var(--wp--preset--font-family--heading);
font-weight: 400;
font-size: 1rem;
line-height: 1.3;
color: var(--wp--preset--color--ink);
}
.joelhaus-drawer__variant {
font-size: 0.75rem;
color: var(--wp--preset--color--ink-3);
line-height: 1.4;
}
.joelhaus-drawer__price {
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
color: var(--wp--preset--color--ink-2);
}
.joelhaus-drawer__price .amount { font-weight: 500; }
.joelhaus-drawer__remove {
color: var(--wp--preset--color--ink-3);
text-decoration: none;
font-size: 1.5rem;
line-height: 1;
padding: 4px 6px;
margin: -4px -6px;
}
.joelhaus-drawer__remove:hover {
color: var(--wp--preset--color--vermilion-text);
}
.joelhaus-drawer__foot {
flex-shrink: 0;
padding: 24px;
border-top: 1px solid var(--wp--preset--color--rule);
background: var(--wp--preset--color--paper);
}
.joelhaus-drawer__subtotal {
display: flex;
justify-content: space-between;
align-items: baseline;
margin: 0 0 16px;
font-size: 0.875rem;
color: var(--wp--preset--color--ink);
}
.joelhaus-drawer__subtotal-value {
font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: 1rem;
}
.joelhaus-drawer__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* Shared button variants used by drawer (and by future primary/outline uses). */
.joelhaus-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 20px;
font-family: var(--wp--preset--font-family--body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
border-radius: 0;
line-height: 1.2;
cursor: pointer;
transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.joelhaus-btn--primary {
background: var(--wp--preset--color--vermilion);
color: var(--wp--preset--color--on-vermilion);
border-color: var(--wp--preset--color--vermilion);
}
.joelhaus-btn--primary:hover {
background: var(--wp--preset--color--ember);
border-color: var(--wp--preset--color--ember);
color: var(--wp--preset--color--on-vermilion);
}
.joelhaus-btn--outline {
background: transparent;
color: var(--wp--preset--color--ink);
border-color: var(--wp--preset--color--ink);
}
.joelhaus-btn--outline:hover {
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--card);
}
.joelhaus-btn:focus-visible {
outline: 2px solid var(--wp--preset--color--vermilion);
outline-offset: 2px;
}
/* ==========================================================================
JOEL HAUS — Round-4b shop archive: two-column layout + filter sidebar.
No JS: filter options are plain links that toggle WC query vars.
========================================================================== */
.joelhaus-shop__layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 48px;
align-items: start;
}
.joelhaus-shop__main {
min-width: 0;
}
/* Shop archive product grid: 3 cols desktop, 2 tablet, 1 mobile.
WC's own .columns-N class from theme support is ignored in favour of these
media queries so the grid reflows without server-side reconfiguration. */
.joelhaus-shop__main .woocommerce ul.products,
.joelhaus-shop .woocommerce ul.products {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
list-style: none;
margin: 0;
padding: 0;
}
.joelhaus-shop__main .woocommerce ul.products::before,
.joelhaus-shop__main .woocommerce ul.products::after {
content: none;
display: none;
}
@media (max-width: 1100px) {
.joelhaus-shop__main .woocommerce ul.products,
.joelhaus-shop .woocommerce ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.joelhaus-shop__layout {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
.joelhaus-shop__main .woocommerce ul.products,
.joelhaus-shop .woocommerce ul.products {
grid-template-columns: minmax(0, 1fr);
}
}
/* Result count + sort toolbar (Woo legacy template output above the grid). */
.joelhaus-shop .woocommerce-result-count,
.joelhaus-shop .woocommerce-ordering {
font-family: var(--wp--preset--font-family--body);
font-size: 0.8125rem;
color: var(--wp--preset--color--ink-2);
margin: 0 0 24px;
}
.joelhaus-shop .woocommerce-result-count { float: none; }
.joelhaus-shop .woocommerce-ordering { float: right; }
.joelhaus-shop .woocommerce-ordering select {
appearance: none;
background-color: var(--wp--preset--color--card);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px 12px;
border: 1px solid var(--wp--preset--color--rule-strong);
border-radius: 0;
color: var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--body);
font-size: 0.8125rem;
padding: 8px 32px 8px 12px;
}
.joelhaus-shop .woocommerce-ordering select:focus {
outline: 2px solid var(--wp--preset--color--vermilion);
outline-offset: 2px;
}
/* ---- Sidebar --------------------------------------------------------- */
.joelhaus-shop-sidebar {
font-family: var(--wp--preset--font-family--body);
color: var(--wp--preset--color--ink);
}
.joelhaus-shop-sidebar__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 12px;
margin-bottom: 24px;
border-bottom: 1px solid var(--wp--preset--color--rule);
}
/* Round-8: body-scoped + !important to beat WP block-editor h2 default styles
that were sizing FILTER at ~80px. */
body.woocommerce-shop .joelhaus-shop-sidebar__title,
body.post-type-archive-product .joelhaus-shop-sidebar__title,
body.tax-product_cat .joelhaus-shop-sidebar__title,
.joelhaus-shop-sidebar__title {
font-family: var(--wp--preset--font-family--body) !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
line-height: 1.4 !important;
color: var(--wp--preset--color--ink-2);
margin: 0;
}
.joelhaus-shop-sidebar__clear {
font-size: 0.75rem;
color: var(--wp--preset--color--vermilion-text);
text-decoration: none;
letter-spacing: 0.04em;
}
.joelhaus-shop-sidebar__clear:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.joelhaus-filter {
padding: 0 0 24px;
margin: 0 0 24px;
border-bottom: 1px solid var(--wp--preset--color--rule);
}
.joelhaus-filter:last-child {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.joelhaus-filter__label {
font-family: var(--wp--preset--font-family--body);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--wp--preset--color--ink-2);
margin: 0 0 12px;
}
.joelhaus-filter__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.joelhaus-filter__opt {
display: grid;
grid-template-columns: 16px 1fr auto;
align-items: center;
gap: 10px;
padding: 4px 0;
text-decoration: none;
color: var(--wp--preset--color--ink);
line-height: 1.4;
}
.joelhaus-filter__opt:hover {
color: var(--wp--preset--color--vermilion-text);
}
.joelhaus-filter__opt:focus-visible {
outline: 2px solid var(--wp--preset--color--vermilion);
outline-offset: 2px;
}
.joelhaus-filter__box {
display: block;
width: 16px;
height: 16px;
border: 1px solid var(--wp--preset--color--ink-3);
background: var(--wp--preset--color--card);
border-radius: 0;
position: relative;
flex-shrink: 0;
}
.joelhaus-filter__opt[data-checked="1"] .joelhaus-filter__box {
background: var(--wp--preset--color--ink);
border-color: var(--wp--preset--color--ink);
}
.joelhaus-filter__opt[data-checked="1"] .joelhaus-filter__box::after {
content: "";
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 9px;
border-right: 1.5px solid var(--wp--preset--color--card);
border-bottom: 1.5px solid var(--wp--preset--color--card);
transform: rotate(45deg);
}
.joelhaus-filter__opt-label {
font-size: 0.875rem;
color: inherit;
min-width: 0;
overflow-wrap: anywhere;
}
.joelhaus-filter__count {
font-size: 0.75rem;
color: var(--wp--preset--color--ink-3);
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
JOEL HAUS — Round-5 PDP (buy block styling below — layout moved to file end)
========================================================================== */
/* Zero out Woo's clearfix pseudo children that would otherwise steal a grid cell. */
.joelhaus-pdp .woocommerce div.product::before,
.joelhaus-pdp .woocommerce div.product::after {
content: none;
display: none;
}
.joelhaus-pdp .woocommerce div.product .woocommerce-tabs {
display: none;
}
.joelhaus-pdp .woocommerce .woocommerce-breadcrumb {
margin: 0 0 24px;
font-size: 0.75rem;
color: var(--wp--preset--color--ink-3);
}
/* Old gallery block removed — replaced by round-9 spec-compliant version
at the end of this file (see "Round-9 gallery rewrite"). */
/* ---- Buy block / summary rail --------------------------------------- */
.joelhaus-pdp .woocommerce div.product .product_title {
font-family: var(--wp--preset--font-family--heading);
font-weight: 300;
font-size: clamp(1.75rem, 3vw, 2.25rem);
line-height: 1.16;
margin: 0 0 12px;
color: var(--wp--preset--color--ink);
}
.joelhaus-pdp .woocommerce div.product p.price,
.joelhaus-pdp .woocommerce div.product span.price {
font-family: var(--wp--preset--font-family--body);
font-weight: 500;
font-size: 1.25rem;
font-variant-numeric: tabular-nums;
color: var(--wp--preset--color--ink);
margin: 0 0 24px;
}
.joelhaus-pdp .woocommerce-product-details__short-description {
color: var(--wp--preset--color--ink-2);
font-size: 0.9375rem;
line-height: 1.6;
margin: 0 0 24px;
max-width: 56ch;
}
/* ---- Variation swatches --------------------------------------------- */
/* Hide the underlying