/* WooCommerce pages in the new look: product, shop, cart, checkout, account.
Colours come from the tokens in base.css, so both modes work. */
#primary{max-width:var(--wrap);margin:0 auto;padding:34px clamp(18px,4vw,40px) 0}
.woocommerce div.product .product_title{font-size:clamp(30px,3.6vw,48px);font-weight:900}
.woocommerce div.product div.images img{border:var(--edge-w) solid var(--edge);border-radius:var(--r)}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-family:var(--display);font-weight:900;font-size:30px}
.woocommerce ul.products li.product,.wc-block-grid__product{border:var(--edge-w) solid var(--edge)!important}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--display);font-weight:800;font-size:19px}
.woocommerce ul.products li.product .price{color:var(--ink)!important;font-weight:700}
.wc-block-components-button:not(.is-link){background:var(--ink)!important;color:var(--page)!important;border:var(--edge-w) solid var(--ink)!important;border-radius:10px!important;font-family:var(--display);font-weight:800}
.wc-block-components-button:not(.is-link):hover{background:var(--act-hover)!important;color:var(--act-ink)!important}
.wp-block-woocommerce-checkout,.wp-block-woocommerce-cart{color:var(--ink)}
.wc-block-components-sidebar,.wc-block-components-totals-item,.wc-block-components-order-summary{color:var(--ink)}
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0}
.woocommerce-MyAccount-navigation a{display:block;padding:9px 0;font-weight:600}
.woocommerce table.shop_table{border:var(--edge-w) solid var(--edge);border-radius:12px;background:var(--panel)}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:var(--line)}
/* Hide the block-checkout express-payment section: PPCP 4.0.4's express
card-button approves in the popup but never fills/submits the form below,
stranding the buyer (observed 2026-06-10). Form-first flow only until the
express block is removed from the page content itself. */
.wc-block-components-express-payment--checkout,
.wc-block-components-express-payment-continue-rule--checkout{display:none!important}
/* Product-page polish (single product templates fall back to default Woo styles) */
.woocommerce div.product .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce input.button,
.wp-block-button__link, .single_add_to_cart_button{
background:var(--ink)!important; color:var(--page)!important; border:var(--edge-w) solid var(--ink)!important;
border-radius:10px!important; font-family:var(--display); font-weight:800!important; font-stretch:110%; text-transform:none;
}
.woocommerce div.product .button:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .single_add_to_cart_button:hover{
background:var(--act-hover)!important; color:var(--act-ink)!important;
}
.woocommerce-message, .woocommerce-info, .woocommerce-error{
background:var(--panel)!important; border-top-color:var(--act)!important; color:var(--ink)!important;
}
.woocommerce-message a.button, .woocommerce-info a.button{
background:transparent!important; color:var(--ink)!important; border:0!important; text-decoration:underline; font-weight:700!important;
}
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--ink)!important; }
.woocommerce .quantity .qty, .woocommerce input[type=number], input.woonp-input,
.woonp .woonp-input{
background:var(--field)!important; border:1px solid var(--ink-3)!important;
color:var(--ink)!important; border-radius:6px!important;
}
.woocommerce div.product .product_meta{ color:var(--ink-3); }
/* Product page: clickable-looking links, branded tabs, tidy quantity, equal related cards */
.woocommerce div.product .entry-summary a:not(.button),
.woocommerce div.product .woocommerce-Tabs-panel a:not(.button){
color:var(--ink)!important; text-decoration:underline!important; text-underline-offset:3px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{
border-bottom:1px solid var(--line)!important; padding:0!important; margin:0 0 18px!important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
background:transparent!important; border:0!important; border-radius:0!important; margin:0 18px 0 0!important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none!important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ color:var(--ink-3)!important; font-weight:600!important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ border-bottom:2px solid var(--act)!important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--ink)!important; }
.woocommerce .quantity .qty{ height:44px; width:74px; text-align:center; }
.woocommerce ul.products{
display:grid!important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:22px;
}
.woocommerce ul.products li.product{
width:auto!important; margin:0!important; display:flex; flex-direction:column;
background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px;
}
.woocommerce ul.products li.product img{ border-radius:8px; }
.woocommerce ul.products li.product .button{ margin-top:auto; align-self:flex-start; }
/* Block checkout — dark skin (inputs were default white with invisible labels) */
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wp-block-woocommerce-checkout input[type="number"],
.wp-block-woocommerce-checkout input[type="url"],
.wp-block-woocommerce-checkout textarea,
.wp-block-woocommerce-checkout select{
background:var(--field)!important; color:var(--ink)!important;
border:1px solid var(--ink-3)!important; border-radius:8px!important;
}
.wp-block-woocommerce-checkout input:focus, .wp-block-woocommerce-checkout select:focus,
.wp-block-woocommerce-checkout textarea:focus{
border-color:var(--act)!important; box-shadow:0 0 0 1px var(--act)!important; outline:none!important;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-block-components-select label,
.wp-block-woocommerce-checkout .wc-block-components-combobox label,
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input label{
color:var(--ink-3)!important;
}
.wp-block-woocommerce-checkout .wc-block-components-select .wc-block-components-select__container{
background:var(--field)!important; border:1px solid var(--ink-3)!important; border-radius:8px!important;
}
.wp-block-woocommerce-checkout .wc-block-components-select__select{
background:transparent!important; color:var(--ink)!important;
}
.wp-block-woocommerce-checkout .wc-block-components-combobox .components-combobox-control__suggestions-container,
.wp-block-woocommerce-checkout .components-form-token-field__suggestions-list{
background:var(--panel)!important; color:var(--ink)!important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input{
background:var(--field)!important; border:1px solid var(--ink-3)!important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox__input:checked{
background:var(--act)!important; border-color:var(--act)!important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox svg{ fill:var(--act-ink)!important; }
/* Related products: horizontal carousel, consistent corners */
.related ul.products, .upsells ul.products{
display:flex!important; grid-template-columns:none!important;
overflow-x:auto; gap:20px; scroll-snap-type:x mandatory; padding:4px 2px 12px;
scrollbar-width:thin; scrollbar-color:var(--act) transparent;
}
.related ul.products li.product, .upsells ul.products li.product{
flex:0 0 290px!important; scroll-snap-align:start; min-width:0;
}
.woocommerce ul.products li.product, .woocommerce ul.products li.product img{ border-radius:12px; }
.woocommerce ul.products li.product .onsale{ display:none; }
.related > h2, .upsells > h2{ font-family:var(--display); font-weight:800; font-stretch:115%; }
/* Country/Province selects use wc-blockS-components (plural) classes — the white
container peeking around the dark select's corners was this. */
.wp-block-woocommerce-checkout .wc-blocks-components-select__container{
background:var(--field)!important; border:1px solid var(--ink-3)!important;
border-radius:8px!important;
}
.wp-block-woocommerce-checkout .wc-blocks-components-select__select{
background:transparent!important; color:var(--ink)!important; border:0!important;
}
.wp-block-woocommerce-checkout .wc-blocks-components-select__label{ color:var(--ink-3)!important; }
.wp-block-woocommerce-checkout .wc-blocks-components-select__expand{ fill:var(--ink)!important; }
/* Chrome/Edge autofill paints fields white-on-black-text — pin the dark theme */
.wp-block-woocommerce-checkout input:-webkit-autofill,
.wp-block-woocommerce-checkout input:-webkit-autofill:hover,
.wp-block-woocommerce-checkout input:-webkit-autofill:focus{
-webkit-box-shadow:0 0 0 1000px var(--field) inset!important;
box-shadow:0 0 0 1000px var(--field) inset!important;
-webkit-text-fill-color:var(--ink)!important;
caret-color:var(--ink)!important;
border:1px solid var(--ink-3)!important;
transition:background-color 9999s ease-out 0s!important;
}
/* Checkout terms: links must look like links */
.wp-block-woocommerce-checkout .wc-block-checkout__terms a{
color:var(--ink)!important; text-decoration:underline!important; text-underline-offset:3px;
}
/* ---- Default-Woo style sweep (search/shop/archive/cart chrome) ---- */
/* Breadcrumb trail */
.woocommerce-breadcrumb{color:var(--ink-3)!important;font-size:.82rem!important;margin:18px 0 6px!important}
.woocommerce-breadcrumb a{color:var(--ink-2)}
.woocommerce-breadcrumb a:hover{color:var(--ink);text-decoration:underline}
/* Archive/search page title */
h1.page-title,.woocommerce-products-header__title{
font-family:var(--display);font-weight:900;font-stretch:118%;letter-spacing:-.02em;
font-size:clamp(1.7rem,3.4vw,2.4rem);margin:10px 0 22px}
/* "Showing all N results" */
.woocommerce .woocommerce-result-count{color:var(--ink-3);font-size:.88rem;padding-top:8px}
/* Sort dropdown ("Relevance") + any stray native select on Woo pages */
.woocommerce .woocommerce-ordering select.orderby,
.woocommerce select{
appearance:none;-webkit-appearance:none;-moz-appearance:none;
background-color:var(--field);color:var(--ink);border:1px solid var(--ink-3);
border-radius:8px;padding:9px 36px 9px 13px;font-family:var(--sans);font-size:.9rem;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808086' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;background-size:13px}
.woocommerce .woocommerce-ordering select.orderby:focus,.woocommerce select:focus{
outline:none;border-color:var(--act);box-shadow:0 0 0 3px color-mix(in srgb,var(--act) 35%,transparent)}
.woocommerce .woocommerce-ordering{margin-bottom:18px}
/* Pagination */
.woocommerce nav.woocommerce-pagination ul{border:none;display:flex;gap:6px;justify-content:center;margin-top:26px}
.woocommerce nav.woocommerce-pagination ul li{border:none;overflow:visible}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
background:var(--panel);color:var(--ink-2);border:1px solid var(--line);
border-radius:8px;padding:9px 14px;line-height:1;font-family:var(--sans)}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
background:var(--act);color:var(--act-ink);border-color:var(--act)}
/* "No products found" + generic form inputs on classic Woo pages */
.woocommerce-no-products-found .woocommerce-info{border-top-color:var(--act)!important}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea{
background:var(--field);color:var(--ink);border:1px solid var(--ink-3);border-radius:8px;padding:10px 13px}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{outline:none;border-color:var(--act)}
.woocommerce form .form-row label{color:var(--ink-2)}
/* Block cart: dark skin to match the checkout (inputs, coupon, headings) */
.wp-block-woocommerce-cart input[type=text],
.wp-block-woocommerce-cart input[type=number],
.wp-block-woocommerce-cart .wc-block-components-text-input input{
background:var(--field)!important;color:var(--ink)!important;
border:1px solid var(--ink-3)!important;border-radius:8px!important}
.wp-block-woocommerce-cart .wc-block-components-text-input label{color:var(--ink-3)!important}
.wp-block-woocommerce-cart .wc-block-components-totals-coupon-link,
.wp-block-woocommerce-cart a:not(.wc-block-components-button),
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon-link{color:var(--ink)}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector{
background:var(--field);border:1px solid var(--ink-3);border-radius:8px}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector input,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector button{
background:transparent!important;color:var(--ink)!important;border:0!important}
.wp-block-woocommerce-cart h2{font-family:var(--display);font-weight:800;font-stretch:112%;letter-spacing:-.01em}
.wc-block-cart__empty-cart__title{font-family:var(--display);font-weight:900;font-stretch:118%}
/* Cross-sells / product grids rendered by blocks ("New in store") */
.wc-block-grid__product{
background:var(--panel);border:1px solid var(--line);border-radius:12px;
padding:16px;display:flex;flex-direction:column}
.wc-block-grid__product img{border-radius:8px}
.wc-block-grid__product-title{color:var(--ink);font-weight:600}
.wc-block-grid__product-price{color:var(--ink)}
.wc-block-grid__product-onsale{display:none}
/* Cart page: no PayPal express buttons — checkout is one click away, and the
smart button otherwise renders even on ZAR carts PayPal can't process. */
.wp-block-woocommerce-cart .wc-block-components-express-payment,
.wp-block-woocommerce-cart .wc-block-components-express-payment-continue-rule{display:none !important}
/* product page spacing (the reset zeroes every margin) */
.woocommerce div.product .woocommerce-product-details__short-description{margin:10px 0 18px;color:var(--ink-2)}
.woocommerce div.product form.cart{margin-bottom:18px}
.woocommerce div.product .product_meta{margin-top:16px}
.woocommerce div.product div.images .flex-control-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.woocommerce div.product div.images .flex-control-thumbs li{width:calc(25% - 8px);float:none}
.woocommerce-Tabs-panel p,.woocommerce-Tabs-panel li{margin-bottom:12px;color:var(--ink-2)}
.woocommerce-Tabs-panel h2,.woocommerce-Tabs-panel h3{margin:24px 0 10px}
.woocommerce-Tabs-panel>h2:first-child{display:none}
.woocommerce-Tabs-panel ul,.woocommerce-Tabs-panel ol{padding-left:22px}
.related,.upsells{margin-top:56px}
.related>h2,.upsells>h2{margin-bottom:18px}
/* A subscription cart pays through the express PayPal button, so show it there. */
.ms-has-sub .wc-block-components-express-payment--checkout,
.ms-has-sub .wc-block-components-express-payment-continue-rule--checkout{display:block!important}
/* Monthly checkout: password box under the email, PayPal locked until logged in (assets/checkout-account.js). */
.wc-block-components-express-payment--checkout.ms-locked{opacity:.35;pointer-events:none;filter:grayscale(1)}
.ms-pay-hint{margin:0 0 10px;font-size:.9rem;font-weight:600;text-align:center}
.ms-login{margin:12px 0 18px;padding:18px 18px 16px;border:var(--edge-w) solid var(--edge);border-radius:12px;background:var(--panel)}
.ms-login-title{font-weight:700;margin:0 0 4px}
.ms-login-sub{font-size:.92rem;opacity:.8;margin:0 0 12px}
.ms-login-err{font-size:.92rem;font-weight:600;color:var(--bad,#ff8a80);margin:0 0 10px}
.ms-login input[type=password]{width:100%;height:50px;padding:0 14px;border-radius:8px;border:1px solid var(--line-2,var(--ink-3,#888));background:var(--field,var(--bg-2,transparent));color:inherit;font:inherit}
.ms-login-row{display:flex;align-items:center;gap:18px;margin-top:12px;flex-wrap:wrap}
.ms-login-btn{height:46px;padding:0 24px;border:0;border-radius:9px;background:var(--act);color:var(--act-ink);font-weight:800;cursor:pointer}
.ms-login-lost{font-size:.92rem;text-decoration:underline;text-underline-offset:3px}
/* Monthly checkout: the PayPal and card buttons are the only way to pay, so they sit
right under "Payment options". Place order, the "only express" notice and the
"Express Checkout / Or continue below" labels do nothing for this order. */
.ms-has-sub form.wc-block-checkout__form{display:flex;flex-direction:column}
.ms-has-sub .wc-block-checkout__payment-method{order:1;margin-bottom:14px}
.ms-has-sub .wc-block-checkout__form>div:has(.wc-block-components-express-payment--checkout){order:2;margin:0 0 22px}
.ms-has-sub .wc-block-components-express-payment--checkout{margin:0!important}
.ms-has-sub .wc-block-checkout__terms{order:4}
.ms-has-sub .wc-block-checkout__order-notes{order:5}
.ms-has-sub .wc-block-checkout__only-express-payments-notice,
.ms-has-sub .wc-block-checkout__actions,
.ms-has-sub .wc-block-components-express-payment__title-container,
.ms-has-sub .wc-block-components-express-payment-continue-rule--checkout{display:none!important}
/* Sponsor checkout: the wall fields are for individuals, the tax number is for businesses. */
.ms-has-sponsor .wc-block-components-address-form__memory-store-supporters-wall-optin,
.ms-has-sponsor .wc-block-components-address-form__memory-store-supporters-wall-name,
body:not(.ms-has-sponsor) .wp-block-woocommerce-checkout-additional-information-block{display:none!important}
.ms-checkout-card{margin:0 0 28px}
.ms-cc-head{display:flex;align-items:baseline;justify-content:space-between;max-width:440px;margin-bottom:10px}
.ms-cc-head a{font-weight:600}
.ms-sponsor-next{margin:6px 0 34px;padding:24px 24px 8px;border:var(--edge-w,2px) solid var(--edge,var(--line));border-radius:var(--r,18px);background:var(--panel)}
.ms-sponsor-next h2{margin:0 0 14px}
.ms-card-edit{margin-bottom:36px}
.ms-card-state{color:var(--ink-2,inherit)}
.ms-card-form input[type=file]{display:block;margin-top:8px}
.wrap[style] article .ms-sponsor-next h2{margin-top:0}
.ms-card-form input[type=file]::file-selector-button{height:40px;margin-right:12px;padding:0 16px;border-radius:9px;border:var(--edge-w) solid var(--ink);background:var(--panel);color:var(--ink);font-weight:700;cursor:pointer}
/* Show-password eye: WooCommerce's own two icons, drawn as a mask so they take the
text colour in both themes, centred on the field instead of pinned to its top. */
.password-input{position:relative;display:block}
.password-input input{padding-right:46px!important}
.woocommerce form .show-password-input,.password-input .show-password-input{position:absolute;top:50%!important;right:6px!important;transform:translateY(-50%);width:36px;height:36px;padding:0;border:0;border-radius:8px;background:none;cursor:pointer;display:grid;place-items:center}
.password-input .show-password-input:hover{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.password-input .show-password-input::before{content:"";width:20px;height:20px;background:var(--ink-2)!important;-webkit-mask:url('data:image/svg+xml,') center/20px no-repeat;mask:url('data:image/svg+xml,') center/20px no-repeat}
.password-input .show-password-input.display-password::before{-webkit-mask:url('data:image/svg+xml,') center/20px no-repeat;mask:url('data:image/svg+xml,') center/20px no-repeat}