/*
Theme Name: Donabuy (Storefront Child)
Template: storefront
Description: Custom child theme for Donabuy built on Storefront.
Version: 1.0.3
Text Domain: donabuy
*/

:root {
	--color-primary: #141852;
	--color-primary-dark: #0F123E;
	--color-secondary: #BA2082;
	--color-secondary-dark: #8C1862;

	/* Remap Bootstrap's theme colors to the Donabuy brand palette, so
	   bg-primary / text-primary / border-primary / btn-primary etc. use
	   our colors instead of Bootstrap's default blue/grey everywhere we
	   use them going forward. */
	--bs-primary: var(--color-primary);
	--bs-primary-rgb: 20, 24, 82;
	--bs-secondary: var(--color-secondary);
	--bs-secondary-rgb: 186, 32, 130;
}

.btn-primary {
	--bs-btn-bg: var(--color-primary);
	--bs-btn-border-color: var(--color-primary);
	--bs-btn-hover-bg: var(--color-primary-dark);
	--bs-btn-hover-border-color: var(--color-primary-dark);
	--bs-btn-active-bg: var(--color-primary-dark);
	--bs-btn-active-border-color: var(--color-primary-dark);
}

.btn-secondary {
	--bs-btn-bg: var(--color-secondary);
	--bs-btn-border-color: var(--color-secondary);
	--bs-btn-hover-bg: var(--color-secondary-dark);
	--bs-btn-hover-border-color: var(--color-secondary-dark);
	--bs-btn-active-bg: var(--color-secondary-dark);
	--bs-btn-active-border-color: var(--color-secondary-dark);
}
.bg-primary{
	background:var(--color-primary)
}
.bg-secondary{
	background:var(--color-secondary)
}
html,
body {
	overflow-x: hidden;
}

body {
	font-family: 'Nunito', sans-serif;
}

/* Keep h3 out of the body's Nunito font (it inherits Source Sans Pro,
   Storefront's original heading stack, instead). h1/h2 use Nunito Bold. */
h3 {
	font-family: "Source Sans Pro", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

h1,
h2 {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
}

@media (max-width: 768px) {
	h1,
	h2 {
		font-weight: 500;
	}
}

/* ---------- Header ---------- */

.site-header {
	background-color: var(--color-primary);
	padding: 0;
	border: none;
	position: sticky;
	top: 0;
	z-index: 30;
	transition: background-color 0.25s ease;
}

/* Storefront wraps the header in .col-full (a fixed max-width, centered
   container) — override it here so the header spans full width instead,
   like Bootstrap's .container-fluid would. */
.site-header .col-full {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 24px;
	padding-right: 24px;
}

.donabuy-branding .donabuy-logo-text {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.5px;
	color: var(--color-secondary);
	line-height: 1;
}

.donabuy-branding img.custom-logo {
	max-height: 44px;
	width: auto;
}

@media (max-width: 767.98px) {
	.donabuy-branding .donabuy-logo-text {
		font-size: 18px;
	}

	.donabuy-branding img.custom-logo {
		max-height: 32px;
	}
}

.donabuy-nav-link {
	color: #fff;
	font-size: 15px;
	font-weight: 500;
}

.donabuy-nav-link:hover {
	color: var(--color-secondary);
}

.donabuy-more-toggle {
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	padding: 8px 16px;
	font-size: 15px;
	font-weight: 500;
}

.donabuy-more-toggle:hover,
.donabuy-more-toggle:focus {
	color: #fff;
	border-color: #fff;
}

.donabuy-cart-link {
	width: 44px;
	height: 44px;
	background: var(--color-secondary);
}

.donabuy-cart-count {
	/* .donabuy-cart-link is a 44px circle (radius 22px). A box-corner anchor
	   (e.g. Bootstrap's top-0/start-100/translate-middle) sits outside the
	   curve, floating away from the button. Anchoring at 22px*(1-cos45deg)
	   instead puts the badge's center right on the circle's edge, so half of
	   it genuinely overlaps the button. */
	top: 6.44px;
	left: 37.56px;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	color: var(--color-primary);
	font-size: 11px;
}

/* Transparent overlay header on the front page hero / category banner,
   until scrolled */
.home .site-header,
.donabuy-has-banner .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
}

.home .site-header.donabuy-header-scrolled,
.donabuy-has-banner .site-header.donabuy-header-scrolled {
	position: fixed;
	background: var(--color-primary);
}

/* ---------- Hero ---------- */

.donabuy-hero {
	position: relative;
	min-height: 530px;
	background-color: var(--color-primary);
	background-size: cover;
	background-position: center;
	padding: 120px 20px 40px;
}

.donabuy-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 100%);
	pointer-events: none;
}

.donabuy-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	width: 100%;
}

.donabuy-hero-heading {
	color: #fff;
	font-size: 52px;
	line-height: 1.1;
	margin: 0 0 32px;
}

.donabuy-hero-search {
	max-width: 560px;
	background: #fff;
	padding: 5px 5px 5px 24px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.donabuy-hero-search .form-control {
	font-size: 16px;
	box-shadow: none;
}

.donabuy-search-btn {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	background: var(--color-secondary);
}

@media (max-width: 768px) {
	.donabuy-hero {
		min-height: 400px;
		padding: 100px 16px 32px;
	}

	.donabuy-hero-heading {
		font-size: 28px;
	}

	.donabuy-hero-search {
		padding: 4px 4px 4px 16px;
	}
}

/* ---------- Product sections (Best Seller / Trending / Coming Soon) ---------- */

.donabuy-badge-best-seller {
	background: var(--color-primary);
	color: #fff;
}

.donabuy-badge-new-arrival {
	background: #000;
	color: #fff;
}

.donabuy-badge-coming-soon {
	background: var(--color-secondary);
	color: #fff;
}

.donabuy-product-card {
	height: 100%;
}

.donabuy-product-card-badges {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	right: 0.75rem;
	z-index: 2;
}

.donabuy-product-card-image img {
	width: 100%;
	height: 220px;
	object-fit: contain;
}

.donabuy-product-media {
	overflow: hidden;
}

.donabuy-product-hover-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	z-index: 3;
}

.donabuy-product-media:hover .donabuy-product-hover-overlay {
	opacity: 1;
	pointer-events: auto;
}

/* WooCommerce's [add_to_cart] shortcode wraps its button in a div.product —
   collapse it out of the layout so flex centering applies to the button. */
.donabuy-product-hover-overlay .product {
	display: contents;
}

/* WooCommerce's [add_to_cart] shortcode puts its own classes on the inner
   <a>, not the wrapper we can pass a class to — target it directly. */
.donabuy-product-hover-overlay .add_to_cart_button {
	position: relative;
	background: var(--color-secondary) !important;
	border-color: var(--color-secondary) !important;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 22px;
	border-radius: 999px;
	text-decoration: none !important;
	display: inline-block;
}

.donabuy-product-hover-overlay .add_to_cart_button:hover {
	background: var(--color-secondary-dark) !important;
	border-color: var(--color-secondary-dark) !important;
}

/* WooCommerce fades the whole button to 25% opacity while its AJAX spinner
   spins, which makes the spinner itself look washed-out grey — keep the
   button fully visible and force the spinner glyph to white. */
.donabuy-product-hover-overlay .add_to_cart_button.loading {
	opacity: 1;
}

.donabuy-product-hover-overlay .add_to_cart_button.loading::after {
	color: #fff;
}

/* The "View cart" link WooCommerce injects after a successful add */
.donabuy-product-hover-overlay .added_to_cart {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 22px;
	border-radius: 999px;
	text-decoration: none !important;
	display: inline-block;
}

.donabuy-product-hover-overlay .added_to_cart:hover {
	background: var(--color-primary-dark) !important;
	border-color: var(--color-primary-dark) !important;
}

.donabuy-hover-btn-view {
	background: #fff !important;
	border-color: #fff !important;
	color: var(--color-primary) !important;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 22px;
}

.donabuy-hover-btn-view:hover {
	background: var(--color-primary) !important;
	color: #fff !important;
}

.donabuy-product-card-title {
	display: flex;
	align-items: flex-end;
	height: 2.6em;
	line-height: 1.3;
	overflow: hidden;
}

.donabuy-carousel-arrow {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6c757d;
	background: transparent;
	border: none;
}

.donabuy-carousel-arrow:hover {
	color: var(--color-secondary);
}

.donabuy-carousel-dots button {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: var(--color-primary);
	padding: 0;
}

.donabuy-carousel-dots button.active {
	background: var(--color-secondary);
}

/* ---------- Promo banner ---------- */

.donabuy-promo-slide {
	position: relative;
	min-height: 340px;
	background-color: var(--color-primary-dark);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
}

.donabuy-promo-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(15, 18, 62, 0.92) 0%, rgba(15, 18, 62, 0.65) 45%, rgba(15, 18, 62, 0.15) 100%);
}

.donabuy-promo-content {
	position: relative;
	z-index: 1;
	max-width: 520px;
	padding: 40px;
	color: #fff;
}

.donabuy-promo-heading {
	color: #fff;
	font-size: 34px;
	line-height: 1.2;
	margin-bottom: 16px;
}

.donabuy-promo-text {
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 24px;
}

.donabuy-promo-btn {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: #fff;
	padding: 10px 28px;
	font-weight: 600;
}

.donabuy-promo-btn:hover {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
	color: #fff;
}

/* Storefront underlines links by default (same specificity as Bootstrap's
   .btn reset, loaded after it), so button-styled links need this explicitly. */
.donabuy-see-more-btn {
	text-decoration: none;
}

@media (max-width: 768px) {
	.donabuy-promo-slide {
		min-height: 180px;
	}

	.donabuy-promo-content {
		padding: 28px 24px;
	}

	.donabuy-promo-heading {
		font-size: 24px;
	}
}

/* ---------- Footer ---------- */

.site-footer {
	background-color: var(--color-primary);
	color: rgba(255, 255, 255, 0.85);
	padding: 48px 0 24px;
}

.site-footer .donabuy-logo-text {
	font-size: 22px;
	color: var(--color-secondary);
}

.site-footer img.custom-logo {
	max-height: 44px;
	width: auto;
}

@media (max-width: 767.98px) {
	.site-footer .donabuy-logo-text {
		font-size: 18px;
	}

	.site-footer img.custom-logo {
		max-height: 32px;
	}
}

.site-footer .donabuy-footer-text {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	max-width: 360px;
}

.site-footer .donabuy-footer-heading {
	color: #fff;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.donabuy-footer-links li {
	margin-bottom: 10px;
}

.site-footer .donabuy-footer-links a {
	color: rgba(255, 255, 255, 0.75) !important;
	text-decoration: none;
	font-size: 14px;
}

.site-footer .donabuy-footer-links a:hover {
	color: var(--color-secondary) !important;
}

.donabuy-footer-divider {
	border-color: rgba(255, 255, 255, 0.15);
	margin: 32px 0 20px;
}

.site-footer p.small {
	color: rgba(255, 255, 255, 0.6);
}

/* ---------- Category / shop archive banner ---------- */

.donabuy-category-banner {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: center;
	margin-bottom: 40px;
	background-color: var(--color-primary);
	background-size: cover;
	background-position: center;
}

@media (max-width: 767px) {
	.donabuy-category-banner {
		min-height: 320px;
	}

	/* Clear the transparent absolute header so the title doesn't run into
	   the logo on small screens. Bootstrap's py-4 utility uses !important,
	   so this needs to as well to actually override it. */
	.donabuy-category-banner .container {
		padding-top: 90px !important;
	}
}

.donabuy-category-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 100%);
	pointer-events: none;
}

/* Cart/Checkout/My Account are real WP pages, so Storefront's page template
   prints its own title above the page content — redundant now that the
   banner above already shows the same title. */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header {
	display: none;
}

.donabuy-category-breadcrumb,
.donabuy-category-breadcrumb a {
	color: rgba(255, 255, 255, 0.8) !important;
}

.donabuy-category-breadcrumb a:hover {
	color: #fff !important;
}

.donabuy-category-search {
	background: #fff;
	padding: 5px 5px 5px 20px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
	max-width: 480px;
	margin-left: auto;
}

.donabuy-category-search .form-control {
	background: #fff;
	font-size: 15px;
	box-shadow: none;
}

@media (max-width: 767px) {
	.donabuy-category-search {
		margin-left: 0;
		max-width: 100%;
	}
}

/* ---------- Cart / Checkout (WooCommerce Blocks) ---------- */

/* Cart/Checkout page content sits flush against the banner without this —
   give it some breathing room. */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
	padding-top: 32px;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-color: var(--color-secondary) !important;
	border-color: var(--color-secondary) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	/* Storefront underlines links by default and only clears it on :hover —
	   backwards for a button-styled link like this one. */
	text-decoration: none !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--color-secondary-dark) !important;
	border-color: var(--color-secondary-dark) !important;
}

.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select-input select,
.wc-block-components-combobox input {
	border-radius: 8px !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-block-components-select-input select:focus,
.wc-block-components-combobox input:focus {
	border-color: var(--color-secondary) !important;
	box-shadow: 0 0 0 1px var(--color-secondary) !important;
}

.wc-block-components-sidebar,
.wc-block-checkout__sidebar,
.wc-block-cart__totals {
	border-radius: 12px;
	overflow: hidden;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--color-secondary);
	font-weight: 700;
}

.wc-block-components-quantity-selector__button:hover {
	color: var(--color-secondary) !important;
}

.wc-block-cart-item__remove-link {
	color: var(--color-secondary) !important;
}

/* "Product" / "Total" column headers and the "Cart totals" heading */
.wc-block-cart-items__header-image,
.wc-block-cart-items__header-product,
.wc-block-cart-items__header-total,
.wc-block-cart__totals-title {
	font-weight: 700;
}

/* Item name (e.g. "Beanie") — bold, and not underlined by default the way
   Storefront underlines links until hovered. */
.wc-block-components-product-name {
	font-weight: 700;
	text-decoration: none;
}

/* Price(s) shown under the "Total" column for each cart item */
.wc-block-cart-item__total {
	font-weight: 700;
}

/* Checkout section titles (Contact information, Shipping address, etc.) vs.
   the "Order summary" sidebar title */
.wc-block-components-checkout-step__title {
	color: var(--color-primary);
}

.wc-block-components-checkout-order-summary__title-text {
	color: var(--color-secondary);
}

/* ---------- Single product page ---------- */

.single-product span.onsale {
	/* Storefront's own .onsale rule sets a dark grey color + matching grey
	   border, meant for its default white badge — illegible against our
	   pink bg-secondary badge here, so override both. */
	background: var(--color-secondary) !important;
	color: #fff !important;
	border: none !important;
	text-decoration: none !important;
	border-radius: 999px;
	font-weight: 600;
}

.single-product .single_add_to_cart_button {
	background: var(--color-secondary) !important;
	border-color: var(--color-secondary) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	padding: 12px 32px !important;
}

.single-product .single_add_to_cart_button:hover {
	background: var(--color-secondary-dark) !important;
	border-color: var(--color-secondary-dark) !important;
}

/* Quantity stepper (+/- buttons around the qty input) */
.quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #ddd;
	border-radius: 999px;
	overflow: hidden;
}

.donabuy-qty-btn {
	background: #fff;
	border: none;
	width: 36px;
	font-size: 18px;
	line-height: 1;
	font-weight: 600;
	color: var(--color-primary);
	cursor: pointer;
}

.donabuy-qty-btn:hover {
	background: #f5f5f5;
	color: var(--color-secondary);
}

/* Hidden for now — the magnifying-glass zoom trigger WooCommerce adds to
   the gallery image (JS-injected, not in the server-rendered HTML). */
.single-product .woocommerce-product-gallery__trigger {
	display: none;
}

.quantity .qty {
	border: none !important;
	border-radius: 0 !important;
	width: 44px;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product .product_title {
	margin-bottom: 0.25em;
}

.single-product .summary p.price {
	margin-top: 0;
}

.single-product .price ins {
	color: var(--color-primary);
	text-decoration: none;
}

.single-product .price del {
	opacity: 0.6;
}

.single-product .product_meta a,
.single-product .woocommerce-tabs ul.tabs li.active {
	color: var(--color-secondary);
}

/* ---------- My Account (login, register, dashboard, orders, etc.) ---------- */

.woocommerce-account .entry-content {
	padding-top: 32px;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	border: 1px solid #eee;
	border-radius: 12px;
	overflow: hidden;
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid #eee;
}

.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	/* Storefront's own ul li.woocommerce-MyAccount-navigation-link a rule
	   sets 0 horizontal padding and outranks this on specificity alone
	   (it has an extra class in the selector) — !important is needed to
	   actually win. */
	padding: 12px 18px !important;
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: #f5f5f5;
	color: var(--color-secondary);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--color-secondary);
	color: #fff;
}

.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account .woocommerce-Button {
	background: var(--color-secondary) !important;
	border-color: var(--color-secondary) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	padding: 10px 24px !important;
}

.woocommerce-account .button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account .woocommerce-Button:hover {
	background: var(--color-secondary-dark) !important;
	border-color: var(--color-secondary-dark) !important;
}

.woocommerce-account form .input-text,
.woocommerce-account form select,
.woocommerce-account form textarea {
	border-radius: 8px;
}

.woocommerce-account form .input-text:focus,
.woocommerce-account form select:focus,
.woocommerce-account form textarea:focus {
	border-color: var(--color-secondary);
	box-shadow: 0 0 0 1px var(--color-secondary);
	outline: none;
}

.woocommerce-account h2,
.woocommerce-account h3 {
	color: var(--color-primary);
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	color: var(--color-secondary);
}