/* * 40-woocommerce.css — classic WooCommerce surfaces. §6.9, §6.12, §8. * * PHASE 2. This file exists now so the enqueue cascade in inc/enqueue.php has a * real dependency to chain (an absent file would break the chain silently — see * eng_registered_style_deps). * * Scope: single product (§6.9), thank-you (§6.12), account and emails. Cart and * checkout are BLOCK-rendered on this site and are handled in * 45-woocommerce-blocks.css — see docs/DECISIONS.md #4. */ /* §3.1 — map Woo's own buttons onto the three variants so commerce surfaces inherit the design without per-template markup changes. */ .woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button, .woocommerce .single_add_to_cart_button, .woocommerce .checkout-button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:600; padding:10px 18px; background:var(--color-accent-600); color:#fff; border:1px solid var(--color-accent-600); transition:background-color .15s ease,color .15s ease,border-color .15s ease; } .woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce .checkout-button:hover{ background:var(--color-accent-800); color:#fff; border-color:var(--color-accent-800); } /* §3.4 — Woo tables take the same treatment as .eng-table: themed header row, hairline rules, no zebra fill. */ .woocommerce table.shop_table{ border-collapse:collapse; border:0; } .woocommerce table.shop_table th{ font-family:var(--font-heading); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-700); border-bottom:1px solid var(--color-text); } .woocommerce table.shop_table td{ border-bottom:1px solid var(--color-divider); } /* §3.4 — checkout and account fields match the theme's own inputs. */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea{ border:1px solid var(--color-divider); background:var(--color-bg); color:var(--color-text); padding:9px 11px; } /* ========================================================================== Single product — override the previous design's button colour. The add-to-cart button was still rendering the old brand coral (#CC4344) with near-white text, measured at 4.43:1 — a WCAG AA failure AND a §12 violation, since the design permits exactly one accent and the primary button is the only filled object. The colour comes from GP's WooCommerce dynamic CSS, which is emitted inline in and therefore beats a plain class selector in the cascade. Element-qualified selectors plus !important are what it takes to win against inline dynamic CSS. White on accent-600 measures 4.93:1, and 9.24:1 on hover. ========================================================================== */ .woocommerce button.single_add_to_cart_button, .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce input.button.alt, button.single_add_to_cart_button.button.alt{ background-color:var(--color-accent-600) !important; color:#fff !important; border:1px solid var(--color-accent-600) !important; border-radius:0 !important; } .woocommerce button.single_add_to_cart_button:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover, .woocommerce input.button.alt:hover, button.single_add_to_cart_button.button.alt:hover{ background-color:var(--color-accent-800) !important; color:#fff !important; border-color:var(--color-accent-800) !important; } /* ========================================================================== §6.9 Tour detail — kicker, tag row, timeline, inclusions ========================================================================== */ .eng-product__kicker{ margin-bottom:var(--space-2); } .eng-product__tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-2) 0 var(--space-3); } .eng-product__detail{ margin-top:var(--space-8); } .eng-product__h2{ font-size:var(--type-h2-section); border-top:2px solid var(--color-text); padding-top:var(--space-3); margin:0 0 var(--space-4); } /* Time on the left, stop and description on the right, hairline between rows. */ .eng-timeline{ display:grid; } .eng-timeline__row{ display:grid; grid-template-columns:88px 1fr; gap:var(--space-4); padding:var(--space-3) 0; border-bottom:1px solid var(--color-divider); } .eng-timeline__row:last-child{ border-bottom:0; } .eng-timeline__time{ font-family:var(--font-heading); font-weight:600; font-size:14px; letter-spacing:.06em; color:var(--color-accent-700); } .eng-timeline__stop{ font-size:17px; margin-bottom:2px; } .eng-inclusions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-6); margin-top:var(--space-6); border-top:1px solid var(--color-divider); padding-top:var(--space-4); } .eng-inclusions__list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px; } .eng-inclusions__list li{ padding-left:18px; position:relative; } /* A hairline dash, not a bullet — the design has no filled marks outside the registration corners and the primary button. */ .eng-inclusions__list li::before{ content:""; position:absolute; left:0; top:.7em; width:10px; height:1px; background:var(--color-accent-600); } @media (max-width:767px){ .eng-timeline__row{ grid-template-columns:64px 1fr; gap:var(--space-3); } } /* ========================================================================== Account — /my-account/ login and registration (behaviour: inc/account.php) WooCommerce and Dokan both ship opinionated styling for this page: rounded inputs, filled panels, their own button colours. It is the one place a traveller creates an account, so it has to look like the rest of the site. Dokan's vendor registration fields are removed in PHP; what remains here is WooCommerce's own login and register pair. ========================================================================== */ .eng-account .woocommerce{ margin-top:var(--space-6); } /* Login and Register side by side on desktop, stacked on narrow screens. Woo emits .u-columns > .col-1 (login) and .col-2 (register). */ .eng-account .u-columns{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-6); align-items:start; } /* * Kill Woo's clearfix, or it eats the first grid cell. * * `.col2-set` is float-based, so WooCommerce gives it the usual * `::before/::after { content:" "; display:table; }` clearfix. Harmless for floats — * but a generated pseudo-element IS A GRID ITEM once the parent becomes a grid. The * ::before therefore took row 1 / column 1, which pushed Login into column 2 and * Register onto row 1 of the next line, and the two panels rendered staggered * diagonally down the page rather than side by side. * * The grid needs no clearing, so the cleanest fix is to stop generating them at all. */ .eng-account .u-columns::before, .eng-account .u-columns::after{ content:none; } .eng-account .u-columns > .col-1, .eng-account .u-columns > .col-2{ width:auto; /* Woo sets explicit percentage widths for its float layout */ float:none; min-width:0; border:1px solid var(--color-divider); padding:var(--space-4); } .eng-account .u-columns h2{ font-family:var(--font-heading); font-size:22px; margin:0 0 var(--space-3); padding-bottom:var(--space-2); border-bottom:2px solid var(--color-text); } /* --- fields --------------------------------------------------------------- */ .eng-account .woocommerce-form-row{ margin-bottom:var(--space-3); } .eng-account .woocommerce-Input, .eng-account input[type="text"], .eng-account input[type="email"], .eng-account input[type="password"], .eng-account input[type="tel"], .eng-account select, .eng-account textarea{ width:100%; border-radius:0; border:1px solid var(--color-divider); background:transparent; padding:12px var(--space-3); font-family:var(--font-body); font-size:15px; color:var(--color-text); min-height:44px; /* §9 hit target */ box-shadow:none; } .eng-account input:focus, .eng-account select:focus, .eng-account textarea:focus{ border-color:var(--color-accent-600); outline:2px solid var(--color-accent-600); outline-offset:1px; } .eng-account label{ display:block; font-size:14px; font-weight:600; margin-bottom:4px; } /* The "Remember me" and consent rows are checkbox + text on one line, so they must not inherit the block label above. */ .eng-account .woocommerce-form-login__rememberme, .eng-account .woocommerce-form__label-for-checkbox{ display:flex; align-items:center; gap:var(--space-2); font-weight:400; } .eng-account .woocommerce-form__label-for-checkbox input, .eng-account .woocommerce-form-login__rememberme input{ width:auto; min-height:0; } /* --- buttons -------------------------------------------------------------- */ .eng-account button[type="submit"], .eng-account .woocommerce-Button, .eng-account .woocommerce-button{ border-radius:0; background:var(--color-accent-600); color:#fff; border:1px solid var(--color-accent-600); font-family:var(--font-body); font-weight:600; font-size:15px; padding:12px 22px; min-height:44px; box-shadow:none; } .eng-account button[type="submit"]:hover, .eng-account .woocommerce-Button:hover, .eng-account .woocommerce-button:hover{ background:var(--color-accent-800); border-color:var(--color-accent-800); color:#fff; } .eng-account .woocommerce-LostPassword{ margin-top:var(--space-3); font-size:14px; } /* --- the merchant signpost ------------------------------------------------ */ /* Printed by eng_account_provider_signpost() where Dokan's vendor radio used to be. */ .eng-account__signpost{ margin:var(--space-4) 0 0; padding-top:var(--space-3); border-top:1px solid var(--color-divider); font-size:14px; color:var(--color-muted); } .eng-account__signpost a{ font-weight:600; } /* --- logged-in account view ----------------------------------------------- */ .eng-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; } .eng-account .woocommerce-MyAccount-navigation li a{ display:block; padding:10px var(--space-3); border:1px solid var(--color-divider); text-decoration:none; color:var(--color-accent-800); min-height:44px; } .eng-account .woocommerce-MyAccount-navigation li.is-active a, .eng-account .woocommerce-MyAccount-navigation li a:hover{ background:var(--color-accent-100); border-color:var(--color-accent-600); color:var(--color-accent-900); } /* Woo's notices carry their own colour scheme; square them and use the palette. */ .eng-account .woocommerce-error, .eng-account .woocommerce-message, .eng-account .woocommerce-info{ border-radius:0; border:1px solid var(--color-divider); border-left:3px solid var(--color-accent-600); background:var(--color-surface); color:var(--color-text); box-shadow:none; } @media (max-width:767px){ .eng-account .u-columns{ grid-template-columns:1fr; gap:var(--space-4); } } /* ========================================================================== "Leave a review" — thank-you page and My Account order view. Task 7, point 4. Rendered by eng_render_review_links() in inc/woocommerce.php, from a single hook (eng_order_review_links on woocommerce_order_details_after_order_table) that covers BOTH the thank-you page and My Account's order view. It was briefly two hooks, which rendered the panel twice on the thank-you page — see that function's docblock. ========================================================================== */ /* No border/padding of its own: the heading inside is .eng-product__h2, which already draws the top hairline this section needs — adding a second one here would double it. */ .eng-review-cta{ margin-top:var(--space-6); } .eng-review-links{ list-style:none; margin:var(--space-3) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-2); } /* Element-qualified (a.eng-review-link, not .eng-review-link): GeneratePress emits `.inside-article a { color: … }` at 0-1-1, which otherwise wins over a bare class here and has already caused dark-on-dark link defects on this project. */ a.eng-review-link{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; /* §9 hit target */ padding:10px 18px; border-radius:0; font-family:var(--font-body); font-weight:600; font-size:14px; text-decoration:none; background:transparent; color:var(--color-accent-800); border:1px solid var(--color-accent-400); } a.eng-review-link:hover{ background:var(--color-accent-100); color:var(--color-accent-900); border-color:var(--color-accent-600); } /* ========================================================================== WooCommerce breadcrumb Woo ships its breadcrumb links at #767676, which measures 4.14:1 on the cream ground — under the 4.5:1 floor. It is not a class this theme had ever styled, so it inherited Woo's grey on every product and archive page. ========================================================================== */ .woocommerce-breadcrumb{ font-size:13px; color:var(--color-muted); margin-bottom:var(--space-4); } /* Woo's own rule is `.woocommerce:where(body:not(…)) .woocommerce-breadcrumb a` — :where() contributes nothing, but the two classes plus the type selector still make it 0-2-1. A bare `.woocommerce-breadcrumb a` is 0-1-1 and loses. Matching its specificity is enough, because this stylesheet loads after the plugin's. */ .woocommerce .woocommerce-breadcrumb a, nav.woocommerce-breadcrumb a{ color:var(--color-accent-800); text-decoration:none; } .woocommerce .woocommerce-breadcrumb a:hover, nav.woocommerce-breadcrumb a:hover{ color:var(--color-accent-900); text-decoration:underline; } /* * Planner booking (2026-09-01) — the route back to /plan/ from the cart. * inc/plan-cart.php renders this hidden; eng-app.js reveals it only when a plan * exists in this browser, so a cached cart page can never pitch a planner the * visitor does not have. The accent border says "yours", the secondary button * keeps checkout as the page's one primary action. */ .eng-cart-plan{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-4); border:1px solid var(--color-accent-400); background:var(--color-accent-100); margin:0 0 var(--space-4); } .eng-cart-plan__lead{ margin:0; color:var(--color-text); } /* a.-qualified: GeneratePress's `.inside-article a` (0-1-1) beats a bare class. The shared .eng-btn--secondary rules carry the palette; this holds the 44px floor. */ a.eng-cart-plan__link{ min-height:44px; }