/* ─── Single Product (PDP) ────────────────────────────────────────────────── */

.fidyat-pdp {
	padding-block-start: 10px;
	padding-block-end: var(--space-7);
}

/* Breadcrumb always sits above the gallery, full width */
.fidyat-pdp__breadcrumb-row {
	margin-block-end: var(--space-4);
}

/* ── Hero 2-col grid ─────────────────────────────────────────────────────── */

.fidyat-pdp__hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
	margin-block-end: var(--space-9);
}

@media (min-width: 768px) {
	.fidyat-pdp__hero {
		grid-template-columns: 58% 1fr;
		align-items: start;
	}
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */

.fidyat-gallery {
	display: flex;
	gap: var(--space-3);
	/* Mobile: column (thumbs below main) */
	flex-direction: column-reverse;
}

@media (min-width: 1024px) {
	.fidyat-gallery {
		/* Desktop: thumbnails vertical at inline-start */
		flex-direction: row;
	}
}

/* Thumbnail rail */
.fidyat-gallery__thumbs {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	scrollbar-width: none;
	padding-block-end: var(--space-1);
}

.fidyat-gallery__thumbs::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
	.fidyat-gallery__thumbs {
		flex-direction: column;
		overflow-x: visible;
		overflow-y: auto;
		max-height: 500px;
		padding-block-end: 0;
	}
}

.fidyat-gallery__thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 2px solid transparent;
	cursor: pointer;
	background: transparent;
	padding: 0;
	transition: border-color var(--motion-fast), opacity var(--motion-fast);
	opacity: 0.6;
}

.fidyat-gallery__thumb:hover,
.fidyat-gallery__thumb.is-active {
	border-color: var(--color-lite);
	opacity: 1;
}

.fidyat-gallery__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* Main image area */
.fidyat-gallery__main {
	flex: 1;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	background: rgba(255 255 255 / 0.04);
}

.fidyat-gallery__frame {
	margin: 0;
	line-height: 0;
	display: none;
}

.fidyat-gallery__frame.is-active {
	display: block;
}

.fidyat-gallery__img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 20px;
	display: block;
}

.fidyat-gallery__zoom {
	position: relative;
	display: block;
}

.fidyat-gallery__zoom-icon {
	position: absolute;
	inset-block-end: var(--space-3);
	inset-inline-end: var(--space-3);
	background: rgba(14 14 36 / 0.7);
	color: #fff;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--motion-fast);
	pointer-events: none;
}

.fidyat-gallery__zoom:hover .fidyat-gallery__zoom-icon {
	opacity: 1;
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */

.fidyat-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	pointer-events: none;
}

.fidyat-lightbox[aria-hidden="false"] {
	visibility: visible;
	pointer-events: auto;
}

.fidyat-lightbox__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0 0 0 / 0.9);
}

.fidyat-lightbox__img {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: var(--radius-md);
	z-index: 1;
}

.fidyat-lightbox__close {
	position: absolute;
	inset-block-start: var(--space-4);
	inset-inline-end: var(--space-4);
	background: rgba(255 255 255 / 0.1);
	border: none;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	z-index: 2;
	transition: background var(--motion-fast);
}

.fidyat-lightbox__close:hover {
	background: rgba(255 255 255 / 0.2);
}

/* ── Summary ─────────────────────────────────────────────────────────────── */

.fidyat-pdp__summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.fidyat-pdp__cat-pill {
	align-self: flex-start;
}

.fidyat-pdp__title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 700;
	color: var(--color-light);
	line-height: 1.2;
	margin: 0;
}

@media (max-width: 767px) {
	.fidyat-pdp__title { font-size: var(--fs-h3); }
}

/* Price */
.fidyat-pdp__price {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.fidyat-pdp__price .woocommerce-Price-amount {
	font-size: var(--fs-h3);
	font-weight: 700;
	color: var(--color-secondary);
}

.fidyat-pdp__price del .woocommerce-Price-amount {
	color: var(--color-text-muted);
	font-size: var(--fs-body);
	font-weight: 400;
}

.fidyat-pdp__stock {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--fs-body-sm);
	font-weight: 600;
	border-radius: var(--radius-pill);
	padding: 3px var(--space-3);
}

.fidyat-pdp__stock--in  { color: #4ade80; background: rgba(74 222 128 / 0.1); }
.fidyat-pdp__stock--out { color: #f87171; background: rgba(248 113 113 / 0.1); }

/* Short description */
.fidyat-pdp__short-desc {
	font-size: var(--fs-body-sm);
	color: var(--color-text-muted);
	line-height: 1.7;
}

/* Quick specs */
.fidyat-pdp__specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2) var(--space-4);
}

.fidyat-pdp__specs-row {
	display: contents;
}

.fidyat-pdp__specs-label {
	font-size: var(--fs-body-sm);
	font-weight: 600;
	color: var(--color-text-muted);
}

.fidyat-pdp__specs-value {
	font-size: var(--fs-body-sm);
	color: var(--color-light);
}

/* Add to cart — override WooCommerce defaults with high-specificity selectors */

/* Quantity box */
.fidyat-pdp__cart .quantity,
.woocommerce .fidyat-pdp__cart .quantity {
	display: inline-flex;
	align-items: center;
	background: rgba(255 255 255 / 0.06);
	border: 1px solid rgba(255 255 255 / 0.12);
	border-radius: var(--radius-md);
	overflow: hidden;
	height: 52px;
}

.fidyat-pdp__cart .quantity input[type="number"],
.woocommerce .fidyat-pdp__cart .quantity input[type="number"] {
	width: 52px;
	text-align: center;
	background: transparent;
	border: none !important;
	border-radius: 0 !important;
	color: var(--color-light);
	font-size: var(--fs-body);
	font-weight: 600;
	padding: var(--space-2) 0;
	-moz-appearance: textfield;
	height: 100%;
}

.fidyat-pdp__cart .quantity input[type="number"]::-webkit-inner-spin-button,
.fidyat-pdp__cart .quantity input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

.fidyat-pdp__cart form.cart,
.woocommerce .fidyat-pdp__cart form.cart {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}

/* The button — use same classes WC adds so our styles win by specificity */
.fidyat-pdp__cart button.single_add_to_cart_button,
.woocommerce .fidyat-pdp__cart button.single_add_to_cart_button,
.woocommerce .fidyat-pdp__cart button.single_add_to_cart_button.button,
.woocommerce .fidyat-pdp__cart button.single_add_to_cart_button.alt {
	flex: 1;
	min-width: 160px;
	height: 52px;
	background: var(--gradient-btn-primary) !important;
	background-color: transparent !important;
	color: #fff !important;
	border: none !important;
	border-radius: 16px !important;
	padding: 12px var(--space-6) !important;
	font-family: var(--font-text);
	font-size: var(--fs-body) !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: filter var(--motion-fast), transform var(--motion-fast);
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.woocommerce .fidyat-pdp__cart button.single_add_to_cart_button:hover,
.woocommerce .fidyat-pdp__cart button.single_add_to_cart_button.button:hover {
	background: var(--gradient-btn-primary) !important;
	color: #fff !important;
	filter: brightness(1.1);
	transform: translateY(-1px);
}

.woocommerce .fidyat-pdp__cart button.single_add_to_cart_button:active {
	transform: translateY(0);
}

/* Share */
.fidyat-pdp__share {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-block-start: var(--space-2);
	border-block-start: 1px solid rgba(255 255 255 / 0.08);
}

.fidyat-pdp__share-label {
	font-size: var(--fs-body-sm);
	color: var(--color-text-muted);
}

.fidyat-pdp__share-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255 255 255 / 0.06);
	border: 1px solid rgba(255 255 255 / 0.12);
	color: var(--color-text-muted);
	cursor: pointer;
	transition: background var(--motion-fast), color var(--motion-fast);
	text-decoration: none;
}

.fidyat-pdp__share-btn:hover { background: rgba(255 255 255 / 0.12); color: var(--color-light); }
.fidyat-pdp__share-btn--whatsapp:hover { background: rgba(37 211 102 / 0.15); color: #25D366; }

.fidyat-pdp__share-btn--copy.is-copied {
	background: rgba(74 222 128 / 0.15);
	color: #4ade80;
	border-color: rgba(74 222 128 / 0.3);
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */

.fidyat-pdp__tabs-section {
	margin-block-end: var(--space-9);
	border-radius: var(--radius-md);
	border: 1px solid rgba(255 255 255 / 0.08);
	overflow: hidden;
}

/* Tab list (desktop) */
.fidyat-tabs {
	display: flex;
	background: rgba(255 255 255 / 0.04);
	border-block-end: 1px solid rgba(255 255 255 / 0.08);
}

.fidyat-tabs__tab {
	flex: 1;
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-text);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	color: var(--color-text-muted);
	background: transparent;
	border: none;
	cursor: pointer;
	border-block-end: 2px solid transparent;
	margin-block-end: -1px;
	transition: color var(--motion-fast), border-color var(--motion-fast);
}

.fidyat-tabs__tab.is-active,
.fidyat-tabs__tab:hover {
	color: var(--color-light);
}

.fidyat-tabs__tab.is-active {
	border-block-end-color: var(--color-lite);
	color: var(--color-lite);
}

/* Panel */
.fidyat-tabs__panel { display: none; }
.fidyat-tabs__panel.is-active { display: block; }

/* Accordion toggle — hidden on desktop, shown on mobile */
.fidyat-tabs__accordion-toggle {
	display: none;
}

.fidyat-tabs__panel-body {
	padding: var(--space-5) var(--space-6);
}

/* Mobile: convert tabs to accordions */
@media (max-width: 767px) {
	.fidyat-tabs {
		display: none; /* hide tab bar */
	}

	.fidyat-tabs__panel {
		display: block; /* all panels in DOM */
		border-block-end: 1px solid rgba(255 255 255 / 0.08);
	}

	.fidyat-tabs__panel-body {
		padding: var(--space-4);
		display: none; /* collapsed by default */
	}

	.fidyat-tabs__panel.is-active .fidyat-tabs__panel-body {
		display: block;
	}

	.fidyat-tabs__accordion-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: var(--space-4);
		font-family: var(--font-text);
		font-size: var(--fs-body-sm);
		font-weight: 600;
		color: var(--color-light);
		background: transparent;
		border: none;
		cursor: pointer;
		text-align: start;
	}

	.fidyat-tabs__chevron {
		flex-shrink: 0;
		transition: transform var(--motion-fast);
		color: var(--color-text-muted);
	}

	.fidyat-tabs__panel.is-active .fidyat-tabs__chevron {
		transform: rotate(180deg);
	}
}

/* Description content */
.fidyat-pdp__description {
	font-size: var(--fs-body-sm);
	color: var(--color-text-muted);
	line-height: 1.8;
}

.fidyat-pdp__description p { margin-block-end: var(--space-4); }
.fidyat-pdp__description p:last-child { margin-block-end: 0; }
.fidyat-pdp__description ul, .fidyat-pdp__description ol { padding-inline-start: var(--space-5); list-style: initial; }

/* Specs table */
.fidyat-pdp__specs-table {
	width: 100%;
	border-collapse: collapse;
}

.fidyat-pdp__specs-table + .fidyat-pdp__specs-table {
	margin-block-start: var(--space-4);
}

.fidyat-pdp__specs-table th,
.fidyat-pdp__specs-table td {
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-body-sm);
	border-block-end: 1px solid rgba(255 255 255 / 0.06);
	text-align: start;
}

.fidyat-pdp__specs-table th {
	width: 40%;
	color: var(--color-text-muted);
	font-weight: 600;
}

.fidyat-pdp__specs-table td {
	color: var(--color-light);
}

.fidyat-pdp__specs-table tr:last-child th,
.fidyat-pdp__specs-table tr:last-child td {
	border-block-end: none;
}

/* ── Related products slider ─────────────────────────────────────────────── */

.fidyat-pdp__related {
	margin-block-end: var(--space-9);
}

/* Slider wrapper — enables the scroll container + navigation */
.fidyat-related-slider {
	position: relative;
}

/* The scrollable track */
.fidyat-related-rail {
	display: flex;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding-block-end: var(--space-3);
	overflow-x: auto;
	scroll-snap-type: inline mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.fidyat-related-rail::-webkit-scrollbar { display: none; }

/* Each card — fixed width showing multiple at once */
.fidyat-related-rail > li {
	flex: 0 0 calc(50% - var(--space-2));   /* 375px: 2 cards */
	scroll-snap-align: start;
}

@media (min-width: 480px) {
	.fidyat-related-rail > li {
		flex: 0 0 calc(40% - var(--space-2));  /* ~2.5 cards */
	}
}

@media (min-width: 768px) {
	.fidyat-related-rail > li {
		flex: 0 0 calc(33.333% - var(--space-3));  /* 3 cards */
	}
}

@media (min-width: 1024px) {
	.fidyat-related-rail > li {
		flex: 0 0 calc(25% - var(--space-3));  /* 4 cards */
	}
}

/* Navigation arrows */
.fidyat-related-slider__btn {
	position: absolute;
	inset-block: 30% auto;
	top: 35%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-surface);
	border: 1px solid rgba(255 255 255 / 0.15);
	color: var(--color-light);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background var(--motion-fast), opacity var(--motion-fast);
	box-shadow: 0 4px 12px rgba(0 0 0 / 0.3);
}

.fidyat-related-slider__btn:hover {
	background: rgba(80 76 238 / 0.25);
	border-color: var(--color-lite);
}

.fidyat-related-slider__btn:disabled {
	opacity: 0.3;
	pointer-events: none;
}

.fidyat-related-slider__btn--prev {
	inset-inline-start: calc(-1 * var(--space-5));
}

.fidyat-related-slider__btn--next {
	inset-inline-end: calc(-1 * var(--space-5));
}

/* Hide arrows on small screens where swipe is natural */
@media (max-width: 767px) {
	.fidyat-related-slider__btn { display: none; }
}