/* ==========================================================================
   ARFA KHUSHBOO — design tokens and base components.

   Strictly black, white and grey, in one sans family. The product creatives
   supply all the warmth and colour the page needs; the interface around them
   stays neutral so the bottles carry the eye and the prices stay legible.

   Every template in this theme builds on the classes defined here. Section
   templates should not invent new colour or spacing values — extend the
   tokens instead.
   ========================================================================== */

:root {
	/* Ink and ground — strictly monochrome. The product photography is warm
	   and gold on its own; the interface stays out of its way. */
	--ak-black:      #111111;
	--ak-ink:        #1a1a1a;
	--ak-muted:      #6e6e6e;
	--ak-line:       #e3e3e3;
	--ak-white:      #ffffff;

	/* Neutral surfaces. Named "cream" for continuity with existing templates,
	   but they are greys — there is no warm tint anywhere in the UI. */
	--ak-cream:      #f6f6f6;
	--ak-cream-deep: #ececec;

	/* Interactive accent. Also greyscale: hovers darken rather than change hue.
	   Kept under the old "gold" names so every template keeps working. */
	--ak-gold:       #404040;
	--ak-gold-soft:  #9a9a9a;
	--ak-gold-pale:  #f0f0f0;

	/* Signals — the only non-grey values, and only where meaning depends on it */
	--ak-sale:       #b3261e;
	--ak-success:    #167a3c;
	--ak-whatsapp:   #25d366;

	/* Type — one family, set plainly. Nothing decorative. */
	--ak-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--ak-serif: var(--ak-sans);

	--ak-fs-xs:  0.6875rem;  /* 11px — eyebrows, badges */
	--ak-fs-sm:  0.8125rem;  /* 13px — meta, card subtitle */
	--ak-fs-base: 0.9375rem; /* 15px — body */
	--ak-fs-md:  1.0625rem;
	--ak-fs-lg:  1.375rem;
	--ak-fs-xl:  1.875rem;
	--ak-fs-2xl: 2.5rem;
	--ak-fs-3xl: 3.25rem;

	/* Space */
	--ak-gap:      1rem;
	--ak-gutter:   1.25rem;
	--ak-section:  3.5rem;
	--ak-max:      1360px;
	--ak-max-text: 68ch;

	/* Surface */
	--ak-radius:    2px;
	--ak-radius-lg: 6px;
	--ak-shadow:    0 1px 2px rgba(17, 17, 17, .06), 0 8px 24px rgba(17, 17, 17, .06);
	--ak-ease:      cubic-bezier(.2, .6, .3, 1);

	--ak-header-h: 64px;
}

@media (min-width: 900px) {
	:root {
		--ak-gutter:  2rem;
		--ak-section: 5rem;
	}
}

/* --------------------------------------------------------------- reset-ish */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--ak-white);
	color: var(--ak-ink);
	font-family: var(--ak-sans);
	font-size: var(--ak-fs-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ak-gold); }

button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; font-weight: 600; }

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--ak-gold);
	outline-offset: 2px;
}

.ak-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ layout */

.ak-wrap {
	width: 100%;
	max-width: var(--ak-max);
	margin-inline: auto;
	padding-inline: var(--ak-gutter);
}

.ak-section { padding-block: var(--ak-section); }
.ak-section--tight { padding-block: calc(var(--ak-section) * .6); }
.ak-section--cream { background: var(--ak-cream); }

/* Section heading: uppercase label with a rule, plus an optional View all. */
.ak-sechead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ak-gap);
	margin-bottom: 1.5rem;
}

/* Heavier and larger than body copy by a clear margin: these headings are the
   only thing separating one grid of five from the next, so they carry the
   page's structure on their own.

   Tracking stays near zero. Letter-spacing exists to stop SMALL uppercase text
   from crowding; at 20px and above in a heavy weight it does the opposite —
   the word stops reading as one shape and the gaps start looking accidental. */
.ak-sechead__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: .005em;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--ak-black);
}

@media (min-width: 700px) {
	.ak-sechead__title { font-size: 1.5rem; letter-spacing: 0; }
}

@media (min-width: 1000px) {
	.ak-sechead__title { font-size: 1.75rem; letter-spacing: -.005em; }
}

.ak-sechead__link {
	flex: none;
	font-size: var(--ak-fs-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

/* Display type. Same family as everything else, just larger and tighter —
   readability over personality. */
.ak-display {
	font-family: var(--ak-sans);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* ----------------------------------------------------------------- buttons */

.ak-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;              /* touch target */
	padding: .75rem 1.5rem;
	border: 1px solid var(--ak-black);
	border-radius: var(--ak-radius);
	background: var(--ak-black);
	color: var(--ak-white);
	font-size: var(--ak-fs-sm);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	transition: background .18s var(--ak-ease), color .18s var(--ak-ease), border-color .18s var(--ak-ease);
}
.ak-btn:hover { background: var(--ak-gold); border-color: var(--ak-gold); color: var(--ak-white); }

.ak-btn--ghost { background: transparent; color: var(--ak-black); }
.ak-btn--ghost:hover { background: var(--ak-black); color: var(--ak-white); border-color: var(--ak-black); }

.ak-btn--gold { background: var(--ak-gold); border-color: var(--ak-gold); }
.ak-btn--gold:hover { background: var(--ak-black); border-color: var(--ak-black); }

.ak-btn--block { width: 100%; }
.ak-btn--sm { min-height: 38px; padding: .5rem 1rem; font-size: var(--ak-fs-xs); }

/* -------------------------------------------------------------- price bits */

.ak-price { font-weight: 700; font-size: var(--ak-fs-base); color: var(--ak-black); }
.ak-price del { color: var(--ak-muted); font-weight: 400; margin-inline-end: .4em; }
.ak-price ins { text-decoration: none; color: var(--ak-sale); }
.ak-price .woocommerce-Price-currencySymbol { font-weight: 500; }

.ak-badge {
	position: absolute;
	inset-block-start: .6rem;
	inset-inline-start: .6rem;
	z-index: 2;
	padding: .25rem .5rem;
	border-radius: var(--ak-radius);
	background: var(--ak-black);
	color: var(--ak-white);
	font-size: var(--ak-fs-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.ak-badge--sale { background: var(--ak-sale); }
.ak-badge--out  { background: var(--ak-muted); }

/* ------------------------------------------------------------ product card */

.ak-card { position: relative; display: flex; flex-direction: column; height: 100%; }

.ak-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--ak-cream);
	border-radius: var(--ak-radius);
}
.ak-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ak-ease);
}
.ak-card:hover .ak-card__media img { transform: scale(1.04); }

.ak-card__body { display: flex; flex-direction: column; gap: .25rem; padding-block: .75rem; flex: 1; }

.ak-card__title {
	margin: 0;
	font-size: var(--ak-fs-base);
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.3;
}

.ak-card__sub {
	font-size: var(--ak-fs-sm);
	color: var(--ak-muted);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ak-card__price { margin-top: auto; padding-top: .35rem; }

/* -------------------------------------------------------------- grid + rail */

/* Five across at most. Wider than that and the cards get too narrow for the
   size pills and the price to sit comfortably. */
.ak-grid {
	display: grid;
	gap: var(--ak-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px)  { .ak-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ak-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1240px) { .ak-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Opt out of the fifth column where a roomier card is wanted. */
@media (min-width: 1240px) { .ak-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Horizontal scrolling rail — the reference sites' category carousels.
   Scroll-snap on touch, arrow buttons on desktop. */
.ak-rail { position: relative; }

.ak-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(60vw, 1fr);
	gap: var(--ak-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: .5rem;
	overscroll-behavior-x: contain;
}
.ak-rail__track::-webkit-scrollbar { display: none; }
.ak-rail__track > * { scroll-snap-align: start; }

@media (min-width: 700px)  { .ak-rail__track { grid-auto-columns: minmax(0, calc(33.333% - .67rem)); } }
@media (min-width: 1000px) { .ak-rail__track { grid-auto-columns: minmax(0, calc(20% - 1.2rem)); gap: 1.5rem; } }

.ak-rail__nav {
	position: absolute;
	top: calc(50% - 3rem);
	z-index: 3;
	display: none;
	width: 40px; height: 40px;
	align-items: center; justify-content: center;
	border: 1px solid var(--ak-line);
	border-radius: 50%;
	background: var(--ak-white);
	box-shadow: var(--ak-shadow);
	transition: opacity .2s var(--ak-ease);
}
.ak-rail__nav[hidden] { display: none !important; }
.ak-rail__nav--prev { inset-inline-start: -18px; }
.ak-rail__nav--next { inset-inline-end: -18px; }
@media (min-width: 1000px) { .ak-rail__nav { display: flex; } }

/* -------------------------------------------------------------- announcement */

.ak-announce {
	background: var(--ak-black);
	color: var(--ak-white);
	font-size: var(--ak-fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}
.ak-announce__item { padding: .65rem 1rem; }
.ak-announce a { color: var(--ak-gold-soft); }

/* ------------------------------------------------------------------ header */

.ak-header { position: sticky; top: 0; z-index: 60; background: var(--ak-white); border-bottom: 1px solid var(--ak-line); }

.ak-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--ak-gap);
	min-height: var(--ak-header-h);
}

.ak-header__brand { justify-self: center; display: inline-flex; align-items: center; }
.ak-header__brand img { max-height: 40px; width: auto; }

.ak-wordmark {
	font-family: var(--ak-sans);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1;
}
.ak-wordmark small {
	display: block;
	font-family: var(--ak-sans);
	font-size: .5rem;
	font-weight: 600;
	letter-spacing: .3em;
	color: var(--ak-muted);
	margin-top: .25rem;
}

.ak-header__left, .ak-header__right { display: flex; align-items: center; gap: .35rem; }
.ak-header__right { justify-content: flex-end; }

.ak-iconbtn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	min-width: 44px; min-height: 44px;
	padding: 0 .5rem;
	border: 0; background: none; color: var(--ak-black);
	font-size: var(--ak-fs-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.ak-iconbtn:hover { color: var(--ak-gold); }
.ak-iconbtn svg { width: 20px; height: 20px; }

.ak-cartcount {
	display: inline-grid; place-items: center;
	min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 999px;
	background: var(--ak-black); color: var(--ak-white);
	font-size: 10px; font-weight: 700; letter-spacing: 0;
}

/* Primary nav */
.ak-nav { border-top: 1px solid var(--ak-line); display: none; }
@media (min-width: 900px) { .ak-nav { display: block; } }

.ak-nav__list {
	display: flex; align-items: center; justify-content: center;
	gap: 2rem; margin: 0; padding: 0; list-style: none;
}
.ak-nav__list a {
	display: inline-block; padding: .85rem 0;
	font-size: var(--ak-fs-xs); font-weight: 700;
	letter-spacing: 0.07em; text-transform: uppercase;
}

/* Mobile drawer */
.ak-drawer {
	position: fixed; inset: 0 30% 0 0; z-index: 100;
	max-width: 340px;
	background: var(--ak-white);
	transform: translateX(-100%);
	transition: transform .3s var(--ak-ease);
	overflow-y: auto;
	padding: var(--ak-gutter);
}
.ak-drawer[data-open="true"] { transform: none; }
.ak-scrim {
	position: fixed; inset: 0; z-index: 90;
	background: rgba(17,17,17,.45);
	opacity: 0; pointer-events: none;
	transition: opacity .3s var(--ak-ease);
}
.ak-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------- trust strip */

.ak-trust { border-block: 1px solid var(--ak-line); background: var(--ak-cream); }
.ak-trust__list {
	display: grid; gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0; padding: 1.75rem 0; list-style: none;
	text-align: center;
}
@media (min-width: 900px) { .ak-trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ak-trust__item strong {
	display: block; font-size: var(--ak-fs-sm); font-weight: 700;
	letter-spacing: 0.05em; text-transform: uppercase;
}
.ak-trust__item span { font-size: var(--ak-fs-sm); color: var(--ak-muted); }
.ak-trust__item svg { width: 24px; height: 24px; margin: 0 auto .5rem; color: var(--ak-gold); }

/* ---------------------------------------------------------------- whatsapp */

.ak-wa {
	position: fixed;
	inset-block-end: 1rem; inset-inline-end: 1rem;
	z-index: 80;
	display: grid; place-items: center;
	width: 54px; height: 54px;
	border-radius: 50%;
	background: var(--ak-whatsapp);
	color: #fff;
	box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.ak-wa:hover { color: #fff; transform: scale(1.05); }
.ak-wa svg { width: 30px; height: 30px; }
@media (min-width: 900px) { .ak-wa { inset-block-end: 1.5rem; inset-inline-end: 1.5rem; } }

/* ------------------------------------------------------------------ footer */

.ak-footer { background: var(--ak-black); color: #cfcbc4; padding-block: var(--ak-section) 2rem; margin-top: var(--ak-section); }
.ak-footer a { color: #cfcbc4; }
.ak-footer a:hover { color: var(--ak-gold-soft); }
.ak-footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 900px) { .ak-footer__cols { grid-template-columns: 1.6fr repeat(3, minmax(0,1fr)); gap: 3rem; } }
.ak-footer h3 {
	color: var(--ak-white);
	font-size: var(--ak-fs-xs); font-weight: 700;
	letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem;
}
.ak-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; font-size: var(--ak-fs-sm); }
.ak-footer__bottom {
	margin-top: 2.5rem; padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,.14);
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
	font-size: var(--ak-fs-xs); letter-spacing: 0.04em; text-transform: uppercase;
}

/* SEO prose block */
.ak-prose { color: var(--ak-muted); font-size: var(--ak-fs-sm); line-height: 1.75; }
.ak-prose h2, .ak-prose h3 { color: var(--ak-ink); font-size: var(--ak-fs-base); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2rem; }
.ak-prose p { margin: 0 0 1rem; }

/* ----------------------------------------------------------------- utility */

.ak-hide-desktop { }
@media (min-width: 900px) { .ak-hide-desktop { display: none !important; } }
.ak-hide-mobile { display: none !important; }
@media (min-width: 900px) { .ak-hide-mobile { display: revert !important; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------- page layout */

.ak-page--wide { max-width: none; }

.ak-prose.ak-page {
	max-width: var(--ak-max-text);
	margin-inline: auto;
}

.ak-page__title {
	font-size: var(--ak-fs-xl);
	color: var(--ak-ink);
	letter-spacing: 0;
	text-transform: none;
	margin-bottom: 1.5rem;
}

/* ------------------------------------------------------- touch target sizes

   Link lists default to the height of their text — around 16px — which is
   below the 24px minimum in WCAG 2.2 target size and well below what is
   comfortable on a phone. These are the lists that were failing. */

.ak-drawer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}

.ak-drawer__list a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding-block: .25rem;
	border-bottom: 1px solid var(--ak-line);
	font-size: var(--ak-fs-base);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Nested category lists inside the drawer. */
.ak-drawer__list .sub-menu {
	margin: 0 0 0 .75rem;
	padding: 0;
	list-style: none;
}
.ak-drawer__list .sub-menu a {
	min-height: 44px;
	font-size: var(--ak-fs-sm);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ak-muted);
}

.ak-footer ul a,
.ak-footer__bottom a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

@media (max-width: 899px) {
	.ak-footer ul a { min-height: 44px; }
}

/* The social icon was a bare 22px anchor. */
.ak-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-inline-start: -10px;   /* keep the glyph optically aligned left */
}
.ak-footer__social svg { width: 22px; height: 22px; }

/* Standalone UI controls that render at text height. WCAG 2.2 target size
   exempts links inside a sentence, so prose links are left alone — these are
   all buttons-in-link-clothing that a thumb has to hit. */
.ak-sechead__link,
.ak-cart__continue,
.woocommerce a.shipping-calculator-button,
.woocommerce a.reset_variations,
.woocommerce-product-gallery__trigger,
.woocommerce-form-coupon-toggle a.showcoupon,
.woocommerce-info a.showcoupon {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

@media (max-width: 899px) {
	.ak-sechead__link,
	.ak-cart__continue,
	.woocommerce a.shipping-calculator-button,
	.woocommerce a.reset_variations,
	.woocommerce-form-coupon-toggle a.showcoupon,
	.woocommerce-info a.showcoupon {
		min-height: 44px;
	}
}

/* The gallery zoom trigger is an absolutely positioned overlay, so it needs a
   box rather than just a min-height. */
.woocommerce-product-gallery__trigger {
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 40px;
}