/* ==========================================================================
   BolidArt — design tokens
   ========================================================================== */
:root {
	--color-bg: #faf8f5;
	--color-surface: #ffffff;
	--color-ink: #16171c;
	--color-ink-soft: #55565f;
	--color-ink-faint: #8a8b93;
	--color-border: #e8e3da;
	--color-border-strong: #d8d2c6;

	--color-accent: #e2551e;
	--color-accent-dark: #c2440f;
	--color-accent-soft: #fdece2;
	--color-ink-on-accent: #fff8f4;

	--color-secondary: #17509e;
	--color-secondary-soft: #e8f0fd;

	--color-success: #15803b;
	--color-success-soft: #e7f6ec;
	--color-danger: #d1372f;
	--color-danger-soft: #fdeceb;

	--font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, sans-serif;

	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 26px;
	--radius-full: 999px;

	--shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.05), 0 1px 1px rgba(20, 20, 20, 0.03);
	--shadow-md: 0 8px 24px -8px rgba(20, 20, 20, 0.14);
	--shadow-lg: 0 24px 48px -16px rgba(20, 20, 20, 0.22);

	--container-w: 1280px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-ink);
	background: var(--color-bg);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 0.5em; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

.container { max-width: var(--container-w); margin: 0 auto; padding: 0 24px; }
.section { padding: 64px 0; }
.section--narrow { max-width: 860px; margin: 0 auto; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; gap: 16px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(1.5rem, 2vw, 2rem); margin: 0; }
.section-head p { color: var(--color-ink-soft); margin: 4px 0 0; }
.eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 10px; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 26px; border-radius: var(--radius-full); border: none;
	font-weight: 600; font-size: 0.95rem; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}
.btn--primary { background: var(--color-accent); color: var(--color-ink-on-accent); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--dark { background: var(--color-ink); color: #fff; }
.btn--dark:hover { transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--color-ink); border: 1.5px solid var(--color-border-strong); }
.btn--ghost:hover { border-color: var(--color-ink); }
.btn--block { width: 100%; }
.btn--sm { padding: 9px 18px; font-size: 0.85rem; }

.badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.badge--sale { background: var(--color-accent); color: #fff; }
.badge--new { background: var(--color-secondary); color: #fff; }

.stock-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full); }
.stock-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.stock-pill--in { background: var(--color-success-soft); color: var(--color-success); }
.stock-pill--in::before { background: var(--color-success); }
.stock-pill--out { background: var(--color-danger-soft); color: var(--color-danger); }
.stock-pill--out::before { background: var(--color-danger); }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar { background: var(--color-ink); color: #cfd0d6; font-size: 0.8rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 38px; }
.topbar__inner a { color: #fff; }
.topbar__divider { margin: 0 10px; opacity: 0.4; }
.topbar__meta { opacity: 0.75; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 248, 245, 0.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--color-border); }
.header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; height: 84px; }

.brand { display: flex; align-items: center; }
.brand__logo { height: 56px; width: auto; }
.brand__logo--footer { height: 64px; margin-bottom: 16px; }

.header-search { display: flex; align-items: center; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-full); padding: 6px 6px 6px 20px; }
.header-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 0.92rem; min-width: 0; }
.header-search button { width: 40px; height: 40px; border-radius: 50%; background: var(--color-ink); color: #fff; display: flex; align-items: center; justify-content: center; border: none; }

.header-actions { display: flex; align-items: center; gap: 8px; }
.header-action { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-ink); }
.header-action:hover { background: var(--color-surface); }
.cart-count { position: absolute; top: 2px; right: 2px; background: var(--color-accent); color: #fff; font-size: 0.65rem; font-weight: 700; min-width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: none; background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.menu-toggle span { width: 22px; height: 2px; background: var(--color-ink); border-radius: 2px; }

.main-nav { border-top: 1px solid var(--color-border); }
.main-nav__inner { display: flex; }
.category-nav { display: flex; gap: 4px; padding: 4px 0; overflow-x: auto; }
.category-nav li a { display: block; padding: 12px 16px; font-size: 0.88rem; font-weight: 600; color: var(--color-ink-soft); border-radius: var(--radius-sm); white-space: nowrap; }
.category-nav li a:hover { color: var(--color-ink); background: var(--color-surface); }
.category-nav__sale { color: var(--color-accent) !important; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: var(--color-ink); color: #fff; }
.hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; padding: 88px 0; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); color: #fff; margin-bottom: 20px; }
.hero h1 span { color: var(--color-accent); }
.hero p { color: #c9cad2; font-size: 1.08rem; max-width: 480px; margin-bottom: 32px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__glow { position: absolute; inset: -20% -10%; background: radial-gradient(60% 60% at 75% 30%, rgba(226, 85, 30, 0.35), transparent 70%); z-index: 0; }
.hero__art { position: relative; }
.hero__art-card { background: linear-gradient(155deg, #22242c, #16171c); border: 1px solid #2b2d36; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-lg); }
.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; padding-top: 28px; border-top: 1px solid #2b2d36; }
.hero__stats strong { display: block; font-family: var(--font-display); font-size: 1.6rem; }
.hero__stats span { color: #9d9ea8; font-size: 0.82rem; }

/* ==========================================================================
   Category tiles
   ========================================================================== */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.cat-tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1 / 1; background: var(--color-ink); box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 0.4s ease; }
.cat-tile:hover img { transform: scale(1.06); }
.cat-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 12, 0.85), rgba(10, 10, 12, 0.05) 55%); }
.cat-tile__label { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; }
.cat-tile__label strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.cat-tile__label span { font-size: 0.78rem; opacity: 0.8; }

/* ==========================================================================
   Product grid (WooCommerce loop markup)
   ========================================================================== */
ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
ul.products li.product {
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
	padding: 16px; position: relative; transition: box-shadow 0.2s ease, transform 0.2s ease; list-style: none;
}
ul.products li.product:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
ul.products li.product a img { border-radius: var(--radius-sm); aspect-ratio: 1/1; object-fit: cover; margin-bottom: 14px; background: #f1efe9; }
ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; margin: 0 0 8px; color: var(--color-ink); }
ul.products li.product .price { font-weight: 700; font-size: 1.05rem; color: var(--color-ink); display: block; margin-bottom: 12px; }
ul.products li.product .price del { color: var(--color-ink-faint); font-weight: 400; font-size: 0.85rem; margin-right: 6px; }
ul.products li.product .price ins { text-decoration: none; color: var(--color-accent); }
ul.products li.product .button {
	display: inline-flex; align-items: center; justify-content: center; width: 100%;
	padding: 11px 16px; border-radius: var(--radius-full); background: var(--color-ink); color: #fff;
	font-weight: 600; font-size: 0.85rem; border: none; transition: background 0.15s ease;
}
ul.products li.product .button:hover { background: var(--color-accent); }
ul.products li.product .button.loading { opacity: 0.6; }
ul.products li.product .onsale { position: absolute; top: 14px; left: 14px; z-index: 1; }
.product-card__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.shop-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; color: var(--color-ink-soft); font-size: 0.88rem; }
.shop-toolbar select { border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--color-surface); }

.shop-wrap { display: block; }
.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.shop-sidebar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px; position: sticky; top: 100px; }
.shop-sidebar h3 { font-size: 0.95rem; margin-bottom: 14px; }
.shop-sidebar ul li { margin-bottom: 4px; }
.shop-sidebar ul li a { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--color-ink-soft); }
.shop-sidebar ul li a:hover, .shop-sidebar ul li.current-cat > a { background: var(--color-accent-soft); color: var(--color-accent-dark); }

/* ==========================================================================
   Single product
   ========================================================================== */
.product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 48px 0; }
.product-gallery img { border-radius: var(--radius-lg); background: #f1efe9; }
.product-summary .price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin: 14px 0; display: block; }
.product-summary .price del { font-size: 1.1rem; color: var(--color-ink-faint); font-weight: 400; margin-right: 10px; }
.product-summary .price ins { text-decoration: none; color: var(--color-accent); }
.product-summary h1 { font-size: 1.9rem; }
.product-meta-row { display: flex; align-items: center; gap: 14px; margin: 6px 0 20px; color: var(--color-ink-soft); font-size: 0.9rem; }
.product-summary .cart { display: flex; gap: 12px; align-items: center; margin: 24px 0; }
.product-summary .quantity input { width: 76px; padding: 13px 12px; border-radius: var(--radius-full); border: 1.5px solid var(--color-border); text-align: center; font-weight: 600; }
.product-summary table.variations, .product-summary .woocommerce-product-attributes { width: 100%; border-collapse: collapse; margin-top: 24px; }
.product-summary .woocommerce-product-attributes th, .product-summary .woocommerce-product-attributes td { padding: 10px 0; border-bottom: 1px solid var(--color-border); text-align: left; font-size: 0.9rem; }

.product-summary p.stock { display: none; } /* duplicate of our .stock-pill badge shown near the title */
.product-summary .product_meta { margin-top: 20px; font-size: 0.85rem; color: var(--color-ink-soft); }
.product-summary .product_meta > span { display: block; margin-bottom: 4px; }
.product-summary .product_meta a { color: var(--color-accent); }

.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__trigger {
	position: absolute; top: 16px; right: 16px; z-index: 2;
	width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.9);
	box-shadow: var(--shadow-sm); font-size: 0; color: transparent; overflow: hidden;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2316171c' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center;
}
.woocommerce-product-gallery__trigger img { display: none; }

.woocommerce-tabs { margin-top: 24px; border-top: 1px solid var(--color-border); padding-top: 24px; }
.woocommerce-tabs ul.tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.woocommerce-tabs ul.tabs li a { padding: 10px 18px; border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border); font-weight: 600; font-size: 0.88rem; }
.woocommerce-tabs ul.tabs li.active a { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.woocommerce-tabs .panel { max-width: 760px; }

.related.products { margin-top: 64px; }

/* ==========================================================================
   Cart / checkout — minimal, functional styling
   ========================================================================== */
table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
table.shop_table th, table.shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--color-border); text-align: left; }
table.shop_table thead th { background: var(--color-bg); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-soft); }
.woocommerce-cart-form .product-remove a { color: var(--color-danger); font-weight: 700; }
#respond input#submit, .checkout-button, button.button, input.button { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: var(--radius-full); border: none; background: var(--color-ink); color: #fff; font-weight: 600; }
#respond input#submit:hover, .checkout-button:hover, button.button:hover, input.button:hover { background: var(--color-accent); }
.cart-collaterals .cart_totals { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; max-width: 420px; margin-left: auto; }
form.checkout input.input-text, form.checkout select, form.checkout textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); margin-bottom: 4px; }
form.checkout label { font-size: 0.85rem; font-weight: 600; color: var(--color-ink-soft); }

/* ==========================================================================
   Promo strip / newsletter / posts
   ========================================================================== */
.promo-strip { background: var(--color-accent-soft); border-radius: var(--radius-lg); padding: 40px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
.promo-strip h3 { font-size: 1.5rem; margin-bottom: 6px; }
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-item strong { display: block; margin-bottom: 4px; font-size: 0.95rem; }
.trust-item span { color: var(--color-ink-soft); font-size: 0.85rem; }
.trust-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.newsletter { background: var(--color-ink); color: #fff; border-radius: var(--radius-lg); padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.newsletter h3 { color: #fff; font-size: 1.5rem; margin-bottom: 6px; }
.newsletter p { color: #c9cad2; margin: 0; }
.newsletter-form { display: flex; gap: 10px; }
.newsletter-form input { padding: 13px 18px; border-radius: var(--radius-full); border: none; min-width: 260px; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.post-card__thumb img { border-radius: var(--radius-md); aspect-ratio: 16/10; object-fit: cover; }
.post-card__title { font-size: 1.05rem; margin: 12px 0 6px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #101116; color: #b9bac2; margin-top: 40px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding: 64px 0 40px; }
.footer__brand p { color: #9091a0; margin: 14px 0 18px; max-width: 320px; }
.footer__social { display: flex; gap: 14px; }
.footer__social a { color: #cfd0d6; font-size: 0.85rem; }
.footer-widget__title, .footer__col h4 { color: #fff; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; }
.footer__col ul li, .footer-widget ul li { margin-bottom: 10px; font-size: 0.9rem; }
.footer__col ul li a { color: #b9bac2; }
.footer__col ul li a:hover { color: #fff; }
.footer__bottom { border-top: 1px solid #24252d; }
.footer__bottom-inner { display: flex; justify-content: space-between; padding: 18px 0; font-size: 0.8rem; color: #7c7d8a; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
	.hero__inner { grid-template-columns: 1fr; padding: 56px 0; }
	.hero__art { order: -1; }
	.shop-layout { grid-template-columns: 1fr; }
	.shop-sidebar { position: static; }
	.product-hero { grid-template-columns: 1fr; gap: 28px; }
	.footer__grid { grid-template-columns: 1fr 1fr; }
	.trust-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	.topbar__meta { display: none; }
	.header__inner { grid-template-columns: auto 1fr; height: 72px; }
	.header-search { display: none; }
	.menu-toggle { display: flex; }
	.category-nav { display: none; }
	.main-nav.is-open .category-nav { display: flex; flex-direction: column; }
	.main-nav.is-open { background: var(--color-surface); }
	.promo-strip { grid-template-columns: 1fr; text-align: center; }
	.newsletter { flex-direction: column; text-align: center; }
	.newsletter-form { width: 100%; }
	.newsletter-form input { flex: 1; min-width: 0; }
	.footer__grid { grid-template-columns: 1fr; padding: 40px 0; }
	.trust-row { grid-template-columns: 1fr; }
}