/* Editorial workspace — quiet-luxury design system (warm-cream, all-Jost, deep-green * accents), tuned to the shreyashjain.in reference storefront. * Scoped under .cs-workspace (body class); commerce output is native WooCommerce, * so the selectors below style Woo/WAPF markup rather than bespoke ids. */ @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap'); .cs-workspace { /* Neutrals track the reference's Shopify scheme: warm-tan bg, cool near-black ink, neutral-grey borders + label grey. Green is our own retained accent. */ --cream: #f8f4ec; --ink: #202025; --green: #1d3a2f; --muted: #7e7e84; --line: #e9e9e9; --sans: 'Jost', system-ui, sans-serif; /* Cormorant serif retired for reference parity (shreyashjain.in is all-Jost); --serif kept as an alias so the display-heading rules need no churn. */ --serif: var(--sans); /* Single source of truth for every carousel's inter-card gutter — the flex track, the card-width calcs, and the reel calcs all read this. MUST be set explicitly on the flex child (ul.products / .reel); never `gap: inherit` (see the carousel note below). */ --cgap: clamp(1.4rem, 2.2vw, 2rem); margin: 0; overflow-x: clip; /* off-canvas mini-cart parked at translateX(102%) must not widen the page */ font-family: var(--sans); font-weight: 300; background: var(--cream); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; } .cs-workspace a { color: inherit; text-decoration: none; } .cs-workspace img { max-width: 100%; height: auto; } .cs-workspace button { font: inherit; cursor: pointer; } .cs-workspace .wrap { padding-inline: clamp(1.1rem, 4.5vw, 4rem); } /* ---------- announcement / header ---------- */ .cs-workspace .announce { background: var(--green); color: var(--cream); text-align: center; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.55rem 1rem; } /* Sticky header — hamburger+search left, crest+wordmark centered, account/cart right. z-index above the nav drawer (9998) so the toggle stays reachable as a close (X) control. */ .cs-workspace .site-head { position: sticky; top: 0; z-index: 9999; background: var(--cream); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1rem clamp(1.1rem, 4.5vw, 4rem); border-bottom: 1px solid var(--line); } .cs-workspace .head-left { display: flex; align-items: center; gap: 0.9rem; } .cs-workspace .wordmark { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: Arial, Helvetica, sans-serif; font-size: clamp(0.95rem, 1.8vw, 1.3rem); font-weight: 700; letter-spacing: 0.08em; line-height: 1; text-align: center; white-space: nowrap; } .cs-workspace .brand-title { line-height: 1.1; } .cs-workspace cs-logo, .cs-workspace span.cs-logo { display: inline-flex; align-items: center; justify-content: center; } .cs-workspace .wordmark .cs-logo-img { width: auto; height: clamp(26px, 2vw, 34px); max-width: 160px; object-fit: contain; border: 0; border-radius: 0; background: transparent; } /* inside the sticky header: only the hamburger shows in the bar; the link list is an off-canvas drawer at EVERY width (overrides platform nav.css's inline row + its mobile-only drawer — these selectors are one class more specific). */ .cs-workspace .site-head .cs-nav-bar { border-bottom: none; padding: 0; } /* z-index: the drawer (9998) lives inside the header's stacking context, so the toggle needs its own layer above it to stay visible as the close (X) while the drawer is open. */ .cs-workspace .site-head .cs-nav-toggle { display: flex; margin: 0; position: relative; z-index: 9999; width: 26px; gap: 6px; color: var(--ink); } /* Refined hamburger: hairline bars, shorter middle bar that extends on hover/open. */ .cs-workspace .site-head .cs-nav-toggle .cs-nav-toggle-bar { height: 1px; border-radius: 1px; transition: transform 0.3s ease, opacity 0.2s ease, width 0.3s ease; } .cs-workspace .site-head .cs-nav-toggle .cs-nav-toggle-bar:nth-child(2) { width: 70%; } .cs-workspace .site-head .cs-nav-toggle:hover .cs-nav-toggle-bar:nth-child(2) { width: 100%; } /* X geometry for the 6px gap + 1px bars (platform nav.css assumes 4px + 1.5px). */ .cs-workspace .site-head .cs-nav-toggle[aria-expanded='true'] .cs-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .cs-workspace .site-head .cs-nav-toggle[aria-expanded='true'] .cs-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .cs-workspace .site-head .cs-nav-links { position: fixed; top: 0; bottom: 0; left: 0; right: auto; width: min(84vw, 380px); z-index: 9998; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; background: var(--cream); border-right: 1px solid var(--line); padding: 7rem 2rem 2rem; margin: 0; transform: translateX(-102%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; box-shadow: 30px 0 60px -40px rgba(23, 21, 18, 0.35); } .cs-workspace .site-head .cs-nav-links.is-open { transform: translateX(0); } .cs-workspace .site-head .cs-nav-links li { border-bottom: 1px solid var(--line); } .cs-workspace .site-head .cs-nav-links a { display: block; padding: 1.05rem 0; font-size: 0.8rem; letter-spacing: 0.2em; opacity: 0.9; } /* expanded form: a full-width panel sliding down from the very top of the viewport over a dimmed page (shreyashjain.in reference) — kicker, big underlined serif input, close X, and a "Popular right now" photo row. Replaces platform nav.css's cramped right-corner popover; the panel extras are display:none there, revealed here. */ .cs-workspace .site-head .cs-search-widget.is-open::after { content: ''; position: fixed; inset: 0; z-index: 10000; background: rgba(23, 21, 18, 0.45); } .cs-workspace .site-head .cs-search-form { position: fixed; top: 0; left: 0; right: 0; width: auto; z-index: 10001; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 1rem; background: var(--cream); border: none; border-bottom: 1px solid var(--line); padding: clamp(1.4rem, 4vh, 2.5rem) clamp(1.1rem, 4.5vw, 4rem) clamp(1.4rem, 3.5vh, 2.2rem); box-shadow: 0 30px 50px -30px rgba(23, 21, 18, 0.35); max-height: 100dvh; overflow-y: auto; transform: translateY(-102%); opacity: 1; pointer-events: auto; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .cs-workspace .site-head .cs-search-widget.is-open .cs-search-form { transform: translateY(0); opacity: 1; pointer-events: auto; } .cs-workspace .site-head .cs-search-kicker { display: block; grid-column: 1 / -1; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; padding-right: 3rem; } .cs-workspace .site-head .cs-search-close { display: flex; position: absolute; top: clamp(1.1rem, 3.5vh, 2rem); right: clamp(1.1rem, 4.5vw, 4rem); border: none; background: none; padding: 0.3rem; cursor: pointer; color: var(--ink); } .cs-workspace .site-head .cs-search-form input[type='search'] { font-family: var(--serif); font-size: clamp(1.4rem, 3.5vw, 2rem); letter-spacing: 0.02em; padding: 0 0 0.7rem; border-bottom: 1px solid var(--ink); border-radius: 0; } .cs-workspace .site-head .cs-search-form input[type='search']::placeholder { color: var(--muted); } .cs-workspace .site-head .cs-search-submit { border-bottom: 1px solid var(--ink); padding: 0 0.3rem 0.7rem; } .cs-workspace .site-head .cs-search-submit svg { width: 22px; height: 22px; } .cs-workspace .site-head .cs-search-suggest { display: block; grid-column: 1 / -1; margin-top: 1.6rem; } .cs-workspace .site-head .cs-search-suggest-label { display: block; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; } .cs-workspace .site-head .cs-search-suggest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 640px) { .cs-workspace .site-head .cs-search-suggest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } } .cs-workspace .site-head .cs-search-suggest-grid a { display: block; color: var(--ink); text-decoration: none; } .cs-workspace .site-head .cs-search-suggest-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; margin-bottom: 0.55rem; } .cs-workspace .site-head .cs-search-suggest-grid span { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #4c463d; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Component wrappers are spans (a div would close an enclosing

); block by default, inline for the text-level ones. */ .cs-workspace span[data-cs-owner='commerce'] { display: block; } .cs-workspace .cs-store-name, .cs-workspace .cs-cart-count { display: inline; } /* cs-image is pure imagery — dissolve the wrapper so hero/focus/banner size the itself. span.cs-image (not just .cs-image) to out-rank the span[data-cs-owner] block rule above. */ .cs-workspace span.cs-image { display: contents; } .cs-workspace .head-right { display: flex; align-items: center; justify-content: flex-end; gap: 1.15rem; } .cs-workspace .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: color 0.2s ease; border: none; background: none; padding: 0; cursor: pointer; } .cs-workspace .icon-btn:hover { color: var(--green); } .cs-workspace .cart-badge { position: absolute; top: -6px; right: -9px; min-width: 15px; height: 15px; border-radius: 50%; background: var(--green); color: var(--cream); font-size: 0.58rem; line-height: 15px; text-align: center; padding: 0 3px; } .cs-workspace .cart-badge .cs-cart-count { display: inline; } /* ---------- breadcrumbs ---------- */ .cs-workspace .crumbs .woocommerce-breadcrumb { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding-block: 1.2rem; } .cs-workspace .crumbs a:hover { color: var(--ink); } /* ---------- PDP layout ---------- */ .cs-workspace .pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-bottom: clamp(3rem, 8vh, 6rem); } @media (max-width: 900px) { .cs-workspace .pdp { grid-template-columns: 1fr; } } /* PDP gallery — reference-style card: every image sits in a fixed 3:4 rounded block (object-fit crops the odd-sized upload), circular cream arrows overlap the card's sides (flexslider directionNav, enabled platform-side), thumbnails in a rounded strip below with the active one outlined. */ .cs-workspace .cs-product-gallery .woocommerce-product-gallery { width: 100% !important; position: relative; } .cs-workspace .cs-product-gallery img { width: 100%; background: #ece8e0; } .cs-workspace .cs-product-gallery .flex-viewport, .cs-workspace .cs-product-gallery .woocommerce-product-gallery__image { border-radius: 18px; overflow: hidden; } /* contain, not cover: uploads are arbitrary shapes and the PDP is where the customer inspects the garment — show all of it; the warm-grey block absorbs the letterboxing. Cards/tiles elsewhere keep uniform cover-crops. */ .cs-workspace .cs-product-gallery .woocommerce-product-gallery__image img { aspect-ratio: 3 / 4; object-fit: contain; display: block; } .cs-workspace .cs-product-gallery .flex-direction-nav { margin: 0; padding: 0; list-style: none; } .cs-workspace .cs-product-gallery .flex-direction-nav li { position: absolute; top: 38%; transform: translateY(-50%); z-index: 5; margin: 0; } .cs-workspace .cs-product-gallery .flex-nav-prev { left: -20px; } .cs-workspace .cs-product-gallery .flex-nav-next { right: -20px; } .cs-workspace .cs-product-gallery .flex-direction-nav a { position: relative; display: block; width: 44px; height: 44px; border-radius: 50%; background: var(--cream); box-shadow: 0 10px 24px rgba(23, 21, 18, 0.18); overflow: hidden; text-indent: -9999px; transition: transform 0.2s ease; } .cs-workspace .cs-product-gallery .flex-direction-nav a:hover { transform: scale(1.06); } .cs-workspace .cs-product-gallery .flex-direction-nav a::before { content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); transform: translate(-65%, -50%) rotate(45deg); } .cs-workspace .cs-product-gallery a.flex-prev::before { transform: translate(-35%, -50%) rotate(-135deg); } .cs-workspace .cs-product-gallery .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0.9rem 0 0; padding: 0; list-style: none; } .cs-workspace .cs-product-gallery .flex-control-thumbs li { width: 72px; margin: 0; float: none; } .cs-workspace .cs-product-gallery .flex-control-thumbs img { aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 10px; border: 1.5px solid transparent; opacity: 0.55; cursor: pointer; transition: opacity 0.2s ease; } .cs-workspace .cs-product-gallery .flex-control-thumbs img:hover, .cs-workspace .cs-product-gallery .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--ink); } @media (max-width: 900px) { .cs-workspace .cs-product-gallery .flex-nav-prev { left: 10px; } .cs-workspace .cs-product-gallery .flex-nav-next { right: 10px; } } .cs-workspace .woocommerce-product-gallery__trigger { display: none; } /* headless gallery has no zoom icon */ .cs-workspace .pdp-panel { position: sticky; top: 6.5rem; } /* clears the sticky header */ .cs-workspace .pdp-panel .product_title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.1; margin: 0; } .cs-workspace .cs-product-price .price { display: block; margin-top: 0.9rem; font-size: 1.05rem; font-weight: 300; color: var(--ink); } .cs-workspace .cs-product-price del { color: var(--muted); margin-right: 0.5rem; } .cs-workspace .cs-product-price ins { text-decoration: none; } .cs-workspace .pdp-tax { margin: 0.3rem 0 0; font-size: 0.74rem; color: var(--muted); } .cs-workspace .woocommerce-product-rating { margin-top: 0.6rem; font-size: 0.8rem; color: var(--muted); } /* ---------- purchase form (native Woo) ---------- */ .cs-workspace form.cart { margin-top: 1.4rem; } /* Headless stacks the option label above its pills (.opt-block), so flatten Woo's variations table into blocks. */ .cs-workspace table.variations, .cs-workspace table.variations tbody, .cs-workspace table.variations tr, .cs-workspace table.variations th.label, .cs-workspace table.variations td.value { display: block; width: 100%; border: none; padding: 0; margin: 0; } .cs-workspace table.variations tr { margin-top: 1.4rem; } .cs-workspace table.variations th.label { text-align: left; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: 0.6rem; } .cs-workspace form.cart select { width: 100%; border: 1px solid var(--line); background: none; padding: 0.8rem 0.9rem; font: inherit; font-size: 0.9rem; color: var(--ink); } .cs-workspace form.cart select:focus { outline: none; border-color: var(--ink); } /* Headless has no per-variation price echo or swatch tooltips. The reset_variations * "Clear" link IS kept (see assets/platform-fixes.css for its small-underlined-link * styling, applied platform-wide so existing store revs get it too). */ .cs-workspace .woocommerce-variation-price { display: none; } .cs-workspace [data-wvstooltip]::before, .cs-workspace [data-wvstooltip]::after { display: none !important; } /* Variation swatches → headless .opt-pill look */ .cs-workspace .variable-items-wrapper { display: flex !important; flex-wrap: wrap; gap: 0.5rem !important; margin: 0 !important; } .cs-workspace .variable-items-wrapper .variable-item { width: auto !important; height: auto !important; min-width: 0 !important; background: none !important; border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 0.6rem 1.1rem !important; margin: 0 !important; font-size: 0.78rem !important; letter-spacing: 0.08em; color: var(--ink); transition: all 0.2s; } .cs-workspace .variable-items-wrapper .variable-item:hover { border-color: var(--ink) !important; } .cs-workspace .variable-items-wrapper .variable-item.selected { border-color: var(--ink) !important; background: var(--ink) !important; color: var(--cream) !important; } .cs-workspace .variable-items-wrapper .variable-item .variable-item-span { color: inherit !important; font-size: inherit !important; } /* Stock line ("Made to order" in headless) */ .cs-workspace .woocommerce-variation-availability .stock, .cs-workspace form.cart .stock { margin: 0.9rem 0 0; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); } .cs-workspace .stock.out-of-stock { color: #9a3324; } /* The swatches plugin forces display:flex !important on this container, so lay out with flex-wrap: WAPF block full row, then qty | add-to-cart, then buy-now full row. */ .cs-workspace .woocommerce-variation-add-to-cart { flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; align-items: stretch; } .cs-workspace .woocommerce-variation-add-to-cart .wapf { flex: 1 1 100%; } .cs-workspace .woocommerce-variation-add-to-cart .quantity { flex: 0 0 110px; } .cs-workspace .woocommerce-variation-add-to-cart .single_add_to_cart_button:not(.wpcbn-btn) { flex: 1; } /* The custom-setup mu-plugin sets `.single-product .wpcbn-btn { flex: 1 !important }`, so pushing buy-now to its own row needs !important as well. */ .cs-workspace .woocommerce-variation-add-to-cart .wpcbn-btn { flex: 1 1 100% !important; border: 1px solid var(--ink) !important; } .cs-workspace form.cart:not(.variations_form) { display: grid !important; gap: 0.7rem; margin-top: 1.4rem; grid-template-columns: 110px 1fr; align-items: stretch; } .cs-workspace form.cart:not(.variations_form) > .wapf, .cs-workspace form.cart:not(.variations_form) > .wapf-wrapper { grid-column: 1 / -1; } .cs-workspace form.cart .quantity { display: flex; border: 1px solid var(--ink); align-items: center; justify-content: space-between; } .cs-workspace form.cart .quantity input.qty { border: none; background: none; flex: 1; width: 100%; min-width: 0; text-align: center; font: inherit; font-size: 0.9rem; padding: 1rem 0; -moz-appearance: textfield; } .cs-workspace form.cart .quantity input.qty::-webkit-outer-spin-button, .cs-workspace form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cs-workspace form.cart .quantity input.qty:focus { outline: none; } .cs-workspace .qty-step { flex: 0 0 34px; background: none; border: none; padding: 1rem 0; font-size: 1rem; color: var(--ink); } .cs-workspace .single_add_to_cart_button { display: inline-flex; justify-content: center; align-items: center; width: 100%; padding: 1rem 1.4rem; border: 1px solid var(--ink) !important; background: var(--ink) !important; color: var(--cream) !important; font-size: 0.76rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 400; border-radius: 0 !important; transition: opacity 0.25s; } .cs-workspace .single_add_to_cart_button:hover { opacity: 0.85; } .cs-workspace .single_add_to_cart_button:disabled { opacity: 0.45; cursor: default; } /* Buy-now (wpcbn) renders as a second full-width ghost button */ .cs-workspace .wpcbn-btn { grid-column: 1 / -1; flex: 1 1 100% !important; background: none !important; color: var(--ink) !important; border-radius: 0 !important; } .cs-workspace .wpcbn-btn:hover { background: var(--ink); color: var(--cream); opacity: 1; } /* ---------- WAPF addon fields ---------- */ .cs-workspace .wapf-wrapper { margin-top: 1.4rem; } .cs-workspace .wapf-field-row { margin-bottom: 1.1rem; } .cs-workspace .wapf-field-label label { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 400; } .cs-workspace .wapf-input:not([type=checkbox]):not([type=radio]), .cs-workspace .wapf-field-input textarea { width: 100%; border: 1px solid var(--line); background: none !important; padding: 0.8rem 0.9rem; font: inherit; font-size: 0.9rem; } .cs-workspace .wapf-input:not([type=checkbox]):not([type=radio]):focus { outline: none; border-color: var(--ink); } /* Checkbox choices render as headless-style pills (input visually hidden, :has() for state) */ .cs-workspace .wapf-field-input:has(.wapf-checkable) { display: flex; flex-wrap: wrap; gap: 0.5rem; } .cs-workspace .wapf-checkable { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--line); padding: 0.6rem 1.1rem; font-size: 0.78rem; letter-spacing: 0.08em; cursor: pointer; transition: all 0.2s; margin: 0; } .cs-workspace .wapf-checkable:hover { border-color: var(--ink); } .cs-workspace .wapf-checkable:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--cream); } .cs-workspace .wapf-input[type=checkbox], .cs-workspace .wapf-input[type=radio] { position: absolute; opacity: 0; pointer-events: none; } .cs-workspace .wapf-pricing-hint { font-size: 0.72rem; color: inherit; opacity: 0.7; } /* Headless shows no running totals block (WAPF toggles it with inline styles, hence !important) */ .cs-workspace .wapf-product-totals { display: none !important; } /* Swatches JS appends ": M" to the option label; headless shows just the label */ .cs-workspace .woo-selected-variation-item-name { display: none !important; } /* ---------- accordions / meta ---------- */ .cs-workspace .acc { border-top: 1px solid var(--line); margin-top: 2.2rem; } .cs-workspace .acc details { border-bottom: 1px solid var(--line); } .cs-workspace .acc summary { padding: 1.1rem 0; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; list-style: none; display: flex; justify-content: space-between; } .cs-workspace .acc summary::after { content: '+'; font-size: 1rem; } .cs-workspace .acc details[open] summary::after { content: '–'; } .cs-workspace .acc .acc-body { padding-bottom: 1.3rem; line-height: 1.75; font-size: 0.92rem; color: #3c3831; } .cs-workspace .link-line { font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 0.3rem; } .cs-workspace .cs-product-meta .product_meta { display: block; margin-top: 1.4rem; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .cs-workspace .cs-product-meta .product_meta > span { display: block; padding-block: 0.2rem; } /* ---------- below the fold (plugin zone, native Woo) ---------- */ .cs-workspace .sec { padding-block: clamp(3rem, 8.5vh, 6.5rem); } /* Headless has no tabs UI — the description already lives in the "Product details" * accordion, and reviews render via the dedicated component below * the fold instead (see pages/product.html + assets/platform-fixes.css for styling). * The native tabs block (fired by , since * core Woo hooks its own tabs there) is redundant with both and stays hidden. */ .cs-workspace .woocommerce-tabs { display: none; } .cs-workspace .related.products > h2, .cs-workspace .upsells.products > h2 { font-family: var(--serif); font-weight: 500; font-size: 0; letter-spacing: 0.02em; text-align: center; margin: clamp(2.5rem, 7vh, 5rem) 0 clamp(2rem, 5vh, 3.6rem); } .cs-workspace .related.products > h2::before { content: 'You may also like'; font-size: clamp(1.9rem, 4.4vw, 3.2rem); } .cs-workspace .upsells.products > h2::before { content: 'You may also like'; font-size: clamp(1.9rem, 4.4vw, 3.2rem); } .cs-workspace ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 2rem); } @media (max-width: 1000px) { .cs-workspace ul.products { grid-template-columns: repeat(2, 1fr); } } /* Woo core adds clearfix ::before/::after on ul.products — as grid items they'd occupy cells — and floats/widths on li.product sized for its own float layout. */ .cs-workspace ul.products::before, .cs-workspace ul.products::after { display: none; content: none; } .cs-workspace ul.products li.product, .cs-workspace ul.products li.product-category { width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; clear: none !important; } .cs-workspace ul.products li.product img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #ece8e0; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .cs-workspace ul.products li.product:hover img { transform: scale(1.045); } /* Reference convention: card titles in tracked caps at a muted tone, prices quieter still. */ .cs-workspace ul.products li.product .woocommerce-loop-product__title { margin-top: 1rem; font-size: 0.78rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: #3a352e; font-family: var(--sans); line-height: 1.45; } .cs-workspace ul.products li.product .price { margin-top: 0.25rem; font-size: 0.8rem; color: var(--muted); font-weight: 300; } .cs-workspace ul.products li.product .button { display: none; } /* cards link through; no loop add-to-cart in this design */ /* ---------- notices ---------- */ .cs-workspace .woocommerce-message, .cs-workspace .woocommerce-info, .cs-workspace .woocommerce-error { list-style: none; margin: 0 0 1.2rem; padding: 0.9rem 1.2rem; border: 1px solid var(--line); background: #fff; font-size: 0.85rem; } .cs-workspace .woocommerce-error { border-color: #9a3324; color: #9a3324; } .cs-workspace .woocommerce-message::before, .cs-workspace .woocommerce-info::before, .cs-workspace .woocommerce-error::before { display: none; content: none; } /* ---------- footer ---------- */ .cs-workspace .site-foot { background: var(--ink); color: var(--cream); margin-top: clamp(2rem, 5vh, 4rem); padding: clamp(3rem, 8vh, 6rem) clamp(1.1rem, 4.5vw, 4rem) 2rem; } .cs-workspace .foot-mark { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: 0.22em; text-indent: 0.22em; text-align: center; margin-bottom: clamp(2rem, 5vh, 3.2rem); } .cs-workspace .footer-brand { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; line-height: 1; white-space: nowrap; } .cs-workspace .footer-brand .cs-logo-img { width: auto; height: clamp(22px, 2vw, 30px); max-width: 140px; object-fit: contain; } .cs-workspace .foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 900px; margin-inline: auto; } @media (max-width: 700px) { .cs-workspace .foot-cols { grid-template-columns: 1fr; text-align: center; } } .cs-workspace .foot-cols h4 { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.6; margin: 0 0 1rem; font-weight: 400; } .cs-workspace .foot-cols a { display: block; font-size: 0.86rem; padding-block: 0.28rem; opacity: 0.85; } .cs-workspace .foot-cols a:hover { opacity: 1; } .cs-workspace .foot-base { text-align: center; margin-top: 3rem; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.5; } /* Platform "Powered by" credit (cataloghub-credits mu-plugin) — keep it as discreet as the reference's vendor line: small, muted, no heavy weight. */ .cs-workspace .ch-credits-wrapper { text-align: center; padding: 1rem; } .cs-workspace .ch-credits-wrapper p { margin: 0.2rem 0; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.12em; color: var(--muted); } .cs-workspace .foot-base a { border-bottom: 1px solid currentColor; } /* ---------- buttons / kickers (shared atoms from the headless design) ---------- */ .cs-workspace .btn { display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; width: 100%; padding: 1rem 1.4rem; border: 1px solid var(--ink); background: var(--ink); color: var(--cream); font-size: 0.76rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 400; transition: opacity 0.25s; } .cs-workspace .btn:hover { opacity: 0.85; } .cs-workspace .btn--ghost { background: none; color: var(--ink); } .cs-workspace .btn--ghost:hover { background: var(--ink); color: var(--cream); opacity: 1; } .cs-workspace .btn--inline { width: auto; } .cs-workspace .kicker { margin: 0; font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted); } /* ---------- home: hero (carousel) ---------- */ .cs-workspace .hero { position: relative; height: min(88svh, 860px); overflow: hidden; background: #ece8e0; } /* Mobile: 88svh reads as a near-full-screen wall the shopper must scroll past before seeing any product — shrink so the first product section peeks in above the fold. */ @media (max-width: 640px) { .cs-workspace .hero { height: min(62svh, 560px); } } .cs-workspace .hero-track { position: relative; width: 100%; height: 100%; } .cs-workspace .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .cs-workspace .hero-slide.is-active { opacity: 1; } .cs-workspace .hero img, .cs-workspace .hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top; } /* Product video layered over the slide photo — invisible until site.js confirms it can play (the endpoint 404s for products without a video, so the photo is poster and fallback). */ .cs-workspace .hero-slide .cs-image-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .cs-workspace .hero-slide .cs-image-video.is-playing { opacity: 1; } .cs-workspace .hero-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 13, 10, 0.45), transparent 45%); pointer-events: none; } .cs-workspace .hero-foot { position: absolute; left: 0; right: 0; bottom: clamp(1.6rem, 6vh, 3.4rem); z-index: 1; display: grid; justify-items: center; gap: 1.2rem; } .cs-workspace .hero-cta { background: rgba(246, 243, 238, 0.92); border-color: transparent; color: var(--ink); padding: 0.9rem 2.4rem; } .cs-workspace .hero-cta:hover { background: var(--cream); opacity: 1; } .cs-workspace .hero-dots { display: flex; gap: 0.55rem; } .cs-workspace .hero-dot { width: 7px; height: 7px; padding: 0; border: 1px solid rgba(246, 243, 238, 0.9); border-radius: 50%; background: transparent; transition: background 0.25s, transform 0.25s; } .cs-workspace .hero-dot.is-active { background: rgba(246, 243, 238, 0.95); transform: scale(1.2); } /* ---------- product / category carousels (New In, Best Sellers, Collections) ---------- */ .cs-workspace .carousel { position: relative; } .cs-workspace .carousel-track { display: flex; gap: var(--cgap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 0.4rem; scrollbar-width: none; } .cs-workspace .carousel-track::-webkit-scrollbar { display: none; } .cs-workspace .carousel-track > * { flex: 1 1 auto; min-width: 0; width: 100%; } /* Explicit --cgap, NOT `gap: inherit`: the renderer wraps in block-level span.cs-products > div.woocommerce, so `inherit` here resolves to those wrappers' gap (normal → 0) and the cards collide. Set the gutter directly on the flex parent. */ .cs-workspace .carousel-track ul.products { display: flex !important; gap: var(--cgap); width: 100%; min-width: 0; } .cs-workspace .carousel-track ul.products::before, .cs-workspace .carousel-track ul.products::after { display: none; content: none; } /* Card width tuned to the reference: exactly 5 across on desktop (calc subtracts the 4 inter-card gaps so cards fill the row edge-to-edge with no stray peek), ~3 across tablet, 2 cards + a peek on mobile. calc keeps the count exact regardless of gap/viewport. */ .cs-workspace .carousel-track ul.products li.product, .cs-workspace .carousel-track ul.products li.product-category { flex: 0 0 calc((100% - 4 * var(--cgap)) / 5); min-width: 0; scroll-snap-align: start; } @media (max-width: 900px) { .cs-workspace .carousel-track ul.products li.product, .cs-workspace .carousel-track ul.products li.product-category { flex-basis: calc((100% - 2 * var(--cgap)) / 3); } } @media (max-width: 640px) { .cs-workspace .carousel-track ul.products li.product, .cs-workspace .carousel-track ul.products li.product-category { flex-basis: 46%; } } .cs-workspace .carousel--categories .carousel-track ul.products li.product-category { flex-basis: 31%; } @media (max-width: 900px) { .cs-workspace .carousel--categories .carousel-track ul.products li.product-category { flex-basis: 42%; } } @media (max-width: 640px) { .cs-workspace .carousel--categories .carousel-track ul.products li.product-category { flex-basis: 62%; } } /* Explore reels — tall portrait video tiles (reference's "EXPLORE" reel row). The tile is an wrapping , so the poster and the autoplay

is suppressed for parity. */ .cs-workspace .sec-head { text-align: center; margin-bottom: clamp(1.6rem, 3.5vh, 2.6rem); } .cs-workspace .sec-head h2 { margin: 0; font-family: var(--sans); font-weight: 400; font-size: clamp(1.15rem, 1.6vw, 1.5rem); letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; color: var(--muted); } .cs-workspace .sec-head p { display: none; } .cs-workspace .sec-more { text-align: center; margin-top: clamp(1.8rem, 4vh, 2.8rem); } /* ---------- home: in focus (green feature) ---------- */ .cs-workspace .focus { background: var(--green); color: var(--cream); } .cs-workspace .focus-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: clamp(3.5rem, 9vh, 7rem); } @media (max-width: 900px) { .cs-workspace .focus-inner { grid-template-columns: 1fr; } } .cs-workspace .focus-media { overflow: hidden; aspect-ratio: 3 / 4; max-width: 560px; justify-self: center; width: 100%; } .cs-workspace .focus-media img { width: 100%; height: 100%; object-fit: cover; } .cs-workspace .focus-copy .kicker { color: inherit; opacity: 0.75; margin-bottom: 1.2rem; } .cs-workspace .focus-copy h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.05; } .cs-workspace .focus-copy .blurb { margin: 1.4rem 0 0; max-width: 34em; line-height: 1.7; font-size: 0.92rem; opacity: 0.9; } .cs-workspace .focus-copy .link-line { display: inline-block; margin-top: 2rem; color: var(--cream); } /* ---------- home: statement banner ---------- */ .cs-workspace .banner { position: relative; height: min(78svh, 700px); overflow: hidden; } @media (max-width: 640px) { .cs-workspace .banner { height: min(48svh, 420px); } } .cs-workspace .banner img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .cs-workspace .banner::after { content: ''; position: absolute; inset: 0; background: rgba(15, 13, 10, 0.4); } .cs-workspace .banner-copy { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 1.7rem; text-align: center; color: #fff; padding: 1rem; } .cs-workspace .banner-copy h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 5.4vw, 3.8rem); } .cs-workspace .banner-copy h2 em { font-style: italic; font-weight: 400; } .cs-workspace .btn--banner { background: none; border-color: #fff; color: #fff; } .cs-workspace .btn--banner:hover { background: #fff; color: var(--ink); opacity: 1; } /* ---------- home: about blurb ---------- */ .cs-workspace .about-blurb { text-align: center; padding-block: clamp(3.5rem, 9vh, 7rem); padding-inline: clamp(1.1rem, 4.5vw, 4rem); } .cs-workspace .about-text { margin: 1.4rem auto 1.9rem; font-family: var(--serif); font-size: clamp(1.3rem, 2.8vw, 2rem); line-height: 1.5; max-width: 30em; } /* ---------- home: collections (Woo [product_categories] output) ---------- */ .cs-workspace ul.products li.product-category { position: relative; overflow: hidden; margin: 0; list-style: none; } .cs-workspace ul.products li.product-category img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #ece8e0; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .cs-workspace ul.products li.product-category:hover img { transform: scale(1.045); } .cs-workspace ul.products li.product-category::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 13, 10, 0.55), transparent 45%); pointer-events: none; } .cs-workspace ul.products li.product-category h2 { position: absolute; left: 1.4rem; bottom: 1.2rem; z-index: 1; margin: 0; color: #fff; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .cs-workspace ul.products li.product-category h2 .count { display: none; } /* ---------- shop / category listing ---------- */ .cs-workspace .listing-head { text-align: center; padding-block: clamp(2.6rem, 7vh, 5rem) clamp(1.8rem, 4vh, 3rem); } .cs-workspace .listing-head .kicker { letter-spacing: 0.32em; } .cs-workspace .listing-head h1 { margin: 0.7rem 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 5.4vw, 4rem); text-transform: capitalize; } .cs-workspace .listing-head h1 .cs-shop-title, .cs-workspace .listing-head h1 .cs-page-title { display: inline; } .cs-workspace .listing-head .count { margin: 0.8rem 0 0; font-size: 0.74rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); } .cs-workspace .listing-head .count .cs-result-count { display: inline; } .cs-workspace .listing-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.4rem; margin-top: 0.8rem; } .cs-workspace .listing-head-row .count { margin-top: 0; } .cs-workspace .cs-shop-sort { display: inline-block; } .cs-workspace .cs-shop-sort .woocommerce-ordering { margin: 0; } .cs-workspace .cs-shop-sort select.orderby { border: 1px solid var(--line); background: var(--cream); padding: 0.5rem 0.8rem; font: inherit; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); } .cs-workspace .cs-shop-sort select.orderby:focus { outline: none; border-color: var(--ink); } .cs-workspace .cs-shop-loop { display: block; padding-bottom: clamp(3.5rem, 9vh, 7rem); } .cs-workspace .woocommerce-pagination { text-align: center; margin-top: clamp(1.8rem, 4vh, 2.8rem); } .cs-workspace .woocommerce-pagination .page-numbers { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 0.5rem; } .cs-workspace .woocommerce-pagination .page-numbers li { margin: 0; } .cs-workspace .woocommerce-pagination .page-numbers a, .cs-workspace .woocommerce-pagination .page-numbers span { display: inline-block; border: 1px solid var(--line); padding: 0.55rem 0.9rem; font-size: 0.74rem; letter-spacing: 0.18em; color: var(--ink); } .cs-workspace .woocommerce-pagination .page-numbers span.current { border-color: var(--ink); background: var(--ink); color: var(--cream); } .cs-workspace .woocommerce-no-products-found { text-align: center; font-family: var(--serif); font-size: 1.5rem; padding-bottom: clamp(4rem, 10vh, 8rem); } /* ---------- static pages (about / policies) ---------- */ .cs-workspace .prose { max-width: 46em; margin-inline: auto; padding-bottom: clamp(3.5rem, 9vh, 7rem); line-height: 1.85; font-size: 1.02rem; color: #33302a; } .cs-workspace .prose h2, .cs-workspace .prose h3 { font-family: var(--serif); font-weight: 500; margin: 2.2rem 0 0.8rem; font-size: 1.7rem; color: var(--ink); } .cs-workspace .prose p { margin: 0 0 1.1rem; } .cs-workspace .prose img { margin: 2rem auto; } /* ---------- cart (native [woocommerce_cart] restyled) ---------- */ .cs-workspace .cs-cart .woocommerce { max-width: 1100px; margin-inline: auto; padding-bottom: clamp(3rem, 8vh, 6rem); } .cs-workspace table.shop_table { width: 100%; border-collapse: collapse; border: none; } .cs-workspace table.shop_table th { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 400; text-align: left; padding: 0.8rem 0.6rem; border-bottom: 1px solid var(--line); } .cs-workspace table.shop_table td { padding: 1.3rem 0.6rem; border-bottom: 1px solid var(--line); font-size: 0.92rem; background: none; } .cs-workspace table.shop_table td.product-thumbnail img { width: 72px; aspect-ratio: 3 / 4; object-fit: cover; background: #ece8e0; } .cs-workspace table.shop_table td.product-remove a { font-size: 1.1rem; color: var(--muted); } .cs-workspace table.shop_table td.product-remove a:hover { color: var(--ink); } .cs-workspace table.shop_table dl.variation { margin: 0.35rem 0 0; font-size: 0.74rem; color: var(--muted); } .cs-workspace table.shop_table dl.variation dt, .cs-workspace table.shop_table dl.variation dd { display: inline; margin: 0; } /* Cart-page quantity as a compact bordered stepper (site.js adds the −/+ buttons). */ .cs-workspace td.product-quantity .quantity { display: inline-flex; align-items: center; border: 1px solid var(--line); } .cs-workspace td.product-quantity .quantity input.qty { border: none; background: none; width: 2.2rem; min-width: 0; text-align: center; font: inherit; font-size: 0.85rem; padding: 0.5rem 0; -moz-appearance: textfield; } .cs-workspace td.product-quantity .quantity input.qty::-webkit-outer-spin-button, .cs-workspace td.product-quantity .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cs-workspace td.product-quantity .qty-step { flex: 0 0 30px; padding: 0.5rem 0; font-size: 0.95rem; } .cs-workspace .cs-cart .coupon { display: flex; gap: 0.5rem; align-items: stretch; } .cs-workspace .cs-cart .coupon input.input-text { border: 1px solid var(--line); background: none; padding: 0.7rem 0.9rem; font: inherit; font-size: 0.85rem; } .cs-workspace .cs-cart .button { display: inline-flex; justify-content: center; align-items: center; padding: 0.8rem 1.3rem; border: 1px solid var(--ink) !important; background: none !important; color: var(--ink) !important; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400; border-radius: 0 !important; transition: all 0.2s; } .cs-workspace .cs-cart .button:hover:not(:disabled) { background: var(--ink) !important; color: var(--cream) !important; } .cs-workspace .cs-cart .button:disabled { opacity: 0.45; } .cs-workspace .cart-collaterals .cart_totals { float: none; width: 100%; max-width: 420px; margin: 2.5rem 0 0 auto; border: 1px solid var(--line); padding: 1.6rem; } /* Shipping calculator — native Woo, restyled: quiet caps trigger link, hairline full-width fields, outline update button (inherits .cs-cart .button). */ .cs-workspace .woocommerce-shipping-calculator { margin: 0.4rem 0 0; } .cs-workspace .shipping-calculator-button { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; } .cs-workspace .shipping-calculator-form { margin-top: 1rem; display: grid; gap: 0.65rem; text-align: left; } .cs-workspace .shipping-calculator-form .form-row { margin: 0; padding: 0; display: block; } .cs-workspace .shipping-calculator-form label { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; } .cs-workspace .shipping-calculator-form .form-row .required { color: var(--muted); text-decoration: none; } /* Woo appends an icon-font glyph here; the font isn't loaded, so it renders as tofu. */ .cs-workspace .shipping-calculator-button::after { display: none; } .cs-workspace .shipping-calculator-form select, .cs-workspace .shipping-calculator-form input.input-text { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 0; background: none; padding: 0.7rem 0.8rem; font: inherit; font-size: 0.85rem; color: var(--ink); } .cs-workspace .shipping-calculator-form select:focus, .cs-workspace .shipping-calculator-form input.input-text:focus { outline: none; border-color: var(--ink); } .cs-workspace .shipping-calculator-form button { width: 100%; } /* selectWoo/select2, when it enhances the country/state dropdowns */ .cs-workspace .shipping-calculator-form .select2-container--default .select2-selection--single { border: 1px solid var(--line); border-radius: 0; height: auto; padding: 0.7rem 0.8rem; background: none; } .cs-workspace .shipping-calculator-form .select2-selection__rendered { line-height: 1.4; padding: 0; color: var(--ink); } .cs-workspace .shipping-calculator-form .select2-selection__arrow { height: 100%; } .cs-workspace .woocommerce-shipping-destination { font-size: 0.8rem; color: var(--muted); } .cs-workspace .cart_totals ul#shipping_method { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; } .cs-workspace .cart-collaterals table.shop_table td { background: none !important; } .cs-workspace .cs-cart-note { margin-bottom: 1.4rem; } .cs-workspace .cs-cart-note label { display: block; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; } .cs-workspace .cs-cart-note textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); background: none; padding: 0.8rem 0.9rem; font: inherit; font-size: 0.88rem; color: var(--ink); resize: vertical; } .cs-workspace .cs-cart-note textarea::placeholder { color: var(--muted); } .cs-workspace .cs-cart-note textarea:focus { outline: none; border-color: var(--ink); } .cs-workspace .cart-collaterals .cart_totals h2 { margin: 0 0 1.2rem; font-family: var(--serif); font-weight: 500; font-size: 1.4rem; } .cs-workspace .cart-collaterals table.shop_table th, .cs-workspace .cart-collaterals table.shop_table td { padding: 0.6rem 0; border: none; } .cs-workspace .checkout-button { width: 100%; padding: 1rem 1.4rem !important; background: var(--ink) !important; color: var(--cream) !important; } .cs-workspace .checkout-button:hover { opacity: 0.85; } .cs-workspace .cart-empty.woocommerce-info { border: none; background: none; text-align: center; font-family: var(--serif); font-size: 1.5rem; padding-block: 1rem; } .cs-workspace .return-to-shop { text-align: center; padding-bottom: clamp(4rem, 10vh, 8rem); } /* Mobile cart — replace Woo's stacked label:value rows with reference-style line items: photo left, name/price beside it, qty + remove in place. Woo's smallscreen sheet (≤768px) hides the thumbnail and prints data-title labels; undo both. */ @media (max-width: 768px) { .cs-workspace .cs-cart table.shop_table.cart td::before { display: none; } .cs-workspace .cs-cart table.shop_table.cart td { border: none; padding: 0; text-align: left !important; background: none !important; } .cs-workspace .cs-cart table.shop_table.cart tr.cart_item { display: grid; grid-template-columns: 86px 1fr auto; grid-template-areas: 'thumb name remove' 'thumb price price' 'thumb qty qty'; column-gap: 1.1rem; align-content: start; padding: 1.2rem 0; border-bottom: 1px solid var(--line); } .cs-workspace .cs-cart table.shop_table.cart td.product-thumbnail { grid-area: thumb; display: block !important; } .cs-workspace .cs-cart table.shop_table.cart td.product-thumbnail img { width: 86px; } .cs-workspace .cs-cart table.shop_table.cart td.product-name { grid-area: name; font-size: 0.92rem; padding-right: 0.5rem; } .cs-workspace .cs-cart table.shop_table.cart td.product-price { grid-area: price; margin-top: 0.35rem; color: var(--muted); } .cs-workspace .cs-cart table.shop_table.cart td.product-quantity { grid-area: qty; margin-top: 0.7rem; } .cs-workspace .cs-cart table.shop_table.cart td.product-subtotal { display: none; } /* price + qty already say it */ .cs-workspace .cs-cart table.shop_table.cart td.product-remove { grid-area: remove; justify-self: end; } .cs-workspace .cs-cart table.shop_table.cart td.actions { padding-top: 1.3rem; } .cs-workspace .cs-cart .coupon { flex-wrap: wrap; } .cs-workspace .cs-cart .coupon input.input-text { flex: 1; min-width: 0; width: auto !important; } .cs-workspace .cs-cart .coupon .button { width: auto !important; float: none !important; } .cs-workspace .cart-collaterals .cart_totals { max-width: none; margin-top: 2rem; padding: 1.3rem; } } /* ---------- mini-cart drawer (header cart icon → right slide-in; opened by site.js) ---------- Lives inside the sticky header's stacking context like the nav drawer: backdrop 9997, drawer 9998, both under the header bar's own controls (9999). */ .cs-workspace .site-head .cs-mini-cart.is-open::after { content: ''; position: fixed; inset: 0; background: rgba(23, 21, 18, 0.45); z-index: 9997; } .cs-workspace .site-head .cs-mini-cart-drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 400px); box-sizing: border-box; background: var(--cream); z-index: 9998; padding: 1.5rem clamp(1.2rem, 3vw, 1.8rem); transform: translateX(102%); transition: transform 0.35s ease; } .cs-workspace .site-head .cs-mini-cart.is-open .cs-mini-cart-drawer { transform: translateX(0); } .cs-workspace .cs-mini-cart-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); } .cs-workspace .cs-mini-cart-title { font-family: var(--serif); font-size: 1.35rem; } .cs-workspace .cs-mini-cart-close { display: flex; border: none; background: none; padding: 0.3rem; cursor: pointer; color: var(--ink); } .cs-workspace .cs-mini-cart-drawer .widget_shopping_cart_content { display: flex; flex-direction: column; flex: 1; min-height: 0; } .cs-workspace .cs-mini-cart-drawer ul.woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; } .cs-workspace .cs-mini-cart-drawer li.mini_cart_item { position: relative; padding: 1.15rem 0 1.15rem 90px; min-height: calc(1.15rem * 2 + 99px); border-bottom: 1px solid var(--line); } .cs-workspace .cs-mini-cart-drawer li.mini_cart_item img { position: absolute; left: 0; top: 1.15rem; width: 74px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: #ece8e0; float: none; margin: 0; } .cs-workspace .cs-mini-cart-drawer li.mini_cart_item a:not(.remove) { display: block; font-size: 0.9rem; line-height: 1.45; color: var(--ink); text-decoration: none; padding-right: 1.6rem; } .cs-workspace .cs-mini-cart-drawer li.mini_cart_item a.remove { position: absolute; right: 0; top: 1.05rem; width: auto; height: auto; font-size: 1.15rem; line-height: 1; color: var(--muted) !important; background: none !important; } .cs-workspace .cs-mini-cart-drawer li.mini_cart_item a.remove:hover { color: var(--ink) !important; } .cs-workspace .cs-mini-cart-drawer li.mini_cart_item .quantity { display: block; margin-top: 0.45rem; font-size: 0.85rem; color: var(--muted); } .cs-workspace .cs-mini-cart-drawer li.mini_cart_item dl.variation { margin: 0.4rem 0 0; font-size: 0.72rem; color: var(--muted); } .cs-workspace .cs-mini-cart-drawer li.mini_cart_item dl.variation dt, .cs-workspace .cs-mini-cart-drawer li.mini_cart_item dl.variation dd { display: inline; margin: 0; } .cs-workspace .cs-mini-cart-drawer p.woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 1.15rem 0; } .cs-workspace .cs-mini-cart-drawer p.woocommerce-mini-cart__total strong { font-weight: 400; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .cs-workspace .cs-mini-cart-drawer p.woocommerce-mini-cart__buttons { display: grid; gap: 0.65rem; margin: 0 0 0.4rem; } .cs-workspace .cs-mini-cart-drawer p.woocommerce-mini-cart__buttons a.button { display: inline-flex; justify-content: center; align-items: center; padding: 1rem 1.4rem; border: 1px solid var(--ink) !important; border-radius: 0 !important; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 400; background: none !important; color: var(--ink) !important; transition: opacity 0.2s; } .cs-workspace .cs-mini-cart-drawer p.woocommerce-mini-cart__buttons a.button:hover { opacity: 0.8; } .cs-workspace .cs-mini-cart-drawer p.woocommerce-mini-cart__buttons a.button.checkout { order: -1; background: var(--ink) !important; color: var(--cream) !important; } .cs-workspace .cs-mini-cart-drawer p.woocommerce-mini-cart__empty-message { flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; font-family: var(--serif); font-size: 1.2rem; color: var(--muted); } /* WhatsApp chat widget (qlwapp) — its fixed strip (z 9999999) paints over every overlay, so fade it out whenever a drawer or the search panel is open; site.js also makes the pill draggable so shoppers can move it off buttons it covers. */ .cs-workspace:has(.cs-mini-cart.is-open, .cs-nav-links.is-open, .cs-search-widget.is-open) .qlwapp__container { opacity: 0; pointer-events: none; } .cs-workspace .qlwapp__container { transition: opacity 0.2s ease; } /* …and align the pill itself with the theme: cream pill, hairline border, small caps, glyph kept on a WhatsApp-green chip for instant recognition. */ .cs-workspace .qlwapp__button.qlwapp__button--button { background: var(--cream) !important; color: var(--ink) !important; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 24px rgba(23, 21, 18, 0.14); padding: 0.35rem 1.05rem 0.35rem 0.35rem; display: inline-flex; align-items: center; gap: 0.55rem; } .cs-workspace .qlwapp__button .qlwapp__icon { background: #25d366; color: #fff; border-radius: 50%; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .cs-workspace .qlwapp__button .qlwapp__text { font-family: var(--sans); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; } /* ---------- native fallback pages (checkout / my-account) inside workspace chrome ---------- */ .cs-workspace .cs-fallback { max-width: 1100px; margin-inline: auto; padding-block: clamp(2rem, 5vh, 3.5rem) clamp(3rem, 8vh, 6rem); } .cs-workspace .cs-fallback h1 { font-family: var(--serif); font-weight: 500; } @media (max-width: 640px) { .cs-workspace .site-head { padding-block: 0.7rem; } .cs-workspace .head-left { gap: 0.5rem; } .cs-workspace .wordmark { font-size: 0.8rem; letter-spacing: 0.16em; text-indent: 0.16em; gap: 0.4rem; } .cs-workspace .head-right { gap: 0.7rem; } }