/* =====================================================================
Ascend'Ra Divine — theme.css
Single stylesheet for the theme. No CSS lives in any WooCommerce
template file (Section 10) — all visual styling lives here.
================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@300;400;500;600;700&display=swap');
/* ---------------------------------------------------------------------
1. CSS custom properties (color defaults are overridden live via
wp_add_inline_style in functions.php — see Section 22.9).
------------------------------------------------------------------- */
:root {
--color-background: #050505;
--color-foreground: #f3f0ec;
--color-surface-indigo: #211631;
--color-primary: #d69671;
--color-primary-foreground: #050505;
--color-accent: #4a3965;
--color-border: #c6baa9;
--color-offerings-bg: #f5f2ef;
--color-offerings-ink: #120e1b;
--color-offerings-copper: #96512c;
--color-button-text: var(--color-primary-foreground);
--font-display: 'Cormorant Garamond', serif;
--font-body: 'Manrope', system-ui, sans-serif;
--radius: 0.75rem;
--card-radius: 14px;
--section-padding: 2rem;
--shadow-soft: 0 8px 32px -12px hsl(260 40% 3% / 0.6);
--shadow-elevated: 0 24px 60px -20px hsl(260 40% 2% / 0.7);
--transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-smooth: cubic-bezier(0.25, 0.4, 0.25, 1);
--announcement-height: 0px;
--header-height: 80px;
--logo-height: 56px;
--btn-radius: 12px;
--btn-height: 52px;
--btn-padding: 0.875rem 1.75rem;
--btn-font-size: 13px;
--btn-font-weight: 500;
--btn-letter-spacing: 0.14em;
--btn-text-transform: uppercase;
--btn-icon-padding: 0.6rem;
--checkout-gap: 2rem;
/* Typography tokens — matched to Lovable source (Tailwind + index.css) */
--leading-relaxed: 1.625;
--leading-tight: 1.25;
--tracking-wide: 0.025em;
--tracking-ui: 0.14em;
--tracking-ui-md: 0.18em;
--tracking-label: 0.22em;
--tracking-label-lg: 0.24em;
--tracking-label-xl: 0.28em;
--tracking-eyebrow: 0.32em;
--text-eyebrow: 11px;
--text-eyebrow-sm: 10px;
--text-body-sm: 13px;
--text-body-md: 15px;
--text-body-lg: 16px;
--text-muted-60: color-mix(in srgb, var(--color-foreground) 60%, transparent);
--text-muted-70: color-mix(in srgb, var(--color-foreground) 70%, transparent);
--text-muted-75: color-mix(in srgb, var(--color-foreground) 75%, transparent);
--text-muted-80: color-mix(in srgb, var(--color-foreground) 80%, transparent);
--text-muted-85: color-mix(in srgb, var(--color-foreground) 85%, transparent);
--text-muted-90: color-mix(in srgb, var(--color-foreground) 90%, transparent);
--text-muted-95: color-mix(in srgb, var(--color-foreground) 95%, transparent);
}
/* ---------------------------------------------------------------------
2. Reset & base.
------------------------------------------------------------------- */
* {
box-sizing: border-box;
}
html {
max-width: 100%;
}
body {
margin: 0;
max-width: 100%;
background-color: var(--color-background);
color: var(--color-foreground);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
font-feature-settings: 'ss01', 'ss02';
}
h1, h2, h3, h4, h5, h6, .font-display {
font-family: var(--font-display);
font-weight: 400;
font-size: inherit;
letter-spacing: -0.005em;
margin: 0;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; background: none; border: none; cursor: pointer; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
img:not(.cover-img):not(.hero-bg-img):not(.product-card-img):not(.theme-media-preview) {
max-width: 100%;
height: auto;
}
.cover-img,
.hero-bg-img,
.product-card-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
}
#top, #shop, #about, #contact, #services {
scroll-margin-top: calc(var(--header-height) + var(--announcement-height) + 8px);
}
/* ---------------------------------------------------------------------
3. Layout utilities & surfaces.
------------------------------------------------------------------- */
.container-wide {
width: 100%;
max-width: 1280px;
margin-inline: auto;
padding-inline: 1.25rem;
}
@media (min-width: 768px) { .container-wide { padding-inline: 2rem; } }
@media (min-width: 1024px) { .container-wide { padding-inline: 2.5rem; } }
.surface-obsidian {
background-color: var(--color-background);
color: var(--color-foreground);
background-image:
radial-gradient(1200px 480px at 15% 0%, color-mix(in srgb, var(--color-accent) 55%, transparent), transparent 60%),
radial-gradient(900px 420px at 90% 100%, color-mix(in srgb, var(--color-accent) 50%, transparent), transparent 65%);
}
.surface-indigo {
background-color: var(--color-surface-indigo);
color: var(--color-foreground);
background-image:
radial-gradient(1200px 500px at 100% 0%, color-mix(in srgb, var(--color-accent) 60%, transparent), transparent 60%),
radial-gradient(900px 420px at 0% 100%, color-mix(in srgb, var(--color-accent) 55%, transparent), transparent 65%);
}
.copper-divider {
height: 1px;
background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--color-primary) 38%, transparent) 20%, color-mix(in srgb, var(--color-primary) 38%, transparent) 80%, transparent 100%);
}
.grain { position: relative; }
.grain::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
}
.mineral-grain {
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
mix-blend-mode: overlay;
}
.mineral-veining {
background-image:
radial-gradient(60% 40% at 20% 30%, hsl(34 40% 82% / 0.35), transparent 70%),
radial-gradient(50% 35% at 80% 70%, hsl(269 20% 78% / 0.28), transparent 70%),
url("data:image/svg+xml;utf8,");
background-size: auto, auto, 400px 400px;
}
.facet-clip-tr { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.facet-clip-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.facet-clip-editorial { clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px)); }
/* ---------------------------------------------------------------------
4. Buttons.
------------------------------------------------------------------- */
.btn-copper, .btn-outline-moon {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: var(--btn-padding);
border-radius: var(--btn-radius);
font-size: var(--btn-font-size);
letter-spacing: var(--btn-letter-spacing);
text-transform: var(--btn-text-transform);
font-family: var(--font-body);
font-weight: var(--btn-font-weight);
transition: all 0.3s ease;
min-height: var(--btn-height);
border: 1px solid transparent;
}
.btn-copper {
background: var(--color-primary);
color: var(--color-button-text);
border-color: var(--color-primary);
}
.btn-copper:hover {
background: color-mix(in srgb, var(--color-primary) 82%, black);
transform: translateY(-1px);
box-shadow: var(--shadow-soft);
}
.btn-copper:active { transform: translateY(0); }
.btn-copper:disabled, .btn-copper.disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.btn-outline-moon {
background: transparent;
color: var(--color-foreground);
border-color: color-mix(in srgb, var(--color-border) 55%, transparent);
}
.btn-outline-moon:hover {
border-color: var(--color-primary);
color: var(--color-primary);
transform: translateY(-1px);
}
.copper-underline { position: relative; }
.copper-underline::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 1px;
background: var(--color-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--transition-smooth);
}
.copper-underline:hover::after,
.copper-underline[data-active="true"]::after { transform: scaleX(1); }
.input-celestial {
width: 100%;
padding: 0.75rem 1rem;
border-radius: 10px;
font-size: 1rem;
font-family: var(--font-body);
background: color-mix(in srgb, var(--color-surface-indigo) 85%, black 15%);
color: var(--color-foreground);
border: 1px solid color-mix(in srgb, var(--color-border) 25%, transparent);
transition: border-color 0.2s ease;
}
.input-celestial::placeholder { color: color-mix(in srgb, var(--color-foreground) 60%, transparent); }
.input-celestial:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
/* ---------------------------------------------------------------------
5. Animations & scroll-reveal (Section 2.1).
------------------------------------------------------------------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes marqueeSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
.reveal-item, .reveal-fade, .reveal-fade-up, .reveal-scale {
transition-delay: var(--reveal-delay, 0ms);
}
.reveal-fade {
opacity: 0;
transition: opacity 0.7s var(--ease-smooth);
}
.reveal-fade.is-visible { opacity: 1; }
.reveal-fade-up, .reveal-item {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}
.reveal-fade-up.is-visible, .reveal-item.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-scale {
opacity: 0;
transform: scale(0.96);
transition: opacity 1s var(--ease-smooth), transform 1s var(--ease-smooth);
}
.reveal-scale.is-visible {
opacity: 1;
transform: scale(1);
}
/* Customizer-preview fallback: never hide content in the editor. */
body.is-customizer .reveal-item,
body.is-customizer .reveal-fade,
body.is-customizer .reveal-fade-up,
body.is-customizer .reveal-scale {
opacity: 1 !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* ---------------------------------------------------------------------
6. Announcement bar.
------------------------------------------------------------------- */
.theme-announcement-bar {
position: relative;
background: var(--color-primary);
color: var(--color-button-text);
}
.theme-announcement-bar__inner {
padding-block: 0.625rem;
text-align: center;
}
.theme-announcement-bar__text {
font-family: var(--font-body);
font-size: var(--text-eyebrow);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
font-weight: 500;
padding-right: 2rem;
}
@media (min-width: 768px) { .theme-announcement-bar__text { font-size: 12px; } }
.theme-announcement-bar__dismiss {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
padding: 0.375rem;
opacity: 0.8;
transition: opacity 0.2s ease;
}
.theme-announcement-bar__dismiss:hover { opacity: 1; }
/* ---------------------------------------------------------------------
7. Header & navigation.
------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 40;
transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
background-color: transparent;
border-bottom: 1px solid transparent;
}
.site-header.is-solid {
background-color: color-mix(in srgb, var(--color-surface-indigo) 95%, transparent);
backdrop-filter: blur(12px);
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.site-header__nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
position: relative;
}
@media (min-width: 768px) { .site-header__nav { height: 80px; } }
.site-header__brand { display: flex; align-items: center; flex-shrink: 0; }
.site-logo-img {
display: block;
height: var(--logo-height) !important;
width: auto !important;
max-width: 220px;
object-fit: contain;
pointer-events: none;
user-select: none;
}
.site-logo-text {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--color-foreground);
}
.site-header__menu-desktop {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 1024px) { .site-header__menu-desktop { display: flex; } }
.site-header__menu-desktop .theme-nav-list {
display: flex;
align-items: center;
gap: 2.5rem;
}
.theme-nav-link {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--tracking-label-lg);
text-transform: uppercase;
color: var(--text-muted-90);
transition: color 0.2s ease;
}
.theme-nav-link:hover { color: var(--color-primary); }
.theme-nav-link[data-active="true"] { color: var(--color-primary); }
.site-header__actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
@media (min-width: 768px) { .site-header__actions { gap: 0.5rem; } }
.theme-cart-toggle, .theme-mobile-menu-toggle {
position: relative;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s ease;
}
.theme-cart-toggle:hover, .theme-mobile-menu-toggle:hover { color: var(--color-primary); }
.theme-mobile-menu-toggle { display: flex; }
@media (min-width: 1024px) { .theme-mobile-menu-toggle { display: none; } }
.theme-cart-count {
position: absolute;
top: 2px;
right: 2px;
min-width: 18px;
height: 18px;
padding-inline: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 500;
background: var(--color-primary);
color: var(--color-button-text);
border-radius: 999px;
}
.theme-cart-count:empty { display: none; }
/* ---------------------------------------------------------------------
8. Mobile navigation panel.
------------------------------------------------------------------- */
.theme-mobile-nav {
position: fixed;
inset: 0;
z-index: 2147483200;
display: none;
flex-direction: column;
background-color: var(--color-surface-indigo);
height: 100dvh;
width: 100vw;
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
.theme-mobile-nav.is-open { display: flex; animation: fadeIn 0.35s var(--ease-smooth) forwards; }
@media (min-width: 1024px) { .theme-mobile-nav { display: none !important; } }
.theme-mobile-nav__header {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 1.25rem;
height: 64px;
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
flex-shrink: 0;
}
@media (min-width: 640px) { .theme-mobile-nav__header { padding-inline: 1.5rem; } }
.theme-mobile-nav__logo { height: 48px !important; max-width: 180px; }
.theme-mobile-nav__close {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-foreground);
transition: color 0.2s ease;
}
.theme-mobile-nav__close:hover { color: var(--color-primary); }
.theme-mobile-nav__list-wrap {
flex: 1;
overflow-y: auto;
padding: 1.5rem 1.25rem;
}
@media (min-width: 640px) { .theme-mobile-nav__list-wrap { padding-inline: 1.5rem; } }
.theme-mobile-nav__list-wrap .theme-nav-list,
.theme-mobile-nav__list-wrap .theme-mobile-nav__list {
display: flex;
flex-direction: column;
}
.theme-mobile-nav__list-wrap .theme-nav-link,
.theme-mobile-nav__list-wrap li {
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.theme-mobile-nav__list-wrap .theme-nav-link {
display: block;
width: 100%;
text-align: left;
font-family: var(--font-display);
font-size: 26px;
line-height: 1;
letter-spacing: 0;
text-transform: none;
font-weight: inherit;
min-height: 64px;
padding-block: 1rem;
display: flex;
align-items: center;
color: var(--color-foreground);
}
.theme-mobile-nav__list-wrap .theme-nav-link:hover,
.theme-mobile-nav__list-wrap .theme-nav-link[data-active="true"] { color: var(--color-primary); }
.theme-mobile-nav__email { width: 100%; justify-content: center; margin-top: 2rem; text-transform: uppercase; }
/* ---------------------------------------------------------------------
9. Hero.
------------------------------------------------------------------- */
.theme-hero {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: calc(100svh - var(--announcement-height) - var(--header-height));
}
body.theme-no-hero .theme-hero { display: none; }
/* Home main content sits directly under the transparent fixed header — no
top padding — so the hero fills the full viewport (Section 22.7). */
body:not(.theme-no-hero) main { padding-top: 0; }
body.theme-no-hero .site-main,
body.theme-no-hero main {
padding-top: var(--header-height, 80px);
}
.theme-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.theme-hero__video, .theme-hero__poster-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.theme-hero__overlay-gradient {
position: absolute;
inset: 0;
background: linear-gradient(180deg, hsl(260 24% 7% / 0.82) 0%, hsl(260 24% 7% / 0.72) 45%, hsl(260 24% 7% / 0.88) 100%);
}
.theme-hero__overlay-glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at 78% 30%, hsl(21 55% 48% / 0.22), transparent 55%);
}
.theme-hero__emblem {
position: absolute;
display: none;
pointer-events: none;
right: 3%;
top: 50%;
transform: translateY(-50%);
width: min(560px, 42vw);
opacity: 0.08;
mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
-webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.theme-hero__emblem img { width: 100%; height: auto; mix-blend-mode: screen; }
@media (min-width: 1024px) { .theme-hero__emblem { display: block; } }
.theme-hero__content { position: relative; flex: 1; display: flex; align-items: center; width: 100%; }
.theme-hero__content .container-wide { width: 100%; padding-block: 2.5rem; }
@media (min-width: 768px) { .theme-hero__content .container-wide { padding-block: 3.5rem; } }
.theme-hero__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}
@media (min-width: 768px) {
.theme-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3.5rem; }
}
.theme-hero__copy { position: relative; min-width: 0; }
.theme-hero__eyebrow-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.theme-hero__eyebrow-line { display: inline-block; width: 2.5rem; height: 1px; background: var(--color-primary); }
.theme-hero__eyebrow {
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-primary);
}
.theme-hero__heading {
font-size: 46px;
line-height: 1;
color: var(--color-foreground);
margin-bottom: 1.25rem;
}
@media (min-width: 640px) { .theme-hero__heading { font-size: 60px; } }
@media (min-width: 768px) { .theme-hero__heading { font-size: 72px; } }
@media (min-width: 1024px) { .theme-hero__heading { font-size: 92px; line-height: 0.95; } }
.theme-hero__subheading {
font-family: var(--font-display);
font-style: italic;
font-size: 1.5rem;
color: var(--color-primary);
margin-bottom: 1.75rem;
}
@media (min-width: 768px) { .theme-hero__subheading { font-size: 1.875rem; } }
.theme-hero__paragraph {
color: var(--text-muted-90);
font-size: 1rem;
line-height: var(--leading-relaxed);
max-width: 28rem;
margin-bottom: 2rem;
}
@media (min-width: 768px) { .theme-hero__paragraph { font-size: 1.125rem; } }
.theme-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.theme-hero__frames { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 62vh; }
@media (min-width: 768px) { .theme-hero__frames { max-height: 64vh; } }
.theme-hero__frame {
position: absolute;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.theme-hero__frame--main {
left: 6%; top: 4%;
width: 68%; aspect-ratio: 3 / 4;
box-shadow: var(--shadow-elevated);
}
.theme-hero__frame--main::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to top, color-mix(in srgb, var(--color-background) 40%, transparent), transparent 60%);
pointer-events: none;
}
.theme-hero__frame--accent {
right: 2%; bottom: 6%;
width: 42%; aspect-ratio: 1 / 1;
box-shadow: var(--shadow-soft);
clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.theme-hero__frame--main { clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px)); }
.theme-hero__current { position: absolute; left: 38%; top: 38%; width: 38%; height: 6rem; display: none; pointer-events: none; }
@media (min-width: 768px) { .theme-hero__current { display: block; } }
.theme-hero__current-path {
opacity: 0.85;
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: theme-draw-path 2.2s var(--ease-smooth) 0.4s forwards;
}
@keyframes theme-draw-path { to { stroke-dashoffset: 0; } }
.theme-hero__marquee { position: relative; z-index: 20; margin-top: auto; width: 100%; }
/* ---------------------------------------------------------------------
10. Marquee.
------------------------------------------------------------------- */
.theme-marquee {
position: relative;
width: 100%;
overflow: hidden;
border-top: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
background-color: color-mix(in srgb, var(--color-background) 85%, transparent);
min-height: 48px;
}
@media (min-width: 768px) { .theme-marquee { min-height: 52px; } }
.theme-marquee__fade {
position: absolute;
inset-block: 0;
width: 2.5rem;
z-index: 10;
pointer-events: none;
}
.theme-marquee__fade--left { left: 0; background: linear-gradient(to right, var(--color-background), transparent); }
.theme-marquee__fade--right { right: 0; background: linear-gradient(to left, var(--color-background), transparent); }
.theme-marquee__track {
display: flex;
align-items: center;
padding-block: 0.75rem;
width: max-content;
animation: marqueeSlide 30s linear infinite;
will-change: transform;
}
.theme-marquee.is-reduced-motion .theme-marquee__track { animation: none; }
.theme-marquee.is-reduced-motion { overflow: visible; }
.theme-marquee.is-reduced-motion .theme-marquee__row[aria-hidden="true"] { display: none; }
.theme-marquee.is-reduced-motion .theme-marquee__row {
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem 2rem;
width: 100%;
}
.theme-marquee__row { display: flex; align-items: center; flex-shrink: 0; }
.theme-marquee__item {
white-space: nowrap;
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: color-mix(in srgb, var(--color-foreground) 90%, transparent);
padding-inline: 1.5rem;
line-height: 1.3;
}
@media (min-width: 768px) { .theme-marquee__item { font-size: 13px; padding-inline: 2.5rem; } }
.theme-marquee__dash { display: inline-block; width: 1.5rem; height: 1px; background: color-mix(in srgb, var(--color-primary) 80%, transparent); }
@media (min-width: 768px) { .theme-marquee__dash { width: 2.5rem; } }
/* ---------------------------------------------------------------------
11. Shop section, product grid, product card.
------------------------------------------------------------------- */
.theme-shop-section__inner { padding-block: 4rem; }
@media (min-width: 768px) { .theme-shop-section__inner { padding-block: 6rem; } }
.theme-shop-section__header {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 3rem;
}
@media (min-width: 768px) {
.theme-shop-section__header { flex-direction: row; align-items: flex-end; margin-bottom: 4rem; }
}
.theme-shop-section__header-copy { max-width: 36rem; }
.theme-shop-section__eyebrow {
display: block;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 1rem;
}
.theme-shop-section__heading { font-size: 2.25rem; line-height: 1.05; }
@media (min-width: 768px) { .theme-shop-section__heading { font-size: 3.75rem; } }
.theme-shop-section__paragraph {
font-size: var(--text-body-md);
color: var(--text-muted-80);
max-width: 24rem;
line-height: var(--leading-relaxed);
}
@media (min-width: 768px) {
.theme-shop-section__paragraph { font-size: 16px; text-align: right; }
}
.theme-product-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem 1.5rem;
align-items: stretch;
}
@media (min-width: 480px) { .theme-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .theme-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .theme-product-grid { grid-template-columns: repeat(4, 1fr); } }
.theme-product-grid > * { min-width: 0; }
.theme-product-grid .theme-hidden-extra,
.theme-hidden-extra { display: none !important; }
.theme-product-card-wrap {
display: flex;
flex-direction: column;
height: 100%;
transition: transform 0.3s var(--ease-smooth);
}
.theme-product-card-wrap:hover { transform: translateY(-3px); }
.theme-product-card__media-link { display: block; min-width: 0; }
.theme-product-card__image-wrapper {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: color-mix(in srgb, var(--color-surface-indigo) 90%, black 10%);
border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
box-shadow: inset 0 0 60px hsl(260 40% 4% / 0.35);
}
.theme-product-card__image-wrapper img {
transition: transform 0.7s var(--ease-smooth), opacity 0.3s ease;
}
.theme-product-card-wrap:hover .theme-product-card__image-wrapper img { transform: scale(1.04); }
.theme-product-card__badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
padding: 0.25rem 0.75rem;
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2em;
background: var(--color-foreground);
color: var(--color-background);
}
.theme-product-card__title {
margin-top: 1.25rem;
font-size: 20px;
line-height: 1.25;
color: var(--color-foreground);
display: inline-block;
}
@media (min-width: 768px) { .theme-product-card__title { font-size: 22px; } }
.theme-product-card__categories {
margin-top: 0.35rem;
font-size: 12px;
color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
}
.theme-product-card__footer {
margin-top: auto;
padding-top: 0.5rem;
border-top: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 0.75rem;
}
.theme-product-card__price {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: var(--tracking-wide);
color: var(--color-primary);
min-width: 0;
}
@media (min-width: 768px) { .theme-product-card__price { font-size: 15px; } }
.theme-product-card__price del { opacity: 0.5; margin-right: 0.35em; }
.theme-product-card__price ins { text-decoration: none; }
.theme-shop-section__view-all { margin-top: 4rem; display: flex; justify-content: center; }
.theme-archive__empty { text-align: center; padding-block: 3rem; color: color-mix(in srgb, var(--color-foreground) 70%, transparent); }
/* ---------------------------------------------------------------------
12. Sacred Offerings (ritual index).
------------------------------------------------------------------- */
.theme-offerings {
position: relative;
overflow: hidden;
background-color: var(--color-offerings-bg);
color: var(--color-offerings-ink);
}
.theme-offerings::before,
.theme-offerings::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
.theme-offerings::before {
opacity: 0.4;
background-image:
radial-gradient(60% 40% at 20% 30%, hsl(34 40% 82% / 0.35), transparent 70%),
radial-gradient(50% 35% at 80% 70%, hsl(269 20% 78% / 0.28), transparent 70%),
url("data:image/svg+xml;utf8,");
background-size: auto, auto, 400px 400px;
}
.theme-offerings::after {
opacity: 0.3;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
mix-blend-mode: overlay;
}
.theme-offerings__inner { position: relative; padding-block: 3rem; }
@media (min-width: 768px) { .theme-offerings__inner { padding-block: 4rem; } }
@media (min-width: 1024px) { .theme-offerings__inner { padding-block: 5rem; } }
.theme-offerings__layout { display: flex; flex-direction: column; }
@media (min-width: 1024px) { .theme-offerings__layout { flex-direction: row; gap: 3rem; } }
@media (min-width: 1280px) { .theme-offerings__layout { gap: 4rem; } }
.theme-offerings__heading-col { position: relative; margin-bottom: 2.5rem; }
@media (min-width: 1024px) {
.theme-offerings__heading-col { width: 32%; max-width: 24rem; margin-bottom: 0; padding-right: 1rem; }
}
.theme-offerings__arc, .theme-offerings__watermark { display: none; position: absolute; pointer-events: none; }
@media (min-width: 1024px) {
.theme-offerings__arc { display: block; left: -2.5rem; top: -2rem; }
.theme-offerings__watermark { display: block; right: 0.5rem; top: 1.5rem; opacity: 0.04; }
}
.theme-offerings__eyebrow {
position: relative;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-offerings-copper);
}
.theme-offerings__heading {
position: relative;
margin-top: 1rem;
font-size: 2.25rem;
line-height: 1.05;
color: var(--color-offerings-ink);
}
@media (min-width: 768px) { .theme-offerings__heading { font-size: 3rem; } }
@media (min-width: 1024px) { .theme-offerings__heading { font-size: 3.375rem; } }
.theme-offerings__rows-col { flex: 1; min-width: 0; }
.theme-offerings__list { position: relative; }
.theme-offerings__row {
position: relative;
display: flex;
align-items: center;
gap: 1.25rem;
padding-block: 1rem;
min-height: 68px;
border-bottom: 1px solid color-mix(in srgb, hsl(30 12% 65%) 25%, transparent);
transition: border-color 0.3s ease;
}
@media (min-width: 768px) { .theme-offerings__row { gap: 2rem; min-height: 84px; padding-block: 0; } }
.theme-offerings__row:last-child { border-bottom: none; }
.theme-offerings__row:hover { border-color: color-mix(in srgb, hsl(21 55% 64%) 45%, transparent); }
.theme-offerings__row-n {
font-family: var(--font-body);
font-size: 14px;
letter-spacing: 0.04em;
width: 1.5rem;
color: var(--color-offerings-copper);
transition: transform 0.3s ease;
}
@media (min-width: 768px) { .theme-offerings__row-n { font-size: 16px; width: 2rem; } }
.theme-offerings__row:hover .theme-offerings__row-n { transform: translateX(3px); }
.theme-offerings__row-label {
font-family: var(--font-display);
font-size: 1.25rem;
line-height: var(--leading-tight);
color: var(--color-offerings-ink);
}
@media (min-width: 768px) { .theme-offerings__row-label { font-size: 1.5rem; } }
@media (min-width: 1024px) { .theme-offerings__row-label { font-size: 1.625rem; } }
/* ---------------------------------------------------------------------
13. Copper Craft.
------------------------------------------------------------------- */
.theme-coppercraft__inner { padding-block: 4rem; }
@media (min-width: 768px) { .theme-coppercraft__inner { padding-block: 5rem; } }
.theme-coppercraft__layout {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}
@media (min-width: 1024px) { .theme-coppercraft__layout { grid-template-columns: repeat(12, 1fr); gap: 4rem; } }
.theme-coppercraft__image-col { position: relative; }
@media (min-width: 1024px) { .theme-coppercraft__image-col { grid-column: span 7; } }
.theme-coppercraft__wire { display: none; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 8rem; height: 4rem; pointer-events: none; z-index: 10; overflow: visible; }
@media (min-width: 1024px) { .theme-coppercraft__wire { display: block; } }
.theme-coppercraft__frame {
position: relative;
aspect-ratio: 5 / 4;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
box-shadow: var(--shadow-elevated);
background: hsl(263 24% 7%);
clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px));
}
.theme-coppercraft__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; transform: scale(1.25); }
.theme-coppercraft__frame-shade { position: absolute; inset: 0; box-shadow: inset 0 0 140px 30px hsl(263 40% 4% / 0.7); pointer-events: none; }
.theme-coppercraft__frame-gradient { position: absolute; inset: 0; background: linear-gradient(to top right, color-mix(in srgb, var(--color-background) 50%, transparent), transparent 60%); pointer-events: none; }
.theme-coppercraft__content-col { min-width: 0; }
@media (min-width: 1024px) { .theme-coppercraft__content-col { grid-column: span 5; } }
.theme-coppercraft__eyebrow { display: block; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 1.25rem; }
.theme-coppercraft__heading { font-size: 2.25rem; line-height: 1.08; margin-bottom: 1.5rem; max-width: 14ch; }
@media (min-width: 768px) { .theme-coppercraft__heading { font-size: 3rem; } }
.theme-coppercraft__price { font-size: 22px; color: var(--color-foreground); margin-bottom: 1.5rem; }
@media (min-width: 768px) { .theme-coppercraft__price { font-size: 24px; } }
.theme-coppercraft__price del { opacity: 0.5; margin-right: 0.4em; }
.theme-coppercraft__excerpt { font-size: 16px; color: color-mix(in srgb, var(--color-foreground) 90%, transparent); line-height: 1.8; max-width: 58ch; margin-bottom: 2.25rem; }
@media (min-width: 768px) { .theme-coppercraft__excerpt { font-size: 17px; } }
.theme-coppercraft__divider { margin-top: 3.5rem; }
@media (min-width: 768px) { .theme-coppercraft__divider { margin-top: 4rem; } }
/* ---------------------------------------------------------------------
14. About.
------------------------------------------------------------------- */
.theme-about { position: relative; }
.theme-about__emblem { position: absolute; inset: 0; display: none; align-items: center; justify-content: flex-end; pointer-events: none; }
@media (min-width: 768px) { .theme-about__emblem { display: flex; } }
.theme-about__emblem img { width: 480px; max-width: 38%; margin-right: 5%; opacity: 0.09; mix-blend-mode: screen; }
.theme-about__inner { position: relative; padding-block: 3.5rem; }
@media (min-width: 768px) { .theme-about__inner { padding-block: 5rem; } }
.theme-about__layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .theme-about__layout { grid-template-columns: repeat(12, 1fr); gap: 4rem; } }
.theme-about__copy-col { min-width: 0; }
@media (min-width: 1024px) { .theme-about__copy-col { grid-column: span 6; } }
.theme-about__eyebrow { display: block; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 1.25rem; }
.theme-about__heading { font-size: 3rem; line-height: 1.04; margin-bottom: 2rem; }
@media (min-width: 768px) { .theme-about__heading { font-size: 3.75rem; } }
.theme-about__heading-italic { font-family: var(--font-display); font-style: italic; color: var(--color-primary); }
.theme-about__paragraph { font-size: 16px; color: color-mix(in srgb, var(--color-foreground) 90%, transparent); line-height: 1.8; max-width: 60ch; }
@media (min-width: 768px) { .theme-about__paragraph { font-size: 17px; } }
.theme-about__owner-row { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; }
.theme-about__owner-line { display: block; width: 3.5rem; height: 1px; background: color-mix(in srgb, var(--color-primary) 70%, transparent); }
.theme-about__owner-label { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 85%, transparent); }
.theme-about__image-col { min-width: 0; }
@media (min-width: 1024px) { .theme-about__image-col { grid-column: 8 / span 5; } }
.theme-about__image-col > .theme-about__frame,
.theme-about__image-col { position: relative; }
.theme-about__image-col { max-width: 420px; margin-inline: auto; width: 100%; }
.theme-about__wire { display: none; position: absolute; left: 0.5rem; top: 2rem; width: 6rem; height: 8rem; pointer-events: none; z-index: 10; overflow: visible; }
@media (min-width: 1024px) { .theme-about__wire { display: block; } }
.theme-about__frame {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
box-shadow: var(--shadow-elevated);
background: hsl(263 24% 7%);
clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px));
}
.theme-about__frame img { object-position: center 25%; }
.theme-about__frame-shade { position: absolute; inset: 0; box-shadow: inset 0 0 120px 20px hsl(263 40% 4% / 0.55); pointer-events: none; }
.theme-about__frame-gradient { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--color-surface-indigo) 40%, transparent), transparent 60%); pointer-events: none; }
/* ---------------------------------------------------------------------
15. Services.
------------------------------------------------------------------- */
.theme-services__inner { padding-block: 4rem; }
@media (min-width: 768px) { .theme-services__inner { padding-block: 6rem; } }
.theme-services__header { max-width: 42rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .theme-services__header { margin-bottom: 4rem; } }
.theme-services__eyebrow { display: block; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 1rem; }
.theme-services__heading { font-size: 2.25rem; line-height: 1.05; }
@media (min-width: 768px) { .theme-services__heading { font-size: 3.75rem; } }
.theme-services__heading-italic { font-family: var(--font-display); font-style: italic; color: var(--color-primary); }
.theme-services__paragraph { margin-top: 1.5rem; font-size: var(--text-body-md); color: var(--text-muted-85); line-height: var(--leading-relaxed); max-width: 54ch; }
@media (min-width: 768px) { .theme-services__paragraph { font-size: var(--text-body-lg); } }
.theme-services__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .theme-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.theme-service-card {
position: relative;
padding: 1.75rem;
border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
background: hsl(263 28% 9% / 0.55);
transition: border-color 0.3s ease;
}
@media (min-width: 768px) { .theme-service-card { padding: 2rem; } }
.theme-service-card:hover { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); }
.theme-service-card__body { display: flex; align-items: flex-start; gap: 1.25rem; }
.theme-service-card__icon {
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
border-radius: 2px;
color: var(--color-primary);
transition: transform 0.3s ease;
}
.theme-service-card:hover .theme-service-card__icon { transform: translateY(-2px); }
.theme-service-card__text { min-width: 0; }
.theme-service-card__tag { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: color-mix(in srgb, var(--color-primary) 90%, transparent); margin-bottom: 0.5rem; }
.theme-service-card__name { font-size: 1.5rem; line-height: 1.2; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .theme-service-card__name { font-size: 1.625rem; } }
.theme-service-card__copy { font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 85%, transparent); line-height: 1.7; }
.theme-services__footnote { margin-top: 2.5rem; font-family: var(--font-body); font-size: var(--text-body-sm); letter-spacing: var(--tracking-wide); color: var(--text-muted-70); max-width: 60ch; }
/* ---------------------------------------------------------------------
16. Contact.
------------------------------------------------------------------- */
.theme-contact { position: relative; overflow: hidden; }
.theme-contact::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.3;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
mix-blend-mode: overlay;
}
.theme-contact__inner { position: relative; padding-block: 5rem; }
@media (min-width: 768px) { .theme-contact__inner { padding-block: 6rem; } }
.theme-contact__layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .theme-contact__layout { grid-template-columns: repeat(12, 1fr); gap: 4rem; } }
.theme-contact__copy-col { position: relative; min-width: 0; }
@media (min-width: 1024px) { .theme-contact__copy-col { grid-column: span 6; } }
.theme-contact__eyebrow { display: block; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 1.25rem; }
.theme-contact__heading { font-size: 3rem; line-height: 1.02; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .theme-contact__heading { font-size: 3.75rem; } }
@media (min-width: 1024px) { .theme-contact__heading { font-size: 4.5rem; } }
.theme-contact__heading-italic { font-family: var(--font-display); font-style: italic; color: var(--color-primary); }
.theme-contact__paragraph { font-size: 16px; color: color-mix(in srgb, var(--color-foreground) 90%, transparent); line-height: 1.8; max-width: 52ch; }
@media (min-width: 768px) { .theme-contact__paragraph { font-size: 17px; } }
.theme-contact__cta-col { position: relative; min-width: 0; display: flex; justify-content: center; }
@media (min-width: 1024px) { .theme-contact__cta-col { grid-column: span 6; justify-content: flex-end; } }
.theme-contact__glow {
position: absolute; inset-block: 0; right: 0; width: 100%; max-width: 420px;
background: radial-gradient(closest-side at 70% 50%, color-mix(in srgb, var(--color-primary) 32%, transparent), color-mix(in srgb, var(--color-primary) 8%, transparent) 45%, transparent 70%);
pointer-events: none;
}
.theme-contact__arc { position: absolute; top: 0; right: 0.5rem; width: 320px; height: 320px; max-width: 80%; pointer-events: none; overflow: visible; }
@media (min-width: 1024px) { .theme-contact__arc { right: 1.5rem; } }
.theme-contact__cta-wrap { position: relative; z-index: 10; width: 100%; max-width: 28rem; }
.theme-contact__cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
width: 100%;
padding-inline: 2rem;
min-height: 52px;
border-radius: var(--btn-radius);
font-family: var(--font-body);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 13px;
background: var(--color-primary);
color: var(--color-button-text);
border: 1px solid color-mix(in srgb, var(--color-primary) 90%, white 10%);
box-shadow: 0 10px 40px -12px color-mix(in srgb, var(--color-primary) 60%, transparent);
transition: transform 0.2s ease;
}
.theme-contact__cta-btn:hover { transform: translateY(-2px); }
.theme-contact__cta-btn:active { transform: translateY(0); }
.theme-contact__email-display { margin-top: 1rem; text-align: center; font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 90%, transparent); letter-spacing: 0.02em; }
/* ---------------------------------------------------------------------
17. Footer.
------------------------------------------------------------------- */
.site-footer {
position: relative;
overflow: hidden;
border-top: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
background-color: var(--color-background);
color: var(--color-foreground);
}
.site-footer__inner { padding-block: 3.5rem; }
@media (min-width: 768px) { .site-footer__inner { padding-block: 4rem; } }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
.site-footer__brand-col { min-width: 0; }
@media (min-width: 768px) { .site-footer__brand-col { grid-column: span 2; } }
@media (min-width: 1024px) { .site-footer__brand-col { grid-column: span 1; } }
.site-footer__brand { display: inline-block; margin-bottom: 1.5rem; }
.site-footer__logo { width: 180px !important; height: auto !important; }
@media (min-width: 768px) { .site-footer__logo { width: 200px !important; } }
@media (min-width: 1024px) { .site-footer__logo { width: 220px !important; } }
.site-footer__tagline { font-family: var(--font-body); font-size: var(--text-body-lg); color: var(--text-muted-85); line-height: 1.75; max-width: 280px; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .site-footer__tagline { font-size: var(--text-body-md); } }
.site-footer__email { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: var(--text-body-lg); color: var(--text-muted-90); min-height: 44px; transition: color 0.2s ease; }
@media (min-width: 768px) { .site-footer__email { font-size: 14px; } }
.site-footer__email:hover { color: var(--color-primary); }
.site-footer__col-title { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 1rem; }
.theme-footer-nav-list, .theme-footer-social-list { display: flex; flex-direction: column; }
.theme-footer-nav-list li a,
.theme-footer-social-list a {
font-size: 16px;
color: color-mix(in srgb, var(--color-foreground) 85%, transparent);
min-height: 44px;
display: flex;
align-items: center;
gap: 0.75rem;
transition: color 0.2s ease;
}
@media (min-width: 768px) { .theme-footer-nav-list li a, .theme-footer-social-list a { font-size: 14px; } }
.theme-footer-nav-list li a:hover,
.theme-footer-social-list a:hover { color: var(--color-primary); }
.site-footer__bottom {
margin-top: 3rem;
padding-top: 1.25rem;
border-top: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
@media (min-width: 640px) { .site-footer__bottom { flex-direction: row; justify-content: space-between; } }
.site-footer__bottom p { font-family: var(--font-body); font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted-70); }
.site-footer__bottom p:last-child { letter-spacing: var(--tracking-label-xl); }
/* ---------------------------------------------------------------------
18. Side cart: overlay + drawer.
------------------------------------------------------------------- */
#theme-cart-overlay {
position: fixed;
inset: 0;
background: rgba(5, 5, 5, 0.7);
z-index: 2147483000;
opacity: 0;
visibility: hidden;
animation: none;
}
body.cart-open #theme-cart-overlay {
opacity: 1;
visibility: visible;
animation: fadeIn 0.6s var(--ease-smooth) forwards;
}
#theme-cart-drawer {
position: fixed;
top: 0;
right: 0;
height: 100dvh;
width: min(460px, 100vw);
max-width: 100vw;
background: var(--color-surface-indigo);
color: var(--color-foreground);
border-left: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.7);
z-index: 2147483100;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.35s var(--ease-smooth);
}
body.cart-open #theme-cart-drawer { transform: translateX(0); }
#theme-cart-drawer.is-updating { opacity: 0.6; pointer-events: none; }
.theme-cart-drawer__header {
min-height: 72px;
padding-inline: 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
flex-shrink: 0;
}
.theme-cart-drawer__title { font-size: 26px; line-height: 1; color: var(--color-foreground); }
.theme-cart-drawer__count { margin-top: 0.375rem; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 72%, transparent); }
.theme-cart-drawer__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.theme-cart-drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; gap: 0.5rem; }
.theme-cart-drawer__empty svg { color: color-mix(in srgb, var(--color-foreground) 50%, transparent); margin-bottom: 0.5rem; }
.theme-cart-drawer__empty p { color: color-mix(in srgb, var(--color-foreground) 82%, transparent); margin-bottom: 1rem; font-size: 15px; }
.theme-cart-drawer__empty .btn-copper { max-width: 260px; }
.theme-cart-drawer__items { flex: 1; overflow-y: auto; padding: 0.25rem 1.25rem; }
.theme-cart-drawer__item { display: flex; gap: 0.875rem; padding-block: 1.125rem; border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent); }
.theme-cart-drawer__item:last-child { border-bottom: none; }
.theme-cart-drawer__item-image {
display: block;
width: 80px;
height: 96px;
flex-shrink: 0;
overflow: hidden;
border-radius: 10px;
background: var(--color-background);
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.theme-cart-drawer__item-image img,
.theme-cart-drawer__item-image .attachment-woocommerce_thumbnail {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover;
}
.theme-cart-drawer__item-body { flex: 1; min-width: 0; }
.theme-cart-drawer__item-name { display: block; font-family: var(--font-display); font-size: 16px; line-height: 1.25; color: var(--color-foreground); transition: color 0.2s ease; }
.theme-cart-drawer__item-name:hover { color: var(--color-primary); }
.theme-cart-drawer__item-variation { margin-top: 0.25rem; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 70%, transparent); }
.theme-cart-drawer__item-price { font-size: 14px; color: color-mix(in srgb, var(--color-foreground) 90%, transparent); margin-top: 0.25rem; }
.theme-cart-drawer__item-controls { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.theme-cart-drawer__remove { margin-left: auto; min-height: 36px; padding-inline: 0.25rem; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-primary); }
.theme-quantity-wrapper { display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); border-radius: 10px; }
.theme-quantity-wrapper--sm { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); }
.theme-qty-minus, .theme-qty-plus {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
transition: color 0.2s ease;
}
.theme-quantity-wrapper--sm .theme-qty-minus,
.theme-quantity-wrapper--sm .theme-qty-plus { width: 36px; height: 36px; }
.theme-qty-minus:hover, .theme-qty-plus:hover { color: var(--color-primary); }
.theme-qty-input, .theme-quantity-wrapper__value {
width: 48px;
min-width: 0;
text-align: center;
font-size: 14px;
font-family: var(--font-body);
background: transparent;
color: var(--color-foreground);
border: none;
-moz-appearance: textfield;
}
.theme-quantity-wrapper--sm .theme-qty-input,
.theme-quantity-wrapper--sm .theme-quantity-wrapper__value { width: 28px; font-size: 13px; }
.theme-qty-input::-webkit-outer-spin-button, .theme-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.theme-cart-drawer__footer { padding: 1.125rem 1.25rem 1.25rem; background: color-mix(in srgb, var(--color-surface-indigo) 80%, black 20%); border-top: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent); flex-shrink: 0; }
.theme-cart-drawer__subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.875rem; }
.theme-cart-drawer__subtotal span:first-child { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 80%, transparent); }
.theme-cart-drawer__subtotal-value { font-family: var(--font-display); font-size: 24px; color: var(--color-foreground); }
.theme-cart-drawer__checkout { width: 100%; }
.theme-cart-drawer__empty-btn { margin-top: 0.625rem; width: 100%; min-height: 40px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 70%, transparent); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: color 0.2s ease; }
.theme-cart-drawer__empty-btn:hover { color: var(--color-primary); }
/* Field labels (quantity, option) — match ProductDetail.tsx */
.theme-field-label {
font-family: var(--font-body);
font-size: var(--text-eyebrow);
letter-spacing: var(--tracking-label-xl);
text-transform: uppercase;
color: var(--text-muted-60);
margin-bottom: 0.75rem;
font-weight: 400;
}
.theme-atc-field { margin-bottom: 1.5rem; }
/* ---------------------------------------------------------------------
19. Single product page.
------------------------------------------------------------------- */
.theme-single-product__inner { padding-top: 2rem; padding-bottom: 6rem; }
.theme-back-to-shop {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
margin-bottom: 2rem;
transition: color 0.2s ease;
}
.theme-back-to-shop:hover { color: var(--color-primary); }
.theme-product-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; min-width: 0; }
@media (min-width: 1024px) { .theme-product-layout { grid-template-columns: repeat(12, 1fr); gap: 4rem; } }
.theme-product-gallery, .theme-product-info { min-width: 0; max-width: 100%; }
@media (min-width: 1024px) { .theme-product-gallery { grid-column: span 7; } }
@media (min-width: 1024px) { .theme-product-info { grid-column: span 5; position: sticky; top: 8rem; align-self: start; } }
.theme-product-gallery__main {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--color-surface-indigo);
border: 1px solid color-mix(in srgb, var(--color-border) 15%, transparent);
clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px));
}
.theme-product-gallery__main img { object-position: center 40%; }
.theme-product-thumbnails { margin-top: 1rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; flex-wrap: wrap; max-width: 100%; }
.theme-product-thumb {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--color-border) 15%, transparent);
transition: border-color 0.2s ease;
}
.theme-product-thumb:hover { border-color: color-mix(in srgb, var(--color-border) 40%, transparent); }
.theme-product-thumb.is-active { border-color: var(--color-primary); }
.theme-product-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: opacity 0.2s ease; }
.theme-product-thumb:hover img { opacity: 1; }
.theme-product-thumb.is-active img { opacity: 1; }
.theme-product-info__eyebrow { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 1rem; }
.theme-product-info__title { font-size: 34px; line-height: 1.08; margin-bottom: 1.25rem; overflow-wrap: break-word; word-break: break-word; }
@media (min-width: 640px) { .theme-product-info__title { font-size: 42px; } }
@media (min-width: 1024px) { .theme-product-info__title { font-size: 52px; } }
.theme-product-info__price { font-size: 22px; color: color-mix(in srgb, var(--color-foreground) 95%, transparent); margin-bottom: 2rem; }
@media (min-width: 768px) { .theme-product-info__price { font-size: 24px; } }
.theme-product-info__price del { opacity: 0.5; margin-right: 0.4em; }
.theme-product-info__stock { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1.5rem; }
.theme-product-info__stock.is-out-of-stock { color: color-mix(in srgb, var(--color-foreground) 60%, transparent); }
.theme-variation-pills { margin-bottom: 1.5rem; }
.theme-variation-pills__row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.theme-variation-pill {
padding: 0.625rem 1rem;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid color-mix(in srgb, var(--color-border) 30%, transparent);
border-radius: 10px;
transition: all 0.2s ease;
}
.theme-variation-pill:hover:not(:disabled):not(.is-disabled) { border-color: var(--color-primary); }
.theme-variation-pill.is-selected { background: var(--color-primary); color: var(--color-primary-foreground); border-color: var(--color-primary); }
.theme-variation-pill.is-disabled,
.theme-variation-pill:disabled {
opacity: 0.35;
pointer-events: none;
cursor: not-allowed;
}
.single-product .reset_variations { display: none !important; }
.theme-continue-shopping-link {
display: block;
text-align: center;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
padding-block: 0.75rem;
transition: color 0.2s ease;
}
.theme-continue-shopping-link:hover { color: var(--color-primary); }
.theme-meaning-accordion { margin-top: 2.5rem; border-top: 1px solid color-mix(in srgb, var(--color-border) 15%, transparent); }
.theme-meaning-accordion__toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 1.25rem;
text-align: left;
}
.theme-meaning-accordion__toggle span:first-child { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; transition: color 0.2s ease; }
.theme-meaning-accordion__toggle:hover span:first-child { color: var(--color-primary); }
.theme-meaning-accordion__toggle svg { transition: transform 0.2s ease; }
.theme-meaning-accordion__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.theme-meaning-accordion__panel { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease-smooth); }
.theme-meaning-accordion__panel.is-open { max-height: 4000px; }
.theme-meaning-accordion__panel-inner { padding-bottom: 2rem; font-family: var(--font-body); }
.theme-meaning-accordion__panel-inner p { font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 75%, transparent); line-height: 1.8; margin-bottom: 1em; overflow-wrap: break-word; word-break: break-word; }
.theme-product-details { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--color-border) 15%, transparent); }
.theme-product-details__title { font-size: 20px; margin-bottom: 1rem; }
.theme-product-details__body { font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 75%, transparent); line-height: 1.8; overflow-wrap: break-word; word-break: break-word; }
.theme-related-products { padding-top: 6rem; margin-top: 5rem; border-top: 1px solid color-mix(in srgb, var(--color-border) 15%, transparent); }
.theme-related-products__header { margin-bottom: 3rem; }
.theme-related-products__eyebrow { display: block; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.75rem; }
.theme-related-products__heading { font-size: 1.875rem; line-height: 1.2; }
@media (min-width: 768px) { .theme-related-products__heading { font-size: 3rem; } }
.theme-product-grid--related { grid-template-columns: 1fr; }
@media (min-width: 480px) { .theme-product-grid--related { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .theme-product-grid--related { grid-template-columns: repeat(4, 1fr); } }
/* ---------------------------------------------------------------------
20. Archive / category page.
------------------------------------------------------------------- */
.theme-archive__inner { padding-block: 4rem; }
.theme-archive__header { margin-bottom: 2.5rem; }
.theme-archive__eyebrow { display: block; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.75rem; }
.theme-archive__title { font-size: 2.5rem; }
.theme-archive__pagination { margin-top: 3rem; display: flex; justify-content: center; }
.theme-archive__pagination .page-numbers { display: inline-flex; gap: 0.5rem; align-items: center; }
.theme-archive__pagination .page-numbers li { display: inline-flex; }
.theme-archive__pagination a, .theme-archive__pagination span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 40px; height: 40px; border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--color-border) 25%, transparent);
font-size: 13px;
}
.theme-archive__pagination .current { background: var(--color-primary); color: var(--color-primary-foreground); border-color: var(--color-primary); }
/* ---------------------------------------------------------------------
21. 404 page.
------------------------------------------------------------------- */
.theme-404__inner { padding-block: 6rem; text-align: center; max-width: 42rem; margin-inline: auto; }
.theme-404__heading { font-size: 3rem; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .theme-404__heading { font-size: 3.75rem; } }
.theme-404__message { font-size: 16px; color: color-mix(in srgb, var(--color-foreground) 80%, transparent); margin-bottom: 2.5rem; line-height: 1.7; }
/* Generic page/entry-content spacing for pages without a dedicated section. */
.theme-page__inner { padding-block: 3rem; }
.page-title { font-size: 2.25rem; margin-bottom: 1.5rem; }
.entry-content { font-size: 16px; line-height: 1.75; color: color-mix(in srgb, var(--color-foreground) 90%, transparent); }
.entry-content p { margin-bottom: 1em; }
/* =====================================================================
22. WooCommerce core style overrides (Section 14).
================================================================== */
/* --- Add-to-cart button: full override (Section 11.4.1) --- */
.single_add_to_cart_button.button,
.add_to_cart_button.button,
a.single_add_to_cart_button,
a.add_to_cart_button {
background-color: var(--color-primary) !important;
color: var(--color-button-text) !important;
border: none !important;
border-radius: var(--btn-radius) !important;
min-height: var(--btn-height) !important;
padding: var(--btn-padding) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-family: var(--font-body) !important;
font-size: var(--btn-font-size) !important;
font-weight: var(--btn-font-weight) !important;
letter-spacing: var(--btn-letter-spacing) !important;
text-transform: var(--btn-text-transform) !important;
cursor: pointer !important;
transition: opacity 0.2s ease !important;
}
.single_add_to_cart_button.button:hover,
.add_to_cart_button.button:hover {
opacity: 0.85 !important;
background-color: var(--color-primary) !important;
color: var(--color-button-text) !important;
}
.single_add_to_cart_button.button:disabled,
.single_add_to_cart_button.button.disabled,
.add_to_cart_button.button:disabled,
.add_to_cart_button.button.disabled {
cursor: not-allowed !important;
opacity: 0.4 !important;
pointer-events: none !important;
}
.single_add_to_cart_button.button:disabled:hover,
.single_add_to_cart_button.button.disabled:hover,
.add_to_cart_button.button:disabled:hover,
.add_to_cart_button.button.disabled:hover {
opacity: 0.4 !important;
background-color: var(--color-primary) !important;
}
/* Card compact add-to-cart button — overrides the global rules above. */
.theme-product-card__add-btn.add_to_cart_button.ajax_add_to_cart {
min-height: unset !important;
width: auto;
padding: 0.625rem 1rem !important;
border-radius: 10px !important;
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: var(--tracking-ui-md) !important;
text-transform: uppercase !important;
gap: 0.5rem;
}
@media (min-width: 768px) { .theme-product-card__add-btn.add_to_cart_button.ajax_add_to_cart { font-size: 12px !important; } }
.ajax_add_to_cart.theme-btn-loading {
opacity: 0.6 !important;
pointer-events: none !important;
cursor: wait !important;
}
.single-product .single_add_to_cart_button.loading::after,
.ajax_add_to_cart.loading::after { display: none !important; }
.single_add_to_cart_button.is-added-confirmation { background-color: var(--color-primary) !important; }
/* --- Hide "View cart" injected after AJAX add (Section 11.4.2) --- */
.woocommerce-page a.added_to_cart.wc-forward,
.single-product a.added_to_cart.wc-forward,
body a.added_to_cart.wc-forward {
display: none !important;
}
.theme-attr-select-hidden { display: none !important; }
/* --- Variation attribute table layout (Section 11.5.1) --- */
.single-product .variations.shop_attributes tbody,
.single-product .variations tbody tr,
.single-product .variations tbody td {
display: block;
width: 100%;
}
.single-product .variations tbody td.label {
padding-bottom: 0.75rem;
font-family: var(--font-body);
font-size: var(--text-eyebrow);
letter-spacing: var(--tracking-label-xl);
text-transform: uppercase;
color: var(--text-muted-60);
}
.single-product .variations tbody td.value { padding-top: 0; }
.single-product table.variations { width: 100%; border: none; }
/* --- Quantity + add-to-cart row (Section 11.13) --- */
.single-product .theme-add-to-cart-area {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
margin-bottom: 0.75rem;
}
.single-product .theme-add-to-cart-area .single_add_to_cart_button,
.single-product .theme-add-to-cart-area .theme-btn-primary {
flex: none;
width: 100%;
min-width: 0;
margin-bottom: 0.75rem;
}
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-variation-description,
.single-product .posted_in {
overflow-wrap: break-word;
word-break: break-word;
}
/* --- WooCommerce notices: scoped hiding (Section 14.1) --- */
.single-product .woocommerce-message,
.single-product .woocommerce-info {
display: none;
}
#theme-cart-drawer .woocommerce-message {
display: none;
}
.woocommerce-error {
background: color-mix(in srgb, #b82e2e 15%, var(--color-surface-indigo));
border: 1px solid #b82e2e;
color: var(--color-foreground);
padding: 1rem 1.25rem;
border-radius: 10px;
font-size: 14px;
list-style: none;
margin-bottom: 1.5rem;
}
.woocommerce-message, .woocommerce-info {
background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface-indigo));
border: 1px solid var(--color-primary);
color: var(--color-foreground);
padding: 1rem 1.25rem;
border-radius: 10px;
font-size: 14px;
margin-bottom: 1.5rem;
}
/* =====================================================================
23. Checkout Block, Cart & My Account width/alignment parity
(Sections 13, 13.7). Site uses .container-wide as its global container.
================================================================== */
body.woocommerce-checkout .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-account .site-main {
padding-top: calc(var(--header-height, 80px) + 1.5rem);
padding-bottom: 4rem;
background-color: var(--color-background);
color: var(--color-foreground);
min-height: 60vh;
}
body.woocommerce-checkout .page-title,
body.woocommerce-cart .page-title,
body.woocommerce-account .page-title {
font-size: 38px;
line-height: 1.05;
margin-bottom: 2rem;
}
@media (min-width: 768px) {
body.woocommerce-checkout .page-title,
body.woocommerce-cart .page-title,
body.woocommerce-account .page-title { font-size: 56px; }
}
/* CASE A: site has a global .container-wide with max-width — do not add
max-width:100% to .entry-content on checkout (Section 13.1 CASE A). */
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-cart .wp-block-woocommerce-cart {
background: transparent;
}
/* Two-column split — single 50/50 grid on the checkout sidebar layout only
(no nested layout grids; Section 13.2). */
body.woocommerce-checkout .wc-block-checkout {
display: block;
}
@media (min-width: 768px) {
body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout.is-large {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 2.5rem;
align-items: start;
}
}
@media (min-width: 1024px) {
body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout.is-large {
gap: 4rem;
}
}
body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-checkout__sidebar {
display: block;
min-width: 0;
width: 100%;
max-width: none;
}
body.woocommerce-checkout .wc-block-components-notice-banner {
grid-column: 1 / -1;
}
/* Checkout field wrappers — visual styling lives on inputs only; do not
copy .input-celestial padding (0.75rem 1rem) here — WC Blocks padding. */
body.woocommerce-checkout .wc-block-components-text-input,
body.woocommerce-checkout .wc-block-components-combobox,
body.woocommerce-checkout .wc-block-components-select {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-combobox input,
body.woocommerce-checkout .wc-block-components-combobox .components-combobox-control__input,
body.woocommerce-checkout .wc-block-components-select select,
body.woocommerce-checkout .wc-block-components-textarea textarea {
width: 100% !important;
max-width: none !important;
background: hsl(267 30% 10%) !important;
color: var(--color-foreground) !important;
border: 1px solid color-mix(in srgb, var(--color-border) 25%, transparent) !important;
border-radius: 10px !important;
font-family: var(--font-body) !important;
font-size: 1rem !important;
transition: border-color 0.2s ease !important;
}
body.woocommerce-checkout .wc-block-components-text-input input::placeholder,
body.woocommerce-checkout .wc-block-components-textarea textarea::placeholder,
body.woocommerce-checkout .wc-block-components-combobox input::placeholder {
color: var(--text-muted-60) !important;
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-combobox input:focus,
body.woocommerce-checkout .wc-block-components-select select:focus,
body.woocommerce-checkout .wc-block-components-textarea textarea:focus,
body.woocommerce-checkout .wc-block-components-text-input input:focus-visible {
outline: none !important;
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
}
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-checkbox label {
display: block;
margin-bottom: 0.5rem;
color: var(--text-muted-85);
font-family: var(--font-body);
font-size: 13px;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
}
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-panel__button {
font-family: var(--font-display);
font-size: 26px;
line-height: 1.2;
font-weight: 400;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
font-family: var(--font-display);
font-size: 26px;
line-height: 1.2;
}
body.woocommerce-checkout .wc-block-components-product-name {
font-family: var(--font-display);
font-size: 16px;
line-height: 1.25;
}
@media (min-width: 768px) {
body.woocommerce-checkout .wc-block-components-product-name { font-size: 16px; }
}
body.woocommerce-checkout .wc-block-components-formatted-money-amount,
body.woocommerce-checkout .wc-block-components-totals-item__value {
font-family: var(--font-body);
font-size: 14px;
}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-family: var(--font-display);
font-size: 26px;
}
body.woocommerce-checkout .wc-block-checkout__sidebar,
body.woocommerce-checkout .wc-block-cart-items,
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
background-color: var(--color-surface-indigo);
border-radius: var(--card-radius);
padding: var(--section-padding);
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-checkout .wc-block-components-button.wp-element-button {
background-color: var(--color-primary) !important;
color: var(--color-button-text) !important;
border-radius: var(--btn-radius) !important;
font-family: var(--font-body) !important;
font-size: var(--btn-font-size) !important;
font-weight: var(--btn-font-weight) !important;
letter-spacing: var(--btn-letter-spacing) !important;
text-transform: var(--btn-text-transform) !important;
border: none !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
opacity: 0.85 !important;
}
body.woocommerce-checkout .wc-block-components-notice-banner {
border-radius: 10px;
}
body.woocommerce-checkout .wc-block-components-notice-banner.is-error {
background: color-mix(in srgb, #b82e2e 15%, var(--color-surface-indigo));
border-color: #b82e2e;
}
/* Mobile: form first, order summary second (native block order already
matches; no CSS `order` override necessary). Desktop grid handles split. */
/* =====================================================================
24. Order-received (thank you) page (Section 22.8).
================================================================== */
body.theme-thankyou-page { overflow-x: hidden; }
body.theme-thankyou-page .theme-thankyou {
padding-bottom: 2rem;
}
body.theme-thankyou-page .woocommerce-order h2,
body.theme-thankyou-page .woocommerce-order-details__title {
font-size: 1.75rem;
padding-bottom: 1rem;
}
body.theme-thankyou-page .woocommerce-order-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
list-style: none;
padding: 0;
margin-bottom: 2rem;
}
body.theme-thankyou-page .woocommerce-order-overview li {
background: var(--color-surface-indigo);
border-radius: 10px;
padding: 1rem;
font-size: 14px;
}
body.theme-thankyou-page .woocommerce-order-overview li strong {
display: block;
margin-top: 0.25rem;
font-family: var(--font-display);
font-size: 18px;
}
body.theme-thankyou-page .woocommerce-order-details table,
body.theme-thankyou-page .woocommerce-table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
margin-bottom: 2rem;
}
body.theme-thankyou-page .woocommerce-order-details table th,
body.theme-thankyou-page .woocommerce-order-details table td {
padding: 0.75rem;
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 20%, transparent);
text-align: left;
font-size: 14px;
}
body.theme-thankyou-page .woocommerce-order-details tfoot th { text-align: left; }
body.theme-thankyou-page .woocommerce-order-details tfoot td { text-align: right; }
body.theme-thankyou-page .woocommerce-customer-details {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
body.theme-thankyou-page .woocommerce-customer-details address {
max-width: 480px;
overflow-wrap: break-word;
background: var(--color-surface-indigo);
border-radius: 10px;
padding: 1.25rem;
font-style: normal;
line-height: 1.7;
}