/* ========================================================================== WIENLION — WooCommerce skin Loaded only on shop / product / cart / checkout / account pages. Everything here is scoped under `.wl-woo` (added to in functions.php) so the storefront can never restyle the marketing pages. ========================================================================== */ /* -------------------------------------------------------------------------- 1. The header must occupy flow space here. `.wl-header` is `position:absolute` by design — it is meant to float over the dark hero, which carries its own top padding. A shop page has no hero, so the header sat ON TOP of the product title. Static puts it back in the flow. -------------------------------------------------------------------------- */ .wl-woo .wl-header { position: static; background: var(--wl-ink); } .wl-woo .wl-header__inner { border-bottom-color: rgb(231 217 196 / .2); } .wl-woo { background: var(--wl-paper); } .wl-woo .wp-block-post-content { color: var(--wl-navy); } /* -------------------------------------------------------------------------- 2. Typography — Woo ships its own h1/h2 sizing. -------------------------------------------------------------------------- */ .wl-woo .wp-block-post-content h1, .wl-woo .product_title, .wl-woo .wc-block-components-title { font-family: var(--wl-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: var(--wl-tr-head); line-height: var(--wl-lh-head); color: var(--wl-navy); } .wl-woo .product_title { font-size: var(--wl-fs-h1); margin: 0 0 var(--wl-s4); } /* `main` only: the site footer's

s (Train / Learn / Studio / Visit) are inside as well, and an unscoped rule blew them up to display size on every storefront page. / .wl-woo main h2 { font-size: var(--wl-fs-h2); font-family: var(--wl-font-display); text-transform: uppercase; color: var(--wl-navy); } .wl-woo .woocommerce-breadcrumb { font-size: var(--wl-fs-eyebrow); letter-spacing: var(--wl-tr-eyebrow); text-transform: uppercase; color: var(--wl-muted); margin-bottom: var(--wl-s6); } .wl-woo .woocommerce-breadcrumb a { color: var(--wl-muted); } .wl-woo .woocommerce-breadcrumb a:hover { color: var(--wl-gold); } / -------------------------------------------------------------------------- 3. Price — the number is the pitch, so it gets display type. -------------------------------------------------------------------------- / .wl-woo .price, .wl-woo .woocommerce-Price-amount { font-family: var(--wl-font-display); font-weight: 900; color: var(--wl-navy); letter-spacing: -.01em; } .wl-woo .summary .price { font-size: 2.25rem; margin: 0 0 var(--wl-s5); } .wl-woo .woocommerce-product-details__short-description { font-size: var(--wl-fs-lead); color: var(--wl-muted); max-width: 52ch; margin-bottom: var(--wl-s6); } / -------------------------------------------------------------------------- 4. Buttons — one gold CTA language across the whole storefront. ------------------------------------------------------------------------- MEASURED, not guessed: the rule that was actually winning is WooCommerce's own `.woocommerce button.button` — specificity (0,2,1), which beats a plain `.wl-woo .single_add_to_cart_button` (0,2,0) no matter what order they load in. `body` is the element carrying BOTH `.wl-woo` and `.woocommerce`, so `body.wl-woo.woocommerce button.button` lands at (0,3,1) and wins on merit rather than on !important. -------------------------------------------------------------------------- / body.wl-woo.woocommerce a.button, body.wl-woo.woocommerce button.button, body.wl-woo.woocommerce input.button, body.wl-woo.woocommerce button.single_add_to_cart_button, body.wl-woo.woocommerce a.checkout-button, body.wl-woo .wc-block-components-button, body.wl-woo .wp-element-button, body.wl-woo .wc-block-components-checkout-place-order-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--wl-font-body); font-weight: 600; font-size: .8125rem; letter-spacing: var(--wl-tr-btn); text-transform: uppercase; padding: 16px 28px; border-radius: var(--wl-radius); background-color: var(--wl-gold); color: var(--wl-ink); border: 1px solid var(--wl-gold); cursor: pointer; text-decoration: none; transition: background-color var(--wl-dur) var(--wl-ease), color var(--wl-dur) var(--wl-ease); } body.wl-woo.woocommerce a.button:hover, body.wl-woo.woocommerce button.button:hover, body.wl-woo.woocommerce input.button:hover, body.wl-woo.woocommerce button.single_add_to_cart_button:hover, body.wl-woo.woocommerce a.checkout-button:hover, body.wl-woo .wc-block-components-button:hover, body.wl-woo .wp-element-button:hover { background-color: var(--wl-gold-lt); border-color: var(--wl-gold-lt); color: var(--wl-ink); } body.wl-woo .wc-block-components-button__text { color: inherit; } body.wl-woo.woocommerce .button:focus-visible, body.wl-woo .wc-block-components-button:focus-visible { outline: 2px solid var(--wl-navy); outline-offset: 2px; } / -------------------------------------------------------------------------- 5. The booking form — this is the thing customers actually use. -------------------------------------------------------------------------- / .wl-woo form.cart { margin-top: var(--wl-s6); } .wl-woo .mbfw-date-picker-section { display: grid; gap: 8px; margin-bottom: var(--wl-s5); } .wl-woo .mbfw-date-picker-section label { font-size: var(--wl-fs-eyebrow); letter-spacing: var(--wl-tr-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--wl-muted); } .wl-woo #wps_booking_single_calendar_form { width: 100%; max-width: 340px; padding: 14px 16px; font-size: 1rem; font-family: var(--wl-font-body); color: var(--wl-navy); background: var(--wl-white); border: 1px solid var(--wl-sand-dk); border-radius: var(--wl-radius); cursor: pointer; } .wl-woo #wps_booking_single_calendar_form:focus-visible { outline: 2px solid var(--wl-gold); outline-offset: 2px; } / the plugin's own cost table / .wl-woo .mwb-mbfw-total-area { margin: var(--wl-s5) 0; } .wl-woo .mwb-mbfw-total-area table { width: 100%; max-width: 380px; border-collapse: collapse; } .wl-woo .mwb-mbfw-total-area td, .wl-woo .mwb-mbfw-total-area th { padding: 10px 0; text-align: left; border-bottom: 1px solid var(--wl-sand-dk); font-size: var(--wl-fs-small); } .wl-woo .mwb-bfwp-booking-quantity__public-show { display: none; } / always 1 — noise / / flatpickr, in WIENLION colours / .flatpickr-calendar { border-radius: var(--wl-radius); box-shadow: 0 18px 48px rgb(8 25 43 / .22); } .flatpickr-months, .flatpickr-weekdays { background: var(--wl-navy); } .flatpickr-month, .flatpickr-current-month, .flatpickr-weekday { color: var(--wl-sand) !important; fill: var(--wl-sand); } .flatpickr-day.flatpickr-disabled { color: rgb(90 107 123 / .35); } .flatpickr-day.wps-available-day { font-weight: 600; color: var(--wl-navy); } / The booking plugin hard-codes `#22c4ff !important` on both of these, so this is the one place !important is earned rather than lazy — there is no specificity that beats an !important declaration. / .flatpickr-day.selected, .flatpickr-day.custom-selected { background-color: var(--wl-gold) !important; border-color: var(--wl-gold) !important; color: var(--wl-ink) !important; } .flatpickr-day:hover:not(.flatpickr-disabled) { background: var(--wl-sand); } / the slot buttons the plugin appends under the calendar / .wps_cal_timeslot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; border-top: 1px solid var(--wl-sand-dk); background: var(--wl-paper); } .wps_cal_timeslot button { font-family: var(--wl-font-body); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; padding: 10px 14px; cursor: pointer; color: var(--wl-navy); background: var(--wl-white); border: 1px solid var(--wl-sand-dk); border-radius: var(--wl-radius); transition: background var(--wl-dur) var(--wl-ease), color var(--wl-dur) var(--wl-ease); } .wps_cal_timeslot button:hover { background: var(--wl-navy); color: var(--wl-sand); border-color: var(--wl-navy); } / The plugin adds NO class to the chosen slot (measured: className stays ""), so focus is the only handle the chosen slot actually exposes. / .wps_cal_timeslot button:focus, .wps_cal_timeslot button:active, .wps_cal_timeslot button.wps_selected_slot { background: var(--wl-gold); border-color: var(--wl-gold); color: var(--wl-ink); outline: none; } .wps_cal_timeslot button:focus-visible { outline: 2px solid var(--wl-navy); outline-offset: 2px; } .wps_cal_timeslot button:disabled, .wps_cal_timeslot button.wps_slot_disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; } / -------------------------------------------------------------------------- 6. Shop grid -------------------------------------------------------------------------- / .wl-woo ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wl-s5); list-style: none; margin: var(--wl-s7) 0 0; padding: 0; } @media (max-width: 900px) { .wl-woo ul.products { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wl-woo ul.products { grid-template-columns: 1fr; } } / MEASURED: Woo's own `.woocommerce ul.products li.product` (0,3,2) keeps `float:left; width:30.75%`. Inside a grid track that percentage resolves against the TRACK, not the row — the cards computed to 85px wide and the text spilled out of them. The float and the width both have to be released, at a specificity that actually beats Woo's: body carries .wl-woo AND .woocommerce, so this lands at (0,4,3). / body.wl-woo.woocommerce ul.products li.product { background: var(--wl-white); border: 1px solid var(--wl-sand-dk); border-top: 3px solid var(--wl-gold); border-radius: var(--wl-radius); padding: var(--wl-s6); display: flex; flex-direction: column; gap: 10px; text-align: left; width: auto; float: none; margin: 0; } body.wl-woo.woocommerce ul.products li.product img { display: none; } / placeholders only until real photography lands / body.wl-woo.woocommerce ul.products li.product .woocommerce-loop-producttitle { font-family: var(--wl-font-display); font-weight: 900; text-transform: uppercase; font-size: var(--wl-fs-h3); color: var(--wl-navy); padding: 0; margin: 0; } body.wl-woo.woocommerce ul.products li.product .price { font-size: 1.5rem; } body.wl-woo.woocommerce ul.products li.product .button { margin-top: auto; align-self: flex-start; } .wl-woo .woocommerce-result-count, .wl-woo .woocommerce-ordering { display: none; } / -------------------------------------------------------------------------- 7. Single-product layout + tabs -------------------------------------------------------------------------- / .wl-woo div.product { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--wl-s8); align-items: start; } @media (max-width: 900px) { .wl-woo div.product { grid-template-columns: 1fr; } } / The product photography is transparent cut-outs, and everywhere else on the site they sit on a navy field under a gold rule (.wl-photo). Woo's gallery defaults to a white box, which left the shop looking like a different site. Match the frame, and let it fill its grid column instead of floating at 48%. / body.wl-woo.woocommerce div.product .woocommerce-product-gallery { position: relative; width: 100%; float: none; margin: 0; background: var(--wl-navy-dk); border: 0; aspect-ratio: 4 / 5; overflow: hidden; } body.wl-woo.woocommerce div.product .woocommerce-product-gallery::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--wl-gold); z-index: 2; } body.wl-woo.woocommerce div.product .woocommerce-product-gallerywrapper, body.wl-woo.woocommerce div.product .woocommerce-product-galleryimage { height: 100%; margin: 0; } body.wl-woo.woocommerce div.product .woocommerce-product-gallery img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } / the zoom magnifier sits on a dark field now / body.wl-woo.woocommerce div.product .woocommerce-product-gallerytrigger { display: none; } .wl-woo div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: var(--wl-s8); } .wl-woo .woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: 4px; margin: 0 0 -1px; padding: 0; } .wl-woo .woocommerce-tabs ul.tabs li { background: transparent; border: 1px solid var(--wl-sand-dk); border-bottom: none; border-radius: var(--wl-radius) var(--wl-radius) 0 0; } .wl-woo .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 20px; font-size: var(--wl-fs-eyebrow); letter-spacing: var(--wl-tr-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--wl-muted); text-decoration: none; } .wl-woo .woocommerce-tabs ul.tabs li.active { background: var(--wl-white); border-top: 3px solid var(--wl-gold); } .wl-woo .woocommerce-tabs ul.tabs li.active a { color: var(--wl-navy); } .wl-woo .woocommerce-tabs .panel { background: var(--wl-white); border: 1px solid var(--wl-sand-dk); padding: var(--wl-s7); margin: 0; } .wl-woo .woocommerce-tabs .panel > h2 { display: none; } / the tab already says "Description" / .wl-woo .product_meta { font-size: var(--wl-fs-small); color: var(--wl-muted); margin-top: var(--wl-s5); } / -------------------------------------------------------------------------- 8. Cart / checkout / account — block-based in WooCommerce 11. -------------------------------------------------------------------------- */ .wl-woo .wc-block-components-product-name, .wl-woo .wc-block-cart-itemwrap a { font-weight: 600; color: var(--wl-navy); text-decoration: none; } .wl-woo .wc-block-components-totals-itemvalue, .wl-woo .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--wl-font-display); font-weight: 900; color: var(--wl-navy); } .wl-woo .wc-block-components-sidebar, .wl-woo .wp-block-woocommerce-cart-order-summary-block { background: var(--wl-white); border: 1px solid var(--wl-sand-dk); border-top: 3px solid var(--wl-gold); padding: var(--wl-s6); } .wl-woo .wc-block-components-text-input input, .wl-woo .wc-block-components-textarea, .wl-woo input[type=text], .wl-woo input[type=email], .wl-woo input[type=tel], .wl-woo select, .wl-woo textarea { border: 1px solid var(--wl-sand-dk); border-radius: var(--wl-radius); font-family: var(--wl-font-body); color: var(--wl-navy); background: var(--wl-white); } .wl-woo .wc-block-components-text-input input:focus, .wl-woo input:focus, .wl-woo select:focus, .wl-woo textarea:focus { outline: 2px solid var(--wl-gold); outline-offset: 1px; } .wl-woo table.shop_table, .wl-woo .woocommerce-order-details table { width: 100%; border-collapse: collapse; background: var(--wl-white); } .wl-woo table.shop_table th, .wl-woo table.shop_table td, .wl-woo .woocommerce-order-details th, .wl-woo .woocommerce-order-details td { padding: 14px 16px; border-bottom: 1px solid var(--wl-sand-dk); text-align: left; } .wl-woo .woocommerce-message, .wl-woo .woocommerce-info, .wl-woo .wc-block-components-notice-banner { border-left: 3px solid var(--wl-gold); background: var(--wl-white); border-radius: var(--wl-radius); color: var(--wl-navy); } .wl-woo .woocommerce-error, .wl-woo .wc-block-components-notice-banner.is-error { border-left: 3px solid var(--wl-crimson); background: var(--wl-white); color: var(--wl-navy); }