/* ========================================================================== Jenni Cator — WooCommerce Loaded only on shop-context pages (see inc/woocommerce.php). Builds on the --jc- tokens and jc-card component from style.css. NOTE: selectors are scoped as `body.jc ` (NOT `body.jc .woocommerce `), because the `woocommerce` class sits on on archive/single pages, not on a wrapper div. WooCommerce 11 uses :where() (zero-specificity) selectors, so `body.jc` + a WC class comfortably wins without !important. ========================================================================== */ /* ── General WooCommerce buttons → jc button language ─────────────────────── */ body.jc .woocommerce-message .button, body.jc a.button, body.jc button.button, body.jc input.button, body.jc a.button.alt, body.jc button.button.alt, body.jc input.button.alt, body.jc #respond input#submit { appearance: none; background: transparent; border: 1.5px solid var(--jc-ink); color: var(--jc-ink); font-family: var(--jc-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; padding: 14px 32px; border-radius: 0; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; } body.jc a.button:hover, body.jc button.button:hover, body.jc input.button:hover, body.jc a.button.alt:hover, body.jc button.button.alt:hover, body.jc input.button.alt:hover, body.jc #respond input#submit:hover { background: var(--jc-ink); color: #fff; border-color: var(--jc-ink); } /* Header cart link styles live in style.css (rendered site-wide). */ /* ========================================================================== Archive / shop ========================================================================== */ body.jc .jc-banner--archive { margin-bottom: 48px; } body.jc .jc-banner__blurb p { margin: 0 0 .5rem; } body.jc .jc-banner__blurb p:last-child { margin-bottom: 0; } /* Result count + ordering — quiet, aligned, above the grid. */ body.jc .woocommerce-result-count { font-family: var(--jc-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jc-mute); margin: 0 48px 20px; } body.jc .woocommerce-ordering { margin: 0 48px 20px; } body.jc .woocommerce-ordering select { font-family: var(--jc-sans); font-size: 12px; color: var(--jc-ink); border: 1px solid var(--jc-line); background: transparent; padding: 8px 12px; border-radius: 0; } /* Drop the browser's blue focus ring on the sorting dropdown — subtle brand focus instead. */ body.jc .woocommerce-ordering select:focus, body.jc .woocommerce-ordering select:focus-visible { outline: none; box-shadow: none; border-color: var(--jc-accent); } /* Breadcrumb — line it up with the result count (same left inset) and match the type. */ body.jc .woocommerce-breadcrumb { margin: 0 48px 16px; padding: 0; font-family: var(--jc-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jc-mute); } body.jc .woocommerce-breadcrumb a { color: var(--jc-ink); border: 0; } body.jc .woocommerce-breadcrumb a:hover { color: var(--jc-accent); } /* The product grid — jc-grid look on WooCommerce's ul.products. */ body.jc ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin: 0 auto; padding: 0 48px; max-width: 1400px; list-style: none; } body.jc ul.products li.product { width: auto; float: none; margin: 0; padding: 0; } body.jc ul.products li.product::before, body.jc ul.products li.product::after { display: none; } /* WooCommerce's clearfix ::before/::after on the list itself become stray grid cells (pushing the first product into column 2) — remove them. */ body.jc ul.products::before, body.jc ul.products::after { content: none; } /* Loop card = jc-card (component styles from style.css). */ body.jc .jc-card__tag { font-family: var(--jc-sans); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jc-accent); margin: 4px 0 0; } /* Pagination */ body.jc nav.woocommerce-pagination { margin: 56px 0 0; text-align: center; } body.jc nav.woocommerce-pagination ul { border: 0; } body.jc nav.woocommerce-pagination ul li { border: 0; margin: 0 3px; } body.jc nav.woocommerce-pagination ul li a, body.jc nav.woocommerce-pagination ul li span { font-family: var(--jc-sans); font-size: 12px; letter-spacing: 0.1em; color: var(--jc-ink); border: 1px solid var(--jc-line); padding: 8px 14px; background: transparent; } body.jc nav.woocommerce-pagination ul li span.current { background: var(--jc-ink); color: #fff; border-color: var(--jc-ink); } /* ========================================================================== Isotope filter archive (Paintings / Prints & Mixed Media) ========================================================================== */ body.jc .jc-filter { max-width: 1400px; margin: 0 auto; padding: 44px 48px 90px; } body.jc .jc-filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin: 0 0 16px; } body.jc .jc-filter-btn { appearance: none; background: none; border: 0; cursor: pointer; font-family: var(--jc-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jc-mute); padding: 6px 2px; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } body.jc .jc-filter-btn:hover { color: var(--jc-ink); } body.jc .jc-filter-btn.is-active { color: var(--jc-accent); border-bottom-color: var(--jc-accent); } body.jc .jc-filter-count { text-align: center; font-family: var(--jc-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jc-mute); margin: 0 0 34px; } /* Masonry grid — Isotope positions items absolutely, so the container is a plain block and items get explicit widths. Sizer/gutter helper divs drive columns. */ body.jc .jc-filter-grid { display: block; position: relative; } body.jc .jc-filter-grid .jc-grid-sizer, body.jc .jc-filter-grid .jc-card { width: calc(33.333% - 16px); } body.jc .jc-filter-grid .jc-grid-gutter { width: 24px; } body.jc .jc-filter-grid .jc-card { margin: 0 0 40px; float: none; } body.jc .jc-filter-empty { text-align: center; color: var(--jc-mute); font-family: var(--jc-serif); font-style: italic; padding: 2rem; } @media (max-width: 900px) { body.jc .jc-filter-grid .jc-grid-sizer, body.jc .jc-filter-grid .jc-card { width: calc(50% - 12px); } } @media (max-width: 560px) { body.jc .jc-filter { padding: 32px 24px 64px; } body.jc .jc-filter-grid .jc-card { width: 100%; } } /* ========================================================================== Single product ========================================================================== */ body.jc div.product { max-width: 1200px; margin: 40px auto 0; padding: 0 48px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; } body.jc div.product .woocommerce-product-gallery { margin: 0; float: none; width: 100%; } body.jc div.product .entry-summary { margin: 0; float: none; width: 100%; } /* No zoom furniture */ body.jc div.product .woocommerce-product-gallery__trigger { display: none !important; } body.jc div.product .woocommerce-product-gallery__image a { cursor: default; pointer-events: none; } body.jc div.product .woocommerce-product-gallery__image img { box-shadow: 0 18px 40px -26px rgba(42,33,26,0.5); } /* Title / price / description */ body.jc div.product .product_title { font-family: var(--jc-serif); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; color: var(--jc-ink); margin: 0 0 14px; } body.jc div.product p.price, body.jc div.product span.price { font-family: var(--jc-sans); font-size: 20px; font-weight: 500; letter-spacing: 0.04em; color: var(--jc-ink); margin: 0 0 20px; } body.jc div.product p.price del { color: var(--jc-mute); font-weight: 300; } body.jc div.product p.price ins { text-decoration: none; } body.jc div.product .woocommerce-product-details__short-description { color: var(--jc-ink-2); font-weight: 300; line-height: 1.75; margin-bottom: 24px; } body.jc div.product .woocommerce-product-details__short-description p { margin: 0 0 .6rem; } /* Materials + Dimensions specs (under the price) */ body.jc .jc-specs { list-style: none; margin: 0 0 22px; padding: 16px 0 0; border-top: 1px dashed var(--jc-line); } body.jc .jc-specs li { display: flex; align-items: baseline; gap: 14px; padding: 5px 0; } body.jc .jc-specs strong { flex: 0 0 100px; font-family: var(--jc-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jc-accent); } body.jc .jc-specs span { font-family: var(--jc-serif); font-style: italic; font-size: 16px; color: var(--jc-ink-2); } /* Add-to-cart area */ body.jc div.product form.cart { margin: 8px 0 24px; display: flex; gap: 14px; align-items: center; } body.jc div.product form.cart .quantity input.qty { width: 64px; padding: 12px 8px; border: 1px solid var(--jc-line); background: transparent; font-family: var(--jc-sans); text-align: center; border-radius: 0; } body.jc div.product form.cart button.button, body.jc div.product form.cart button.single_add_to_cart_button, body.jc div.product form.cart button.button.alt { background: var(--jc-ink); color: #fff; border-color: var(--jc-ink); padding: 15px 40px; } body.jc div.product form.cart button.button:hover, body.jc div.product form.cart button.single_add_to_cart_button:hover { background: var(--jc-accent); border-color: var(--jc-accent); } /* Product meta */ body.jc div.product .product_meta { font-family: var(--jc-sans); font-size: 11px; letter-spacing: 0.06em; color: var(--jc-mute); border-top: 1px dashed var(--jc-line); padding-top: 16px; margin-top: 8px; } body.jc div.product .product_meta a { color: var(--jc-ink); } /* Gallery CTA (replaces Buy for gallery-only pieces) */ .jc-gallery-cta { border-top: 1px dashed var(--jc-line); padding-top: 22px; margin-top: 4px; } .jc-gallery-cta__label { font-family: var(--jc-sans); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--jc-accent); margin: 0 0 12px; } a.jc-gallery-cta__link { margin-bottom: 12px; } .jc-gallery-cta__note { color: var(--jc-ink-2); font-style: italic; font-family: var(--jc-serif); font-size: 15px; margin: 12px 0 0; } /* Tabs — simplify */ body.jc div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 64px; } body.jc div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 24px; } body.jc div.product .woocommerce-tabs ul.tabs::before { border-bottom: 1px dashed var(--jc-line); } body.jc div.product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; margin: 0 24px 0 0; padding: 0 0 8px; } body.jc div.product .woocommerce-tabs ul.tabs li::before, body.jc div.product .woocommerce-tabs ul.tabs li::after { display: none; } body.jc div.product .woocommerce-tabs ul.tabs li a { font-family: var(--jc-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jc-mute); padding: 0; } body.jc div.product .woocommerce-tabs ul.tabs li.active a { color: var(--jc-ink); } body.jc div.product .woocommerce-Tabs-panel { color: var(--jc-ink-2); font-weight: 300; line-height: 1.75; } body.jc div.product .woocommerce-Tabs-panel h2 { font-family: var(--jc-serif); color: var(--jc-ink); } /* Related / upsells → jc grid, quiet heading */ body.jc .related, body.jc .upsells { grid-column: 1 / -1; margin-top: 72px; border-top: 1px dashed var(--jc-line); padding-top: 48px; } body.jc .related > h2, body.jc .upsells > h2 { font-family: var(--jc-script); font-size: clamp(30px, 4vw, 48px); color: var(--jc-accent); text-align: center; margin: 0 0 40px; } /* Neaten the related/upsell grid: it's nested inside div.product, so drop the main-shop padding/max-width it inherited (which made the 4th card wrap), keep 4 even columns, and top-align so mixed-height art sits in a tidy row. */ body.jc .related ul.products, body.jc .upsells ul.products { max-width: none; padding: 0; margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; align-items: start; /* natural aspect — top-align the mixed-height art */ } /* ========================================================================== Notices bar ========================================================================== */ body.jc .woocommerce-message, body.jc .woocommerce-info, body.jc .woocommerce-error { font-family: var(--jc-sans); font-size: 13px; letter-spacing: 0.01em; color: var(--jc-ink); background: #fff; border-top: 3px solid var(--jc-accent); box-shadow: 0 10px 30px -22px rgba(42,33,26,0.5); border-radius: 0; padding: 16px 20px; list-style: none; } body.jc .woocommerce-error { border-top-color: #a3341f; } body.jc .woocommerce-message::before, body.jc .woocommerce-info::before { color: var(--jc-accent); } body.jc .woocommerce-error::before { color: #a3341f; } body.jc .woocommerce-message .button, body.jc .woocommerce-info .button { padding: 8px 20px; font-size: 10px; } /* ========================================================================== Cart & checkout ========================================================================== */ body.jc .cart_totals h2, body.jc .woocommerce-checkout h3, body.jc form.checkout h3 { font-family: var(--jc-serif); color: var(--jc-ink); font-weight: 400; } body.jc table.shop_table { border: 1px solid var(--jc-line); border-radius: 0; font-family: var(--jc-sans); font-size: 14px; } body.jc table.shop_table th { font-weight: 500; letter-spacing: 0.06em; } body.jc table.cart img { width: 72px; } body.jc #payment { background: #fff; border-radius: 0; } body.jc form .form-row input.input-text, body.jc form .form-row textarea, body.jc form .form-row select, body.jc .woocommerce-checkout input.input-text { border: 1px solid var(--jc-line); border-radius: 0; padding: 12px 14px; font-family: var(--jc-sans); background: #fff; } body.jc .woocommerce-checkout #place_order, body.jc .wc-proceed-to-checkout a.checkout-button { background: var(--jc-ink); color: #fff; border-color: var(--jc-ink); width: 100%; text-align: center; padding: 16px 24px; } body.jc .woocommerce-checkout #place_order:hover, body.jc .wc-proceed-to-checkout a.checkout-button:hover { background: var(--jc-accent); border-color: var(--jc-accent); } body.jc .cart-empty.woocommerce-info { text-align: center; font-family: var(--jc-serif); font-style: italic; font-size: 18px; } /* ========================================================================== Gallery (custom post type) pages ========================================================================== */ .jc-gallery-head { text-align: center; padding: 48px 48px 8px; } .jc-gallery-head__title { font-family: var(--jc-serif); font-size: clamp(34px, 5vw, 60px); color: var(--jc-ink); margin: 6px 0 8px; } .jc-gallery-head__region { font-family: var(--jc-sans); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jc-mute); margin: 0; } .jc-gallery-body { max-width: 1100px; margin: 24px auto 0; padding: 0 48px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; align-items: start; } .jc-gallery-body__image { margin-bottom: 24px; } .jc-gallery-body__facts { position: sticky; top: 24px; } .jc-facts--stack { grid-template-columns: 1fr; } .jc-gallery-works { max-width: 1400px; margin: 80px auto 0; padding: 48px 0 0; border-top: 1px dashed var(--jc-line); } .jc-gallery-works__title { font-family: var(--jc-script); font-size: clamp(30px, 4vw, 52px); color: var(--jc-accent); text-align: center; margin: 0 0 36px; } .jc-gallery-works .jc-grid { padding: 0 48px; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1100px) { body.jc ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { body.jc div.product { grid-template-columns: 1fr; gap: 32px; } .jc-gallery-body { grid-template-columns: 1fr; gap: 28px; } .jc-gallery-body__facts { position: static; } } @media (max-width: 780px) { body.jc ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 24px; gap: 28px; } body.jc .woocommerce-result-count, body.jc .woocommerce-ordering { margin-left: 24px; margin-right: 24px; } body.jc div.product { padding: 0 24px; } } @media (max-width: 480px) { body.jc ul.products { grid-template-columns: 1fr; } }