/* ========================================================================== Artesano de Mexico — Theme Stylesheet ========================================================================== */ /* -------------------------------------------------------------------------- Icons (inline SVG via artesano_icon(), see functions.php) -------------------------------------------------------------------------- */ .icon { width: 1.25rem; height: 1.25rem; } /* -------------------------------------------------------------------------- Semantic typography roles (design tokens, see assets/css/tokens.css) -------------------------------------------------------------------------- */ .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-12); line-height: 1; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--fg-3); } .lede { font-size: var(--fs-18); line-height: var(--lh-loose); color: var(--fg-2); max-width: 60ch; } .caption { font-size: var(--fs-13); color: var(--fg-3); line-height: var(--lh-base); } .price { font-family: var(--font-body); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg); } .pull-quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--fs-32); line-height: var(--lh-snug); color: var(--fg); } .h-hero, h1.hero { font-family: var(--font-display); font-weight: 400; font-size: clamp(var(--fs-44), 6vw, var(--fs-80)); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg); margin: 0; } /* Shared hero copy block — Homepage, Our Story, Shop and Category heroes all use this for their text container, unified to left-aligned. Side padding is set here (not inline) so the mobile override below can win: an inline style attribute always beats an external stylesheet regardless of selector specificity (see the .site-header .wc-block-mini-cart__badge comment further down for the same gotcha). */ .hero-copy { padding-left: 4rem; padding-right: 2rem; text-align: left; } @media (max-width: 782px) { .hero-copy { padding-left: var(--content-pad); padding-right: var(--content-pad); } } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ body, .wp-block-navigation, .wp-block-navigation a, .wp-block-button__link, p, li { font-family: 'Inter', sans-serif; } h1, h2, h3, h4, h5, h6, .wp-block-heading, .wp-block-cover h1, .wp-block-cover h2 { font-family: 'Fraunces', serif; } /* Base link color, zero-specificity so every component-specific rule elsewhere (nav items, product cards, buttons, chips, ...) still wins. Only reaches generic content links (post/page copy, FAQ answers) that would otherwise fall back to the browser default blue. */ :where(a) { color: var(--fg-link); text-decoration-color: var(--border-strong); } :where(a:hover), :where(a:focus) { color: var(--fg-link-hover); } /* -------------------------------------------------------------------------- Header — sticky, cream, blurred (T7) -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(247, 242, 235, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } /* backdrop-filter makes .site-header a containing block for any position:fixed descendant (same effect as `filter`) — the mobile nav's fixed overlay panel would collapse into the ~72px header bar instead of covering the viewport. Drop the filter while the overlay is open (WP core adds .has-modal-open to ) so `fixed` resolves against the viewport again. */ html.has-modal-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; } .site-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-8); max-width: var(--content-max); margin: 0 auto; height: var(--header-h); padding: 0 var(--content-pad); } .site-header-nav { justify-self: start; } .site-header-nav a { font-size: 0.875rem; font-weight: 500; text-transform: none; opacity: 1; } .site-header-logo { display: flex; align-items: center; justify-self: center; text-decoration: none; } .site-header-logo svg { display: block; height: 30px; width: auto; } .site-header-icons { justify-self: end; align-items: center; gap: var(--sp-2); } .site-header .icon-btn, .site-header .wc-block-customer-account__link, .site-header .wc-block-mini-cart__button { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--fg); background: transparent; border: 0; position: relative; transition: background var(--dur-fast) var(--ease); } .site-header .icon-btn:hover, .site-header .wc-block-customer-account__link:hover, .site-header .wc-block-mini-cart__button:hover { background: var(--cream-2); } .site-header .icon-btn .icon, .site-header .wc-block-customer-account__link svg, .site-header .wc-block-mini-cart__button svg { width: 22px; height: 22px; } .site-header-search .wp-block-search__button { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: transparent; color: var(--fg); border: 0; padding: 0; cursor: pointer; } .site-header-search .wp-block-search__button:hover { background: var(--cream-2); } .site-header-search .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; } .site-header-search .wp-block-search__inside-wrapper { border-color: var(--border); } /* !important is required: the Mini Cart block writes its badge colors as an inline style (background-color/color) via the Interactivity API, driven by block attributes stored in the Site Editor template. That inline style otherwise always wins over any external stylesheet rule, regardless of selector specificity. */ .site-header .wc-block-mini-cart__badge { background: var(--charcoal) !important; color: var(--cream) !important; border-color: var(--charcoal) !important; } @media (max-width: 480px) { .site-header-inner { gap: var(--sp-2); padding: 0 var(--sp-2); } .site-header-icons { gap: 0; } } /* -------------------------------------------------------------------------- Mobile navigation overlay — theme the WP core Navigation overlay panel to match the header's icon buttons and brand palette. Without this the panel falls back to core's un-themed white/black defaults with zero padding (core's clamp() padding relies on a --wp--style--root--padding-top custom property that theme.json never defines, which invalidates the whole padding shorthand and leaves the panel flush against the screen edges). -------------------------------------------------------------------------- */ .site-header-nav .wp-block-navigation__responsive-container-open, .site-header-nav .wp-block-navigation__responsive-container-close { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease); } .site-header-nav .wp-block-navigation__responsive-container-open:hover, .site-header-nav .wp-block-navigation__responsive-container-close:hover { background: var(--cream-2); } .site-header-nav .wp-block-navigation__responsive-container-open:focus-visible, .site-header-nav .wp-block-navigation__responsive-container-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .site-header-nav .wp-block-navigation__responsive-container-open svg, .site-header-nav .wp-block-navigation__responsive-container-close svg { width: 22px; height: 22px; } .site-header-nav .wp-block-navigation__responsive-container-close { top: var(--sp-3); right: var(--sp-3); } .site-header-nav .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--cream) !important; color: var(--fg) !important; } .site-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding: calc(var(--sp-8) + 24px) var(--content-pad) var(--sp-8); } .site-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; align-items: stretch; } .site-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: flex; align-items: center; width: 100%; font-family: var(--font-display); font-size: var(--fs-24); font-weight: 400; padding: var(--sp-4) 0 !important; border-bottom: var(--border-hair); transition: color var(--dur-fast) var(--ease); } .site-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child .wp-block-navigation-item__content { border-bottom: none; } .site-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover, .site-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible { color: var(--terracotta); } /* -------------------------------------------------------------------------- CTA Button — hover & transition -------------------------------------------------------------------------- */ .wp-block-button__link { transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .wp-block-button__link:hover { background-color: #C97D10 !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(200, 120, 0, 0.35); } .wp-block-button__link:active { transform: translateY(0); box-shadow: none; } /* -------------------------------------------------------------------------- Page content (prose) — brand typography for freeform editor content on the generic page template (templates/page.html, the wp:post-content block). Content-only pages like Delivery live entirely in the editor, so this is what makes their headings/paragraphs/lists/tables read as part of the theme instead of falling back to browser defaults. -------------------------------------------------------------------------- */ .wp-block-post-content > *:first-child { margin-top: 0; } .wp-block-post-content h1, .wp-block-post-content h2, .wp-block-post-content h3, .wp-block-post-content h4, .wp-block-post-content h5, .wp-block-post-content h6 { font-weight: 400; line-height: var(--lh-snug); color: var(--fg); } .wp-block-post-content h1 { font-size: var(--fs-44); margin: var(--sp-12) 0 var(--sp-6); } .wp-block-post-content h2 { font-size: var(--fs-32); margin: var(--sp-12) 0 var(--sp-4); } .wp-block-post-content h3 { font-size: var(--fs-24); margin: var(--sp-8) 0 var(--sp-3); } .wp-block-post-content h4 { font-size: var(--fs-20); margin: var(--sp-6) 0 var(--sp-2); } .wp-block-post-content h5, .wp-block-post-content h6 { font-size: var(--fs-18); font-weight: 600; margin: var(--sp-6) 0 var(--sp-2); } .wp-block-post-content p, .wp-block-post-content li { font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--fg-2); } .wp-block-post-content p { margin: 0 0 var(--sp-6); } .wp-block-post-content ul, .wp-block-post-content ol { margin: 0 0 var(--sp-6); padding-left: 1.25em; } .wp-block-post-content li + li { margin-top: var(--sp-2); } .wp-block-post-content blockquote { margin: var(--sp-8) 0; padding-left: var(--sp-6); border-left: 3px solid var(--terracotta); font-family: var(--font-display); font-style: italic; font-size: var(--fs-20); color: var(--fg-2); } .wp-block-post-content blockquote p:last-child { margin-bottom: 0; } .wp-block-post-content hr { margin: var(--sp-12) 0; border: none; border-top: var(--border-hair); } .wp-block-post-content figcaption { margin-top: var(--sp-2); font-size: var(--fs-13); color: var(--fg-3); text-align: center; } .wp-block-post-content .wp-block-table { margin: 0 0 var(--sp-8); } .wp-block-post-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); } .wp-block-post-content th, .wp-block-post-content td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: var(--border-hair); } .wp-block-post-content thead th { background: var(--cream-2); font-weight: 600; color: var(--fg); border-bottom: 1px solid var(--border-strong); } .wp-block-post-content tbody tr:nth-child(even) { background: var(--bg-elevated); } /* -------------------------------------------------------------------------- Single product page -------------------------------------------------------------------------- */ /* Add to cart button on product page (classic + blocks) */ .woocommerce .single_add_to_cart_button, .woocommerce form.cart .button, .woocommerce button.button.alt, .wc-block-add-to-cart-button, .wc-block-components-button.wc-block-add-to-cart-button, .wp-block-woocommerce-add-to-cart-form .wc-block-components-button, .wc-block-add-to-cart-form .wc-block-components-button { background-color: #F5A623 !important; color: #2C2C2A !important; border: none !important; border-radius: 50px !important; padding: 0.875rem 2.5rem !important; font-weight: 700 !important; font-size: 0.9375rem !important; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease !important; } .woocommerce .single_add_to_cart_button:hover, .woocommerce form.cart .button:hover, .wc-block-add-to-cart-button:hover, .wc-block-components-button.wc-block-add-to-cart-button:hover { background-color: #C97D10 !important; transform: translateY(-2px); } /* Product breadcrumbs */ .woocommerce-breadcrumb, .wc-block-breadcrumbs { color: #9A8F86 !important; font-size: 0.875rem !important; } .woocommerce-breadcrumb a, .wc-block-breadcrumbs a { color: #9A8F86 !important; text-decoration: none; } .woocommerce-breadcrumb a:hover, .wc-block-breadcrumbs a:hover { color: #F5A623 !important; } /* Product price on single page */ .woocommerce-Price-amount.amount { color: #2C2C2A; font-weight: 700; } /* Product gallery */ .woocommerce-product-gallery { width: 100% !important; } /* -------------------------------------------------------------------------- WooCommerce product grid — card & title styles -------------------------------------------------------------------------- */ /* Product title links: inherit brand dark instead of default blue */ .wc-block-grid__product-title a, .wc-block-components-product-name a, .wp-block-post-title a, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2 { color: #2C2C2A !important; text-decoration: none; } .wc-block-grid__product-title a:hover, .wc-block-components-product-name a:hover, .wp-block-post-title a:hover { color: #8B2500 !important; } /* WooCommerce product image placeholder */ .wc-block-grid__product-image .wc-block-grid__product-image__placeholder, .woocommerce ul.products li.product .woocommerce-product-gallery__image--placeholder { background-color: #F7F2EB; } /* Product card image — force a consistent 1:1 box regardless of the source photo's native aspect ratio (studio shots vs. lifestyle photos), so grid rows line up. Applies everywhere this WooCommerce block is used: front page New Arrivals, Shop, Category archives, Search results, PDP related products. */ .wc-block-components-product-image { aspect-ratio: 1 / 1; overflow: hidden; background-color: #F7F2EB; } .wc-block-components-product-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Add to cart button in product grid */ .wc-block-grid__product .add_to_cart_button, .woocommerce ul.products li.product .button { background-color: #2C2C2A !important; color: #FFFFFF !important; border-radius: 50px !important; font-weight: 600 !important; transition: background-color 0.2s ease, transform 0.2s ease !important; } .wc-block-grid__product .add_to_cart_button:hover, .woocommerce ul.products li.product .button:hover { background-color: #8B2500 !important; transform: translateY(-2px); } /* -------------------------------------------------------------------------- Footer nav lists — strip bullets & default padding -------------------------------------------------------------------------- */ .footer-nav-list { list-style: none !important; padding-left: 0 !important; margin: 0 !important; } .footer-nav-list li { padding: 0; } .footer-nav-list a:hover { color: #F5A623 !important; transition: color 0.2s ease; } /* -------------------------------------------------------------------------- Footer newsletter signup (T8) -------------------------------------------------------------------------- */ .footer-newsletter { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .footer-newsletter input { flex: 1; min-width: 0; padding: 0.6875rem 0.875rem; border-radius: var(--radius-md); border: 1px solid rgba(247, 242, 235, 0.2); background: rgba(255, 255, 255, 0.04); color: var(--cream); font-family: var(--font-body); font-size: 0.875rem; } .footer-newsletter input::placeholder { color: rgba(247, 242, 235, 0.5); } .footer-newsletter button { background: var(--cream); color: var(--charcoal); border: 0; border-radius: var(--radius-md); padding: 0.6875rem 1.25rem; font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: background var(--dur-fast) var(--ease); } .footer-newsletter button:hover { background: var(--amber); } .newsletter-form-message { flex-basis: 100%; margin: var(--sp-2) 0 0; font-size: var(--fs-13); color: var(--success); } .newsletter-form-message--error { color: var(--error); } /* The footer form sits on a dark (charcoal) background, where --success/ --error read as near-black — this context gets a lighter pairing instead (amber is already this footer's "pay attention" accent). */ .footer-newsletter .newsletter-form-message { color: var(--cream); } .footer-newsletter .newsletter-form-message--error { color: var(--amber); } /* -------------------------------------------------------------------------- Campaign-page newsletter signup form -------------------------------------------------------------------------- */ .newsletter-signup-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .newsletter-signup-form input[type="email"] { flex: 1; min-width: 220px; padding: 0.6875rem 0.875rem; border-radius: var(--radius-md); border: var(--border-hair); font-family: var(--font-body); font-size: var(--fs-14); } .newsletter-signup-form button { background: var(--action); color: var(--action-fg); border: 0; border-radius: var(--radius-md); padding: 0.6875rem 1.25rem; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-14); cursor: pointer; transition: background var(--dur-fast) var(--ease); } .newsletter-signup-form button:hover { background: var(--action-hover); } /* -------------------------------------------------------------------------- Shop archive (T9) -------------------------------------------------------------------------- */ .shop-crumbs.wc-block-breadcrumbs { color: var(--fg-3); margin-bottom: 0; } .shop-crumbs.wc-block-breadcrumbs a { color: var(--fg-3); text-decoration: none; } .shop-crumbs.wc-block-breadcrumbs a:hover { color: var(--fg); } .shop-toolbar .woocommerce-result-count { margin: 0; color: var(--fg-2); font-variant-numeric: tabular-nums; } .shop-toolbar .woocommerce-ordering { margin: 0; } .shop-toolbar select.orderby { font-family: var(--font-body); font-weight: 500; font-size: 0.8125rem; padding: 0.5625rem 0.875rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--paper); color: var(--fg); cursor: pointer; } .shop-pagination .wp-block-query-pagination-numbers a, .shop-pagination .wp-block-query-pagination-numbers span, .shop-pagination .wp-block-query-pagination-previous, .shop-pagination .wp-block-query-pagination-next { font-size: 0.875rem; font-weight: 500; color: var(--fg); text-decoration: none; } .shop-pagination .wp-block-query-pagination-numbers .page-numbers.current { background: var(--charcoal); color: var(--cream); border-radius: var(--radius-md); padding: 0.375rem 0.75rem; } .shop-pagination .wp-block-query-pagination-previous, .shop-pagination .wp-block-query-pagination-next { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.5rem 0.875rem; } /* -------------------------------------------------------------------------- Category archive (T10) -------------------------------------------------------------------------- */ .cat-hero .wp-block-query-title { max-width: 44ch; } .cat-hero-lede.wp-block-term-description { max-width: 56ch; } .cat-hero { display: flex; align-items: center; background-size: cover; background-position: center; } .cat-hero--photo { min-height: 480px; } .cat-siblings-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .cat-siblings-label { font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-right: 0.25rem; } .cat-pills-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; } .chip { display: inline-block; font-weight: 500; font-size: 0.8125rem; padding: 0.5rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--paper); color: var(--fg); text-decoration: none; transition: all var(--dur-fast) var(--ease); } .chip:hover { border-color: var(--border-strong); } .chip.active { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); } /* -------------------------------------------------------------------------- Product detail page (T11) -------------------------------------------------------------------------- */ .pdp-hero { display: flex; flex-direction: column; justify-content: center; background-size: cover; background-position: center; } .pdp-hero--photo { min-height: 360px; } /* Breadcrumbs sit on the dark .pdp-hero background (unlike the shop/category crumbs, which sit outside their hero on the plain page background) — the global muted #9A8F86 breadcrumb color (theme.css ~L376) is unreadable here, so override to white, same amber-on-hover as everywhere else. */ .pdp-hero .woocommerce-breadcrumb, .pdp-hero .wc-block-breadcrumbs, .pdp-hero .woocommerce-breadcrumb a, .pdp-hero .wc-block-breadcrumbs a { color: #FFFFFF !important; } .pdp-hero .woocommerce-breadcrumb a:hover, .pdp-hero .wc-block-breadcrumbs a:hover { color: #F5A623 !important; } .pdp-actions-row { align-items: flex-start; } .btn-ghost { display: inline-flex; align-items: center; gap: 0.375rem; background: transparent; border: 0; padding: 0.5rem 0; color: var(--charcoal); font-weight: 600; font-size: 0.875rem; text-decoration: none; } .btn-ghost:hover { color: var(--terracotta); text-decoration: underline; text-underline-offset: 4px; } .muted { color: var(--fg-3); } .checkout-recalculate { margin: var(--sp-4) 0; } .btn-outline { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 50px; background: transparent; color: var(--fg); font-weight: 600; font-size: 0.875rem; padding: 0.625rem 1.5rem; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .btn-outline:hover { border-color: var(--fg); background: var(--cream-2); } .btn-outline:disabled { opacity: 0.6; cursor: default; } .checkout-recalculate-hint { font-size: 0.8125rem; margin: 0.5rem 0 0; } .checkout-recalculate-hint a { color: inherit; text-decoration: underline; } /* Maker strip */ .pdp-maker-section .maker-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--sp-16); align-items: center; } .pdp-maker-section .maker-photo { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); border: 1px solid var(--border); margin: 0; overflow: hidden; } .pdp-maker-section .maker-copy h1, .pdp-maker-section .maker-copy h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.15; margin: 0.5rem 0 0.75rem; } .pdp-maker-section .maker-copy p { font-size: 1rem; line-height: 1.7; color: var(--fg-2); margin: 0 0 0.75rem; max-width: 52ch; } /* Specifications / Care */ .pdp-specs-section .specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); } .pdp-specs-section h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; margin: 0 0 1rem; line-height: 1.2; } .pdp-specs-section dl { margin: 0; display: grid; grid-template-columns: 130px 1fr; row-gap: 0.75rem; column-gap: 1rem; } .pdp-specs-section dt { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; } .pdp-specs-section dd { margin: 0; font-size: 0.9375rem; color: var(--fg); line-height: 1.5; } .pdp-specs-section ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; } .pdp-specs-section li { font-size: 0.9375rem; color: var(--fg-2); line-height: 1.55; padding-left: 1.125rem; position: relative; } .pdp-specs-section li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 1px; background: var(--terracotta); } .pdp-specs-section p { font-size: 0.9375rem; color: var(--fg-2); line-height: 1.6; margin: 0; max-width: 42ch; } @media (max-width: 782px) { .pdp-maker-section .maker-grid, .pdp-specs-section .specs-grid { grid-template-columns: 1fr; } } /* PDP eyebrow, stock badge, trust badges */ .pdp-eyebrow { color: #F5A623; margin: 0.75rem 0 0; } .stock-badge { display: inline-flex; align-items: center; white-space: nowrap; font-size: var(--fs-13); font-weight: 600; padding: 0.3rem 0.75rem; border-radius: var(--radius-pill); } .stock-badge--in { background: color-mix(in srgb, var(--success) 14%, var(--paper)); color: var(--success); } .stock-badge--out { background: color-mix(in srgb, var(--error) 12%, var(--paper)); color: var(--error); } .pdp-trust-list { border-top: 0; padding-top: 0; margin-top: 0; } /* -------------------------------------------------------------------------- PDP variation grid (single-attribute variable products) -------------------------------------------------------------------------- */ .pdp-variation-grid { margin-bottom: 1.5rem; } .pdp-variation-grid__fieldset { border: 0; padding: 0; margin: 0; } .pdp-variation-grid__label { padding: 0; font-size: var(--fs-13); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--fg-3); margin-bottom: var(--sp-3); } .pdp-variation-grid__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .pdp-variation-grid__option { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; min-width: 64px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--paper); transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .pdp-variation-grid__option--selected { border-color: var(--action); background: color-mix(in srgb, var(--action) 10%, var(--paper)); } .pdp-variation-grid__option--out-of-stock { opacity: 0.5; } .pdp-variation-grid__option-value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-20); color: var(--fg); } .pdp-variation-grid__option--out-of-stock .pdp-variation-grid__option-value { text-decoration: line-through; } .pdp-variation-grid__option-price { font-size: var(--fs-13); color: var(--fg-2); } .pdp-variation-grid__option-oos { font-size: var(--fs-12); font-weight: 600; color: var(--error); white-space: nowrap; } .pdp-variation-grid__stepper { display: flex; align-items: center; gap: var(--sp-1); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--white); } .pdp-variation-grid__stepper-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: var(--radius-pill); color: var(--fg); font-size: var(--fs-16); line-height: 1; cursor: pointer; } .pdp-variation-grid__stepper-btn:hover { background: var(--cream-2); } .pdp-variation-grid__stepper-value { min-width: 1.5em; text-align: center; font-weight: 600; font-size: var(--fs-14); } /* Swatch variant: option image as the tile background, value label overlaid */ .pdp-variation-grid--swatch .pdp-variation-grid__option--swatch { width: 76px; min-width: 76px; aspect-ratio: 1; background-size: cover; background-position: center; justify-content: flex-end; position: relative; } .pdp-variation-grid--swatch .pdp-variation-grid__option--swatch .pdp-variation-grid__option-value { background: rgba(44, 44, 42, 0.72); color: var(--white); font-size: var(--fs-12); font-weight: 600; padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); } .pdp-variation-grid__summary { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); } .pdp-variation-grid__summary-count { font-size: var(--fs-14); color: var(--fg-2); } .pdp-variation-grid__message { margin-top: var(--sp-2); font-size: var(--fs-13); color: var(--error); } .pdp-variation-grid__add:disabled { opacity: 0.45; cursor: not-allowed; } /* -------------------------------------------------------------------------- Home refinements (T12) -------------------------------------------------------------------------- */ .trust-icon { width: 28px; height: 28px; color: var(--charcoal); opacity: 0.85; } .cat-card-count { font-size: 0.75rem; color: #E6DED0; margin-bottom: 0.5rem; } /* Dynamic category tile grid — [artesano_category_grid], replaces the old per-page hardcoded wp:columns/wp:cover markup on the front page, shop archive, 404 and search templates. */ .cat-grid { display: flex; flex-wrap: nowrap; gap: 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 0.5rem; scrollbar-width: thin; scrollbar-color: var(--amber) var(--cream-2); } .cat-grid::-webkit-scrollbar { height: 6px; } .cat-grid::-webkit-scrollbar-track { background: var(--cream-2); border-radius: var(--radius-pill); } .cat-grid::-webkit-scrollbar-thumb { background: var(--amber); border-radius: var(--radius-pill); } .cat-grid::-webkit-scrollbar-thumb:hover { background: var(--amber-hover); } .cat-grid--compact { gap: 1rem; } .cat-grid__tile { flex: 0 0 260px; box-sizing: border-box; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-end; color: var(--white); } .cat-grid--large .cat-grid__tile { flex-basis: 270px; min-height: 240px; border-radius: var(--radius-lg); padding: 1.5rem; } .cat-grid--compact .cat-grid__tile { flex-basis: 220px; min-height: 220px; border-radius: var(--radius-md); padding: 1.25rem; } .cat-grid__name { font-family: var(--font-display); color: var(--white); margin: 0 0 0.25rem; } .cat-grid--large .cat-grid__name { font-size: 1.375rem; font-weight: 700; } .cat-grid--compact .cat-grid__name { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.125rem; } .cat-grid__name a { color: inherit; text-decoration: none; } .cat-grid__link { margin: 0; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.06em; } .cat-grid__link a { color: var(--amber); text-decoration: none; } /* Photo variant: a real (for a real `alt`) sits behind the tile's text, layered via negative z-index so it stays under the always-present darkening gradient without needing z-index on every text child. Flat-color tiles (no term image set) are untouched — no ::after, no position change. `isolation: isolate` gives the tile its own stacking context so the negative-z image/gradient stay trapped inside it — without this, `position: relative` alone doesn't create a stacking context, so on pages where an ancestor section has an opaque background (e.g. the front page's cream "Featured categories" wrapper) that background paints on top of the escaped negative-z image and hides it entirely. */ .cat-grid__tile--photo { position: relative; overflow: hidden; isolation: isolate; } /* Specificity note: on the shop archive (body.woocommerce-page) WooCommerce core CSS ships `.woocommerce img, .woocommerce-page img { height: auto }` at (0,1,1) specificity, which otherwise beats a bare `.cat-grid__tile-img` class selector at (0,1,0) and collapses the absolutely-positioned image back to its intrinsic aspect ratio. Qualify with the parent tile class to win on specificity (0,2,0) without an !important. */ .cat-grid__tile--photo .cat-grid__tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .cat-grid__tile--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.15) 100%); z-index: -1; pointer-events: none; } /* Maker showcase grid — [artesano_maker_showcase], the dynamic "Meet the makers" section on the Our Story page. Wraps to as many rows as there are maker terms, unlike the old fixed 3+3 wp:columns layout it replaces. */ .maker-showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; } .maker-showcase-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; box-sizing: border-box; padding: 1.5rem; border-radius: var(--radius-lg); color: var(--white); } .maker-showcase-card .eyebrow { color: var(--amber); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.375rem; } .maker-showcase-card h3 { font-family: var(--font-display); color: var(--white); font-weight: 700; font-size: 1.25rem; margin: 0 0 0.375rem; } .maker-showcase-meta { font-size: 0.8125rem; color: var(--border); margin: 0 0 0.75rem; } .maker-showcase-link { margin: 0; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.06em; } .maker-showcase-link a { color: var(--amber); text-decoration: none; } /* Photo variant, same negative-z-index layering as .cat-grid__tile--photo above — same isolation: isolate fix, same reason (contains the negative-z image so it can't get painted under an ancestor section's opaque background). */ .maker-showcase-card--photo { position: relative; overflow: hidden; isolation: isolate; } .maker-showcase-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .maker-showcase-card--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.1) 100%); z-index: -1; pointer-events: none; } /* -------------------------------------------------------------------------- Contact page (T14) -------------------------------------------------------------------------- */ .shop-crumbs-plain a:hover { color: var(--fg); } .contact-lede { max-width: 56ch; } /* Form */ .contact-form-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 2rem 2rem; } .contact-form-card h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; margin: 0 0 1.25rem; } .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; } .contact-form .field { display: flex; flex-direction: column; gap: 0.375rem; } .contact-form .field-span-2 { grid-column: span 2; } .contact-form .field-label { font-size: 0.8125rem; font-weight: 500; color: var(--fg); } .contact-form input, .contact-form select, .contact-form textarea { font-family: var(--font-body); font-size: 0.9375rem; padding: 0.6875rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--cream); color: var(--fg); } .contact-form textarea { resize: vertical; min-height: 120px; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--terracotta); outline-offset: -1px; border-color: var(--terracotta); } .contact-check { grid-column: span 2; display: flex; align-items: flex-start; gap: 0.625rem; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--fg-2); line-height: 1.5; } .contact-check input { margin-top: 0.2rem; } .contact-submit { grid-column: span 2; width: 100%; margin-top: 0.5rem; border: 0; border-radius: var(--radius-md); background: var(--amber); color: var(--charcoal); font-weight: 700; font-size: 0.9375rem; padding: 0.875rem 1.5rem; cursor: pointer; transition: background var(--dur-fast) var(--ease); } .contact-submit:hover { background: var(--amber-hover); } /* Aside: info card, hours, map */ .info-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.375rem 1.5rem; margin-bottom: 1rem; } .info-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; margin: 0.5rem 0 0.75rem; line-height: 1.2; } .info-card-addr { font-size: 0.875rem; line-height: 1.6; color: var(--fg-2); margin: 0 0 1rem; } .info-card-rows { display: flex; flex-direction: column; gap: 0.625rem; border-top: 1px solid var(--border); padding-top: 0.875rem; } .info-row { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: var(--fg); } .info-row svg { color: var(--fg-3); flex-shrink: 0; } .info-row a { color: var(--fg); text-decoration: none; } .info-row a:hover { color: var(--terracotta); text-decoration: underline; } .hours-list { list-style: none; padding: 0.5rem 0 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--border); margin-top: 0.375rem; padding-top: 0.875rem; } .hours-list li { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--fg); font-variant-numeric: tabular-nums; } .hours-list li.hours-note { color: var(--fg-3); font-size: 0.75rem; padding-top: 0.25rem; } .info-card-note { font-size: 0.8125rem; line-height: 1.55; color: var(--fg-3); margin: 0.875rem 0 0; font-style: italic; } .info-card-note a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; } .map-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .map-block { position: relative; aspect-ratio: 16 / 11; background: var(--cream-2); border-radius: var(--radius-sm); overflow: hidden; } .map-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); } .map-grid span { border-right: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .map-streets { position: absolute; inset: 0; } .map-streets span { position: absolute; background: var(--paper); border: 1px solid var(--border); display: block; } .map-pin { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); } .map-pin .pin-dot { display: block; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--terracotta); border: 3px solid var(--paper); box-shadow: var(--shadow-md); } .map-link { display: inline-block; padding: 0.125rem 0.25rem; font-size: 0.8125rem; font-weight: 500; color: var(--terracotta); text-decoration: underline; text-underline-offset: 4px; } /* FAQ accordion */ .faq-item.wp-block-details { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0; margin-bottom: 0.75rem; } .faq-item.wp-block-details summary { display: flex; justify-content: space-between; align-items: center; padding: 1.125rem 1.375rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--fg); } .faq-item.wp-block-details summary::-webkit-details-marker { display: none; } .faq-item.wp-block-details summary::after { content: ""; width: 10px; height: 10px; flex-shrink: 0; margin-left: 0.75rem; border-right: 1.5px solid var(--fg-3); border-bottom: 1.5px solid var(--fg-3); transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease); } .faq-item.wp-block-details[open] summary::after { transform: rotate(225deg); } .faq-item.wp-block-details p { margin: 0; padding: 0 1.375rem 1.125rem; font-size: 0.875rem; line-height: 1.65; color: var(--fg-2); } @media (max-width: 782px) { .contact-form { grid-template-columns: 1fr; } .contact-form .field-span-2, .contact-check, .contact-submit { grid-column: span 1; } } /* -------------------------------------------------------------------------- 404 page (T15) -------------------------------------------------------------------------- */ .nf-hero { text-align: center; } .nf-lede { max-width: 52ch; margin-left: auto; margin-right: auto; } .nf-search { position: relative; max-width: 520px; margin: 0 auto 1.5rem; align-items: center; } .nf-search-icon { position: absolute; left: 1.125rem; top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; z-index: 1; } .nf-search .wp-block-search__inside-wrapper { border-radius: var(--radius-pill) 0 0 var(--radius-pill); border-color: var(--border); } .nf-search .wp-block-search__input { padding-left: 2.75rem; border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important; } .nf-search .wp-block-search__button { border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important; background-color: var(--amber) !important; color: var(--charcoal) !important; border: 0 !important; font-weight: 700; } .nf-search .wp-block-search__button:hover { background-color: var(--amber-hover) !important; } /* -------------------------------------------------------------------------- Basket / Cart (T4) -------------------------------------------------------------------------- */ .cart-page .wc-block-cart { margin: 0; } /* Line items */ .wc-block-cart-items { border-top: var(--border-hair); } .wc-block-cart .wc-block-cart-items th { font-family: var(--font-body); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); } .wc-block-cart table.wc-block-cart-items:not(.wc-block-mini-cart-items) .wc-block-cart-items__row { border-color: var(--border) !important; } .wc-block-cart-item__image > a { border-radius: var(--radius-md); background: var(--cream-2) !important; } .wc-block-cart .wc-block-components-product-name { color: var(--fg); font-weight: 600 !important; font-size: var(--fs-16) !important; } .wc-block-cart .wc-block-components-product-metadata { color: var(--fg-3); font-size: var(--fs-13); } .wc-block-cart .wc-block-components-product-price { font-family: var(--font-body); font-weight: 500; color: var(--fg); } .wc-block-components-quantity-selector { border-color: var(--border) !important; border-radius: var(--radius-md) !important; background: var(--paper); } .wc-block-cart-item__remove-link { color: var(--fg-3) !important; } .wc-block-cart-item__remove-link:hover { color: var(--terracotta) !important; } /* "Continue shopping" + maker note, left column */ .basket-continue-link { margin: var(--sp-6) 0 var(--sp-4); } .maker-note { background: var(--paper); border-radius: var(--radius-md); padding: 1.125rem 1.375rem; margin: var(--sp-4) 0 var(--sp-8); } .maker-note p { margin: 0 0 0.375rem; } .maker-note p:last-child { margin-bottom: 0; } /* Cross-sells */ .basket-crosssell-eyebrow { margin-bottom: 0.375rem; } .basket-crosssell { border-top: var(--border-hair); padding-top: var(--sp-6); } .basket-crosssell h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; } /* Order summary sidebar */ .wc-block-cart__sidebar .basket-summary, .basket-summary { background: var(--paper); border: var(--border-hair); border-radius: var(--radius-lg); padding: 1.5rem 1.5rem 1.75rem; position: sticky; top: calc(var(--header-h) + var(--sp-4)); } .wc-block-cart .wc-block-cart__totals-title { font-family: var(--font-display) !important; font-weight: 500 !important; font-size: 1.375rem !important; text-transform: none !important; letter-spacing: normal !important; color: var(--fg) !important; padding: 0 0 1.125rem !important; } .basket-summary .wc-block-components-totals-item__label, .basket-summary .wc-block-components-totals-item__value { font-family: var(--font-body); color: var(--fg-2); } .basket-summary .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .basket-summary .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--fg); font-weight: 700 !important; } .basket-summary .wc-block-components-panel__button { color: var(--terracotta); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .basket-summary .wc-block-components-totals-coupon__input input, .basket-summary .wc-block-components-totals-coupon__button { border-radius: var(--radius-md); } .basket-summary .wc-block-components-totals-coupon__button { background: var(--charcoal); color: var(--cream); } .wc-block-cart__submit-button { background-color: var(--amber) !important; color: var(--charcoal) !important; border: none !important; border-radius: 50px !important; font-weight: 700 !important; padding: 0.875rem 1.5rem !important; transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease) !important; } .wc-block-cart__submit-button:hover { background-color: var(--amber-hover) !important; transform: translateY(-2px); } .wc-block-components-payment-method-icons { margin-top: 0.75rem; opacity: 0.85; } /* Trust badges */ .basket-trust-list { list-style: none; margin: 1rem 0 0; padding-top: 1rem; border-top: var(--border-hair); display: flex; flex-direction: column; gap: 0.625rem; } .basket-trust-list li { display: flex; align-items: center; gap: 0.625rem; font-size: var(--fs-13); color: var(--fg-2); } .basket-trust-list svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--fg-3); } @media (max-width: 782px) { .basket-summary { position: static; margin-top: var(--sp-6); } } /* -------------------------------------------------------------------------- Order confirmation (T6) -------------------------------------------------------------------------- */ .oc-hero { text-align: center; } /* WordPress Block Hooks auto-insert this after order-confirmation-summary (delayed guest account creation, WC core feature) — not in our template markup, so it needs its own polish to fit the design system. */ .wc-block-order-confirmation-create-account { max-width: 420px; margin: 2rem auto 0; padding: 1.5rem; background: var(--paper); border: var(--border-hair); border-radius: var(--radius-lg); text-align: left; } .wc-block-order-confirmation-create-account h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-18); margin: 0 0 0.75rem; } .wc-block-order-confirmation-create-account ul { margin: 0; padding-left: 1.25rem; color: var(--fg-2); font-size: var(--fs-14); } .wc-block-order-confirmation-create-account li { margin-bottom: 0.375rem; } .oc-confirmed-badge { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; margin-bottom: 1.25rem; } .oc-confirmed-icon { width: 48px; height: 48px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--success) 16%, var(--paper)); color: var(--success); display: flex; align-items: center; justify-content: center; } .oc-confirmed-icon .icon { width: 22px; height: 22px; } .wc-block-order-confirmation-status h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(var(--fs-32), 5vw, var(--fs-44)); line-height: var(--lh-tight); margin: 0 0 0.75rem; } .wc-block-order-confirmation-status p { color: var(--fg-2); font-size: var(--fs-16); line-height: var(--lh-loose); max-width: 52ch; margin: 0 auto; } .wc-block-order-confirmation-summary-list { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 1rem 0 0; padding: 0; font-size: var(--fs-13); color: var(--fg-3); } .wc-block-order-confirmation-summary-list-item:nth-child(n + 3) { display: none; } .wc-block-order-confirmation-summary-list-item:first-child::after { content: "\00b7"; margin-left: 0.75rem; color: var(--fg-3); } .wc-block-order-confirmation-summary-list-item__key { display: none; } .wc-block-order-confirmation-summary-list-item__value { font-weight: 600; color: var(--fg-2); } .delivery-pill { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 1.75rem; padding: 0.75rem 1.5rem; border: var(--border-hair); border-radius: var(--radius-pill); background: var(--paper); } .delivery-pill-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); } .delivery-pill-value { font-family: var(--font-display); font-size: var(--fs-18); color: var(--fg); } .oc-order-grid { margin-top: 1rem; } .wc-block-order-confirmation-totals__table { width: 100%; border-collapse: collapse; border-top: var(--border-hair); } .wc-block-order-confirmation-totals__table thead th { font-family: var(--font-body); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); text-align: left; padding: 0.75rem 0; border-bottom: var(--border-hair); } .wc-block-order-confirmation-totals__table .wc-block-order-confirmation-totals__total { text-align: right; } .wc-block-order-confirmation-totals__table td, .wc-block-order-confirmation-totals__table tfoot th { padding: 0.875rem 0; border-bottom: var(--border-hair); font-size: var(--fs-14); color: var(--fg); } .wc-block-order-confirmation-totals__table tfoot tr:last-child th, .wc-block-order-confirmation-totals__table tfoot tr:last-child td { font-weight: 700; font-size: var(--fs-18); border-bottom: 0; } .oc-order-grid .info-card { margin-bottom: 1rem; } .oc-order-grid .info-card address { font-style: normal; font-size: var(--fs-14); line-height: var(--lh-loose); color: var(--fg-2); } /* What happens next */ .oc-steps { align-items: stretch; } .oc-step-card { background: var(--cream-2); border-radius: var(--radius-lg); padding: 1.5rem; height: 100%; } .oc-step-num { font-family: var(--font-display); font-size: var(--fs-24); color: var(--terracotta); margin: 0 0 0.5rem; } .oc-step-card h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-18); margin: 0 0 0.5rem; } .oc-step-card p { font-size: var(--fs-14); line-height: var(--lh-loose); color: var(--fg-2); margin: 0; } .oc-next .wp-block-button.is-style-outline .wp-block-button__link { border: 1px solid var(--border-strong); border-radius: 50px; color: var(--fg); font-weight: 600; padding: 0.875rem 1.75rem; background: transparent; } .oc-next .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--fg); background: var(--cream-2); } @media (max-width: 782px) { .oc-order-grid { flex-wrap: wrap; } .oc-order-grid .wp-block-column { flex-basis: 100% !important; } .oc-steps { flex-wrap: wrap; } .oc-steps .wp-block-column { flex-basis: 100% !important; } } /* -------------------------------------------------------------------------- Checkout (T5) -------------------------------------------------------------------------- */ /* Slim distraction-free header, parts/header-checkout.html */ .checkout-header { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; } .checkout-header-inner { max-width: var(--content-max); margin: 0 auto; height: var(--header-h); padding: 0 var(--content-pad); align-items: center; } .checkout-secure-badge { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--fg-2); } .checkout-secure-badge .icon { width: 18px; height: 18px; color: var(--fg-3); } /* Layout: reuse the Cart block's two-column split */ .checkout-page .wc-block-components-sidebar-layout { align-items: flex-start; } .checkout-page .wc-block-checkout__sidebar.is-sticky { top: calc(var(--header-h) + var(--sp-4)); } /* Step cards */ .wc-block-components-checkout-step { background: var(--paper); border: var(--border-hair); border-radius: var(--radius-lg); padding: 1.75rem; margin: 0 0 1.25rem !important; } .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number { padding: 1.75rem 1.75rem 1.75rem 4.25rem !important; } .wc-block-components-checkout-step__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-20) !important; color: var(--fg); } .wc-block-components-checkout-step__title:before { display: flex !important; align-items: center; justify-content: center; width: 28px; height: 28px; left: -3rem !important; top: 0 !important; transform: none !important; border-radius: var(--radius-pill) !important; background: var(--charcoal) !important; color: var(--cream); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-13); } .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content:before, .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__description:before { left: -2.375rem !important; border-left-color: var(--border) !important; } .wc-block-components-checkout-step__heading-content a { color: var(--terracotta); font-weight: 600; } .wc-block-components-checkout-step__description { color: var(--fg-3); } /* Text inputs, selects */ .wc-block-components-text-input input, .wc-block-components-text-input textarea, .wc-block-components-country-input .components-combobox-control__input, .wc-block-components-state-input input { font-family: var(--font-body); border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; background: var(--cream); } .wc-block-components-text-input input:focus, .wc-block-components-country-input .components-combobox-control__input:focus { border-color: var(--terracotta) !important; box-shadow: 0 0 0 1px var(--terracotta) !important; } .wc-block-components-text-input label { color: var(--fg-3); } /* Checkbox */ .wc-block-components-checkbox__mark { fill: var(--cream) !important; } .wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark, .wc-block-components-checkbox svg { color: var(--charcoal); } .wc-block-components-checkbox__input:checked { background-color: var(--charcoal) !important; border-color: var(--charcoal) !important; } /* Shipping method + payment method options */ .wc-block-components-radio-control { display: flex; flex-direction: column; gap: 0.75rem; } .wc-block-components-radio-control__option { border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; background: var(--cream); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .wc-block-components-radio-control__option:hover { border-color: var(--border-strong) !important; } .wc-block-components-radio-control__option--checked-option-highlighted { color: var(--terracotta) !important; background: var(--paper); } .wc-block-components-radio-control__label { color: var(--fg); font-weight: 500 !important; } .wc-block-components-radio-control__secondary-label { font-weight: 600; color: var(--fg); } .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option:after { display: none !important; } /* Payment method tabs (accordion-style radio options) */ .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option { border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; margin-bottom: 0.75rem; overflow: hidden; } .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option--checked-option-highlighted { border-color: var(--terracotta) !important; box-shadow: none !important; } /* Place order button */ .wc-block-components-checkout-place-order-button { background-color: var(--amber) !important; color: var(--charcoal) !important; border: none !important; border-radius: 50px !important; font-weight: 700 !important; transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease) !important; } .wc-block-components-checkout-place-order-button:hover { background-color: var(--amber-hover) !important; transform: translateY(-2px); } .wc-block-checkout__actions_row { background: transparent; } /* Order summary sidebar (reuses .basket-summary card shell from T4) */ .checkout-summary .wc-block-components-order-summary-item { padding: 0.875rem 0; border-bottom: var(--border-hair); } .checkout-summary .wc-block-components-order-summary-item__image { border-radius: var(--radius-md); background: var(--cream-2); } .checkout-summary .wc-block-components-order-summary-item__description { font-size: var(--fs-14); font-weight: 600; color: var(--fg); } .checkout-summary .wc-block-components-checkout-order-summary__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-20); } @media (max-width: 782px) { .checkout-summary { position: static !important; } .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number { padding: 2.75rem 1.25rem 1.25rem !important; } .wc-block-components-checkout-step__title:before { left: 1.75rem !important; top: -2.25rem !important; } }