/* Afia Store — front-end styles.
   Change the brand colours here; everything else follows. */
:root {
	--afia-brand: #c2185b;        /* main accent (berry pink) */
	--afia-brand-dark: #8e0f42;
	--afia-brand-soft: #fce4ec;
	--afia-ink: #2b2230;
	--afia-muted: #6f6475;
	--afia-line: #eee6ea;
	--afia-bg-soft: #fff7f9;
	--afia-wa: #25d366;
	--afia-radius: 14px;
}

.afia-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.afia-ico { display: inline-flex; width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.afia-ico svg { width: 100%; height: 100%; }

/* ---------- Announcement bar ---------- */
.afia-topbar { background: var(--afia-ink); color: #fff; font-size: 13px; line-height: 1.4; }
.afia-topbar .afia-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; flex-wrap: wrap; }
.afia-topbar__msg { display: inline-flex; gap: 8px; align-items: center; }
.afia-topbar__right { display: inline-flex; gap: 14px; align-items: center; }
.afia-topbar a { color: #fff; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; opacity: .9; }
.afia-topbar a:hover { opacity: 1; }
@media (max-width: 640px) {
	.afia-topbar .afia-wrap { justify-content: center; text-align: center; padding: 6px 16px; }
	.afia-topbar__right { display: none; }
}

/* ---------- Buttons ---------- */
.afia-btn {
	display: inline-flex; align-items: center; gap: 8px; justify-content: center;
	background: var(--afia-brand); color: #fff !important; text-decoration: none !important;
	padding: 11px 22px; border-radius: 999px; font-weight: 600; border: 2px solid var(--afia-brand);
	transition: background .2s, border-color .2s, transform .2s; cursor: pointer; font-size: 15px; line-height: 1.2;
}
.afia-btn:hover { background: var(--afia-brand-dark); border-color: var(--afia-brand-dark); transform: translateY(-1px); }
.afia-btn--ghost { background: transparent; color: var(--afia-ink) !important; border-color: var(--afia-ink); }
.afia-btn--ghost:hover { background: var(--afia-ink); color: #fff !important; border-color: var(--afia-ink); }
.afia-btn--wa { background: var(--afia-wa); border-color: var(--afia-wa); }
.afia-btn--wa:hover { background: #1da851; border-color: #1da851; }

/* ---------- Hero ---------- */
.afia-hero {
	position: relative; border-radius: var(--afia-radius); overflow: hidden; margin: 0 0 22px;
	background: linear-gradient(120deg, var(--afia-brand-soft) 0%, #fff3e0 60%, #f3e5f5 100%);
	padding: clamp(26px, 3.4vw, 46px) clamp(20px, 4vw, 52px);
}
.afia-hero.has-image { background: var(--afia-hero-img) center/cover no-repeat; }
.afia-hero.has-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 45%, rgba(255,255,255,0) 80%); }
.afia-hero__inner { position: relative; max-width: 620px; }
.afia-hero__kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--afia-brand); margin: 0 0 8px; }
.afia-hero__title { font-size: clamp(26px, 3.1vw, 38px); line-height: 1.15; margin: 0 0 12px; color: var(--afia-ink); }
.afia-hero__text { font-size: clamp(15px, 1.2vw, 17px); color: var(--afia-muted); margin: 0 0 20px; }
.afia-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .afia-hero.has-image::before { background: rgba(255,255,255,.85); } }

/* ---------- USP row ---------- */
.afia-usp { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0 0 20px; }
.afia-usp__item { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--afia-line); border-radius: var(--afia-radius); background: #fff; }
.afia-usp__item > .afia-ico { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--afia-brand-soft); color: var(--afia-brand); flex: none; }
.afia-usp__item strong { display: block; font-size: 15px; color: var(--afia-ink); }
.afia-usp__item span { font-size: 13px; color: var(--afia-muted); }

/* ---------- Category grid ---------- */
.afia-cats { display: grid; grid-template-columns: repeat(var(--afia-cols, 4), 1fr); gap: 18px 14px; margin: 0 0 32px; }
.afia-cats__item { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none !important; color: var(--afia-ink); gap: 6px; }
.afia-cats__media { width: 100%; max-width: 132px; aspect-ratio: 1; border-radius: var(--afia-radius); overflow: hidden; background: var(--afia-bg-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; }
.afia-cats__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.afia-cats__item:hover .afia-cats__media img { transform: scale(1.06); }
.afia-cats__art { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.afia-cats__item:hover .afia-cats__art { transform: scale(1.06); }
.afia-cats__media { transition: box-shadow .25s; }
.afia-cats__item:hover .afia-cats__media { box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.afia-ph-0 { background: linear-gradient(135deg, #f48fb1, #c2185b); }
.afia-ph-1 { background: linear-gradient(135deg, #ffcc80, #ef6c00); }
.afia-ph-2 { background: linear-gradient(135deg, #ce93d8, #7b1fa2); }
.afia-ph-3 { background: linear-gradient(135deg, #80deea, #00838f); }
.afia-ph-4 { background: linear-gradient(135deg, #a5d6a7, #2e7d32); }
.afia-ph-5 { background: linear-gradient(135deg, #bcaaa4, #5d4037); }
.afia-cats__name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.afia-cats__count { font-size: 12px; color: var(--afia-muted); }
@media (max-width: 1024px) { .afia-cats { grid-template-columns: repeat(min(var(--afia-cols, 4), 4), 1fr); } }
@media (max-width: 900px) { .afia-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .afia-cats { grid-template-columns: repeat(2, 1fr); gap: 14px; } .afia-cats__media { max-width: 160px; } }

/* ---------- WhatsApp CTA box ---------- */
.afia-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 28px 32px; border-radius: var(--afia-radius); background: var(--afia-ink); color: #fff; margin: 32px 0; }
.afia-cta h3 { color: #fff; margin: 0 0 6px; font-size: 22px; }
.afia-cta p { margin: 0; opacity: .85; max-width: 620px; }

/* ---------- Floating WhatsApp ---------- */
.afia-wa-float {
	position: fixed; right: 20px; bottom: 20px; z-index: 9999; width: 58px; height: 58px; border-radius: 50%;
	background: var(--afia-wa); color: #fff !important; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 20px rgba(0,0,0,.2); transition: transform .2s;
}
.afia-wa-float .afia-ico { width: 32px; height: 32px; }
.afia-wa-float:hover { transform: scale(1.08); }
@media (max-width: 768px) { .afia-wa-float { bottom: 76px; right: 14px; width: 52px; height: 52px; } }

/* ---------- Product page ---------- */
.afia-wa-order {
	display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 18px; padding: 11px 22px; border-radius: 999px;
	background: var(--afia-wa); color: #fff !important; text-decoration: none !important; font-weight: 600;
}
.afia-wa-order:hover { background: #1da851; }
.afia-product-trust { list-style: none; margin: 0 0 20px; padding: 14px 16px; border: 1px dashed var(--afia-line); border-radius: 10px; font-size: 14px; color: var(--afia-muted); }
.afia-product-trust li { display: flex; gap: 10px; align-items: center; margin: 4px 0; }
.afia-product-trust .afia-ico { color: var(--afia-brand); }

/* ---------- Shop / catalogue ---------- */
.woocommerce span.onsale, .woocommerce-page span.onsale, .afia-onsale {
	background: var(--afia-brand) !important; color: #fff !important; border-radius: 999px !important;
	min-height: 0 !important; min-width: 0 !important; line-height: 1 !important; padding: 6px 10px !important; font-size: 13px !important; font-weight: 700;
}
.woocommerce ul.products li.product { transition: transform .25s; }
.woocommerce ul.products li.product:hover { transform: translateY(-3px); }
.woocommerce ul.products li.product a img { border-radius: 12px; }
.woocommerce ul.products li.product .price del { opacity: .55; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--afia-brand); font-weight: 700; }

/* ---------- Free delivery progress ---------- */
.afia-freeship { background: var(--afia-bg-soft); border: 1px solid var(--afia-line); border-radius: 12px; padding: 12px 16px; margin: 0 0 20px; }
.afia-freeship p { margin: 0 0 8px; font-size: 14px; }
.afia-freeship__bar { height: 8px; background: #fff; border-radius: 99px; overflow: hidden; border: 1px solid var(--afia-line); }
.afia-freeship__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--afia-brand), #ff7043); border-radius: 99px; transition: width .4s; }

/* ---------- Contact ---------- */
.afia-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 20px 0 36px; }
.afia-contact__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 14px; border: 1px solid var(--afia-line); border-radius: var(--afia-radius); color: var(--afia-ink) !important; text-decoration: none !important; background: #fff; transition: border-color .2s; }
a.afia-contact__card:hover { border-color: var(--afia-brand); }
.afia-contact__card > .afia-ico { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--afia-brand-soft); color: var(--afia-brand); }
.afia-contact__card span { font-size: 14px; color: var(--afia-muted); word-break: break-word; }

.afia-form { max-width: 720px; display: grid; gap: 14px; }
.afia-form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.afia-form input, .afia-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #d9cfd4; border-radius: 10px; font: inherit; font-weight: 400; background: #fff; }
.afia-form input:focus, .afia-form textarea:focus { outline: 2px solid var(--afia-brand-soft); border-color: var(--afia-brand); }
.afia-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .afia-form__row { grid-template-columns: 1fr; } }
.afia-form .afia-btn { justify-self: start; }
.afia-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }
.afia-alert { padding: 12px 16px; border-radius: 10px; margin: 0; }
.afia-alert--ok { background: #e8f5e9; color: #1b5e20; }
.afia-alert--err { background: #ffebee; color: #b71c1c; }

/* ---------- FAQ ---------- */
.afia-faq { max-width: 860px; }
.afia-faq__item { border: 1px solid var(--afia-line); border-radius: 12px; margin: 0 0 10px; background: #fff; }
.afia-faq__item summary { cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 600; list-style: none; position: relative; }
.afia-faq__item summary::-webkit-details-marker { display: none; }
.afia-faq__item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--afia-brand); transition: transform .2s; }
.afia-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.afia-faq__a { padding: 0 18px 16px; color: var(--afia-muted); }
.afia-faq__a p { margin: 0; }

/* Homepage section headings */
.afia-hero + .wp-block-heading, .afia-usp + .wp-block-heading, .afia-cats + .wp-block-heading, .woocommerce + .wp-block-heading { margin-top: 10px; margin-bottom: 18px; }

/* ---------- Moving ribbon ticker ---------- */
.afia-ticker {
	position: relative; overflow: hidden; margin: 0 0 22px; padding: 11px 0;
	background: linear-gradient(90deg, var(--afia-brand) 0%, #e64a7b 50%, var(--afia-brand) 100%);
	color: #fff; border-radius: var(--afia-radius);
	box-shadow: 0 4px 14px rgba(194, 24, 91, .18);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.afia-ticker__track { display: flex; width: max-content; animation: afia-ticker-scroll var(--afia-ticker-speed, 40s) linear infinite; }
.afia-ticker:hover .afia-ticker__track { animation-play-state: paused; }
.afia-ticker__group { display: flex; align-items: center; gap: 26px; padding-right: 26px; }
.afia-ticker__item { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.afia-ticker__item .afia-ico { width: 20px; height: 20px; opacity: .95; }
.afia-ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6); flex: none; }
@keyframes afia-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .afia-ticker__item { font-size: 14px; } .afia-ticker { padding: 9px 0; } }
@media (prefers-reduced-motion: reduce) {
	.afia-ticker__track { animation: none; }
	.afia-ticker { overflow-x: auto; }
}

/* ---------- Confetti background ---------- */
/* Sits behind everything and fades out across the middle, so it decorates the
   empty margins without cluttering the text column. Hidden on narrow screens,
   where the content fills the width and there is no empty area. */
.afia-confetti {
	position: fixed; left: 0; right: 0; top: -340px; height: calc(100% + 680px);
	z-index: -1; pointer-events: none; background-repeat: repeat; background-size: 340px 340px;
	opacity: .9; animation: afia-confetti-drift 70s linear infinite; will-change: transform;
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 14%, transparent 30%, transparent 70%, #000 86%, #000 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 14%, transparent 30%, transparent 70%, #000 86%, #000 100%);
}
@keyframes afia-confetti-drift { from { transform: translateY(0); } to { transform: translateY(340px); } }
@media (max-width: 1200px) { .afia-confetti { display: none; } }
@media (prefers-reduced-motion: reduce) { .afia-confetti { animation: none; } }