/* =============================================================================
   3DCrafted — woocommerce.css
   WooCommerce-specific styles: Industrial Precision theme
   ============================================================================= */

/* =============================================================================
   1. Global WC page baseline
   ============================================================================= */

.woocommerce-page .site-main,
.woocommerce .site-main {
padding-block: 0; /* individual templates control padding */
}

.woocommerce .woocommerce-notices-wrapper,
.wc-notices-wrapper {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-8);
padding-top: var(--space-6);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
padding: var(--space-4) var(--space-6);
margin-bottom: var(--space-6);
list-style: none;
font-family: var(--font-body);
font-size: var(--text-body-sm);
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}

.woocommerce-message {
background: var(--color-surface-low);
border-left: 3px solid var(--color-on-primary-container);
color: var(--color-on-surface);
}

.woocommerce-info {
background: var(--color-tertiary-fixed);
border-left: 3px solid var(--color-on-tertiary-container);
color: var(--color-tertiary);
}

.woocommerce-error {
background: var(--color-error-container);
border-left: 3px solid var(--color-error);
color: var(--color-error);
}

.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
margin: 0;
padding: 0;
}

.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
background: var(--color-on-primary-container);
color: #fff !important;
padding: var(--space-2) var(--space-5);
font-family: var(--font-label);
font-size: var(--text-label-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
text-decoration: none;
margin-left: auto;
white-space: nowrap;
transition: opacity var(--transition-fast);
}

.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
opacity: 0.85;
text-decoration: none;
}

/* Star rating */
.star-rating {
color: var(--color-on-primary-container);
}

/* =============================================================================
   2. Breadcrumb
   ============================================================================= */

.woocommerce-breadcrumb {
font-family: var(--font-label);
font-size: var(--text-label-sm);
color: var(--color-on-surface-variant);
padding: var(--space-4) var(--space-8);
max-width: var(--container-max);
margin-inline: auto;
}

.woocommerce-breadcrumb a {
color: var(--color-on-surface-variant);
text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
color: var(--color-on-primary-container);
}

/* =============================================================================
   3. Product catalog — archive-product.php
   ============================================================================= */

.catalog-page__inner {
display: flex;
align-items: flex-start;
max-width: var(--container-max);
margin-inline: auto;
}

/* Sidebar */
.catalog-sidebar {
width: 272px;
flex-shrink: 0;
border-right: 1px solid var(--color-surface-high);
padding: var(--space-8) var(--space-6);
min-height: calc(100vh - 64px);
}

.catalog-sidebar__sticky {
position: sticky;
top: 80px;
}

.filter-group {
margin-bottom: var(--space-8);
}

.filter-group__title {
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-on-surface-variant);
margin-bottom: var(--space-4);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-surface-high);
}

.filter-check {
display: flex;
align-items: center;
gap: var(--space-3);
cursor: pointer;
padding-block: var(--space-2);
}

.filter-check input[type="checkbox"] {
appearance: none;
width: 14px;
height: 14px;
border: 1px solid var(--color-outline);
flex-shrink: 0;
cursor: pointer;
position: relative;
transition: border-color var(--transition-fast), background var(--transition-fast);
}

.filter-check input[type="checkbox"]:checked {
background: var(--color-on-primary-container);
border-color: var(--color-on-primary-container);
}

.filter-check input[type="checkbox"]:checked::after {
content: '';
position: absolute;
top: 1px;
left: 4px;
width: 4px;
height: 7px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);
}

.filter-check__label {
font-family: var(--font-body);
font-size: var(--text-body-sm);
color: var(--color-on-surface-variant);
line-height: 1;
}

.filter-price-track {
height: 2px;
background: var(--color-surface-high);
position: relative;
margin: var(--space-4) 0 var(--space-2);
}

.filter-price-fill {
position: absolute;
top: 0;
left: 20%;
right: 30%;
height: 100%;
background: var(--color-on-primary-container);
}

.filter-price-handle {
position: absolute;
top: 50%;
width: 12px;
height: 12px;
background: var(--color-on-primary-container);
transform: translate(-50%, -50%);
cursor: ew-resize;
}

.filter-price-labels {
display: flex;
justify-content: space-between;
}

.filter-price-labels span {
font-family: var(--font-label);
font-size: var(--text-label-sm);
color: var(--color-on-surface-variant);
}

.catalog-sidebar__reset {
width: 100%;
background: var(--color-surface-container);
color: var(--color-on-surface-variant);
border: none;
padding: var(--space-3) var(--space-4);
font-family: var(--font-label);
font-size: var(--text-label-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
cursor: pointer;
transition: background var(--transition-fast);
text-align: center;
text-decoration: none;
display: block;
margin-top: var(--space-8);
}

.catalog-sidebar__reset:hover {
background: var(--color-surface-high);
text-decoration: none;
color: var(--color-on-surface);
}

/* Catalog main grid area */
.catalog-grid {
flex: 1;
padding: var(--space-8);
background-image: radial-gradient(circle, var(--color-outline-variant) 1px, transparent 1px);
background-size: 20px 20px;
}

.catalog-grid__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--space-8);
}

.catalog-grid__eyebrow {
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--color-on-tertiary-container);
margin-bottom: var(--space-2);
}

.catalog-grid__title {
font-family: var(--font-headline);
font-size: var(--text-display-sm);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.03em;
color: var(--color-on-surface);
margin: 0;
}

.catalog-grid__sort {
display: flex;
align-items: center;
gap: var(--space-3);
flex-shrink: 0;
}

.catalog-grid__sort-label {
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-on-surface-variant);
}

.woocommerce-ordering .orderby {
background: var(--color-surface-lowest);
border: 1px solid var(--color-surface-high);
border-radius: 0;
font-family: var(--font-label);
font-size: var(--text-label-sm);
color: var(--color-on-surface);
padding: var(--space-2) var(--space-4);
cursor: pointer;
outline: none;
}

.woocommerce-ordering .orderby:focus {
border-color: var(--color-on-primary-container);
}

.catalog-grid__footer {
margin-top: var(--space-10);
padding-top: var(--space-6);
border-top: 1px solid var(--color-surface-high);
display: flex;
align-items: center;
justify-content: space-between;
}

.woocommerce-result-count {
font-family: var(--font-label);
font-size: var(--text-label-sm);
color: var(--color-on-surface-variant);
margin: 0;
}

/* =============================================================================
   4. Product card — content-product.php
   ============================================================================= */

.woocommerce ul.products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-1);
list-style: none;
margin: 0;
padding: 0;
}

.woocommerce ul.products li.product {
background: var(--color-surface-lowest);
display: flex;
flex-direction: column;
position: relative;
}

/* Re-style the default WC product loop when not using content-product.php override */
.woocommerce ul.products li.product a {
text-decoration: none;
}

/* Custom product card structure (from content-product.php override) */
.product-card {
background: var(--color-surface-lowest);
display: flex;
flex-direction: column;
border: 1px solid var(--color-surface-high);
position: relative;
}

.product-card__image-link {
display: block;
text-decoration: none;
}

.product-card__image-wrap {
aspect-ratio: 4 / 5;
overflow: hidden;
position: relative;
background: var(--color-surface-low);
}

.product-card__image,
.product-card__image-wrap > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(20%) contrast(1.05);
transition: transform var(--transition-base), filter var(--transition-base);
}

.product-card:hover .product-card__image,
.product-card:hover .product-card__image-wrap > img {
transform: scale(1.03);
filter: grayscale(0%) contrast(1.1);
}

.product-card__image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-image: radial-gradient(circle, var(--color-outline-variant) 1px, transparent 1px);
background-size: 8px 8px;
color: var(--color-on-surface-variant);
font-family: var(--font-label);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.15em;
}

.product-card__badge {
position: absolute;
top: var(--space-4);
left: var(--space-4);
z-index: 2;
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 3px var(--space-3);
line-height: 1.5;
}

.product-card__badge--sale,
.product-card__badge--new,
.product-card__badge--available {
background: var(--color-on-primary-container);
color: #fff;
}

.product-card__badge--low-stock {
background: var(--color-tertiary);
color: #fff;
}

.product-card__sku {
position: absolute;
bottom: var(--space-4);
right: var(--space-4);
z-index: 2;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: 'Courier New', monospace;
font-size: 9px;
color: rgba(255,255,255,0.5);
letter-spacing: 0.1em;
text-transform: uppercase;
pointer-events: none;
}

.product-card__body {
padding: var(--space-4) var(--space-5);
display: flex;
flex-direction: column;
flex: 1;
}

.product-card__meta-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--space-3);
}

.product-card__title {
font-family: var(--font-headline);
font-size: var(--text-headline-sm);
font-weight: 700;
color: var(--color-on-surface);
text-decoration: none;
line-height: 1.2;
}

.product-card__title:hover {
color: var(--color-on-primary-container);
text-decoration: none;
}

.product-card__price {
font-family: var(--font-headline);
font-size: var(--text-label-lg);
font-weight: 700;
color: var(--color-on-primary-container);
white-space: nowrap;
flex-shrink: 0;
padding-left: var(--space-3);
}

.product-card__price ins {
text-decoration: none;
color: var(--color-on-primary-container);
}

.product-card__price del {
font-size: var(--text-label-sm);
color: var(--color-outline);
font-weight: 400;
text-decoration: line-through;
}

/* Spec grid 2×2 */
.product-card__specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--color-surface-high);
border: 1px solid var(--color-surface-high);
margin-bottom: var(--space-4);
}

.product-card__spec {
background: var(--color-surface-lowest);
padding: var(--space-2) var(--space-3);
}

.product-card__spec-label {
font-family: var(--font-label);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-outline);
margin-bottom: 2px;
}

.product-card__spec-value {
font-family: var(--font-label);
font-size: var(--text-label-sm);
font-weight: 800;
color: var(--color-on-surface);
line-height: 1.2;
}

/* Card action buttons */
.product-card__actions {
display: flex;
gap: var(--space-2);
margin-top: auto;
}

.product-card__atc {
flex: 1;
background: var(--color-on-surface);
color: #fff !important;
border: none;
padding: var(--space-3) var(--space-4);
font-family: var(--font-label);
font-size: var(--text-label-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
}

.product-card__atc:hover {
background: var(--color-on-primary-container);
color: #fff !important;
text-decoration: none;
}

.product-card__compare {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid var(--color-surface-high);
color: var(--color-on-surface-variant);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
flex-shrink: 0;
}

.product-card__compare:hover {
background: var(--color-surface-low);
color: var(--color-on-surface);
}

/* Sale badge (default WC) */
.woocommerce span.onsale {
position: absolute;
top: var(--space-3);
left: var(--space-3);
z-index: 2;
background: var(--color-on-primary-container);
color: #fff;
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 3px var(--space-3);
min-width: unset;
min-height: unset;
border-radius: 0;
line-height: 1.5;
}

/* =============================================================================
   5. Category page — taxonomy-product_cat.php
   ============================================================================= */

.cat-hero {
position: relative;
min-height: 400px;
display: flex;
align-items: flex-end;
background: var(--color-primary-container);
overflow: hidden;
}

.cat-hero--has-image {
background-image: var(--cat-hero-bg);
background-size: cover;
background-position: center;
}

.cat-hero__grid-overlay {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
background-size: 20px 20px;
}

.cat-hero__fade-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--color-primary) 0%, rgba(38,7,0,0.5) 60%, transparent 100%);
}

.cat-hero__content {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding: var(--space-12) var(--space-8);
}

.cat-hero__eyebrow {
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3em;
color: rgba(255,255,255,0.5);
margin-bottom: var(--space-3);
}

.cat-hero__title {
font-family: var(--font-headline);
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.04em;
line-height: 1;
color: #fff;
margin-bottom: var(--space-4);
}

.cat-hero__dot {
color: var(--color-on-primary-container);
}

.cat-hero__description {
font-size: var(--text-body-md);
color: rgba(255,255,255,0.6);
max-width: 60ch;
line-height: 1.6;
margin: 0;
}

/* Sticky filter toolbar */
.cat-toolbar {
background: var(--color-surface-lowest);
border-bottom: 1px solid var(--color-surface-high);
position: sticky;
top: 65px;
z-index: 50;
}

.cat-toolbar__inner {
max-width: var(--container-max);
margin-inline: auto;
padding: var(--space-4) var(--space-8);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
flex-wrap: wrap;
}

.cat-toolbar__tabs {
display: flex;
gap: 0;
}

.cat-toolbar__tab {
font-family: var(--font-label);
font-size: var(--text-label-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-on-surface-variant);
text-decoration: none;
padding: var(--space-2) var(--space-5);
border-bottom: 2px solid transparent;
transition: color var(--transition-fast), border-color var(--transition-fast);
white-space: nowrap;
}

.cat-toolbar__tab:hover {
color: var(--color-on-surface);
text-decoration: none;
}

.cat-toolbar__tab--active {
color: var(--color-on-primary-container);
border-bottom-color: var(--color-on-primary-container);
}

.cat-toolbar__right {
display: flex;
align-items: center;
gap: var(--space-6);
}

.cat-toolbar__count {
font-family: var(--font-label);
font-size: var(--text-label-sm);
color: var(--color-on-surface-variant);
}

/* Category product grid */
.cat-grid-wrap {
max-width: var(--container-max);
margin-inline: auto;
padding: var(--space-10) var(--space-8);
}

.cat-grid-wrap .woocommerce ul.products {
grid-template-columns: repeat(4, 1fr);
}

/* =============================================================================
   6. Single product page — single-product.php
   ============================================================================= */

.single-product-page {
background: var(--color-surface-lowest);
}

.single-product-page__breadcrumb {
max-width: var(--container-max);
margin-inline: auto;
}

/* Two-column layout */
.sp-layout {
display: grid;
grid-template-columns: 7fr 5fr;
min-height: 600px;
border-top: 1px solid var(--color-surface-high);
}

/* Left: image column */
.sp-gallery {
background: var(--color-surface-low);
background-image: radial-gradient(circle, var(--color-outline-variant) 1px, transparent 1px);
background-size: 10px 10px;
position: relative;
display: flex;
flex-direction: column;
}

.sp-gallery__model-id {
position: absolute;
top: var(--space-6);
left: var(--space-6);
z-index: 2;
background: var(--color-tertiary);
color: #fff;
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
padding: 4px var(--space-4);
}

.sp-gallery__main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-16) var(--space-8);
position: relative;
}

/* Override WC gallery inside our layout */
.sp-gallery .woocommerce-product-gallery {
float: none !important;
width: 100% !important;
max-width: 580px;
margin: 0 auto;
}

.sp-gallery .woocommerce-product-gallery__image img {
width: 100%;
height: auto;
max-height: 480px;
object-fit: contain;
}

.sp-gallery .flex-viewport,
.sp-gallery .woocommerce-product-gallery__image {
background: transparent;
}

/* Technical callouts */
.sp-gallery__callout {
position: absolute;
display: flex;
align-items: center;
gap: var(--space-2);
pointer-events: none;
z-index: 3;
}

.sp-gallery__callout--nw {
top: 30%;
right: var(--space-8);
flex-direction: row-reverse;
}

.sp-gallery__callout--se {
bottom: 30%;
left: var(--space-8);
}

.sp-gallery__callout-line {
width: 64px;
height: 1px;
background: var(--color-on-tertiary-container);
flex-shrink: 0;
}

.sp-gallery__callout-label {
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-on-tertiary-container);
background: var(--color-surface-lowest);
padding: 2px var(--space-2);
border: 1px solid var(--color-on-tertiary-container);
white-space: nowrap;
}

/* Right: config column */
.sp-config {
background: var(--color-surface-lowest);
border-left: 1px solid var(--color-surface-high);
padding: var(--space-10) var(--space-8);
display: flex;
flex-direction: column;
}

.sp-config__inner {
display: flex;
flex-direction: column;
height: 100%;
}

.sp-config__title {
font-family: var(--font-headline);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
text-transform: uppercase;
color: var(--color-on-surface);
margin-bottom: var(--space-4);
}

.sp-config__price-row {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-6);
}

.sp-config__price {
font-family: var(--font-headline);
font-size: var(--text-display-sm);
font-weight: 300;
color: var(--color-on-surface);
}

.sp-config__price ins {
text-decoration: none;
color: var(--color-on-surface);
}

.sp-config__divider {
width: 1px;
height: var(--space-6);
background: var(--color-surface-high);
}

.sp-config__status {
font-family: var(--font-label);
font-size: var(--text-label-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-on-primary-container);
}

.sp-config__excerpt {
font-size: var(--text-body-md);
color: var(--color-on-surface-variant);
line-height: 1.7;
max-width: 48ch;
margin-bottom: var(--space-8);
}

/* WC single product summary hooks inside config */
.sp-config .woocommerce-product-details__short-description {
display: none; /* shown via .sp-config__excerpt instead */
}

/* WC form inside config */
.sp-config form.cart {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-6);
}

.sp-config form.cart .qty {
width: 72px;
padding: var(--space-3);
background: transparent;
border: none;
border-bottom: 2px solid var(--color-outline);
font-family: var(--font-body);
font-size: var(--text-body-md);
color: var(--color-on-surface);
text-align: center;
outline: none;
}

.sp-config form.cart .qty:focus {
border-bottom-color: var(--color-on-primary-container);
}

.sp-config form.cart .single_add_to_cart_button {
background: var(--gradient-primary);
color: #fff !important;
padding: var(--space-3) var(--space-8);
border: none;
font-family: var(--font-label);
font-size: var(--text-label-lg);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
cursor: pointer;
transition: opacity var(--transition-fast);
}

.sp-config form.cart .single_add_to_cart_button:hover {
opacity: 0.9;
}

/* Product meta (SKU, cats) inside config */
.sp-config .woocommerce-product-details__meta,
.sp-config .product_meta {
font-size: var(--text-body-sm);
color: var(--color-on-surface-variant);
margin-top: var(--space-4);
}

/* Badges below ATC */
.sp-config__badges {
display: flex;
align-items: center;
gap: var(--space-5);
padding-top: var(--space-6);
margin-top: auto;
border-top: 1px solid var(--color-surface-high);
}

.sp-config__badge {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-on-surface-variant);
}

.sp-config__badge .material-symbols-outlined {
font-size: 16px;
color: var(--color-on-primary-container);
}

/* =============================================================================
   7. Single product — spec table section
   ============================================================================= */

.sp-specs {
background: var(--color-surface-low);
padding: var(--space-16) 0;
border-top: 1px solid var(--color-surface-high);
}

.sp-specs__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-8);
display: grid;
grid-template-columns: 4fr 8fr;
gap: var(--space-16);
}

.sp-specs__eyebrow {
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--color-on-primary-container);
margin-bottom: var(--space-4);
}

.sp-specs__title {
font-family: var(--font-headline);
font-size: var(--text-display-sm);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.03em;
color: var(--color-on-surface);
margin-bottom: var(--space-5);
}

.sp-specs__text {
font-size: var(--text-body-sm);
color: var(--color-on-surface-variant);
line-height: 1.7;
margin-bottom: var(--space-6);
}

.sp-specs__quality-note {
background: var(--color-surface-lowest);
border-left: 4px solid var(--color-on-tertiary-container);
padding: var(--space-4) var(--space-5);
}

.sp-specs__quality-label {
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-on-tertiary-container);
margin-bottom: var(--space-2);
}

.sp-specs__quality-text {
font-size: var(--text-body-sm);
color: var(--color-on-surface-variant);
line-height: 1.6;
margin: 0;
}

.sp-specs__table {
width: 100%;
border-collapse: collapse;
background: var(--color-surface-lowest);
}

.sp-specs__table thead tr {
background: var(--color-surface-container);
}

.sp-specs__table th {
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-on-surface-variant);
padding: var(--space-3) var(--space-5);
text-align: left;
border-bottom: 1px solid var(--color-surface-high);
}

.sp-specs__table tbody tr:nth-child(even) {
background: var(--color-surface-low);
}

.sp-specs__table td {
padding: var(--space-3) var(--space-5);
font-size: var(--text-body-sm);
color: var(--color-on-surface);
border-bottom: 1px solid var(--color-surface-high);
vertical-align: middle;
}

.sp-specs__table td:first-child {
font-family: var(--font-label);
font-size: var(--text-label-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-on-surface-variant);
}

/* WC product tabs (reviews, additional info) in spec area */
.sp-specs .woocommerce-tabs {
margin-top: var(--space-10);
}

.sp-specs .woocommerce-tabs ul.tabs {
display: flex;
list-style: none;
margin: 0 0 var(--space-6);
padding: 0;
border-bottom: 1px solid var(--color-surface-high);
gap: var(--space-6);
}

.sp-specs .woocommerce-tabs ul.tabs li {
margin: 0;
padding: 0;
}

.sp-specs .woocommerce-tabs ul.tabs li a {
display: block;
padding-bottom: var(--space-3);
font-family: var(--font-label);
font-size: var(--text-label-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-on-surface-variant);
border-bottom: 2px solid transparent;
transition: color var(--transition-fast), border-color var(--transition-fast);
}

.sp-specs .woocommerce-tabs ul.tabs li.active a,
.sp-specs .woocommerce-tabs ul.tabs li a:hover {
color: var(--color-on-surface);
border-bottom-color: var(--color-on-primary-container);
text-decoration: none;
}

.sp-specs .woocommerce-tabs ul.tabs::before,
.sp-specs .woocommerce-tabs ul.tabs li::before {
display: none;
}

/* =============================================================================
   8. Single product — 3D preview section
   ============================================================================= */

.sp-preview {
padding: var(--space-16) 0;
background: var(--color-surface-lowest);
border-top: 1px solid var(--color-surface-high);
}

.sp-preview__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-8);
}

.sp-preview__viewport {
position: relative;
width: 100%;
aspect-ratio: 21 / 9;
background: #111;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.sp-preview__viewport-grid {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(99,133,255,0.2) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
}

.sp-preview__ui-label {
position: absolute;
font-family: var(--font-label);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #555;
}

.sp-preview__ui-label--tl { top: var(--space-4); left: var(--space-4); }
.sp-preview__ui-label--br { bottom: var(--space-4); right: var(--space-4); }

.sp-preview__content {
position: relative;
z-index: 2;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}

.sp-preview__btn-icon {
width: 56px;
height: 56px;
border: 2px solid var(--color-on-primary-container);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-on-primary-container);
background: none;
cursor: pointer;
transition: background var(--transition-fast);
}

.sp-preview__btn-icon:hover {
background: rgba(244, 91, 0, 0.1);
}

.sp-preview__title {
font-family: var(--font-headline);
font-size: var(--text-headline-md);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3em;
color: #fff;
}

.sp-preview__subtitle {
font-family: var(--font-label);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #555;
}

.sp-preview__load-btn {
background: none;
border: 1px solid rgba(255,255,255,0.3);
color: rgba(255,255,255,0.7);
padding: var(--space-2) var(--space-5);
font-family: var(--font-label);
font-size: var(--text-label-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.sp-preview__load-btn:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.6);
color: #fff;
}

/* =============================================================================
   9. Cart page
   ============================================================================= */

.woocommerce-cart .site-main {
padding-block: var(--space-12);
}

.woocommerce-cart-form__cart-item td {
vertical-align: middle;
}

.woocommerce table.shop_table {
width: 100%;
border-collapse: collapse;
background: var(--color-surface-lowest);
}

.woocommerce table.shop_table th {
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-on-surface-variant);
padding: var(--space-3) var(--space-5);
background: var(--color-surface-container);
border: none;
text-align: left;
}

.woocommerce table.shop_table td {
padding: var(--space-4) var(--space-5);
vertical-align: middle;
border: none;
border-bottom: 1px solid var(--color-surface-high);
}

.woocommerce table.cart img {
width: 80px;
height: 80px;
object-fit: cover;
}

.woocommerce .quantity .qty {
background: transparent;
border: none;
border-bottom: 2px solid var(--color-outline);
width: 60px;
text-align: center;
font-family: var(--font-body);
font-size: var(--text-body-md);
padding: var(--space-2);
color: var(--color-on-surface);
outline: none;
}

.woocommerce .quantity .qty:focus {
border-bottom-color: var(--color-on-primary-container);
}

.woocommerce a.remove {
color: var(--color-on-surface-variant) !important;
font-size: 1.25rem;
text-decoration: none;
}

.woocommerce a.remove:hover {
color: var(--color-error) !important;
background: none;
}

.woocommerce .cart_totals h2,
.woocommerce .cart_totals h3 {
font-family: var(--font-headline);
font-size: var(--text-headline-md);
margin-bottom: var(--space-6);
}

.woocommerce .cart_totals table {
width: 100%;
border-collapse: collapse;
}

.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-surface-high);
font-size: var(--text-body-sm);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
display: block;
text-align: center;
background: var(--gradient-primary);
color: #fff !important;
padding: var(--space-4) var(--space-8);
font-family: var(--font-label);
font-size: var(--text-label-lg);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
transition: opacity var(--transition-fast);
margin-top: var(--space-4);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
opacity: 0.9;
text-decoration: none;
}

/* =============================================================================
   10. Checkout
   ============================================================================= */

.woocommerce-checkout .site-main {
padding-block: var(--space-12);
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
font-family: var(--font-headline);
font-size: var(--text-headline-md);
margin-bottom: var(--space-6);
text-transform: uppercase;
letter-spacing: -0.02em;
}

.woocommerce form .form-row label {
display: block;
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-on-surface-variant);
margin-bottom: var(--space-2);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
width: 100%;
background: transparent;
border: none;
border-bottom: 2px solid var(--color-surface-high);
font-family: var(--font-body);
font-size: var(--text-body-md);
color: var(--color-on-surface);
padding: var(--space-3) 0;
outline: none;
transition: border-color var(--transition-fast);
border-radius: 0;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
border-bottom-color: var(--color-on-primary-container);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
border-bottom-color: var(--color-error);
}

.woocommerce #place_order,
.woocommerce #payment .place-order .button {
background: var(--gradient-primary);
color: #fff !important;
padding: var(--space-4) var(--space-8);
border: none;
font-family: var(--font-label);
font-size: var(--text-body-md);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
width: 100%;
transition: opacity var(--transition-fast);
border-radius: 0;
}

.woocommerce #place_order:hover {
opacity: 0.9;
}

.woocommerce-checkout #payment {
background: var(--color-surface-low);
padding: var(--space-6);
}

.woocommerce-checkout #payment ul.payment_methods {
border-bottom: 1px solid var(--color-surface-high);
margin-bottom: var(--space-4);
padding: 0;
list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
padding: var(--space-3) 0;
}

/* =============================================================================
   11. Order confirmation (thank you)
   ============================================================================= */

.woocommerce-order {
max-width: 800px;
margin-inline: auto;
padding: var(--space-16) var(--space-8);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
font-family: var(--font-headline);
font-size: var(--text-headline-md);
text-transform: uppercase;
letter-spacing: -0.02em;
margin-bottom: var(--space-6);
}

.woocommerce-thankyou-order-received {
background: var(--color-primary-container);
color: #fff;
padding: var(--space-5) var(--space-6);
font-family: var(--font-headline);
font-size: var(--text-headline-sm);
margin-bottom: var(--space-8);
}

.woocommerce-order-overview {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--color-surface-high);
list-style: none;
padding: 0;
margin-bottom: var(--space-8);
}

.woocommerce-order-overview li {
background: var(--color-surface-lowest);
padding: var(--space-4) var(--space-5);
}

.woocommerce-order-overview li strong {
display: block;
font-family: var(--font-label);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-on-surface-variant);
margin-bottom: var(--space-1);
}

/* =============================================================================
   12. My Account
   ============================================================================= */

.woocommerce-account .site-main {
padding-block: var(--space-12);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none;
padding: 0;
margin: 0 0 var(--space-8);
display: flex;
flex-wrap: wrap;
gap: 1px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
display: block;
padding: var(--space-3) var(--space-5);
background: var(--color-surface-container);
font-family: var(--font-label);
font-size: var(--text-label-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-on-surface-variant);
text-decoration: none;
transition: background var(--transition-fast), color var(--transition-fast);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
background: var(--color-primary-container);
color: #fff;
text-decoration: none;
}

/* =============================================================================
   13. Responsive
   ============================================================================= */

@media (max-width: 1100px) {
.catalog-sidebar {
width: 240px;
}

.sp-specs__inner {
grid-template-columns: 1fr;
gap: var(--space-8);
}
}

@media (max-width: 900px) {
.catalog-page__inner {
flex-direction: column;
}

.catalog-sidebar {
width: 100%;
min-height: auto;
border-right: none;
border-bottom: 1px solid var(--color-surface-high);
}

.catalog-sidebar__sticky {
position: static;
}

.woocommerce ul.products {
grid-template-columns: repeat(2, 1fr);
}

.cat-grid-wrap .woocommerce ul.products {
grid-template-columns: repeat(2, 1fr);
}

.sp-layout {
grid-template-columns: 1fr;
}

.sp-gallery {
min-height: 400px;
}

.sp-gallery__callout {
display: none;
}

.sp-config {
border-left: none;
border-top: 1px solid var(--color-surface-high);
}

.woocommerce-order-overview {
grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 600px) {
.woocommerce ul.products {
grid-template-columns: 1fr;
}

.cat-grid-wrap .woocommerce ul.products {
grid-template-columns: 1fr;
}

.sp-preview__viewport {
aspect-ratio: 4 / 3;
}

.cat-toolbar__tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}

.cat-toolbar__tabs::-webkit-scrollbar {
display: none;
}

.woocommerce-order-overview {
grid-template-columns: 1fr;
}
}