/* AK Perfumery: header, footer, homepage, pages and shop.
   Laid out after thebeautyboxgh.com and set in its type: Abril Fatface for section titles, Dosis
   for the menu, labels, product names and text, heavy Montserrat for the big hero word. Black,
   white and warm greys throughout; purple only for buttons, icons, badges and counts, plus the
   lilac of the hero's big word. Logo: the client's own, traced to SVG (assets/logo). */

:root {
	--ak-ink: #141414;
	--ak-text: #3E3E3E;
	--ak-muted: #8A8580;
	--ak-bone: #F7F6F4;
	--ak-sand: #EFEDEA;
	--ak-line: #E7E4E0;
	--ak-blush: #F7F6F4;
	--ak-stripe: #E2DED9;
	--ak-berry: #7E5FA6;
	--ak-berry-deep: #5E437F;
	--ak-tint: #F1ECF7;
	--ak-lilac: #141414;
	--ak-lilac-soft: #977BB6;
	--ak-plum: #141414;
	--ak-serif: "Abril Fatface", Georgia, "Times New Roman", serif;
	--ak-sans: "Dosis", "Helvetica Neue", Arial, sans-serif;
	--ak-hero: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--ak-gutter: clamp(16px, 3.4vw, 48px);
	--ak-ease: cubic-bezier(.2, .7, .2, 1);
}

/* XStore's "bordered" layout draws a grey frame around the page; the design runs edge to edge. */
body.akh-on .body-border-left,
body.akh-on .body-border-top,
body.akh-on .body-border-right,
body.akh-on .body-border-bottom { display: none !important; }
body.akh-on.bordered { border: 0 !important; }

/* The theme's own header and footer are replaced by ours. */
body.akh-on .header-wrapper,
body.akh-on .mobile-header-wrapper,
body.akh-on .sticky-header-wrapper,
body.akh-on .et-mobile-panel-wrapper,
body.akh-on .site-header:not(.akh) { display: none !important; }
body.akf-on .et-footers-wrapper,
body.akf-on footer.prefooter,
body.akf-on .site-footer:not(.akf) { display: none !important; }
body:has(.ak-home) .page-heading,
body:has(.ak-home) .breadcrumb-trail,
body:has(.ak-page) .page-heading,
body:has(.ak-page) .breadcrumb-trail { display: none !important; }

/* Cart, checkout and account pages: XStore adds its widget sidebar beside them. Full width instead. */
body.woocommerce-cart .sidebar,
body.woocommerce-checkout .sidebar,
body.woocommerce-account .sidebar { display: none !important; }
body.woocommerce-cart .content.col-md-9,
body.woocommerce-checkout .content.col-md-9,
body.woocommerce-account .content.col-md-9 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; float: none !important; left: auto !important; right: auto !important; margin-left: 0 !important; }

/* Checkout: the country field stays in the form (set to Ghana) but is not shown. */
.woocommerce-checkout .ak-hidden-field { display: none !important; }

/* Our pieces share one small reset so theme styles can't reach them. */
.ak-ui, .ak-ui * { box-sizing: border-box; }
.ak-ui { font-variant-numeric: lining-nums; font-family: var(--ak-sans); font-size: 16px; color: var(--ak-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ak-ui a, .ak-ui a:hover, .ak-ui a:focus { color: inherit; text-decoration: none; box-shadow: none; }
.ak-ui ul { list-style: none; margin: 0; padding: 0; }
.ak-ui li { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
.ak-ui li::before { content: none !important; }
.ak-ui h1, .ak-ui h2, .ak-ui h3, .ak-ui p { margin: 0; padding: 0; color: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; }
.ak-ui button {
	appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0;
	color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; line-height: 1; min-height: 0; height: auto; width: auto; cursor: pointer;
}
.ak-ui svg { display: block; width: 22px; height: 22px; flex: none; }
.ak-ui img { display: block; max-width: 100%; height: auto; }
.ak-ui a:focus-visible, .ak-ui button:focus-visible, .ak-ui input:focus-visible, .ak-ui select:focus-visible { outline: 2px solid var(--ak-berry); outline-offset: 3px; }
::selection { background: var(--ak-stripe); color: var(--ak-ink); }
/* Screen reader only text and the hidden anti-spam fields. Theme input rules (width: 100%) must not
   reach them: a full width hidden field pushed phones sideways. */
.ak-sr, .ak-ui input.ak-sr { position: absolute !important; width: 1px !important; min-width: 0 !important; max-width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }

/* Nothing may widen the page on phones. */
body.akh-on { overflow-x: hidden; }
@supports (overflow: clip) { body.akh-on { overflow-x: clip; } }

/* The two type voices. */
.ak-ui .akx-display { font-variant-numeric: lining-nums; font-family: var(--ak-serif); font-weight: 400; letter-spacing: .005em; line-height: 1.12; color: var(--ak-ink); text-wrap: balance; }
.ak-ui .akx-eyebrow, .ak-ui .akp-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ak-muted); }

/* The wordmark, set in type until a logo file arrives: a large AK over a spaced PERFUMERY. */
.ak-word { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: inherit; white-space: nowrap; }
.ak-word b { font-family: var(--ak-serif); font-weight: 600; font-size: 1em; letter-spacing: -.01em; line-height: .9; }
.ak-word i { font-family: var(--ak-sans); font-style: normal; font-weight: 600; text-transform: uppercase; color: inherit !important; font-size: .2em; letter-spacing: .62em; margin: .55em 0 0 .62em; color: var(--ak-berry); }
.ak-word-name { flex-direction: row; align-items: baseline; gap: .4em; }
.ak-word-name i { margin: 0; font-size: .34em; letter-spacing: .42em; }
.ak-word-mark b { font-size: 1em; }

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

html.ak-lock, html.ak-lock body { overflow: hidden; }
body.akh-on { padding-top: var(--akh-pad, var(--akh-h, 150px)) !important; }

.akh-wrap {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 9990;
	transition: transform .35s ease;
}
.akh-wrap.is-scrolled { transform: translateY(calc(-1 * var(--aka-h, 0px))); }

/* The notice bar, as on the inspiration: delivery details first, and a cross to close it. */
.akh-announce { position: relative; background: var(--ak-ink); color: #FFFFFF; text-align: center; padding: 9px 52px; }
.akh-announce p { font-size: 13px; font-weight: 500; letter-spacing: .04em; line-height: 1.5; }
.akh-announce a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45) !important; }
.ak-ui .akh-announce-x { position: absolute; top: 50%; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-top: -17px; color: #FFFFFF; opacity: .8; }
.ak-ui .akh-announce-x:hover { opacity: 1; }
.ak-ui .akh-announce-x svg { width: 16px; height: 16px; }

.akh { background: #FFFFFF; color: var(--ak-ink); border-bottom: 1px solid transparent; transition: background-color .35s ease, color .35s ease, border-color .35s ease; }

/* One row, as on the inspiration: MENU and Need help? / the logo / search, account and the cart. */
.akh-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "left logo right";
	align-items: center;
	column-gap: 16px;
	max-width: 1600px;
	height: 100px;
	margin: 0 auto;
	padding: 0 var(--ak-gutter);
	transition: height .35s ease;
}
.akh-wrap.is-scrolled .akh-bar { height: 76px; }
.akh-left { grid-area: left; display: flex; align-items: center; gap: 26px; justify-self: start; }
.akh-right { grid-area: right; display: flex; align-items: center; gap: 4px; justify-self: end; margin-right: -8px; }
.akh-bar > .akh-logo { grid-area: logo; justify-self: center; }

.ak-ui .akh-icon { width: 42px !important; height: 42px !important; min-width: 0; min-height: 0; padding: 0 !important; }
.akh-icon { position: relative; display: inline-flex !important; align-items: center; justify-content: center; width: 42px; height: 42px; color: inherit; transition: color .2s ease; }
.ak-ui .akh-icon:hover { color: var(--ak-berry); }
.ak-ui .akh-icon svg { width: 23px; height: 23px; }
.akh-count { position: absolute; bottom: 5px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--ak-berry); color: #FFFFFF; font-family: var(--ak-sans); font-size: 11px; font-weight: 600; line-height: 17px; text-align: center; }
.akh-count:empty { display: none; }

/* MENU: a purple square with the lines, joined to a white tab with the word. */
.ak-ui .akh-menu { display: inline-flex; align-items: stretch; height: 42px; background: #FFFFFF; box-shadow: 0 6px 18px rgba(20, 20, 20, .1); transition: box-shadow .2s ease; }
.ak-ui .akh-menu:hover { box-shadow: 0 8px 22px rgba(20, 20, 20, .16); }
.akh-menu-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; background: var(--ak-berry); color: #FFFFFF; }
.ak-ui .akh-menu-ico svg { width: 20px; height: 20px; }
.akh-menu-txt { display: inline-flex; align-items: center; padding: 0 22px; font-family: var(--ak-sans); font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ak-ink); }

/* "Need help?" and the number, as on the inspiration. */
.akh-help { display: inline-flex; align-items: center; gap: 12px; color: var(--ak-ink); }
.ak-ui .akh-help svg { width: 26px; height: 26px; color: var(--ak-ink); }
.akh-help span { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.akh-help small { font-family: var(--ak-sans); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ak-muted); }
.akh-help b { font-family: var(--ak-sans); font-size: 16px; font-weight: 600; letter-spacing: .08em; }
.ak-ui .akh-help:hover b { color: var(--ak-berry); }

/* The cart: its total above CART, then the bag with the count. */
.akh-bag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--ak-ink); }
.akh-bag-text { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1; }
.akh-total { font-family: var(--ak-sans); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--ak-muted); white-space: nowrap; }
.akh-bag-text b { font-family: var(--ak-sans); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ak-ui .akh-bag:hover b, .ak-ui .akh-bag:hover .akh-icon { color: var(--ak-berry); }

/* The logo: AK with the Perfumery script, black on white. */
.ak-ui .akh-logo { display: inline-flex; align-items: center; justify-content: center; color: var(--ak-ink); }
.akh-logo img { max-height: 72px; width: auto; }
.ak-ui .akh-logo { --ak-logo-2: var(--ak-berry); }
.ak-ui .akh-logo .ak-logo-wide { width: auto; height: 62px; transition: height .35s ease; }
.ak-ui .akh-wrap.is-scrolled .akh-logo .ak-logo-wide { height: 48px; }
.akh-wrap.is-scrolled .akh { border-bottom-color: var(--ak-line); }
.ak-ui .akh-bar .ak-word-lockup { font-size: 44px; transition: font-size .35s ease; }

/* Over a homepage hero: a clear bar with white type, until the page scrolls. */
html.akh-over .akh-wrap:not(.is-scrolled) .akh { background: transparent; color: #FFFFFF; border-bottom-color: rgba(255, 255, 255, .22); }
html.akh-over .akh-wrap:not(.is-scrolled) :is(.akh-logo, .akh-help, .akh-bag, .akh-total, .akh-help small) { color: #FFFFFF; }
html.akh-over .akh-wrap:not(.is-scrolled) .ak-word i { color: #FFFFFF; }


/* Drawer (phones and tablets) */
.akh-drawer { position: fixed; inset: 0; z-index: 9995; background: rgba(20, 20, 20, 0); transition: background-color .3s ease; }
.akh-drawer.is-open { background: rgba(20, 20, 20, .45); }
.akh-drawer[hidden], .akh-search[hidden] { display: none !important; }
.akh-panel {
	position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 400px); overflow-y: auto;
	display: flex; flex-direction: column; background: #FFFFFF; color: var(--ak-ink);
	padding: calc(8px + var(--wp-admin--admin-bar--height, 0px)) 0 calc(24px + env(safe-area-inset-bottom));
	transform: translateX(-100%); transition: transform .34s var(--ak-ease);
}
.akh-drawer.is-open .akh-panel { transform: none; }
.akh-panel:focus { outline: none; }
.akh-panel-top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 10px 0 22px; border-bottom: 1px solid var(--ak-line); }
.ak-ui .akh-panel-top .ak-word { font-size: 26px; }
.ak-ui .akh-panel-top .ak-logo { width: auto; height: 44px; }
.akh-panel-nav { display: flex; flex-direction: column; padding: 10px 0; }
.akh-panel-nav > a, .akh-panel-group summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; font-family: var(--ak-serif); font-size: 24px; line-height: 1.15; color: var(--ak-ink); cursor: pointer; list-style: none; transition: color .2s ease; }
.akh-panel-group summary::-webkit-details-marker { display: none; }
.akh-panel-nav > a:hover, .akh-panel-group summary:hover { color: var(--ak-berry); }
.ak-ui .akh-panel-nav svg { width: 18px; height: 18px; color: var(--ak-berry); transition: transform .2s ease; }
.akh-panel-group[open] summary svg { transform: rotate(180deg); }
.akh-panel-group a { display: block; padding: 9px 22px 9px 38px; font-size: 15px; color: var(--ak-text); }
.akh-panel-group[open] { padding-bottom: 8px; background: var(--ak-bone); }
.ak-ui .akh-panel-nav .is-sale { color: var(--ak-berry); }
.akh-panel-help { display: flex; flex-direction: column; margin: 6px 22px 0; padding-top: 16px; border-top: 1px solid var(--ak-line); }
.akh-panel-help a { padding: 8px 0; font-size: 14px; color: var(--ak-text); }
.akh-panel-foot { margin-top: auto; padding: 22px 22px 0; display: flex; flex-direction: column; gap: 14px; }
.akh-panel-foot > a { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--ak-ink); }
.ak-ui .akh-panel-foot > a svg { width: 18px; height: 18px; color: var(--ak-berry); }
.akh-panel-social { display: flex; gap: 8px; margin-top: 6px; }
.akh-panel-social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--ak-stripe); border-radius: 50%; color: var(--ak-berry); }
.ak-ui .akh-panel-social svg { width: 17px; height: 17px; }

/* Search */
.akh-search { position: fixed; inset: 0; z-index: 9996; background: rgba(20, 20, 20, 0); transition: background-color .25s ease; }
.akh-search.is-open { background: rgba(20, 20, 20, .38); }
.akh-search-box { background: #FFFFFF; padding: calc(28px + var(--wp-admin--admin-bar--height, 0px)) var(--ak-gutter) 34px; transform: translateY(-100%); transition: transform .3s ease; }
.akh-search.is-open .akh-search-box { transform: none; }
.akh-search form { max-width: 760px; margin: 0 auto; }
.akh-search-label { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ak-muted); }
.akh-search-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--ak-berry); color: var(--ak-ink); }
.akh-search-row > svg { color: var(--ak-berry); }
.ak-ui .akh-search-row input[type="search"] {
	flex: 1; min-width: 0; height: 58px; margin: 0; padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important;
	font-family: var(--ak-serif); font-size: 28px; color: var(--ak-ink); outline: none;
}

/* ---------- Buttons ---------- */

.ak-ui .akx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 32px; border: 1px solid transparent; font-family: var(--ak-sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.ak-ui .akx-btn svg { width: 18px; height: 18px; }
.ak-ui .akx-btn-dark { background: var(--ak-berry); border-color: var(--ak-berry); color: #FFFFFF !important; }
.ak-ui .akx-btn-dark:hover { background: var(--ak-berry-deep); border-color: var(--ak-berry-deep); }
.ak-ui .akx-btn-light { background: #FFFFFF; border-color: #FFFFFF; color: var(--ak-ink) !important; }
.ak-ui .akx-btn-light:hover { background: var(--ak-berry); border-color: var(--ak-berry); color: #FFFFFF !important; }
.ak-ui .akx-btn-ghost { border-color: rgba(255, 255, 255, .8); color: #FFFFFF !important; }
.ak-ui .akx-btn-ghost:hover { background: #FFFFFF; color: var(--ak-ink) !important; }
.ak-ui .akx-btn-line { border-color: var(--ak-berry); color: var(--ak-berry) !important; }
.ak-ui .akx-btn-line:hover { background: var(--ak-berry); color: #FFFFFF !important; }
.akx-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Homepage ---------- */

.ak-home { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; background: #FFFFFF; }
html:has(.ak-home) { overflow-x: clip; }

.akx-media, .akx-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.akx-media img { object-fit: cover; object-position: 50% 40%; max-width: none; }
/* Photos fill their whole box. Elementor (".elementor img { height: auto }") and theme rules would
   otherwise leave a photo at its natural height with empty space below. */
.ak-ui .akx-media { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; }
.ak-ui .akx-media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: cover !important; }

/* Hero. Without a photo it is a soft lilac to plum wash, so the page still opens well. */
.akx-hero { position: relative; display: flex; align-items: center; min-height: clamp(480px, calc(88svh - var(--akh-h, 150px)), 760px); background: linear-gradient(150deg, #8A8178 0%, #4A443E 60%, #1E1C1A 100%); color: #FFFFFF; overflow: hidden; }
.akx-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 20, 20, .5) 0%, rgba(20, 20, 20, .14) 45%, rgba(20, 20, 20, 0) 65%); pointer-events: none; }
.akx-hero.is-empty::after { background: none; }
.akx-hero.is-empty::before { content: ""; position: absolute; right: 8%; top: 50%; width: min(42vw, 560px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 0 0 40px rgba(255, 255, 255, .04), 0 0 0 90px rgba(255, 255, 255, .03); transform: translateY(-50%); }
.akx-hero-text { position: relative; z-index: 2; width: 100%; max-width: 1600px; margin: 0 auto; padding: 72px var(--ak-gutter); }
.ak-ui .akx-hero .akx-eyebrow { margin-bottom: 18px; color: rgba(255, 255, 255, .85); }
.ak-ui .akx-hero h1 { max-width: 660px; font-size: clamp(40px, 5vw, 76px); line-height: 1.04; color: #FFFFFF; }
.ak-ui .akx-hero .akx-sub { max-width: 460px; margin: 20px 0 34px; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .92); }
/* A hero photo from the media library sets the hero's shape, so the whole photo shows, between
   480px and 900px tall. */
.akx-hero.has-size { min-height: 0; height: clamp(480px, calc(100vw * var(--akx-h) / var(--akx-w)), 900px); }

/* The big word hero, as on thebeautyboxgh.com: the photo on white standing behind a huge word that
   runs edge to edge (assets/hero.js sizes it), small words floating around, a dark wedge in the
   corner, the small line in spaced capitals over the word on the left and a black SHOP NOW! box
   on the right. As the page opens the letters rise one by one, the photo floats up, the small line
   draws together and the box slides in; on scroll the layers move apart (hero.js). The big word
   and the floating words are the one place the lilac shows large. */
.akx-hero.is-word { display: block; min-height: 0; height: clamp(440px, 41vw, 680px); background: #FFFFFF; color: var(--ak-ink); overflow: hidden; }
.akx-hero.is-word::before, .akx-hero.is-word::after { content: none; }
.akx-hero-wedge { position: absolute; left: 0; bottom: 0; z-index: 1; width: 36%; height: 13%; background: #26251E; clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 100%); }
.ak-ui .akx-hero-photo { position: absolute; left: 50%; bottom: 0; z-index: 1; height: 100%; width: auto; max-width: 70vw; aspect-ratio: var(--akx-ratio, 1); margin: 0; transform: translateX(-50%); }
.ak-ui .akx-hero-photo img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: contain !important; object-position: 50% 100% !important; mix-blend-mode: multiply; }
/* Soft sides and top, so a photo whose background is not quite white still melts into the page. */
.akx-hero-photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%); mask-composite: intersect; }
.ak-ui .akx-hero .akx-bigword { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-width: none; margin: 0; font-family: var(--ak-hero); font-size: 18.5vw; font-weight: 800; line-height: .72; letter-spacing: -.02em; text-align: center; text-transform: uppercase; color: var(--ak-lilac-soft); white-space: nowrap; pointer-events: none; }
.akx-bigword-in { display: inline-block; padding-top: .04em; }
.akx-bigword-in > span { display: inline-block; }
.ak-ui .akx-hero-kicker { position: absolute; left: 9%; bottom: 13%; z-index: 3; max-width: 7em; font-family: var(--ak-hero); font-size: clamp(18px, 2.6vw, 42px); font-weight: 600; line-height: 1.3; letter-spacing: .5em; text-transform: uppercase; color: #000000; }
.ak-ui .akx-hero-shop { position: absolute; right: 11.5%; bottom: 11%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 32px 14px; background: #000000; color: var(--ak-lilac-soft) !important; font-family: var(--ak-hero); line-height: 1; text-transform: uppercase; }
.ak-ui .akx-hero-shop:hover { background: #1C1C1C; }
.akx-hero-shop small { font-size: clamp(12px, 1.2vw, 18px); font-weight: 500; letter-spacing: .3em; }
.akx-hero-shop b { font-size: clamp(22px, 2.6vw, 40px); font-weight: 700; letter-spacing: .08em; }
.akx-float { position: absolute; z-index: 0; font-family: var(--ak-hero); font-size: clamp(18px, 2.7vw, 42px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ak-lilac-soft); white-space: nowrap; }
.akx-float > span { display: inline-block; }
.akx-float-1 { top: 11%; left: 1.3%; }
.akx-float-2 { top: 24%; left: 11.5%; font-size: clamp(16px, 2.2vw, 34px); filter: blur(1.6px); }
.akx-float-3 { top: 1.5%; right: 1%; font-size: clamp(13px, 1.3vw, 20px); letter-spacing: .16em; }
.akx-float-4 { top: 2%; left: -1.6%; color: #CFCAC4; font-size: clamp(16px, 2vw, 30px); }
.ak-ui .akx-hero.is-word.is-empty .akx-hero-kicker { bottom: auto; top: 30%; }
.ak-ui .akx-hero.is-word.is-empty .akx-hero-shop { bottom: auto; top: 30%; }
.akx-hero.is-word.is-empty .akx-float-2 { display: none; }

/* Opening: each part plays in once hero.js marks the hero ready (fonts loaded, word sized). */
@keyframes akLetterUp { from { opacity: 0; transform: translateY(55%); } to { opacity: 1; transform: none; } }
@keyframes akPhotoUp { from { opacity: 0; transform: translate(-50%, 48px) scale(.97); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes akKicker { from { opacity: 0; letter-spacing: 1.1em; } to { opacity: 1; letter-spacing: .5em; } }
@keyframes akShopIn { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes akFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes akWedge { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes akFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes akShow { to { opacity: 1; } }
.akx-hero.is-word.is-ready .akx-bigword-in > span { animation: akLetterUp .9s calc(.15s + var(--i) * .08s) var(--ak-ease) both; }
.akx-hero.is-word.is-ready .akx-hero-photo { animation: akPhotoUp 1.2s .1s var(--ak-ease) both; }
.akx-hero.is-word.is-ready .akx-hero-kicker { animation: akKicker 1.3s .7s var(--ak-ease) both; }
.akx-hero.is-word.is-ready .akx-hero-shop { animation: akShopIn 1s .9s var(--ak-ease) both; }
.akx-hero.is-word.is-ready .akx-hero-wedge { animation: akWedge 1.1s .3s var(--ak-ease) both; }
.akx-hero.is-word.is-ready .akx-float { animation: akFadeIn 1.2s calc(1s + var(--f, 0) * .2s) ease both; }
.akx-hero.is-word.is-ready .akx-float > span { animation: akFloat 7s calc(var(--f, 0) * -1.7s) ease-in-out infinite; }
.akx-float-2 { --f: 1; }
.akx-float-3 { --f: 2; }
.akx-float-4 { --f: 3; }
/* Until hero.js runs, the parts wait unseen; if it never does, they show after three seconds. */
.ak-anim .akx-hero.is-word:not(.is-ready) > :not(.akx-bigword), .ak-anim .akx-hero.is-word:not(.is-ready) .akx-bigword-in { opacity: 0; animation: akShow 0s 3s forwards; }

/* Section heads: a centred serif title in lilac, as on the inspiration; arrows to the right. */
.akx-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 1600px; margin: 0 auto 34px; padding: 0 var(--ak-gutter); text-align: center; }
.ak-ui .akx-title { font-family: var(--ak-serif); font-weight: 400; font-size: clamp(30px, 3vw, 46px); line-height: 1.12; letter-spacing: .01em; color: var(--ak-ink); text-wrap: balance; }
.akx-head-link { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ak-ink); border-bottom: 1px solid var(--ak-berry); padding-bottom: 3px; transition: color .2s ease; }
.ak-ui .akx-head-link:hover { color: var(--ak-berry); }
.akx-head .akx-arrows { position: absolute; right: var(--ak-gutter); bottom: 0; }

/* Category tiles: the photo with a dark fade, the item count and the name in serif capitals. */
.akx-cats { padding: clamp(48px, 6vw, 88px) 0 clamp(16px, 2vw, 24px); }
.akx-cat-grid {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px;
	max-width: 1600px; margin: 0 auto; padding: 0 var(--ak-gutter) 4px;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ak-gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.akx-cat-grid::-webkit-scrollbar { display: none; }
.akx-cat { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; color: #FFFFFF; scroll-snap-align: start; background: linear-gradient(150deg, #CFC8BF 0%, #8C847A 60%, #3B3732 100%); }
.akx-cat:nth-child(3n+2) { background: linear-gradient(150deg, #E2DCD4 0%, #A39A8F 55%, #4E4943 100%); }
.akx-cat:nth-child(3n+3) { background: linear-gradient(150deg, #BDB5AB 0%, #77706A 55%, #2C2926 100%); }
.ak-ui .akx-cat, .ak-ui .akx-feature-media { color: #FFFFFF; }
.ak-ui .akx-cats.is-brands .akx-cat { color: var(--ak-ink); }
.akx-cat-img { position: absolute; inset: 0; display: block; }
.ak-ui .akx-cat-img img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: cover !important; transition: transform 1s var(--ak-ease); }
.akx-cat:hover .akx-cat-img img { transform: scale(1.05); }
.akx-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 20, 20, .72) 0%, rgba(20, 20, 20, .18) 50%, rgba(20, 20, 20, 0) 75%); pointer-events: none; }
.akx-cat-text { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.akx-cat-count { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.akx-cat-name { font-family: var(--ak-sans); font-size: clamp(20px, 1.7vw, 27px); font-weight: 700; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; }
.akx-cats .akx-progress { margin-top: 26px; }
.akx-cats.no-scroll .akx-progress, .akx-cats.no-scroll .akx-arrows { display: none; }

/* Brands: white tiles with the house's name set large, unless a logo photo is given. */
.akx-cats.is-brands { background: var(--ak-bone); padding-bottom: clamp(48px, 6vw, 88px); margin-top: clamp(24px, 3vw, 48px); }
.akx-cats.is-brands .akx-cat-grid { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
.akx-cats.is-brands .akx-cat { aspect-ratio: 16 / 9; background: #FFFFFF; color: var(--ak-ink); border: 1px solid var(--ak-line); transition: border-color .25s ease, box-shadow .25s ease; }
.akx-cats.is-brands .akx-cat:hover { border-color: var(--ak-ink); box-shadow: 0 14px 30px rgba(20, 20, 20, .08); }
.akx-cats.is-brands .akx-cat::after { content: none; }
.ak-ui .akx-cats.is-brands .akx-cat-img img { object-fit: contain !important; padding: 12% 16%; }
.akx-cats.is-brands .akx-cat-text { inset: 0; align-items: center; justify-content: center; text-align: center; }
.akx-cats.is-brands .akx-cat:not(.is-empty) .akx-cat-text { inset: auto 0 12px; }
.akx-cats.is-brands .akx-cat:not(.is-empty) .akx-cat-name { display: none; }
.akx-cats.is-brands .akx-cat-name { order: -1; font-family: var(--ak-serif); font-size: clamp(22px, 2vw, 32px); font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--ak-ink); }
.akx-cats.is-brands .akx-cat-count { color: var(--ak-muted); }

/* Brands we stock: black logos sliding slowly sideways without end; they pause under the pointer. */
.akx-brands { padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--ak-line); border-bottom: 1px solid var(--ak-line); overflow: hidden; }
.akx-marquee { display: flex; width: max-content; }
.akx-marquee-track { display: flex; align-items: center; flex: none; gap: 0; animation: akMarquee calc(var(--akx-n, 8) * 4s) linear infinite; }
.akx-marquee:hover .akx-marquee-track { animation-play-state: paused; }
.akx-marquee-track li { flex: none; padding: 0 clamp(36px, 4vw, 64px); }
.akx-brand { display: flex; align-items: center; justify-content: center; height: 64px; opacity: .78; transition: opacity .25s ease; }
.ak-ui .akx-brand:hover { opacity: 1; }
.ak-ui .akx-brand-img { width: auto !important; max-width: 220px !important; height: 56px !important; object-fit: contain; }
.akx-brand-name { font-family: var(--ak-serif); font-size: 26px; letter-spacing: .02em; color: #5A5A5A; white-space: nowrap; }
@keyframes akMarquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
	.akx-marquee { width: auto; justify-content: center; flex-wrap: wrap; }
	.akx-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
	.akx-marquee-track[aria-hidden] { display: none; }
}

/* Banners: a photo across the page with the words on top, or ("light") a bright photo with the words on its left. */
.akx-banner { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(420px, 40vw, 620px); padding: 56px var(--ak-gutter); text-align: center; color: #FFFFFF; background: linear-gradient(150deg, #4A443E 0%, #141414 100%); overflow: hidden; }
.akx-banner::after { content: ""; position: absolute; inset: 0; background: rgba(20, 20, 20, .32); }
.akx-banner.is-empty::after { content: none; }
.akx-banner-text { position: relative; z-index: 1; max-width: 640px; }
.ak-ui .akx-banner .akx-eyebrow { margin-bottom: 16px; color: rgba(255, 255, 255, .85); }
.ak-ui .akx-banner h2 { font-size: clamp(34px, 4vw, 60px); color: #FFFFFF; }
.ak-ui .akx-banner .akx-banner-line { margin: 16px auto 30px; max-width: 480px; font-size: 16px; line-height: 1.65; }
.akx-banner .akx-btns { justify-content: center; }
.ak-ui .akx-banner:not(.akx-light) .akx-btn-line { border-color: rgba(255, 255, 255, .8); color: #FFFFFF !important; }
.ak-ui .akx-banner:not(.akx-light) .akx-btn-line:hover { background: #FFFFFF; color: var(--ak-ink) !important; }
/* "light": a bright photo, or without one a lilac mist, with dark words on the left */
.akx-light { justify-content: flex-start; text-align: left; color: var(--ak-text); background: linear-gradient(120deg, var(--ak-blush) 0%, var(--ak-stripe) 100%); }
.akx-light::after { content: none; }
.akx-light.is-empty { min-height: 0; padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.akx-light .akx-banner-text { max-width: 520px; }
.akx-light .akx-btns { justify-content: flex-start; }
.ak-ui .akx-light .akx-eyebrow { color: var(--ak-muted); }
.ak-ui .akx-light h2 { color: var(--ak-ink); }
.ak-ui .akx-light .akx-banner-line { margin: 16px 0 30px; color: var(--ak-text); }
.akx-sale { background: #141414; }
.akx-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 0; padding: 0; text-align: left; background: var(--ak-plum); }
.akx-split::after { content: none; }
.akx-split-media { position: relative; min-height: clamp(480px, 46vw, 760px); overflow: hidden; background: var(--ak-sand); }
.akx-split .akx-banner-text { align-self: center; max-width: 560px; padding: clamp(48px, 7vw, 112px); }
.ak-ui .akx-split .akx-banner-line { margin: 20px 0 34px; max-width: 440px; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .86); }
.akx-split .akx-btns { justify-content: flex-start; }
.ak-ui .akx-split .akx-btn-dark { background: #FFFFFF; border-color: #FFFFFF; color: var(--ak-berry) !important; }

/* Product rows and cards: a square photo, the brand in small capitals, the name in serif
   capitals, the price and an Add to bag button, as on the inspiration. */
.akx-new { padding: clamp(48px, 6vw, 88px) 0; }
.akx-products { display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px 18px; max-width: 1600px; margin: 0 auto; padding: 0 var(--ak-gutter); }
.akx-card { display: flex; flex-direction: column; color: var(--ak-ink); }
.akx-card-img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #FFFFFF; margin-bottom: 16px; }
.ak-ui .akx-card-img img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: cover !important; transition: opacity .45s ease, transform 1s var(--ak-ease); }
.akx-card-img .akx-card-alt { opacity: 0; }
.akx-card:hover .akx-card-alt { opacity: 1; }
.akx-card:hover .akx-card-img img:first-child { transform: scale(1.04); }
.akx-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--ak-bone) 0%, var(--ak-sand) 100%); color: var(--ak-stripe); }
.ak-ui .akx-noimg .ak-word { font-size: 64px; color: var(--ak-stripe); }
.akx-badge { position: absolute; left: 50%; bottom: 10px; z-index: 1; padding: 8px 18px; background: #FFFFFF; color: var(--ak-ink); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; box-shadow: 0 4px 14px rgba(20, 20, 20, .1); transform: translateX(-50%); }
.akx-badge.is-sale { left: 8px; top: 8px; bottom: auto; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; padding: 0; background: var(--ak-lilac-soft); color: #141414; font-size: 13px; font-weight: 600; letter-spacing: 0; box-shadow: none; transform: none; clip-path: polygon(50% 0%, 61% 11%, 75% 6%, 79% 21%, 94% 25%, 89% 39%, 100% 50%, 89% 61%, 94% 75%, 79% 79%, 75% 94%, 61% 89%, 50% 100%, 39% 89%, 25% 94%, 21% 79%, 6% 75%, 11% 61%, 0% 50%, 11% 39%, 6% 25%, 21% 21%, 25% 6%, 39% 11%); }
.akx-badge.is-low { left: 8px; top: 8px; bottom: auto; padding: 6px 10px; font-size: 11.5px; box-shadow: none; transform: none; background: var(--ak-tint); color: var(--ak-berry-deep); }
.akx-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.akx-card-cat { margin-bottom: 8px; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--ak-muted); }
.ak-ui .akx-card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; font-family: var(--ak-sans); font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; color: var(--ak-ink); transition: color .2s ease; }
.ak-ui .akx-card-name:hover { color: var(--ak-berry); }
.ak-ui .akx-card-price { font-size: 15.5px; font-weight: 500; letter-spacing: .03em; color: var(--ak-muted); }
.akx-card-price del { margin-right: 6px; color: var(--ak-muted); font-weight: 400; }
.akx-card-price ins { text-decoration: none; color: var(--ak-ink); font-weight: 600; }
.akx-card-sizes { margin-top: 4px; font-size: 13px; color: var(--ak-muted); }
.ak-ui .akx-card-add { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; margin-top: auto; padding: 0 14px; border: 1px solid var(--ak-lilac-soft); background: var(--ak-tint); color: var(--ak-ink) !important; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; box-shadow: 2px 2px 0 var(--ak-stripe); transition: background-color .2s ease, color .2s ease; }
.akx-card-body > .akx-card-price:last-of-type, .akx-card-body > .akx-card-sizes { margin-bottom: 14px; }
.ak-ui .akx-card-add:hover { background: var(--ak-berry); color: #FFFFFF !important; }
.ak-ui .akx-card-add.loading { opacity: .6; pointer-events: none; }
.ak-ui .akx-card-add.added { background: var(--ak-berry); color: #FFFFFF !important; }
/* WooCommerce adds a "View bag" link after a card's Add to bag. */
.akx-card .added_to_cart { display: block; width: 100%; margin-top: 8px; font-size: 12px; font-weight: 600; text-align: center; color: var(--ak-berry) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* A tall photo beside six products (Perfume oils, Lattafa...): the title over the products. */
.akx-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "media title" "media grid"; grid-template-rows: auto 1fr; gap: 0 clamp(24px, 3vw, 48px); max-width: 1600px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--ak-gutter); }
.akx-feature.is-right { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "title media" "grid media"; }
.akx-feature-title { grid-area: title; margin-bottom: 30px !important; text-align: center; }
.akx-feature-media { grid-area: media; position: relative; display: flex; align-items: flex-end; min-height: 560px; overflow: hidden; background: linear-gradient(160deg, #D8D2CA 0%, #8C847A 50%, #3B3732 100%); color: #FFFFFF; }
.akx-feature-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 20, 20, .6) 0%, rgba(20, 20, 20, 0) 50%); }
.akx-feature-media.is-empty::after { background: none; }
.akx-feature-media .akx-media img { transition: transform 1.2s var(--ak-ease); }
.akx-feature-media:hover .akx-media img { transform: scale(1.03); }
.akx-feature-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(24px, 3vw, 44px); }
.akx-feature-media:not(.is-empty) .akx-feature-text, .akx-feature-media:not(.is-empty)::after { display: none; }
.ak-ui .akx-feature-text .akx-display { display: none; }
.akx-feature-media.is-empty .akx-feature-text .akx-display { display: block; font-size: clamp(32px, 3.2vw, 52px); color: #FFFFFF; }
.akx-feature-line { max-width: 380px; font-family: var(--ak-serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.25; color: #FFFFFF; }
.akx-feature-text .akx-btn { margin-top: 10px; }
.akx-feature-grid { grid-area: grid; grid-template-columns: repeat(3, 1fr); padding: 0; gap: 32px 16px; }

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

.akf-wrap { clear: both; }
.akf-perks { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 max(0px, (100% - 1600px) / 2); background: var(--ak-blush); border-top: 1px solid var(--ak-line); }
.akf-perk { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 30px 24px; text-align: left; }
.akf-perk + .akf-perk { border-left: 1px solid var(--ak-stripe); }
.ak-ui .akf-perk svg { width: 28px; height: 28px; color: var(--ak-berry); }
.akf-perk h3 { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ak-ink); line-height: 1.4; }
.ak-ui .akf-perk p { margin-top: 3px; font-size: 14px; color: var(--ak-text); line-height: 1.5; }

/* Homepage only: a few FAQ questions above the promises. */
.akf-faq { display: grid; grid-template-columns: minmax(260px, 1fr) 1.7fr; gap: clamp(32px, 6vw, 112px); align-items: start; max-width: 1600px; margin: 0 auto; padding: clamp(56px, 7vw, 104px) var(--ak-gutter); }
.akf-faq-intro { position: sticky; top: calc(var(--akh-h, 150px) - var(--aka-h, 0px) + 32px); }
.ak-ui .akf-faq-intro .akx-eyebrow { margin: 0 0 14px; }
.ak-ui .akf-faq-intro .akx-title { margin: 0; font-size: clamp(30px, 2.8vw, 42px); }
.ak-ui .akf-faq-intro > p:not(.akx-eyebrow) { max-width: 340px; margin: 16px 0 30px; font-size: 15px; line-height: 1.7; color: var(--ak-text); }
.akf-faq-intro .akx-title::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 18px; background: var(--ak-berry); }
.akf-faq-links { display: flex; flex-wrap: wrap; gap: 10px; }
.akf-faq-list { border-top: 1px solid var(--ak-line); }
.akf-faq .akp-q summary { padding: 24px 0; font-size: 17px; transition: color .2s ease; }
.akf-faq .akp-q summary:hover, .akf-faq .akp-q[open] summary { color: var(--ak-berry); }
.akf-faq .akp-q summary span::before, .akf-faq .akp-q summary span::after { background: var(--ak-berry); }
.ak-ui .akf-faq .akp-q p { margin-top: -6px; }
@media (max-width: 767px) {
	/* Phones: heading, the questions, then the buttons. */
	.akf-faq { display: flex; flex-direction: column; gap: 0; padding: 56px var(--ak-gutter) 60px; }
	.akf-faq-intro { display: contents; }
	.ak-ui .akf-faq-intro .akx-title { font-size: 30px; }
	.ak-ui .akf-faq-intro > p:not(.akx-eyebrow) { margin: 14px 0 26px; }
	.akf-faq-list { width: 100%; }
	.akf-faq-links { order: 1; margin-top: 30px; }
	.akf-faq-links .akx-btn { flex: 1 1 auto; }
	.akf-faq .akp-q summary { padding: 19px 0; font-size: 15px; }
}

.akf { position: relative; background: var(--ak-plum); color: #FFFFFF; overflow: hidden; }

.akf-top { display: grid; grid-template-columns: minmax(260px, 1fr) 3fr; gap: clamp(40px, 5vw, 96px); max-width: 1600px; margin: 0 auto; padding: clamp(56px, 6vw, 88px) var(--ak-gutter) 40px; }
.ak-ui .akf-logo { display: inline-flex; margin-bottom: 26px; color: #FFFFFF; }
.ak-ui .akf-logo .ak-word { font-size: 52px; }
.ak-ui .akf-logo .ak-logo-full { width: auto; height: 150px; }
.ak-ui .akf-logo .ak-logo { width: auto; height: 150px; }
.ak-ui .akf-vip h2 { font-family: var(--ak-serif); font-size: clamp(22px, 1.9vw, 30px); line-height: 1.15; color: #FFFFFF; }
.ak-ui .akf-vip > p { margin: 10px 0 22px; max-width: 360px; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .75); }
.akf-vip-form { display: flex; max-width: 380px; border-bottom: 1px solid rgba(255, 255, 255, .7); }
.ak-ui .akf-vip-form input[type="email"] {
	flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0 2px; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important;
	font-family: var(--ak-sans); font-size: 15px; color: #FFFFFF !important; outline: none;
}
.ak-ui .akf-vip-form input[type="email"]::placeholder { color: rgba(255, 255, 255, .65); opacity: 1; }
.ak-ui .akf-vip-form button { flex: none; padding: 0 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FFFFFF; transition: color .2s ease; }
.ak-ui .akf-vip-form button:hover { color: #FFFFFF; }
.ak-ui .akf-vip-msg { margin-top: 12px; font-size: 14px; color: #FFFFFF; }
.ak-ui .akf-vip-msg.is-error { color: #F2B8B8; }

.akf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 32px; }
.ak-ui .akf-col h3 { margin-bottom: 18px; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FFFFFF; }
.akf-col li + li { margin-top: 10px; }
.akf-col a, .akf-col span { font-size: 15.5px; line-height: 1.45; color: rgba(255, 255, 255, .8); transition: color .2s ease; }
.ak-ui .akf-col a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.akf-shop + .akf-shop { margin-top: 22px; }
.ak-ui .akf-shop-name { margin-bottom: 10px; font-size: 16px; font-weight: 700; letter-spacing: .04em; color: #FFFFFF; }
.akf-shop li + li { margin-top: 6px; }
.ak-ui .akf-hours { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .65); }
.akf-social { display: flex; gap: 8px; margin-top: 22px; }
.akf-social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; color: #FFFFFF; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.ak-ui .akf-social a:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--ak-plum); }
.ak-ui .akf-social svg { width: 16px; height: 16px; }

/* The Paystack badge: a small white card so the card and mobile money logos read on plum. */
.akf-secure { display: flex; justify-content: center; padding: 0 var(--ak-gutter) clamp(24px, 2.5vw, 32px); }
.ak-ui .akf-secure img { display: block; width: 190px; max-width: 100%; height: auto; padding: 4px 6px; border-radius: 10px; background: #FFFFFF; }

.akf-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1600px; margin: 0 auto; padding: 20px calc(var(--ak-gutter) + 190px) calc(20px + env(safe-area-inset-bottom)) var(--ak-gutter); border-top: 1px solid rgba(255, 255, 255, .16); }
body.akf-on #back-top, body.akf-on .back-top { display: none !important; }
.ak-ui .akf-bottom p { font-size: 12px; letter-spacing: .02em; color: rgba(255, 255, 255, .65); }
.akf-top-link { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #FFFFFF !important; }
.ak-ui .akf-top-link svg { width: 16px; height: 16px; }

/* Bottom right: WhatsApp in its own green. */
.ak-float { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 9980; display: flex; align-items: center; pointer-events: none; }
.ak-float > * { pointer-events: auto; }
.ak-ui .ak-wa { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 15px; border-radius: 24px; background: #1A9E4B; color: #FFFFFF !important; font-family: var(--ak-sans); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); transition: background-color .2s ease, transform .2s ease; }
.ak-ui .ak-wa:hover { background: #158A40; transform: translateY(-2px); }
.ak-ui .ak-wa svg { flex: none; width: 24px; height: 24px; }

/* ---------- Site pages ---------- */

.ak-page { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); background: #FFFFFF; }
html:has(.ak-page) { overflow-x: clip; }

.akp-head { padding: clamp(56px, 8vw, 120px) var(--ak-gutter) clamp(48px, 6vw, 88px); background: var(--ak-blush); text-align: center; }
.ak-ui .akp-head h1 { margin-top: 16px; font-size: clamp(38px, 4.8vw, 68px); }
.ak-ui .akp-head .akp-intro { max-width: 600px; margin: 20px auto 0; font-size: 16px; line-height: 1.7; color: var(--ak-text); }

.akp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 112px); align-items: center; max-width: 1360px; margin: 0 auto; padding: clamp(56px, 8vw, 120px) var(--ak-gutter); }
.akp-split-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ak-bone); }
.ak-ui .akp-split-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.akp-split-media.is-empty { display: flex; align-items: center; justify-content: center; color: var(--ak-ink); }
.ak-ui .akp-split-media.is-empty .ak-logo { width: 60%; height: auto; }
.ak-ui .akp-split-text h2 { margin: 16px 0 24px; font-size: clamp(30px, 3vw, 46px); }
.ak-ui .akp-split-text p:not(.akp-eyebrow) { margin-bottom: 18px; font-size: 16px; line-height: 1.8; color: var(--ak-text); }
.akp-split-text .akx-btn { margin-top: 12px; }

.akp-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); max-width: 1360px; margin: 0 auto; padding: 0 var(--ak-gutter) clamp(64px, 8vw, 120px); }
.akp-values > div { padding-top: 26px; border-top: 1px solid var(--ak-ink); }
.akp-num { display: block; font-family: var(--ak-serif); font-size: 36px; line-height: 1; color: var(--ak-ink); }
.akp-values h3 { margin-top: 20px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ak-ink); }
.ak-ui .akp-values p { margin-top: 10px; font-size: 15px; line-height: 1.75; color: var(--ak-muted); }

.akp-cta { padding: clamp(72px, 9vw, 128px) var(--ak-gutter); background: var(--ak-ink); text-align: center; }
.ak-ui .akp-cta h2 { font-size: clamp(32px, 3.6vw, 54px); color: #FFFFFF; }
.akp-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

.akp-contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: start; max-width: 1280px; margin: 0 auto; padding: clamp(56px, 7vw, 104px) var(--ak-gutter); }
.akp-cards { display: grid; gap: 12px; }
.akp-card { display: flex; gap: 18px; padding: 22px 24px; border: 1px solid var(--ak-line); background: #FFFFFF; transition: border-color .2s ease; }
a.akp-card:hover { border-color: var(--ak-ink); }
.ak-ui .akp-card > svg { width: 22px; height: 22px; color: var(--ak-ink); margin-top: 2px; }
.akp-card h3 { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ak-muted); }
.ak-ui .akp-card .akp-card-main { margin-top: 6px; font-size: 17px; color: var(--ak-ink); line-height: 1.4; }
.ak-ui .akp-card .akp-card-note { margin-top: 4px; font-size: 13px; color: var(--ak-muted); }
.akp-card-social ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.akp-card-social a { font-size: 16px; color: var(--ak-ink); border-bottom: 1px solid var(--ak-line); }
.akp-card-social a:hover { border-color: var(--ak-ink); }
.ak-ui .akp-note { font-size: 15px; line-height: 1.7; color: var(--ak-muted); }

.akp-form-wrap { padding: clamp(28px, 4vw, 52px); background: var(--ak-bone); }
.ak-ui .akp-form-wrap h2 { font-size: 30px; margin-bottom: 26px; }
.akp-form { display: grid; gap: 16px; }
.akp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.akp-form label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ak-ink); }
.akp-form label span { letter-spacing: .02em; text-transform: none; color: var(--ak-muted); font-weight: 400; }
.ak-ui .akp-form input, .ak-ui .akp-form textarea {
	display: block; width: 100%; height: 50px; margin: 8px 0 0; padding: 0 14px; border: 1px solid var(--ak-line) !important; border-radius: 0 !important; background: #FFFFFF !important; box-shadow: none !important;
	font-family: var(--ak-sans); font-size: 15px; letter-spacing: normal; text-transform: none; color: var(--ak-ink); outline: none; transition: border-color .2s ease;
}
.ak-ui .akp-form textarea { height: auto; min-height: 140px; padding: 12px 14px; resize: vertical; }
.ak-ui .akp-form input:focus, .ak-ui .akp-form textarea:focus { border-color: var(--ak-ink) !important; }
.akp-form button { justify-self: start; margin-top: 6px; }
.ak-ui .akp-msg { padding: 14px 16px; border-left: 2px solid var(--ak-ink); background: #FFFFFF; font-size: 15px; line-height: 1.6; color: var(--ak-ink); }
.ak-ui .akp-msg.is-error { border-left-color: #A12A2A; margin-bottom: 16px; }
.ak-ui .akp-aside { margin-top: 22px; font-size: 14px; color: var(--ak-text); }
.akp-aside a, .akp-text a { color: var(--ak-ink) !important; text-decoration: underline !important; text-underline-offset: 3px; }

.akp-faq { display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; max-width: 1180px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--ak-gutter) clamp(64px, 8vw, 112px); }
.akp-faq-nav { position: sticky; top: calc(var(--akh-h, 108px) - var(--aka-h, 0px) + 28px); display: flex; flex-direction: column; gap: 2px; }
.akp-faq-nav a { padding: 8px 0; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ak-muted); transition: color .2s ease; }
.akp-faq-nav a:hover { color: var(--ak-ink); }
.akp-faq-list section { margin-bottom: 56px; scroll-margin-top: calc(var(--akh-h, 108px) + 24px); }
.ak-ui .akp-faq-list h2 { margin-bottom: 6px; font-family: var(--ak-serif); font-size: 30px; line-height: 1.15; color: var(--ak-ink); }
.akp-q { border-bottom: 1px solid var(--ak-line); }
.akp-q summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--ak-ink); }
.akp-q summary::-webkit-details-marker { display: none; }
.akp-q summary span { position: relative; flex: none; width: 13px; height: 13px; }
.akp-q summary span::before, .akp-q summary span::after { content: ""; position: absolute; top: 6px; left: 0; width: 13px; height: 1px; background: var(--ak-ink); transition: transform .25s ease; }
.akp-q summary span::after { transform: rotate(90deg); }
.akp-q[open] summary span::after { transform: rotate(0deg); }
.ak-ui .akp-q p { max-width: 680px; padding: 0 0 22px; font-size: 15px; line-height: 1.8; color: var(--ak-text); }
.akp-still { padding: 44px 32px; background: var(--ak-bone); text-align: center; }
.ak-ui .akp-still h3 { font-size: 32px; }
.ak-ui .akp-still p { margin: 8px 0 24px; font-size: 15px; color: var(--ak-text); }
.akp-still .akx-btn { margin: 4px; }

.akp-text { max-width: 760px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--ak-gutter) clamp(64px, 8vw, 112px); }
.akp-text section { margin-bottom: 44px; }
.ak-ui .akp-text h2 { margin-bottom: 14px; font-family: var(--ak-serif); font-size: 28px; font-weight: 400; line-height: 1.2; color: var(--ak-ink); }
.ak-ui .akp-text p { margin-bottom: 14px; font-size: 15.5px; line-height: 1.85; color: var(--ak-text); }
.ak-ui .akp-text ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.ak-ui .akp-text li { margin-bottom: 8px; font-size: 15.5px; line-height: 1.75; color: var(--ak-text); }
.akp-text li::marker { color: var(--ak-muted); }
.ak-ui .akp-updated { margin-top: 8px; font-size: 13px; color: var(--ak-muted); }
.akp-table-wrap { overflow-x: auto; margin-bottom: 14px; border: 1px solid var(--ak-line); -webkit-overflow-scrolling: touch; }
.ak-ui .akp-table { width: 100%; min-width: 420px; margin: 0; border-collapse: collapse; border: 0; background: #FFFFFF; }
.ak-ui .akp-table th, .ak-ui .akp-table td { padding: 13px 16px; border: 0; border-bottom: 1px solid var(--ak-line); text-align: left; font-size: 14px; color: var(--ak-text); background: transparent; }
.ak-ui .akp-table th { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ak-ink); background: var(--ak-bone); white-space: nowrap; }
.ak-ui .akp-table td:first-child { font-weight: 600; color: var(--ak-ink); }
.ak-ui .akp-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Shop ---------- */

.aks-head { padding-bottom: clamp(36px, 4vw, 56px); }
.aks-cats { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 30px; padding: 20px var(--ak-gutter); border-bottom: 1px solid var(--ak-line); }
.aks-cats a { position: relative; flex: none; padding: 8px 0; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ak-muted); transition: color .2s ease; }
.aks-cats a:hover { color: var(--ak-berry); }
.ak-ui .aks-cats a.is-sale { color: var(--ak-berry); }
.ak-ui .aks-cats a.is-on { color: var(--ak-berry); }
.aks-cats a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; }
.aks-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1600px; margin: 0 auto; padding: 22px var(--ak-gutter); }
.ak-ui .aks-bar p { font-size: 13px; color: var(--ak-muted); }
.aks-sort { display: flex; align-items: center; gap: 10px; }
.aks-sort label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ak-muted); }
.ak-ui .aks-sort select {
	height: 40px; margin: 0; padding: 0 34px 0 12px; border: 1px solid var(--ak-line) !important; border-radius: 0; box-shadow: none;
	background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.6'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
	appearance: none; -webkit-appearance: none; font-family: var(--ak-sans); font-size: 14px; color: var(--ak-ink); cursor: pointer;
}
.aks-grid { padding-bottom: 32px; }
.aks-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 24px var(--ak-gutter) clamp(56px, 7vw, 104px); }
.aks-pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--ak-line); font-size: 14px; color: var(--ak-ink); }
.ak-ui .aks-pages .current { background: var(--ak-ink); border-color: var(--ak-ink); color: #FFFFFF; }
.aks-pages .dots { border-color: transparent; }
.aks-empty { max-width: 520px; margin: 0 auto; padding: 72px var(--ak-gutter) 112px; text-align: center; }
.ak-ui .aks-empty h2 { font-size: 36px; }
.ak-ui .aks-empty p { margin: 14px 0 28px; font-size: 15px; line-height: 1.7; color: var(--ak-text); }

/* Product page: size buttons, the delivery note, and the theme's own parts in our type. */
select[data-ak-swatched] { display: none !important; }
.ak-sw-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.ak-sw-group .ak-sw { position: relative; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease; }
.ak-sw-group.is-size .ak-sw { min-width: 52px; height: 44px; padding: 0 14px; border: 1px solid var(--ak-line); font-family: var(--ak-sans); font-size: 14px; color: var(--ak-ink); }
.ak-sw-group.is-size .ak-sw:hover { border-color: var(--ak-berry); }
.ak-ui.ak-sw-group.is-size .ak-sw.is-on { background: var(--ak-berry); border-color: var(--ak-berry); color: #FFFFFF; }
.ak-sw-group.is-size .ak-sw { border-radius: 4px; }
.ak-sw-group .ak-sw.is-off { opacity: .35; }
.ak-sw-group.is-size .ak-sw.is-off::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; background: currentColor; transform: rotate(-18deg); }

.ak-ui.ak-pdp-note { margin: 22px 0 6px; padding: 18px 0 0; border-top: 1px solid var(--ak-line); }
.ak-ui.ak-pdp-note li { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: 14px; color: var(--ak-text); }
.ak-ui.ak-pdp-note li svg { width: 19px; height: 19px; color: var(--ak-berry); }
.ak-ui.ak-pdp-note a { color: var(--ak-berry); text-decoration: underline; text-underline-offset: 3px; }
.ak-ui.ak-pdp-note .ak-pdp-links { gap: 10px; padding-top: 10px; font-size: 13px; }
.ak-ui.ak-pdp-note .ak-pdp-links span { color: var(--ak-line); }

body.akh-on.single-product .product_title { font-family: var(--ak-serif) !important; font-weight: 400 !important; font-size: clamp(26px, 2.2vw, 34px) !important; line-height: 1.12 !important; letter-spacing: .01em !important; text-transform: uppercase !important; color: var(--ak-ink) !important; }
body.akh-on.single-product .page-heading { background: none !important; margin: 0 !important; padding: 22px 0 4px !important; border: 0 !important; }
body.akh-on.single-product .page-heading::before, body.akh-on.single-product .page-heading::after { display: none !important; }
body.akh-on.single-product .page-heading .woocommerce-breadcrumb, body.akh-on.single-product .page-heading .woocommerce-breadcrumb a { font-family: var(--ak-sans) !important; font-size: 13px !important; color: var(--ak-text) !important; text-shadow: none !important; }
body.akh-on.single-product .page-heading .woocommerce-breadcrumb a:hover { color: var(--ak-berry) !important; }
body.akh-on.single-product .back-history,
body.akh-on.single-product .posts-navigation,
body.akh-on.single-product .posts-nav-btn,
body.akh-on.single-product .et-or-wrapper,
body.akh-on.single-product .et-single-buy-now,
body.akh-on.single-product .size-guide { display: none !important; }
body.akh-on.single-product :is(.summary, .product-information-inner) .price .amount, body.akh-on.single-product :is(.summary, .product-information-inner) .price bdi { color: inherit !important; }
body.akh-on.single-product .variations_button, body.akh-on.single-product form.cart:not(.variations_form) { display: flex !important; align-items: stretch; gap: 10px; flex-wrap: wrap; }
body.akh-on.single-product .variations_button .single_add_to_cart_button, body.akh-on.single-product form.cart:not(.variations_form) .single_add_to_cart_button { flex: 1 1 200px; width: auto !important; margin: 0 !important; }
body.akh-on.single-product .single_add_to_cart_button.disabled { opacity: .55 !important; }
body.akh-on.single-product .variations_button .quantity, body.akh-on.single-product form.cart:not(.variations_form) .quantity { display: inline-flex !important; align-items: stretch; height: 52px; margin: 0 !important; border: 1px solid var(--ak-line) !important; border-radius: 0 !important; background: #FFFFFF; }
body.akh-on.single-product .quantity .minus, body.akh-on.single-product .quantity .plus { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: auto !important; border: 0 !important; color: var(--ak-berry) !important; cursor: pointer; }
body.akh-on.single-product .quantity input.qty { width: 40px !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-family: var(--ak-sans) !important; font-size: 15px !important; color: var(--ak-ink) !important; text-align: center; -moz-appearance: textfield; }
body.akh-on.single-product .quantity input.qty::-webkit-outer-spin-button, body.akh-on.single-product .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.akh-on.single-product .single-wishlist a { color: var(--ak-text) !important; font-family: var(--ak-sans) !important; font-size: 13px !important; }
body.akh-on.single-product .single-wishlist a:hover { color: var(--ak-berry) !important; }
body.akh-on.single-product :is(.summary, .product-information-inner) .price { font-family: var(--ak-sans) !important; font-size: 18px !important; font-weight: 500 !important; color: var(--ak-ink) !important; }
body.akh-on.single-product :is(.summary, .product-information-inner) .price ins { color: var(--ak-berry) !important; text-decoration: none !important; }
body.akh-on.single-product :is(.summary, .product-information-inner) .price del { color: var(--ak-muted) !important; }
body.akh-on.single-product .woocommerce-product-details__short-description,
body.akh-on.single-product .woocommerce-Tabs-panel { font-family: var(--ak-sans); font-size: 15px; line-height: 1.75; color: var(--ak-text); }
body.akh-on.single-product .variations label { font-family: var(--ak-sans) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ak-ink) !important; }

/* WooCommerce buttons across the shop: purple and square, like ours. */
body.akh-on .single_add_to_cart_button,
body.akh-on .woocommerce a.button.alt,
body.akh-on .woocommerce button.button.alt,
body.akh-on .woocommerce .checkout-button,
body.akh-on #place_order {
	min-height: 52px; padding: 0 32px !important; border: 0 !important; border-radius: 0 !important; background: var(--ak-berry) !important; color: #FFFFFF !important;
	font-family: var(--ak-sans) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .16em !important; text-transform: uppercase !important; box-shadow: none !important; transition: background-color .25s ease;
}
body.akh-on .single_add_to_cart_button:hover,
body.akh-on .woocommerce a.button.alt:hover,
body.akh-on .woocommerce button.button.alt:hover,
body.akh-on .woocommerce .checkout-button:hover,
body.akh-on #place_order:hover { background: var(--ak-berry-deep) !important; }
body.akh-on.woocommerce-checkout .woocommerce-billing-fields h3,
body.akh-on.woocommerce-checkout #order_review_heading,
body.akh-on.woocommerce-cart .cart_totals h2 { font-family: var(--ak-serif) !important; font-weight: 400 !important; font-size: 28px !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--ak-ink) !important; }

/* ---------- Bag, checkout, account and 404 ---------- */

/* Our lilac page head runs edge to edge above the theme's content box. */
.ak-store-head { margin-bottom: clamp(32px, 4vw, 56px); }
.ak-store { max-width: 1200px; margin: 0 auto; padding: 0 0 clamp(48px, 6vw, 88px); font-family: var(--ak-sans); color: var(--ak-text); }
body.akh-on .cart-checkout-nav { display: none !important; }
body.akh-on .ak-store h2, body.akh-on .ak-store h3, body.akh-on .ak-store #order_review_heading { font-family: var(--ak-serif) !important; font-weight: 400 !important; font-size: clamp(20px, 1.7vw, 24px) !important; letter-spacing: .01em !important; text-transform: uppercase !important; color: var(--ak-ink) !important; margin: 0 0 18px !important; }

/* Notices */
body.akh-on .ak-store .woocommerce-message, body.akh-on .ak-store .woocommerce-info, body.akh-on .ak-store .woocommerce-error, body.akh-on .ak-store .woocommerce-notice {
	margin: 0 0 24px !important; padding: 16px 20px !important; border: 0 !important; border-left: 3px solid var(--ak-berry) !important; border-radius: 0 !important; background: var(--ak-blush) !important; color: var(--ak-ink) !important; font-size: 14px !important; list-style: none;
}
body.akh-on .ak-store .woocommerce-message::before, body.akh-on .ak-store .woocommerce-info::before, body.akh-on .ak-store .woocommerce-error::before { display: none !important; }
body.akh-on .ak-store .woocommerce-message a, body.akh-on .ak-store .woocommerce-info a, body.akh-on .ak-store .woocommerce-error a { color: var(--ak-berry) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.akh-on .ak-store .ak-wa-link { display: inline-block; margin-top: 10px; padding: 10px 18px; background: var(--ak-berry); color: #FFFFFF !important; text-decoration: none !important; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

/* Fields */
body.akh-on .ak-store .form-row label { display: block; margin-bottom: 6px; font-family: var(--ak-sans) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ak-ink) !important; }
body.akh-on .ak-store .form-row .required { color: var(--ak-berry) !important; text-decoration: none; border: 0; }
body.akh-on .ak-store input.input-text, body.akh-on .ak-store input[type="text"], body.akh-on .ak-store input[type="email"], body.akh-on .ak-store input[type="tel"], body.akh-on .ak-store input[type="password"], body.akh-on .ak-store select, body.akh-on .ak-store textarea {
	width: 100%; min-height: 50px; padding: 12px 14px !important; border: 1px solid var(--ak-line) !important; border-radius: 0 !important; background: #FFFFFF !important; box-shadow: none !important; font-family: var(--ak-sans) !important; font-size: 15px !important; color: var(--ak-ink) !important; transition: border-color .2s ease;
}
body.akh-on .ak-store textarea { min-height: 110px; }
body.akh-on .ak-store input:focus, body.akh-on .ak-store select:focus, body.akh-on .ak-store textarea:focus { border-color: var(--ak-berry) !important; outline: none !important; }
body.akh-on .ak-store .ak-hidden-field { display: none !important; }

/* Buttons: purple and square; secondary ones outlined. */
body.akh-on .ak-store .button, body.akh-on .ak-store button[type="submit"], body.akh-on .ak-store a.checkout-button {
	display: inline-flex !important; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px !important; border: 1px solid var(--ak-berry) !important; border-radius: 0 !important; background: var(--ak-berry) !important; color: #FFFFFF !important;
	font-family: var(--ak-sans) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .16em !important; text-transform: uppercase !important; box-shadow: none !important; text-decoration: none !important; transition: background-color .2s ease, color .2s ease;
}
body.akh-on .ak-store .button:hover, body.akh-on .ak-store button[type="submit"]:hover { background: var(--ak-berry-deep) !important; border-color: var(--ak-berry-deep) !important; }
body.akh-on .ak-store button[name="update_cart"], body.akh-on .ak-store button[name="apply_coupon"], body.akh-on .ak-store .woocommerce-Button--previous, body.akh-on .ak-store .woocommerce-button.view { background: #FFFFFF !important; color: var(--ak-berry) !important; }
body.akh-on .ak-store button[name="update_cart"]:hover, body.akh-on .ak-store button[name="apply_coupon"]:hover { background: var(--ak-berry) !important; color: #FFFFFF !important; }
body.akh-on .ak-store .button:disabled, body.akh-on .ak-store .button[disabled] { opacity: .45 !important; }

/* Tables: the bag, order review and order details. */
body.akh-on .ak-store table.shop_table { width: 100%; margin: 0 0 24px !important; border: 0 !important; border-collapse: collapse !important; border-radius: 0 !important; font-size: 14px; }
body.akh-on .ak-store table.shop_table th { padding: 12px 10px !important; border: 0 !important; border-bottom: 1px solid var(--ak-line) !important; background: none !important; font-family: var(--ak-sans) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--ak-muted) !important; text-align: left; }
body.akh-on .ak-store table.shop_table td { padding: 16px 10px !important; border: 0 !important; border-bottom: 1px solid var(--ak-line) !important; background: none !important; vertical-align: middle; color: var(--ak-text); }
body.akh-on .ak-store table.shop_table td.product-name a { color: var(--ak-ink) !important; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; font-size: 13px; }
body.akh-on .ak-store table.shop_table td.product-name a:hover { color: var(--ak-berry) !important; }
body.akh-on .ak-store table.shop_table td.product-thumbnail img { width: 84px !important; max-width: none; height: auto; }
body.akh-on .ak-store table.shop_table .amount { color: var(--ak-ink); font-weight: 500; }
body.akh-on .ak-store a.remove { display: inline-flex !important; align-items: center; justify-content: center; width: 28px !important; height: 28px !important; border: 1px solid var(--ak-stripe) !important; border-radius: 50% !important; color: var(--ak-berry) !important; font-size: 18px !important; line-height: 1 !important; background: none !important; }
body.akh-on .ak-store a.remove:hover { background: var(--ak-berry) !important; color: #FFFFFF !important; }
body.akh-on .ak-store .quantity { display: inline-flex !important; align-items: stretch; height: 44px; border: 1px solid var(--ak-line) !important; }
body.akh-on .ak-store .quantity .minus, body.akh-on .ak-store .quantity .plus { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; border: 0 !important; color: var(--ak-berry) !important; cursor: pointer; }
body.akh-on .ak-store .quantity input.qty { width: 40px !important; min-height: 0 !important; height: 100% !important; padding: 0 !important; border: 0 !important; text-align: center; -moz-appearance: textfield; }
body.akh-on .ak-store .quantity input.qty::-webkit-outer-spin-button, body.akh-on .ak-store .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.akh-on .ak-store td.actions .coupon { display: flex; gap: 8px; }
body.akh-on .ak-store td.actions .coupon .input-text { width: 200px !important; }

/* Bag totals and the order review: a soft lilac panel. */
body.akh-on .ak-store .cart_totals, body.akh-on .ak-store #order_review { padding: 28px !important; background: var(--ak-bone) !important; border: 1px solid var(--ak-blush) !important; }
body.akh-on .ak-store .cart_totals table.shop_table th, body.akh-on .ak-store .cart_totals table.shop_table td, body.akh-on .ak-store #order_review table.shop_table th, body.akh-on .ak-store #order_review table.shop_table td { border-bottom-color: var(--ak-blush) !important; }
body.akh-on .ak-store .order-total th, body.akh-on .ak-store .order-total td, body.akh-on .ak-store .order-total .amount { font-size: 16px !important; color: var(--ak-ink) !important; font-weight: 600 !important; }
body.akh-on .ak-store .wc-proceed-to-checkout { padding: 8px 0 0 !important; }
body.akh-on .ak-store .wc-proceed-to-checkout a.checkout-button { width: 100%; min-height: 54px; font-size: 13px !important; }

/* Payment */
body.akh-on .ak-store #payment { background: none !important; border-radius: 0 !important; }
body.akh-on .ak-store #payment ul.payment_methods { padding: 0 0 16px !important; border: 0 !important; }
body.akh-on .ak-store #payment ul.payment_methods li { padding: 12px 0 !important; list-style: none; }
body.akh-on .ak-store #payment ul.payment_methods li label { font-size: 15px !important; font-weight: 500 !important; color: var(--ak-ink) !important; }
body.akh-on .ak-store #payment ul.payment_methods li input[type="radio"] { accent-color: var(--ak-berry); }
body.akh-on .ak-store #payment div.payment_box { margin: 10px 0 0 !important; padding: 14px 16px !important; background: #FFFFFF !important; border-radius: 0 !important; color: var(--ak-text) !important; font-size: 14px !important; }
body.akh-on .ak-store #payment div.payment_box::before { display: none !important; }
body.akh-on .ak-store #payment .place-order { padding: 0 !important; }
body.akh-on .ak-store #place_order { width: 100% !important; min-height: 56px; font-size: 13px !important; }
body.akh-on .ak-store .woocommerce-privacy-policy-text, body.akh-on .ak-store .woocommerce-terms-and-conditions-wrapper { font-size: 13px; line-height: 1.6; color: var(--ak-muted); }
body.akh-on .ak-store .woocommerce-privacy-policy-text a { color: var(--ak-berry) !important; }
body.akh-on .ak-store input[type="checkbox"] { accent-color: var(--ak-berry); }

/* Order received */
body.akh-on .ak-store ul.order_details { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 32px !important; padding: 0 !important; border: 1px solid var(--ak-blush); }
body.akh-on .ak-store ul.order_details li { flex: 1 1 160px; margin: 0 !important; padding: 18px 20px !important; border: 0 !important; border-right: 1px solid var(--ak-blush) !important; font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ak-muted); }
body.akh-on .ak-store ul.order_details li strong { display: block; margin-top: 6px; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ak-ink); }

/* My account: sign in and create account side by side, then the account menu once signed in. */
body.akh-on .ak-store .u-columns.col2-set { display: grid !important; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
body.akh-on .ak-store .u-columns.col2-set .u-column1, body.akh-on .ak-store .u-columns.col2-set .u-column2 { width: auto !important; float: none !important; max-width: none !important; padding: 0 !important; }
body.akh-on .ak-store form.woocommerce-form-login, body.akh-on .ak-store form.woocommerce-form-register, body.akh-on .ak-store form.lost_reset_password { margin: 0 !important; padding: 32px !important; border: 1px solid var(--ak-line) !important; border-radius: 0 !important; background: #FFFFFF; }
body.akh-on .ak-store .woocommerce-form-login__submit, body.akh-on .ak-store .woocommerce-form-register__submit { width: 100%; margin-top: 8px !important; }
body.akh-on .ak-store .woocommerce-LostPassword a, body.akh-on .ak-store .lost_password a { color: var(--ak-berry) !important; font-size: 13px; }
body.akh-on .ak-store .woocommerce-MyAccount-navigation ul { margin: 0 !important; padding: 0 !important; list-style: none; border-top: 1px solid var(--ak-line); }
body.akh-on .ak-store .woocommerce-MyAccount-navigation li { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--ak-line); }
body.akh-on .ak-store .woocommerce-MyAccount-navigation li a { display: block; padding: 14px 4px !important; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ak-text) !important; }
body.akh-on .ak-store .woocommerce-MyAccount-navigation li.is-active a, body.akh-on .ak-store .woocommerce-MyAccount-navigation li a:hover { color: var(--ak-berry) !important; }
body.akh-on .ak-store .woocommerce-MyAccount-content a:not(.button) { color: var(--ak-berry); }

/* 404 */
.akp-404 { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: clamp(36px, 5vw, 64px) var(--ak-gutter) clamp(48px, 6vw, 80px); }
.akp-404-search { display: flex; align-items: center; gap: 10px; width: min(480px, 100%); border-bottom: 1px solid var(--ak-berry); color: var(--ak-berry); }
.ak-ui .akp-404-search input[type="search"] { flex: 1; min-width: 0; height: 50px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-family: var(--ak-sans); font-size: 16px; color: var(--ak-ink); outline: none; }
.akp-404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ak-ui .akp-404-links .akx-btn-line { border-color: var(--ak-berry); color: var(--ak-berry) !important; }
.ak-ui .akp-404-links .akx-btn-line:hover { background: var(--ak-berry); color: #FFFFFF !important; }
body.akh-on.error404 .page-heading { display: none !important; }

/* The theme's wishlist needs a plugin that isn't installed, so its links are hidden. */
body.akh-on .single-wishlist, body.akh-on .et-wishlist-holder, body.akh-on .xstore-wishlist { display: none !important; }

@media (max-width: 767px) {
	body.akh-on .ak-store .u-columns.col2-set { grid-template-columns: 1fr; }
	body.akh-on .ak-store form.woocommerce-form-login, body.akh-on .ak-store form.woocommerce-form-register { padding: 22px !important; }
	body.akh-on .ak-store .cart_totals, body.akh-on .ak-store #order_review { padding: 20px !important; }
	body.akh-on .ak-store td.actions .coupon { flex-direction: column; }
	body.akh-on .ak-store td.actions .coupon .input-text { width: 100% !important; }
}

/* ---------- VIP popup ---------- */

.ako { position: fixed; inset: 0; z-index: 9997; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(17, 17, 17, 0); transition: background-color .35s ease; }
.ako[hidden], .ako-step[hidden], .ako-error[hidden] { display: none !important; }
.ako.is-open { background: rgba(17, 17, 17, .5); }
.ako-box { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; width: min(820px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #FFFFFF; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(18px); transition: opacity .35s ease, transform .35s var(--ak-ease); }
.ako.is-open .ako-box { opacity: 1; transform: none; }
.ako-media { position: relative; min-height: 470px; overflow: hidden; background: linear-gradient(160deg, var(--ak-sand) 0%, #8C7B6B 100%); }
.ako-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 25%; }
.ako-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 45%); }
.ako-stamp { position: absolute; left: 24px; bottom: 24px; z-index: 1; color: #FFFFFF; }
.ak-ui .ako-stamp .ak-logo { width: auto; height: 16px; }
.ako-body { display: flex; flex-direction: column; justify-content: center; padding: 52px 46px 40px; }
.ak-ui .ako-close { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; color: var(--ak-ink); }
.ak-ui .ako-close svg { width: 20px; height: 20px; }
.ak-ui .ako-kicker { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ak-muted); }
.ak-ui .ako-title { margin-top: 12px; font-family: var(--ak-serif); font-size: 40px; line-height: 1.05; color: var(--ak-ink); }
.ak-ui .ako-text { margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: var(--ak-muted); }
.ak-ui .ako-offer { align-self: flex-start; margin-top: 16px; padding: 8px 14px; background: var(--ak-blush); color: var(--ak-ink); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ako-form { display: grid; gap: 10px; margin-top: 24px; }
.ak-ui .ako-form input[type="email"], .ak-ui .ako-form input[type="tel"] {
	display: block; width: 100%; height: 50px; margin: 0; padding: 0 16px; border: 1px solid var(--ak-line) !important; border-radius: 0 !important; background: #FFFFFF !important; box-shadow: none !important;
	font-family: var(--ak-sans); font-size: 15px; color: var(--ak-ink); outline: none; transition: border-color .2s ease;
}
.ak-ui .ako-form input:focus { border-color: var(--ak-ink) !important; }
.ak-ui .ako-form button, .ak-ui .ako-cta { height: 52px; width: 100%; background: var(--ak-ink); color: #FFFFFF; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: background-color .2s ease; }
.ak-ui .ako-form button:hover, .ak-ui .ako-cta:hover { background: var(--ak-berry); }
.ak-ui .ako-form button[disabled] { opacity: .7; cursor: wait; }
.ak-ui .ako-cta { margin-top: 26px; }
.ak-ui .ako-error { font-size: 13px; color: #A12A2A; }
.ak-ui .ako-small { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--ak-muted); }
.ak-ui .ako-no { align-self: flex-start; margin-top: 12px; font-size: 12px; color: var(--ak-muted); text-decoration: underline; text-underline-offset: 3px; }
.ak-ui .ako-no:hover { color: var(--ak-ink); }

/* ---------- Scroll animations (assets/anim.js) ----------
   html.ak-anim is set in the page head; anything listed here starts slightly lower and
   transparent, then rises into place once it scrolls into view (.is-in). */

@keyframes akRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes akZoom { from { transform: scale(1.06); } to { transform: scale(1); } }

.ak-anim :is(.akx-cat, .akx-card, .akf-perk, .akf-cols > *, .akf-vip, .akp-values > div, .akp-card, .akp-faq-list > section, .akf-faq-list > .akp-q, .akx-head, .akx-banner-text, .akp-head, .akp-split-media, .akp-split-text, .akp-cta, .akp-form-wrap, .akp-still, .akp-text > section, .aks-cats, .aks-bar) {
	transition: opacity .9s ease, transform 1s var(--ak-ease);
	transition-delay: calc(var(--d, 0) * 80ms);
}
.ak-anim :is(.akx-cat, .akx-card, .akf-perk, .akf-cols > *, .akf-vip, .akp-values > div, .akp-card, .akp-faq-list > section, .akf-faq-list > .akp-q, .akx-head, .akx-banner-text, .akp-head, .akp-split-media, .akp-split-text, .akp-cta, .akp-form-wrap, .akp-still, .akp-text > section, .aks-cats, .aks-bar):not(.is-in) {
	opacity: 0;
	transform: translateY(22px);
}

/* Hero: the photo settles from a slight zoom and the words rise one after another. */
.ak-anim .akx-hero .akx-media img { animation: akZoom 2.6s var(--ak-ease) both; }
.ak-anim .akx-hero-text > * { animation: akRise 1s var(--ak-ease) both; }
.ak-anim .akx-hero-text > :nth-child(1) { animation-delay: .2s; }
.ak-anim .akx-hero-text > :nth-child(2) { animation-delay: .35s; }
.ak-anim .akx-hero-text > :nth-child(3) { animation-delay: .55s; }
.ak-anim .akx-hero-text > :nth-child(4) { animation-delay: .7s; }

/* Banners: the photo eases out of a slight zoom as it comes into view. */
.ak-anim .akx-banner .akx-media img { transition: transform 1.8s var(--ak-ease); }
.ak-anim .akx-banner:not(.is-in) .akx-media img { transform: scale(1.06); }

/* ---------- Product sliders (assets/slider.js) ---------- */

.akx-arrows { display: inline-flex; gap: 6px; }
.ak-ui .akx-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--ak-stripe); border-radius: 50%; color: var(--ak-berry); background: #FFFFFF; transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
.ak-ui .akx-arrow:hover:not([disabled]) { background: var(--ak-berry); border-color: var(--ak-berry); color: #FFFFFF; }
.ak-ui .akx-arrow[disabled] { opacity: .35; cursor: default; }
.ak-ui .akx-arrow svg { width: 18px; height: 18px; }

.akx-track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 16px) / 6.25); gap: 16px;
	max-width: 1600px; margin: 0 auto;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ak-gutter);
	padding: 0 var(--ak-gutter) 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab;
}
.akx-track::-webkit-scrollbar { display: none; }
.akx-track > .akx-card { scroll-snap-align: start; }
.akx-track img { -webkit-user-drag: none; user-select: none; }
.akx-track.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.akx-track:focus-visible { outline: 2px solid var(--ak-ink); outline-offset: -2px; }
.akx-progress { position: relative; height: 2px; max-width: calc(1600px - 2 * var(--ak-gutter)); margin: 32px var(--ak-gutter) 0; background: var(--ak-blush); overflow: hidden; }
@media (min-width: 1700px) { .akx-progress { margin-left: auto; margin-right: auto; } }
.akx-progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 25%; background: var(--ak-berry); transition: transform .15s linear; }
.akx-new.no-scroll .akx-arrows, .akx-new.no-scroll .akx-progress { display: none; }
.akx-new.no-scroll .akx-track { cursor: default; }
.akx-more { display: flex; justify-content: center; margin-top: 48px; padding: 0 var(--ak-gutter); }


/* Contact page: one card per shop. */
.akp-shops { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1280px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--ak-gutter) 0; }
.akp-shop { padding: clamp(28px, 3vw, 44px); background: var(--ak-bone); border: 1px solid var(--ak-line); }
.ak-ui .akp-shop h3 { margin: 10px 0 20px; font-size: clamp(26px, 2.4vw, 36px); }
.akp-shop ul { display: grid; gap: 12px; margin-bottom: 24px; }
.akp-shop li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ak-ink); }
.ak-ui .akp-shop li svg { width: 20px; height: 20px; color: var(--ak-berry); }
.akp-shop li a { border-bottom: 1px solid var(--ak-stripe); }
.ak-ui .akp-shop li a:hover { color: var(--ak-berry); border-color: var(--ak-berry); }
.akp-shops + .akp-contact { padding-top: clamp(32px, 4vw, 56px); }

/* Delivery page: the three ways to get an order, side by side. */
.akp-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 48px; }
.akp-way { padding: 24px 22px; background: var(--ak-bone); border: 1px solid var(--ak-line); }
.ak-ui .akp-way svg { width: 26px; height: 26px; color: var(--ak-berry); }
.ak-ui .akp-text .akp-way h3 { margin: 14px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ak-ink); }
.ak-ui .akp-text .akp-way-fee { margin: 0 0 8px; font-family: var(--ak-serif); font-size: 26px; line-height: 1.2; color: var(--ak-berry); }
.ak-ui .akp-text .akp-way p:last-child { margin: 0; font-size: 14px; line-height: 1.6; }

/* Checkout: the rider's fee line in the order summary. */
body.akh-on .ak-store tr.ak-fee-note td { font-size: 13px !important; color: var(--ak-text) !important; }

/* Order received: send the order on WhatsApp. */
.ak-ui.ak-thanks { margin: 0 0 32px; padding: 24px 26px; background: var(--ak-blush); border-left: 3px solid var(--ak-berry); }
.ak-ui.ak-thanks p { font-size: 15px; line-height: 1.6; color: var(--ak-ink); }
.ak-ui.ak-thanks .akx-btn { margin-top: 16px; }
.ak-ui.ak-thanks .akx-btn svg { width: 20px; height: 20px; }
.ak-ui.ak-thanks .ak-thanks-note { margin-top: 10px; font-size: 13px; color: var(--ak-muted); }

/* ---------- Large screens ---------- */

@media (max-width: 1360px) {
	.akx-products { grid-template-columns: repeat(5, 1fr); }
	.akf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
	.akx-products { grid-template-columns: repeat(4, 1fr); }
	.akx-cat-grid { grid-auto-columns: calc((100% - 3 * 14px) / 4); gap: 14px; }
	.akx-feature-grid { grid-template-columns: repeat(2, 1fr); }
	.akx-feature-grid > .akx-card:nth-child(n+5) { display: none; }
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.akh-bar, .akh-wrap.is-scrolled .akh-bar { height: 78px; column-gap: 8px; }
	.akh-help { display: none !important; }
	.ak-ui .akh-logo .ak-logo-wide, .ak-ui .akh-wrap.is-scrolled .akh-logo .ak-logo-wide { height: 50px; }
	.akx-hero.is-word { height: clamp(420px, 60vw, 560px); }
	.ak-ui .akh-bar .ak-word-lockup, .ak-ui .akh-wrap.is-scrolled .akh-bar .ak-word-lockup { font-size: 34px; }

	.akx-products { grid-template-columns: repeat(3, 1fr); }
	.akx-track { grid-auto-columns: calc((100% - 2 * 12px) / 3.3); gap: 12px; }
	.akx-cat-grid { grid-auto-columns: calc((100% - 2 * 12px) / 3.2); gap: 12px; }
	.akx-cats.is-brands .akx-cat-grid { grid-auto-columns: calc((100% - 12px) / 2.3); }
	.akx-feature, .akx-feature.is-right { grid-template-columns: 1fr; grid-template-areas: "title" "media" "grid"; }
	.akx-feature-media { min-height: 0; aspect-ratio: 16 / 10; margin-bottom: 28px; }
	.akx-feature-grid { grid-template-columns: repeat(3, 1fr); }
	.akx-feature-grid > .akx-card:nth-child(n+5) { display: flex; }

	.akf-top { grid-template-columns: 1fr; }
	.akf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.akp-split, .akp-contact, .akp-faq { grid-template-columns: 1fr; }
	.akp-split-media { max-width: 560px; }
	.akp-faq-nav { position: static; flex-direction: row; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--ak-gutter)); padding: 0 var(--ak-gutter) 4px; scrollbar-width: none; }
	.akp-faq-nav::-webkit-scrollbar { display: none; }
	.akp-faq-nav a { flex: none; padding: 10px 16px; border: 1px solid var(--ak-line); letter-spacing: .08em; color: var(--ak-ink); }

	.aks-cats { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.aks-cats::-webkit-scrollbar { display: none; }
}

/* ---------- Phones ---------- */

@media (max-width: 767px) {
	.akh-announce { padding: 8px 44px 8px 16px; text-align: left; }
	.akh-announce p { font-size: 11.5px; line-height: 1.45; }
	.ak-ui .akh-announce-x { right: 4px; }
	.akh-bar { height: 70px; }
	.akh-icon, .ak-ui .akh-icon { width: 44px !important; height: 44px !important; }
	.akh-left { gap: 0; }
	.akh-right { gap: 0; }
	.akh-account { display: none !important; }
	.akh-menu-txt, .akh-bag-text { display: none !important; }
	.ak-ui .akh-menu { height: 40px; box-shadow: none; }
	.akh-menu-ico { width: 42px; }
	.akh-left { gap: 4px; }
	.akh-bag { margin-left: 0; }
	/* Phones: the small line and the box above the photo, the word along the bottom. */
	.akx-hero.is-word { height: 124vw; max-height: 600px; }
	.ak-ui .akx-hero-photo { height: 80%; max-width: 100vw; }
	.ak-ui .akx-hero-kicker { left: 5%; bottom: auto; top: 5%; max-width: 8em; font-size: 15px; letter-spacing: .42em; }
	.ak-ui .akx-hero-shop { right: 5%; bottom: auto; top: 5%; padding: 9px 16px 8px; }
	.akx-hero-shop small { font-size: 11px; }
	.akx-hero-shop b { font-size: 19px; }
	.akx-float { font-size: 15px; }
	.akx-float-1 { top: 22%; left: 5%; }
	.akx-float-2, .akx-float-3 { display: none; }
	.akx-float-4 { display: none; }
	.akx-hero-wedge { width: 46%; height: 8%; }
	.ak-ui .akx-card-add { width: 100%; }
	.akx-marquee-track li { padding: 0 28px; }
	.akx-brand { height: 48px; }
	.ak-ui .akx-brand-img { height: 40px !important; max-width: 150px !important; }
	.akx-brand-name { font-size: 22px; }
	.ak-ui .akh-icon svg { width: 23px; height: 23px; }
	.ak-ui .akh-bar .ak-word-lockup, .ak-ui .akh-wrap.is-scrolled .akh-bar .ak-word-lockup { font-size: 30px; }
	.ak-ui .akh-logo .ak-logo-wide, .ak-ui .akh-wrap.is-scrolled .akh-logo .ak-logo-wide { height: 38px; }

	.akx-hero { min-height: 440px; align-items: flex-end; }
	.akx-hero.has-size { height: clamp(440px, calc(100vw * var(--akx-hm) / var(--akx-wm)), 760px); }
	.akx-hero::after { background: linear-gradient(0deg, rgba(20, 20, 20, .66) 0%, rgba(20, 20, 20, .18) 50%, rgba(20, 20, 20, 0) 72%); }
	.akx-hero.is-empty::before { right: -30%; top: 30%; width: 90vw; }
	.akx-hero-text { padding: 48px var(--ak-gutter) 40px; }
	.ak-ui .akx-hero h1 { font-size: 40px; }
	.ak-ui .akx-hero .akx-sub { margin: 14px 0 26px; font-size: 15px; }
	.ak-ui .akx-btn { min-height: 48px; padding: 0 26px; }

	.akx-head { margin-bottom: 24px; }
	.ak-ui .akx-title { font-size: 28px; }
	.akx-head .akx-arrows { display: none; }
	.akx-cat-grid { grid-auto-columns: 58%; gap: 10px; }
	.akx-cats.is-brands .akx-cat-grid { grid-auto-columns: 62%; }
	.akx-cat-text { left: 14px; right: 14px; bottom: 14px; }
	.akx-cat-name { font-size: 16px; }

	.akx-banner { min-height: 400px; padding: 48px 20px; }
	.ak-ui .akx-banner h2 { font-size: 36px; }
	.ak-ui .akx-banner .akx-banner-line { font-size: 15px; margin: 12px auto 24px; }
	.akx-banner .akx-btns { flex-direction: column; align-items: stretch; }
	/* On phones a bright banner's photo sits on top (4:5) and the words below it. */
	.akx-light:not(.is-empty) { display: block; min-height: 0; padding: calc(125vw + 36px) 20px 48px; }
	.ak-ui .akx-light .akx-media { height: 125vw !important; bottom: auto !important; }
	.ak-ui .akx-light .akx-banner-line { margin: 12px 0 24px; }
	.akx-split { grid-template-columns: 1fr; padding: 0; }
	.akx-split-media { min-height: 0; aspect-ratio: 4 / 5; }
	.akx-split .akx-banner-text { padding: 44px 20px 52px; }

	.akx-products, .akx-feature-grid { grid-template-columns: 1fr 1fr; gap: 30px 12px; }
	.akx-feature-grid > .akx-card:nth-child(n+5) { display: none; }
	.akx-feature { padding-top: 48px; padding-bottom: 48px; }
	.akx-feature-title { margin-bottom: 22px !important; }
	.akx-feature-media { aspect-ratio: 4 / 5; margin-bottom: 24px; }
	.akx-track { grid-auto-columns: 46%; gap: 12px; }
	.akx-card-img { margin-bottom: 10px; }
	.ak-ui .akx-card-name { font-size: 13px; }
	.ak-ui .akx-card-price { font-size: 13.5px; }
	.akx-card-cat { margin-bottom: 6px; font-size: 9.5px; letter-spacing: .14em; }
	.ak-ui .akx-card-add { min-height: 40px; font-size: 10.5px; letter-spacing: .1em; }
	.akx-badge { top: 8px; left: 8px; padding: 5px 7px; font-size: 9.5px; }
	.akx-progress { margin-top: 24px; }
	.akx-more { margin-top: 36px; }
	.akx-more .akx-btn { width: 100%; }

	.akf-perks { grid-template-columns: 1fr; }
	.akf-perk { justify-content: flex-start; padding: 18px 20px; }
	.akf-perk + .akf-perk { border-left: 0; border-top: 1px solid var(--ak-stripe); }
	.akf-top { gap: 44px; padding: 48px 20px 24px; }
	.akf-cols { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
	.akf-shops { grid-column: 1 / -1; }
	.ak-ui .akf-secure img { width: 170px; }
	.akf-bottom { flex-direction: column; text-align: center; gap: 10px; padding: 22px 20px calc(88px + env(safe-area-inset-bottom)); }
	.ak-float { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
	.ak-ui .ak-wa { gap: 8px; height: 46px; padding: 0 16px 0 13px; font-size: 14px; }
	.ak-ui .ak-wa svg { width: 22px; height: 22px; }

	.ak-ui .akp-head .akp-intro { font-size: 15px; }
	.akp-shops { grid-template-columns: 1fr; }
	.akp-shop .akx-btn { width: 100%; }
	.akp-values { grid-template-columns: 1fr; gap: 32px; }
	.akp-row { grid-template-columns: 1fr; }
	.akp-form button { justify-self: stretch; }
	.akp-card { padding: 18px; }
	.akp-q summary { padding: 18px 0; font-size: 15px; }
	.akp-still { padding: 32px 20px; }
	.ak-ui .akp-text h2 { font-size: 24px; }
	.ak-ui .akp-faq-list h2 { font-size: 26px; }

	.aks-cats { gap: 4px 22px; padding: 14px 16px; }
	.aks-cats a { font-size: 11px; }
	.aks-bar { padding: 16px; }
	.aks-sort label { display: none; }

	/* The VIP popup becomes a sheet that slides up from the bottom. */
	.ako { align-items: flex-end; padding: 0; }
	.ako-box { grid-template-columns: 1fr; width: 100%; max-height: 92vh; transform: translateY(100%); }
	.ako.is-open .ako-box { transform: none; }
	.ako-media { min-height: 0; height: 180px; }
	.ako-stamp { left: 20px; bottom: 18px; }
	.ako-body { padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); }
	.ak-ui .ako-title { font-size: 30px; }
	.ak-ui .ako-text { font-size: 14px; }
	.ako-form { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.ak-ui *, .akh-wrap, .ako, .ako-box { transition: none !important; animation: none !important; }
}