/*
* WooCommerce essentials.
*
* The slice of the WooCommerce fork that pages outside the shop actually
* need: the product loop card, and the buttons and quantity controls the
* mini cart borrows. The mini cart sits in the header on every page, which
* is why the full fork used to load site-wide.
*
* Copied as whole sections from woocommerce-custom.css and
* woocommerce-layout-custom.css rather than rule by rule, so the state
* variants (.loading, .added, .added_to_cart) stay with the rules they
* modify. Keep it that way when updating: re-copy the section, do not
* cherry-pick selectors.
*
* Loaded instead of the full fork only where includes/core.php says so.
* Everything else still gets the fork.
*/
/* --- WooCommerce colour variables (woocommerce-custom.css 12-27) --- */
:root {
--woocommerce: #7F54B3;
--wc-green: #7ad03a;
--wc-red: #a00;
--wc-orange: #ffba00;
--wc-blue: #2ea2cc;
--wc-primary: #7F54B3;
--wc-primary-text: white;
--wc-secondary: #e9e6ed;
--wc-secondary-text: #515151;
--wc-highlight: #b3af54;
--wc-highligh-text: white;
--wc-content-bg: #fff;
--wc-subtext: #767676;
}
/* --- Animations, icon font, generic helpers (woocommerce-custom.css 28-78) --- */
/* ========================================
Animations and icon fonts
======================================== */
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@keyframes bc-atc-spin {
to {
transform: rotate(1turn);
}
}
@font-face {
font-family: star;
src: url(../../../fonts/WooCommerce.woff2) format("woff2"), url(../../../fonts/WooCommerce.woff) format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: WooCommerce;
src: url(../../../fonts/WooCommerce.woff2) format("woff2"), url(../../../fonts/WooCommerce.woff) format("woff");
font-weight: 400;
font-style: normal;
}
/* ========================================
Generic helpers
======================================== */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.admin-bar p.demo_store {
top: 32px;
}
.clear {
clear: both;
}
/* --- Notices and wrappers (woocommerce-custom.css 79-204) --- */
/* ========================================
Notices and wrappers
======================================== */
.site-main>.product,
.woocommerce-notices-wrapper {
/* width: 100%;
max-width: var(--width-content);
margin-left: auto;
margin-right: auto; */
}
.woocommerce-store-notice,
p.demo_store {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
width: 100%;
font-size: 1em;
padding: 1em 0;
text-align: center;
background-color: #7f54b3;
color: #fff;
z-index: var(--z-notice);
box-shadow: 0 1px 1em rgba(0, 0, 0, 1);
display: none;
}
.woocommerce-store-notice a,
p.demo_store a {
color: #fff;
text-decoration: underline;
}
/* Grid, not flex: the message is bare text, and as an anonymous flex item it
would break onto its own line and leave an in-flow icon alone on the first.
The button drops under the text below --bp-m, not when it runs out of room. */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
margin-bottom: var(--space-8);
position: relative;
background-color: #fff;
color: var(--color-text);
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
list-style: none outside;
width: auto;
word-wrap: break-word;
font-size: var(--text-body-s);
line-height: var(--leading-short);
}
/* Pinned to row 1 so it sits beside the first line (or first
). No
clearfix pseudo-elements here: they would be empty grid items, not no-ops. */
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
font-family: WooCommerce;
content: "\e028";
grid-column: 1;
grid-row: 1;
width: 20px;
height: 20px;
line-height: 20px;
}
/* Sized like .btn--small. Column 3 is implicit (no empty column without a
button); the explicit row keeps the bare text in column 2. The .woocommerce
prefix beats the base .button rule on specificity, not load order; 16px is
literal because an em token would compound with the notice's own em size. */
.woocommerce .woocommerce-error .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-message .button {
grid-column: 3;
grid-row: 1;
justify-self: end;
--bc-btn-height: 2.5rem; /* 40px, matches .btn--small */
--bc-btn-min-width: 0;
--bc-btn-pad-inline: var(--space-4); /* 16px */
--bc-btn-pad-block: var(--space-2); /* 8px */
font-size: 16px;
}
@media (max-width: 767px) { /* --bp-m */
.woocommerce .woocommerce-error .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-message .button {
grid-column: 1 / -1;
grid-row: 2;
}
}
/* An error list renders one