* nor min-height are affected by the show()/hide() toggle. Between
* those two rules the element's rendered height never changes again
* once the page has painted -- `visibility` (not `display`) is what
* actually hides it when there's nothing to show, precisely because
* unlike `display` it doesn't collapse the reserved space.
*
* This does not additionally reserve space for WooCommerce's separate
* `.woocommerce-password-hint` text -- that element is fully removed
* and re-inserted (not shown/hidden) on every keystroke, so a fixed
* placeholder for it can't be kept in the DOM the same way a shown/
* hidden node can, and reserving its worst-case height up front would
* leave a permanent, noticeably empty gap under the password field
* before anyone has typed anything. That narrows, but does not entirely
* close, the same class of shift for the rarer case of a weak-password
* hint appearing or disappearing on the exact keystroke/blur that a
* mousedown on another control also lands on -- a materially smaller
* window than the meter's guaranteed-every-time first insertion this
* fix closes.
* ------------------------------------------------------------------ */
.pkr-password-field {
display: block;
}
.woocommerce-password-strength {
display: block !important;
visibility: hidden;
min-height: 32px;
margin-top: 6px;
}
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad,
.woocommerce-password-strength.good,
.woocommerce-password-strength.strong {
visibility: visible;
}
.pkr-form-panel {
max-width: 480px;
}
.pkr-panel {
border: 1px solid var(--pkr-border);
background: var(--pkr-panel);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-4);
}
.pkr-panel-list {
list-style: none;
color: var(--pkr-muted);
}
.pkr-panel-list li {
padding-left: 1.5em;
position: relative;
margin-bottom: var(--pkr-space-1);
}
.pkr-panel-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.5em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pkr-gold);
}
.pkr-split {
display: grid;
grid-template-columns: 1fr;
gap: var(--pkr-space-4);
align-items: start;
}
/* WooCommerce core ships `.woocommerce form .form-row .required { color:
var(--wc-red) }` (#a00, ~2.55:1 against this theme's dark backgrounds --
well under WCAG AA's 4.5:1 text minimum). That selector is three classes
deep (0,3,0 specificity), so a plain `.required` rule here would lose the
cascade even loading after it; match the same selector shape (plus a bare
`.required` fallback for any required marker rendered outside a WooCommerce
`.form-row`) so the override actually wins sitewide -- checkout, login/
register, my-account, and anywhere else WooCommerce renders one -- without
touching WooCommerce core files. */
.woocommerce form .form-row .required,
.required {
color: var(--pkr-error);
}
/* WooCommerce core's own live checkout field validation (assets/js/frontend/
checkout.js validate_field(), fires on blur/change for each required/
email/phone field) toggles `.woocommerce-invalid` on the `.form-row` and
sets `aria-invalid="true"` on the field, but the only visual cue that
ships with it is `border-color: var(--wc-red)` vs. the "valid" state's
`border-color: var(--wc-green)` -- indistinguishable for red-green
colorblind users, the most common form of color vision deficiency, and a
plain WCAG 1.4.1 (Use of Color) violation. WC core cannot be edited (see
project rules), so main.js's initCheckoutFieldErrors() observes the same
class WC already toggles and inserts a real text message (below), reusing
the aria-invalid/aria-describedby + visible-message convention the
contact/wholesale forms already use elsewhere on the site. This just
supplies the icon + text treatment for that inserted message so the cue
never depends on the border color alone. */
.pkr-checkout-field-error {
display: flex;
align-items: flex-start;
gap: 5px;
margin: 6px 0 0;
color: var(--pkr-error);
font-size: 0.78rem;
line-height: 1.4;
}
.pkr-checkout-field-error::before {
content: '!';
flex: none;
display: grid;
place-items: center;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--pkr-error);
color: var(--pkr-black);
font-size: 0.68rem;
font-weight: 700;
line-height: 1;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
/* Thicker border is a second, non-color-dependent cue on top of the
icon + text message: shape/weight changes read even in grayscale. */
border-width: 2px;
}
/* WooCommerce core also ships `.woocommerce form .form-row.woocommerce-
invalid label { color: var(--wc-red) }` (#a00) -- against this checkout
panel's #0a0a0a background that measures 2.55:1, below WCAG AA's 4.5:1,
and it fires at the worst possible moment: exactly while a shopper is
trying to read the label and correct the error (audit finding 3,
ACCESSIBILITY-AUDIT-2026-08-14.md). Match the same selector shape (no
`!important` in the core rule, so equal specificity + main.css's later
load order is enough) and swap in the theme's error token instead of
core's raw red: var(--pkr-error) (#d95c5c) on #0a0a0a measures 5.31:1,
comfortably passing AA while still reading clearly as an error state. */
.woocommerce form .form-row.woocommerce-invalid label {
color: var(--pkr-error);
}
/* ==========================================================================
6. Skip link & focus states
========================================================================== */
.pkr-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: var(--pkr-z-modal);
background: var(--pkr-gold);
color: var(--pkr-black);
padding: 12px 20px;
border-radius: 0 0 var(--pkr-radius-sm) 0;
font-weight: 700;
}
.pkr-skip-link:focus {
left: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: var(--pkr-focus-ring);
outline-offset: var(--pkr-focus-offset);
border-radius: var(--pkr-radius-sm);
}
/* ==========================================================================
7. Announcement bar
========================================================================== */
.pkr-announcement {
padding: 10px var(--pkr-gutter-mobile);
text-align: center;
background: #150f06;
color: var(--pkr-gold-light);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
gap: var(--pkr-space-1);
}
.pkr-crown-glyph svg {
width: 14px;
height: 14px;
color: var(--pkr-gold);
}
/* ==========================================================================
8. Header / nav / search panel
========================================================================== */
.pkr-header {
position: sticky;
top: 0;
z-index: var(--pkr-z-header);
background: rgba(9, 9, 9, 0.95);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--pkr-border);
}
html {
scroll-padding-top: 88px;
overflow-x: clip;
}
.pkr-header-inner {
min-height: 76px;
display: flex;
align-items: center;
gap: var(--pkr-space-3);
}
.pkr-brand {
display: flex;
align-items: center;
gap: 10px;
min-width: max-content;
}
.pkr-brand-text strong {
font-family: var(--pkr-font-display);
display: block;
color: var(--pkr-gold-light);
letter-spacing: 0.06em;
font-size: 1rem;
}
.pkr-brand-text small {
display: block;
color: var(--pkr-muted);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.pkr-crown {
color: var(--pkr-gold);
width: 30px;
height: 30px;
flex-shrink: 0;
}
.pkr-brand-mark {
/* Intentionally width-only + height:auto: the badge svg's viewBox
(0 0 100 158, a fixed ~0.633 ratio) drives the height, so there's a
single source of truth for proportions instead of hand-maintained
width+height pairs that can drift. The badge is a bordered rounded-
rectangle plaque (matching the bottle label construction: double
gold line frame, dark interior fill, crown/PK/divider/"Research
Labs" stacked inside) rather than the older open shield outline, so
it is taller relative to its width than the old 154x220 (0.7 ratio)
crest was. Rendered width is 29px (the value below was corrected
from an original 35px during a later design pass; that historical
35px no longer appears anywhere in this file, so this is the only
width declaration for the default header mark). Context-specific
variants override it deliberately: .pkr-brand-drawer .pkr-brand-mark
is 24px and .pkr-footer-reference-brand .pkr-brand-mark is 24px. */
display: inline-flex;
width: 29px;
color: var(--pkr-gold);
flex: 0 0 auto;
}
.pkr-brand-mark svg,
.pkr-brand-mark img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.pkr-crown svg {
width: 100%;
height: 100%;
}
.pkr-crown-lg {
width: 56px;
height: 56px;
}
.pkr-nav {
flex: 1;
display: none;
justify-content: center;
}
.pkr-menu {
display: flex;
list-style: none;
align-items: center;
gap: 36px;
}
.pkr-menu li {
position: relative;
}
.pkr-menu a {
position: relative;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pkr-muted);
padding: 6px 2px;
display: inline-block;
transition: color 0.18s ease;
}
.pkr-menu a::after {
content: '';
position: absolute;
left: 2px;
right: 2px;
bottom: -2px;
height: 1px;
background: var(--pkr-gold-light);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.2s ease;
}
.pkr-menu a:hover,
.pkr-menu a:focus-visible {
color: var(--pkr-cream);
}
.pkr-menu a:hover::after,
.pkr-menu a:focus-visible::after {
transform: scaleX(1);
}
.pkr-menu a:focus-visible {
outline: 1px solid var(--pkr-gold);
outline-offset: 4px;
}
.pkr-menu li.current-menu-item > a,
.pkr-menu li.current_page_item > a,
.pkr-menu li.current-menu-parent > a,
.pkr-menu li.current-menu-ancestor > a {
color: var(--pkr-gold-light);
}
.pkr-menu li.current-menu-item > a::after,
.pkr-menu li.current_page_item > a::after,
.pkr-menu li.current-menu-parent > a::after,
.pkr-menu li.current-menu-ancestor > a::after {
transform: scaleX(1);
background: var(--pkr-gold);
}
.pkr-actions {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.pkr-cart-link {
position: relative;
}
.pkr-cart-count {
position: absolute;
top: 2px;
right: 2px;
display: inline-grid;
place-items: center;
min-width: 16px;
height: 16px;
border-radius: 50%;
background: var(--pkr-gold);
color: var(--pkr-black);
font-size: 10px;
font-weight: 700;
padding: 0 3px;
}
.pkr-drawer-actions .pkr-cart-count {
position: static;
display: inline;
background: none;
color: inherit;
font-weight: 600;
}
/* Add-to-cart feedback: a brief pulse on the cart-count badge (toggled by
main.js's initCartFeedback() when WooCommerce's added_to_cart fires) plus
a gold-bordered toast (built entirely in JS, appended to the body) so
the confirmation is not only a small badge tucked in the header. */
@media (prefers-reduced-motion: no-preference) {
.pkr-cart-count.is-updated {
animation: pkrCartPulse 600ms ease;
}
}
@keyframes pkrCartPulse {
0% { transform: scale(1); }
35% { transform: scale(1.45); }
100% { transform: scale(1); }
}
.pkr-cart-toast {
position: fixed;
right: 20px;
bottom: 20px;
/* Needs to clear .pkr-consent-banner's ad-hoc z-index:9999 (see
inc/analytics.php) -- higher than --pkr-z-modal (the design-token
scale's top layer), so an explicit value is used here instead. */
z-index: 10000;
display: flex;
align-items: center;
gap: 10px;
max-width: min(360px, calc(100vw - 40px));
background: var(--pkr-panel);
border: 1px solid var(--pkr-gold);
border-radius: var(--pkr-radius-md);
box-shadow: var(--pkr-shadow-card);
padding: 14px 16px;
color: var(--pkr-cream);
font-size: 0.85rem;
line-height: 1.4;
opacity: 0;
transform: translateY(12px);
transition: opacity var(--pkr-transition-base), transform var(--pkr-transition-base);
pointer-events: none;
}
.pkr-cart-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
.pkr-cart-toast strong {
color: var(--pkr-gold-light);
}
@media (max-width: 767px) {
.pkr-cart-toast {
left: 16px;
right: 16px;
max-width: none;
bottom: 88px;
}
}
.pkr-menu-toggle {
display: flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px solid var(--pkr-border);
color: var(--pkr-cream);
border-radius: var(--pkr-radius-pill);
padding: 8px 14px;
font-size: 0.8125rem;
}
.pkr-menu-toggle svg {
width: 18px;
height: 18px;
}
.pkr-search-panel {
border-top: 1px solid var(--pkr-border);
background: var(--pkr-black);
padding: var(--pkr-space-2) 0;
}
.pkr-search-panel[hidden] {
display: none;
}
.pkr-search-form {
display: flex;
gap: var(--pkr-space-1);
align-items: center;
}
.pkr-search-form-inline {
max-width: 480px;
margin-top: var(--pkr-space-3);
}
.pkr-search-input {
flex: 1;
background: #141414;
border: 1px solid #3c3527;
color: var(--pkr-cream);
border-radius: var(--pkr-radius-pill);
padding: 10px 18px;
}
/* ==========================================================================
9. Off-canvas drawer
========================================================================== */
.pkr-drawer-overlay {
position: fixed;
inset: 0;
background: var(--pkr-overlay);
z-index: var(--pkr-z-overlay);
opacity: 0;
transition: opacity var(--pkr-transition-drawer);
}
.pkr-drawer-overlay[hidden] {
display: none;
}
.pkr-drawer-overlay.is-visible {
opacity: 1;
}
.pkr-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(340px, 86vw);
background: var(--pkr-panel);
border-left: 1px solid var(--pkr-border);
z-index: var(--pkr-z-drawer);
transform: translateX(100%);
transition: transform var(--pkr-transition-drawer);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.pkr-drawer.is-open {
transform: translateX(0);
}
.pkr-drawer[aria-hidden="true"] {
display: none;
}
.pkr-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--pkr-space-3);
border-bottom: 1px solid var(--pkr-border);
}
.pkr-brand-drawer .pkr-brand-mark {
width: 24px;
}
.pkr-drawer-body {
padding: var(--pkr-space-3);
}
.pkr-drawer-search {
margin-bottom: var(--pkr-space-3);
}
.pkr-drawer-search .pkr-search-input {
min-height: 44px;
}
.pkr-drawer-menu {
list-style: none;
}
.pkr-drawer-menu li {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pkr-drawer-menu a {
display: block;
padding: 14px 4px;
font-family: var(--pkr-font-display);
font-size: 1rem;
color: var(--pkr-cream);
}
.pkr-drawer-menu a:hover {
color: var(--pkr-gold-light);
}
.pkr-drawer-actions {
display: flex;
flex-direction: column;
gap: var(--pkr-space-2);
margin-top: var(--pkr-space-3);
}
/* ==========================================================================
10. Hero
========================================================================== */
/* `.pkr-hero` itself (this base rule) was consolidated from what used to
be six separate, overlapping `.pkr-hero { }` blocks scattered across
this file -- three prior patch attempts at a hero-cropping bug each
left an earlier version live instead of replacing it, so the browser
was silently unioning/overriding across all of them property by
property (go-live audit, Design/Brand Audit §1, P0; see git history
on this file for the full sequence). This is now the ONLY unconditional
`.pkr-hero` rule; `position`/`display`/`align-items`/`border-bottom`
below are the properties from the original version of this rule that
were never actually superseded by later patches (which only ever
touched min-height/padding-block/background/overflow -- see that
history for why, and the min-height/background comment further down
for the crop-fix reasoning specifically). Legitimate responsive
variants remain as separate blocks: `@media (min-width:1280px)`
immediately below (wide-desktop padding), `@media (max-width:767px)`
near the bottom of this file (mobile), and `@media
(orientation:landscape) and (max-height:500px)` (short landscape
phones). */
.pkr-hero {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
min-height: max(520px, 56.28vw);
padding-block: 54px;
overflow: hidden;
border-bottom: 1px solid var(--pkr-border);
background: #030303 url('../img/royal-hero-v4-optimized.webp') left top / contain no-repeat;
}
/* Wide-desktop padding increase. Must be declared AFTER the base rule
above (same specificity, so source order decides) -- it used to live
much further down the file, before the base rule's own unconditional
padding-block, which silently won the cascade at every width including
this one and defeated this override entirely (go-live audit,
Design/Brand Audit §1, P0). */
@media (min-width: 1280px) {
.pkr-hero {
padding-block: var(--pkr-space-12);
}
}
.pkr-hero-grid {
display: block;
}
.pkr-hero-copy {
max-width: 660px;
margin-left: clamp(180px, 22vw, 340px);
}
.pkr-hero-title {
font-size: clamp(3.25rem, 6vw, 6.25rem);
line-height: 0.96;
letter-spacing: -0.025em;
margin-bottom: var(--pkr-space-2);
max-width: 700px;
}
.pkr-hero-sub {
font-size: 1.25rem;
line-height: 1.55;
color: #ded9cf;
max-width: 470px;
}
.variations_form .variations {
width: 100%;
margin: var(--pkr-space-3) 0;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
.variations_form .variations th,
.variations_form .variations td {
box-sizing: border-box;
padding: 0;
text-align: left;
vertical-align: middle;
}
.variations_form .variations th {
width: 130px;
color: var(--pkr-gold-light);
font-family: var(--pkr-font-display);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.82rem;
line-height: 1.25;
white-space: normal;
padding-right: 8px;
}
.variations_form .variations select {
width: 100%;
margin-right: 0 !important;
min-height: 48px;
background: var(--pkr-panel);
border: 1px solid var(--pkr-border-strong);
border-radius: var(--pkr-radius-sm);
color: var(--pkr-cream);
padding: 10px 42px 10px 14px;
}
.variations_form .reset_variations {
display: inline-block;
margin-top: 8px;
color: var(--pkr-gold-light);
}
@media (max-width: 560px) {
.variations_form .variations,
.variations_form .variations tbody,
.variations_form .variations tr,
.variations_form .variations th,
.variations_form .variations td {
display: block;
width: 100%;
}
.variations_form .variations th {
margin-bottom: 6px;
}
.variations_form .variations td {
margin-bottom: var(--pkr-space-2);
}
}
.single_variation_wrap {
margin-top: var(--pkr-space-2);
}
/* ==========================================================================
11. Trust bar
========================================================================== */
.pkr-trust-bar {
background: var(--pkr-black);
border-top: 1px solid var(--pkr-border);
border-bottom: 1px solid var(--pkr-border);
padding-block: var(--pkr-space-3);
}
.pkr-trust-bar-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--pkr-space-3);
}
.pkr-trust-item {
display: flex;
align-items: center;
gap: var(--pkr-space-2);
}
.pkr-trust-item svg {
width: 28px;
height: 28px;
color: var(--pkr-gold);
flex-shrink: 0;
}
.pkr-trust-item strong {
display: block;
font-size: 0.875rem;
color: var(--pkr-cream);
}
.pkr-trust-item small {
color: var(--pkr-muted);
font-size: 0.75rem;
}
/* ==========================================================================
12. Collection cards
========================================================================== */
.pkr-collection-feature-grid { display: grid; gap: var(--pkr-space-3); }
.pkr-collection-feature { position: relative; min-height: 460px; display: flex; align-items: flex-end; padding: var(--pkr-space-5); overflow: hidden; border: 1px solid var(--pkr-border); border-radius: var(--pkr-radius-md); background: radial-gradient(circle at 25% 35%, rgba(214,177,93,.18), transparent 35%), linear-gradient(145deg,#17130c,#070707); }
.pkr-collection-feature--queen { border-color: var(--pkr-border-violet); background: radial-gradient(circle at 75% 30%, rgba(112,59,160,.45), transparent 42%), linear-gradient(145deg,#160f1c,#080708); }
.pkr-collection-feature .pkr-collection-crown { width: 180px; height: 150px; top: 28px; right: 30px; opacity: .28; }
.pkr-collection-feature > div { position: relative; max-width: 520px; z-index: 1; }
.pkr-collection-feature h2 { font-size: clamp(2rem,4vw,3.5rem); }
/* .pkr-collection-crown kept: still used by .pkr-collection-feature above.
The .pkr-collection / --king / --queen / --reserve card variants and
.pkr-collection-ribbon/-copy that used to sit here were a superseded
component with zero PHP references (grep-confirmed) -- removed so they
do not confuse future work. .pkr-collection-feature itself is left
alone; it is a separate, currently-unused block reserved for a future
hero-area redesign pass, out of scope here. */
.pkr-collection-crown {
position: absolute;
top: var(--pkr-space-2);
right: var(--pkr-space-2);
width: 80px;
height: 80px;
color: var(--pkr-gold);
opacity: 0.14;
}
/* ==========================================================================
13. Value grid / CTA band / panel
========================================================================== */
.pkr-value-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--pkr-space-3);
}
.pkr-value-card {
border: 1px solid var(--pkr-border);
background: var(--pkr-panel);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-3);
}
.pkr-value-icon {
display: inline-flex;
color: var(--pkr-gold);
width: 32px;
height: 32px;
margin-bottom: var(--pkr-space-1);
}
.pkr-value-card p {
color: var(--pkr-muted);
margin-bottom: 0;
}
.pkr-cta-band {
background: radial-gradient(circle at 82% 30%, rgba(109, 60, 163, 0.32), transparent 40%), #100d13;
}
.pkr-section-cta {
margin-top: var(--pkr-space-4);
text-align: center;
}
/* ==========================================================================
14. Footer
========================================================================== */
.pkr-footer {
border-top: 1px solid var(--pkr-border);
background: #070707;
padding-top: var(--pkr-space-6);
}
.pkr-newsletter {
display: grid;
grid-template-columns: 1fr;
gap: var(--pkr-space-2);
align-items: center;
text-align: center;
}
.pkr-newsletter .pkr-crown-lg {
margin-inline: auto;
}
.pkr-newsletter-title {
margin-bottom: 4px;
}
.pkr-newsletter-form {
display: flex;
flex-direction: column;
gap: var(--pkr-space-1);
max-width: 420px;
margin-inline: auto;
width: 100%;
}
.pkr-newsletter-input {
background: #141414;
border: 1px solid #3c3527;
color: var(--pkr-cream);
border-radius: var(--pkr-radius-pill);
padding: 12px 18px;
}
.pkr-footer-col h3 {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--pkr-gold-light);
margin-bottom: var(--pkr-space-2);
}
.pkr-footer-menu {
list-style: none;
}
.pkr-footer-menu li {
margin-bottom: 10px;
}
.pkr-footer-menu a {
color: var(--pkr-muted);
font-size: 0.875rem;
}
.pkr-footer-menu a:hover {
color: var(--pkr-gold-light);
}
.pkr-social-row { display: flex; gap: 8px; margin-top: 16px; }
.pkr-social-row a,
.pkr-social-row span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #5b513c; border-radius: 50%; color: var(--pkr-cream); font-size: 12px; transition: border-color var(--pkr-transition-fast), color var(--pkr-transition-fast); }
.pkr-social-row a:hover { border-color: var(--pkr-gold); color: var(--pkr-gold-light); }
.pkr-social-row svg { width: 16px; height: 16px; }
/* Reference-style compact catalog selector on Home. */
.pkr-home-catalog-nav { background: var(--pkr-black); border-block: 1px solid var(--pkr-border); padding: 18px 0; }
.pkr-home-catalog-grid { display: grid; grid-template-columns: 1fr; border: 1px solid var(--pkr-border); }
.pkr-home-catalog-link { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px; border-bottom: 1px solid var(--pkr-border); color: var(--pkr-cream); }
.pkr-home-catalog-link:last-child { border-bottom: 0; }
.pkr-home-catalog-link:hover { background: linear-gradient(135deg,rgba(214,177,93,.1),transparent); }
.pkr-home-catalog-icon { color: var(--pkr-gold); width: 38px; flex: 0 0 38px; }
.pkr-home-catalog-icon svg { width: 100%; height: 38px; }
.pkr-home-catalog-link strong { display: block; color: var(--pkr-gold-light); font-family: var(--pkr-font-display); font-size: .82rem; text-transform: uppercase; }
.pkr-home-catalog-link small { display: block; margin-top: 4px; color: var(--pkr-muted); font-size: .65rem; }
.pkr-trust-badges {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--pkr-space-2);
padding-block: var(--pkr-space-3);
border-top: 1px solid var(--pkr-border);
}
.pkr-trust-badge {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
color: var(--pkr-muted);
}
.pkr-trust-badge svg {
width: 20px;
height: 20px;
color: var(--pkr-gold);
}
.pkr-payment-row {
display: flex;
gap: var(--pkr-space-2);
padding-block: var(--pkr-space-2);
border-top: 1px solid var(--pkr-border);
}
.pkr-payment-icon {
color: var(--pkr-muted);
width: 40px;
height: 26px;
}
/* ==========================================================================
15. WooCommerce — product grid & card
========================================================================== */
.woocommerce ul.products {
display: grid !important;
grid-template-columns: 1fr;
gap: var(--pkr-space-3);
list-style: none;
margin: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
display: none !important;
}
.woocommerce ul.products li.product {
width: auto !important;
margin: 0 !important;
position: relative;
background: var(--pkr-panel);
border: 1px solid var(--pkr-border);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-2);
transition: border-color var(--pkr-transition-base), box-shadow var(--pkr-transition-fast);
}
/* Hover polish: the card itself no longer lifts. Only the thumbnail
(inside its own overflow:hidden frame, see .pkr-card-media below) scales
up, the border solidifies to full-strength gold, and a very faint crown
watermark fades in behind the card content -- see .pkr-card-crown and
.woocommerce-LoopProduct-link's z-index below, which keeps the real
content stacked above the watermark. */
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within {
border-color: var(--pkr-gold);
box-shadow: var(--pkr-shadow-card);
}
/* Selector needs to out-specify the base ".woocommerce ul.products
li.product" rule's `border` shorthand (3 classes + 2 elements) -- a bare
".pkr-product-card--queen" (1 class) loses the cascade and silently never
renders, so the base selector is repeated here to win on specificity. */
.woocommerce ul.products li.product.pkr-product-card--queen {
border-color: var(--pkr-border-violet);
}
.pkr-card-crown {
position: absolute;
inset: 0;
z-index: 0;
display: grid;
place-items: center;
color: var(--pkr-gold);
opacity: 0;
pointer-events: none;
transition: opacity var(--pkr-transition-base);
}
.pkr-card-crown svg {
width: 58%;
height: 58%;
}
.woocommerce ul.products li.product:hover .pkr-card-crown,
.woocommerce ul.products li.product:focus-within .pkr-card-crown {
opacity: 0.07;
}
.pkr-card-badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
background: var(--pkr-gold);
color: var(--pkr-black);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 10px;
border-radius: var(--pkr-radius-pill);
}
.pkr-card-media {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
border-radius: var(--pkr-radius-sm);
}
.woocommerce ul.products li.product img {
border-radius: var(--pkr-radius-sm);
background: #181818;
aspect-ratio: 1;
object-fit: cover;
display: block;
width: 100%;
transition: transform 400ms ease;
}
.woocommerce ul.products li.product:hover .pkr-card-media img,
.woocommerce ul.products li.product:focus-within .pkr-card-media img {
transform: scale(1.04);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--pkr-font-display);
color: var(--pkr-cream);
font-size: 1rem;
line-height: 1.3;
margin: var(--pkr-space-1) 0 2px;
/* Never truncate a product name: some SKUs are long composition-first
blend names (e.g. GHK-Cu / BPC-157 / TB-500 Blend, 70mg Total,
Glow) and clipping them hides compliance-relevant information.
Reserve two lines worth of height so short names still line up
across a row, but let longer names wrap past that freely; the
grid row default (align-items: stretch) plus the card flex
column (price uses margin-top: auto) keeps every price in a row
bottom-aligned even when a neighboring card title wraps taller. */
min-height: calc(1.3em * 2);
}
.pkr-card-size {
color: var(--pkr-muted);
font-size: 0.8125rem;
margin: 0 0 4px;
}
.woocommerce ul.products li.product .star-rating {
font-size: 0.8125rem;
color: var(--pkr-gold);
margin-bottom: 4px;
}
.woocommerce ul.products li.product .price {
color: var(--pkr-gold-light) !important;
font-weight: 700;
font-size: 1rem;
display: block;
margin-top: auto;
margin-bottom: var(--pkr-space-1);
/* .woocommerce-LoopProduct-link (the card's clickable wrapper) is a flex
column, so this bottom-aligns the price under the reserved title
space above instead of leaving dead space when a neighboring card's
longer title stretches the whole row's height (grid default
align-items: stretch). */
padding-top: 6px;
}
.woocommerce ul.products li.product .button {
width: 100%;
min-height: 42px;
}
/* ==========================================================================
16. WooCommerce — shop archive
========================================================================== */
.pkr-shop-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--pkr-space-4);
padding-block: var(--pkr-space-4) var(--pkr-space-8);
}
.pkr-shop-sidebar {
border: 1px solid var(--pkr-border);
background: var(--pkr-panel);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-3);
align-self: start;
}
.pkr-filter-group {
border: 0;
padding: 0;
margin: 0 0 var(--pkr-space-3);
}
.pkr-filter-group legend {
font-family: var(--pkr-font-display);
color: var(--pkr-gold-light);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--pkr-space-1);
padding: 0;
}
.pkr-filter-checkbox {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
color: var(--pkr-muted);
margin-bottom: 8px;
}
.pkr-price-range {
display: flex;
align-items: center;
gap: 8px;
}
.pkr-price-range input {
width: 100%;
}
.pkr-filter-clear {
display: block;
text-align: center;
margin-top: var(--pkr-space-2);
color: var(--pkr-muted);
font-size: 0.8125rem;
text-decoration: underline;
}
.pkr-shop-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--pkr-space-2);
margin-bottom: var(--pkr-space-3);
padding-bottom: var(--pkr-space-2);
border-bottom: 1px solid var(--pkr-border);
}
.pkr-shop-result-count {
color: var(--pkr-muted);
font-size: 0.875rem;
}
.pkr-shop-toolbar-right {
display: flex;
align-items: center;
gap: var(--pkr-space-2);
flex-wrap: wrap;
}
.woocommerce-ordering select {
min-width: 200px;
}
.pkr-view-toggle {
display: flex;
gap: 4px;
}
/* WooCommerce's default archive pagination ships with no theme hook and no
dark-mode styling, so left alone it renders as a light-gray UI chip
sitting on this theme's black background. */
.woocommerce-pagination {
margin-top: var(--pkr-space-4);
text-align: center;
}
/* Specificity note: WooCommerce's own core CSS ships
`.woocommerce nav.woocommerce-pagination ul { display: inline-block;
border: 1px solid #cfc8d8; margin: 1px; }` — a light-lavender box
border meant for a light theme, at (0,2,2) specificity. Prefixing our
own rule with `.woocommerce` (present on every WC-wrapped page) brings
it to (0,3,1), which beats theirs on class count regardless of type
count — but CSS cascades per-property, so `display` alone winning
doesn't touch `border`/`margin`: those still leak through from their
rule unless explicitly reset here too, which is what caused the
unexplained light box around the whole pagination row. */
.woocommerce .woocommerce-pagination ul.page-numbers {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 22px;
border: 0;
margin: 0;
list-style: none;
margin: 0;
padding: 0;
}
.woocommerce-pagination .page-numbers li {
display: inline-flex;
}
/* Minimal text pagination — no chip/pill shapes. Current page is marked
by color + a thin underline (same "state = color, not fill" language
used by the primary nav and account nav), not a filled badge. */
/* WooCommerce core also ships `... a:focus, ... a:hover, ... span.current
{ background: #e9e6ed; color: #816f98; }` (a light-lavender fill for a
light theme) at (0,3,4) specificity. Our selectors below already win on
class count for the states we touch, but the cascade is per-property —
so `background: transparent` has to be explicitly declared on every one
of those states here, or WooCommerce's fill quietly shows through even
though our `color` wins. This bit us twice (border, then this). */
.woocommerce-pagination .page-numbers .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 2px;
background: transparent;
color: var(--pkr-muted);
font-size: 0.9375rem;
font-weight: 600;
border-bottom: 2px solid transparent;
transition: color var(--pkr-transition-fast), border-color var(--pkr-transition-fast);
}
.woocommerce-pagination .page-numbers a.page-numbers:hover,
.woocommerce-pagination .page-numbers a.page-numbers:focus {
background: transparent;
color: var(--pkr-gold-light);
}
.woocommerce-pagination .page-numbers .page-numbers.current {
background: transparent;
color: var(--pkr-gold-light);
border-bottom-color: var(--pkr-gold);
}
/* Prev/Next are actions, not page numbers — plain gold text with an
arrow, no border/pill, matching the rest of this minimal treatment. */
.woocommerce-pagination .page-numbers .page-numbers.next,
.woocommerce-pagination .page-numbers .page-numbers.prev {
color: var(--pkr-gold-light);
letter-spacing: 0.02em;
}
.woocommerce-pagination .page-numbers a.page-numbers.next:hover,
.woocommerce-pagination .page-numbers a.page-numbers.next:focus,
.woocommerce-pagination .page-numbers a.page-numbers.prev:hover,
.woocommerce-pagination .page-numbers a.page-numbers.prev:focus {
background: transparent;
color: var(--pkr-gold);
border-bottom-color: var(--pkr-gold);
}
/* ==========================================================================
17. WooCommerce — single product
========================================================================== */
.woocommerce div.product {
display: grid;
grid-template-columns: 1fr;
gap: var(--pkr-space-4);
padding-bottom: var(--pkr-space-8);
}
.woocommerce div.product .woocommerce-product-gallery {
position: relative;
width: 100% !important;
max-width: 520px;
}
.woocommerce div.product .summary {
width: 100% !important;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related {
grid-column: 1 / -1;
}
@media (min-width: 1024px) {
/* auto-fit + minmax(0,1fr) with no items-count baked in: the row always
divides evenly across however many .pkr-home-catalog-link children are
rendered, so it can't silently leave a gap again if links are added or
removed (was hardcoded to 5 tracks while markup only emits 3). */
.pkr-home-catalog-grid { grid-template-columns: repeat(auto-fit,minmax(0,1fr)); }
.pkr-home-catalog-link { border-bottom: 0; border-right: 1px solid var(--pkr-border); }
.pkr-home-catalog-link:last-child { border-right: 0; }
.pkr-collection-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pkr-newsletter {
grid-template-columns: 1fr 360px minmax(300px, 420px);
}
.pkr-newsletter > div:first-child { grid-column: 1; }
.pkr-newsletter-form { grid-column: 3; }
.woocommerce div.product .woocommerce-product-gallery {
position: sticky;
top: 100px;
align-self: start;
}
}
.woocommerce div.product .woocommerce-product-gallery__image {
border-radius: var(--pkr-radius-md);
overflow: hidden;
background: var(--pkr-panel);
border: 1px solid var(--pkr-border);
}
.woocommerce div.product .flex-control-thumbs {
display: flex;
gap: 10px;
margin-top: 10px;
list-style: none;
}
.woocommerce div.product .flex-control-thumbs li {
width: 64px;
}
.woocommerce div.product .flex-control-thumbs img {
border-radius: var(--pkr-radius-sm);
border: 1px solid var(--pkr-border);
opacity: 0.6;
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover {
opacity: 1;
border-color: var(--pkr-gold);
}
.woocommerce div.product .product_title {
margin-bottom: 4px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: var(--pkr-gold-light) !important;
font-size: 1.5rem;
font-weight: 700;
}
.woocommerce div.product .woocommerce-product-rating {
margin-bottom: var(--pkr-space-2);
}
.pkr-product-badges {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--pkr-space-2);
margin: var(--pkr-space-2) 0;
padding: var(--pkr-space-2);
background: var(--pkr-panel);
border: 1px solid var(--pkr-border);
border-radius: var(--pkr-radius-md);
}
.pkr-product-badge {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8125rem;
color: var(--pkr-cream);
}
.pkr-product-badge svg {
width: 20px;
height: 20px;
color: var(--pkr-gold);
}
.woocommerce div.product form.cart {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pkr-space-2);
margin-top: var(--pkr-space-3);
}
.woocommerce div.product .quantity {
display: inline-flex;
align-items: center;
border: 1px solid var(--pkr-border);
border-radius: var(--pkr-radius-pill);
overflow: hidden;
}
.woocommerce div.product .quantity .qty {
width: 48px;
text-align: center;
border: 0;
background: transparent;
color: var(--pkr-cream);
padding: 10px 0;
}
.pkr-qty-btn {
min-width: 44px;
min-height: 44px;
border: 0;
background: transparent;
color: var(--pkr-gold-light);
font-size: 1.125rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pkr-qty-btn:hover {
background: rgba(214, 177, 93, 0.1);
}
.pkr-buy-now {
order: 1;
}
.pkr-tab-panel {
padding-top: var(--pkr-space-2);
}
.pkr-tab-subhead {
margin-top: var(--pkr-space-4);
color: var(--pkr-gold-light);
}
.pkr-doc-list {
list-style: none;
}
.pkr-doc-list-item {
display: flex;
align-items: center;
gap: var(--pkr-space-2);
padding: var(--pkr-space-2);
border: 1px solid var(--pkr-border);
border-radius: var(--pkr-radius-md);
margin-bottom: var(--pkr-space-1);
flex-wrap: wrap;
}
.pkr-doc-icon {
width: 28px;
height: 28px;
color: var(--pkr-gold);
flex-shrink: 0;
}
.pkr-doc-meta {
flex: 1;
display: flex;
flex-direction: column;
}
.pkr-doc-meta small {
color: var(--pkr-muted);
font-size: 0.75rem;
}
.woocommerce-tabs ul.tabs {
display: none;
}
.woocommerce-tabs .panel {
border-top: 1px solid var(--pkr-border);
padding-top: var(--pkr-space-3);
margin-top: var(--pkr-space-3);
}
/* Sticky mobile add-to-cart bar below 768px */
.pkr-sticky-add-to-cart {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--pkr-z-header);
background: var(--pkr-panel);
border-top: 1px solid var(--pkr-border);
padding: var(--pkr-space-1) var(--pkr-gutter-mobile);
display: none;
align-items: center;
justify-content: space-between;
gap: var(--pkr-space-2);
}
/* ==========================================================================
18. WooCommerce — cart
========================================================================== */
.woocommerce table.shop_table,
.pkr-cart-table,
.pkr-orders-table {
border: 1px solid var(--pkr-border);
background: var(--pkr-panel);
border-radius: var(--pkr-radius-md);
overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
border-color: var(--pkr-border);
padding: 14px;
}
.pkr-cart-row .product-thumbnail img {
width: 64px;
border-radius: var(--pkr-radius-sm);
}
.pkr-cart-remove {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 4px;
color: var(--pkr-error);
font-size: 1.25rem;
line-height: 1;
}
/* WooCommerce core ships `.woocommerce a.remove { color: var(--wc-red)
!important }` (#a00) (woocommerce.css) -- the `!important` beats the
`color: var(--pkr-error)` above regardless of selector order or
specificity, so the unstyled core red (2.42:1 against this row's #121212
background, below WCAG AA's 3:1 large-text minimum) is what actually
renders (audit finding 2, ACCESSIBILITY-AUDIT-2026-08-14.md). Beat it with
a selector of higher specificity than core's `.woocommerce a.remove`
(adds the `.pkr-cart-remove` class core doesn't know about) plus a
matching `!important`. var(--pkr-error) (#d95c5c) on #121212 measures
5.03:1, passing AA comfortably while staying on the theme's existing
error token instead of core's raw red. */
.woocommerce a.remove.pkr-cart-remove {
color: var(--pkr-error) !important;
}
.pkr-coupon-row {
display: flex;
gap: 8px;
margin-top: 4px;
}
.pkr-coupon-row input {
flex: 1;
}
.cart-collaterals .cart_totals {
background: var(--pkr-panel);
border: 1px solid var(--pkr-border);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-3);
margin-top: var(--pkr-space-4);
}
.cart-collaterals .cart_totals table {
border: 0;
}
.cart-collaterals .cart_totals th,
.cart-collaterals .cart_totals td {
border-color: var(--pkr-border);
padding: 10px 0;
color: var(--pkr-muted);
}
.cart-collaterals .wc-proceed-to-checkout a.checkout-button {
width: 100%;
margin-top: var(--pkr-space-2);
}
.pkr-cart-continue {
margin-top: var(--pkr-space-4);
}
/* ==========================================================================
19. WooCommerce — checkout
========================================================================== */
.woocommerce-checkout #order_review {
background: var(--pkr-panel);
border: 1px solid var(--pkr-border);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-3);
}
/* ==========================================================================
20. WooCommerce — account dashboard
========================================================================== */
.woocommerce-account .woocommerce {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--pkr-space-4);
align-items: start;
padding-block: var(--pkr-space-4) var(--pkr-space-8);
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
min-width: 0;
max-width: 100%;
}
.pkr-account-nav {
border: 1px solid var(--pkr-border);
background: var(--pkr-panel);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-2);
}
.pkr-account-nav ul {
list-style: none;
}
.pkr-account-nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 10px;
border-radius: var(--pkr-radius-sm);
color: var(--pkr-muted);
font-size: 0.875rem;
}
.pkr-account-nav a svg {
width: 18px;
height: 18px;
}
.pkr-account-nav li.is-active a,
.pkr-account-nav a:hover {
background: rgba(214, 177, 93, 0.12);
color: var(--pkr-gold-light);
}
.pkr-account-welcome {
margin-bottom: var(--pkr-space-3);
}
.pkr-account-id {
color: var(--pkr-muted);
font-size: 0.8125rem;
}
.pkr-stat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--pkr-space-2);
margin-bottom: var(--pkr-space-4);
}
.pkr-stat-card {
border: 1px solid var(--pkr-border);
background: var(--pkr-panel);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-2);
}
.pkr-stat-card--accent {
background: linear-gradient(135deg, rgba(214, 177, 93, 0.18), transparent);
border-color: var(--pkr-gold);
}
.pkr-stat-label {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--pkr-muted);
margin-bottom: 6px;
}
.pkr-stat-value {
display: block;
font-family: var(--pkr-font-display);
font-size: 1.5rem;
color: var(--pkr-cream);
}
.pkr-stat-value-sm {
font-size: 1rem;
}
.pkr-stat-badge {
display: inline-block;
background: var(--pkr-gold);
color: var(--pkr-black);
font-weight: 700;
font-size: 0.8125rem;
padding: 4px 12px;
border-radius: var(--pkr-radius-pill);
}
.pkr-order-status {
display: inline-block;
padding: 3px 10px;
border-radius: var(--pkr-radius-pill);
background: rgba(76, 175, 130, 0.15);
color: var(--pkr-success);
font-size: 0.75rem;
}
.pkr-order-status--pending,
.pkr-order-status--on-hold {
background: rgba(214, 177, 93, 0.15);
color: var(--pkr-gold-light);
}
.pkr-order-status--cancelled,
.pkr-order-status--failed,
.pkr-order-status--refunded {
background: rgba(217, 92, 92, 0.15);
color: var(--pkr-error);
}
/* --------------------------------------------------------------------
20a. WooCommerce — Addresses (myaccount/my-address.php) and
Account Details (myaccount/form-edit-address.php,
myaccount/form-edit-account.php). Native WooCommerce templates
themed to match the .pkr-panel / .pkr-stat-card / .pkr-eyebrow
account language above, instead of rendering unstyled core markup.
-------------------------------------------------------------------- */
.pkr-account-addresses .pkr-section-head {
margin-bottom: var(--pkr-space-3);
}
.pkr-address-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--pkr-space-3);
}
.pkr-address-card {
border: 1px solid var(--pkr-border);
background: var(--pkr-panel);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-3);
}
.pkr-address-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--pkr-space-2);
margin-bottom: var(--pkr-space-2);
}
.pkr-address-card__head h3 {
margin: 0;
font-size: 1.05rem;
color: var(--pkr-gold-light);
}
.pkr-address-card address {
font-style: normal;
color: var(--pkr-muted);
line-height: 1.65;
}
.pkr-address-empty {
display: block;
color: var(--pkr-muted);
font-style: normal;
}
/* Edit-address / edit-account forms share this panel + form-row-group
treatment. Labels adopt the gold-light uppercase style already used
by the support-ticket form (.pkr-ticket-create-form label) so the
two native-template forms read as the same product as the ticket
form and dashboard. */
.pkr-account-form-panel {
max-width: 720px;
}
.pkr-account-form-panel .pkr-section-head {
margin-bottom: var(--pkr-space-3);
}
.pkr-form-row-group {
display: grid;
grid-template-columns: 1fr;
gap: 0 var(--pkr-space-2);
}
.pkr-account-form-panel .form-row {
margin: 0 0 var(--pkr-space-2);
float: none;
width: auto;
}
.pkr-account-form-panel label,
.pkr-account-form-panel legend {
display: block;
margin-bottom: 7px;
color: var(--pkr-gold-light);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* Matches the same specificity as the sitewide `.woocommerce form
.form-row .required` override above -- that selector is 3 classes PLUS
the `form` element type (0,3,1), so a 3-classes-only selector here would
still lose to it. Add the `form` element type here too so this
intentional brand-gold accent in the account panel isn't silently
outranked; both rules live in main.css, so on the resulting specificity
tie this one (declared later) wins for elements inside
.pkr-account-form-panel. */
form .pkr-account-form-panel .form-row .required {
color: var(--pkr-gold);
}
.pkr-account-form-panel .optional {
color: var(--pkr-muted);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.pkr-account-form-panel .description {
display: block;
margin-top: 6px;
color: var(--pkr-muted);
font-size: 0.78rem;
}
.pkr-account-form-panel fieldset {
border: 1px solid var(--pkr-border);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-3);
margin: var(--pkr-space-3) 0;
}
.pkr-account-form-panel fieldset .form-row:last-child {
margin-bottom: 0;
}
@media (min-width: 600px) {
.pkr-address-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pkr-form-row-group--2col {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Fields WooCommerce marks form-row-wide (company, address lines,
country, city, postcode, etc.) still span the full row inside the
2-column grid; only the paired form-row-first/form-row-last
fields (e.g. first/last name) sit side by side. */
.pkr-form-row-group--2col .form-row-wide {
grid-column: 1 / -1;
}
}
/* ==========================================================================
21. WooCommerce — affiliate dashboard
========================================================================== */
.pkr-affiliate-earnings-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--pkr-space-2);
margin-bottom: var(--pkr-space-2);
}
.pkr-stat-grid--metrics {
grid-template-columns: repeat(3, 1fr);
}
.pkr-affiliate-referral {
display: grid;
grid-template-columns: 1fr;
gap: var(--pkr-space-2);
margin: var(--pkr-space-3) 0;
}
.pkr-referral-field label {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--pkr-muted);
margin-bottom: 6px;
}
.pkr-copy-field {
display: flex;
gap: 8px;
}
.pkr-copy-input {
flex: 1;
background: #141414;
border: 1px solid #3c3527;
color: var(--pkr-cream);
border-radius: var(--pkr-radius-sm);
padding: 10px 12px;
font-family: monospace;
}
.pkr-copy-btn.is-copied {
background: rgba(76, 175, 130, 0.15);
color: var(--pkr-success) !important;
border-color: var(--pkr-success);
}
.pkr-affiliate-footer {
margin-top: var(--pkr-space-3);
}
.pkr-affiliate-empty {
border: 1px solid var(--pkr-border);
background: var(--pkr-panel);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-4);
}
.pkr-stat-band,
.pkr-affiliate-overview {
padding-block: var(--pkr-space-4);
background: linear-gradient(135deg, #171208, #080808);
border-block: 1px solid var(--pkr-border-strong);
}
.pkr-stat-band-grid,
.pkr-affiliate-overview-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--pkr-space-2);
}
.pkr-stat-band-grid strong,
.pkr-affiliate-overview-grid strong { display: block; color: var(--pkr-cream); margin-top: 8px; }
.pkr-affiliate-rules-grid { display: grid; gap: var(--pkr-space-4); align-items: center; }
.pkr-check-list { list-style: none; display: grid; gap: 12px; }
.pkr-check-list li { position: relative; padding-left: 24px; color: var(--pkr-muted); }
.pkr-check-list li::before { content: '◆'; position: absolute; left: 0; color: var(--pkr-gold); }
/* ==========================================================================
21b. WooCommerce — account security (opt-in customer two-factor auth)
Styling for woocommerce/myaccount/security.php. The Authenticator App
card also re-skins the Two Factor plugin's own unmodified
Two_Factor_Totp::user_two_factor_options() widget markup (QR code,
secret key, code field, "Reset authenticator app" button) — see
PKRC_Account_Security::render_totp_setup_widget() and the doc comment
at the top of security.php for why that markup is reused as-is rather
than rebuilt.
========================================================================== */
.pkr-security-status {
border: 1px solid var(--pkr-border);
background: var(--pkr-panel);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-3);
margin-bottom: var(--pkr-space-2);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--pkr-space-2);
}
.pkr-security-status p {
margin: 0;
color: var(--pkr-cream);
}
.pkr-security-status--on {
border-color: var(--pkr-border-strong);
}
.pkr-security-status form {
margin: 0;
}
.pkr-btn-danger {
background: transparent;
color: var(--pkr-error) !important;
border: 1px solid var(--pkr-error);
}
.pkr-btn-danger:hover {
background: rgba(217, 92, 92, 0.1);
box-shadow: none;
transform: none;
}
.pkr-security-methods {
display: grid;
grid-template-columns: 1fr;
gap: var(--pkr-space-3);
margin-top: var(--pkr-space-3);
}
@media (min-width: 900px) {
.pkr-security-methods {
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
.pkr-security-method-card {
border: 1px solid var(--pkr-border);
background: var(--pkr-panel);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-3);
}
.pkr-security-method-card--active {
border-color: var(--pkr-gold);
box-shadow: 0 0 0 1px rgba(214, 177, 93, 0.25);
}
.pkr-security-method-card .pkr-section-head--left {
margin-bottom: var(--pkr-space-2);
}
.pkr-security-method-card h3 {
margin-bottom: 4px;
}
.pkr-security-method-card p {
color: var(--pkr-muted);
font-size: 0.9rem;
}
.pkr-security-active-badge {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--pkr-success) !important;
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Re-skin of the Two Factor plugin's own TOTP widget markup — see block
comment above. */
.pkr-security-method-card--totp #two-factor-totp-options ol.totp-steps {
list-style: decimal;
padding-left: 1.1rem;
color: var(--pkr-muted);
display: grid;
gap: var(--pkr-space-2);
}
.pkr-security-method-card--totp #two-factor-qr-code {
background: var(--pkr-cream);
border-radius: var(--pkr-radius-sm);
padding: var(--pkr-space-2);
display: inline-block;
margin: 8px 0;
}
.pkr-security-method-card--totp #two-factor-totp-options code {
background: #141414;
border: 1px solid var(--pkr-border);
color: var(--pkr-gold-light);
border-radius: var(--pkr-radius-sm);
padding: 3px 8px;
letter-spacing: 0.06em;
}
.pkr-security-method-card--totp #two-factor-totp-authcode,
.pkr-security-method-card--totp input[type="text"] {
background: #141414;
border: 1px solid var(--pkr-border);
color: var(--pkr-cream);
border-radius: var(--pkr-radius-sm);
padding: 10px 12px;
letter-spacing: 0.3em;
text-align: center;
font-size: 1.1rem;
max-width: 220px;
margin-top: 6px;
}
.pkr-security-method-card--totp .totp-submit,
.pkr-security-method-card--totp input[type="submit"] {
margin-top: var(--pkr-space-2);
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 var(--pkr-space-3);
border-radius: var(--pkr-radius-pill);
background: linear-gradient(135deg, var(--pkr-gold-light), var(--pkr-gold));
color: var(--pkr-black) !important;
font-weight: 700;
border: 0;
cursor: pointer;
}
.pkr-security-method-card--totp .reset-totp-key,
.pkr-security-method-card--totp .button-secondary {
margin-top: 8px;
background: transparent;
color: var(--pkr-gold-light) !important;
border: 1px solid var(--pkr-gold);
border-radius: var(--pkr-radius-pill);
padding: 8px 18px;
min-height: 40px;
cursor: pointer;
}
.pkr-security-method-card--totp .success {
color: var(--pkr-success);
}
.pkr-security-method-card--totp #totp-setup-error {
color: var(--pkr-error);
margin-top: 8px;
font-size: 0.85rem;
}
/* Dashboard nudge toward opt-in two-factor authentication (see
PKRC_Two_Factor_Prompt). Deliberately calmer than .pkr-notice's alert
styling -- no error/warning color, just the house gold accent -- this is
a gentle suggestion, not a security warning. */
.pkr-2fa-nudge {
display: flex;
align-items: flex-start;
gap: var(--pkr-space-2);
border: 1px solid var(--pkr-border);
background: var(--pkr-panel);
border-left: 3px solid var(--pkr-gold);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-2) var(--pkr-space-3);
margin-bottom: var(--pkr-space-3);
}
.pkr-2fa-nudge-icon {
flex: 0 0 auto;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--pkr-gold);
}
.pkr-2fa-nudge-icon svg {
width: 22px;
height: 22px;
}
.pkr-2fa-nudge-body {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pkr-space-2);
}
.pkr-2fa-nudge-body p {
margin: 0;
color: var(--pkr-cream);
flex: 1 1 320px;
}
.pkr-2fa-nudge-dismiss {
flex: 0 0 auto;
margin: 0;
}
.pkr-2fa-nudge-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: 0;
border-radius: 50%;
color: var(--pkr-muted);
cursor: pointer;
}
.pkr-2fa-nudge-close:hover,
.pkr-2fa-nudge-close:focus-visible {
color: var(--pkr-cream);
background: rgba(214, 177, 93, 0.12);
}
.pkr-2fa-nudge-close svg {
width: 14px;
height: 14px;
}
@media (max-width: 600px) {
.pkr-2fa-nudge {
flex-wrap: wrap;
}
.pkr-2fa-nudge-body {
flex-direction: column;
align-items: flex-start;
}
}
/* ==========================================================================
22. FAQ accordion
========================================================================== */
.pkr-faq-intro {
max-width: 760px;
margin-bottom: var(--pkr-space-3);
}
@media (min-width: 768px) {
/* Flow whole topic groups (not individual questions) into 2 balanced
columns, so 5 groups don't stack into one long single-file column
on a wide desktop viewport with empty space on either side. */
.pkr-faq-groups-flow {
column-count: 2;
column-gap: var(--pkr-space-4);
}
}
.pkr-faq-group {
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.pkr-faq-jump {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: var(--pkr-space-5);
}
.pkr-faq-jump-pill {
border: 1px solid var(--pkr-border);
border-radius: var(--pkr-radius-pill, 999px);
padding: 8px 18px;
font-size: 0.85rem;
font-weight: 600;
color: var(--pkr-gold-light);
background: var(--pkr-panel);
transition: border-color var(--pkr-transition-base), color var(--pkr-transition-base);
}
.pkr-faq-jump-pill:hover,
.pkr-faq-jump-pill:focus-visible {
border-color: var(--pkr-gold);
color: var(--pkr-gold);
}
.pkr-faq-group {
margin-bottom: var(--pkr-space-4);
scroll-margin-top: 100px;
}
.pkr-faq-group-title {
color: var(--pkr-gold-light);
font-size: 1.125rem;
margin-bottom: var(--pkr-space-2);
}
/* Long-form prose card treatment: each
-delimited section is wrapped
server-side (see pkr_wrap_content_sections_in_panels() in functions.php)
into its own bordered panel, so this reads as a series of cards instead
of one long, undifferentiated block of text. Opt-in per template by
pairing .pkr-prose with .pkr-quality-prose — used by page-about.php,
page-quality.php, and the long-form policy/utility pages (Shipping,
Returns & Refunds, Terms & Conditions, Privacy, Research-Use,
Accessibility; Track Your Order uses the wrap function without this
class, see page-track-order.php). Any other template using plain
.pkr-prose alone keeps the simpler, non-panelled treatment. */
.pkr-quality-prose {
max-width: none;
}
@media (min-width: 768px) {
/* A flowing 2-column layout (not a strict grid) so panels of very
different heights — a 3-sentence panel next to the multi-step COA
process — pack together without leaving large gaps, and a full-width
single column leaves the wide desktop viewport mostly empty. */
.pkr-quality-prose {
column-count: 2;
column-gap: var(--pkr-space-3);
}
}
.pkr-quality-panel {
scroll-margin-top: 100px;
break-inside: avoid;
-webkit-column-break-inside: avoid;
border: 1px solid var(--pkr-border);
background: var(--pkr-panel);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-4);
margin-bottom: var(--pkr-space-3);
}
.pkr-quality-panel h2 {
margin-top: 0;
}
.pkr-quality-panel > *:last-child {
margin-bottom: 0;
}
.pkr-quality-prose ol {
list-style: none;
padding-left: 0;
counter-reset: pkr-step;
display: grid;
gap: 12px;
margin: var(--pkr-space-2) 0 var(--pkr-space-3);
}
.pkr-quality-prose ol li {
counter-increment: pkr-step;
position: relative;
padding: 14px 16px 14px 56px;
border: 1px solid var(--pkr-border);
border-radius: var(--pkr-radius-md);
background: var(--pkr-panel);
}
.pkr-quality-prose ol li::before {
content: counter(pkr-step);
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pkr-gold-light), var(--pkr-gold));
color: var(--pkr-black);
font-weight: 700;
font-size: 0.8125rem;
display: flex;
align-items: center;
justify-content: center;
}
.pkr-quality-prose ul {
list-style: none;
padding-left: 0;
display: grid;
gap: 12px;
margin: var(--pkr-space-2) 0 var(--pkr-space-3);
}
.pkr-quality-prose ul li {
position: relative;
padding-left: 26px;
}
.pkr-quality-prose ul li::before {
content: '◆';
position: absolute;
left: 0;
top: 1px;
color: var(--pkr-gold);
font-size: 0.75rem;
}
.pkr-quality-prose ul li strong {
display: block;
color: var(--pkr-cream);
margin-bottom: 2px;
}
.pkr-accordion-item {
border: 1px solid var(--pkr-border);
border-radius: var(--pkr-radius-md);
margin-bottom: 10px;
background: var(--pkr-panel);
overflow: hidden;
}
.pkr-accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pkr-space-2);
padding: var(--pkr-space-2) var(--pkr-space-3);
cursor: pointer;
list-style: none;
font-weight: 600;
}
.pkr-accordion-trigger::-webkit-details-marker {
display: none;
}
.pkr-accordion-icon {
width: 20px;
height: 20px;
color: var(--pkr-gold);
transition: transform var(--pkr-transition-base);
flex-shrink: 0;
}
.pkr-accordion-item[open] .pkr-accordion-icon {
transform: rotate(180deg);
}
.pkr-accordion-panel {
padding: 0 var(--pkr-space-3) var(--pkr-space-3);
color: var(--pkr-muted);
}
.pkr-faq-cta {
text-align: center;
border: 1px solid var(--pkr-border);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-4);
margin-top: var(--pkr-space-4);
}
/* ==========================================================================
23. Static page components
========================================================================== */
.pkr-page-hero {
padding-block: var(--pkr-space-6);
background: linear-gradient(120deg, #111, #16110a);
border-bottom: 1px solid var(--pkr-border);
}
.pkr-page-hero-sub {
color: var(--pkr-muted);
max-width: 640px;
margin-top: var(--pkr-space-1);
}
.pkr-wc-page-title {
margin-bottom: var(--pkr-space-3);
}
.pkr-contact-list {
list-style: none;
}
.pkr-contact-list li {
margin-bottom: var(--pkr-space-1);
color: var(--pkr-muted);
}
.pkrc-honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.pkrc-form-success,
.pkrc-form-error {
margin: 0 0 var(--pkr-space-2);
padding: 10px 14px;
border-radius: var(--pkr-radius-sm, 4px);
font-size: 0.8rem;
line-height: 1.4;
}
.pkrc-form-success {
border: 1px solid rgba(214, 177, 93, 0.4);
background: rgba(214, 177, 93, 0.1);
color: var(--pkr-gold-light);
}
.pkrc-form-error {
border: 1px solid rgba(217, 92, 92, 0.4);
background: rgba(217, 92, 92, 0.1);
color: var(--pkr-error);
}
.pkr-footer-dispatch .pkrc-form-success,
.pkr-footer-dispatch .pkrc-form-error {
font-size: 0.7rem;
padding: 8px 12px;
}
.pkrc-human-confirm label {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--pkr-muted);
font-size: 0.875rem;
}
.pkrc-human-confirm input {
width: auto;
margin-top: 3px;
}
.pkr-archive-search-panel {
margin: var(--pkr-space-4) 0;
}
.pkr-archive-notice {
border-top: 1px solid var(--pkr-border);
padding-top: var(--pkr-space-4);
margin-top: var(--pkr-space-4);
}
.pkr-article-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--pkr-space-3);
}
.pkr-article-card {
border: 1px solid var(--pkr-border);
background: var(--pkr-panel);
border-radius: var(--pkr-radius-md);
padding: var(--pkr-space-3);
}
.pkr-article-thumb img {
border-radius: var(--pkr-radius-sm);
margin-bottom: var(--pkr-space-1);
}
.pkr-404 {
text-align: center;
}
.pkr-404-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pkr-space-1);
}
.pkr-404-inner .pkr-crown-lg {
color: var(--pkr-gold);
margin-bottom: var(--pkr-space-1);
}
.pkr-search-results {
display: grid;
grid-template-columns: 1fr;
gap: var(--pkr-space-3);
}
.pkr-search-result-type {
color: var(--pkr-gold);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ==========================================================================
24. Responsive breakpoints — 480 / 768 / 1024 / 1280
========================================================================== */
@media (min-width: 480px) {
.pkr-trust-bar-grid {
grid-template-columns: repeat(2, 1fr);
}
.pkr-value-grid {
grid-template-columns: repeat(2, 1fr);
}
.pkr-trust-badges {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 768px) {
/* 3 equal columns instead of 2, so an odd card count (e.g. 3 cards)
fills one clean row instead of leaving an empty gap beside the
last, orphaned card. */
.pkr-value-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.woocommerce ul.products {
grid-template-columns: repeat(2, 1fr);
}
.pkr-article-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.pkr-shell {
width: min(100% - (var(--pkr-gutter-desktop)), var(--pkr-shell-max));
}
.pkr-newsletter {
grid-template-columns: auto 1fr auto;
text-align: left;
}
.pkr-newsletter .pkr-crown-lg {
margin-inline: 0;
}
.pkr-newsletter-form {
margin-inline: 0;
}
.pkr-form-row-group {
grid-template-columns: 1fr 1fr;
}
.pkr-split {
grid-template-columns: 1.2fr 0.8fr;
}
.woocommerce ul.products {
grid-template-columns: repeat(3, 1fr);
}
.woocommerce div.product {
grid-template-columns: 1fr 1fr;
}
.pkr-stat-grid {
grid-template-columns: repeat(4, 1fr);
}
.woocommerce-account .woocommerce {
grid-template-columns: 240px 1fr;
}
.pkr-sticky-add-to-cart {
display: none !important;
}
}
@media (max-width: 767px) {
.home .woocommerce ul.products,
.single-product .related ul.products { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 10px; scrollbar-width: thin; }
.home .woocommerce ul.products li.product,
.single-product .related ul.products li.product { flex: 0 0 calc(100% - 34px); scroll-snap-align: start; }
/* .pkr-hero itself is deliberately not restated here -- this was one
of several superseded `.pkr-hero { }` blocks left behind by earlier
patch attempts at the hero-cropping bug (go-live audit, Design/
Brand Audit §1). The current mobile treatment lives in the later,
more specific `@media (max-width:767px) { .pkr-hero {...} }` block
near the bottom of this file (search "background-size:100% auto"),
which already fully overrides every property this one used to set.
.pkr-hero-copy/-title/-sub below are untouched -- out of scope for
this cleanup, which was specifically about the base `.pkr-hero`
rule. */
.pkr-hero-copy {
max-width: 330px;
margin-left: 0;
}
.pkr-hero-title {
font-size: clamp(2.7rem, 13vw, 3.9rem);
}
.pkr-hero-sub {
font-size: 1rem;
max-width: 290px;
}
}
/* ==========================================================================
Complete resource, archive, affiliate, support, and checkout experience
========================================================================== */
.pkr-section-head--left {
align-items: flex-start;
text-align: left;
}
.pkr-section-head--left p {
max-width: 62ch;
}
.pkr-archive-section {
background: radial-gradient(circle at 85% 8%, rgba(214, 177, 93, .07), transparent 28%), #050606;
}
.pkr-archive-workspace {
display: grid;
gap: 24px;
}
.pkr-archive-search-panel,
.pkr-archive-guide {
margin: 0;
padding: clamp(20px, 3vw, 34px);
border: 1px solid var(--pkr-border);
background: linear-gradient(145deg, #101111, #080909);
}
.pkr-archive-search-panel .pkrc-document-search {
margin-top: 22px;
}
.pkr-archive-guide {
height: fit-content;
background: linear-gradient(160deg, rgba(214, 177, 93, .12), #0c0c0c 42%);
}
.pkr-archive-guide-icon,
.pkr-resource-card-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin-bottom: 18px;
color: var(--pkr-gold-light);
}
.pkr-archive-guide-icon svg,
.pkr-resource-card-icon svg {
width: 100%;
height: 100%;
}
.pkr-number-list {
display: grid;
gap: 16px;
margin: 22px 0;
padding: 0;
counter-reset: archive-step;
list-style: none;
}
.pkr-number-list li {
position: relative;
display: grid;
gap: 3px;
min-height: 42px;
padding-left: 50px;
counter-increment: archive-step;
}
.pkr-number-list li::before {
content: counter(archive-step, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid var(--pkr-gold);
border-radius: 50%;
color: var(--pkr-gold-light);
font: 700 .7rem var(--pkr-font-display);
}
.pkr-number-list span,
.pkr-archive-guide > p {
color: var(--pkr-muted);
font-size: .82rem;
}
.pkr-archive-trust-grid {
display: grid;
gap: 1px;
margin-top: 24px;
border: 1px solid var(--pkr-border);
background: var(--pkr-border);
}
.pkr-archive-trust-grid article {
display: flex;
gap: 14px;
padding: 20px;
background: #090a0a;
}
.pkr-archive-trust-grid article > span {
flex: 0 0 34px;
color: var(--pkr-gold);
}
.pkr-archive-trust-grid svg {
width: 34px;
height: 34px;
}
.pkr-archive-trust-grid h3,
.pkr-archive-trust-grid p {
margin: 0;
}
.pkr-archive-trust-grid p {
margin-top: 4px;
color: var(--pkr-muted);
font-size: .78rem;
}
.pkr-resources-hero,
.pkr-shop-hero {
background: radial-gradient(circle at 84% 28%, rgba(214, 177, 93, .12), transparent 24%), linear-gradient(110deg, #11100d, #080909 62%);
}
.pkr-about-hero {
background: radial-gradient(circle at 82% 34%, rgba(214, 177, 93, .16), transparent 26%), linear-gradient(115deg, #121110, #0a0a09 66%);
}
.pkr-wholesale-hero {
background: radial-gradient(circle at 85% 30%, rgba(214, 177, 93, .18), transparent 26%), linear-gradient(115deg, #131109, #0a0908 66%);
}
.pkr-resources-hero-grid,
.pkr-shop-hero-grid,
.pkr-resource-support-grid {
display: grid;
align-items: center;
gap: 24px;
}
.pkr-resource-jump {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.pkr-resource-jump a {
display: grid;
place-items: center;
gap: 8px;
min-height: 112px;
padding: 16px;
border: 1px solid var(--pkr-border-strong);
background: rgba(4, 5, 5, .72);
color: var(--pkr-cream);
font: 700 .82rem var(--pkr-font-display);
text-align: center;
}
.pkr-resource-jump a:hover,
.pkr-resource-jump a:focus-visible {
border-color: var(--pkr-gold-light);
background: rgba(214, 177, 93, .12);
}
.pkr-resource-jump svg {
width: 28px;
height: 28px;
color: var(--pkr-gold);
}
.pkr-resource-directory {
background: #050606;
}
.pkr-resource-card-grid {
display: grid;
gap: 14px;
}
.pkr-resource-card {
position: relative;
display: flex;
min-height: 290px;
flex-direction: column;
align-items: flex-start;
padding: clamp(22px, 3vw, 34px);
overflow: hidden;
border: 1px solid var(--pkr-border);
background: linear-gradient(145deg, #111212, #090a0a);
color: var(--pkr-cream);
}
.pkr-resource-card--featured {
border-color: var(--pkr-gold);
background: radial-gradient(circle at 90% 10%, rgba(214, 177, 93, .3), transparent 38%), linear-gradient(145deg, #17140f, #090a0a);
}
.pkr-resource-card:hover,
.pkr-resource-card:focus-visible {
border-color: var(--pkr-gold);
transform: translateY(-2px);
}
.pkr-resource-card-index {
position: absolute;
right: 22px;
top: 18px;
color: rgba(214, 177, 93, .28);
font: 700 2.5rem var(--pkr-font-display);
}
.pkr-resource-card h3,
.pkr-resource-card p {
margin: 0;
}
.pkr-resource-card p {
margin-top: 10px;
color: var(--pkr-muted);
}
.pkr-resource-card strong {
margin-top: auto;
padding-top: 22px;
color: var(--pkr-gold-light);
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .05em;
}
.pkr-resource-support-band {
border-top: 1px solid var(--pkr-border);
background: linear-gradient(90deg, #13100a, #090a0a 62%);
}
.pkr-resource-support-grid h2,
.pkr-resource-support-grid p {
margin: 0;
}
.pkr-resource-support-grid p {
max-width: 68ch;
margin-top: 8px;
color: var(--pkr-muted);
}
.pkr-affiliate-hero {
background: radial-gradient(circle at 83% 38%, rgba(214, 177, 93, .22), transparent 28%), linear-gradient(115deg, #15130d, #0a0908 68%);
}
.pkr-page-hero-grid,
.pkr-affiliate-hero-grid,
.pkr-affiliate-apply-grid,
.pkr-affiliate-standards-grid {
display: grid;
align-items: center;
gap: clamp(28px, 5vw, 72px);
}
.pkr-hero-preview,
.pkr-affiliate-preview {
padding: 22px;
border: 1px solid var(--pkr-border-strong);
border-radius: var(--pkr-radius-md);
background: linear-gradient(165deg, rgba(214, 177, 93, .14), rgba(10, 8, 13, .92));
box-shadow: 0 28px 70px rgba(0, 0, 0, .4);
}
.pkr-hero-preview-top,
.pkr-affiliate-preview-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 16px 18px;
border-radius: calc(var(--pkr-radius-md) - 4px);
border: 1px solid rgba(214, 177, 93, .35);
background: linear-gradient(90deg, rgba(214, 177, 93, .28), rgba(214, 177, 93, .1));
}
.pkr-hero-preview-top span,
.pkr-hero-preview-grid small,
.pkr-affiliate-preview-top span,
.pkr-affiliate-preview-grid small {
color: var(--pkr-muted);
font-size: .65rem;
letter-spacing: .05em;
}
.pkr-hero-preview-top strong,
.pkr-affiliate-preview-top strong {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--pkr-gold-light);
font-size: 1rem;
}
.pkr-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #6fd88a;
box-shadow: 0 0 0 3px rgba(111, 216, 138, .25), 0 0 10px rgba(111, 216, 138, .7);
}
.pkr-hero-preview-grid,
.pkr-affiliate-preview-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 12px;
}
.pkr-hero-preview-grid > span,
.pkr-affiliate-preview-grid > span {
display: grid;
gap: 8px;
padding: 16px 12px;
border-radius: calc(var(--pkr-radius-md) - 4px);
border: 1px solid var(--pkr-border);
background: var(--pkr-panel);
transition: border-color var(--pkr-transition-fast);
}
.pkr-hero-preview-grid > span:hover,
.pkr-affiliate-preview-grid > span:hover {
border-color: var(--pkr-gold);
}
.pkr-hero-preview-icon,
.pkr-affiliate-preview-icon {
display: inline-flex;
width: 22px;
height: 22px;
color: var(--pkr-gold);
}
.pkr-hero-preview-icon svg,
.pkr-affiliate-preview-icon svg {
width: 100%;
height: 100%;
}
.pkr-hero-preview-grid strong,
.pkr-affiliate-preview-grid strong {
color: var(--pkr-cream);
font-size: .78rem;
}
.pkr-affiliate-path {
background: #050606;
}
.pkr-affiliate-payouts-note {
max-width: 640px;
margin-top: var(--pkr-space-4);
}
.pkr-step-grid,
.pkr-affiliate-step-grid {
display: grid;
gap: 14px;
}
.pkr-step-grid article,
.pkr-affiliate-step-grid article {
position: relative;
min-height: 220px;
padding: 28px;
border: 1px solid var(--pkr-border);
background: #0d0e0e;
}
.pkr-step-grid article > span,
.pkr-affiliate-step-grid article > span {
display: grid;
place-items: center;
width: 42px;
height: 42px;
margin-bottom: 28px;
border: 1px solid var(--pkr-gold);
border-radius: 50%;
color: var(--pkr-gold-light);
font: 700 .75rem var(--pkr-font-display);
}
.pkr-step-grid h3,
.pkr-step-grid p,
.pkr-affiliate-step-grid h3,
.pkr-affiliate-step-grid p {
margin: 0;
}
.pkr-step-grid p,
.pkr-affiliate-step-grid p {
margin-top: 9px;
color: var(--pkr-muted);
}
.pkr-affiliate-apply-copy {
align-self: start;
}
.pkr-affiliate-apply-copy h2 {
margin-top: 7px;
}
.pkr-affiliate-apply-copy > p {
color: var(--pkr-muted);
}
.pkr-affiliate-apply-note {
display: grid;
gap: 5px;
margin-top: 24px;
padding: 18px;
border-left: 3px solid var(--pkr-gold);
background: rgba(214, 177, 93, .08);
}
.pkr-affiliate-apply-note span {
color: var(--pkr-muted);
font-size: .82rem;
}
.pkr-affiliate-form-shell {
padding: clamp(20px, 3vw, 34px);
}
.pkr-new-ticket-panel {
display: grid;
gap: 24px;
margin-top: 28px;
padding: clamp(20px, 3vw, 30px);
border: 1px solid var(--pkr-border);
background: radial-gradient(circle at 100% 0, rgba(214, 177, 93, .1), transparent 32%), #0d0e0e;
}
.pkr-new-ticket-copy h3,
.pkr-new-ticket-copy p {
margin: 0;
}
.pkr-new-ticket-copy p {
margin-top: 8px;
color: var(--pkr-muted);
}
.pkr-ticket-create-form > p,
.pkr-ticket-create-form .pkr-form-grid p {
margin: 0 0 16px;
}
.pkr-ticket-create-form label,
.pkrc-form-label {
display: block;
margin-bottom: 7px;
color: var(--pkr-gold-light);
font-size: .72rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
}
.pkr-ticket-create-form small {
display: block;
margin-top: 7px;
color: var(--pkr-muted);
}
.pkrc-turnstile-wrap {
min-width: 0;
margin: 0 0 18px;
}
.cf-turnstile {
width: 100%;
min-height: 65px;
}
/* Stripe lives in an iframe; the supported appearance config inherits these dark fields. */
.woocommerce-checkout #payment,
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout .payment_box.payment_method_stripe,
.woocommerce-checkout .wc-stripe-upe-element,
.woocommerce-checkout .wc-stripe-upe-form {
border-color: var(--pkr-border-strong) !important;
background: #0b0c0c !important;
color: var(--pkr-cream) !important;
}
.woocommerce-checkout #payment ul.payment_methods {
padding: 0 !important;
border: 0 !important;
}
.woocommerce-checkout #payment li.wc_payment_method {
padding: 0;
border: 0;
background: transparent;
}
.woocommerce-checkout #payment li.wc_payment_method > label {
display: flex;
align-items: center;
min-height: 48px;
padding: 12px 14px;
border: 1px solid var(--pkr-border-strong);
background: #101111;
color: var(--pkr-cream);
font-weight: 700;
}
.woocommerce-checkout #payment div.payment_box {
margin: 0 !important;
padding: 16px !important;
border: 1px solid var(--pkr-border-strong) !important;
border-top: 0 !important;
}
/* Stripe's own payment_fields() prints a raw sandbox instructional line
("Test mode: use card 4242 4242 4242 4242...") directly into the
checkout markup whenever the gateway's testmode setting is on -- see
WC_Stripe_UPE_Payment_Gateway::payment_fields(). It isn't routed through
a filter, so it can't be trimmed server-side like the Authorize.net
banner (pkrc_hide_sandbox_test_copy() in pk-royal-core.php); hiding the
node here is the supported, non-vendor-editing option. Sandbox/test mode
itself is untouched -- this is presentation-only. */
.woocommerce-checkout #payment .testmode-info {
display: none !important;
}
/* Mirrored checkout error (see initCheckoutPaymentErrorRecovery() in
main.js) -- same .woocommerce-error look, just placed right above the
Place Order button instead of only at the top of the page. */
.pkr-checkout-payment-error {
margin: 0 0 16px !important;
}
@media (min-width: 768px) {
.pkr-archive-trust-grid,
.pkr-step-grid,
.pkr-affiliate-step-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pkr-resources-hero-grid,
.pkr-shop-hero-grid,
.pkr-resource-support-grid {
grid-template-columns: minmax(0, 1fr) auto;
}
.pkr-resource-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pkr-page-hero-grid,
.pkr-affiliate-hero-grid,
.pkr-affiliate-apply-grid,
.pkr-affiliate-standards-grid {
grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
}
.pkr-new-ticket-panel {
grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr);
}
.pkr-ticket-create-form .pkr-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
}
@media (min-width: 1100px) {
.pkr-archive-workspace {
grid-template-columns: minmax(0, 1.55fr) minmax(300px, .45fr);
align-items: start;
}
.pkr-archive-guide {
position: sticky;
top: 118px;
}
}
@media (max-width: 767px) {
.pkr-resource-jump {
grid-template-columns: 1fr;
}
.pkr-resource-jump a {
min-height: 72px;
grid-template-columns: 30px 1fr;
justify-items: start;
text-align: left;
}
.pkr-resource-card {
min-height: 250px;
}
.pkr-hero-preview-grid,
.pkr-affiliate-preview-grid {
grid-template-columns: 1fr;
}
.pkr-hero-preview-top,
.pkr-affiliate-preview-top {
align-items: flex-start;
flex-direction: column;
}
.pkr-archive-search-panel,
.pkr-archive-guide,
.pkr-new-ticket-panel {
padding: 18px;
}
}
@media (max-width: 767px) {
.pkr-header-inner {
gap: 8px;
}
.pkr-header-inner.pkr-shell {
width: calc(100% - 32px);
}
.pkr-brand {
min-width: 0;
}
.pkr-brand-text strong {
font-size: 0.75rem;
}
.pkr-brand-text small {
display: none;
}
.pkr-crown {
width: 24px;
height: 24px;
}
.pkr-actions > .pkr-icon-btn,
.pkr-actions > .pkr-cart-link {
display: none;
}
.pkr-menu-toggle {
padding: 8px;
}
.pkr-menu-toggle-label {
display: none;
}
.pkr-sticky-add-to-cart.is-visible {
display: flex;
}
body.pkr-has-sticky-cart .pkr-section:last-of-type {
padding-bottom: var(--pkr-space-8);
}
}
@media (min-width: 768px) {
.woocommerce-account .woocommerce {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: var(--pkr-space-6);
align-items: start;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
float: none;
width: auto;
}
.woocommerce-account .woocommerce-MyAccount-navigation { grid-column:1; grid-row:1; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column:2; grid-row:1; }
}
@media (min-width: 1024px) {
.pkr-stat-band-grid,
.pkr-affiliate-overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pkr-affiliate-rules-grid { grid-template-columns: 1fr 1fr; }
/* At 2 columns, each item's icon+text pair is far narrower than its
half-width cell, so it sits flush left with a large empty gap
trailing it — one row of 4 evenly-spaced items reads as deliberate
instead of sparse, and matches the bordered category-tiles row
directly beneath it. Held off until 1024px (rather than the 768px
used elsewhere) because 4 columns is noticeably tight at 768px. */
.pkr-trust-bar-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--pkr-space-4);
}
.pkr-nav {
display: flex;
}
.pkr-menu-toggle {
display: none;
}
.pkr-drawer,
.pkr-drawer-overlay {
display: none;
}
.pkr-shop-layout {
grid-template-columns: 260px 1fr;
}
.woocommerce ul.products {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1280px) {
.woocommerce ul.products {
grid-template-columns: repeat(4, 1fr);
}
/* .pkr-hero's own wide-desktop padding override moved next to its
base rule in section "10. Hero" near the top of this file -- it
used to live here, but the base rule's own unconditional
padding-block (introduced by a later hero-cropping patch, same
specificity, declared further down in the file) silently won the
cascade for every width including this one, defeating this
override entirely (go-live audit, Design/Brand Audit §1, P0: "one
confirmed-live bug (desktop >=1280px padding) results from this
fragility"). Declaring it after the base rule instead of before it
is what actually lets it take effect again. */
}
/* ==========================================================================
Reference-board fidelity overrides
========================================================================== */
.pkr-product-primary { display: grid; gap: 28px; align-items: start; }
.pkr-product-gallery,
.pkr-product-information { min-width: 0; }
.pkr-product-gallery .woocommerce-product-gallery { width: 100% !important; float: none !important; }
.pkr-product-gallery .woocommerce-product-gallery__trigger { display: none !important; }
.pkr-product-gallery .woocommerce-product-gallery__wrapper { margin: 0; border: 1px solid var(--pkr-border-strong); background: radial-gradient(circle at 50% 40%,#2a210f,#050505 68%); }
.pkr-product-gallery .woocommerce-product-gallery__image { overflow:hidden; }
.pkr-product-gallery .woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition:transform .28s ease; }
.pkr-product-gallery .woocommerce-product-gallery__image { cursor: default !important; }
.pkr-reference-thumbnails { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 10px; }
.pkr-reference-thumb { display:block; overflow:hidden; padding: 3px; border: 1px solid var(--pkr-border); background: #0b0b0b; cursor:pointer; }
.pkr-reference-thumb.is-active { border-color: var(--pkr-gold); }
.pkr-reference-thumb img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.pkr-reference-thumb:only-child { grid-column:span 1; max-width:96px; }
.pkr-actions .pkr-icon-btn,
.pkr-menu-toggle,
#pkr-drawer-close { min-width:44px; min-height:44px; }
.pkr-filter-toggle { display:none; width:100%; min-height:48px; border:1px solid var(--pkr-gold); background:#0b0b0b; color:var(--pkr-gold-light); font-weight:700; text-transform:uppercase; }
.pkr-filter-checkbox { min-height:44px; align-items:center; }
.pkr-price-range input,
.pkr-icon-btn { min-height:44px; min-width:44px; }
.pkr-product-information { padding: 10px 0; }
.pkr-product-information .product_title { font-size: clamp(1.8rem,3vw,2.8rem); }
/* Composition-first blend names (e.g. "GHK-Cu / BPC-157 / TB-500 / KPV
Blend (Klow)") are 45-51 characters -- the default clamp above was
tuned for 1-2 word names and wraps 3-4 lines at that length, pushing
price/variant selector/CTA down the page. title.php adds this modifier
class once the title exceeds ~30 characters. */
.pkr-product-information .product_title.pkr-product-title--long { font-size: clamp(1.4rem,2.1vw,2rem); line-height: 1.25; }
.pkr-product-information .price { font-size: 1.7rem; }
.pkr-product-information .woocommerce-product-details__short-description { font-size: .9rem; line-height: 1.55; color: var(--pkr-muted); }
.pkr-product-information form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.pkr-product-information form.cart .variations { flex: 1 0 100%; margin: 8px 0; }
.pkr-product-information form.cart .quantity { width: 122px; }
.pkr-product-information .single_add_to_cart_button,
.pkr-product-information .pkr-buy-now { min-height: 48px; border-radius: 2px; }
.pkr-product-details { grid-column: 1/-1; margin-top: 10px; }
.pkr-product-details .woocommerce-tabs { width: 100%; }
.pkr-product-details .woocommerce-tabs .panel { margin: 0; padding: 18px 12px; border: 1px solid var(--pkr-border); border-bottom: 0; }
.pkr-product-details .woocommerce-tabs .panel:last-child { border-bottom: 1px solid var(--pkr-border); }
.pkr-product-details .woocommerce-tabs .panel > h2:first-child { margin: 0; font-size: .88rem; letter-spacing: .08em; text-transform: uppercase; }
.pkr-product-information .woocommerce-tabs { margin-top: 22px; }
.pkr-product-information .woocommerce-tabs ul.tabs { display: none; }
.pkr-product-accordion-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-top: 1px solid var(--pkr-border); background: transparent; color: var(--pkr-cream); font: 600 .75rem var(--pkr-font-body); letter-spacing: .04em; text-align: left; text-transform: uppercase; cursor: pointer; }
.pkr-product-accordion-toggle:last-of-type { border-bottom: 1px solid var(--pkr-border); }
.pkr-product-accordion-toggle span:last-child { color: var(--pkr-gold); font-size: 1.2rem; }
.pkr-product-information .woocommerce-tabs .panel { margin: 0; padding: 14px 12px; border: 1px solid var(--pkr-border); border-top: 0; font-size: .78rem; }
.woocommerce-cart .woocommerce { display: grid; gap: 22px; }
.woocommerce-cart .woocommerce-cart-form { min-width: 0; }
.woocommerce-cart .cart-collaterals { min-width: 0; }
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; margin: 0; border-radius: 2px; }
.pkr-cart-summary h2 { font-size: 1.35rem; }
.pkr-cart-secure-action { margin-top: 12px; }
.pkr-secure-checkout-note { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--pkr-gold-light); font-size: .78rem; text-align: center; }
.pkr-secure-checkout-icon { display: inline-flex; flex: 0 0 auto; width: 14px; height: 14px; }
.pkr-secure-checkout-icon svg { width: 100%; height: 100%; }
.pkr-checkout-assurances { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; list-style: none; color: var(--pkr-muted); font-size: .68rem; }
.pkr-cart-row .product-thumbnail img { width: 82px; height: 82px; object-fit: cover; }
/* Checkout is a single continuous form (one