/* ============================================================ SHARED PAGE FURNITURE — breadcrumb + page header Used by store pages and support pages alike. ============================================================ */ .breadcrumb { padding: 1.375rem var(--gutter) 0; font-family: "DM Mono", monospace; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .breadcrumb a { color: var(--ink-muted); } .breadcrumb a:hover { color: var(--gold); } .breadcrumb__sep { margin: 0 0.625rem; color: var(--line-gold); } .page-head { text-align: center; padding: 3.25rem var(--gutter) 2.5rem; } .page-head .eyebrow { margin-bottom: 1rem; } .page-head__title { font-family: "Marcellus", serif; font-weight: 400; font-size: 2.875rem; line-height: 1.1; margin: 0 auto; color: var(--ink-heading); max-width: 47.5rem; } .page-head__lead { font-size: 1rem; line-height: 1.8; color: var(--ink-body); max-width: 35rem; margin: 1.125rem auto 0; } /* ============================================================ WOOCOMMERCE STORE PAGES Markup mirrors WooCommerce's default template classes so the real WordPress build can drop in native templates + this CSS. ============================================================ */ /* --- store content: full-bleed like every other section, inset only by the shared page gutter. The gutter lives on the `.woocommerce` wrapper (present on shop, single product, cart, checkout and account via the theme templates and Woo blocks/shortcodes), so the inner blocks it wraps — .shop-layout, the product page, tabs, related — stay flush and inherit this single inset. Scoped to `main >` so it targets the wrapper divs only, never the `woocommerce` class WooCommerce also puts on (which would double it). */ main > .woocommerce { padding-inline: var(--gutter); } /* Native Cart/Checkout blocks (page.php wraps them in `.woocommerce`). They carry no theme grid of their own, so constrain them to the wideSize and centre them, matching how the block editor previews the page. Scoped to the block classes so shop/single archives (their own `.shop-layout`/product wrappers) are untouched. */ main > .woocommerce > .wp-block-woocommerce-cart, main > .woocommerce > .wp-block-woocommerce-checkout { max-width: 75rem; margin-inline: auto; } /* --- shop / archive layout: filter sidebar + product grid --- */ .shop-layout { display: grid; padding-bottom: 5.625rem; /* breathing room before the footer (mobile handled by the wrapper) */ grid-template-columns: 15.625rem 1fr; gap: 2.875rem; align-items: start; } .widget-area { position: sticky; top: 1.25rem; } /* filter drawer chrome — only used on mobile, hidden on desktop */ .filter-open, .filter-backdrop, .widget-area__head { display: none; } .widget { margin-bottom: 2.125rem; border-bottom: 1px solid var(--line); padding-bottom: 1.625rem; } .widget:last-child { border-bottom: 0; } .widget__title { font-family: "DM Mono", monospace; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; cursor: pointer; user-select: none; } /* +/– expand indicator (shared visual language with the nav groups) */ .widget__title::after { content: "+"; font-family: "Jost", sans-serif; font-size: 1.125rem; font-weight: 300; line-height: 1; color: var(--maroon); } .widget__toggle:checked ~ .widget__title::after { content: "\2013"; } .widget__body { display: none; margin-top: 1rem; } .widget__toggle:checked ~ .widget__body { display: block; } .widget ul { list-style: none; margin: 0; padding: 0; } .widget li { margin-bottom: 0.6875rem; } .widget li a { font-size: 0.875rem; letter-spacing: 0.04em; color: var(--ink-muted); display: flex; justify-content: space-between; } .widget li a:hover { color: var(--gold); } .widget li a .count { color: var(--ink-faint); font-size: 0.75rem; } .widget li a.is-active { color: var(--maroon); } /* "Shop for" category facet: each parent is a checkbox plus a +/- accordion that reveals its child-category checkboxes (same visual language as the attribute widgets and the nav weave groups). */ .cat-parent { margin-bottom: 0.6875rem; } .cat-row { display: flex; align-items: center; gap: 0.5rem; } .cat-row .filter-opt { flex: 1 1 auto; } .cat-acc__btn { flex: 0 0 auto; width: 1.25rem; text-align: center; cursor: pointer; color: var(--maroon); user-select: none; } .cat-acc__btn::after { content: "+"; font-family: "Jost", sans-serif; font-size: 1rem; font-weight: 300; line-height: 1; } .cat-acc__toggle:checked ~ .cat-row .cat-acc__btn::after { content: "\2013"; } .widget .subcats { margin: 0.6875rem 0 0; padding-left: 0.875rem; border-left: 1px solid var(--line); display: none; } .cat-acc__toggle:checked ~ .subcats { display: block; } .widget .subcats li { margin-bottom: 0.5625rem; } .widget .subcats li:last-child { margin-bottom: 0; } /* attribute filter rows: a checkbox marks each selected value (multi-select); selections are batched and committed together via the Apply button below. */ .filter-opt { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; font-size: 0.875rem; letter-spacing: 0.04em; color: var(--ink-muted); } .filter-opt:hover { color: var(--gold); } .filter-opt__input { position: absolute; opacity: 0; width: 0; height: 0; } .filter-opt__label { flex: 1 1 auto; } .filter-opt .count { color: var(--ink-faint); font-size: 0.75rem; } .filter-opt .filter-check { flex: 0 0 auto; width: 1rem; height: 1rem; border: 1px solid var(--line-gold); border-radius: 0.1875rem; position: relative; transition: border-color 0.15s ease, background-color 0.15s ease; } .filter-opt:hover .filter-check { border-color: var(--gold); } .filter-opt__input:checked ~ .filter-check { background: var(--maroon); border-color: var(--maroon); } .filter-opt__input:focus-visible ~ .filter-check { outline: 2px solid var(--maroon); outline-offset: 0.125rem; } .filter-opt__input:checked ~ .filter-check::after { content: ""; position: absolute; left: 0.3125rem; top: 0.125rem; width: 0.25rem; height: 0.5rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .filter-opt__input:checked ~ .filter-opt__label { color: var(--maroon); } /* filter actions: apply the batched selection / clear everything */ .filter-actions { position: sticky; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.125rem 0 0.25rem; margin-top: 0.375rem; background: linear-gradient(to bottom, transparent, var(--cream) 22%); } .filter-apply { width: 100%; } .filter-clear { font-family: "DM Mono", monospace; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .filter-clear:hover { color: var(--maroon); } /* long attribute lists (e.g. Technique) scroll within a fixed height */ .widget--scroll ul { max-height: 14.5rem; overflow-y: auto; scrollbar-width: thin; padding-right: 0.25rem; } /* dual-handle price slider */ .price-slider { padding-top: 0.25rem; } .price-slider__rail { position: relative; height: 1.625rem; } .price-slider__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0.1875rem; transform: translateY(-50%); background: var(--line-gold); border-radius: 0.1875rem; } .price-slider__fill { position: absolute; top: 50%; height: 0.1875rem; transform: translateY(-50%); background: var(--maroon); border-radius: 0.1875rem; } .price-slider__input { -webkit-appearance: none; appearance: none; pointer-events: none; position: absolute; left: 0; top: 0; width: 100%; height: 1.625rem; margin: 0; background: transparent; } .price-slider__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: pointer; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--cream); border: 2px solid var(--maroon); box-shadow: 0 1px 3px rgba(51, 42, 32, 0.25); } .price-slider__input::-moz-range-thumb { pointer-events: auto; cursor: pointer; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--cream); border: 2px solid var(--maroon); box-shadow: 0 1px 3px rgba(51, 42, 32, 0.25); } .price-slider__values { display: flex; justify-content: space-between; margin-top: 0.75rem; font-family: "DM Mono", monospace; font-size: 0.8125rem; color: var(--ink-muted); } /* result count + ordering bar */ .shop-toolbar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1.875rem; } .woocommerce-result-count { font-size: 0.8125rem; color: var(--ink-faint); letter-spacing: 0.04em; margin: 0; } .woocommerce-ordering select { font-family: "Jost", sans-serif; font-size: 0.8125rem; color: var(--ink-heading); background: var(--cream); border: 1px solid var(--line-gold); padding: 0.5625rem 1.875rem 0.5625rem 0.875rem; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a97d3a' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; cursor: pointer; } /* product grid (woo uses ul.products) — scoped to .woocommerce so it wins over WooCommerce's own `.woocommerce ul.products` grid rules */ .woocommerce ul.products, ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.125rem 1.875rem; } /* WooCommerce's clearfix pseudo-elements otherwise land as phantom grid cells */ .woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; } .woocommerce ul.products li.product, ul.products li.product { width: auto; margin: 0; float: none; } .woocommerce ul.products li.product .product__img, ul.products li.product .product__img { display: block; position: relative; } .woo-onsale { position: absolute; top: 0.75rem; right: 0.75rem; background: var(--maroon); color: var(--cream); font-family: "DM Mono", monospace; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3125rem 0.5625rem; } /* pagination */ .woocommerce-pagination { margin-top: 3.5rem; text-align: center; } .woocommerce-pagination ul { list-style: none; display: inline-flex; gap: 0.5rem; margin: 0; padding: 0; } .woocommerce-pagination a, .woocommerce-pagination span { display: flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.375rem; border: 1px solid var(--line-gold); font-size: 0.875rem; color: var(--ink-muted); } .woocommerce-pagination .current { background: var(--maroon); color: var(--cream); border-color: var(--maroon); } .woocommerce-pagination a:hover { border-color: var(--maroon); color: var(--maroon); } /* --- single product --- */ .single-product-main { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: start; } /* Native WooCommerce gallery (.woocommerce-product-gallery). WooCommerce's own gallery CSS is disabled (inc/woocommerce.php), so the theme styles the markup its zoom / PhotoSwipe lightbox / flexslider scripts produce. */ .woocommerce-product-gallery { position: relative; /* anchors the zoom/lightbox trigger */ align-self: start; /* Keep the image in view beside the summary so both read at one glance. */ position: sticky; top: calc(var(--site-chrome, 7.5rem) + 1rem); /* WooCommerce sets inline opacity:0 and reveals via JS; keep it visible even if that script is slow or blocked. */ opacity: 1 !important; } .woocommerce-product-gallery__wrapper { margin: 0; } /* FlexSlider base — normally shipped in WooCommerce's stylesheet, which the theme disables; without it every slide stacks and the viewport collapses. */ .woocommerce-product-gallery .flexslider { margin: 0; padding: 0; position: relative; zoom: 1; } .woocommerce-product-gallery .flexslider .slides { margin: 0; padding: 0; list-style: none; zoom: 1; } .woocommerce-product-gallery .flexslider .slides > li { position: relative; display: none; -webkit-backface-visibility: hidden; } .woocommerce-product-gallery .flexslider .slides::after { content: ""; display: block; clear: both; height: 0; } .woocommerce-product-gallery .flexslider .slides > li:first-child, .no-js .woocommerce-product-gallery .flexslider .slides > li:first-child { display: block; } .woocommerce-product-gallery .flex-viewport { position: relative; overflow: hidden; } /* Goal 1: image shown in full (no crop), height capped to the space below the header so it fits the viewport at a glance; width follows within the column. Values are viewport-/token-derived, never hardcoded sizes. */ .woocommerce-product-gallery__image img, .woocommerce-product-gallery__image > a img { display: block; width: 100%; height: calc(100vh - var(--site-chrome, 7.5rem) - 8.75rem); margin: 0 auto; object-fit: contain; } /* zoom/lightbox trigger (magnifier) */ .woocommerce-product-gallery__trigger { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; width: 2.5rem; height: 2.5rem; border-radius: 62.4375rem; background: var(--cream); border: 1px solid var(--line); text-indent: -9999px; overflow: hidden; } .woocommerce-product-gallery__trigger::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.25rem; height: 1.25rem; background-color: var(--ink-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M10 3a7 7 0 1 0 4.2 12.6l4.1 4.1 1.4-1.4-4.1-4.1A7 7 0 0 0 10 3zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10z'/%3E%3C/svg%3E") center / 1.25rem 1.25rem no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M10 3a7 7 0 1 0 4.2 12.6l4.1 4.1 1.4-1.4-4.1-4.1A7 7 0 0 0 10 3zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10z'/%3E%3C/svg%3E") center / 1.25rem 1.25rem no-repeat; } .woocommerce-product-gallery__trigger:hover::after { background-color: var(--maroon); } /* thumbnails: flexslider's control nav, WooCommerce's default row below */ .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0 0; padding: 0; list-style: none; } .flex-control-thumbs li { width: 4.5rem; margin: 0; } .flex-control-thumbs img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; cursor: pointer; border: 1px solid var(--line); opacity: 0.65; transition: opacity 0.15s ease, border-color 0.15s ease; } .flex-control-thumbs img:hover { opacity: 1; } .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--maroon); } /* no-image placeholder */ .product-gallery--empty { aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; background: var(--ph-a); } .summary .product_title { font-family: "Marcellus", serif; font-weight: 400; font-size: 2.375rem; line-height: 1.14; margin: 0 0 0.5rem; color: var(--ink-heading); } .summary .product__code { margin-top: 0; } .woocommerce-product-rating { display: flex; align-items: center; gap: 0.625rem; margin: 1rem 0; } .star-rating { color: var(--gold); letter-spacing: 0.125rem; font-size: 0.9375rem; } .woocommerce-review-link { font-size: 0.8125rem; color: var(--ink-faint); } .summary .price { font-family: "Jost", sans-serif; font-size: 1.625rem; color: var(--maroon); margin: 0.375rem 0 1.125rem; } .summary .price del { color: var(--ink-faint); font-size: 1.125rem; margin-right: 0.75rem; } .woocommerce-product-details__short-description { font-size: 0.9375rem; line-height: 1.8; color: var(--ink-body); max-width: 30rem; margin-bottom: 1.625rem; } .product-meta-list { list-style: none; margin: 0 0 1.75rem; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; } .product-meta-list li { font-size: 0.875rem; color: var(--ink-body); } .product-meta-list .label { font-family: "DM Mono", monospace; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 0.1875rem; } .cart-form { display: flex; flex-direction: column; gap: 0.875rem; max-width: 28.75rem; } .qty-row { display: flex; align-items: center; gap: 0.875rem; } .quantity { display: inline-flex; border: 1px solid var(--line-gold); } .quantity button { width: 2.625rem; height: 3rem; background: var(--cream); border: 0; font-size: 1.125rem; color: var(--maroon); cursor: pointer; } .quantity input { width: 3.25rem; height: 3rem; border: 0; border-left: 1px solid var(--line-gold); border-right: 1px solid var(--line-gold); text-align: center; font-family: "Jost", sans-serif; font-size: 0.9375rem; background: var(--cream); color: var(--ink-heading); } .btn--full { width: 100%; text-align: center; padding: 1.0625rem 1.875rem; border: 0; cursor: pointer; font-family: "Jost", sans-serif; } .single_add_to_cart_button { background: var(--maroon); color: var(--cream); } .buy-now-button { background: var(--green); color: var(--gold-pale); } .assurances { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.625rem; } .assurances li { display: flex; gap: 0.625rem; font-size: 0.8125rem; color: var(--ink-body); } .assurances .icon { width: 1.0625rem; height: 1.0625rem; color: var(--green); flex: 0 0 auto; } /* "what makes it special" detail icons */ .the-details { padding: 4.625rem var(--gutter); background: var(--cream-warm); text-align: center; } .the-details__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.625rem; max-width: 62.5rem; margin: 2.5rem auto 0; } .detail-cell .detail-cell__mark { width: 1.875rem; height: 1.875rem; border: 1px solid var(--gold); transform: rotate(45deg); margin: 0 auto 1.125rem; } .detail-cell__t { font-family: "DM Mono", monospace; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--maroon); margin: 0 0 0.375rem; } .detail-cell__p { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-body); margin: 0; } /* product tabs */ .woocommerce-tabs { padding: 4.375rem var(--gutter); max-width: 56.25rem; margin: 0 auto; } .wc-tabs { list-style: none; display: flex; gap: 1.875rem; justify-content: center; padding: 0; margin: 0 0 2rem; border-bottom: 1px solid var(--line); } .wc-tabs li a { display: block; padding: 0 0 1rem; font-family: "DM Mono", monospace; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 2px solid transparent; margin-bottom: -1px; } .wc-tabs li.active a { color: var(--maroon); border-bottom-color: var(--maroon); } .wc-tab { font-size: 0.9375rem; line-height: 1.9; color: var(--ink-body); } .wc-tab[hidden] { display: none; } .wc-tab h4 { font-family: "Marcellus", serif; font-weight: 400; font-size: 1.25rem; color: var(--ink-heading); margin: 1.375rem 0 0.5rem; } /* related products reuse .favourites + .grid-4 */ .related.products, .up-sells.products { padding: 1.25rem 0 5.625rem; } .related.products > h2, .up-sells.products > h2 { font-family: "Marcellus", serif; font-weight: 400; font-size: 2rem; text-align: center; color: var(--ink-heading); margin: 0 0 2.5rem; } /* --- cart --- */ .shop_table { width: 100%; border-collapse: collapse; } .shop_table th { font-family: "DM Mono", monospace; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); text-align: left; padding: 0 0 1rem; border-bottom: 1px solid var(--line); font-weight: 400; } .shop_table td { padding: 1.375rem 0; border-bottom: 1px solid var(--line); vertical-align: middle; } /* --- checkout --- */ .form-row { margin-bottom: 1.125rem; } .form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-row label { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.4375rem; } .input, .select, textarea.input { width: 100%; background: var(--cream); border: 1px solid var(--line-gold); padding: 0.875rem 0.9375rem; font-family: "Jost", sans-serif; font-size: 0.9375rem; color: var(--ink-heading); outline: none; } .input:focus { border-color: var(--maroon); } /* --- account (login / register / dashboard) --- */ /* --- wishlist --- */ /* --- Mini-Cart block: match theme typography --- The block renders its own drawer at the end of and sets its own font-family on children, so these overrides target the global block classes (not scoped under .hdr) and use !important to beat the block stylesheet. */ /* base: everything in the drawer + the header button → Jost */ .wc-block-mini-cart__drawer, .wc-block-mini-cart__drawer *, .hdr__minicart .wc-block-mini-cart__button { font-family: "Jost", sans-serif !important; } /* drawer heading ("Your cart") → Marcellus */ .wc-block-mini-cart__drawer .wc-block-mini-cart__title, .wc-block-mini-cart__drawer .wc-block-mini-cart__title * { font-family: "Marcellus", serif !important; } /* prices / money amounts → DM Mono, like the rest of the store */ .wc-block-mini-cart__drawer .wc-block-formatted-money-amount, .wc-block-mini-cart__drawer .wc-block-components-product-price, .wc-block-mini-cart__drawer .wc-block-components-totals-item__value, .hdr__minicart .wc-block-mini-cart__amount { font-family: "DM Mono", monospace !important; } /* ── Variation size tiles ────────────────────────────────────────────── Progressive enhancement of WooCommerce's native variation