/*
Theme Name:   Afrotunda Child
Theme URI:    https://afrotunda.com
Description:  Child theme for Afrotunda — safe customisation layer on top of Astra
Author:       Afrotunda
Template:     astra
Version:      1.0.0
Text Domain:  afrotunda-child
*/

/* ============================================================
   All custom CSS goes here — never edit the parent Astra theme
   ============================================================ */

/* ============================================================
   0. BRAND TOKENS — single source of truth for all pages
   ============================================================ */
:root {
	/* Legacy --afro-* aliases — resolve to --at-* tokens from design-tokens.css */
	--afro-red: var(--at-red);
	--afro-amber: var(--at-amber);
	--afro-black: var(--at-black);
	--afro-slate: var(--at-slate);
	--afro-warm: var(--at-warm);
	--afro-cream: var(--at-cream);
	--afro-border: var(--at-border);
	--afro-font-heading: var(--at-font-display);
	--afro-font-body: var(--at-font-body);
	--afro-font-serif: var(--at-font-serif);
}


/* ============================================================
   1b. HIDE PAYMENT PLUGIN MESSAGING IN PRODUCT SUMMARY
   Stripe BNPL + PayPal "Pay Later" — priorities 8 & 15.
   Can't remove via PHP (class instances), CSS is the fallback.
   These still display on checkout where they're useful.
   ============================================================ */
.woocommerce div.product .summary .bnpl-container,
.woocommerce div.product .summary .wc-stripe-product-message,
.woocommerce div.product .summary .stripe-bnpl-message,
.woocommerce div.product .summary [class*="stripe"][class*="bnpl"],
.woocommerce div.product .summary [class*="stripe"][class*="message"],
.woocommerce div.product .summary .ppcp-messages,
.woocommerce div.product .summary .wc-ppcp-product-message,
.woocommerce div.product .summary [class*="ppcp"][class*="message"],
.woocommerce div.product .summary [class*="pay-later"],
.woocommerce div.product .summary [data-pp-message] {
    display: none !important;
}


/* ============================================================
   2. PRODUCT TITLE
   ============================================================ */
.woocommerce div.product h1.product_title {
	font-family: var(--at-font-display);
	font-weight: 700;
	font-size: 2.4rem;
	color: var(--at-black);
	letter-spacing: -0.01em;
	margin-bottom: 8px;
	text-transform: none;
}

@media (max-width: 768px) {
	.woocommerce div.product h1.product_title {
		font-size: 1.8rem;
	}
}


/* ============================================================
   3. PRICE
   ============================================================ */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--at-red);
	margin-bottom: 20px;
}


/* ============================================================
   4. STOCK / AVAILABILITY
   ============================================================ */
.woocommerce div.product .stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff8e7;
	border: 1px solid #f0c060;
	border-radius: 4px;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 700;
	color: #92400e;
}

.woocommerce div.product .stock::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--at-amber);
	flex-shrink: 0;
	animation: afrotunda-pulse 1.8s ease-in-out infinite;
}

@keyframes afrotunda-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: 0.45; transform: scale(0.75); }
}


/* ============================================================
   5. TRUST BADGE STRIP
   ============================================================ */
.afrotunda-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 20px;
}

.afrotunda-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}


/* Section 6 removed — product_meta now hidden via PHP remove_action */


/* ============================================================
   8. ADD TO CART — button + quantity + Stripe express checkout
   ============================================================ */

/* Stack everything vertically, full-width */
.woocommerce div.product form.cart {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Hide the quantity wrapper when it contains only a hidden input
   (product has no purchasable quantity selector) */
.woocommerce div.product form.cart .quantity:has(> input[type="hidden"]) {
	display: none;
}

.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button.button {
	background: var(--at-red);
	color: var(--at-white);
	font-family: var(--at-font-display);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 16px 40px;
	border-radius: 4px;
	border: none;
	width: 100%;
	transition: background 0.2s ease;
	box-shadow: none;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.button:hover {
	background: var(--at-amber);
	color: var(--at-white);
}

/* Stripe express checkout (Google Pay / Apple Pay) — align with button above */
.woocommerce div.product form.cart .wc-stripe-product-checkout-container {
	margin-top: 10px;
	width: 100%;
}
.woocommerce div.product form.cart .wc-stripe-product-checkout-container ul.wc_stripe_product_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.woocommerce div.product form.cart .wc-stripe-product-checkout-container li {
	margin: 0;
	padding: 0;
	width: 100%;
}
.woocommerce div.product form.cart .gpay-button-fill,
.woocommerce div.product form.cart .gpay-button-container {
	width: 100% !important;
}
.woocommerce div.product form.cart .gpay-button {
	width: 100% !important;
	border-radius: 4px !important;
}


/* ============================================================
   9. SUMMARY COLUMN — flex order (fixes artisan block floating
   above title on some products due to CSS stacking conflicts)
   ============================================================ */
.woocommerce div.product .summary {
	display: flex;
	flex-direction: column;
}

/* Pin render order regardless of DOM output sequence */
.woocommerce div.product .summary .product_title            { order: 1; }
.woocommerce div.product .summary .woocommerce-product-rating { order: 2; }
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary span.price               { order: 3; }
.woocommerce div.product .summary .stock                   { order: 4; }
.woocommerce div.product .summary .afrotunda-product-teaser { order: 5; }
.woocommerce div.product .summary .afrotunda-artisan-block  { order: 6; }
.woocommerce div.product .summary form.cart                { order: 7; }
.woocommerce div.product .summary .afrotunda-trust-signals  { order: 8; }
.woocommerce div.product .summary .afrotunda-trust-badges   { order: 9; }


/* ============================================================
   PRODUCT TEASER — first sentence pull quote
   ============================================================ */
.afrotunda-product-teaser {
	font-size: 14px;
	line-height: 1.65;
	color: var(--at-slate);
	font-style: italic;
	margin: 4px 0 16px;
	padding-left: 12px;
	border-left: 3px solid var(--at-amber);
}


/* ============================================================
   10. PRODUCT IMAGE GALLERY — wider column + rounded main image
   ============================================================ */
@media (min-width: 769px) {
	.woocommerce div.product div.images {
		width: 52%;
	}
	.woocommerce div.product div.summary {
		width: 44%;
	}
}

.woocommerce-product-gallery__image img,
.woocommerce div.product div.images img {
	border-radius: 8px;
}

/* afrotunda-excerpt removed via PHP — no CSS fallback needed */


/* ============================================================
   10. TABS STYLING
   ============================================================ */

/* Reset Astra's notch/corner decoration */
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none !important;
	content: none !important;
	box-shadow: none !important;
}

/* Below-fold: Description section — clean editorial look */
.woocommerce-tabs {
	margin-top: 48px;
	border-top: 2px solid var(--at-border);
	padding-top: 40px;
}

.woocommerce-tabs ul.tabs {
	border-bottom: 2px solid var(--at-border);
	padding: 0;
	margin: 0 0 24px;
}

/* If only one tab remains (Description), hide tab nav entirely */
.woocommerce-tabs ul.tabs:has(li:only-child) {
	display: none;
}

.woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce-tabs ul.tabs li a {
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	color: var(--at-slate);
	font-weight: 400;
	font-family: var(--at-font-display);
	padding: 10px 18px;
	margin-bottom: -2px;
	display: inline-block;
	transition: color 0.15s, border-color 0.15s;
}

.woocommerce-tabs ul.tabs li a:hover {
	color: var(--at-red);
	border-bottom-color: var(--at-amber);
}

.woocommerce-tabs ul.tabs li.active a {
	background: transparent;
	border: none;
	border-bottom: 3px solid var(--at-amber);
	color: var(--at-red);
	font-weight: 700;
}

/* Tab panel — Description */
.woocommerce-tabs .panel {
	background: transparent;
	border: none;
	padding: 0;
}
.woocommerce-tabs .panel#tab-description {
	padding: 0;
	max-width: 680px; /* readable line length */
}
.woocommerce-tabs .panel#tab-description p {
	font-size: 15px;
	line-height: 1.8;
	color: var(--at-slate);
	margin-bottom: 16px;
}


/* ============================================================
   11. RELATED PRODUCTS
   ============================================================ */
.related.products {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 2px solid var(--at-border);
}
.related.products h2 {
	font-family: var(--at-font-display);
	font-size: 1.4rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--at-red);
	margin-bottom: 28px;
}
.related.products ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--at-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--at-black);
}
.related.products ul.products li.product .price {
	color: var(--at-red);
	font-weight: 700;
}
.related.products ul.products li.product img {
	border-radius: 6px;
}
.related.products ul.products li.product a.button {
	background: var(--at-red);
	color: var(--at-white);
	font-family: var(--at-font-display);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 4px;
	padding: 8px 16px;
	transition: background 0.2s;
}
.related.products ul.products li.product a.button:hover {
	background: var(--at-amber);
}

.dokan-btn-theme {
	background: var(--at-red) !important;
	color: var(--at-white) !important;
	font-family: var(--at-font-display) !important;
}