/*
Theme Name: Otto Parfüm (Storefront Child)
Template: storefront
Description: Storefront üzerine, Le Labo'nun genel minimalist/editoryal tasarım dilinden (renk sıklığı, boşluk, tipografi tonu) ilham alan — ama kendi kodu/marka kimliğiyle yazılmış özelleştirmeler. Hiçbir kod/görsel/metin başka bir siteden alınmamıştır.
Author: Otto Parfüm
Version: 1.0.0
Text Domain: otto-storefront-child
*/

:root {
	--otto-bg: #f7f7f5;
	--otto-surface: #ffffff;
	--otto-text: #262626;
	--otto-muted: #8c8c8c;
	--otto-accent: #262626;
	--otto-border: #e6e4de;
	--otto-font-heading: "Fraunces", Georgia, serif;
	--otto-font-body: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

body {
	background: var(--otto-bg);
	color: var(--otto-text);
	font-family: var(--otto-font-body);
}

h1, h2, h3, h4, h5,
.site-title,
.woocommerce div.product .product_title,
.storefront-sale-badge,
.related.products > h2 {
	font-family: var(--otto-font-heading);
	font-weight: 400;
	letter-spacing: 0.01em;
}

a {
	color: var(--otto-text);
}

/* ---------- Header: ortalanmış logo + geniş harf aralıklı, büyük harf navigasyon ---------- */
.site-header {
	background: var(--otto-surface);
	border-bottom: 1px solid var(--otto-border);
}

.site-branding {
	text-align: center;
	padding: 24px 0 8px;
}

.site-title {
	font-size: 26px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.site-title a {
	text-decoration: none;
}

.site-description {
	display: none;
}

.main-navigation {
	background: transparent;
	border-top: 1px solid var(--otto-border);
}

.main-navigation ul.menu {
	justify-content: center;
	text-align: center;
}

.main-navigation ul li a {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otto-accent);
}

.main-navigation ul.sub-menu {
	text-align: left;
}

.storefront-primary-navigation {
	background: transparent;
}

.handheld-navigation {
	background: var(--otto-surface);
	border-top: 1px solid var(--otto-border);
}

/* ---------- Butonlar ---------- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
	background-color: var(--otto-text);
	color: var(--otto-surface);
	border: none;
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 12px;
	padding: 14px 28px;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--otto-accent);
	opacity: 0.85;
}

/* ---------- Ürün grid: sade, çerçevesiz ---------- */
ul.products li.product {
	text-align: center;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--otto-font-heading);
	font-weight: 400;
	font-size: 16px;
}

ul.products li.product .price {
	color: var(--otto-muted);
}

.storefront-sorting,
.woocommerce-result-count {
	color: var(--otto-muted);
	font-size: 13px;
}

/* ---------- Footer ---------- */
#colophon,
.site-footer {
	background: var(--otto-surface);
	border-top: 1px solid var(--otto-border);
}

.site-footer .widget-title {
	font-family: var(--otto-font-heading);
	text-transform: none;
	letter-spacing: 0.02em;
}

/* ---------- Koku ailesi kartları (ana sayfa shortcode) ---------- */
.otto-families {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 48px 0;
}

.entry-content .otto-families a,
.otto-families a {
	display: block;
	text-align: center;
	text-decoration: none;
	color: var(--otto-text);
	padding: 32px 16px;
	background: var(--otto-surface);
	border: 1px solid var(--otto-border);
}

.otto-families a:hover {
	border-color: var(--otto-accent);
}

.otto-families .swatch {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	margin: 0 auto 12px;
}

.otto-families .name {
	font-family: var(--otto-font-heading);
	font-size: 16px;
}

@media (max-width: 768px) {
	.otto-families {
		grid-template-columns: repeat(2, 1fr);
	}
}