:root {
--wearal-ink: #050505;
--wearal-stealth: #1c1d22;
--wearal-polar: #f5f6fa;
--wearal-graphite: #32343c;
--wearal-signal: #b4ff2b;
--wearal-coral: #ff5e5b;
--wearal-muted: #8b8d98;
--wearal-surface: #ffffff;
--wearal-surface-alt: #f4f5f7;
--wearal-border: rgba(5, 5, 5, 0.08);
--wearal-glass: rgba(255, 255, 255, 0.8);
--wearal-chip-surface: rgba(5, 5, 5, 0.08);
--wearal-radius: 1.5rem;
--wearal-card-radius: 1.125rem;
--wearal-grid-gap: clamp(1rem, 2vw, 2.5rem);
--wearal-shadow-soft: 0 25px 45px rgba(5, 5, 5, 0.15);
--wearal-shadow-hard: 0 12px 24px rgba(0, 0, 0, 0.35);
--wearal-font-heading: 'Space Grotesk', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
--wearal-font-body: 'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
--wearal-polar: #05070b;
--wearal-graphite: #e2e5ef;
--wearal-muted: #a8aec0;
--wearal-surface: #0f1118;
--wearal-surface-alt: #161922;
--wearal-border: rgba(255, 255, 255, 0.12);
--wearal-glass: rgba(10, 12, 18, 0.85);
--wearal-chip-surface: rgba(255, 255, 255, 0.12);
--wearal-shadow-soft: 0 35px 55px rgba(0, 0, 0, 0.7);
--wearal-shadow-hard: 0 25px 45px rgba(0, 0, 0, 0.85);
}
.wearal-theme {
color: var(--wearal-graphite);
background-color: var(--wearal-polar);
}
.wearal-theme h1,
.wearal-theme h2,
.wearal-theme h3,
.wearal-theme h4,
.wearal-theme h5,
.wearal-theme h6 {
color: #f8f9ff;
}
.wearal-chip {
color: var(--wearal-graphite);
border-color: var(--wearal-border);
}
.wearal-chip.is-active,
.wearal-chip:hover {
color: var(--wearal-polar);
}
}
.wearal-theme {
color: var(--wearal-graphite);
background-color: var(--wearal-polar);
font-family: var(--wearal-font-body);
scroll-behavior: smooth;
}
body.wearal-theme {
font-size: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);
line-height: 1.55;
letter-spacing: -0.01em;
}
.wearal-theme h1,
.wearal-theme h2,
.wearal-theme h3,
.wearal-theme h4,
.wearal-theme h5,
.wearal-theme h6 {
font-family: var(--wearal-font-heading);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--wearal-ink);
}
.wearal-theme a {
color: inherit;
transition: color 0.2s ease, opacity 0.2s ease;
}
.wearal-theme a:hover,
.wearal-theme a:focus-visible {
color: var(--wearal-signal);
}   .wearal-shell {
width: min(1200px, 90vw);
margin-inline: auto;
padding-block: clamp(2rem, 4vw, 5rem);
}
.wearal-stack {
display: grid;
gap: var(--wearal-grid-gap);
}
.wearal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--wearal-grid-gap);
align-items: start;
}   .site-header {
background: rgba(5, 5, 5, 0.9);
color: var(--wearal-polar);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: transform 0.4s ease, background 0.4s ease, padding 0.4s ease;
}
.wearal-site-header--compressed .site-header {
padding-block: 0.5rem !important;
background: rgba(5, 5, 5, 0.95);
}
.primary-navigation .menu-item > a {
font-family: var(--wearal-font-heading);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 1rem 1.25rem;
}
.primary-navigation .menu-item > a::after {
content: '';
display: block;
margin-top: 0.125rem;
width: 0;
height: 2px;
background: var(--wearal-signal);
transition: width 0.3s ease;
}
.primary-navigation .menu-item:hover > a::after,
.primary-navigation .menu-item:focus-within > a::after,
.primary-navigation .current-menu-item > a::after {
width: 100%;
} .wearal-mega-panel {
position: absolute;
inset-inline: 5%;
top: 100%;
z-index: 20;
display: none;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.75rem;
padding: 2.5rem;
background: var(--wearal-ink);
border-radius: var(--wearal-radius);
box-shadow: var(--wearal-shadow-hard);
}
.menu-item-has-children:hover > .wearal-mega-panel,
.menu-item-has-children:focus-within > .wearal-mega-panel {
display: grid;
}
.wearal-mega-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: var(--wearal-card-radius);
padding: 1.75rem;
min-height: 220px;
color: var(--wearal-polar);
}
.wearal-mega-card h3 {
font-size: 1rem;
margin-bottom: 0.75rem;
text-transform: uppercase;
}   .wearal-hero {
min-height: clamp(40rem, 70vh, 52rem);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
align-items: stretch;
gap: clamp(1rem, 1.5vw, 2rem);
padding: clamp(2rem, 4vw, 5rem);
margin: clamp(1rem, 3vw, 3rem) auto;
border-radius: clamp(1rem, 3vw, 2.5rem);
background: linear-gradient(135deg, var(--wearal-ink), #090909 55%, var(--wearal-stealth));
color: var(--wearal-polar);
box-shadow: var(--wearal-shadow-soft);
}
.wearal-hero__copy {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.wearal-hero__visual {
position: relative;
border-radius: var(--wearal-card-radius);
overflow: hidden;
background: radial-gradient(circle at top left, rgba(180, 255, 43, 0.2), transparent 55%),
radial-gradient(circle at bottom right, rgba(255, 94, 91, 0.18), transparent 65%);
min-height: 22rem;
}
.wearal-hero__visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wearal-hero__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
height: 100%;
padding: 1rem;
}
.wearal-hero__tile {
border-radius: var(--wearal-card-radius);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
animation: wearalPulse 6s ease-in-out infinite;
}
.wearal-hero__tile:nth-child(odd) {
animation-delay: 1.2s;
}
.wearal-glitch {
display: grid;
place-items: center;
font-size: clamp(4rem, 10vw, 8rem);
font-family: var(--wearal-font-heading);
font-weight: 700;
color: rgba(255, 255, 255, 0.08);
text-transform: uppercase;
position: relative;
}
.wearal-glitch span:nth-child(2) {
position: absolute;
color: rgba(180, 255, 43, 0.2);
transform: translate(8px, 8px);
}
@keyframes wearalPulse {
0% {
opacity: 0.4;
transform: translateY(0);
}
50% {
opacity: 1;
transform: translateY(-6px);
}
100% {
opacity: 0.4;
transform: translateY(0);
}
}
.wearal-hero__eyebrow {
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.35em;
color: var(--wearal-signal);
}
.wearal-hero__cta-group {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.wearal-button,
.wpcf7 input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 1.75rem;
border-radius: 999px;
border: none;
font-weight: 600;
font-family: var(--wearal-font-heading);
text-transform: uppercase;
letter-spacing: 0.12em;
background: var(--wearal-signal);
color: var(--wearal-ink);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 12px 24px rgba(180, 255, 43, 0.35);
}
.wearal-button--ghost {
background: transparent;
color: var(--wearal-polar);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: none;
}
.wearal-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
transform: translateY(-3px);
}   .wearal-page-hero {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--wearal-grid-gap);
margin-bottom: var(--wearal-grid-gap);
padding: clamp(1.5rem, 3vw, 3rem);
border-radius: var(--wearal-card-radius);
background: var(--wearal-surface);
box-shadow: var(--wearal-shadow-soft);
}
.wearal-page-hero__visual {
border-radius: var(--wearal-card-radius);
overflow: hidden;
}
.wearal-page-hero__visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wearal-page__content > * {
max-width: 70ch;
}
.wearal-page__content figure {
border-radius: var(--wearal-card-radius);
overflow: hidden;
}
.wearal-post-meta {
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wearal-muted);
}
.wearal-post-meta a {
color: inherit;
text-decoration: none;
margin-right: 0.5rem;
}
.wearal-post-meta a:hover {
color: var(--wearal-signal);
}
.wearal-article {
background: var(--wearal-surface);
border-radius: var(--wearal-card-radius);
padding: clamp(1.5rem, 3vw, 3rem);
box-shadow: var(--wearal-shadow-soft);
}
.wearal-article img {
width: 100%;
height: auto;
border-radius: 1rem;
} .wearal-search__form {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
align-items: center;
}
.wearal-search__input {
flex: 1;
min-width: 280px;
border-radius: 999px;
border: 1px solid var(--wearal-border);
padding: 0.9rem 1.25rem;
font-size: 1rem;
}
.wearal-search__input:focus-visible {
outline: 2px solid var(--wearal-signal);
border-color: transparent;
}   .wearal-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--wearal-surface);
border-radius: var(--wearal-card-radius);
padding: 1.5rem;
box-shadow: 0 25px 45px rgba(5, 5, 5, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wearal-card a {
color: inherit;
text-decoration: none;
}
.wearal-card:hover {
transform: translateY(-6px);
box-shadow: 0 35px 70px rgba(5, 5, 5, 0.18);
}
.wearal-card__media img {
width: 100%;
display: block;
}
.wearal-card__media {
border-radius: var(--wearal-card-radius);
overflow: hidden;
}
.wearal-card--category,
.wearal-card--drop {
padding: 0;
overflow: hidden;
}
.wearal-card--category strong {
display: block;
font-size: 1.35rem;
margin-bottom: 0.35rem;
}
.wearal-card--category span {
color: var(--wearal-muted);
}
.wearal-card--drop img,
.wearal-card--story img {
aspect-ratio: 4 / 3;
object-fit: cover;
}
.wearal-card--drop a,
.wearal-card--story a {
color: inherit;
text-decoration: none;
display: flex;
flex-direction: column;
height: 100%;
}
.wearal-card__body {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.wearal-card__actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0.9rem;
}
.wearal-card__meta {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
}
.wearal-pill {
position: absolute;
top: 1rem;
left: 1rem;
padding: 0.3rem 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
background: rgba(180, 255, 43, 0.2);
color: var(--wearal-ink);
}
.wearal-grid--categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--wearal-grid-gap);
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
border-radius: var(--wearal-card-radius);
overflow: hidden;
background: #fff;
box-shadow: 0 20px 50px rgba(5, 5, 5, 0.08);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.wearal-theme .woocommerce ul.products li.product:hover {
transform: translateY(-0.35rem);
box-shadow: 0 35px 65px rgba(5, 5, 5, 0.2);
}
.woocommerce ul.products li.product .button {
width: 100%;
border-radius: 0;
letter-spacing: 0.08em;
}
.wearal-card--product .price {
font-size: 1.15rem;
font-weight: 600;
}
.wearal-card--product .price del {
opacity: 0.5;
margin-right: 0.35rem;
}
.wearal-product-badges {
display: flex;
gap: 0.5rem;
margin-bottom: 0.85rem;
}
.wearal-product-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.85rem;
border-radius: 999px;
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(180, 255, 43, 0.15);
color: var(--wearal-signal);
}
.wearal-product-badge::before {
content: '';
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: currentColor;
}
.wearal-usp {
margin: 1.5rem 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.35rem;
color: var(--wearal-muted);
}
.wearal-usp li::before {
content: '↳';
margin-right: 0.45rem;
color: var(--wearal-signal);
} .wearal-chip {
border: 1px solid var(--wearal-border);
border-radius: 999px;
padding: 0.3rem 1rem;
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
background: transparent;
color: var(--wearal-ink);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.wearal-chip.is-active,
.wearal-chip:hover {
background: var(--wearal-ink);
color: var(--wearal-signal);
transform: translateY(-1px);
}
.woocommerce ul.products li.product.is-hidden {
display: none !important;
} .wearal-filters {
position: sticky;
top: 84px;
z-index: 9;
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
margin-bottom: 1.5rem;
border-radius: 1rem;
background: var(--wearal-glass);
border: 1px solid var(--wearal-border);
backdrop-filter: blur(12px);
box-shadow: 0 20px 35px rgba(5, 5, 5, 0.07);
}
.wearal-filters__chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}   .wearal-product {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--wearal-grid-gap);
margin-bottom: var(--wearal-grid-gap);
}
.wearal-product__gallery {
background: var(--wearal-surface);
border-radius: var(--wearal-card-radius);
padding: 1rem;
box-shadow: var(--wearal-shadow-soft);
}
.wearal-product__summary {
position: relative;
padding: clamp(1rem, 3vw, 3rem);
border-radius: var(--wearal-card-radius);
background: var(--wearal-surface);
box-shadow: var(--wearal-shadow-soft);
}
.single-product .product .summary {
position: relative;
padding: clamp(1rem, 3vw, 3rem);
border-radius: var(--wearal-card-radius);
background: var(--wearal-surface);
box-shadow: var(--wearal-shadow-soft);
}
.single-product .product .summary::before {
content: 'Drop Verified';
position: absolute;
top: 1rem;
right: 1rem;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--wearal-muted);
}
.wearal-share-drop {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 1rem;
padding: 0.4rem 0.75rem;
border-radius: 999px;
font-size: 0.85rem;
background: var(--wearal-chip-surface);
cursor: pointer;
}
.wearal-share-drop.is-success {
background: rgba(180, 255, 43, 0.2);
color: var(--wearal-signal);
}
.wearal-product__details .wearal-grid > div {
background: var(--wearal-surface);
border-radius: var(--wearal-card-radius);
padding: clamp(1rem, 2vw, 2rem);
box-shadow: var(--wearal-shadow-soft);
}   .wearal-drop .wearal-shell {
width: min(1200px, 92vw);
}
.wearal-drop__story {
background: var(--wearal-surface);
padding: clamp(1.5rem, 3vw, 3rem);
border-radius: var(--wearal-card-radius);
box-shadow: var(--wearal-shadow-soft);
}
.wearal-share-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
}
.wearal-button.is-success {
background: var(--wearal-signal);
color: var(--wearal-ink);
box-shadow: 0 12px 24px rgba(180, 255, 43, 0.35);
}   .wearal-modal {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: rgba(0, 0, 0, 0.45);
padding: 2rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.wearal-modal[aria-hidden="false"] {
opacity: 1;
pointer-events: auto;
}
.wearal-modal__panel {
width: min(520px, 90vw);
background: var(--wearal-surface);
border-radius: var(--wearal-card-radius);
padding: clamp(1.5rem, 3vw, 3rem);
box-shadow: var(--wearal-shadow-soft);
position: relative;
}
.wearal-modal__close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
border: none;
background: transparent;
font-size: 1.8rem;
cursor: pointer;
}
[data-anim=\"fade-up\"].is-in-view {
opacity: 1 !important;
transform: translateY(0) !important;
}   .wearal-progress {
width: 100%;
height: 6px;
border-radius: 999px;
background: var(--wearal-chip-surface);
overflow: hidden;
}
.wearal-progress__bar {
height: 100%;
background: linear-gradient(90deg, var(--wearal-signal), var(--wearal-coral));
width: 0;
transition: width 0.4s ease;
}
.wearal-progress__caption {
margin-top: 0.35rem;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--wearal-muted);
}
.wearal-cart {
background: var(--wearal-surface);
border-radius: var(--wearal-card-radius);
padding: clamp(1rem, 2vw, 2rem);
box-shadow: var(--wearal-shadow-soft);
}
.wearal-cart__grid {
display: grid;
grid-template-columns: 2fr minmax(280px, 1fr);
gap: var(--wearal-grid-gap);
}
.wearal-cart__items {
background: var(--wearal-surface);
border-radius: var(--wearal-card-radius);
padding: clamp(1rem, 2vw, 2rem);
box-shadow: var(--wearal-shadow-soft);
}
.wearal-cart-item {
display: grid;
grid-template-columns: 120px 1fr auto;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--wearal-border);
}
.wearal-cart-item__media img {
width: 100%;
border-radius: 0.75rem;
object-fit: cover;
}
.wearal-cart-item__controls {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
.wearal-cart-item__price {
font-weight: 600;
font-size: 1.05rem;
align-self: center;
}
.wearal-cart__summary {
background: var(--wearal-ink);
color: #fff;
border-radius: var(--wearal-card-radius);
padding: clamp(1rem, 2vw, 2.5rem);
box-shadow: var(--wearal-shadow-hard);
}
.wearal-cart__summary .wearal-progress {
background: rgba(255, 255, 255, 0.15);
}
.wearal-cart__summary .wearal-progress__bar {
background: rgba(255, 255, 255, 0.85);
}
.wearal-cart__actions {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.wearal-cart__coupon {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
.wearal-cart__coupon input {
border-radius: 999px;
border: 1px solid var(--wearal-border);
padding: 0.65rem 1rem;
}
.wearal-checkout__grid {
display: grid;
grid-template-columns: 2fr minmax(280px, 1fr);
gap: var(--wearal-grid-gap);
}
.wearal-card--form,
.wearal-card--summary {
background: var(--wearal-surface);
border-radius: var(--wearal-card-radius);
padding: clamp(1rem, 2vw, 2rem);
box-shadow: var(--wearal-shadow-soft);
}
.wearal-checkout__summary {
align-self: flex-start;
}
.wearal-cart-empty {
padding-block: clamp(2rem, 5vw, 6rem);
}
.wearal-thankyou {
padding-block: clamp(2rem, 5vw, 6rem);
}
.wearal-thankyou__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--wearal-grid-gap);
}
.wearal-thankyou__cta {
margin-top: 2rem;
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}   .site-footer {
background: var(--wearal-ink);
color: rgba(255, 255, 255, 0.92);
padding: clamp(2rem, 6vw, 6rem) 0;
}
.site-footer a {
color: inherit;
opacity: 0.7;
}
.site-footer a:hover {
opacity: 1;
color: var(--wearal-signal);
}   [data-cart-count] {
min-width: 1.65rem;
min-height: 1.65rem;
border-radius: 50%;
background: var(--wearal-coral);
color: #fff;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 0.75rem;
}
.wearal-floating-help {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 99;
background: var(--wearal-ink);
color: #fff;
padding: 0.85rem 1.5rem;
border-radius: 999px;
box-shadow: var(--wearal-shadow-hard);
}
@media (max-width: 768px) {
.site-header {
padding-block: 0.5rem;
}
.wearal-hero {
grid-template-columns: 1fr;
}
.wearal-filters {
flex-direction: column;
align-items: flex-start;
}
.primary-navigation .menu-item > a {
padding: 0.65rem 0;
font-size: 0.85rem;
}
.wearal-cart__grid,
.wearal-checkout__grid {
grid-template-columns: 1fr;
}
.wearal-cart-item {
grid-template-columns: 80px 1fr;
}
.wearal-page-hero {
grid-template-columns: 1fr;
}
}.rank-math-list-item{margin-bottom:2em}