/* ==========================================================================
   SDP — Layout: container, site header, navigation, footer, sections
   ========================================================================== */

.sdp-container {
	inline-size: min(100% - (var(--sdp-gutter) * 2), var(--sdp-container));
	margin-inline: auto;
}
.sdp-container--narrow { --sdp-container: 820px; }
.sdp-container--wide   { --sdp-container: 1440px; }

.sdp-section { padding-block: var(--sdp-section-y); }
.sdp-section--tight { padding-block: calc(var(--sdp-section-y) * .6); }

.sdp-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sdp-4);
	margin-bottom: var(--sdp-8);
}
.sdp-section__title { margin: 0; font-size: var(--sdp-text-2xl); }
.sdp-section__lede  { margin: var(--sdp-2) 0 0; max-inline-size: 52ch; }

/* Reusable auto-fit grid: --min sets the smallest acceptable column. */
.sdp-grid {
	display: grid;
	gap: var(--sdp-5);
	grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 15rem), 100%), 1fr));
}

/* ==========================================================================
   Site header — a floating clay pill that shrinks on scroll
   ========================================================================== */

.sdp-header {
	position: sticky;
	top: 0;
	z-index: var(--sdp-z-header);
	padding-block: var(--sdp-4);
	transition: padding var(--sdp-dur) var(--sdp-ease-out);
}
.sdp-header.is-stuck { padding-block: var(--sdp-2); }

.sdp-header__bar {
	display: flex;
	align-items: center;
	gap: var(--sdp-4);
	padding: var(--sdp-3) var(--sdp-3) var(--sdp-3) var(--sdp-5);
	border-radius: var(--sdp-r-pill);
	background: rgba(255, 255, 255, .86);
	backdrop-filter: blur(14px) saturate(1.25);
	-webkit-backdrop-filter: blur(14px) saturate(1.25);
	box-shadow: var(--sdp-clay-md);
	transition: box-shadow var(--sdp-dur) var(--sdp-ease-out);
}
.sdp-header.is-stuck .sdp-header__bar { box-shadow: var(--sdp-clay-lg); }

/* --- Branding ------------------------------------------------------------ */
.sdp-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sdp-3);
	text-decoration: none;
	flex: 0 0 auto;
}
.sdp-brand__mark { inline-size: 2.75rem; block-size: 2.75rem; flex: 0 0 auto; }
.sdp-brand__mark img,
.sdp-brand__mark svg { inline-size: 100%; block-size: 100%; object-fit: contain; }
.sdp-brand__text { display: grid; line-height: 1; }
.sdp-brand__name {
	font-family: var(--sdp-font-head);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--sdp-ink);
	letter-spacing: -.02em;
}
.sdp-brand__tag {
	font-family: var(--sdp-font-head);
	font-size: .58rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sdp-teal-600);
	margin-top: .18rem;
}

/* --- Primary navigation --------------------------------------------------- */
.sdp-nav { margin-inline: auto; }
.sdp-nav ul {
	display: flex;
	align-items: center;
	gap: var(--sdp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sdp-nav li { margin: 0; position: relative; }
.sdp-nav a {
	display: block;
	padding: var(--sdp-2) var(--sdp-4);
	border-radius: var(--sdp-r-pill);
	font-family: var(--sdp-font-head);
	font-size: .9375rem;
	font-weight: 500;
	color: var(--sdp-ink-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--sdp-dur-fast) var(--sdp-ease-out), color var(--sdp-dur-fast) var(--sdp-ease-out);
}
.sdp-nav a:hover { background: var(--sdp-purple-050); color: var(--sdp-purple-600); }

.sdp-nav .current-menu-item > a,
.sdp-nav .current_page_item > a,
.sdp-nav .current-menu-ancestor > a {
	color: var(--sdp-ink);
	font-weight: 600;
}
/* The underline on the active item, as in the mockup */
.sdp-nav .current-menu-item > a::after,
.sdp-nav .current_page_item > a::after {
	content: "";
	display: block;
	block-size: 3px;
	inline-size: 60%;
	margin: .35rem auto 0;
	border-radius: var(--sdp-r-pill);
	background: var(--sdp-purple);
}

/* Dropdowns */
.sdp-nav .sub-menu {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: calc(100% + .65rem);
	min-inline-size: 13rem;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	padding: var(--sdp-3);
	border-radius: var(--sdp-r-lg);
	background: var(--sdp-white);
	box-shadow: var(--sdp-clay-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--sdp-dur) var(--sdp-ease-out), transform var(--sdp-dur) var(--sdp-ease-squish), visibility var(--sdp-dur);
}
.sdp-nav li:hover > .sub-menu,
.sdp-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.sdp-nav .sub-menu a { padding: var(--sdp-2) var(--sdp-3); border-radius: var(--sdp-r-sm); }
.sdp-nav .sub-menu .sub-menu { inset-block-start: 0; inset-inline-start: calc(100% + .5rem); }

/* --- Header actions (search / cart / login) ------------------------------- */
.sdp-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sdp-2);
	flex: 0 0 auto;
	margin-inline-start: auto;
}

.sdp-iconbtn {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	padding: 0;
	border: 0;
	cursor: pointer;
	border-radius: 50%;
	background: var(--sdp-white);
	color: var(--sdp-ink);
	box-shadow: var(--sdp-clay-sm);
	transition: transform var(--sdp-dur) var(--sdp-ease-squish), box-shadow var(--sdp-dur) var(--sdp-ease-out);
}
.sdp-iconbtn:hover,
.sdp-iconbtn:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--sdp-clay-hover);
	color: var(--sdp-purple-600);
}
.sdp-iconbtn:active {
	transform: translateY(1px) scale(.94);
	box-shadow: var(--sdp-clay-pressed);
	transition-duration: var(--sdp-dur-fast);
}
.sdp-iconbtn svg { inline-size: 1.25rem; block-size: 1.25rem; }

.sdp-cart-count {
	position: absolute;
	inset-block-start: -.2rem;
	inset-inline-end: -.2rem;
	min-inline-size: 1.25rem;
	block-size: 1.25rem;
	padding-inline: .28rem;
	display: grid;
	place-items: center;
	border-radius: var(--sdp-r-pill);
	background: var(--sdp-pink);
	color: var(--sdp-white);
	font-family: var(--sdp-font-head);
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 3px 7px rgba(255, 122, 174, .5);
}
.sdp-cart-count[data-count="0"] { display: none; }

/* --- Header search drawer -------------------------------------------------- */
.sdp-searchdrawer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--sdp-dur) var(--sdp-ease-out);
}
.sdp-searchdrawer[data-open="true"] { grid-template-rows: 1fr; }
.sdp-searchdrawer__inner { overflow: hidden; }
.sdp-searchdrawer form {
	display: flex;
	gap: var(--sdp-2);
	margin-top: var(--sdp-3);
	padding: var(--sdp-3);
	border-radius: var(--sdp-r-pill);
	background: var(--sdp-white);
	box-shadow: var(--sdp-clay-md);
}
.sdp-searchdrawer input[type="search"] { box-shadow: none; background: transparent; }

/* --- Mobile menu ---------------------------------------------------------- */
.sdp-burger { display: none; }
.sdp-overlay { display: none; }

@media (max-width: 1080px) {
	.sdp-burger { display: grid; }

	.sdp-nav {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: var(--sdp-z-drawer);
		inline-size: min(88vw, 22rem);
		margin: 0;
		padding: 6rem var(--sdp-6) var(--sdp-8);
		overflow-y: auto;
		background: var(--sdp-surface);
		border-start-start-radius: var(--sdp-r-2xl);
		border-end-start-radius: var(--sdp-r-2xl);
		box-shadow: -18px 0 50px rgba(var(--sdp-clay-tint), .22);
		transform: translateX(102%);
		visibility: hidden;
		transition: transform var(--sdp-dur-slow) var(--sdp-ease-squish), visibility var(--sdp-dur-slow);
	}
	.sdp-nav[data-open="true"] { transform: translateX(0); visibility: visible; }

	.sdp-nav ul { flex-direction: column; align-items: stretch; gap: var(--sdp-1); }
	.sdp-nav a { padding: var(--sdp-3) var(--sdp-4); font-size: 1.0625rem; }
	.sdp-nav .current-menu-item > a::after { margin-inline: 0; }

	.sdp-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: var(--sdp-purple-050);
		margin-block: var(--sdp-1);
	}

	.sdp-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: var(--sdp-z-overlay);
		background: rgba(59, 48, 114, .38);
		backdrop-filter: blur(3px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--sdp-dur) var(--sdp-ease-out), visibility var(--sdp-dur);
	}
	.sdp-overlay[data-open="true"] { opacity: 1; visibility: visible; }
}

@media (max-width: 640px) {
	.sdp-header__bar { padding-inline: var(--sdp-3); }
	.sdp-brand__name { font-size: 1.1rem; }
	.sdp-brand__tag  { font-size: .52rem; letter-spacing: .16em; }
	.sdp-header__login-label { display: none; }
}

/* ==========================================================================
   Site footer — purple clay slab with a scalloped wave on top
   ========================================================================== */

.sdp-footer { margin-top: var(--sdp-16); color: rgba(255, 255, 255, .82); }

.sdp-footer__wave { color: var(--sdp-purple); line-height: 0; }

.sdp-footer__body {
	background: linear-gradient(165deg, #7A6DEC 0%, var(--sdp-purple) 45%, var(--sdp-purple-700) 100%);
	padding-block: var(--sdp-12) var(--sdp-8);
}

.sdp-footer__grid {
	display: grid;
	gap: var(--sdp-8);
	grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
}
@media (max-width: 960px) { .sdp-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sdp-footer__grid { grid-template-columns: 1fr; } }

.sdp-footer h2, .sdp-footer h3, .sdp-footer h4 { color: var(--sdp-white); }
.sdp-footer__heading { font-size: var(--sdp-text-lg); margin-bottom: var(--sdp-4); }
.sdp-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.sdp-footer a:hover { color: var(--sdp-white); text-decoration: underline; }

.sdp-footer .sdp-brand__name { color: var(--sdp-white); }
.sdp-footer .sdp-brand__tag  { color: var(--sdp-sky); }

.sdp-footer__script {
	font-family: var(--sdp-font-script);
	font-size: var(--sdp-text-lg);
	color: rgba(255, 255, 255, .9);
	margin-top: var(--sdp-4);
	max-inline-size: 26ch;
}

.sdp-footer ul { list-style: none; margin: 0; padding: 0; }
.sdp-footer li + li { margin-top: var(--sdp-2); }

.sdp-footer__contact li { display: flex; align-items: flex-start; gap: var(--sdp-3); }
.sdp-footer__contact svg {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	flex: 0 0 auto;
	margin-top: .28rem;
	color: var(--sdp-sky);
}

.sdp-footer__follow {
	margin: var(--sdp-5) 0 0;
	font-family: var(--sdp-font-head);
	font-size: var(--sdp-text-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.sdp-social { display: flex; gap: var(--sdp-3); margin-top: var(--sdp-3); }
.sdp-social a {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	color: var(--sdp-white);
	box-shadow: 5px 7px 14px rgba(40, 30, 90, .32), inset 2px 3px 6px rgba(255, 255, 255, .35), inset -3px -4px 8px rgba(0, 0, 0, .18);
	transition: transform var(--sdp-dur) var(--sdp-ease-squish);
}
.sdp-social a:hover { transform: translateY(-4px) rotate(-6deg); }
.sdp-social svg { inline-size: 1.3rem; block-size: 1.3rem; }
.sdp-social__facebook  { background: linear-gradient(150deg, #5B8DEF, #2C63C9); }
.sdp-social__instagram { background: linear-gradient(150deg, #FEC163, #E1306C 55%, #A62BB0); }
.sdp-social__whatsapp  { background: linear-gradient(150deg, #4BE58A, #12A44C); }
.sdp-social__youtube   { background: linear-gradient(150deg, #FF6B6B, #C9202B); }

.sdp-footer__base {
	margin-top: var(--sdp-10);
	padding-top: var(--sdp-5);
	border-top: 1px solid rgba(255, 255, 255, .18);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sdp-3);
	justify-content: space-between;
	align-items: center;
	font-size: var(--sdp-text-sm);
}

/* ==========================================================================
   Trust strip — sits on the cream ground above the footer wave, so it must
   opt out of the footer's white text colour.
   ========================================================================== */

.sdp-proof {
	display: grid;
	gap: var(--sdp-4);
	grid-template-columns: minmax(13rem, 1.2fr) repeat(3, minmax(9rem, 1fr));
	align-items: stretch;
	padding-bottom: var(--sdp-10);
	color: var(--sdp-ink-soft);
}
@media (max-width: 980px) { .sdp-proof { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sdp-proof { grid-template-columns: 1fr; } }

.sdp-proof > * {
	display: flex;
	align-items: center;
	gap: var(--sdp-4);
	padding: var(--sdp-4) var(--sdp-5);
	border-radius: var(--sdp-r-xl);
	background: var(--sdp-white);
	text-decoration: none;
	color: inherit;
}
.sdp-proof .clay-icon { --clay-icon-size: 3rem; }

/* The rating card becomes a link once a reviews URL is set. Without this it
   would inherit the footer's white link colour and vanish against the card. */
.sdp-proof a { color: inherit; text-decoration: none; }
.sdp-proof a:hover { color: inherit; text-decoration: none; }

.sdp-proof__rating-body { display: grid; gap: .15rem; }

.sdp-proof__score {
	font-family: var(--sdp-font-head);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--sdp-ink);
}

.sdp-proof__count,
.sdp-proof__text {
	display: block;
	font-size: var(--sdp-text-sm);
	color: var(--sdp-ink-faint);
	line-height: 1.35;
}

.sdp-proof__title {
	display: block;
	font-family: var(--sdp-font-head);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--sdp-ink);
	line-height: 1.3;
}

/* Tints come from each badge's own modifier class (see sdp_trust_badges()),
   not from nth-child — the rating card renders as <a> or <div> depending on
   whether a reviews URL is set, which would shift every positional match. */

/* --- Trust strip inside the purple footer ----------------------------------
   Frosted glass rather than white clay: on a saturated ground, white cards
   read as a separate section pasted on top, which is exactly why the strip
   was being missed when it sat above the wave.
   -------------------------------------------------------------------------- */
.sdp-proof--footer {
	color: rgba(255, 255, 255, .8);
	padding-bottom: var(--sdp-8);
	margin-bottom: var(--sdp-8);
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.sdp-proof--footer > * {
	background: rgba(255, 255, 255, .10);
	backdrop-filter: blur(8px) saturate(1.2);
	-webkit-backdrop-filter: blur(8px) saturate(1.2);
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow:
		6px 10px 22px rgba(28, 20, 66, .28),
		inset 1px 2px 5px rgba(255, 255, 255, .20);
}
.sdp-proof--footer > *:hover {
	background: rgba(255, 255, 255, .16);
	box-shadow:
		10px 16px 30px rgba(28, 20, 66, .34),
		inset 1px 2px 5px rgba(255, 255, 255, .26);
}

.sdp-proof--footer .sdp-proof__score,
.sdp-proof--footer .sdp-proof__title { color: var(--sdp-white); }

.sdp-proof--footer .sdp-proof__count,
.sdp-proof--footer .sdp-proof__text { color: rgba(255, 255, 255, .66); }

.sdp-proof--footer .sdp-stars__track { color: rgba(255, 255, 255, .26); }

.sdp-proof--footer .clay-icon {
	box-shadow:
		3px 5px 10px rgba(20, 14, 50, .32),
		inset 2px 2px 5px rgba(255, 255, 255, .45);
}

/* --- Footer actions --------------------------------------------------------
   Get directions / Call / WhatsApp — the three things a local shopper does.
   -------------------------------------------------------------------------- */
.sdp-footer__actions {
	display: grid;
	gap: var(--sdp-2);
	margin-bottom: var(--sdp-4);
}

.sdp-footer__action {
	display: inline-flex;
	align-items: center;
	gap: var(--sdp-3);
	padding: .6rem .9rem;
	border-radius: var(--sdp-r-pill);
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .14);
	font-family: var(--sdp-font-head);
	font-size: var(--sdp-text-sm);
	font-weight: 600;
	transition:
		background var(--sdp-dur) var(--sdp-ease-out),
		transform var(--sdp-dur) var(--sdp-ease-squish);
}
.sdp-footer__action svg { inline-size: 1.1rem; block-size: 1.1rem; flex: 0 0 auto; color: var(--sdp-sky); }

/* Beats `.sdp-footer a:hover`, which would otherwise underline the pill. */
.sdp-footer .sdp-footer__action:hover {
	background: rgba(255, 255, 255, .18);
	color: var(--sdp-white);
	text-decoration: none;
	transform: translateX(3px);
}
.sdp-footer .sdp-footer__action:active { transform: translateX(1px) scale(.98); }

/* --- Fractional star row --------------------------------------------------
   Two identical rows stacked; the coloured one is clipped to the rating, so
   4.8 of 5 shows as 96% rather than rounding up to five full stars.
   -------------------------------------------------------------------------- */
.sdp-stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	inline-size: max-content;
}
.sdp-stars__track,
.sdp-stars__fill { display: flex; gap: .08rem; }
.sdp-stars__track { color: var(--sdp-purple-100); }
.sdp-stars__fill {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: var(--sdp-star-fill, 100%);
	overflow: hidden;
	color: var(--sdp-amber);
}
.sdp-stars svg { inline-size: .95rem; block-size: .95rem; flex: 0 0 auto; }

/* --- Live open / closed pill ---------------------------------------------- */
.sdp-footer__hours > span { display: grid; gap: .2rem; }

.sdp-footer__hours-line {
	display: block;
	font-size: var(--sdp-text-sm);
	line-height: 1.4;
	color: rgba(255, 255, 255, .72);
}

.sdp-status {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .18rem .6rem .18rem .5rem;
	margin-inline-end: .4rem;
	border-radius: var(--sdp-r-pill);
	background: rgba(255, 255, 255, .14);
	font-family: var(--sdp-font-head);
	font-size: var(--sdp-text-xs);
	font-weight: 700;
	letter-spacing: .03em;
	color: rgba(255, 255, 255, .85);
	vertical-align: middle;
}
.sdp-status.is-open { background: rgba(69, 216, 184, .22); color: #C9F5E9; }

.sdp-status__dot {
	inline-size: .5rem;
	block-size: .5rem;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}
.sdp-status.is-open .sdp-status__dot { animation: sdp-pulse 2.4s ease-in-out infinite; }

@keyframes sdp-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(69, 216, 184, .18); }
	50%      { box-shadow: 0 0 0 6px rgba(69, 216, 184, .05); }
}
@media (prefers-reduced-motion: reduce) {
	.sdp-status.is-open .sdp-status__dot { animation: none; }
}

.sdp-status__detail {
	font-size: var(--sdp-text-xs);
	color: rgba(255, 255, 255, .6);
}

/* --- Floating WhatsApp button -------------------------------------------- */
.sdp-fab {
	position: fixed;
	inset-block-end: var(--sdp-5);
	inset-inline-end: var(--sdp-5);
	z-index: 90;
	display: grid;
	place-items: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: 50%;
	color: var(--sdp-white);
}
.sdp-fab svg { inline-size: 1.75rem; block-size: 1.75rem; }