/* ==========================================================================
   Frame Studio — main stylesheet
   Tokens, reset, typography, header (sticky), footer, mobile menu, search.
   ========================================================================== */

:root {
	--color-bg: #fafafa;
	--color-bg-alt: #ffffff;
	--color-text: #0a0a0a;
	--color-muted: #666;
	--color-border: #eaeaea;
	--color-accent: #c8102e;            /* SALE / İNDİRİM kırmızısı (ILA-style) */
	--color-overlay: rgba(0,0,0,.55);

	--font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--container: 1400px;
	--container-pad: clamp(16px, 4vw, 40px);

	--header-h: 84px;
	--header-h-scrolled: 64px;
	--topbar-h: 36px;

	--ease: cubic-bezier(.4,0,.2,1);
	--dur: .25s;
}

/* Reset minimal — Storefront brings its own; we patch the bits that matter. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* Override Storefront's hard-coded font-family with high-specificity rules. Storefront
   targets .menu li a and similar with classes (specificity > universal *), so we match
   their specificity using class chains and !important. */
html body,
html body input,
html body button,
html body select,
html body textarea,
html body optgroup,
html body *,
html body .menu,
html body .menu *,
html body .menu li,
html body .menu li a,
html body .menu-item,
html body .menu-item a,
html body .nav-menu,
html body .nav-menu *,
html body .navigation,
html body .navigation *,
html body .frame-header,
html body .frame-header *,
html body .frame-header__nav,
html body .frame-header__nav *,
html body .frame-menu,
html body .frame-menu *,
html body .frame-menu li,
html body .frame-menu li a,
html body .frame-mobile-list,
html body .frame-mobile-list *,
html body .frame-mobile-list li a,
html body .frame-footer,
html body .frame-footer *,
html body .frame-pcard,
html body .frame-pcard *,
html body .frame-rail,
html body .frame-rail *,
html body .woocommerce,
html body .woocommerce *,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body p, html body a, html body span, html body li, html body label, html body button {
	font-family: var(--font-sans) !important;
}
/* Preserve icon fonts where they're functionally required */
html body .star-rating,
html body .star-rating::before,
html body .star-rating span,
html body .star-rating span::before,
html body [class^="WooCommerce"]::before,
html body [class*="woocommerce-"]::before,
html body [class^="icon-"]::before,
html body [class*=" icon-"]::before {
	font-family: inherit !important;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: #000; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }

/* Storefront cleanup — kill anything that fights the header. */
.site-header { display: none !important; }    /* parent header dead, ours rules */
.site-branding { display: none !important; }
.storefront-handheld-footer-bar { display: none !important; }

/* Container */
.frame-container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--container-pad);
}

/* Buttons */
.frame-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border: 1px solid var(--color-text);
	background: transparent;
	color: var(--color-text);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.frame-btn--solid { background: var(--color-text); color: #fff; }
.frame-btn--solid:hover { background: #fff; color: var(--color-text); }
.frame-btn:hover { background: var(--color-text); color: #fff; }

/* ==========================================================================
   HEADER — topbar (.frame-topbar) is a sibling above the header and scrolls
   away naturally; .frame-header itself is sticky and turns into a floating
   pill once the topbar has left the viewport.
   ========================================================================== */
.frame-topbar {
	background: var(--color-text);
	color: #fff;
	height: var(--topbar-h);
	display: flex;
	align-items: center;
	overflow: hidden;
}
.frame-topbar p { margin: 0; }
.frame-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	overflow: visible;
	transition: margin .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.frame-header[data-stuck="true"] {
	margin: 12px 16px 0;
	border: 1px solid var(--color-border);
	border-radius: 2px;
	background: rgba(250,250,250,.94);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	box-shadow: 0 10px 30px -12px rgba(0,0,0,.18);
}

/* Top announcement bar — fixed height; scrolls away with the page (NOT sticky) */
.frame-header__topbar {
	background: var(--color-text);
	color: #fff;
	height: var(--topbar-h);
	display: flex;
	align-items: center;
	overflow: hidden;
}
.frame-header__topbar p { margin: 0; }
.frame-header__announce {
	margin: 0;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
}

.frame-header__main {
	position: relative;
	overflow: visible;
}
.frame-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: var(--header-h);
	gap: 24px;
	overflow: visible;
}

/* Left nav */
.frame-header__nav { justify-self: start; }
.frame-header__nav .frame-menu,
.frame-header__nav ul {
	display: flex;
	gap: 28px;
	align-items: center;
}
.frame-header__nav a {
	font-size: 12px;
	letter-spacing: 1.5px;
	font-weight: 500;
	text-transform: uppercase;
	padding: 8px 0;
	position: relative;
}
.frame-header__nav a.is-accent,
.frame-header__nav .menu-item.is-accent > a { color: var(--color-accent); }
.frame-header__nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}
.frame-header__nav a:hover::after,
.frame-header__nav .current-menu-item > a::after { transform: scaleX(1); }

/* Mega menu */
.frame-header__nav .has-mega { position: static; }
.frame-mega {
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding: 32px var(--container-pad);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 32px;
	max-width: var(--container);
	margin: 0 auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.has-mega:hover .frame-mega,
.has-mega:focus-within .frame-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}
.frame-mega__col h4 {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 14px;
	font-weight: 700;
}
.frame-mega__col ul { display: block; }
.frame-mega__col li { margin-bottom: 8px; }
.frame-mega__col a {
	font-size: 14px;
	letter-spacing: 0;
	font-weight: 400;
	text-transform: none;
	padding: 0;
}
.frame-mega__col a::after { display: none; }
.frame-mega__col a:hover { color: var(--color-accent); }

/* Brand — vertically centered in the row, same alignment as nav and icons */
.frame-header__brand {
	justify-self: center;
	align-self: center;
	position: relative;
}
.frame-brand img,
.custom-logo {
	display: block;
	width: auto;
	max-width: 320px;
	max-height: 64px;           /* fits inside the 84px row */
	margin-bottom: 0;
}
.frame-brand { display: block; }

/* Right actions */
.frame-header__actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 6px;
}
.frame-icon-btn,
button.frame-icon-btn,
a.frame-icon-btn {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: #000 !important;
	position: relative;
	box-shadow: none !important;
	text-decoration: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 0 !important;
	line-height: 1 !important;
	cursor: pointer;
	overflow: visible !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: opacity var(--dur) var(--ease);
}
.frame-icon-btn:hover { opacity: .65; background: transparent !important; color: #000 !important; }
.frame-icon-btn svg,
button.frame-icon-btn svg,
a.frame-icon-btn svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	color: #000 !important;
	stroke: #000 !important;
	fill: none !important;
	pointer-events: none;
}
/* Hardcode stroke on the SVG primitives in case currentColor is hijacked */
.frame-icon-btn svg circle,
.frame-icon-btn svg path,
.frame-icon-btn svg line,
.frame-icon-btn svg polyline,
.frame-icon-btn svg rect {
	stroke: #000 !important;
	fill: none !important;
	stroke-width: 1.5 !important;
}
.frame-cart-count {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--color-text);
	color: #fff;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.frame-cart-count[data-count="0"] { display: none; }

/* Burger */
.frame-header__burger {
	display: none;
	width: 40px; height: 40px;
	background: transparent;
	border: 0;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	padding: 0 10px;
}
.frame-header__burger span {
	display: block;
	width: 20px;
	height: 1.5px;
	background: var(--color-text);
}

/* Search overlay */
.frame-search {
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding: 24px 0;
}
.frame-search[hidden] { display: none; }
.frame-search__form {
	display: flex;
	gap: 12px;
	align-items: center;
}
.frame-search__form input[type="search"] {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid var(--color-border);
	background: #fff;
	font: inherit;
	font-size: 14px;
}
.frame-search__close {
	width: 40px; height: 40px;
	font-size: 24px;
	background: transparent;
	border: 0;
	color: var(--color-text);
}

/* ==========================================================================
   MOBILE MENU — drops down from below the header, header stays visible
   ========================================================================== */
.frame-mobile-menu {
	position: fixed;
	top: calc(var(--topbar-h) + var(--header-h) + 1px);
	left: 0; right: 0;
	bottom: 0;
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
	z-index: 90;                 /* below header (100) so the header stays on top */
	padding: 24px var(--container-pad) 32px;
	overflow-y: auto;
	overscroll-behavior: contain;
	transition: top var(--dur) var(--ease);
}
.frame-mobile-menu[hidden] { display: none; }
/* When the floating header is stuck, the mobile menu sits below it (with the 12px float gap) */
.frame-header[data-stuck="true"] ~ .frame-mobile-menu {
	top: calc(var(--header-h) + 12px + 1px);
}
.frame-mobile-menu__close { display: none; }      /* burger now toggles — close button hidden */
.frame-mobile-list { display: block; }
.frame-mobile-list li { border-bottom: 1px solid var(--color-border); }
.frame-mobile-list a {
	display: block;
	padding: 18px 0;
	font-size: 16px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 500;
}

/* Category accordion groups (native <details>) inside the mobile menu */
.frame-mobile-group > details > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	cursor: pointer;
	padding: 18px 0;
	font-size: 16px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--color-text);
}
.frame-mobile-group > details > summary::-webkit-details-marker { display: none; }
.frame-mobile-group > details > summary::after {
	content: "+";
	font-size: 22px;
	font-weight: 300;
	line-height: 1;
	color: var(--color-muted);
	transition: transform var(--dur) var(--ease);
}
.frame-mobile-group > details[open] > summary::after { content: "–"; }
.frame-mobile-sub { padding: 4px 0 14px; }
.frame-mobile-list .frame-mobile-sub li { border-bottom: 0; }
.frame-mobile-list .frame-mobile-sub li a {
	padding: 11px 0 11px 16px;
	font-size: 14px;
	letter-spacing: .6px;
	text-transform: none;
	font-weight: 400;
	color: var(--color-muted);
}
.frame-mobile-list .frame-mobile-sub li a:hover { color: var(--color-text); }

/* Burger animates to X when menu is open */
.frame-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.frame-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.frame-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.frame-header__burger span { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); transform-origin: center; }

/* ==========================================================================
   HERO — 4-panel category grid (desktop 1×4, mobile 2×2)
   ========================================================================== */
.frame-hero {
	display: grid;
	grid-template-columns: repeat(var(--frame-hero-cols, 4), 1fr);
	gap: 3px;                   /* slight white seams between panels */
	background: #ffffff;        /* the gap color */
	width: 100%;
	margin: 0;
}
.frame-hero__cell {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;        /* tall portrait */
	overflow: hidden;
	color: #fff;
	background: #fafafa;        /* fallback while img loads — off-white to avoid dark sub-pixel slivers at corners */
}
.frame-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .8s var(--ease), filter .4s var(--ease);
	will-change: transform;
}
.frame-hero__cell:hover .frame-hero__img {
	transform: scale(1.04);
	filter: brightness(1.04);
}
/* soft gradient at bottom-left to make label legible without darkening the whole image */
.frame-hero__cell::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 45%;
	background: linear-gradient( to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,0) 100% );
	pointer-events: none;
}
.frame-hero__label {
	position: absolute;
	left: clamp(16px, 2.4vw, 32px);
	bottom: clamp(16px, 2.4vw, 32px);
	z-index: 2;
	font-size: clamp(18px, 2vw, 30px);
	font-weight: 300;             /* soft weight, intentionally light */
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 18px rgba(0,0,0,.35);
}
.frame-hero__cell:hover .frame-hero__label { letter-spacing: 4px; transition: letter-spacing .5s var(--ease); }

@media (max-width: 900px) {
	.frame-hero { grid-template-columns: repeat(2, 1fr); gap: 2px; }
	.frame-hero__cell { aspect-ratio: 3 / 4; }
	.frame-hero__label { font-size: clamp(16px, 4vw, 22px); letter-spacing: 2px; }
}

/* ==========================================================================
   PRODUCT RAIL — horizontally scrollable; track lives inside .frame-container
   ========================================================================== */
.frame-rail {
	padding: 56px 0 64px;
	position: relative;
	overflow: hidden;             /* contain any sub-pixel rounding overflow */
}
.frame-rail__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}
.frame-rail__heading { display: flex; flex-direction: column; gap: 6px; }
.frame-rail__eyebrow {
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--color-muted);
}
.frame-rail__title {
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 600;
	letter-spacing: -.5px;
	margin: 0;
}
.frame-rail__controls {
	display: flex;
	align-items: center;
	gap: 8px;
}
.frame-rail__cta {
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 500;
	border-bottom: 1px solid var(--color-text);
	padding-bottom: 2px;
	margin-right: 16px;
	transition: opacity var(--dur) var(--ease);
}
.frame-rail__cta:hover { opacity: .65; }
.frame-rail__arrow {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.frame-rail__arrow:hover { border-color: var(--color-text); background: var(--color-text); color: #fff; }
.frame-rail__arrow:disabled { opacity: .35; cursor: default; background: transparent; color: var(--color-muted); border-color: var(--color-border); }

.frame-rail__track {
	display: flex;
	gap: 16px;                               /* roomier between cards */
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 0 8px;
	cursor: grab;                            /* hint that the rail is draggable */
	user-select: none;                       /* don't select text while dragging */
}
.frame-rail__track::-webkit-scrollbar { display: none; }
.frame-rail__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.frame-rail__track.is-dragging * { pointer-events: none; }   /* avoid spurious hovers + image drag */
.frame-rail__track > * { scroll-snap-align: start; flex: 0 0 calc((100% - 5 * 16px) / 6); min-width: 0; }   /* 6 visible desktop */

@media (max-width: 1200px) {
	.frame-rail__track > * { flex: 0 0 calc((100% - 4 * 16px) / 5); }   /* 5 visible */
}
@media (max-width: 900px) {
	.frame-rail__track { gap: 12px; }
	.frame-rail__track > * { flex: 0 0 calc((100% - 3 * 12px) / 4); }   /* 4 visible */
}
@media (max-width: 700px) {
	.frame-rail__track { gap: 10px; cursor: auto; }                     /* native touch scroll on mobile */
	.frame-rail__track > * { flex: 0 0 52vw; }                          /* peek next */
	.frame-rail__cta { display: none; }
}

/* ==========================================================================
   PRODUCT CARD — clean luxury card with hover treatment
   ========================================================================== */
.frame-pcard {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	transition: transform var(--dur) var(--ease);
}
.frame-pcard__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	background: #f0f0f0;
	overflow: hidden;
}
.frame-pcard__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .8s var(--ease), filter .4s var(--ease);
	will-change: transform;
}
.frame-pcard:hover .frame-pcard__img { transform: scale(1.05); }
.frame-pcard__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 10px;
	background: var(--color-text);
	color: #fff;
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 600;
}
.frame-pcard__badge--sale { background: var(--color-accent); }
.frame-pcard__shop {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 12px 16px;
	background: rgba(255,255,255,.95);
	color: var(--color-text);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
	transform: translateY(calc(100% + 12px));
	opacity: 0;
	transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.frame-pcard:hover .frame-pcard__shop { transform: translateY(0); opacity: 1; }
@media (hover: none) { .frame-pcard__shop { display: none; } }

.frame-pcard__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 2px;
}
.frame-pcard__name {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .2px;
	line-height: 1.3;
	color: var(--color-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.frame-pcard__name:hover { text-decoration: underline; text-underline-offset: 2px; }
.frame-pcard__price {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--color-text);
}
.frame-pcard__price del { color: var(--color-muted); font-weight: 400; margin-right: 6px; }
.frame-pcard__price ins { text-decoration: none; }
.frame-pcard__price .woocommerce-Price-currencySymbol { margin-left: 1px; }

@media (max-width: 700px) {
	.frame-pcard__name, .frame-pcard__price { font-size: 13px; }
}

/* ==========================================================================
   PRODUCT CARD — Variant B: editorial overlay (text on image, image-dominant)
   ========================================================================== */
.frame-pcard--overlay { gap: 0; }
.frame-pcard--overlay .frame-pcard__media {
	aspect-ratio: 4 / 5;          /* taller, more editorial */
}
.frame-pcard--overlay .frame-pcard__media::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 60%;
	background: linear-gradient( to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,0) 100% );
	pointer-events: none;
	z-index: 1;
}
.frame-pcard--overlay .frame-pcard__overlay {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: #fff;
	pointer-events: none;
}
.frame-pcard--overlay .frame-pcard__cat {
	font-size: 10px;
	letter-spacing: 2.5px;
	font-weight: 500;
	opacity: .85;
}
.frame-pcard--overlay .frame-pcard__name {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .2px;
	color: #fff;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.frame-pcard--overlay .frame-pcard__price {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .3px;
	color: #fff;
	margin-top: 4px;
}
.frame-pcard--overlay .frame-pcard__price del { color: rgba(255,255,255,.6); }
.frame-pcard--overlay .frame-pcard__price ins { text-decoration: none; color: #fff; }
.frame-pcard--overlay .frame-pcard__shop {
	left: 18px; right: 18px; bottom: auto; top: 18px;        /* CTA on top instead, slides from top */
	background: rgba(0,0,0,.78);
	color: #fff;
	transform: translateY(calc(-100% - 18px));
}
.frame-pcard--overlay:hover .frame-pcard__shop { transform: translateY(0); }
.frame-pcard--overlay .frame-pcard__badge { background: rgba(255,255,255,.92); color: #000; }
.frame-pcard--overlay .frame-pcard__badge--sale { background: var(--color-accent); color: #fff; }

@media (max-width: 700px) {
	.frame-pcard--overlay .frame-pcard__name { font-size: 13px; }
	.frame-pcard--overlay .frame-pcard__price { font-size: 13px; }
	.frame-pcard--overlay .frame-pcard__overlay { left: 12px; right: 12px; bottom: 12px; }
}

/* ==========================================================================
   PRODUCT CARD — Variant C: SHIFTED FRAME
   A black rectangle behind the image, offset up-left. Image's right + bottom
   edges sit flush; black peeks at top and left only — like a printer's
   misalignment, deliberate and editorial.
   ========================================================================== */
.frame-pcard--atelier {
	background: transparent;
	border: 0;
	padding: 0;
	transition: transform var(--dur) var(--ease);
	gap: 12px;
	position: relative;
}
.frame-pcard--atelier:hover { transform: translateY(-3px); }

.frame-pcard--atelier .frame-pcard__media {
	margin: 0;
	overflow: hidden;                    /* clip the hover zoom cleanly */
	background: #f6f6f6;
	aspect-ratio: 3 / 4;
	box-shadow: 0 14px 34px -16px rgba(0,0,0,.30);   /* soft premium elevation (replaces the hard black slab) */
	transition: box-shadow var(--dur) var(--ease);
}
.frame-pcard--atelier:hover .frame-pcard__media {
	box-shadow: 0 22px 46px -18px rgba(0,0,0,.42);   /* lift a touch on hover */
}

.frame-pcard--atelier .frame-pcard__img {
	filter: contrast(1.03);
	transition: filter .4s var(--ease), transform .9s var(--ease);
}
.frame-pcard--atelier:hover .frame-pcard__img { filter: none; transform: scale(1.03); }

.frame-pcard--atelier .frame-pcard__body {
	text-align: left;
	margin-left: 0;
	padding: 0;
	gap: 6px;
}
.frame-pcard--atelier .frame-pcard__name {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	line-height: 1.4;
	color: #000;
	-webkit-line-clamp: 2;
}
.frame-pcard--atelier .frame-pcard__price {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.2px;
	color: var(--color-muted);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
/* Slash from the logo, as price separator */
.frame-pcard--atelier .frame-pcard__price::before {
	content: "/";
	color: #000;
	font-weight: 400;
	font-size: 16px;
	font-style: italic;
	transform: skewX(-12deg);
	display: inline-block;
}

.frame-pcard--atelier .frame-pcard__badge {
	background: #fff;
	color: #000;
	border: 1px solid #000;
	top: 10px;
	left: 10px;
}
.frame-pcard--atelier .frame-pcard__badge--sale {
	background: var(--color-accent);
	color: #fff;
	border-color: var(--color-accent);
}
.frame-pcard--atelier .frame-pcard__shop {
	left: 10px; right: 10px; bottom: 10px;
	background: rgba(0,0,0,.92);
	color: #fff;
	letter-spacing: 2.5px;
}

@media (max-width: 700px) {
	.frame-pcard--atelier .frame-pcard__media {
		margin: 0;
		box-shadow: 0 10px 24px -14px rgba(0,0,0,.30);
	}
	.frame-pcard--atelier:hover .frame-pcard__media {
		box-shadow: 0 14px 30px -16px rgba(0,0,0,.40);
	}
	.frame-pcard--atelier .frame-pcard__body { margin-left: 0; }
	.frame-pcard--atelier .frame-pcard__name { font-size: 11px; letter-spacing: 1px; }
	.frame-pcard--atelier .frame-pcard__price { font-size: 11px; letter-spacing: .8px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.frame-footer {
	background: var(--color-text);
	color: #fff;
	padding: 64px 0 24px;
	margin-top: 64px;
}
.frame-footer a { color: #fff; }
.frame-footer a:hover { opacity: .65; color: #fff; }
.frame-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr) 1.6fr;
	gap: 48px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255,255,255,.15);
}
.frame-footer__col h4 {
	font-size: 11px;
	letter-spacing: 2.5px;
	margin: 0 0 18px;
	font-weight: 700;
}
.frame-footer__list li { margin-bottom: 10px; font-size: 14px; }
.frame-footer__logo img { filter: invert(1); max-width: 200px; }
.frame-footer__tagline { color: rgba(255,255,255,.7); margin-top: 14px; font-size: 13px; }
.frame-newsletter { display: flex; gap: 0; }
.frame-newsletter input {
	flex: 1;
	padding: 12px 14px;
	background: transparent;
	border: 1px solid rgba(255,255,255,.3);
	color: #fff;
	font: inherit;
	font-size: 13px;
}
.frame-newsletter input::placeholder { color: rgba(255,255,255,.5); }
.frame-newsletter .frame-btn {
	border-color: #fff;
	background: #fff;
	color: var(--color-text);
}
.frame-newsletter .frame-btn:hover { background: transparent; color: #fff; }
.frame-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 24px;
	font-size: 12px;
	color: rgba(255,255,255,.6);
	flex-wrap: wrap;
	gap: 16px;
}
.frame-footer__social { display: flex; gap: 18px; }
.frame-footer__social a { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	:root { --header-h: 68px; }
	/* Flexbox + absolute brand → logo perfectly viewport-centered, with same straddle as desktop */
	.frame-header__inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 0;
		position: relative;
	}
	.frame-header__nav { display: none; }
	.frame-header__burger { display: inline-flex; }

	.frame-header__brand {
		position: absolute;
		left: 50%;
		top: 50%;
		bottom: auto;
		transform: translate(-50%, -50%);   /* perfectly centered horizontally + vertically */
		justify-self: unset;
		align-self: unset;
		margin-bottom: 0;
	}
	.frame-header__brand a { display: block; }

	.frame-brand img,
	.custom-logo {
		max-width: 220px;
		max-height: 50px;          /* fits inside the 68px row */
		margin-bottom: 0;
	}

	.frame-header__topbar { font-size: 10px; }
	.frame-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.frame-footer__col--newsletter,
	.frame-footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	/* Mobile header: burger flush-left + logo next to burger + icon group on the right.
	   Undoes the absolute centering that overlaps the 4 right-side icons on narrow screens. */
	.frame-header .frame-container { padding-inline: 8px; }

	.frame-header__burger {
		padding: 0 4px;
		margin-left: -4px;
		width: 36px;
	}

	.frame-header__brand {
		position: static;
		transform: none;
		left: auto;
		top: auto;
		margin: 0 auto 0 0;    /* margin-right: auto pushes actions block to the right */
		padding-left: 6px;
		align-self: center;
	}
	.frame-brand img,
	.custom-logo {
		max-width: 150px;
		max-height: 40px;
		margin-bottom: 0;
	}

	.frame-header__actions { gap: 2px; }
	.frame-icon-btn { width: 34px; height: 34px; }
}
@media (max-width: 480px) {
	.frame-footer__grid { grid-template-columns: 1fr; }
	.frame-header__topbar p { font-size: 9px; letter-spacing: 1.2px; }
}

/* ==========================================================================
   PRODUCT CARD — multi-image gallery
   Desktop: hover slides to the 2nd image (pure CSS).
   Touch:   ‹ › tap controls + swipe move through all images.
   ========================================================================== */
.frame-pcard__slider {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}
.frame-pcard__slides {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform .55s var(--ease);
	will-change: transform;
}
.frame-pcard__slider .frame-pcard__img {
	position: relative;
	inset: auto;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: none !important;   /* the strip moves, not individual images */
}

/* Desktop / hover-capable: reveal the 2nd image on card hover */
@media (hover: hover) {
	.frame-pcard:hover .frame-pcard__slides { transform: translateX(-100%); }
}

/* Touch controls — hidden unless the device is touch/coarse */
.frame-pcard__nav,
.frame-pcard__dots { display: none; }

@media (hover: none), (pointer: coarse) {
	.frame-pcard__nav {
		display: flex;
		position: absolute;
		inset: 0;
		z-index: 3;
		justify-content: space-between;
		align-items: center;
		pointer-events: none;
	}
	.frame-pcard__navbtn {
		pointer-events: auto;
		-webkit-appearance: none;
		appearance: none;
		margin: 0;
		padding: 0;
		border: 0;
		cursor: pointer;
		width: 38px;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		line-height: 1;
		color: #000;
		background: rgba(255,255,255,.80);
		transition: opacity .2s var(--ease);
	}
	.frame-pcard__navbtn--prev { border-radius: 0 3px 3px 0; }
	.frame-pcard__navbtn--next { border-radius: 3px 0 0 3px; }
	.frame-pcard__navbtn:disabled { opacity: 0; pointer-events: none; }

	.frame-pcard__dots {
		display: flex;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 8px;
		z-index: 3;
		justify-content: center;
		gap: 5px;
		pointer-events: none;
	}
	.frame-pcard__dots i {
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: rgba(0,0,0,.28);
		transition: background .25s var(--ease), transform .25s var(--ease);
	}
	.frame-pcard__dots i.is-active { background: #000; transform: scale(1.35); }

	/* atelier variant offsets the media box — keep dots clear of the black frame */
	.frame-pcard--atelier .frame-pcard__dots { bottom: 10px; }
}

/* ==========================================================================
   ARCHIVE / CATEGORY LOOP — multi-image swipe gallery
   The WooCommerce loop thumbnail is replaced (inc/woocommerce.php) with the
   same slider markup the homepage rail uses, wrapped in .frame-loop-media.
   Reuses .frame-pcard__slider / __slides / __img / __nav / __dots styles above.
   ========================================================================== */
.frame-loop-media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #f0f0f0;
	margin: 0 0 14px;
}
/* Single-image archive card only (DIRECT child). Must NOT hit slider images
   (.frame-loop-media > .frame-pcard__slider > .frame-pcard__slides > img), which
   keep their carousel layout (position:relative; flex:0 0 100%) from the slider
   rules above — otherwise they'd stack absolutely and the swipe would do nothing. */
.frame-loop-media > .frame-pcard__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .8s var(--ease);
}

/* Drag surface — user drives image changes (no hover cross-slide on archive).
   touch-action:pan-y lets the page still scroll vertically while we own the
   horizontal drag; user-select:none stops text/image selection on mouse drag. */
.frame-loop-media .frame-pcard__slider {
	touch-action: pan-y;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}
.frame-loop-media .frame-pcard__slider:active { cursor: grabbing; }

/* Arrows — shown on hover (desktop) and always on touch. Dots always visible. */
.frame-loop-media .frame-pcard__nav {
	display: flex;
	position: absolute;
	inset: 0;
	z-index: 3;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s var(--ease);
}
.frame-loop-media:hover .frame-pcard__nav { opacity: 1; }
.frame-loop-media .frame-pcard__navbtn {
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	width: 38px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	color: #000;
	background: rgba(255,255,255,.82);
	transition: opacity .2s var(--ease), background .2s var(--ease);
}
.frame-loop-media .frame-pcard__navbtn:hover { background: #fff; }
.frame-loop-media .frame-pcard__navbtn--prev { border-radius: 0 3px 3px 0; }
.frame-loop-media .frame-pcard__navbtn--next { border-radius: 3px 0 0 3px; }
.frame-loop-media .frame-pcard__navbtn:disabled { opacity: 0; pointer-events: none; }

.frame-loop-media .frame-pcard__dots {
	display: flex;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	z-index: 3;
	justify-content: center;
	gap: 5px;
	pointer-events: none;
}
.frame-loop-media .frame-pcard__dots i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(0,0,0,.28);
	transition: background .25s var(--ease), transform .25s var(--ease);
}
.frame-loop-media .frame-pcard__dots i.is-active { background: #000; transform: scale(1.35); }

@media (hover: none), (pointer: coarse) {
	.frame-loop-media .frame-pcard__nav { opacity: 1; }
}

/* ==========================================================================
   SINGLE PRODUCT — premium layout
   Storefront ships a generic float layout; this replaces it with a calm,
   editorial two-column page (sticky summary) matching the brand system.
   All rules are scoped to .single-product so shop/cart/home are untouched.
   ========================================================================== */
/* Layout: full-width #primary (Storefront would reserve a sidebar slot
   otherwise) + centered .site-main column. Selectors carry the ID #primary
   so they beat Storefront's class-only `.right-sidebar .content-area`. */
body.single-product #primary {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
	background: var(--color-bg);
}
body.single-product #secondary { display: none; }
body.single-product .site-content,
body.single-product .site-main { background: var(--color-bg); }

body.single-product .site-main {
	display: block;
	width: 100%;
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding: clamp(18px, 3vw, 36px) var(--container-pad) clamp(60px, 8vw, 110px);
}

/* Breadcrumb */
.single-product .woocommerce-breadcrumb {
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 clamp(20px, 4vw, 44px);
}
.single-product .woocommerce-breadcrumb a { color: var(--color-muted) !important; text-decoration: none; }
.single-product .woocommerce-breadcrumb a:hover { color: var(--color-text) !important; }

/* Two-column shell */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	gap: 0 clamp(36px, 5vw, 84px);
	margin: 0;
}
.single-product div.product::before,
.single-product div.product::after { content: none; }       /* kill Storefront clearfix */
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .summary {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
.single-product div.product > .woocommerce-product-gallery { grid-column: 1; }
.single-product div.product > .summary { grid-column: 2; }
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .upsells,
.single-product div.product > .related {
	grid-column: 1 / -1;
}

/* ---- Gallery ---- */
.single-product .woocommerce-product-gallery {
	opacity: 1 !important;                 /* never let a flaky/deferred slider script hide it */
	position: relative;
}
.single-product .woocommerce-product-gallery__wrapper { margin: 0; }
.single-product .woocommerce-product-gallery__image { margin: 0 0 6px; }
.single-product .woocommerce-product-gallery__image a { display: block; }
.single-product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
	background: #f3f3f3;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	width: 72px;
	margin: 0;
	list-style: none;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
	cursor: pointer;
	opacity: .55;
	transition: opacity var(--dur) var(--ease);
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
/* Gallery zoom (büyüteç) trigger — DARK badge so it's always visible on white
   product shots; white magnifier as a minify-safe (fully %-encoded) SVG background
   ON THE LINK ITSELF, and the default WC ::before glyph killed. */
.single-product .woocommerce-product-gallery__trigger {
	top: 14px;
	right: 14px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background-color: #1a1a1a;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.65'%20y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
	font-size: 0;
	color: transparent;
	text-indent: -9999px;
	overflow: hidden;
	opacity: 1;
	transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.single-product .woocommerce-product-gallery__trigger::before { content: none !important; }
.single-product .woocommerce-product-gallery__trigger:hover {
	background-color: #000;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .3);
}

/* sale flag */
.single-product .onsale {
	position: absolute;
	top: 14px; left: 14px;
	z-index: 3;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 5px 12px;
	border-radius: 0;
	background: var(--color-text);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	line-height: 1.4;
}

/* ---- Summary ---- */
.single-product .summary.entry-summary {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	align-self: start;
	display: flex;
	flex-direction: column;
}
.single-product .product_title.entry-title {
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.12;
	margin: 0 0 14px;
	color: var(--color-text);
}
.single-product .summary > .price,
.single-product .summary .woocommerce-variation-price .price {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: .2px;
	color: var(--color-text);
	margin: 0 0 22px;
}
.single-product .summary .price del { color: var(--color-muted); font-weight: 400; margin-right: 8px; }
.single-product .summary .price ins { text-decoration: none; color: var(--color-accent); }
.single-product .woocommerce-product-details__short-description {
	font-size: 15px;
	line-height: 1.8;
	color: var(--color-muted);
	margin: 0 0 26px;
	padding: 0 0 24px;
	border-bottom: 1px solid var(--color-border);
	max-width: 46ch;
}
.single-product .woocommerce-product-details__short-description ul { padding-left: 18px; margin: 8px 0 0; }
.single-product .woocommerce-product-details__short-description li { margin: 2px 0; }

/* Variations table -> clean form rows */
.single-product .variations_form .variations { margin: 0 0 22px; border: 0; width: 100%; }
.single-product .variations_form .variations,
.single-product .variations_form .variations tbody,
.single-product .variations_form .variations tr,
.single-product .variations_form .variations td,
.single-product .variations_form .variations th {
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	background: none;
}
.single-product .variations_form .variations tr + tr { margin-top: 16px; }
.single-product .variations_form .variations th.label label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 8px;
	display: block;
}
.single-product .variations_form .variations td.value { position: relative; }
.single-product .variations_form select {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 52px;
	padding: 0 44px 0 16px;
	border: 1px solid var(--color-text);
	border-radius: 0;
	background: var(--color-bg-alt);
	color: var(--color-text);
	font-size: 14px;
	font-family: var(--font-sans);
	letter-spacing: .5px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}
.single-product .variations_form select:focus { outline: 0; border-color: var(--color-text); box-shadow: 0 0 0 2px rgba(0,0,0,.12); }
.single-product .variations_form .reset_variations {
	display: inline-block;
	margin-top: 10px;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-muted);
	text-decoration: none;
}
.single-product .variations_form .reset_variations:hover { color: var(--color-text); text-decoration: underline; }

/* Qty + add to cart */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
	display: flex;
	gap: 12px;
	align-items: stretch;
	margin: 8px 0 0;
}
.single-product form.cart .quantity { margin: 0; }
.single-product form.cart .quantity input.qty {
	width: 70px;
	height: 56px;
	padding: 0 8px;
	border: 1px solid var(--color-border);
	border-radius: 0;
	background: var(--color-bg-alt);
	color: var(--color-text);
	font-size: 15px;
	font-family: var(--font-sans);
	text-align: center;
	-moz-appearance: textfield;
}
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-product .single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: 56px;
	padding: 0 28px;
	border: 1px solid var(--color-text);
	border-radius: 0 !important;
	background: var(--color-text) !important;
	color: #fff !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.single-product .single_add_to_cart_button:hover {
	background: var(--color-bg-alt) !important;
	color: var(--color-text) !important;
}
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button:disabled {
	opacity: .35;
	cursor: not-allowed;
	background: var(--color-text) !important;
	color: #fff !important;
}
.single-product .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button { pointer-events: none; }

/* Product meta */
.single-product .product_meta {
	margin: 28px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--color-border);
	font-size: 12px;
	letter-spacing: .6px;
	color: var(--color-muted);
}
.single-product .product_meta > span { display: block; margin: 0 0 6px; }
.single-product .product_meta a { color: var(--color-muted); text-decoration: none; }
.single-product .product_meta a:hover { color: var(--color-text); }

/* ---- Tabs ---- */
.single-product .woocommerce-tabs { margin-top: clamp(48px, 7vw, 90px); }
.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 0;
	padding: 0 0 0;
	border-bottom: 1px solid var(--color-border);
	list-style: none;
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { content: none; border: 0; }
.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 14px 22px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--color-text); }
.single-product .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--color-text); }
.single-product .woocommerce-tabs .panel {
	margin: 28px 0 0;
	padding: 0;
	max-width: 70ch;
	color: var(--color-muted);
	font-size: 15px;
	line-height: 1.85;
}
.single-product .woocommerce-tabs .panel h2 {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .2px;
	color: var(--color-text);
	margin: 0 0 14px;
}
.single-product .woocommerce-tabs .panel ul { padding-left: 18px; }

/* ---- Related products ---- */
.single-product .related.products,
.single-product .upsells.products {
	margin-top: clamp(56px, 8vw, 100px);
	padding-top: clamp(40px, 6vw, 70px);
	border-top: 1px solid var(--color-border);
	clear: both;
}
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
	font-size: clamp(18px, 2.4vw, 26px);
	font-weight: 600;
	letter-spacing: .4px;
	text-align: center;
	margin: 0 0 clamp(28px, 5vw, 48px);
	color: var(--color-text);
}
.single-product .related.products ul.products::before,
.single-product .related.products ul.products::after,
.single-product .upsells.products ul.products::before,
.single-product .upsells.products ul.products::after { display: none; }
.single-product .related.products ul.products,
.single-product .upsells.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	text-align: left;
}
.single-product .related.products li.product a img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	margin: 0 0 12px;
	background: #f3f3f3;
	border-radius: 0;
}
.single-product .related.products li.product .woocommerce-loop-product__title {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .2px;
	line-height: 1.35;
	color: var(--color-text);
	padding: 0;
	margin: 0 0 4px;
}
.single-product .related.products li.product .price {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
}
.single-product .related.products li.product .price del { color: var(--color-muted); font-weight: 400; margin-right: 6px; }
.single-product .related.products li.product .price ins { text-decoration: none; }
.single-product .related.products li.product .button,
.single-product .related.products li.product .added_to_cart {
	display: inline-block;
	margin: 10px 0 0;
	padding: 10px 16px;
	background: none;
	border: 1px solid var(--color-text);
	border-radius: 0;
	color: var(--color-text);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.single-product .related.products li.product .button:hover,
.single-product .related.products li.product .added_to_cart:hover { background: var(--color-text); color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
	.single-product .related.products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.single-product div.product {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.single-product div.product > .woocommerce-product-gallery,
	.single-product div.product > .summary { grid-column: 1; }
	.single-product .summary.entry-summary {
		position: static;
		margin-top: 28px !important;
	}
}
@media (max-width: 700px) {
	.single-product .site-main { padding-bottom: clamp(48px, 12vw, 72px); }
	.single-product .related.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.single-product .woocommerce-variation-add-to-cart,
	.single-product form.cart:not(.variations_form) { flex-wrap: wrap; }
	.single-product .single_add_to_cart_button { flex: 1 1 100%; }
	.single-product .woocommerce-tabs ul.tabs li a { padding: 12px 16px; font-size: 11px; letter-spacing: 1.2px; }
}

/* ==========================================================================
   Mega-menu heading link — let column h4 be clickable while keeping its style
   ========================================================================== */
.frame-mega__col h4 a {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
	padding: 0;
}
.frame-mega__col h4 a::after { display: none; }
.frame-mega__col h4 a:hover { color: var(--color-accent); }

/* ==========================================================================
   PRODUCT CATEGORY ARCHIVE + SHOP — premium editorial layout

   Specificity strategy (no !important):
   - Storefront's WooCommerce CSS (storefront-woocommerce-style-css) ships
     legacy float-based grid: `.site-main ul.products li.product` and
     `.site-main ul.products.columns-3 li.product` set `width: 29.4%; float:
     left; margin-right: 5.88%`. Specificity (0, 4, 2).
   - Storefront's `.right-sidebar .content-area` sets `width: 73.9%; float:
     left`. Specificity (0, 2, 0).
   - Our main.css loads AFTER both, so for equal/higher specificity we win
     by source order.
   - Rules below use `body.tax-product_cat` / `body.post-type-archive-product`
     prefixes to comfortably exceed Storefront on every selector — including
     the `(0, 4, 2)` columns-N rule which our `body…ul.products li.product`
     beats at (0, 4, 4) on element count.
   ========================================================================== */

/* --- Layout: full-width content, no sidebar slot, centered editorial column --- */
body.tax-product_cat #primary,
body.post-type-archive-product #primary {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
	background: var(--color-bg);
}
body.tax-product_cat #secondary,
body.post-type-archive-product #secondary { display: none; }

body.tax-product_cat .site-main,
body.post-type-archive-product .site-main {
	display: block;
	width: 100%;
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding: clamp(18px, 3vw, 36px) var(--container-pad) clamp(60px, 8vw, 110px);
}

/* Breadcrumb */
.tax-product_cat .woocommerce-breadcrumb,
.post-type-archive-product .woocommerce-breadcrumb {
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 clamp(14px, 2vw, 24px);
}
/* Breadcrumb anchor color: Storefront customizer injects inline <style> for
   anchor colors site-wide; only !important reliably overrides inline styles. */
.tax-product_cat .woocommerce-breadcrumb a,
.post-type-archive-product .woocommerce-breadcrumb a { color: var(--color-muted) !important; text-decoration: none; }
.tax-product_cat .woocommerce-breadcrumb a:hover,
.post-type-archive-product .woocommerce-breadcrumb a:hover { color: var(--color-text) !important; }

/* Page header */
.tax-product_cat .woocommerce-products-header,
.post-type-archive-product .woocommerce-products-header {
	text-align: center;
	margin: 0 0 clamp(28px, 4vw, 56px);
	padding: 0;
}
.tax-product_cat .woocommerce-products-header__title,
.tax-product_cat .page-title,
.post-type-archive-product .woocommerce-products-header__title,
.post-type-archive-product .page-title {
	font-size: clamp(28px, 4.4vw, 46px);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.12;
	margin: 0;
	color: var(--color-text);
}
.tax-product_cat .term-description,
.post-type-archive-product .term-description {
	max-width: 60ch;
	margin: 14px auto 0;
	color: var(--color-muted);
	font-size: 15px;
	line-height: 1.7;
}

/* Toolbar — result count + sort */
.tax-product_cat .woocommerce-result-count,
.post-type-archive-product .woocommerce-result-count {
	float: left;
	margin: 0 0 clamp(18px, 2.5vw, 28px);
	padding: 14px 0;
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--color-muted);
}
.tax-product_cat .woocommerce-ordering,
.post-type-archive-product .woocommerce-ordering {
	float: right;
	margin: 0 0 clamp(18px, 2.5vw, 28px);
	padding: 10px 0;
}
.tax-product_cat .woocommerce-ordering select,
.post-type-archive-product .woocommerce-ordering select {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var(--color-border);
	background: var(--color-bg-alt);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	padding: 10px 36px 10px 14px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}
.tax-product_cat .woocommerce-ordering select:focus,
.post-type-archive-product .woocommerce-ordering select:focus { outline: 0; border-color: var(--color-text); }

/* Products grid — display:grid neutralizes Storefront's float-based layout.
   `minmax(0, 1fr)` + `min-width: 0` on li.product below prevent intrinsic
   image width from blowing up tracks. */
body.tax-product_cat .site-main ul.products,
body.post-type-archive-product .site-main ul.products {
	clear: both;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.5vw, 36px) clamp(14px, 2vw, 24px);
	margin: 0 0 clamp(40px, 5vw, 64px);
	padding: clamp(20px, 3vw, 36px) 0 0;
	list-style: none;
	width: 100%;
	border-top: 1px solid var(--color-border);
}
/* CRITICAL: Storefront sets `ul.products::before, ::after { content: ""; display: table }`
   as a float clearfix. When ul.products becomes display:grid, those pseudo
   elements become GRID ITEMS, taking the first and last grid cells —
   which is exactly the "empty left strip + products shifted right by one
   column" symptom. Removing them restores correct grid placement. */
body.tax-product_cat .site-main ul.products::before,
body.tax-product_cat .site-main ul.products::after,
body.post-type-archive-product .site-main ul.products::before,
body.post-type-archive-product .site-main ul.products::after { display: none; }
/* Storefront's WC CSS scopes its float-grid widths under @media (min-width:
   768px). To win the cascade cleanly we mirror its media-query scope AND
   add a body-prefixed selector so element-count exceeds Storefront on every
   columns-N variant. Two selectors here: one for ≥768 (matches Storefront's
   @media) and one outside (covers <768 where Storefront has `width: 100%`). */
body.tax-product_cat .site-main ul.products li.product,
body.post-type-archive-product .site-main ul.products li.product {
	display: flex;
	flex-direction: column;
	text-align: left;
	background: transparent;
	min-width: 0;   /* prevent intrinsic image width from blowing up the grid track */
}
@media (min-width: 768px) {
	body.tax-product_cat .site-main ul.products li.product,
	body.post-type-archive-product .site-main ul.products li.product,
	body.tax-product_cat .site-main ul.products.columns-1 li.product,
	body.tax-product_cat .site-main ul.products.columns-2 li.product,
	body.tax-product_cat .site-main ul.products.columns-3 li.product,
	body.tax-product_cat .site-main ul.products.columns-4 li.product,
	body.tax-product_cat .site-main ul.products.columns-5 li.product,
	body.tax-product_cat .site-main ul.products.columns-6 li.product,
	body.post-type-archive-product .site-main ul.products.columns-1 li.product,
	body.post-type-archive-product .site-main ul.products.columns-2 li.product,
	body.post-type-archive-product .site-main ul.products.columns-3 li.product,
	body.post-type-archive-product .site-main ul.products.columns-4 li.product,
	body.post-type-archive-product .site-main ul.products.columns-5 li.product,
	body.post-type-archive-product .site-main ul.products.columns-6 li.product {
		width: auto;
		margin: 0;
		float: none;
	}
}
body.tax-product_cat .site-main ul.products li.product a.woocommerce-LoopProduct-link,
body.post-type-archive-product .site-main ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	margin-bottom: 12px;
	background: #f3f3f3;
	overflow: hidden;
}
body.tax-product_cat .site-main ul.products li.product img,
body.post-type-archive-product .site-main ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	margin: 0;
	transition: transform .8s var(--ease);
}
.tax-product_cat li.product:hover a img,
.post-type-archive-product li.product:hover a img { transform: scale(1.03); }
.tax-product_cat li.product .woocommerce-loop-product__title,
.post-type-archive-product li.product .woocommerce-loop-product__title {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .2px;
	line-height: 1.35;
	color: var(--color-text);
	padding: 0;
	margin: 0 0 4px;
}
.tax-product_cat li.product .price,
.post-type-archive-product li.product .price {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
	margin: 0;
}
.tax-product_cat li.product .price del,
.post-type-archive-product li.product .price del { color: var(--color-muted); font-weight: 400; margin-right: 6px; }
.tax-product_cat li.product .price ins,
.post-type-archive-product li.product .price ins { text-decoration: none; }
.tax-product_cat li.product .button,
.tax-product_cat li.product .added_to_cart,
.post-type-archive-product li.product .button,
.post-type-archive-product li.product .added_to_cart {
	display: inline-block;
	margin: 10px 0 0;
	padding: 9px 14px;
	background: none;
	border: 1px solid var(--color-text);
	border-radius: 0;
	color: var(--color-text);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	align-self: flex-start;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tax-product_cat li.product .button:hover,
.tax-product_cat li.product .added_to_cart:hover,
.post-type-archive-product li.product .button:hover,
.post-type-archive-product li.product .added_to_cart:hover { background: var(--color-text); color: #fff; }
.tax-product_cat li.product .star-rating,
.post-type-archive-product li.product .star-rating { display: none; }   /* hide ratings on loop for editorial feel */

/* Out-of-stock badge */
.tax-product_cat li.product .onsale,
.post-type-archive-product li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0;
	padding: 4px 10px;
	border-radius: 0;
	background: var(--color-text);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	line-height: 1.4;
	min-height: 0;
	min-width: 0;
}
.tax-product_cat li.product,
.post-type-archive-product li.product { position: relative; }

/* Pagination */
.tax-product_cat .woocommerce-pagination,
.post-type-archive-product .woocommerce-pagination {
	text-align: center;
	margin: clamp(28px, 4vw, 56px) 0 0;
	border-top: 1px solid var(--color-border);
	padding-top: clamp(24px, 3vw, 40px);
}
/* Storefront / WC outputs pagination twice (before AND after products) — hide
   the first one so the page reads cleanly. :has() is widely supported (2026). */
.tax-product_cat nav.woocommerce-pagination:has(~ ul.products),
.post-type-archive-product nav.woocommerce-pagination:has(~ ul.products) { display: none; }

.tax-product_cat .woocommerce-pagination ul.page-numbers,
.post-type-archive-product .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}
.tax-product_cat .woocommerce-pagination ul.page-numbers li,
.post-type-archive-product .woocommerce-pagination ul.page-numbers li {
	border: 0;
	margin: 0;
}
.tax-product_cat .woocommerce-pagination .page-numbers,
.post-type-archive-product .woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: transparent;
	color: var(--color-text);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .5px;
	border: 1px solid transparent;
	border-radius: 0;
	text-decoration: none;
	transition: border-color var(--dur) var(--ease);
}
.tax-product_cat .woocommerce-pagination .page-numbers.current,
.post-type-archive-product .woocommerce-pagination .page-numbers.current { border-color: var(--color-text); font-weight: 700; }
.tax-product_cat .woocommerce-pagination .page-numbers:hover,
.post-type-archive-product .woocommerce-pagination .page-numbers:hover { border-color: var(--color-text); }

/* No-products notice */
.tax-product_cat .woocommerce-info,
.tax-product_cat .woocommerce-no-products-found,
.post-type-archive-product .woocommerce-info {
	border: 1px solid var(--color-border);
	background: var(--color-bg-alt);
	color: var(--color-muted);
	padding: 24px;
	font-size: 14px;
	border-radius: 0;
	border-left-width: 1px;
}

/* Responsive */
@media (max-width: 1100px) {
	body.tax-product_cat .site-main ul.products,
	body.post-type-archive-product .site-main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	body.tax-product_cat .site-main ul.products,
	body.post-type-archive-product .site-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 18px; }
	.tax-product_cat .woocommerce-result-count,
	.post-type-archive-product .woocommerce-result-count,
	.tax-product_cat .woocommerce-ordering,
	.post-type-archive-product .woocommerce-ordering { float: none; display: block; margin-bottom: 12px; padding: 6px 0; }
	.tax-product_cat .woocommerce-ordering select,
	.post-type-archive-product .woocommerce-ordering select { width: 100%; }
}

/* ==========================================================================
   STATIC INFO PAGES (Hakkımızda, legal pages) — editorial reading layout
   `body.page #primary/#secondary` selectors include an ID (#primary) which
   has higher specificity than Storefront's class-only sidebar layout rules,
   so we win the cascade without !important.
   ========================================================================== */
body.page #secondary { display: none; }
body.page #primary {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
}
body.page .site-main {
	display: block;
	width: 100%;
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
	padding: clamp(28px, 4vw, 60px) var(--container-pad) clamp(60px, 8vw, 100px);
}
.page .entry-header { margin: 0 0 clamp(24px, 4vw, 44px); }
.page .entry-title {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.12;
	margin: 0;
	color: var(--color-text);
}
.page .entry-content { font-size: 15px; line-height: 1.8; color: var(--color-text); }
.page .entry-content > p:first-child em:only-child,
.page .entry-content p > em:only-child {
	display: block;
	margin: 0 0 28px;
	padding: 14px 18px;
	background: var(--color-bg-alt);
	border-left: 2px solid var(--color-border);
	font-style: italic;
	font-size: 13px;
	color: var(--color-muted);
	line-height: 1.6;
}
.page .entry-content h2 {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .1px;
	margin: 38px 0 12px;
	color: var(--color-text);
}
.page .entry-content h3 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	margin: 30px 0 10px;
	color: var(--color-text);
}
.page .entry-content p { margin: 0 0 14px; color: var(--color-muted); }
.page .entry-content p strong { color: var(--color-text); font-weight: 600; }
.page .entry-content ul,
.page .entry-content ol { margin: 0 0 16px; padding-left: 22px; color: var(--color-muted); }
.page .entry-content li { margin: 4px 0; line-height: 1.7; }
.page .entry-content a {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity var(--dur) var(--ease);
}
.page .entry-content a:hover { opacity: .6; }

/* ==========================================================================
   COOKIE CONSENT BANNER — lightweight, fixed bottom
   ========================================================================== */
.frame-cookie-banner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 9999;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-text);
	padding: 20px 24px;
	max-width: 760px;
	margin: 0 auto;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
}
.frame-cookie-banner[hidden] { display: none; }
.frame-cookie-banner__inner {
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
}
.frame-cookie-banner__text { flex: 1 1 280px; }
.frame-cookie-banner__text p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-text);
}
.frame-cookie-banner__text a {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.frame-cookie-banner__actions {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}
.frame-cookie-btn {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var(--color-text);
	background: var(--color-text);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	padding: 11px 22px;
	cursor: pointer;
	border-radius: 0;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.frame-cookie-btn:hover { background: var(--color-bg-alt); color: var(--color-text); }
.frame-cookie-btn--ghost { background: transparent; color: var(--color-text); }
.frame-cookie-btn--ghost:hover { background: var(--color-text); color: #fff; }
@media (max-width: 600px) {
	.frame-cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
	.frame-cookie-banner__inner { gap: 12px; }
	.frame-cookie-banner__actions { width: 100%; }
	.frame-cookie-btn { flex: 1; padding: 11px 12px; }
}

/* ==========================================================================
   INSTAGRAM SECTION — below related products on single product pages
   ========================================================================== */
.frame-igsection {
	padding: 56px 0 64px;
	background: var(--color-bg-alt, #faf9f7);
	border-top: 1px solid var(--color-border, #ececec);
}
.frame-igsection__head {
	display: flex;
	align-items: end;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}
.frame-igsection__head .frame-rail__title { margin: 0; }
.frame-igsection__cta {
	margin-left: auto;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text, #1a1a1a);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.frame-igsection__cta:hover { opacity: 0.65; }

.frame-igsection__embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Fallback CTA card when no LightWidget (or equivalent) URL is configured */
.frame-igsection__fallback {
	display: block;
	background: #fff;
	border: 1px solid var(--color-border, #ececec);
	border-radius: 4px;
	padding: 32px;
	text-align: center;
}
.frame-igsection__fallback-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: var(--color-text, #1a1a1a);
	text-decoration: none;
}
.frame-igsection__fallback-link:hover { color: var(--color-text, #1a1a1a); }
.frame-igsection__fallback-link svg { color: var(--color-text, #1a1a1a); }
.frame-igsection__fallback-handle {
	font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 400;
	letter-spacing: 0.01em;
}
.frame-igsection__fallback-text {
	font-size: 14px;
	color: #666;
	max-width: 480px;
}
.frame-igsection__fallback-btn {
	margin-top: 8px;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

@media (max-width: 600px) {
	.frame-igsection { padding: 40px 0 48px; }
	.frame-igsection__fallback { padding: 24px 16px; }
}

/* The bottom layout-override block that used to live here has been removed.
   Each context (archive, single-product, static page) defines its own
   layout via natural-specificity selectors in its own section above. */

/* ── Sold-out (TÜKENDİ) product cards ─────────────────────────────
   Faded image + diagonal banner. Applies to homepage rails
   (.frame-pcard.is-soldout) and Woo archive loop (li.product.outofstock). */
.frame-pcard__media,
.woocommerce ul.products li.product,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product,
ul.products li.product a.woocommerce-LoopProduct-link { position: relative; }

.frame-pcard.is-soldout .frame-pcard__img,
.woocommerce ul.products li.product.outofstock img,
ul.products li.product.outofstock img {
	opacity: .42;
	filter: grayscale(.18);
}

.frame-soldout {
	position: absolute;
	top: 46%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-18deg);
	z-index: 6;
	pointer-events: none;
	background: rgba(18, 18, 18, .82);
	color: #fff;
	font-size: .8rem;
	line-height: 1;
	letter-spacing: .22em;
	font-weight: 600;
	padding: .5em 1.4em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ==========================================================================
   Cart / Checkout block primary buttons ("Ödemeye git", "Siparişi tamamla")
   Match the product-page add-to-cart style: solid dark, clean inverted hover.
   ========================================================================== */
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 16px 28px;
	border: 1px solid var(--color-text) !important;
	border-radius: 0 !important;
	background: var(--color-text) !important;
	color: #fff !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	text-decoration: none !important;
	opacity: 1 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover {
	background: var(--color-bg-alt) !important;
	color: var(--color-text) !important;
	opacity: 1 !important;
}
/* never let the block button text show an underline */
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	text-decoration: none !important;
}