/* "Arch & lattice" (direction A). Products sit in gold-rimmed arches (majlis window); light sections get a faint lattice.
   Shared by: home hero + ranges, header drawer (tabs + arch tiles), desktop mega menu tiles, side cart, shop range rail. */
:root { --afa-ox: #3D0C11; --afa-ox2: #2C080C; --afa-ox3: #1E0508; --afa-wine: #5A1219; --afa-gold: #D9A93A; --afa-goldhi: #EBBA2F; --afa-goldsoft: #F3D27A; --afa-cream: #FAF6F1; --afa-sand: #F2E8E0; --afa-bd: #E5D6CB; --afa-tx: #2B1A18; --afa-mu: #6E5A55; --afa-on: #F8E9DF; --afa-onm: #CDA9A0; --afa-img: #FFFFFF;
	--afa-arch: 999px 999px 14px 14px;
	--afa-lattice: linear-gradient(45deg, rgba(217,169,58,.075) 25%, transparent 25%, transparent 75%, rgba(217,169,58,.075) 75%), linear-gradient(45deg, rgba(217,169,58,.075) 25%, transparent 25%, transparent 75%, rgba(217,169,58,.075) 75%); }

/* ---------- arch primitive ---------- */
.afa-arch { position: relative; display: grid; place-items: end center; aspect-ratio: 5 / 6; width: 100%; border-radius: var(--afa-arch); overflow: hidden; background: var(--afa-img); border: 1.5px solid var(--afa-gold); box-shadow: 0 0 0 3px rgba(217,169,58,.14); }
.afa-arch img { width: 76% !important; height: 72% !important; object-fit: contain; margin-bottom: 6%; transition: transform .3s ease; }
.afa-num { position: absolute; top: 11%; left: 0; right: 0; z-index: 1; text-align: center; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: clamp(18px, 2.2vw, 26px); line-height: 1; color: var(--afa-gold); letter-spacing: -.01em; }
.afa-t { display: block; font-weight: 700; font-size: 13px; line-height: 1.25; text-align: center; }
.afa-m { display: block; font-size: 11.5px; line-height: 1.35; text-align: center; }
a:hover > .afa-arch img, a:focus-visible > .afa-arch img { transform: translateY(-3px) scale(1.04); }

/* ============ HOME HERO ============ */
.afh-hero.afh-hero--arch { background: var(--afa-cream); background-image: var(--afa-lattice); background-size: 22px 22px; background-position: 0 0, 11px 11px; color: var(--afa-tx); }
.afh-hero.afh-hero--arch .afh-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 22px 30px; }
.afh-hero.afh-hero--arch .afh-hero__txt { order: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.afh-hero.afh-hero--arch .afh-pill { color: #8C1D26; border-color: rgba(140,29,38,.3); background: #fff; }
.afh-hero.afh-hero--arch h1 { color: var(--afa-ox); font-size: 32px; margin: 12px 0 10px; }
.afh-hero.afh-hero--arch h1 em { color: var(--afa-gold); }
.afh-hero.afh-hero--arch .afh-hero__sub { color: var(--afa-mu); font-size: 14px; }
.afh-hero.afh-hero--arch .afh-hero__cta { justify-content: center; }
.afh-hero.afh-hero--arch .afh-hero__fine { justify-content: center; color: var(--afa-mu); }
.afh-archwin { order: 1; position: relative; display: grid; justify-items: center; gap: 0; }
.afh-archwin__frame { position: relative; display: grid; place-items: center; width: min(72vw, 300px); aspect-ratio: 5 / 6; border-radius: var(--afa-arch); background: radial-gradient(70% 60% at 50% 40%, #7A1C25, var(--afa-ox) 58%, var(--afa-ox3)); border: 2px solid var(--afa-gold); outline: 1px solid rgba(217,169,58,.55); outline-offset: 6px; overflow: hidden; }
.afh-archwin__frame img { width: 74% !important; height: auto !important; max-height: 74%; object-fit: contain; border-radius: 16px; margin-top: 12%; box-shadow: 0 30px 50px -20px rgba(0,0,0,.7); }
.afh-archwin__num { position: absolute; top: 9%; left: 0; right: 0; text-align: center; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 30px; line-height: 1; color: var(--afa-goldhi); }
.afh-archwin__num small { display: block; font-family: "Inter", system-ui, sans-serif; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--afa-onm); font-weight: 700; margin-top: 3px; }
.afh-archwin__tag { position: relative; z-index: 1; margin-top: -22px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--afa-bd); box-shadow: 0 16px 30px -18px rgba(61,12,17,.7); color: var(--afa-tx) !important; text-decoration: none !important; font-size: 12px; }
.afh-archwin__tag strong { background: var(--afa-ox); color: var(--afa-goldsoft); border-radius: 999px; padding: 5px 10px; font-size: 13px; }
@media (min-width: 900px) {
	.afh-hero.afh-hero--arch .afh-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 48px; padding-block: 44px 52px; }
	.afh-hero.afh-hero--arch .afh-hero__txt { order: 1; text-align: left; align-items: flex-start; }
	.afh-hero.afh-hero--arch .afh-hero__cta, .afh-hero.afh-hero--arch .afh-hero__fine { justify-content: flex-start; }
	.afh-hero.afh-hero--arch h1 { font-size: 54px; }
	.afh-archwin { order: 2; }
	.afh-archwin__frame { width: 360px; }
	.afh-archwin__num { font-size: 40px; }
}

/* ============ HOME RANGES (arch cards on the dark section) ============ */
.afh-rgrid.afa-rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
.afh-rgrid.afa-rgrid .afa-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; color: var(--afa-on) !important; text-decoration: none !important; box-shadow: none; }
.afh-rgrid.afa-rgrid .afa-card:hover { transform: none; box-shadow: none; }
.afh-rgrid.afa-rgrid .afa-card .afa-arch { margin-bottom: 4px; }
.afh-rgrid.afa-rgrid .afa-card:hover .afa-arch { border-color: var(--afa-goldhi); box-shadow: 0 0 0 4px rgba(217,169,58,.3), 0 20px 34px -20px rgba(0,0,0,.8); }
.afh-rgrid.afa-rgrid .afa-t { color: #fff; }
.afh-rgrid.afa-rgrid .afa-m { color: var(--afa-onm); font-size: 10.5px; }
.afh-rgrid.afa-rgrid .afa-pr { display: inline-block; margin-top: 2px; border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 800; background: var(--afa-gold); color: var(--afa-ox); }
.afh-rgrid.afa-rgrid .afh-rg__badge { top: -6px; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap; }
.afh-rgrid.afa-rgrid .afa-card--cta { justify-content: center; aspect-ratio: 5 / 6; border-radius: var(--afa-arch); border: 1.5px dashed rgba(217,169,58,.6); padding: 14px 8px; align-self: start; }
.afh-rgrid.afa-rgrid .afa-card--cta p { font-size: 10.5px; }
.afh-rgrid.afa-rgrid.is-filtered .afa-card--cta { display: none; }
@media (max-width: 480px) {
	.afh-rgrid.afa-rgrid .afa-t { font-size: 11.5px; }
	.afh-rgrid.afa-rgrid .afa-m { display: none; }
	.afh-rgrid.afa-rgrid .afa-pr { font-size: 10.5px; padding: 2px 7px; }
	.afa-num { font-size: 17px; }
}
@media (min-width: 768px) { .afh-rgrid.afa-rgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 14px; } }
@media (min-width: 1100px) { .afh-rgrid.afa-rgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 16px; } }

/* ============ HEADER DRAWER (mobile) ============ */
.afdh-drawer .afdh-drawer__panel { width: 80vw; max-width: 440px; background: radial-gradient(120% 40% at 50% 0, #5A1219, var(--afa-ox) 45%, var(--afa-ox2)); color: var(--afa-on); }
.afdh-drawer .afdh-drawer__head { background: transparent; border-bottom: 1px solid rgba(217,169,58,.2); }
.afdh-drawer .afdh-drawer__search { background: transparent; border-bottom: 0; padding: 12px 14px 4px; }
.afdh-drawer .afdh-drawer__search .afdh-sform { background: rgba(255,255,255,.07); border: 1px solid rgba(217,169,58,.45); border-radius: 999px; color: var(--afa-onm); }
.afdh-drawer .afdh-drawer__search .afdh-sform input { color: #fff; }
.afdh-drawer .afdh-drawer__search .afdh-sform input::placeholder { color: var(--afa-onm); }
.afdh-drawer .afdh-drawer__search .afdh-sform__go { background: var(--afa-gold); color: var(--afa-ox); border-radius: 999px; }
.afa-dr { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 14px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; }
.afa-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 0; margin: 8px 0 0; border-bottom: 1px solid rgba(217,169,58,.25); background: var(--afa-ox); }
.afa-tabs button { flex: 1; min-height: 44px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--afa-onm); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .15s, box-shadow .15s; padding: 0 4px; }
.afa-tabs button[aria-selected="true"] { color: var(--afa-goldhi); box-shadow: inset 0 -3px 0 var(--afa-gold); }
.afa-tabs button:focus-visible { outline: 2px solid var(--afa-goldhi); outline-offset: -2px; }
.afa-tp { padding-top: 12px; }
.afa-all { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; margin-bottom: 12px; border-radius: 999px; background: var(--afa-gold); color: var(--afa-ox) !important; font-weight: 800; font-size: 13.5px; text-decoration: none !important; }
.afa-all svg { width: 16px; height: 16px; }
.afa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.afa-grid--few { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 220px; }
.afa-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--afa-on) !important; text-decoration: none !important; min-width: 0; }
.afa-tile .afa-arch { background: #fff; margin-bottom: 3px; }
.afa-tile .afa-t { color: #fff; font-size: 11px; }
.afa-tile .afa-m { color: var(--afa-onm); font-size: 9.5px; }
.afa-tile .afa-num { font-size: 15px; top: 9%; }
.afa-tile:focus-visible .afa-arch { outline: 2px solid var(--afa-goldhi); outline-offset: 3px; }
.afa-rows, .afa-links { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid rgba(217,169,58,.2); }
.afa-rows a, .afa-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 8px 2px; border-bottom: 1px solid rgba(217,169,58,.14); color: var(--afa-on) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; }
.afa-rows a.is-guide span::before { content: "Guide · "; color: var(--afa-goldsoft); font-weight: 700; }
.afa-rows svg, .afa-links svg { width: 16px; height: 16px; color: var(--afa-gold); flex: none; }
.afa-links a.is-hl { color: var(--afa-goldhi) !important; }
.afa-links { margin-top: 16px; }
.afa-contact { margin-top: 14px; padding: 14px; border: 1px solid rgba(217,169,58,.35); border-radius: 16px; display: grid; gap: 4px; }
.afa-contact strong { color: #fff; font-size: 14px; }
.afa-contact span { color: var(--afa-onm); font-size: 12.5px; }
.afa-contact a { color: var(--afa-goldhi) !important; font-weight: 800; font-size: 16px; text-decoration: none !important; }
.afa-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 18px; }
.afa-btn { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; border-radius: 999px; font-weight: 800; font-size: 13.5px; text-decoration: none !important; }
.afa-btn svg { width: 17px; height: 17px; }
.afa-btn--gold { background: var(--afa-gold); color: var(--afa-ox) !important; }
.afa-btn--line { border: 1.5px solid rgba(243,210,122,.5); color: var(--afa-goldsoft) !important; }
.afa-note { margin: 10px 0 0; font-size: 11px; color: var(--afa-onm); text-align: center; }
.afdh-drawer .afdh-drawer__head .afdh-ib { border-color: rgba(217,169,58,.45); color: var(--afa-goldhi); }

/* ============ DESKTOP MEGA MENU ============ */
.afdh-panel .afdh-tiles:has(.afa-tile--mega) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
.afdh-panel .afdh-tiles--big:has(.afa-tile--mega) { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.afa-tile--mega .afa-arch { max-width: 110px; }
.afa-tile--mega .afa-t { font-size: 11.5px; }
.afa-tile--mega .afa-num { font-size: 17px; }
.afa-tile--mega:hover .afa-arch { border-color: var(--afa-goldhi); box-shadow: 0 0 0 4px rgba(217,169,58,.28); }
.afdh-panel .afa-tile--all { align-self: start; aspect-ratio: 5 / 6; max-width: 110px; width: 100%; display: grid; place-content: center; text-align: center; border-radius: var(--afa-arch) !important; border: 1.5px dashed rgba(217,169,58,.6) !important; background: transparent !important; }
.afdh-panel { background-image: var(--afa-lattice) !important; background-size: 22px 22px !important; background-position: 0 0, 11px 11px !important; }
.afdh-feat__img { border-radius: var(--afa-arch) !important; overflow: hidden; border: 1.5px solid var(--afa-gold); }

/* ============ SIDE CART ============ */
body.afd-woo-ox .xoo-wsc-img-col img { border-radius: var(--afa-arch) !important; border: 1px solid var(--afa-gold); background: #fff; }
body.afd-woo-ox .xoo-wsc-body { background-image: var(--afa-lattice) !important; background-size: 22px 22px !important; background-position: 0 0, 11px 11px !important; }
/* Desktop floating bag: arch-topped instead of a round bubble */
body.afd-woo-ox .xoo-wsc-basket { border-radius: 999px 999px 16px 16px !important; border: 1.5px solid var(--afa-gold) !important; width: 58px !important; height: 66px !important; }
/* Phones: the cart rises as a bottom sheet */
@media (max-width: 767px) {
	/* slide with "bottom" (not transform) so the fixed cart button inside the container stays on screen */
	body.afd-woo-ox .xoo-wsc-container { left: 0 !important; right: 0 !important; top: auto !important; bottom: -100vh !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 88vh; border-radius: 26px 26px 0 0; overflow: visible; transition: bottom .34s cubic-bezier(.2,.8,.2,1) !important; }
	body.afd-woo-ox.xoo-wsc-cart-active .xoo-wsc-container { bottom: 0 !important; }
	body.afd-woo-ox .xoo-wsc-container > .xoo-wsc-header { border-radius: 26px 26px 0 0; }
	body.afd-woo-ox .xoo-wsc-header { padding-top: 22px !important; }
	body.afd-woo-ox .xoo-wsc-header::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 9px; background: rgba(243,210,122,.5); }
	body.afd-woo-ox .xoo-wsc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}

/* ============ SHOP range rail ============ */
.afs-range img { border-radius: 999px 999px 10px 10px !important; border: 1px solid var(--afa-gold); background: #fff !important; }
.afs-range__ic { border-radius: 999px 999px 10px 10px !important; }
.afs-hero, .afi-hero { }

@media (prefers-reduced-motion: reduce) { .afa-arch img, body.afd-woo-ox .xoo-wsc-container { transition: none !important; } }

/* Hello theme paints every button pink on hover/focus; keep header controls on-brand. */
.afdh .afdh-ib, .afdh .afdh-top__a, .afdh-drawer .afdh-ib, .afa-tabs button, .afdh-tabbar button { background-color: transparent !important; }
.afdh .afdh-ib:hover, .afdh-drawer .afdh-ib:hover { background-color: rgba(217,169,58,.12) !important; }
.afdh .afdh-top__a:hover, .afdh .afdh-top__a[aria-expanded="true"] { color: var(--afa-goldhi) !important; }
.afdh .afdh-sform__go:hover, .afdh-drawer .afdh-sform__go:hover { background-color: var(--afa-goldhi) !important; color: var(--afa-ox) !important; }
/* mobile hero: smaller arch so the headline shows in the first screen */
@media (max-width: 899px) {
	.afh-hero.afh-hero--arch .afh-in { padding-block: 16px 26px; gap: 12px; }
	.afh-archwin__frame { width: min(58vw, 240px); }
	.afh-archwin__num { font-size: 24px; }
	.afh-hero.afh-hero--arch h1 { font-size: 29px; }
}
body.afd-woo-ox .xoo-wsc-img-col img { max-height: 110px; object-fit: contain; }
.afa-links .afdh-badge { margin-left: 8px; }

/* ============ PRODUCT CARDS (shop, category, home tabs) ============ */
.afc-card .afc-card__im, .afh-pc .afh-pc__im { aspect-ratio: 5 / 6; border-radius: var(--afa-arch); background: #fff; border: 1.5px solid color-mix(in srgb, var(--fc, #D9A93A) 45%, #D9A93A); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc, #D9A93A) 10%, transparent); place-items: end center; padding-bottom: 6%; }
.afh-pc .afh-pc__im { border-color: var(--afa-gold); box-shadow: 0 0 0 3px rgba(217,169,58,.12); }
.afc-card .afc-card__im img, .afh-pc .afh-pc__im img { max-width: 80% !important; max-height: 74% !important; width: auto !important; height: auto !important; }
.afc-card .afc-card__im .afh-bdg, .afh-pc .afh-pc__im .afh-bdg { top: 9%; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.afc-card:hover .afc-card__im { border-color: var(--fc, var(--afa-gold)); }
.afc-card { border-radius: 18px; }

/* ============ PRODUCT PAGE gallery ============ */
.afp-main { border-radius: var(--afa-arch) !important; border: 2px solid var(--afa-gold) !important; outline: 1px solid rgba(217,169,58,.45); outline-offset: 6px; background: #fff !important; background-image: none !important; aspect-ratio: 5 / 6 !important; place-items: end center !important; padding-bottom: 6%; }
.afp-main img { max-height: 78% !important; max-width: 84% !important; }
.afp-gal { padding: 8px 8px 0; }
.afp-thumbs button { border-radius: 999px 999px 8px 8px !important; height: 70px !important; }
.afp-thumbs button[aria-pressed="true"] { border-color: var(--afa-gold) !important; box-shadow: inset 0 0 0 1px var(--afa-gold) !important; }
@media (max-width: 767px) { .afp-main { max-width: 78vw; margin-inline: auto; } }
@media (min-width: 768px) { .afp-main { aspect-ratio: 1 / 1 !important; } }