/*
Theme Name: on*arte
Theme URI: https://onarte.pl
Description: Motyw potomny Storefront dla marketplace on*arte — biel, czerń, limonkowy akcent. Display: Space Grotesk, body: Inter.
Author: on-arte
Template: storefront
Version: 0.1.0
Text Domain: onarte
*/

/* =========================================================================
   TOKENY
   ========================================================================= */
:root {
	--ink:   #0A0A0A;
	--bg:    #FFFFFF;
	--lime:  #C6F500;
	--lime-deep: #A9D400;
	--coral: #DE542C;
	--muted: #6E6E6E;
	--line:  #ECECEC;
	--soft:  #F6F6F4;

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

	--maxw: 1280px;
	--gut:  clamp(20px, 5vw, 64px);
}

/* =========================================================================
   BAZA
   ========================================================================= */
body,
.site {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .site-title, .onarte-section__title {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.04;
	color: var(--ink);
}

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--coral); }

.onarte-ast { color: var(--lime-deep); }

.col-full,
.onarte-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* Eyebrow / etykieta */
.onarte-eyebrow {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 14px;
}

/* =========================================================================
   HEADER / NAWIGACJA (Storefront)
   ========================================================================= */
.site-header {
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	padding-top: 22px;
	padding-bottom: 22px;
}
.site-header .site-title,
.site-header .site-title a {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 30px;
	letter-spacing: -0.03em;
	text-transform: lowercase;
	color: var(--ink);
}
.site-header .site-title a:hover { color: var(--ink); }

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	color: var(--ink);
	letter-spacing: 0.01em;
}
.main-navigation ul.menu > li > a:hover { color: var(--coral); }
.main-navigation ul.menu > li.current-menu-item > a {
	box-shadow: inset 0 -2px 0 var(--lime);
}

/* =========================================================================
   PRZYCISKI
   ========================================================================= */
.button,
button.button,
a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.added_to_cart {
	background: var(--ink);
	color: #fff;
	border: 1px solid var(--ink);
	border-radius: 999px;
	padding: 0.85em 1.6em;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.added_to_cart:hover {
	background: var(--lime);
	color: var(--ink);
	border-color: var(--lime);
	transform: translateY(-1px);
}
.button.onarte-btn--ghost,
a.button.onarte-btn--ghost {
	background: transparent;
	color: var(--ink);
}
.button.onarte-btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* =========================================================================
   STRONA GŁÓWNA — HERO
   ========================================================================= */
.onarte-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
}
.onarte-hero__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(48px, 9vw, 120px) var(--gut) clamp(56px, 10vw, 130px);
	position: relative;
	z-index: 2;
}
.onarte-hero__headline {
	font-size: clamp(44px, 8.5vw, 116px);
	line-height: 0.98;
	margin: 0 0 26px;
	max-width: 13ch;
}
.onarte-hero__headline .onarte-ast { font-size: 0.9em; }
.onarte-hero__sub {
	font-size: clamp(17px, 2vw, 22px);
	color: var(--muted);
	max-width: 52ch;
	margin: 0 0 34px;
}
.onarte-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Oversized lime asterisk — signature */
.onarte-hero__mark {
	position: absolute;
	right: clamp(-40px, -2vw, 0px);
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(280px, 42vw, 620px);
	line-height: 1;
	color: var(--lime);
	z-index: 1;
	pointer-events: none;
	user-select: none;
}
@media (max-width: 980px) {
	.onarte-hero__mark { opacity: 0.18; right: -10vw; }
}

/* =========================================================================
   SEKCJE HOME
   ========================================================================= */
.onarte-section { padding: clamp(48px, 7vw, 96px) 0; border-bottom: 1px solid var(--line); }
.onarte-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 38px;
	flex-wrap: wrap;
}
.onarte-section__title { font-size: clamp(28px, 4vw, 46px); margin: 0; }
.onarte-section__link { font-weight: 600; white-space: nowrap; }
.onarte-section__link::after { content: " →"; color: var(--lime-deep); }

/* Trzy filary */
.onarte-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
}
.onarte-pillar { padding: 40px 34px; border-right: 1px solid var(--line); }
.onarte-pillar:last-child { border-right: 0; }
.onarte-pillar__num {
	font-family: var(--font-display);
	font-size: 14px; font-weight: 700; color: var(--lime-deep);
	letter-spacing: 0.1em;
}
.onarte-pillar h3 { font-size: 23px; margin: 14px 0 10px; }
.onarte-pillar p { color: var(--muted); margin: 0; font-size: 15.5px; }
@media (max-width: 860px) {
	.onarte-pillars { grid-template-columns: 1fr; }
	.onarte-pillar { border-right: 0; border-bottom: 1px solid var(--line); }
	.onarte-pillar:last-child { border-bottom: 0; }
}

/* Opinie */
.onarte-testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.onarte-quote {
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 34px;
	background: var(--soft);
}
.onarte-quote p { font-family: var(--font-display); font-size: 22px; line-height: 1.35; margin: 0 0 18px; letter-spacing: -0.01em; }
.onarte-quote cite { color: var(--muted); font-style: normal; font-size: 14px; font-weight: 600; }
.onarte-quote cite::before { content: "— "; color: var(--lime-deep); }
@media (max-width: 720px) { .onarte-testimonials { grid-template-columns: 1fr; } }

/* =========================================================================
   art*letter
   ========================================================================= */
.onarte-artletter { background: var(--ink); color: #fff; }
.onarte-artletter__inner {
	max-width: 720px; margin-inline: auto;
	padding: clamp(48px, 8vw, 96px) var(--gut); text-align: center;
}
.onarte-artletter__title { color: #fff; font-size: clamp(34px, 5vw, 58px); margin: 0 0 16px; }
.onarte-artletter__title .onarte-ast { color: var(--lime); }
.onarte-artletter__sub { color: rgba(255,255,255,0.72); font-size: 18px; margin: 0 0 30px; }
.onarte-artletter__form { display: flex; gap: 10px; max-width: 480px; margin-inline: auto; }
.onarte-artletter__form input[type="email"] {
	flex: 1; padding: 0.95em 1.2em; border-radius: 999px; border: 1px solid #333;
	background: #161616; color: #fff; font-size: 16px;
}
.onarte-artletter__form input[type="email"]::placeholder { color: #888; }
.onarte-artletter__form button {
	background: var(--lime); color: var(--ink); border: 0; border-radius: 999px;
	padding: 0 1.7em; font-weight: 700; font-family: var(--font-body); cursor: pointer;
	transition: transform .15s ease;
}
.onarte-artletter__form button:hover { transform: translateY(-1px); }
.onarte-artletter__ok { color: var(--lime); font-weight: 600; font-size: 18px; }
@media (max-width: 560px) { .onarte-artletter__form { flex-direction: column; } .onarte-artletter__form button { padding: 0.9em; } }

/* =========================================================================
   ARTYŚCI — siatka i profil
   ========================================================================= */
.onarte-avatar {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--lime); color: var(--ink);
	border-radius: 50%; font-family: var(--font-display); font-weight: 700;
	letter-spacing: -0.02em;
}
.onarte-artists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.onarte-artist-card {
	text-decoration: none; color: inherit; text-align: center;
	border: 1px solid var(--line); border-radius: 14px; padding: 30px 22px;
	transition: box-shadow .15s ease, transform .15s ease;
	background: #fff;
}
.onarte-artist-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.08); transform: translateY(-2px); color: inherit; }
.onarte-artist-card__name { font-size: 19px; margin: 16px 0 6px; }
.onarte-artist-card__bio { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.onarte-artist-card__count { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lime-deep); font-weight: 600; }

.onarte-profile { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.onarte-profile__head { display: flex; gap: 30px; align-items: center; margin: 30px 0 28px; flex-wrap: wrap; }
.onarte-profile__name { font-size: clamp(34px, 5vw, 60px); margin: 6px 0 12px; }
.onarte-profile__bio { color: var(--muted); max-width: 60ch; margin: 0 0 12px; }
.onarte-verified { color: var(--lime-deep); }
.onarte-profile__statement { border-left: 3px solid var(--lime); padding-left: 22px; margin: 0 0 40px; max-width: 70ch; }
.onarte-profile__statement p { font-family: var(--font-display); font-size: 22px; line-height: 1.4; }

/* =========================================================================
   PRODUKTY / KATALOG (Storefront WooCommerce)
   ========================================================================= */
/* Spójna siatka dzieł — nadpisujemy floaty Storefront własnym gridem. */
.onarte-wrap ul.products,
.woocommerce-shop ul.products,
.tax-product_cat ul.products,
.tax-onarte_collection ul.products,
.author ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
}
.onarte-wrap ul.products::before, .onarte-wrap ul.products::after,
.woocommerce-shop ul.products::before, .woocommerce-shop ul.products::after,
.tax-product_cat ul.products::before, .tax-product_cat ul.products::after,
.tax-onarte_collection ul.products::before, .tax-onarte_collection ul.products::after,
.author ul.products::before, .author ul.products::after { content: none !important; display: none !important; }
.onarte-wrap ul.products li.product,
.woocommerce-shop ul.products li.product,
.tax-product_cat ul.products li.product,
.tax-onarte_collection ul.products li.product,
.author ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}
@media (max-width: 980px) {
	.onarte-wrap ul.products, .woocommerce-shop ul.products,
	.tax-product_cat ul.products, .tax-onarte_collection ul.products,
	.author ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.onarte-wrap ul.products, .woocommerce-shop ul.products,
	.tax-product_cat ul.products, .tax-onarte_collection ul.products,
	.author ul.products { grid-template-columns: 1fr; }
}

/* Jednolite proporcje miniatur dzieł (spójna siatka nawet bez zdjęć). */
.onarte-wrap ul.products li.product img,
.woocommerce-shop ul.products li.product img,
.tax-product_cat ul.products li.product img,
.tax-onarte_collection ul.products li.product img,
.author ul.products li.product img {
	width: 100% !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--soft);
	margin-bottom: 14px !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.woocommerce ul.products li.product .price { color: var(--ink); font-weight: 600; }
.woocommerce ul.products li.product { text-align: left; }
.woocommerce ul.products li.product img { border-radius: 10px; margin-bottom: 14px; }
.woocommerce-loop-product__link:hover img { opacity: 0.92; }

/* Karta dzieła — specyfikacja (wtyczka) */
.onarte-specs-table th { color: var(--muted); font-weight: 600; }
.onarte-curatorial h3 { font-family: var(--font-display); }

/* =========================================================================
   STOPKA
   ========================================================================= */
.site-footer {
	background: var(--ink);
	color: rgba(255,255,255,0.75);
	border-top: 0;
	padding-top: 56px;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--lime); }
.site-footer .site-info { border-top: 1px solid #2a2a2a; color: rgba(255,255,255,0.5); padding-top: 22px; margin-top: 40px; }

.onarte-footer-cols {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 32px;
}
.onarte-footer-logo { font-family: var(--font-display); font-weight: 700; font-size: 26px; text-transform: lowercase; color: #fff; display: inline-block; }
.onarte-footer-brand p { color: rgba(255,255,255,0.6); max-width: 34ch; margin-top: 12px; font-size: 15px; }
.onarte-footer-col h4 { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0 0 16px; font-weight: 600; }
.onarte-footer-col a { display: block; margin-bottom: 10px; font-size: 15px; color: rgba(255,255,255,0.85); }
.onarte-footer-social { display: flex; gap: 10px; margin-top: 18px; }
.onarte-footer-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border: 1px solid #333; border-radius: 50%;
	font-size: 12px; font-weight: 700; margin: 0;
}
.onarte-footer-social a:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }
@media (max-width: 860px) {
	.onarte-footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
	.onarte-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .onarte-footer-cols { grid-template-columns: 1fr; } }

/* =========================================================================
   STRONY STATYCZNE (treść)
   ========================================================================= */
.page:not(.woocommerce-page) .entry-content { max-width: 760px; font-size: 17px; }
.page .entry-content h2 { font-size: clamp(24px, 3vw, 34px); margin: 1.8em 0 0.5em; }
.page .entry-content h3 { font-size: 21px; margin: 1.4em 0 0.4em; }
.page .entry-content p, .page .entry-content li { line-height: 1.7; }
.onarte-lead { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 1.2em; }
.onarte-note { background: var(--soft); border-left: 3px solid var(--coral); padding: 14px 18px; border-radius: 4px; font-size: 15px; }

.onarte-howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 24px 0 8px; }
.onarte-howto__step { border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.onarte-howto__num { font-family: var(--font-display); font-weight: 700; color: var(--lime-deep); font-size: 14px; letter-spacing: 0.08em; }
.onarte-howto__step h3 { margin: 10px 0 6px; font-size: 18px; }
.onarte-howto__step p { color: var(--muted); font-size: 15px; margin: 0; }
@media (max-width: 720px) { .onarte-howto { grid-template-columns: 1fr; } }

.onarte-belief { list-style: none; padding: 0; }
.onarte-belief li { padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line); position: relative; }
.onarte-belief li::before { content: "*"; position: absolute; left: 0; top: 14px; color: var(--lime-deep); font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1; }

.onarte-cta-band { background: var(--ink); color: #fff; border-radius: 14px; padding: 36px; margin-top: 40px; text-align: center; }
.onarte-cta-band h3 { color: #fff; font-size: 26px; margin: 0 0 8px; }
.onarte-cta-band p { color: rgba(255,255,255,0.7); margin: 0 0 8px; }
.onarte-cta-band .button { margin-top: 8px; }

.onarte-faq { border: 1px solid var(--line); border-radius: 10px; padding: 0; margin: 0 0 12px; overflow: hidden; }
.onarte-faq summary { cursor: pointer; padding: 18px 20px; font-family: var(--font-display); font-weight: 600; font-size: 17px; list-style: none; position: relative; }
.onarte-faq summary::-webkit-details-marker { display: none; }
.onarte-faq summary::after { content: "+"; position: absolute; right: 20px; color: var(--lime-deep); font-size: 22px; line-height: 1; }
.onarte-faq[open] summary::after { content: "–"; }
.onarte-faq[open] summary { border-bottom: 1px solid var(--line); }
.onarte-faq p { padding: 16px 20px; margin: 0; color: var(--muted); }

.onarte-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 24px 0; }
.onarte-contact__item { border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.onarte-contact__item p { margin: 8px 0 0; font-size: 17px; }
@media (max-width: 720px) { .onarte-contact { grid-template-columns: 1fr; } }

/* =========================================================================
   KOSZYK / CHECKOUT
   ========================================================================= */
.woocommerce-cart .cart_totals, .woocommerce-checkout #order_review {
	border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: var(--soft);
}
.woocommerce table.shop_table { border-radius: 12px; border-color: var(--line); }
.woocommerce table.shop_table th { font-family: var(--font-body); }
.woocommerce .cart-collaterals h2, .woocommerce-checkout h3 { font-family: var(--font-display); }
.woocommerce #payment, .woocommerce-checkout #payment { background: transparent; }
.woocommerce-checkout #payment ul.payment_methods { border-radius: 10px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
	border: 1px solid #ccc; border-radius: 8px; padding: 10px 12px;
}
.woocommerce-info, .woocommerce-message { border-top-color: var(--lime-deep); }
.woocommerce-info::before, .woocommerce-message::before { color: var(--lime-deep); }
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt {
	background: var(--ink); color: #fff; border-radius: 999px; border: 1px solid var(--ink);
}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
	background: var(--lime); color: var(--ink); border-color: var(--lime);
}

/* =========================================================================
   DOSTĘPNOŚĆ
   ========================================================================= */
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 3px solid var(--lime);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}