body { font-family: 'Alexandria', sans-serif; }
html { scroll-behavior: smooth; }
html.sd-scroll-lock, html.sd-scroll-lock body { overflow: hidden; }

/* Custom-named (collision-proof) product grid — some Hostinger-bundled plugin defines
   its own high-specificity ":root .grid-cols-*" rules that silently override Tailwind's
   identically-named utilities, so this layout is defined here instead of relying on
   Tailwind's grid-cols-* class names. */
.sd-product-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1rem;
}
@media (min-width: 640px) {
	.sd-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (min-width: 768px) {
	.sd-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.sd-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sd-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sd-options-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 640px) {
	.sd-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sd-footer-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2rem; }
@media (min-width: 768px) {
	.sd-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.sd-footer-grid { gap: 4rem; }
}

#scroll-top-btn {
	transition: opacity .25s ease, transform .25s ease;
	/* Explicit square sizing — Tailwind's w-11/h-11 collide with plugin CSS on staging. */
	width: 2.75rem;
	height: 2.75rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 9999px;
	box-sizing: border-box;
}
#scroll-top-btn.is-visible { opacity: 1; pointer-events: auto; }

/* Navbar cart quantity chip — Tailwind w-5/h-5/rounded-full/flex/hidden collide with WooCommerce etc. on staging. */
#cart-icon-wrap {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	line-height: 0;
}
#cart-count {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.3rem;
	box-sizing: border-box;
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 9999px;
	background-color: #D44D2B;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	z-index: 2;
	pointer-events: none;
}
#cart-count.is-visible {
	display: flex;
}

#mobile-cart-bar-count {
	width: 2rem;
	height: 2rem;
	min-width: 2rem;
	min-height: 2rem;
	padding: 0 0.25rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 9999px;
	background-color: #2E1C14;
	color: #EBD8B8;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F4EFEA; }
::-webkit-scrollbar-thumb { background: #D5C2B1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #BA9F8B; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.line-clamp-1 {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.animate-spin-slow { animation: spin 3s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

h1, h2, .font-serif { font-family: 'Playfair Display', serif; }

/* ---------- Overlay + panel open/close transitions ---------- */
.sd-overlay {
	opacity: 0;
	transition: opacity .25s ease;
}
.sd-overlay.is-open { opacity: 1; }

.sd-panel-right {
	transform: translateX(-100%);
	transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.sd-panel-right.is-open { transform: translateX(0); }

.sd-panel-scale {
	opacity: 0;
	transform: scale(.94) translateY(8px);
	transition: opacity .22s ease, transform .22s cubic-bezier(.32,.72,0,1);
}
.sd-panel-scale.is-open { opacity: 1; transform: scale(1) translateY(0); }

/* Product modal close chip — w-9/h-9/flex collide with WooCommerce/SureCart on live. */
#product-close-btn.sd-modal-close {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 10;
	width: 2.25rem;
	height: 2.25rem;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: none;
	border-radius: 9999px;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	line-height: 0;
	transition: background-color 0.15s ease;
}
#product-close-btn.sd-modal-close:hover {
	background-color: rgba(0, 0, 0, 0.7);
}
#product-close-btn.sd-modal-close svg {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	display: block;
}

/* ---------- Product card scroll-reveal ---------- */
.product-card {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.product-card.in-view { opacity: 1; transform: translateY(0); }

/* ---------- Cart icon pulse feedback on add ---------- */
@keyframes sd-pop {
	0% { transform: scale(1); }
	35% { transform: scale(1.22); }
	100% { transform: scale(1); }
}
.sd-pop { animation: sd-pop .35s ease; }

/* ---------- Mobile sticky cart bar ---------- */
@keyframes sd-slide-up {
	from { transform: translateY(100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
#mobile-cart-bar.is-visible { animation: sd-slide-up .3s cubic-bezier(.32,.72,0,1); }

/* ---------- Toast ---------- */
@keyframes sd-toast-in {
	from { transform: translateY(10px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
#sd-toast.is-visible { animation: sd-toast-in .25s ease; }

/* ---------- Button press feedback ---------- */
button, a { -webkit-tap-highlight-color: transparent; }
.cat-btn, .product-card, #cart-checkout-btn, #pm-add-btn, .quick-add {
	will-change: transform;
}
.cat-btn:active, #cart-checkout-btn:active, #pm-add-btn:active, .quick-add:active {
	transform: scale(.97);
}

/* Collision-proof responsive show/hide — avoid Tailwind's `hidden sm:*` pattern.
   Tailwind CDN emits `:root .hidden`, which outranks `.sm:inline` / `.sm:flex` once
   WooCommerce, SureCart, or other plugins load their own `.hidden` rules on staging. */
.sd-show-inline-sm { display: none; }
@media (min-width: 640px) {
	.sd-show-inline-sm { display: inline; }
}
.sd-show-inline-block-sm { display: none; }
@media (min-width: 640px) {
	.sd-show-inline-block-sm { display: inline-block; }
}
.sd-show-flex-sm { display: none; }
@media (min-width: 640px) {
	.sd-show-flex-sm { display: flex; }
}
.sd-show-flex-md { display: none; }
@media (min-width: 768px) {
	.sd-show-flex-md { display: flex; }
}

/* Hero CTA buttons — mobile-first + #hero-section scope so width/flex survive
   plugin CSS on staging (min-width sm: overrides were not winning). */
#hero-section .sd-hero-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	max-width: 42rem;
	margin: 0 0 1.75rem;
}
#hero-section .sd-hero-stat {
	flex: 1 1 7.5rem;
	min-width: 6.5rem;
	max-width: 12rem;
	padding: 0.875rem 0.75rem;
	border-radius: 1rem;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(197, 155, 99, 0.28);
	box-sizing: border-box;
	text-align: center;
}
#hero-section .sd-hero-stat__value {
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.3;
	color: #E8D0A9;
	margin-bottom: 0.25rem;
}
#hero-section .sd-hero-stat__label {
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.45;
	color: #D5C2B1;
}
@media (min-width: 640px) {
	#hero-section .sd-hero-stats {
		gap: 1rem;
	}
	#hero-section .sd-hero-stat {
		padding: 1rem 0.875rem;
	}
	#hero-section .sd-hero-stat__value {
		font-size: 1.5rem;
	}
	#hero-section .sd-hero-stat__label {
		font-size: 0.8125rem;
	}
}

#hero-section .sd-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: auto;
	margin-bottom: 0.5rem;
}
@media (max-width: 639px) {
	#hero-section .sd-hero-actions {
		gap: 0.75rem;
		width: 100%;
	}
}

#hero-section .sd-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 0.875rem 1.5rem;
	border-radius: 0.75rem;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.5rem;
	transition: all 0.15s ease;
	cursor: pointer;
	text-decoration: none;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	min-width: 0;
	box-sizing: border-box;
	border: none;
	font-family: inherit;
}
@media (max-width: 639px) {
	#hero-section .sd-hero-btn {
		flex: 1 1 auto;
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
}

#hero-section .sd-hero-btn--primary {
	background: linear-gradient(to left, #C59B63, #B0864E);
	color: #241711;
	font-weight: 700;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
#hero-section .sd-hero-btn--primary:hover {
	background: linear-gradient(to left, #D4AA70, #C59B63);
}

#hero-section .sd-hero-btn--secondary {
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.2);
}
#hero-section .sd-hero-btn--secondary:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

#hero-section .sd-hero-btn--whatsapp {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	background-color: rgba(37, 211, 102, 0.2);
	color: #59E48D;
	border: 1px solid rgba(37, 211, 102, 0.4);
	font-weight: 500;
	font-size: 0.875rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	gap: 0.5rem;
}
@media (max-width: 639px) {
	#hero-section .sd-hero-btn--whatsapp {
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
		font-size: 0.75rem;
	}
}
#hero-section .sd-hero-btn--whatsapp:hover {
	background-color: rgba(37, 211, 102, 0.3);
}