/*
Theme Name:   Marbling Jewellery
Description:  Marbling Jewellery için WoodMart alt teması.
Author:       Brksoft
Author URI:   https://brksoft.com
Template:     woodmart
Version:      1.0.0
Text Domain:  woodmart-child
*/

/* ------------------------------------------------------------------
   Marka değişkenleri (krem, bej, kahve). Renklerin asıl kaynağı Tema Ayarları;
   burada yalnız tema ayarlarında olmayan ince ayarlar var.
   ------------------------------------------------------------------ */
:root {
	--mj-cream: #faf6f1;
	--mj-beige: #f1e8dd;
	--mj-sand: #e6d8c7;
	--mj-taupe: #8a6f62;
	--mj-brown: #310f05;
	--mj-text: #5a4840;
	--mj-muted: #8c7b72;
	--wd-brd-radius: 0;
}

/* Büyük harfli menü ve butonlarda harf aralığı */
.wd-nav-main > li > a,
.wd-nav-header > li > a,
.wd-header-nav .wd-nav > li > a {
	letter-spacing: .08em;
}
.btn,
.button,
button[type="submit"],
.wd-add-btn > a {
	letter-spacing: .06em;
}

/* Marcellus tek kalınlık: başlıklarda sahte kalınlaştırma olmasın */
h1, h2, h3, h4, h5, h6,
.title,
.wd-entities-title {
	font-synthesis: none;
}

/* ------------------------------------------------------------------
   Güven rozetleri (anasayfa, alıntının altı)
   ------------------------------------------------------------------ */
.mj-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
	margin-top: 8px;
	padding-top: 32px;
	border-top: 1px solid var(--mj-sand);
	text-align: start;
}
.mj-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.mj-trust__icon {
	flex: 0 0 auto;
	color: var(--mj-taupe);
	opacity: .9;
}
.mj-trust__title {
	margin: 0 0 2px;
	color: var(--mj-brown);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.4;
}
.mj-trust__text {
	margin: 0;
	color: var(--mj-muted);
	font-size: 13px;
	line-height: 1.5;
}
@media (max-width: 1024px) {
	.mj-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 18px;
	}
}
@media (max-width: 575px) {
	.mj-trust {
		grid-template-columns: 1fr;
		padding-top: 24px;
	}
}

/* ------------------------------------------------------------------
   İletişim bilgileri (İletişim sayfası)
   ------------------------------------------------------------------ */
.mj-contact {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 8px 0 12px;
}
.mj-contact__item {
	padding: 22px 20px;
	border: 1px solid var(--mj-sand);
	background: #fff;
}
.mj-contact__icon {
	color: var(--mj-taupe);
	margin-bottom: 10px;
}
.mj-contact__title {
	margin: 0 0 4px;
	color: var(--mj-brown);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .02em;
}
.mj-contact__text {
	margin: 0;
	font-size: 14px;
	word-break: break-word;
}
.mj-contact__text a {
	color: var(--mj-text);
	text-decoration: underline;
	text-decoration-color: var(--mj-sand);
	text-underline-offset: 3px;
}
.mj-contact__text a:hover {
	color: var(--mj-brown);
	text-decoration-color: currentColor;
}
@media (max-width: 767px) {
	.mj-contact {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------
   İletişim formu (Contact Form 7)
   ------------------------------------------------------------------ */
.mj-form label {
	display: block;
	color: var(--mj-brown);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .02em;
}
.mj-form label .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
	font-weight: 400;
}
.mj-form .mj-req {
	color: var(--mj-taupe);
	margin-inline-start: 2px;
}
.mj-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}
.mj-form input[type="text"],
.mj-form input[type="email"],
.mj-form input[type="tel"],
.mj-form textarea {
	width: 100%;
	background: #fff;
	border-color: var(--mj-sand);
}
.mj-form input:focus,
.mj-form textarea:focus {
	border-color: var(--mj-taupe);
}
.mj-form__consent {
	font-size: 13px;
	color: var(--mj-muted);
}
.mj-form__consent a {
	color: var(--mj-brown);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mj-form .wpcf7-list-item {
	margin: 0;
}
.mj-form .wpcf7-submit {
	min-width: 180px;
}
@media (max-width: 575px) {
	.mj-form__grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------
   WhatsApp butonu
   ------------------------------------------------------------------ */
.mj-wa {
	position: fixed;
	inset-inline-end: 20px;
	bottom: 20px;
	z-index: 390;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 4px 14px rgba(49, 15, 5, .14);
	transition: transform .2s ease;
}
.mj-wa:hover,
.mj-wa:focus-visible {
	color: #fff;
	transform: translateY(-2px);
}
.mj-wa:focus-visible {
	outline: 2px solid var(--mj-brown);
	outline-offset: 3px;
}
/* Telefonda alttaki araç çubuğunun üstünde dursun */
@media (max-width: 1024px) {
	.sticky-toolbar-on .mj-wa {
		bottom: calc(66px + env(safe-area-inset-bottom, 0px));
	}
}
@media (prefers-reduced-motion: reduce) {
	.mj-wa {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Ürün sayfası: sepete ekle altındaki kısa bilgi listesi
   ------------------------------------------------------------------ */
.mj-pdp-info {
	list-style: none;
	margin: 6px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--mj-sand);
	display: grid;
	gap: 10px;
}
.mj-pdp-info li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--mj-text);
	font-size: 14px;
	line-height: 1.4;
}
/* Flexible Refund "Talebi gönder": sınıfsız düğme temanın gri düğmesine düşüyor; sayfanın ana eylemi, koyu marka düğmesi olsun. */
.woocommerce-MyAccount-content [name="fr_refund_form[request_refund]"] {
	background-color: var(--btn-accented-bgcolor, #310f05);
	color: #fff;
}
.woocommerce-MyAccount-content [name="fr_refund_form[request_refund]"]:hover {
	background-color: var(--btn-accented-bgcolor-hover, #4a2a1e);
	color: #fff;
}
.mj-pdp-info svg {
	flex: 0 0 auto;
	color: var(--mj-taupe);
}
.mj-pdp-info strong {
	color: var(--mj-brown);
	font-weight: 500;
}
.mj-form .wpcf7-submit {
	background-color: var(--btn-accented-bgcolor, #310f05);
	color: #fff;
}
.mj-form .wpcf7-submit:hover {
	background-color: var(--btn-accented-bgcolor-hover, #4a2a1e);
	color: #fff;
}

/* Koyu renk düzeninde (açık fotoğraf üstü yazılar) WoodMart'ın gri/siyahı yerine marka renkleri */
.color-scheme-dark {
	--wd-title-color: var(--mj-brown);
	--wd-text-color: var(--mj-text);
}
.mj-form .wpcf7-submit:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------
   "Yukarı çık" düğmesi WhatsApp butonunun arkasında kalıyordu: butonun üstüne, aynı eksene.
   WhatsApp: 52 px, sağdan 20 px; masaüstünde alttan 20 px, telefonda araç çubuğunun üstünde (66 px).
   ------------------------------------------------------------------ */
.mj-has-wa .scrollToTop {
	right: 21px;
	bottom: 84px;
}
@media (max-width: 1024px) {
	.mj-has-wa.sticky-toolbar-on .scrollToTop {
		right: 26px;
		bottom: calc(130px + env(safe-area-inset-bottom, 0px));
	}
}

/* ------------------------------------------------------------------
   Koyu yazılı kapaklar (anasayfa): yazının durduğu alt kısma yumuşak krem geçiş,
   fotoğraf karışık olduğunda başlık zemine karışmasın.
   ------------------------------------------------------------------ */
.wp-block-wd-cover.mj-cover-fade > .wd-block-cover-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(250, 246, 241, .9) 0%, rgba(250, 246, 241, .62) 26%, rgba(250, 246, 241, 0) 56%);
	pointer-events: none;
}
/* Telefonda yazısı üstte duran kapak (anasayfa ilk kapak): geçiş üstten */
@media (max-width: 768.98px) {
	.wp-block-wd-cover.mj-cover-fade-top-sm > .wd-block-cover-img::after {
		background: linear-gradient(to bottom, rgba(250, 246, 241, .88) 0%, rgba(250, 246, 241, .55) 26%, rgba(250, 246, 241, 0) 52%);
	}
}

/* ------------------------------------------------------------------
   Varyasyonlu ürün: seçenek seçilmeden "Sepete ekle" pasif görünsün (tıklanınca tarayıcı uyarısı çıkıyordu).
   ------------------------------------------------------------------ */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button.wc-variation-selection-needed {
	opacity: .45;
	cursor: not-allowed;
}

/* BrikPanel "Sepeti paylaş": WoodMart'ta yalnız "button" sınıfı temanın genel gri düğmesine (#f3f3f3) düşüyor;
   temanın ikincil (bej) düğmesi gibi görünsün. */
.brikpanel-cshare-btn.button {
	--btn-bgcolor: var(--btn-default-bgcolor);
	--btn-bgcolor-hover: var(--btn-default-bgcolor-hover);
	--btn-color: var(--btn-default-color);
	--btn-color-hover: var(--btn-default-color-hover);
}

/* ------------------------------------------------------------------
   Üst duyuru şeridi (27.10.2026): ortada, büyük ve kalın; "kargo ücretsiz" ve "takı kutusu hediye"
   sırayla yukarı kayarak değişir. Fare üstündeyken durur; "hareketi azalt" tercihinde kaymadan,
   yalnız solarak değişir. İki mesaj da sayfada yazılı olduğu için ekran okuyucu ikisini de okur.
   Mesajlar başlık oluşturucudaki yazı öğesinde (betik 16).
   ------------------------------------------------------------------ */
.whb-top-bar .mj-topbar-text {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	text-align: center;
}
.mj-duyuru {
	display: grid;
	overflow: hidden;
}
.mj-duyuru__item {
	grid-area: 1 / 1;
	margin: 0;
	overflow: hidden;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: .02em;
	white-space: nowrap;
	text-overflow: ellipsis;
	animation: mj-duyuru 9s ease-in-out infinite;
}
.mj-duyuru__item:nth-child(2) {
	animation-delay: -4.5s;
}
.mj-duyuru:hover .mj-duyuru__item {
	animation-play-state: paused;
}
@keyframes mj-duyuru {
	0%, 44% { opacity: 1; transform: translateY(0); }
	50% { opacity: 0; transform: translateY(-100%); }
	50.01%, 94% { opacity: 0; transform: translateY(100%); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes mj-duyuru-sade {
	0%, 44% { opacity: 1; }
	50%, 94% { opacity: 0; }
	100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.mj-duyuru__item {
		animation-name: mj-duyuru-sade;
	}
}
@media (max-width: 360px) {
	.mj-duyuru__item {
		font-size: 13px;
		letter-spacing: 0;
	}
}

/* ------------------------------------------------------------------
   Anasayfa "3 Al 2 Öde" afişi (27.10.2026): telefon ve dar tablette fotoğraf metnin üstünde.
   Sabit yükseklikte geniş ekranda basık bir şeride dönüşüp küpeyi kesiyordu; sabit oran her genişlikte
   aynı kadrajı (dudak + küpe) verir.
   ------------------------------------------------------------------ */
@media (max-width: 768.98px) {
	.mj-kampanya .mj-kampanya__gorsel {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
}

/* Kampanya penceresi (WoodMart Popup) çerez bildiriminin (z-index 1510) üstünde açılsın: küçük telefonda
   bildirim pencerenin altını, "Alışverişe Başla" düğmesini örtüyordu. Pencere kapanınca bildirim yerinde. */
.mfp-bg[class*="wd-mfp-popup-bg-"] {
	z-index: 1511;
}
.mfp-wrap.wd-popup-builder-wrap {
	z-index: 1512;
}