/* =========================================================================
   DudeDesigns3DPrints theme stylesheet.
   ========================================================================= */

:root {
	--font-display: 'Space Grotesk', sans-serif;
	--font-body: 'DM Sans', sans-serif;

	--radius: 0.9rem;
	--shadow-soft: 0 6px 24px -6px hsl(258 60% 30% / 0.18);
	--shadow-elevated: 0 16px 50px -12px hsl(258 60% 22% / 0.28);
	--transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);

	--btn-radius: 999px;
	--btn-height: 3rem;
	--btn-padding: 0 2rem;
	--btn-font-size: 12px;
	--btn-font-weight: 600;
	--btn-letter-spacing: 0.22em;
	--btn-text-transform: uppercase;
	--card-radius: 1.5rem;
	--section-padding: 2rem;
	--header-height: 88px;
	--checkout-gap: 2rem;
}

/* =========================================================================
   Base
   ========================================================================= */
* { border-color: var(--color-border); box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
body {
	background-color: var(--color-background);
	color: var(--color-foreground);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	margin: 0;
}
img { max-width: 100%; display: block; height: auto; }
.cover-img,
.hero-bg-img,
.product-card-img,
.theme-product-gallery__image,
.theme-feature-tile__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	letter-spacing: -0.015em;
	font-weight: inherit;
	font-size: inherit;
	margin: 0;
}
a { color: inherit; text-decoration: none; }
a[href],
button:not(:disabled),
[role="button"],
.theme-btn,
.theme-text-link,
.theme-nav-link,
.shop-filter-pill,
.shop-sort-pill,
.theme-cart-toggle,
.theme-announcement-bar__close,
.theme-modal__close,
.theme-faq-item__question,
.theme-accordion__toggle,
.contact-detail-row,
.contact-commission-card,
.theme-social-btn,
.theme-product-card__add-to-cart,
.theme-quick-add,
.theme-404__link,
.theme-cart-item__image,
.theme-cart-item__title,
.site-footer__col ul a,
.site-footer__newsletter .theme-btn,
.theme-footer-email,
.theme-footer-phone,
.site-footer__credit,
.theme-modal__contact-link,
label.theme-swatch {
	cursor: pointer;
}
button { font-family: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

.container-wide { width: 100%; max-width: 1400px; margin: 0 auto; padding-inline: 1.5rem; }
@media (min-width: 1024px) { .container-wide { padding-inline: 2rem; } }

/* =========================================================================
   Animations (Section 2.1)
   ========================================================================= */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.animate-fade-in-up { animation: fadeInUp 0.7s var(--transition-smooth) both; }
.animate-fade-in { animation: fadeIn 0.6s var(--transition-smooth) forwards; }
.animate-slide-up { animation: slideUp 0.4s var(--transition-smooth) forwards; }

.reveal-item {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--transition-smooth), transform 0.7s var(--transition-smooth);
}
.reveal-item.is-visible { opacity: 1; transform: translateY(0); }

/* Customizer preview / no-JS fallback: content must never stay hidden. */
body.is-customizer .reveal-item,
body.no-js .reveal-item {
	opacity: 1 !important;
	transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.reveal-item, .animate-fade-in-up, .animate-fade-in, .animate-slide-up { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   Announcement bar
   ========================================================================= */
.theme-announcement-bar { position: relative; background-color: var(--color-primary); color: var(--color-primary-foreground); }
.theme-announcement-bar__inner { padding-block: 0.5rem; padding-inline-end: 2.5rem; text-align: center; }
.theme-announcement-bar__text { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
.theme-announcement-bar__close { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); opacity: 0.7; color: inherit; padding: 0.25rem; }
.theme-announcement-bar__close:hover { opacity: 1; }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
	position: sticky; top: 0; left: 0; right: 0; z-index: 50;
	border-top: 2px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}
.site-header.is-solid,
.site-header.is-scrolled {
	background-color: color-mix(in srgb, var(--color-background) 95%, transparent);
	backdrop-filter: blur(6px);
	border-bottom-color: color-mix(in srgb, var(--color-border) 60%, transparent);
}
.site-header__nav { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; min-height: 64px; }
.site-header__links { display: none; align-items: center; gap: 2.5rem; flex: 1; }
@media (min-width: 1024px) { .site-header__links { display: flex; } }
.site-header__links--right { justify-content: flex-end; }
.theme-nav-list { display: flex; align-items: center; gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.theme-nav-link { font-size: 13px; color: color-mix(in srgb, var(--color-foreground) 80%, transparent); transition: color 0.2s; background: none; border: none; padding: 0; }
.theme-nav-link:hover { color: var(--color-foreground); }

.site-header__menu-toggle { display: inline-flex; padding: 0.5rem; margin-left: -0.5rem; }
@media (min-width: 1024px) { .site-header__menu-toggle { display: none; } }
.site-header__menu-toggle .icon-close { display: none; }
.site-header__menu-toggle.is-open .icon-menu { display: none; }
.site-header__menu-toggle.is-open .icon-close { display: inline-flex; }

.site-header__brand { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5rem; }
.site-logo-img { height: var(--logo-height, 72px) !important; width: auto !important; display: block; max-width: 62vw; object-fit: contain; }
.site-logo-text { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: var(--logo-height, 72px); }

.site-header__right { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; flex: 1; }
.theme-cart-toggle {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--color-foreground) 30%, transparent);
	font-size: 13px; font-family: var(--font-body);
	transition: border-color 0.2s;
}
.theme-cart-toggle:hover { border-color: var(--color-foreground); }
.theme-cart-count-badge { display: none !important; }

.site-header__mobile-menu { display: none; border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); padding: 1rem 0; }
.site-header__mobile-menu.is-open { display: block; }
.theme-nav-list--mobile { flex-direction: column; align-items: flex-start; gap: 1rem; }

/* =========================================================================
   Buttons
   ========================================================================= */
.theme-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	border-radius: var(--btn-radius); padding: var(--btn-padding); min-height: var(--btn-height);
	font-family: var(--font-body); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight);
	letter-spacing: var(--btn-letter-spacing); text-transform: var(--btn-text-transform);
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap; border: 1px solid transparent;
}
.theme-btn--lg { padding: 0 2.5rem; min-height: 3.25rem; }
.theme-btn--sm { min-height: 2.5rem; padding: 0 1.25rem; }
.theme-btn--full { width: 100%; }
.theme-btn--primary { background-color: var(--color-primary); color: var(--color-primary-foreground); }
.theme-btn--primary:hover { opacity: 0.9; }
.theme-btn--ghost-inverse { background-color: color-mix(in srgb, var(--color-primary-foreground) 10%, transparent); color: var(--color-primary-foreground); border-color: color-mix(in srgb, var(--color-primary-foreground) 40%, transparent); backdrop-filter: blur(4px); }
.theme-btn--ghost-inverse:hover { background-color: color-mix(in srgb, var(--color-primary-foreground) 20%, transparent); }
.theme-btn--outline { background: transparent; color: var(--color-foreground); border-color: color-mix(in srgb, var(--color-foreground) 40%, transparent); text-transform: none; letter-spacing: normal; font-weight: 500; }
.theme-btn--outline:hover { border-color: var(--color-foreground); }
.theme-btn--sm.theme-btn--primary { text-transform: none; letter-spacing: normal; font-weight: 600; }

/* =========================================================================
   Section shell / headings
   ========================================================================= */
.theme-section { background-color: var(--color-background); }
.theme-section--butter { background-color: var(--color-butter); }
.theme-section--bg { background-color: var(--color-background); }
.theme-section__padded { padding-block: 4rem; }
@media (min-width: 768px) { .theme-section__padded { padding-block: 6rem; } }
.theme-section__head {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 3rem;
}
@media (min-width: 768px) {
	.theme-section__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}
.scroll-mt-24 { scroll-margin-top: 6rem; }

.theme-eyebrow { display: block; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-primary); font-weight: 600; margin-bottom: 0.75rem; }
.theme-text-link { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--color-primary); }
.theme-text-link:hover { color: var(--color-foreground); }

.section-heading { font-weight: 600; line-height: 1.05; }
.new-heading { font-size: 1.875rem; }
@media (min-width: 768px) { .new-heading { font-size: 3rem; } }
.about-heading { font-size: 2.25rem; }
@media (min-width: 768px) { .about-heading { font-size: 3rem; } }
@media (min-width: 1024px) { .about-heading { font-size: 3.75rem; } }
.process-heading { font-size: 2.25rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .process-heading { font-size: 3rem; } }
@media (min-width: 1024px) { .process-heading { font-size: 3.75rem; } }
.shop-heading { font-size: 1.875rem; }
@media (min-width: 768px) { .shop-heading { font-size: 3rem; } }
.faq-heading { font-size: 2.25rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .faq-heading { font-size: 3rem; } }
@media (min-width: 1024px) { .faq-heading { font-size: 3.75rem; } }

/* =========================================================================
   Hero
   ========================================================================= */
.theme-hero { position: relative; background-color: var(--color-background); }
.theme-hero__media { position: relative; width: 100%; min-height: 100svh; overflow: hidden; }
.theme-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.theme-hero__gradient { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, hsl(232 40% 6% / 0.9), hsl(232 40% 6% / 0.55) 55%, hsl(232 40% 6% / 0.7)); }
.theme-hero__inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding-block: 5rem; }
.theme-hero__content { max-width: 42rem; }
.theme-hero__eyebrow { display: block; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: var(--color-lilac); margin-bottom: 1.25rem; }
.theme-hero__title { font-family: var(--font-display); font-weight: 600; font-size: 2.25rem; line-height: 1.05; color: var(--color-primary-foreground); margin-bottom: 1.5rem; filter: drop-shadow(0 4px 12px rgb(0 0 0 / .25)); }
.theme-hero__highlight { color: var(--color-lilac); }
@media (min-width: 640px) { .theme-hero__title { font-size: 3rem; } }
@media (min-width: 768px) { .theme-hero__title { font-size: 3.75rem; } }
@media (min-width: 1280px) { .theme-hero__title { font-size: 4.5rem; } }
.theme-hero__subtitle { color: color-mix(in srgb, var(--color-primary-foreground) 85%, transparent); font-size: 1rem; line-height: 1.7; margin: 0 auto 2.5rem; max-width: 32rem; }
@media (min-width: 768px) { .theme-hero__subtitle { font-size: 1.125rem; } }
.theme-hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }

/* =========================================================================
   Product grid / cards (Section 19, 31.3, 31.9)
   ========================================================================= */
.theme-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
@media (min-width: 768px) { .theme-product-grid { gap: 2rem; } }
.theme-product-grid--new { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .theme-product-grid--new { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.theme-product-grid--shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .theme-product-grid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.theme-product-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .theme-product-grid--related { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.theme-product-card-wrap { display: flex; flex-direction: column; height: 100%; }
.theme-product-card { position: relative; display: flex; flex-direction: column; height: 100%; }

.theme-product-card__image-wrapper {
	position: relative; aspect-ratio: 1 / 1; border-radius: var(--card-radius);
	overflow: hidden; background-color: var(--color-card); margin-bottom: 1.25rem;
}
.theme-product-card__image-link {
	position: absolute; inset: 0; z-index: 1; display: block;
}
.theme-product-card__image--main { transition: opacity 0.5s ease; }
.theme-product-card__image--main.has-hover { }
.theme-product-card:hover .theme-product-card__image--main.has-hover { opacity: 0; }
.theme-product-card__image--hover { opacity: 0; transition: opacity 0.5s ease; }
.theme-product-card:hover .theme-product-card__image--hover { opacity: 1; }

.theme-badge { position: absolute; z-index: 4; top: 1rem; padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.theme-badge--new { left: 1rem; background-color: var(--color-marigold); color: var(--color-foreground); }
.theme-badge--soldout { right: 1rem; background-color: var(--color-foreground); color: var(--color-background); }

.theme-product-card__add-to-cart {
	position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 5;
	padding: 0.75rem 1rem; border-radius: 999px; text-align: center;
	background-color: var(--color-teal); color: var(--color-background);
	border: 1px solid var(--color-teal);
	font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
	opacity: 0; transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
	cursor: pointer;
}
.theme-product-card:hover .theme-product-card__add-to-cart { opacity: 1; transform: translateY(0); }
.theme-product-card__add-to-cart:hover { background-color: var(--color-background); color: var(--color-teal); }

.theme-product-card__info { flex: 1; padding: 0 0.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
.theme-product-card__category { font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-muted-foreground); }
.theme-product-card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.35; }
.theme-product-card__title-link { color: var(--color-foreground); text-decoration: none; transition: color 0.3s; }
.theme-product-card__title-link:hover { color: var(--color-primary); }
.theme-product-card:hover .theme-product-card__title-link { color: var(--color-primary); }
.theme-product-card__price { font-size: 1rem; color: color-mix(in srgb, var(--color-foreground) 85%, transparent); }
.theme-product-card__price .price del { opacity: 0.5; text-decoration: line-through; margin-right: 0.4em; }

.theme-quick-add { text-decoration: none; }

.theme-feature-tile { position: relative; grid-column: span 2 / span 2; border-radius: 1.5rem; overflow: hidden; min-height: 280px; display: flex; align-items: flex-end; }
.theme-feature-tile__scrim { position: absolute; inset: 0; background: linear-gradient(to top, hsl(232 40% 6% / 0.9), hsl(232 40% 6% / 0.25)); }
.theme-feature-tile__content { position: relative; padding: 1.75rem; }
@media (min-width: 768px) { .theme-feature-tile__content { padding: 2.25rem; } }
.theme-feature-tile__content h3 { font-size: 1.5rem; font-weight: 600; color: var(--color-primary-foreground); margin-bottom: 0.5rem; }
@media (min-width: 768px) { .theme-feature-tile__content h3 { font-size: 1.875rem; } }
.theme-feature-tile__content p { color: color-mix(in srgb, var(--color-primary-foreground) 85%, transparent); font-size: 0.9rem; margin-bottom: 1.25rem; max-width: 24rem; }

/* =========================================================================
   About section
   ========================================================================= */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: stretch; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; } }
.about-copy { display: flex; flex-direction: column; height: 100%; }
.about-quote { font-family: var(--font-display); font-size: 1.375rem; color: color-mix(in srgb, var(--color-foreground) 80%, transparent); line-height: 1.3; margin-bottom: 2rem; }
@media (min-width: 768px) { .about-quote { font-size: 1.5rem; } }
.about-body { color: color-mix(in srgb, var(--color-foreground) 75%, transparent); line-height: 1.7; margin-bottom: 2.5rem; }
.about-cards { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2.5rem; flex: 1; }
.about-card { display: flex; gap: 1.25rem; align-items: flex-start; }
.about-card__icon { flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--color-foreground) 5%, transparent); transition: transform 0.3s; }
.about-card:hover .about-card__icon { transform: scale(1.1); }
.about-card__icon--1 { background-color: color-mix(in srgb, var(--color-lilac) 25%, transparent); color: var(--color-primary); }
.about-card__icon--2 { background-color: color-mix(in srgb, var(--color-rosa) 15%, transparent); color: var(--color-rosa); }
.about-card__icon--3 { background-color: color-mix(in srgb, var(--color-teal) 15%, transparent); color: var(--color-teal); }
.about-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.25rem; }
@media (min-width: 768px) { .about-card h3 { font-size: 1.5rem; } }
.about-card p { color: color-mix(in srgb, var(--color-foreground) 75%, transparent); line-height: 1.6; }
.about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); padding-top: 2rem; margin: 0; margin-top: auto; align-items: start; }
@media (min-width: 640px) { .about-stats { gap: 1.25rem; } }
.about-stat { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
@media (min-width: 640px) {
	.about-stat { align-items: flex-start; text-align: left; }
}
.about-stat__value { margin: 0 0 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--color-primary); line-height: 1; }
@media (min-width: 768px) { .about-stat__value { font-size: 1.875rem; } }
.about-stat__label { margin: 0; font-size: 12px; line-height: 1.375; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); text-wrap: balance; }
@media (min-width: 768px) { .about-stat__label { font-size: 13px; } }
.about-media { position: relative; height: 100%; min-height: 420px; border-radius: 2rem; overflow: hidden; box-shadow: var(--shadow-elevated); border: 1px solid color-mix(in srgb, var(--color-foreground) 5%, transparent); }
@media (min-width: 1024px) { .about-media { min-height: 0; } }
.about-media .cover-img { transition: transform 0.7s; }
.about-media:hover .cover-img { transform: scale(1.04); }

/* =========================================================================
   What I Print / process timeline
   ========================================================================= */
.process-head { text-align: center; margin-bottom: 3.5rem; }
@media (min-width: 768px) { .process-head { margin-bottom: 5rem; } }
.process-timeline { position: relative; }
.process-timeline__line {
	position: absolute; z-index: 0; overflow: hidden;
	background-color: color-mix(in srgb, var(--color-foreground) 10%, transparent);
}
.process-timeline__line-fill {
	position: absolute; inset: 0; background-color: var(--color-primary);
	will-change: transform;
}
.process-timeline__line--vertical { display: block; left: 1.75rem; top: 1.75rem; bottom: 2.5rem; width: 1px; }
.process-timeline__line--vertical .process-timeline__line-fill { transform-origin: top center; transform: scaleY(0); }
.process-timeline__line--horizontal { display: none; left: 10%; right: 10%; top: 2rem; height: 1px; }
.process-timeline__line--horizontal .process-timeline__line-fill { transform-origin: left center; transform: scaleX(0); }
.process-timeline.is-complete .process-timeline__line--vertical .process-timeline__line-fill { transform: scaleY(1); }
.process-timeline.is-complete .process-timeline__line--horizontal .process-timeline__line-fill { transform: scaleX(1); }
.process-timeline__steps { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 1024px) {
	.process-timeline__line--vertical { display: none; }
	.process-timeline__line--horizontal { display: block; }
	.process-timeline__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; }
}
.process-step {
	position: relative; display: flex; gap: 1.25rem; text-align: left;
	opacity: 0.35; transform: translateY(24px); will-change: opacity, transform;
}
.process-timeline.is-complete .process-step { opacity: 1; transform: translateY(0); }
@media (min-width: 1024px) { .process-step { display: block; text-align: center; } }
.process-step__icon-wrap { position: relative; flex-shrink: 0; }
@media (min-width: 1024px) { .process-step__icon-wrap { display: flex; justify-content: center; margin-bottom: 2rem; } }
.process-step__content { padding-bottom: 2.5rem; min-width: 0; }
@media (min-width: 1024px) { .process-step__content { padding-bottom: 0; } }
.process-step__dot {
	position: relative; overflow: hidden; width: 3.5rem; height: 3.5rem; border-radius: 999px; background-color: var(--color-background);
	border: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); display: flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow-soft); color: var(--color-primary); transform: scale(0.9); will-change: transform;
}
.process-timeline.is-complete .process-step__dot { transform: scale(1); }
.process-step__dot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.process-step__dot svg { position: relative; z-index: 1; }
.process-step__dot--1::before { background-color: color-mix(in srgb, var(--color-lilac) 20%, transparent); }
.process-step__dot--1 { color: var(--color-primary); }
.process-step__dot--2::before { background-color: color-mix(in srgb, var(--color-rosa) 15%, transparent); }
.process-step__dot--2 { color: var(--color-rosa); }
.process-step__dot--3::before { background-color: color-mix(in srgb, var(--color-teal) 15%, transparent); }
.process-step__dot--3 { color: var(--color-teal); }
.process-step__dot--4::before { background-color: color-mix(in srgb, var(--color-marigold) 20%, transparent); }
.process-step__dot--4 { color: var(--color-marigold); }
.process-step__dot--5::before { background-color: color-mix(in srgb, var(--color-lilac) 20%, transparent); }
.process-step__dot--5 { color: var(--color-primary); }
@media (min-width: 1024px) { .process-step__dot { width: 4rem; height: 4rem; } }
.process-step__number { display: block; font-family: var(--font-display); font-size: 1.125rem; color: color-mix(in srgb, var(--color-primary) 70%, transparent); margin-bottom: 0.25rem; }
.process-step h3 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.35; margin-bottom: 0.5rem; }
@media (min-width: 768px) { .process-step h3 { font-size: 1.5rem; } }
.process-step p { color: color-mix(in srgb, var(--color-foreground) 70%, transparent); line-height: 1.625; font-size: 0.875rem; }
.process-cta { margin-top: 3.5rem; display: flex; justify-content: center; }
@media (min-width: 768px) { .process-cta { margin-top: 4rem; } }

/* =========================================================================
   Shop section
   ========================================================================= */
.shop-head { text-align: center; margin-bottom: 2.5rem; }
.shop-search { position: relative; max-width: 28rem; margin: 0 auto; }
.shop-search svg { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--color-muted-foreground); }
.shop-search input {
	width: 100%; padding: 0.5rem 0 0.5rem 1.75rem; background: transparent; border: none; border-bottom: 1px solid var(--color-border);
	color: var(--color-foreground); font-family: var(--font-body); border-radius: 0; outline: none; transition: border-color 0.2s;
}
.shop-search input:focus { border-color: var(--color-foreground); }
.shop-filters { margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.shop-filters__cats, .shop-filters__sort { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.625rem; }
.shop-filter-pill {
	padding: 0.5rem 1rem; border-radius: 999px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
	border: 1px solid var(--color-border); color: color-mix(in srgb, var(--color-foreground) 70%, transparent); transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.shop-filter-pill:hover { border-color: color-mix(in srgb, var(--color-foreground) 50%, transparent); color: var(--color-foreground); }
.shop-filter-pill.is-active { background-color: var(--color-primary); color: var(--color-primary-foreground); border-color: var(--color-primary); }
.shop-sort-pill { padding: 0.375rem 0.875rem; border-radius: 999px; font-size: 12px; border: 1px solid transparent; color: var(--color-muted-foreground); transition: color 0.2s; }
.shop-sort-pill:hover { color: var(--color-foreground); }
.shop-sort-pill.is-active { border-color: var(--color-foreground); color: var(--color-foreground); }
.shop-empty { text-align: center; padding: 4rem 0; color: var(--color-muted-foreground); }

/* =========================================================================
   Quote & Contact background sections
   ========================================================================= */
.theme-quote, .theme-contact { position: relative; overflow: hidden; }
.theme-quote__bg, .theme-contact__bg { position: absolute; inset: 0; }
.theme-quote__scrim { position: absolute; inset: 0; background-color: color-mix(in srgb, var(--color-foreground) 70%, transparent); }
.theme-contact__scrim { position: absolute; inset: 0; background-color: color-mix(in srgb, var(--color-foreground) 35%, transparent); }
.theme-quote__inner { position: relative; padding-block: 6rem; text-align: center; }
@media (min-width: 768px) { .theme-quote__inner { padding-block: 9rem; } }
@media (min-width: 1024px) { .theme-quote__inner { padding-block: 11rem; } }
.theme-quote__text { max-width: 56rem; margin: 0 auto; font-family: var(--font-display); font-size: 1.875rem; line-height: 1.3; color: var(--color-primary-foreground); }
@media (min-width: 768px) { .theme-quote__text { font-size: 3rem; } }
@media (min-width: 1024px) { .theme-quote__text { font-size: 3.75rem; } }
.theme-quote__author { margin-top: 1.5rem; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--color-primary-foreground) 80%, transparent); }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-head { text-align: center; margin-bottom: 3.5rem; }
.theme-faq-list { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.theme-faq-item { background-color: var(--color-background); border-radius: 1.5rem; border: 1px solid color-mix(in srgb, var(--color-foreground) 5%, transparent); overflow: hidden; }
.theme-faq-item__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: 1.25rem 1.5rem; }
@media (min-width: 768px) { .theme-faq-item__question { padding: 1.5rem 2rem; } }
.theme-faq-item__question span { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; }
@media (min-width: 768px) { .theme-faq-item__question span { font-size: 1.25rem; } }
.theme-faq-item__chevron { flex-shrink: 0; color: var(--color-primary); transition: transform 0.3s; }
.theme-faq-item.is-open .theme-faq-item__chevron { transform: rotate(180deg); }
.theme-faq-item__answer { overflow: hidden; transition: height 0.3s var(--transition-smooth), opacity 0.3s var(--transition-smooth); }
.theme-faq-item__answer p { padding: 0 1.5rem 1.5rem; color: color-mix(in srgb, var(--color-foreground) 75%, transparent); line-height: 1.6; }
@media (min-width: 768px) { .theme-faq-item__answer p { padding: 0 2rem 1.5rem; } }

/* =========================================================================
   Contact section
   ========================================================================= */
.theme-contact__inner { position: relative; z-index: 1; padding-block: 4rem; }
@media (min-width: 768px) { .theme-contact__inner { padding-block: 6rem; } }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-form-card {
	grid-column: span 1;
	background-color: color-mix(in srgb, var(--color-card) 80%, transparent); backdrop-filter: blur(24px);
	border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); border-radius: 2rem; padding: 2rem;
	box-shadow: var(--shadow-elevated); position: relative; overflow: hidden;
}
@media (min-width: 768px) { .contact-form-card { grid-column: span 2; padding: 2.5rem; } }
.contact-form-card h2 { font-size: 1.875rem; font-weight: 600; margin-bottom: 0.5rem; }
@media (min-width: 768px) { .contact-form-card h2 { font-size: 2.25rem; } }
.contact-form-card > p { color: var(--color-muted-foreground); margin-bottom: 2rem; }
.theme-modal__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (min-width: 480px) { .theme-modal__grid { grid-template-columns: 1fr 1fr; } }
.theme-field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.theme-modal__grid .theme-field { margin-bottom: 0; }
.theme-field label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); }
.theme-field input, .theme-field textarea, .theme-contact-form input, .theme-contact-form textarea {
	width: 100%; background-color: var(--color-background); border: 1px solid var(--color-border); color: var(--color-foreground);
	border-radius: 0.75rem; padding: 0.75rem 1rem; font-family: var(--font-body); outline: none; resize: none;
	transition: border-color 0.2s;
}
.theme-field input:focus, .theme-field textarea:focus { border-color: color-mix(in srgb, var(--color-primary) 50%, transparent); }
.contact-form-success { text-align: center; padding: 2.5rem 0; }
.contact-form-success__icon { width: 3.5rem; height: 3.5rem; border-radius: 999px; background-color: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.contact-form-success h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.contact-form-success p { color: var(--color-muted-foreground); }

.contact-side { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-details-card, .contact-commission-card {
	background-color: color-mix(in srgb, var(--color-card) 80%, transparent); backdrop-filter: blur(24px);
	border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); border-radius: 2rem; padding: 2rem;
	box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
}
.contact-details-card h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 1.5rem; }
.contact-detail-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.contact-detail-row:last-child { margin-bottom: 0; }
.contact-detail-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background-color: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-detail-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted-foreground); }
.contact-detail-value { display: block; font-size: 0.875rem; transition: color 0.2s; }
.contact-detail-row:hover .contact-detail-value { color: var(--color-primary); }

.contact-commission-card { flex: 1; cursor: pointer; box-shadow: var(--shadow-elevated); display: flex; flex-direction: column; justify-content: space-between; }
.contact-commission-badge { display: inline-block; padding: 0.375rem 0.75rem; background-color: var(--color-primary); color: var(--color-primary-foreground); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 999px; width: fit-content; }
.contact-commission-card h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; transition: color 0.2s; }
.contact-commission-card:hover h3 { color: var(--color-primary); }
.contact-commission-card p { font-size: 0.875rem; line-height: 1.6; color: color-mix(in srgb, var(--color-foreground) 80%, transparent); }
.contact-commission-cta { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.5rem; color: var(--color-primary); font-weight: 600; font-size: 0.875rem; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { border-top: 1px solid var(--color-border); background-color: var(--color-butter); }
.site-footer__inner { padding-block: 2.5rem 1.5rem; }
@media (min-width: 1024px) { .site-footer__inner { padding-block: 3rem 2rem; } }
.site-footer__top {
	display: flex; flex-direction: column; gap: 1.5rem;
	margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-border);
}
@media (min-width: 640px) {
	.site-footer__top {
		flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem;
	}
}
.site-footer__brand {
	flex-shrink: 0; display: inline-flex; align-items: center; text-decoration: none; color: inherit;
}
.site-footer__logo,
.site-footer__brand .site-logo-img {
	height: 4.5rem; width: auto; max-width: 70vw; object-fit: contain;
}
@media (min-width: 640px) {
	.site-footer__logo,
	.site-footer__brand .site-logo-img { height: 5rem; }
}
@media (min-width: 768px) {
	.site-footer__logo,
	.site-footer__brand .site-logo-img { height: 6rem; }
}
.site-footer__tagline { max-width: 36rem; width: 100%; }
@media (min-width: 640px) { .site-footer__tagline { text-align: right; margin-left: auto; } }
.site-footer__tagline p {
	font-size: 0.875rem; font-family: var(--font-body);
	color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
	line-height: 1.625;
}
.theme-footer-email,
.theme-footer-phone { transition: color 0.2s; }
.theme-footer-email:hover,
.theme-footer-phone:hover { color: var(--color-foreground); }
.site-footer__columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
@media (min-width: 768px) { .site-footer__columns { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .site-footer__columns { gap: 3rem; } }
.site-footer__col--follow { grid-column: span 2; }
@media (min-width: 768px) { .site-footer__col--follow { grid-column: span 1; } }
.site-footer__col h3 {
	font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
	color: var(--color-foreground); margin-bottom: 1.25rem;
}
.site-footer__col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.site-footer__col ul a {
	font-size: 0.875rem; font-family: var(--font-body);
	color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
	transition: color 0.2s; text-align: left; text-decoration: none;
}
.site-footer__col ul a:hover { color: var(--color-foreground); }
.site-footer__col--follow > p {
	font-size: 0.875rem; font-family: var(--font-body); line-height: 1.625;
	color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
	margin-bottom: 1rem;
}
.site-footer__social { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.theme-social-btn { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-foreground) 70%, transparent); display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, color 0.2s; }
.theme-social-btn:hover { background-color: var(--color-foreground); color: var(--color-background); }
.site-footer__newsletter { display: flex; align-items: center; gap: 0.5rem; }
.site-footer__newsletter .theme-input {
	border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
	background-color: var(--color-background); padding: 0 1.25rem; height: 2.75rem;
	font-size: 0.875rem; font-family: var(--font-body); flex: 1; min-width: 0; border-radius: 999px;
}
.site-footer__newsletter .theme-btn {
	min-height: 2.75rem; height: 2.75rem; padding: 0 1.25rem;
	font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--color-primary-foreground); background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
}
.site-footer__newsletter .theme-btn:hover { opacity: 0.9; color: var(--color-primary-foreground); }
.site-footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.75rem; text-align: center; }
@media (min-width: 640px) { .site-footer__bottom { flex-direction: row; text-align: left; } }
.site-footer__signature { font-size: 12px; color: var(--color-primary); letter-spacing: 0.02em; }
.site-footer__copyright { font-size: 12px; color: var(--color-muted-foreground); letter-spacing: 0.02em; }
.site-footer__credit { font-size: 12px; color: var(--color-muted-foreground); letter-spacing: 0.02em; transition: color 0.2s; }
.site-footer__credit:hover { color: var(--color-foreground); }

/* =========================================================================
   Cart drawer / overlay (Section 12)
   ========================================================================= */
#theme-cart-overlay { position: fixed; inset: 0; z-index: 60; background-color: color-mix(in srgb, var(--color-foreground) 20%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
body.cart-open #theme-cart-overlay { opacity: 1; pointer-events: auto; }

#theme-cart-drawer {
	position: fixed; right: 0; top: 0; height: 100%; width: 100%; max-width: 26rem; z-index: 61;
	background-color: var(--color-background); box-shadow: var(--shadow-elevated);
	display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s var(--transition-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 { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid var(--color-border); }
.theme-cart-drawer__header h2 { font-size: 1.125rem; font-weight: 700; }
.theme-cart-drawer__close { padding: 0.25rem; opacity: 0.7; }
.theme-cart-drawer__close:hover { opacity: 1; }
.theme-cart-drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; gap: 1rem; color: var(--color-muted-foreground); }
.theme-cart-drawer__items { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.theme-cart-item { display: flex; gap: 1rem; }
.theme-cart-item__image { width: 5rem; height: 6rem; flex-shrink: 0; background-color: var(--color-secondary); overflow: hidden; }
.theme-cart-item__image img { width: 100%; height: 100%; object-fit: cover; }
.theme-cart-item__body { flex: 1; min-width: 0; }
.theme-cart-item__title { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.125rem; }
.theme-cart-item__price { font-size: 0.875rem; color: var(--color-muted-foreground); }
.theme-cart-item-meta { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; color: var(--color-muted-foreground); }
.theme-cart-item-meta__row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.theme-cart-item-meta-swatch { width: 0.65rem; height: 0.65rem; border-radius: 999px; border: 1px solid var(--color-border); flex-shrink: 0; }
.theme-cart-item__controls { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.theme-cart-item__qty-btn { padding: 0.25rem 0.5rem; border-radius: 0.25rem; transition: background-color 0.2s; }
.theme-cart-item__qty-btn:hover { background-color: var(--color-secondary); }
.theme-cart-item__qty { font-size: 0.875rem; width: 1.5rem; text-align: center; }
.theme-cart-item__remove { margin-left: auto; font-size: 0.875rem; color: var(--color-muted-foreground); }
.theme-cart-item__remove:hover { color: var(--color-foreground); }
.theme-cart-drawer__footer { padding: 1.5rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 1rem; }
.theme-cart-drawer__subtotal { display: flex; justify-content: space-between; font-size: 0.875rem; }
.theme-cart-drawer__note { font-size: 0.875rem; color: var(--color-muted-foreground); }

/* Hide WooCommerce "View cart" injected after AJAX add */
.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; }

/* =========================================================================
   Contact modal
   ========================================================================= */
.theme-modal { position: fixed; inset: 0; z-index: 100; display: none; }
.theme-modal.is-open { display: block; }
.theme-modal__overlay { position: fixed; inset: 0; background-color: color-mix(in srgb, var(--color-foreground) 40%, transparent); }
.theme-modal__panel {
	position: relative; z-index: 1; margin: 5vh auto; max-width: 32rem; max-height: 90vh; overflow-y: auto;
	background-color: var(--color-background); border-radius: 1rem; padding: 2rem; box-shadow: var(--shadow-elevated);
}
.theme-modal__close { position: absolute; top: 1rem; right: 1rem; padding: 0.4rem; opacity: 0.6; }
.theme-modal__close:hover { opacity: 1; }
.theme-modal__title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.theme-modal__desc { color: var(--color-muted-foreground); margin-bottom: 1.25rem; }
.theme-modal__contacts { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.875rem; color: var(--color-muted-foreground); margin-bottom: 1.5rem; }
.theme-modal__contact-link { display: inline-flex; align-items: center; gap: 0.5rem; }
.theme-modal__contact-link:hover { color: var(--color-foreground); }
.theme-modal__success { text-align: center; padding: 2rem 0; }
.theme-modal__success-icon { width: 3.5rem; height: 3.5rem; border-radius: 999px; background-color: var(--color-primary); color: var(--color-primary-foreground); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.theme-modal__success h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.theme-modal__form-footer { display: flex; justify-content: flex-end; }

/* =========================================================================
   Single product page (Section 11.13)
   ========================================================================= */
.single-product-main { padding-top: 2rem; }
@media (min-width: 1024px) { .single-product-main { padding-top: 3rem; } }
.theme-breadcrumb { padding: 1.5rem 0; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-muted-foreground); }
.theme-breadcrumb a:hover { color: var(--color-foreground); }
.theme-breadcrumb__sep { margin: 0 0.5rem; opacity: 0.5; }
.theme-breadcrumb__current { color: var(--color-foreground); }

.theme-product-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 6rem; padding-top: 1rem; align-items: start; min-width: 0; }
@media (min-width: 1024px) { .theme-product-layout { grid-template-columns: 7fr 5fr; gap: 4rem; } }
.theme-product-gallery, .theme-product-info { min-width: 0; max-width: 100%; }
.theme-product-gallery { display: flex; flex-direction: column; gap: 1rem; }
.theme-product-thumbnails__frame { position: relative; aspect-ratio: 1 / 1; background-color: var(--color-secondary); overflow: hidden; }
.theme-product-thumbnails { display: flex; gap: 0.75rem; flex-wrap: wrap; max-width: 100%; overflow-x: auto; padding-bottom: 0.25rem; }
.theme-product-thumbnails__btn { position: relative; width: 5rem; height: 5rem; flex-shrink: 0; overflow: hidden; background-color: var(--color-secondary); opacity: 0.6; transition: opacity 0.2s; }
.theme-product-thumbnails__btn.is-active, .theme-product-thumbnails__btn:hover { opacity: 1; }
.theme-product-thumbnails__btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-color: var(--color-foreground); opacity: 0; transition: opacity 0.2s; }
.theme-product-thumbnails__btn.is-active::after { opacity: 1; }

.theme-product-info__category { font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-muted-foreground); }
.product-title { font-family: var(--font-body); font-weight: 400; font-size: 1.875rem; line-height: 1.1; margin-top: 0.75rem; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .product-title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .product-title { font-size: 2.75rem; } }
.theme-product-info__price { font-size: 1.25rem; margin-bottom: 1.5rem; }
.theme-product-info__price .price del { opacity: 0.5; text-decoration: line-through; margin-right: 0.5em; }
.theme-product-info__desc { color: var(--color-muted-foreground); line-height: 1.7; margin-bottom: 2rem; overflow-wrap: break-word; word-break: break-word; }
.theme-product-info__stock.is-oos { font-size: 0.875rem; font-weight: 600; color: var(--color-foreground); margin-bottom: 1.5rem; }

.theme-attribute-block { margin-bottom: 1.5rem; }
.theme-attribute-block__label { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-muted-foreground); margin-bottom: 0.75rem; }
.theme-attribute-block__control { display: flex; flex-direction: column; gap: 0.75rem; }
.theme-attr-select {
	width: 100%; padding: 0.65rem 1rem; border: 1px solid var(--color-border); border-radius: 0.65rem;
	background-color: var(--color-background); color: var(--color-foreground); font-family: var(--font-body); font-size: 0.875rem;
}
.theme-attr-select-hidden { display: none !important; }
.theme-attr-pills { display: flex; flex-wrap: wrap; }
.theme-attr-pills--color { gap: 0.75rem; }
.theme-attr-pill,
.theme-swatch-btn {
	display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
	font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; border: 1px solid var(--color-border);
	border-radius: 999px; transition: border-color 0.2s, background-color 0.2s;
}
.theme-attr-pill:hover,
.theme-swatch-btn:hover { border-color: color-mix(in srgb, var(--color-foreground) 60%, transparent); }
.theme-attr-pill.is-active,
.theme-swatch-btn.is-active {
	border-color: var(--color-primary);
	background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.theme-swatch-dot { width: 0.75rem; height: 0.75rem; border-radius: 999px; border: 1px solid var(--color-border); flex-shrink: 0; }

.theme-quantity-wrapper { display: inline-flex; align-items: center; border: 1px solid var(--color-border); }
.theme-qty-minus, .theme-qty-plus { padding: 0.5rem 0.75rem; transition: background-color 0.2s; }
.theme-qty-minus:hover, .theme-qty-plus:hover { background-color: var(--color-secondary); }
.theme-qty-input { width: 3rem; text-align: center; border: none; background: transparent; -moz-appearance: textfield; }
.theme-qty-input::-webkit-outer-spin-button, .theme-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.single-product .theme-add-to-cart-area { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.5rem; }
.single-product .single_add_to_cart_button, .single-product .theme-btn-primary { flex: 1 1 auto; min-width: 160px; }

.theme-accordions { margin-top: 2.5rem; border-top: 1px solid var(--color-border); }
.theme-accordion { border-bottom: 1px solid var(--color-border); }
.theme-accordion__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; text-align: left; }
.theme-accordion__toggle span { font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; }
.theme-accordion__chevron { transition: transform 0.3s; }
.theme-accordion.is-open .theme-accordion__chevron { transform: rotate(180deg); }
.theme-accordion__body { overflow: hidden; transition: height 0.3s var(--transition-smooth), opacity 0.3s var(--transition-smooth); font-size: 15px; color: var(--color-muted-foreground); }
.theme-accordion__body ul { padding-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.theme-accordion__body li { display: flex; align-items: flex-start; }
.theme-accordion__body li::before { content: ''; width: 4px; height: 4px; border-radius: 999px; background-color: var(--color-foreground); margin-top: 0.55rem; margin-right: 0.75rem; flex-shrink: 0; }
.theme-accordion__body p { padding-bottom: 0.75rem; line-height: 1.6; }
.theme-accordion__body p:last-child { padding-bottom: 1.5rem; }
.posted_in { overflow-wrap: break-word; word-break: break-word; }

.related-products-section { padding: 5rem 0; border-top: 1px solid var(--color-border); }
.related-products-head { text-align: center; margin-bottom: 3rem; }

/* =========================================================================
   Add-to-cart button style 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, var(--color-primary-foreground)) !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: none !important;
	cursor: pointer !important;
	transition: opacity 0.2s ease !important;
}
.single_add_to_cart_button.button.theme-btn-primary,
.add_to_cart_button.button.theme-btn-primary {
	background-color: var(--color-foreground) !important;
	color: var(--color-background) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.25em !important;
	font-size: 12px !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-primary-foreground) !important;
}
.single_add_to_cart_button.button.theme-btn-primary:hover,
.add_to_cart_button.button.theme-btn-primary:hover {
	background-color: var(--color-foreground) !important;
	color: var(--color-background) !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;
}
.theme-product-card .add_to_cart_button.ajax_add_to_cart {
	min-height: unset !important;
	padding: 0.75rem 1rem !important;
	border-radius: 999px !important;
	background-color: var(--color-teal) !important;
	color: var(--color-background) !important;
}
.theme-product-card .add_to_cart_button.ajax_add_to_cart:hover {
	background-color: var(--color-background) !important;
	color: var(--color-teal) !important;
}
.single-product .single_add_to_cart_button.loading::after,
.ajax_add_to_cart.loading::after { display: none !important; }
.ajax_add_to_cart.theme-btn-loading { opacity: 0.6 !important; pointer-events: none !important; cursor: wait !important; }

/* =========================================================================
   WooCommerce notices (Section 14.1)
   ========================================================================= */
.single-product .woocommerce-message,
.single-product .woocommerce-info { display: none; }
#theme-cart-drawer .woocommerce-message { display: none; }
.woocommerce-message, .woocommerce-error, .woocommerce-info {
	border-radius: 0.75rem; padding: 1rem 1.5rem; font-family: var(--font-body); border-top: none;
	background-color: var(--color-card); color: var(--color-foreground); list-style: none; margin: 0 0 1.5rem;
}

/* =========================================================================
   Shop / archive page shell
   ========================================================================= */
.theme-archive__head { text-align: center; margin-bottom: 2.5rem; }

/* =========================================================================
   404 page
   ========================================================================= */
.theme-404__inner { padding-block: 8rem; text-align: center; }
.theme-404__code { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; }
.theme-404__body { font-size: 1.25rem; color: var(--color-muted-foreground); margin-bottom: 1rem; }
.theme-404__link { color: var(--color-primary); text-decoration: underline; }

/* =========================================================================
   Checkout (WooCommerce Blocks) — Lovable-aligned layout
   ========================================================================= */
body.woocommerce-cart .page-title,
body.woocommerce-account .page-title { max-width: 1400px; margin: 0 auto 2rem; padding: 0 1.5rem; font-size: 2rem; font-weight: 600; }
@media (min-width: 1024px) { body.woocommerce-cart .page-title, body.woocommerce-account .page-title { padding: 0 2rem; } }

body.woocommerce-checkout .site-main,
body.woocommerce-checkout .theme-checkout-main { padding-top: var(--header-height); padding-bottom: 4rem; }
.theme-checkout-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1.5rem; box-sizing: border-box; }
@media (min-width: 1024px) { .theme-checkout-wrap { padding-inline: 2rem; } }
.theme-checkout-header { margin-bottom: 2.5rem; }
.theme-checkout-header__back {
	display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem;
	font-size: 0.875rem; color: var(--color-muted-foreground); text-decoration: none; transition: color 0.2s;
}
.theme-checkout-header__back:hover { color: var(--color-foreground); }
.theme-checkout-header__title { font-size: 2rem; font-weight: 600; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .theme-checkout-header__title { font-size: 2.25rem; } }
.theme-checkout-header__intro { color: var(--color-muted-foreground); max-width: 42rem; }

body.woocommerce-checkout .theme-checkout-main > .container-wide,
body.woocommerce-checkout .theme-checkout-main .entry-content,
.entry-content .wc-block-checkout,
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-checkout .wc-block-checkout {
	max-width: 1280px; width: 100%; margin-inline: auto; box-sizing: border-box; min-width: 0;
}

body.woocommerce-checkout .wc-block-components-notices,
.entry-content .wc-block-components-notices {
	max-width: 1280px; margin-inline: auto; width: 100%; box-sizing: border-box; margin-bottom: 1rem;
}

@media (min-width: 768px) {
	body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout,
	body.woocommerce-checkout .wc-block-checkout .wc-block-checkout-sidebar-layout,
	.entry-content .wc-block-checkout .wc-block-components-sidebar-layout,
	.entry-content .wc-block-checkout .wc-block-checkout-sidebar-layout {
		display: grid !important;
		grid-template-columns: 1fr minmax(360px, 400px);
		gap: var(--checkout-gap);
		align-items: start;
		flex-direction: unset;
		flex-wrap: nowrap;
		margin: 0;
	}
	body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-checkout__main,
	body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
	body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-checkout__sidebar,
	body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar,
	.entry-content .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-checkout__main,
	.entry-content .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-checkout__sidebar {
		width: auto !important; max-width: 100%; min-width: 0; margin: 0 !important; padding: 0 !important; box-sizing: border-box;
	}
	body.woocommerce-checkout .wc-block-checkout:has(> .wc-block-checkout__main):has(> .wc-block-checkout__sidebar),
	.entry-content .wc-block-checkout:has(> .wc-block-checkout__main):has(> .wc-block-checkout__sidebar) {
		display: grid;
		grid-template-columns: 1fr minmax(360px, 400px);
		gap: var(--checkout-gap);
		align-items: start;
	}
	body.woocommerce-checkout .wc-block-checkout > .wc-block-components-notices,
	.entry-content .wc-block-checkout > .wc-block-components-notices { grid-column: 1 / -1; }
}

body.woocommerce-checkout .wc-block-checkout__sidebar,
body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block,
.entry-content .wc-block-checkout__sidebar,
.entry-content .wc-block-components-sidebar {
	background: transparent; padding: 0; border-radius: 0;
}

body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,
.entry-content .wp-block-woocommerce-checkout-order-summary-block {
	width: 100%; background-color: var(--color-card); border-radius: var(--card-radius); padding: var(--section-padding); box-sizing: border-box;
}

body.woocommerce-checkout .wc-block-checkout-empty,
.entry-content .wc-block-checkout-empty {
	margin-inline: auto; max-width: 36rem; text-align: center;
	display: flex; flex-direction: column; align-items: center;
}

body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-select select,
.entry-content .wc-block-components-text-input input,
.entry-content .wc-block-components-select select {
	width: 100% !important; max-width: none !important;
	font-family: var(--font-body); color: var(--color-foreground);
	border: 1px solid var(--color-border); border-radius: 0.65rem; background-color: var(--color-background);
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-select select:focus,
.entry-content .wc-block-components-text-input input:focus,
.entry-content .wc-block-components-select select:focus {
	border-color: var(--color-primary);
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
.entry-content .wc-block-components-checkout-place-order-button {
	background-color: var(--color-foreground) !important; color: var(--color-background) !important;
	border-radius: var(--btn-radius) !important; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.entry-content .wc-block-components-checkout-place-order-button:hover { opacity: 0.9; }

/* =========================================================================
   Thank-you page (Section 22.8)
   ========================================================================= */
body.theme-thankyou-page { overflow-x: hidden; }
body.theme-thankyou-page .woocommerce-order,
body.theme-thankyou-page .woocommerce-order-overview,
body.theme-thankyou-page .woocommerce-customer-details,
body.theme-thankyou-page .woocommerce-order-details { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
body.theme-thankyou-page .woocommerce-order-overview { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1.5rem; background-color: var(--color-card); border-radius: var(--card-radius); margin-bottom: 2rem; }
body.theme-thankyou-page .woocommerce-order h2,
body.theme-thankyou-page .woocommerce-order-details__title { font-size: 1.5rem; font-weight: 600; padding: 0 0 1rem; margin-top: 2rem; }
body.theme-thankyou-page .woocommerce-order-details table { width: 100%; table-layout: fixed; border-collapse: collapse; }
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 var(--color-border); }
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 address { max-width: 480px; overflow-wrap: break-word; }
@media (min-width: 768px) {
	body.theme-thankyou-page .woocommerce-customer-details { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
}

/* =========================================================================
   Cart / My Account width parity (Section 13.7)
   ========================================================================= */
body.woocommerce-cart .site-main,
body.woocommerce-account .site-main { padding-top: var(--header-height); padding-bottom: 4rem; }
