/* Beeskind (jomla) theme. Mobile first; logical properties so it reads right in RTL.
 * One loud element per card: the honey price tag. Everything else stays quiet. */

:root {
	--jomla-primary: #1748c6;   /* action: add, links, current state (Customizer) */
	--jomla-accent: #ffc533;    /* price tag, honey (Customizer) */
	--jomla-ink: #13203a;       /* hero, footer, cart bar */
	--jomla-text: #18233a;
	--jomla-muted: #5a6478;
	--jomla-bg: #f3f5f9;
	--jomla-card: #ffffff;
	--jomla-line: #dde3ec;
	--jomla-danger: #b42318;
	--jomla-ok: #157a4a;
	/* Corners, one rule everywhere: panels and cards 14, controls 10, small chips inside controls 8, pills full. */
	--jomla-radius: 14px;
	--jomla-ctl: 10px;
	--jomla-r-sm: 8px;
	/* Type scale (16px base, steps of about 1.125): every size on the site is one of these. */
	--jomla-fs-xs: .8125rem;  /* 13px: meta lines, badges, the bottom bar */
	--jomla-fs-sm: .875rem;   /* 14px: helper text, notes */
	--jomla-fs-base: 1rem;    /* 16px: body, product names */
	--jomla-fs-md: 1.125rem;  /* 18px: panel headings, prices in cards */
	--jomla-fs-lg: 1.3125rem; /* 21px: section titles, totals */
	--jomla-fs-xl: 1.5rem;    /* 24px: page titles, big totals */
	--jomla-fs-title: clamp(1.375rem, 4vw, 1.75rem); /* the one heading at the top of a page */
	/* Layers, lowest to highest. */
	--jomla-z-header: 50;
	--jomla-z-bar: 60;
	--jomla-z-search: 80;
	--jomla-z-drawer: 100;
	--jomla-z-backdrop: 110;
	--jomla-z-sheet: 120;
	--jomla-z-toast: 200;
	--jomla-bottombar: 64px;
	--jomla-cartbar: 0px;
	--jomla-font: "Tajawal", Tahoma, Arial, sans-serif;
	--jomla-display: "Tajawal", Tahoma, Arial, sans-serif;
	--jomla-hover: color-mix(in srgb, var(--jomla-primary) 10%, #fff);
	--jomla-shadow: 0 1px 2px rgba(19, 32, 58, .06), 0 4px 16px rgba(19, 32, 58, .06);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font: 16px/1.6 var(--jomla-font);
	color: var(--jomla-text);
	background: var(--jomla-bg);
}
/* Room for the fixed bars is kept inside the dark footer, so no pale strip shows under it. */
.jomla-footer { padding-block-end: calc(var(--jomla-bottombar) + var(--jomla-cartbar) + env(safe-area-inset-bottom)); }
body:has(.jomla-cartbar:not([hidden])):not(.woocommerce-cart):not(.woocommerce-checkout) { --jomla-cartbar: 64px; }
body.jomla-locked { overflow: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--jomla-primary); text-decoration: none; }

/* Text links: on hover a soft pill behind the words, like a quiet button. Never an underline.
   The negative margin keeps the words where they were, so nothing moves when the pill appears. */
.jomla-content a:not(.jomla-btn):not(.button):not(.remove):not([class*="jomla-acct"]):not(.jomla-acct-nav a), .woocommerce-breadcrumb a, .jomla-section-head a, .jomla-sidecart-edit, .jomla-result-all,
.woocommerce-info a, .woocommerce-message a, .woocommerce-error a, .woocommerce-privacy-policy-text a,
.woocommerce-MyAccount-content a:not(.button):not([class*="jomla-"]), .showcoupon, .woocommerce-remove-coupon,
.jomla-footer-links a, .jomla-toast a, .woocommerce-cart-form a:not(.button):not(.remove):not(.jomla-btn), .woocommerce-LostPassword a {
	display: inline-block; padding: 2px 8px; margin-inline: -8px; border-radius: var(--jomla-r-sm);
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}
.jomla-content a:not(.jomla-btn):not(.button):not(.remove):not([class*="jomla-acct"]):not(.jomla-acct-nav a):hover, .woocommerce-breadcrumb a:hover, .jomla-section-head a:hover, .jomla-sidecart-edit:hover, .jomla-result-all:hover,
.woocommerce-info a:hover, .woocommerce-message a:hover, .woocommerce-error a:hover, .woocommerce-privacy-policy-text a:hover,
.woocommerce-MyAccount-content a:not(.button):not([class*="jomla-"]):hover, .showcoupon:hover, .woocommerce-remove-coupon:hover,
.woocommerce-cart-form a:not(.button):not(.remove):not(.jomla-btn):hover, .woocommerce-LostPassword a:hover {
	background: var(--jomla-hover);
}
.jomla-footer-links a:hover, .jomla-toast a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--jomla-display); font-weight: 700; line-height: 1.35; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto;
	inset-block-start: 8px; inset-inline-start: 8px;
	z-index: 1000; background: #fff; padding: 8px 12px;
}
:focus-visible { outline: 3px solid var(--jomla-primary); outline-offset: 2px; }

.jomla-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 16px; }
.jomla-main { padding-block: 16px 32px; }
.jomla-home { padding-block-start: 0; }
.jomla-page-title { font-size: var(--jomla-fs-xl); margin: 0 0 16px; }
.jomla-content { background: var(--jomla-card); border-radius: var(--jomla-radius); padding: 16px; }

.jomla-icon { display: block; flex: none; }
.jomla-icon-btn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border: 0; border-radius: var(--jomla-ctl);
	background: transparent; color: inherit;
	cursor: pointer; text-decoration: none;
	transition: background-color .15s;
}
.jomla-icon-btn:hover { background: var(--jomla-bg); }

.jomla-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 10px 22px;
	border: 0; border-radius: var(--jomla-ctl);
	background: var(--jomla-primary); color: #fff;
	font-weight: 700; text-decoration: none; cursor: pointer;
	transition: filter .15s;
}
.jomla-btn:hover { filter: brightness(1.08); }
.jomla-btn-accent { background: var(--jomla-accent); color: var(--jomla-ink); }

/* ---------- Facts strip ---------- */

.jomla-facts-strip { background: var(--jomla-ink); color: #e6ebf4; font-size: var(--jomla-fs-xs); }
.jomla-facts-strip ul {
	display: flex; gap: 20px; list-style: none; margin-block: 0; padding-block: 6px;
	overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.jomla-facts-strip li { display: flex; align-items: center; gap: 6px; }
.jomla-facts-strip .jomla-icon { width: 16px; height: 16px; color: var(--jomla-accent); }
.home .jomla-facts-strip { display: none; } /* the hero shows them */

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

.jomla-header { position: sticky; top: 0; z-index: var(--jomla-z-header); background: var(--jomla-card); box-shadow: 0 1px 0 var(--jomla-line); }
.admin-bar .jomla-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .jomla-header { top: 32px; } }
@media (max-width: 600px) { .admin-bar .jomla-header { top: 0; } }

.jomla-header-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "menu brand actions" "search search search";
	align-items: center;
	gap: 6px 8px;
	padding-block: 8px 10px;
}
.jomla-menu-toggle { grid-area: menu; }
.jomla-brand { grid-area: brand; min-width: 0; }
.jomla-brand a {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--jomla-display); font-weight: 700; font-size: var(--jomla-fs-lg); letter-spacing: -.01em;
	color: var(--jomla-ink); text-decoration: none;
}
.jomla-brand-mark {
	width: 24px; height: 27px; flex: none;
	background: var(--jomla-accent);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.jomla-brand img { max-height: 44px; width: auto; display: block; }
.jomla-header-actions { grid-area: actions; display: flex; align-items: center; gap: 4px; }

.jomla-search { grid-area: search; position: relative; }
.jomla-search > .jomla-icon {
	position: absolute; inset-block-start: 50%; inset-inline-start: 14px; transform: translateY(-50%);
	width: 20px; height: 20px; color: var(--jomla-muted); pointer-events: none;
}
.jomla-search input[type="search"] {
	width: 100%; min-height: 46px;
	padding-block: 8px; padding-inline: 44px 14px;
	border: 1.5px solid transparent; border-radius: var(--jomla-ctl);
	background: var(--jomla-bg);
	font-size: 16px; /* no iOS zoom */
	transition: border-color .15s, background-color .15s;
}
.jomla-search input[type="search"]:focus { outline: none; border-color: var(--jomla-primary); background: #fff; }
.jomla-search input::-webkit-search-cancel-button { cursor: pointer; }

.jomla-search-results {
	position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px); z-index: var(--jomla-z-search);
	background: #fff; border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius);
	box-shadow: 0 12px 32px rgba(19, 32, 58, .16);
	max-height: min(70vh, 460px); overflow-y: auto; padding: 6px;
}
.jomla-search-results[hidden] { display: none; }
.jomla-result {
	display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px;
	padding: 6px 8px; border-radius: var(--jomla-r-sm); color: var(--jomla-text); text-decoration: none;
}
.jomla-result img { width: 48px; height: 48px; object-fit: contain; background: var(--jomla-bg); border-radius: var(--jomla-r-sm); }
.jomla-result-name { font-weight: 500; line-height: 1.35; font-size: var(--jomla-fs-base); }
.jomla-result-price { font-family: var(--jomla-display); font-weight: 700; white-space: nowrap; }
.jomla-result[aria-selected="true"], .jomla-result:hover { background: color-mix(in srgb, var(--jomla-primary) 8%, #fff); }
.jomla-result-all { display: block; padding: 10px 8px; text-align: center; font-weight: 700; text-decoration: none; border-block-start: 1px solid var(--jomla-line); margin-block-start: 4px; }
.jomla-result-empty { padding: 14px 8px; color: var(--jomla-muted); text-align: center; margin: 0; }

.jomla-header-cart {
	position: relative; display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; min-width: 44px; padding-inline: 10px; justify-content: center;
	border-radius: var(--jomla-ctl); color: var(--jomla-ink); text-decoration: none;
}
.jomla-header-cart:hover { background: var(--jomla-bg); }
.jomla-cart-total { display: none; font-family: var(--jomla-display); font-weight: 700; font-size: var(--jomla-fs-base); }

.jomla-cart-count {
	position: absolute; inset-block-start: 2px; inset-inline-end: 0;
	min-width: 20px; height: 20px; padding-inline: 5px;
	border-radius: 10px; background: var(--jomla-accent); color: var(--jomla-ink);
	font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.jomla-cart-count[data-count="0"], .jomla-cart-count[data-count="0"] ~ .jomla-cart-total { display: none; }

.jomla-nav { display: none; border-block-start: 1px solid var(--jomla-line); }
.jomla-menu { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.jomla-menu a {
	display: block; margin-block: 6px; padding: 6px 12px; border-radius: var(--jomla-r-sm); color: var(--jomla-text); text-decoration: none; white-space: nowrap; font-weight: 500;
	transition: background-color .15s ease, color .15s ease;
}
.jomla-menu a:hover { background: var(--jomla-hover); color: var(--jomla-primary); }
.jomla-menu .current-menu-item a, .jomla-menu a[aria-current="page"] { background: var(--jomla-hover); color: var(--jomla-primary); font-weight: 700; }

/* Drawer: slides in from the start edge. Account first, then quick links with icons, categories with their
   item counts, and the WhatsApp order button pinned at the bottom. */
.jomla-drawer {
	position: fixed; inset: 0; z-index: var(--jomla-z-drawer);
	background: rgba(19, 32, 58, 0); transition: background-color .22s ease;
}
.jomla-drawer[hidden] { display: none; }
.jomla-drawer.is-open { background: rgba(19, 32, 58, .5); }
.jomla-drawer-panel {
	position: absolute; inset-block: 0; inset-inline-start: 0;
	width: min(340px, 88vw); background: var(--jomla-bg);
	display: flex; flex-direction: column;
	transform: translateX(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1);
	box-shadow: 0 0 40px rgba(19, 32, 58, .25);
}
[dir="ltr"] .jomla-drawer-panel { transform: translateX(-100%); }
.jomla-drawer.is-open .jomla-drawer-panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.jomla-drawer, .jomla-drawer-panel { transition: none; }
}

.jomla-drawer-head {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 10px 8px; padding-inline-start: 16px; background: var(--jomla-card); border-block-end: 1px solid var(--jomla-line);
}
.jomla-drawer-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--jomla-display); font-size: var(--jomla-fs-md); color: var(--jomla-ink); min-width: 0; }
.jomla-drawer-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jomla-drawer-body { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 12px; align-content: start; }

.jomla-drawer-account {
	display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
	padding: 12px; background: var(--jomla-ink); color: #fff; border-radius: var(--jomla-radius); text-decoration: none;
}
.jomla-drawer-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--jomla-accent); color: var(--jomla-ink); }
.jomla-drawer-account-text strong { display: block; font-size: var(--jomla-fs-base); }
.jomla-drawer-account-text small { display: block; font-size: var(--jomla-fs-xs); color: #cfd7e6; }
.jomla-drawer-account > .jomla-icon { width: 18px; height: 18px; color: #cfd7e6; }
.jomla-drawer-account:hover { background: color-mix(in srgb, var(--jomla-ink) 88%, #fff); }

.jomla-drawer-links, .jomla-drawer-cats, .jomla-drawer-menu {
	list-style: none; margin: 0; padding: 6px; background: var(--jomla-card); border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius);
}
.jomla-drawer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.jomla-drawer-links a {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	min-height: 76px; padding: 10px 6px; border-radius: var(--jomla-ctl);
	color: var(--jomla-ink); text-decoration: none; font-weight: 500; font-size: var(--jomla-fs-sm); text-align: center;
	background: var(--jomla-bg); transition: background-color .15s ease, color .15s ease;
}
.jomla-drawer-links .jomla-icon { width: 24px; height: 24px; color: var(--jomla-primary); }
.jomla-drawer-links a:hover, .jomla-drawer-links a[aria-current="page"] { background: var(--jomla-hover); color: var(--jomla-primary); }
.jomla-drawer-links .jomla-cart-count { inset-block-start: 8px; inset-inline-end: calc(50% - 26px); }

.jomla-drawer-label { margin: 4px 4px 8px; font-size: var(--jomla-fs-sm); font-weight: 700; color: var(--jomla-muted); }
.jomla-drawer-cats a, .jomla-drawer-menu a {
	display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
	min-height: 56px; padding: 8px 10px; border-radius: var(--jomla-ctl);
	color: var(--jomla-ink); text-decoration: none; transition: background-color .15s ease;
}
.jomla-drawer-menu a { display: flex; min-height: 48px; font-weight: 500; }
.jomla-drawer-cats li + li { border-block-start: 1px solid var(--jomla-bg); }
.jomla-drawer-cats a:hover, .jomla-drawer-cats a[aria-current="page"], .jomla-drawer-menu a:hover { background: var(--jomla-hover); color: var(--jomla-primary); }
.jomla-drawer-cat-mark {
	width: 40px; height: 44px; display: flex; align-items: center; justify-content: center; overflow: hidden;
	background: color-mix(in srgb, var(--jomla-accent) 35%, #fff); color: var(--jomla-ink);
	font-family: var(--jomla-display); font-weight: 800; font-size: var(--jomla-fs-md);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.jomla-drawer-cat-mark img { width: 100%; height: 100%; object-fit: cover; }
.jomla-drawer-cat-name { font-weight: 700; line-height: 1.35; }
.jomla-drawer-cat-name small { display: block; font-weight: 400; font-size: var(--jomla-fs-xs); color: var(--jomla-muted); }
.jomla-drawer-cats a > .jomla-icon { width: 18px; height: 18px; color: var(--jomla-muted); }
[dir="ltr"] .jomla-drawer-cats a > .jomla-icon, [dir="ltr"] .jomla-drawer-account > .jomla-icon { transform: scaleX(-1); }

.jomla-drawer-foot {
	display: grid; gap: 8px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
	background: var(--jomla-card); border-block-start: 1px solid var(--jomla-line);
}
.jomla-drawer-foot .jomla-btn { width: 100%; }

/* ---------- Home ---------- */

.jomla-hero {
	position: relative; overflow: hidden;
	background-color: var(--jomla-ink);
	/* Honeycomb, drawn faint so the headline stays the thing you read. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33M0 16-28 0M56 16 84 0' fill='none' stroke='%23ffc533' stroke-opacity='.13' stroke-width='1.5'/%3E%3C/svg%3E");
	color: #fff;
	padding-block: 36px 32px;
}
.jomla-hero.has-image { background-image: linear-gradient(to left, rgba(19, 32, 58, .94) 30%, rgba(19, 32, 58, .55)), var(--jomla-hero); background-size: cover; background-position: center; }
.jomla-hero-inner { display: grid; gap: 24px; }
.jomla-hero h1 { margin: 0 0 10px; font-size: clamp(1.65rem, 6vw, 2.75rem); line-height: 1.25; max-width: 16ch; text-wrap: balance; }
.jomla-hero p { margin: 0 0 22px; max-width: 46ch; color: #cfd7e6; }
.jomla-hero-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jomla-hero-facts li {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px; border-radius: var(--jomla-radius);
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
	font-weight: 500;
}
.jomla-hero-facts .jomla-icon { color: var(--jomla-accent); }

.jomla-section { margin-block: 28px; }
.jomla-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.jomla-section-title { font-size: var(--jomla-fs-lg); margin: 0 0 14px; }
.jomla-section-head a { font-weight: 700; text-decoration: none; }

.jomla-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jomla-cat {
	display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
	padding: 12px; background: var(--jomla-card); border-radius: var(--jomla-radius);
	text-decoration: none; color: var(--jomla-text);
	border: 1px solid var(--jomla-line); transition: border-color .15s;
}
.jomla-cat:hover { border-color: var(--jomla-primary); }
.jomla-cat-img {
	grid-row: span 2;
	width: 52px; height: 52px; border-radius: var(--jomla-radius);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	background: color-mix(in srgb, var(--jomla-accent) 30%, #fff); color: var(--jomla-ink);
	font-family: var(--jomla-display); font-weight: 700; font-size: var(--jomla-fs-lg);
}
.jomla-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.jomla-cat-name { font-weight: 700; line-height: 1.3; min-width: 0; }
.jomla-cat-count { font-size: var(--jomla-fs-xs); color: var(--jomla-muted); }

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

.woocommerce-products-header__title, .woocommerce .page-title { font-size: var(--jomla-fs-xl); margin: 0 0 12px; }
.jomla-chips { display: flex; gap: 8px; overflow-x: auto; padding-block-end: 6px; margin-block-end: 12px; scrollbar-width: none; }
.jomla-chip {
	flex: none; display: inline-flex; align-items: center; min-height: 40px; padding-inline: 16px; border-radius: 999px;
	background: var(--jomla-card); border: 1px solid var(--jomla-line);
	color: var(--jomla-text); text-decoration: none; font-weight: 500; font-size: var(--jomla-fs-base);
}
.jomla-chip { transition: background-color .15s ease, border-color .15s ease; }
.jomla-chip:hover { background: var(--jomla-hover); border-color: color-mix(in srgb, var(--jomla-primary) 30%, #fff); }
.jomla-chip[aria-current="page"] { background: var(--jomla-ink); border-color: var(--jomla-ink); color: #fff; }

.woocommerce .woocommerce-breadcrumb { color: var(--jomla-muted); font-size: var(--jomla-fs-sm); }
.woocommerce .woocommerce-breadcrumb a { color: var(--jomla-muted); }
.woocommerce .woocommerce-result-count { color: var(--jomla-muted); font-size: var(--jomla-fs-sm); margin: 0 0 10px; float: none; }
.woocommerce .woocommerce-ordering { margin: 0 0 14px; float: none; }
.woocommerce-ordering select { min-height: 42px; border-radius: var(--jomla-ctl); border: 1px solid var(--jomla-line); padding-inline: 10px; background: #fff; }
@media (min-width: 600px) {
	.woocommerce .woocommerce-result-count { float: inline-start; }
	.woocommerce .woocommerce-ordering { float: inline-end; }
}

.woocommerce ul.products, ul.products {
	list-style: none; margin: 0; padding: 0; clear: both;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
ul.products::before, ul.products::after { content: none !important; }
.woocommerce ul.products li.product, ul.products li.product {
	container-type: inline-size;
	display: flex; flex-direction: column;
	background: var(--jomla-card); border-radius: var(--jomla-radius);
	border: 1px solid var(--jomla-line); padding: 8px; position: relative;
	width: auto !important; margin: 0 !important; float: none !important;
}
ul.products li.product a.woocommerce-LoopProduct-link { color: var(--jomla-text); text-decoration: none; display: block; border-radius: 10px; }
ul.products li.product a.woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title { color: var(--jomla-primary); }
.woocommerce ul.products li.product a img, ul.products li.product img {
	width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--jomla-bg); border-radius: 10px; margin: 0 0 8px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--jomla-font); font-size: var(--jomla-fs-base); line-height: 1.4; margin: 0 0 8px; padding: 0; font-weight: 500;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em;
}

/* Buy box */
.jomla-buy { margin-block-start: auto; display: flex; flex-direction: column; gap: 8px; }
.jomla-buy[hidden], .jomla-tag[hidden] { display: none; }

.jomla-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.jomla-tag-price {
	order: 1; position: relative;
	display: inline-flex; align-items: center; min-height: 34px;
	padding-inline: 10px 12px;
	background: var(--jomla-accent); color: var(--jomla-ink);
	border-radius: 4px 8px 8px 4px;
	font-family: var(--jomla-display); font-weight: 700; font-size: var(--jomla-fs-md); line-height: 1;
	white-space: nowrap;
}
[dir="rtl"] .jomla-tag-price { border-radius: 8px 4px 4px 8px; }
.jomla-tag-price .woocommerce-Price-currencySymbol { font-size: .7em; font-weight: 500; margin-inline: 2px; }
.jomla-tag-flag {
	order: 0; font-size: var(--jomla-fs-xs); font-weight: 700; color: var(--jomla-danger);
	background: color-mix(in srgb, var(--jomla-danger) 10%, #fff); padding: 1px 8px; border-radius: 999px;
}
.jomla-tag-was { order: 2; color: var(--jomla-muted); font-size: var(--jomla-fs-sm); }
.jomla-tag-each { order: 3; flex-basis: 100%; color: var(--jomla-muted); font-size: var(--jomla-fs-xs); }

.jomla-units { display: flex; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.jomla-unit { flex: 1 1 0; min-width: 0; position: relative; }
.jomla-unit input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.jomla-unit span {
	display: flex; align-items: center; justify-content: center; min-height: 38px; padding-inline: 6px;
	border: 1.5px solid var(--jomla-line); border-radius: var(--jomla-r-sm);
	font-size: var(--jomla-fs-sm); font-weight: 500; text-align: center; line-height: 1.2;
	transition: border-color .15s, background-color .15s, color .15s;
}
.jomla-unit input:checked + span { border-color: var(--jomla-primary); background: color-mix(in srgb, var(--jomla-primary) 8%, #fff); color: var(--jomla-primary); font-weight: 700; }
.jomla-unit input:focus-visible + span { outline: 3px solid var(--jomla-primary); outline-offset: 2px; }
.jomla-unit-single { margin: 0; font-size: var(--jomla-fs-sm); color: var(--jomla-muted); }

.jomla-buy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.jomla-stepper {
	display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: stretch;
	border: 1.5px solid var(--jomla-line); border-radius: var(--jomla-ctl); overflow: hidden; background: #fff;
}
.jomla-stepper input {
	min-width: 0; width: 100%; border: 0; padding: 0; text-align: center; background: transparent;
	font-family: var(--jomla-display); font-size: 16px; font-weight: 700;
	-moz-appearance: textfield; appearance: textfield;
}
.jomla-stepper input:focus { outline: none; }
.jomla-stepper:focus-within { border-color: var(--jomla-primary); }
.jomla-stepper input::-webkit-inner-spin-button, .jomla-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.jomla-step {
	border: 0; background: transparent; font-size: var(--jomla-fs-lg); line-height: 1; cursor: pointer; color: var(--jomla-ink);
	min-height: 44px;
}
.jomla-step:hover { background: var(--jomla-bg); }
.jomla-step:disabled { color: #b7bfcc; cursor: default; background: transparent; }

.jomla-add {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 44px; min-width: 44px; padding-inline: 14px;
	border: 0; border-radius: var(--jomla-ctl);
	background: var(--jomla-primary); color: #fff; font-weight: 700; cursor: pointer;
	transition: background-color .2s, filter .15s;
}
.jomla-add:hover { filter: brightness(1.1); }
.jomla-add .jomla-icon { width: 20px; height: 20px; }
.jomla-add.is-loading { cursor: wait; }
.jomla-add.is-loading .jomla-icon { animation: jomla-pulse .8s ease-in-out infinite alternate; }
.jomla-add.is-added { background: var(--jomla-ok); }
@keyframes jomla-pulse { to { opacity: .35; transform: scale(.85); } }

.jomla-limit { margin: 0; font-size: var(--jomla-fs-xs); color: var(--jomla-muted); }
.jomla-out { display: block; text-align: center; color: var(--jomla-muted); font-size: var(--jomla-fs-sm); padding: 10px; background: var(--jomla-bg); border-radius: var(--jomla-ctl); }
.jomla-buy .price { font-family: var(--jomla-display); font-weight: 700; }
ul.products li.product .button { display: flex; text-align: center; }
ul.products li.product .added_to_cart { display: none !important; }

/* Narrow cards (two columns on a phone): icon-only add button */
@container (max-width: 200px) {
	.jomla-add { padding-inline: 0; width: 44px; }
	.jomla-add-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
	.jomla-stepper { grid-template-columns: 32px minmax(0, 1fr) 32px; }
	.jomla-tag-price { font-size: var(--jomla-fs-base); }
}

.woocommerce nav.woocommerce-pagination ul { display: flex; gap: 6px; list-style: none; padding: 0; justify-content: center; flex-wrap: wrap; border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
	display: block; min-width: 44px; padding: 10px; text-align: center; background: #fff; border-radius: var(--jomla-ctl); text-decoration: none; border: 1px solid var(--jomla-line);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--jomla-ink); color: #fff; border-color: var(--jomla-ink); }

/* WooCommerce buttons, notices and forms in the theme's look */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce-page .button {
	background: var(--jomla-primary) !important; color: #fff !important;
	border-radius: var(--jomla-ctl) !important; min-height: 46px; font-weight: 700 !important;
	display: inline-flex; align-items: center; justify-content: center;
}
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	list-style: none; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--jomla-ctl);
	background: #fff; border: 1px solid var(--jomla-line); border-inline-start: 4px solid var(--jomla-primary);
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; }
.woocommerce-error { border-inline-start-color: var(--jomla-danger); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
	min-height: 46px; border-radius: var(--jomla-ctl); border: 1px solid var(--jomla-line); padding: 8px 12px; font-size: 16px;
}

/* Single product: picture beside a short buy column; description and related items underneath. */
.single-product div.product { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.single-product div.product > * { min-width: 0; }
.single-product div.product div.images, .single-product div.product div.summary { float: none; width: 100%; margin: 0; }
.single-product div.product div.images {
	background: var(--jomla-bg); border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius); overflow: hidden;
}
.single-product div.product div.images img { aspect-ratio: 4 / 3; object-fit: contain; width: 100%; max-height: min(440px, 42vh); margin-inline: auto; }
.single-product .woocommerce-product-gallery__trigger { display: none; } /* tapping the picture is enough */
.single-product div.product div.summary {
	background: #fff; border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius); padding: 18px 16px;
	display: flex; flex-direction: column; gap: 14px;
}
.single-product div.product .product_title { font-size: var(--jomla-fs-title); margin: 0; color: var(--jomla-ink); text-wrap: balance; }
.single-product div.product .woocommerce-product-details__short-description { color: var(--jomla-muted); }
.single-product div.product .woocommerce-product-details__short-description p { margin: 0; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
	display: inline-block; color: var(--jomla-ink); background: var(--jomla-accent);
	font-family: var(--jomla-display); font-weight: 700; font-size: var(--jomla-fs-lg); padding: 4px 12px; border-radius: var(--jomla-r-sm);
}
.woocommerce div.product p.price del, .woocommerce div.product span.price del { color: var(--jomla-muted); opacity: 1; }
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins { text-decoration: none; }
.single-product div.product form.cart { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.single-product div.product form.cart .quantity input { min-height: 48px; width: 84px; text-align: center; border-radius: var(--jomla-ctl); border: 1.5px solid var(--jomla-line); font-weight: 700; }
.single-product .variations select { min-height: 48px; border-radius: var(--jomla-ctl); border: 1.5px solid var(--jomla-line); padding-inline: 10px; }

/* The card buy box, at full size. */
.jomla-single-buy .jomla-buy { gap: 14px; }
.jomla-single-buy .jomla-tag-price { font-size: var(--jomla-fs-xl); }
.jomla-single-buy .jomla-unit span { min-height: 50px; font-size: var(--jomla-fs-base); }
.jomla-single-buy .jomla-buy-row { grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
.jomla-single-buy .jomla-stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.jomla-single-buy .jomla-stepper, .jomla-single-buy .jomla-stepper input, .jomla-single-buy .jomla-step { min-height: 52px; }
.jomla-single-buy .jomla-add { min-height: 52px; font-size: var(--jomla-fs-md); }
.jomla-single-buy .jomla-add-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }

/* Ordering facts as small cards, each as wide as its words; the icon sits in the brand's honey hexagon. */
.jomla-single-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jomla-single-facts li {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 6px 14px 6px 8px; padding-inline: 8px 14px;
	background: #fff; border: 1px solid var(--jomla-line); border-radius: var(--jomla-ctl);
	font-size: var(--jomla-fs-sm); font-weight: 500; color: var(--jomla-ink); line-height: 1.3;
}
.jomla-single-facts .jomla-fact-icon {
	flex: none; width: 34px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--jomla-accent); color: var(--jomla-ink);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.jomla-single-facts .jomla-icon { width: 18px; height: 18px; stroke-width: 2.2; }

.jomla-single-desc { background: #fff; border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius); padding: 16px; }
.jomla-single-desc h2, .single-product .related > h2 { font-size: var(--jomla-fs-md); margin: 0 0 10px; }
.jomla-single-desc > :last-child { margin-block-end: 0; }
.single-product .related { margin: 8px 0 0; }

@media (min-width: 860px) {
	.single-product div.product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
	.single-product div.product > :not(.images):not(.summary) { grid-column: 1 / -1; }
	.single-product div.product div.summary { padding: 24px; }
}

/* Cart & checkout */
.woocommerce table.shop_table { background: #fff; border-radius: var(--jomla-radius); border-collapse: separate; border-color: var(--jomla-line); }
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; }
.wc-block-components-button:not(.is-link).contained,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--jomla-primary) !important;
	color: #fff !important;
	border-radius: var(--jomla-ctl) !important;
	min-height: 52px;
	font-weight: 700;
}
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { background: var(--jomla-card); border-radius: var(--jomla-radius); padding: 16px; border: 1px solid var(--jomla-line); }


/* Classic checkout (short form from the cashier plugin): details on one side, order and pay on the other. */
.woocommerce-checkout .woocommerce { background: transparent; }
.woocommerce-checkout form.checkout { display: grid; gap: 16px; }
.woocommerce-checkout #customer_details, .woocommerce-checkout #order_review {
	background: #fff; border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius); padding: 16px;
}
.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { float: none; width: 100%; }
.woocommerce-checkout #customer_details h3 { display: none; }
.wsp-checkout-title, .woocommerce-checkout #order_review_heading { font-size: var(--jomla-fs-md); margin: 0 0 12px; }
.woocommerce-checkout #order_review_heading { margin: 0; }
.woocommerce-checkout .jomla-content { background: transparent; padding: 0; }
.woocommerce form .form-row { padding: 0; margin: 0 0 14px; }
.woocommerce form .form-row label { font-weight: 500; margin-block-end: 4px; }
.woocommerce form .form-row .required { color: var(--jomla-danger); text-decoration: none; }
.woocommerce form .form-row textarea { min-height: 88px; }
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--jomla-primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--jomla-primary) 15%, transparent); }
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { font-size: var(--jomla-fs-sm); }
.woocommerce-checkout table.shop_table { border: 0; margin: 0 0 12px; }
.woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td { padding: 10px 0; border-color: var(--jomla-bg); }
.woocommerce-checkout table.shop_table thead { display: none; }
.woocommerce-checkout .order-total td, .woocommerce-checkout .order-total th { font-family: var(--jomla-display); font-size: var(--jomla-fs-md); color: var(--jomla-ink); }
.woocommerce-checkout #payment { background: var(--jomla-bg); border-radius: var(--jomla-radius); }
.woocommerce-checkout #payment ul.payment_methods { border-color: var(--jomla-line); padding: 12px 14px; }
.woocommerce-checkout #payment div.payment_box { background: #fff; color: var(--jomla-muted); border-radius: var(--jomla-r-sm); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }
.woocommerce-checkout #payment div.form-row { padding: 12px 14px; }
.woocommerce-checkout #place_order { width: 100%; min-height: 54px; font-size: var(--jomla-fs-md); float: none; }
.woocommerce-checkout .woocommerce-privacy-policy-text p { font-size: var(--jomla-fs-sm); color: var(--jomla-muted); margin: 0 0 10px; }
@media (min-width: 960px) {
	.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; column-gap: 24px; }
	.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	.woocommerce-checkout #order_review_heading { grid-row: 1; align-self: end; }
	.woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 2; }
	.woocommerce-checkout #order_review { position: sticky; top: 96px; }
}

/* ---------- Cart: the same order list as "طلبك", with the bill beside it ---------- */

.jomla-btn-ghost { background: #fff; color: var(--jomla-primary); border: 1.5px solid color-mix(in srgb, var(--jomla-primary) 30%, #fff); }
.jomla-btn-ghost:hover { background: var(--jomla-hover); filter: none; }
.jomla-btn-ghost .jomla-icon { width: 20px; height: 20px; }

.woocommerce-cart .jomla-content, .woocommerce-order-received .jomla-content { background: transparent; padding: 0; border: 0; box-shadow: none; }
.woocommerce-cart .woocommerce:has(.jomla-cart) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-notices-wrapper:empty { display: none; }

.jomla-cart, .jomla-bill, .jomla-cart-empty { background: #fff; border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius); }
.jomla-cart-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-block-end: 1px solid var(--jomla-line); }
.jomla-cart-head h2 { margin: 0; font-size: var(--jomla-fs-md); }
.jomla-cart .jomla-cart-more { margin-inline-start: auto; font-weight: 700; font-size: var(--jomla-fs-sm); margin-inline-end: -8px; }

.jomla-cart-lines { list-style: none; margin: 0; padding: 0; }
.jomla-cart-line {
	display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
	grid-template-areas: "thumb info remove" "thumb qty total";
	gap: 10px 12px; align-items: center; padding: 14px 16px;
	border-block-end: 1px solid var(--jomla-bg);
}
.jomla-cart-thumb {
	grid-area: thumb; align-self: start; width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	background: var(--jomla-hover); color: var(--jomla-primary);
}
.jomla-cart-thumb .jomla-icon { width: 24px; height: 24px; }
.jomla-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jomla-cart-info { grid-area: info; min-width: 0; }
.jomla-cart .jomla-cart-name { display: block; width: fit-content; max-width: calc(100% + 16px); font-weight: 700; color: var(--jomla-ink); line-height: 1.4; }
.jomla-cart-info .jomla-line-meta { margin-block-start: 2px; }
.jomla-cart-info dl.variation { display: none; } /* the unit is already in the meta line */

.jomla-cart-qty {
	grid-area: qty; justify-self: start;
	display: inline-grid; grid-template-columns: 42px 54px 42px; align-items: center;
	border: 1.5px solid var(--jomla-line); border-radius: 10px; overflow: hidden; background: #fff;
}
.jomla-cart-qty .jomla-line-step { min-height: 42px; }
.jomla-cart-qty .qty {
	width: 100%; min-height: 42px; padding: 0; border: 0; border-inline: 1px solid var(--jomla-bg); border-radius: 0;
	background: transparent; text-align: center; font-family: var(--jomla-display); font-weight: 700; font-size: var(--jomla-fs-base);
	-moz-appearance: textfield; appearance: textfield;
}
.jomla-cart-qty .qty::-webkit-inner-spin-button, .jomla-cart-qty .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.jomla-cart-qty .qty:focus-visible { outline: 2px solid var(--jomla-primary); outline-offset: -2px; }
.jomla-cart-subtotal { grid-area: total; justify-self: end; font-family: var(--jomla-display); font-size: var(--jomla-fs-md); color: var(--jomla-ink); white-space: nowrap; }
.jomla-cart-line .product-remove { grid-area: remove; justify-self: end; align-self: start; }
.woocommerce .jomla-cart-line a.remove.jomla-line-remove {
	width: 40px; height: 40px; border-radius: var(--jomla-r-sm); font-size: inherit; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	color: var(--jomla-muted) !important; background: transparent;
}
.woocommerce .jomla-cart-line a.remove.jomla-line-remove:hover { background: color-mix(in srgb, var(--jomla-danger) 10%, #fff); color: var(--jomla-danger) !important; }
.jomla-cart-line .jomla-line-remove .jomla-icon { width: 18px; height: 18px; }

.jomla-cart-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 14px 16px 16px; }
.jomla-coupon { flex: 1 1 280px; }
.jomla-coupon label { display: block; font-weight: 500; font-size: var(--jomla-fs-sm); margin-block-end: 6px; }
.jomla-coupon-row { display: flex; gap: 8px; }
.jomla-coupon-row input {
	flex: 1; min-width: 0; min-height: 48px; padding: 8px 12px; font-size: 16px;
	border: 1.5px solid var(--jomla-line); border-radius: var(--jomla-ctl); background: #fff;
}
.jomla-coupon-row input:focus { border-color: var(--jomla-primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--jomla-primary) 15%, transparent); }
.jomla-coupon-row .jomla-btn { padding-inline: 16px; white-space: nowrap; }
.jomla-coupon .coupon-error-notice { color: var(--jomla-danger); font-size: var(--jomla-fs-sm); margin: 6px 0 0; }
/* With scripts on, quantities save by themselves, so the manual button steps aside (still there for the cart script). */
.jomla-js .jomla-cart-update { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; min-height: 0; }
.jomla-cart.processing .jomla-cart-lines { opacity: .55; transition: opacity .15s; }

.woocommerce .cart-collaterals .cart_totals.jomla-bill { float: none; width: 100%; }
.jomla-bill { padding: 16px; display: grid; gap: 12px; }
.jomla-bill h2 { margin: 0; font-size: var(--jomla-fs-md); }
.woocommerce-cart .cart-collaterals .jomla-bill .jomla-bill-rows { width: 100%; border-collapse: collapse; margin: 0; }
.jomla-bill-rows th, .jomla-bill-rows td { padding: 9px 0; border: 0; border-block-end: 1px solid var(--jomla-bg); background: transparent; vertical-align: top; }
.jomla-bill-rows th { text-align: start; font-weight: 400; color: var(--jomla-muted); }
.jomla-bill-rows td { text-align: end; font-weight: 500; }
.jomla-bill-rows .order-total th, .jomla-bill-rows .order-total td { border: 0; padding-block-start: 12px; font-family: var(--jomla-display); font-weight: 800; font-size: var(--jomla-fs-lg); color: var(--jomla-ink); }
.jomla-bill-rows .cart-discount td { color: var(--jomla-ok); }
.jomla-bill-rows .woocommerce-remove-coupon { font-size: var(--jomla-fs-sm); font-weight: 500; color: var(--jomla-danger); }
.woocommerce-cart .jomla-bill .wc-proceed-to-checkout { display: grid; gap: 8px; padding: 0; }
.woocommerce-cart .jomla-bill .wc-proceed-to-checkout a.checkout-button { margin: 0; padding: 10px 22px; font-size: var(--jomla-fs-md); }
.jomla-bill .jomla-sidecart-min p { font-size: var(--jomla-fs-sm); }

.jomla-cart-empty { max-width: 520px; margin-inline: auto; padding: 32px 20px; text-align: center; }
.jomla-cart-empty h2 { margin: 0 0 6px; font-size: var(--jomla-fs-lg); }
.jomla-cart-empty p { color: var(--jomla-muted); margin: 0 0 18px; }
.jomla-cart-empty .jomla-thanks-mark { background: var(--jomla-hover); color: var(--jomla-primary); }

@media (min-width: 720px) {
	.jomla-cart-line {
		grid-template-columns: 52px minmax(0, 1fr) auto 120px 40px;
		grid-template-areas: "thumb info qty total remove";
	}
	.jomla-cart-line .product-remove { align-self: center; }
}
@media (min-width: 960px) {
	.woocommerce-cart .woocommerce:has(.jomla-cart) { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; column-gap: 24px; }
	.woocommerce-cart .woocommerce > .jomla-cart { grid-column: 1; }
	.woocommerce-cart .woocommerce > .cart-collaterals { grid-column: 2; position: sticky; top: 96px; }
}

/* ---------- Order received: one calm confirmation, then what was ordered and where it goes ---------- */

.woocommerce-order-received .jomla-page-title { display: none; } /* the card has the heading */
.jomla-thanks { display: grid; gap: 16px; max-width: 920px; margin-inline: auto; }
.jomla-thanks-card { background: #fff; border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius); padding: 28px 18px 18px; text-align: center; }
.jomla-thanks-mark {
	width: 60px; height: 68px; margin-block-end: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--jomla-ok) 14%, #fff); color: var(--jomla-ok);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.jomla-thanks-mark .jomla-icon { width: 30px; height: 30px; stroke-width: 2.6; }
.jomla-thanks-card.is-failed .jomla-thanks-mark { background: color-mix(in srgb, var(--jomla-danger) 12%, #fff); color: var(--jomla-danger); }
.jomla-thanks-title { margin: 0 0 6px; font-size: var(--jomla-fs-title); color: var(--jomla-ink); text-wrap: balance; }
.jomla-thanks-lead { margin: 0 auto 20px; max-width: 46ch; color: var(--jomla-muted); }
.jomla-thanks-lead bdi { color: var(--jomla-ink); font-weight: 700; }
.jomla-thanks-facts {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0;
	background: var(--jomla-line); border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius); overflow: hidden; text-align: start;
}
.jomla-thanks-facts > div { background: #fff; padding: 12px 14px; min-width: 0; }
.jomla-thanks-facts dt { font-size: var(--jomla-fs-xs); color: var(--jomla-muted); }
.jomla-thanks-facts dd { margin: 2px 0 0; font-weight: 700; color: var(--jomla-ink); overflow-wrap: anywhere; }
.jomla-thanks-facts .is-total { background: var(--jomla-hover); }
.jomla-thanks-facts .is-total dd { font-family: var(--jomla-display); font-size: var(--jomla-fs-md); font-weight: 800; color: var(--jomla-primary); }
.jomla-thanks-card .jomla-thanks-actions { justify-content: center; margin-block-start: 16px; }

.jomla-thanks-grid { display: grid; gap: 16px; }
.jomla-thanks-panel { background: #fff; border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius); padding: 16px; }
.jomla-thanks-panel h2 { margin: 0 0 6px; font-size: var(--jomla-fs-md); }
.jomla-thanks-items { list-style: none; margin: 0; padding: 0; }
.jomla-thanks-items li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-block-end: 1px solid var(--jomla-bg); }
.jomla-thanks-qty { min-width: 2.4em; padding: 0 6px; border-radius: var(--jomla-r-sm); background: var(--jomla-hover); color: var(--jomla-primary); font-family: var(--jomla-display); font-weight: 800; text-align: center; }
.jomla-thanks-name { font-weight: 500; color: var(--jomla-ink); }
.jomla-thanks-name small { display: block; font-size: var(--jomla-fs-xs); color: var(--jomla-muted); font-weight: 400; }
.jomla-thanks-line { white-space: nowrap; font-weight: 500; }
.jomla-thanks-totals { margin: 6px 0 0; }
.jomla-thanks-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.jomla-thanks-totals dt { color: var(--jomla-muted); }
.jomla-thanks-totals dd { margin: 0; }
.jomla-thanks-totals .is-total { margin-block-start: 4px; padding-block-start: 10px; border-block-start: 1px solid var(--jomla-line); }
.jomla-thanks-totals .is-total dt, .jomla-thanks-totals .is-total dd { font-family: var(--jomla-display); font-weight: 800; font-size: var(--jomla-fs-md); color: var(--jomla-ink); }
.jomla-thanks-addr { display: grid; gap: 2px; margin: 0 0 12px; line-height: 1.6; }
.jomla-thanks-addr strong { color: var(--jomla-ink); }
.jomla-thanks-addr bdi { justify-self: start; }
.jomla-thanks-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--jomla-bg); }
.jomla-thanks-note span { display: block; font-size: var(--jomla-fs-xs); color: var(--jomla-muted); }
.jomla-thanks-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.jomla-thanks-actions .jomla-btn { flex: 1 1 auto; white-space: nowrap; }
.jomla-thanks > p { margin: 0; text-align: center; color: var(--jomla-muted); font-size: var(--jomla-fs-sm); } /* payment instructions from the shop settings */

@media (min-width: 720px) {
	.jomla-thanks-card { padding: 36px 28px 24px; }
	.jomla-thanks-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 880px) {
	.jomla-thanks-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
}

/* ---------- Cart bar: the cart total follows you ---------- */

.jomla-cartbar {
	position: fixed; z-index: var(--jomla-z-bar);
	inset-inline: 8px; inset-block-end: calc(var(--jomla-bottombar) + 8px + env(safe-area-inset-bottom));
	display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px;
	min-height: 56px; padding: 8px 16px 10px;
	background: var(--jomla-ink); color: #fff; border-radius: 14px; text-decoration: none;
	box-shadow: 0 8px 24px rgba(19, 32, 58, .28); overflow: hidden;
}
.jomla-cartbar[hidden] { display: none; }
.jomla-cartbar-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.jomla-cartbar-count { color: #cfd7e6; font-size: var(--jomla-fs-sm); white-space: nowrap; }
.jomla-cartbar-total { font-family: var(--jomla-display); font-size: var(--jomla-fs-md); white-space: nowrap; }
.jomla-cartbar-note { font-size: var(--jomla-fs-sm); font-weight: 700; color: var(--jomla-accent); text-align: end; }
.jomla-cartbar.is-ready .jomla-cartbar-note { color: #fff; background: var(--jomla-primary); padding: 6px 12px; border-radius: var(--jomla-r-sm); }
.jomla-cartbar-meter { position: absolute; inset-inline: 0; inset-block-end: 0; height: 4px; background: rgba(255, 255, 255, .12); }
.jomla-cartbar-meter span { display: block; height: 100%; background: var(--jomla-accent); transition: width .3s; }
.jomla-cartbar.is-ready .jomla-cartbar-meter span { background: #3ccf8e; }
.woocommerce-cart .jomla-cartbar, .woocommerce-checkout .jomla-cartbar { display: none; }

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

.jomla-footer { background: var(--jomla-ink); color: #cfd7e6; margin-block-start: 48px; }
.jomla-footer h2 { color: #fff; font-size: var(--jomla-fs-base); margin: 0 0 12px; }
.jomla-footer p { margin: 0 0 12px; }

/* The three ordering steps are a real sequence, so they are numbered. */
.jomla-steps { background: color-mix(in srgb, var(--jomla-ink) 88%, #fff); padding-block: 28px; border-block-end: 1px solid rgba(255, 255, 255, .08); }
.jomla-steps h2 { font-size: var(--jomla-fs-md); margin-block-end: 16px; }
.jomla-steps ol { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; }
.jomla-steps li { counter-increment: step; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: start; }
.jomla-steps li::before {
	content: counter(step); grid-row: span 2;
	width: 40px; height: 44px; display: flex; align-items: center; justify-content: center;
	background: var(--jomla-accent); color: var(--jomla-ink);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	font-family: var(--jomla-display); font-weight: 700; font-size: var(--jomla-fs-base);
}
.jomla-steps strong { color: #fff; font-family: var(--jomla-display); font-weight: 500; }
.jomla-steps span { font-size: var(--jomla-fs-sm); }

.jomla-footer-grid { display: grid; gap: 28px; padding-block: 32px; }
.jomla-footer-name { display: flex; align-items: center; gap: 8px; color: #fff; font-family: var(--jomla-display); font-weight: 700; font-size: var(--jomla-fs-lg); }
.jomla-btn-wa { background: #1fa855; min-height: 46px; }
.jomla-btn-wa .jomla-icon { width: 20px; height: 20px; }
.jomla-footer-links { list-style: none; margin: 0; padding: 0; }
.jomla-footer-links a { color: #cfd7e6; display: inline-flex; gap: 8px; align-items: center; min-height: 40px; }

.jomla-footer-links .jomla-icon { width: 18px; height: 18px; color: var(--jomla-accent); }
.jomla-footer-bottom { border-block-start: 1px solid rgba(255, 255, 255, .1); padding-block: 14px; font-size: var(--jomla-fs-sm); color: #8f9ab0; }
.jomla-footer-bottom .jomla-container { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
.jomla-footer-bottom p { margin: 0; }
.jomla-footer-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.jomla-footer-facts li { display: flex; align-items: center; gap: 6px; }
.jomla-footer-facts .jomla-icon { width: 16px; height: 16px; color: var(--jomla-accent); }

/* WhatsApp bubble: desktop only, phones have it in the bottom bar. */
.jomla-whatsapp {
	position: fixed; inset-inline-end: 24px; inset-block-end: 24px;
	z-index: var(--jomla-z-bar); width: 56px; height: 56px; border-radius: 50%;
	background: #25d366; color: #fff; display: none; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(19, 32, 58, .22);
}
.jomla-whatsapp .jomla-icon { width: 30px; height: 30px; }

/* Bottom bar (phones) */
.jomla-bottombar {
	position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--jomla-z-bar);
	display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
	height: calc(var(--jomla-bottombar) + env(safe-area-inset-bottom));
	padding-block-end: env(safe-area-inset-bottom);
	background: var(--jomla-card); box-shadow: 0 -1px 0 var(--jomla-line);
}
.jomla-bottombar a {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	color: var(--jomla-muted); text-decoration: none; font-size: var(--jomla-fs-xs); font-weight: 500;
}
.jomla-bottombar a[aria-current="page"] { color: var(--jomla-primary); font-weight: 700; }
.jomla-bottombar .jomla-cart-count { inset-block-start: 6px; inset-inline-end: calc(50% - 22px); }

.jomla-toast {
	position: fixed; inset-inline: 16px; inset-block-end: calc(var(--jomla-bottombar) + var(--jomla-cartbar) + 16px + env(safe-area-inset-bottom));
	z-index: var(--jomla-z-toast); background: var(--jomla-ink); color: #fff; padding: 12px 16px; border-radius: var(--jomla-radius);
	box-shadow: 0 8px 24px rgba(19, 32, 58, .3); font-weight: 500;
}
.jomla-toast a { color: var(--jomla-accent); font-weight: 700; }
.jomla-toast.is-error { background: var(--jomla-danger); }
.jomla-toast.is-error a { color: #fff; }
.jomla-toast[hidden] { display: none; }

/* ---------- Larger screens ---------- */

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

.jomla-header-wa, .jomla-header-account {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 10px;
	border-radius: var(--jomla-ctl); color: var(--jomla-ink); text-decoration: none; font-weight: 500; font-size: var(--jomla-fs-sm); white-space: nowrap;
}
.jomla-header-wa { color: #137a3e; }
.jomla-header-wa .jomla-icon, .jomla-header-account .jomla-icon { width: 20px; height: 20px; }
.jomla-header-wa, .jomla-header-account, .jomla-header-cart { transition: background-color .15s ease; }
.jomla-header-wa:hover { background: #e7f6ec; }
.jomla-header-account:hover, .jomla-header-cart:hover { background: var(--jomla-hover); }

/* ---------- Cashier-style layout: products and the order side by side ---------- */

.jomla-pos-intro h1 { font-size: var(--jomla-fs-title); margin: 4px 0 4px; text-wrap: balance; }
.jomla-pos-intro p { margin: 0 0 14px; color: var(--jomla-muted); max-width: 60ch; }
.jomla-pos-mode .jomla-facts-strip { display: block; }
.jomla-pos-products { min-width: 0; }
.jomla-pos ul.products li.product a img, .jomla-pos .woocommerce ul.products li.product a img, .woocommerce.jomla-pos ul.products li.product a img { aspect-ratio: 4 / 3; }
.jomla-chip-offer { color: var(--jomla-danger); border-color: color-mix(in srgb, var(--jomla-danger) 35%, #fff); }

.jomla-sidecart { display: none; }
.jomla-sidecart-body { display: flex; flex-direction: column; height: 100%; max-height: inherit; min-height: 0; }
.jomla-sidecart-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-block-end: 1px solid var(--jomla-line); }
.jomla-sidecart-head h2 { margin: 0; font-size: var(--jomla-fs-md); }
.jomla-sidecart-count { font-size: var(--jomla-fs-sm); color: var(--jomla-muted); background: var(--jomla-bg); border-radius: 999px; padding: 2px 10px; }
.jomla-sheet-close { margin-inline-start: auto; }
.jomla-sidecart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px 20px; color: var(--jomla-muted); }
.jomla-sidecart-empty .jomla-icon { width: 40px; height: 40px; color: #b7bfcc; margin-block-end: 10px; }
.jomla-sidecart-empty p { margin: 0 0 6px; }
.jomla-sidecart-minnote { font-weight: 700; color: var(--jomla-ink); }

.jomla-lines { list-style: none; margin: 0; padding: 4px 0; flex: 1; overflow-y: auto; min-height: 0; }
.jomla-line {
	display: grid; grid-template-columns: 1fr auto; grid-template-areas: "info remove" "qty total";
	gap: 6px 10px; align-items: center; padding: 10px 16px; border-block-end: 1px solid var(--jomla-bg);
	transition: opacity .15s;
}
.jomla-line.is-busy { opacity: .45; pointer-events: none; }
.jomla-line-info { grid-area: info; min-width: 0; }
.jomla-line-name { display: block; font-weight: 500; line-height: 1.35; }
.jomla-line-meta { display: block; font-size: var(--jomla-fs-xs); color: var(--jomla-muted); }
.jomla-line-qty { grid-area: qty; display: inline-grid; grid-template-columns: 36px 40px 36px; align-items: center; border: 1.5px solid var(--jomla-line); border-radius: var(--jomla-r-sm); justify-self: start; }
.jomla-line-step { min-height: 36px; border: 0; background: transparent; font-size: var(--jomla-fs-md); cursor: pointer; color: var(--jomla-ink); }
.jomla-line-step:hover { background: var(--jomla-bg); }
.jomla-line-step:disabled { color: #b7bfcc; cursor: default; background: transparent; }
.jomla-line-n { text-align: center; font-family: var(--jomla-display); font-weight: 700; }
.jomla-line-total { grid-area: total; font-family: var(--jomla-display); justify-self: end; white-space: nowrap; }
.jomla-line-remove { grid-area: remove; align-self: start; width: 36px; height: 36px; border: 0; border-radius: var(--jomla-r-sm); background: transparent; color: var(--jomla-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.jomla-line-remove .jomla-icon { width: 18px; height: 18px; }
.jomla-line-remove:hover { background: color-mix(in srgb, var(--jomla-danger) 10%, #fff); color: var(--jomla-danger); }

.jomla-sidecart-foot { padding: 14px 16px 16px; border-block-start: 1px solid var(--jomla-line); display: grid; gap: 10px; background: #fff; }
.jomla-sidecart-total { display: flex; justify-content: space-between; align-items: baseline; }
.jomla-sidecart-total strong { font-family: var(--jomla-display); font-size: var(--jomla-fs-xl); color: var(--jomla-ink); }
.jomla-sidecart-min p { margin: 0 0 6px; font-size: var(--jomla-fs-sm); font-weight: 500; color: #8a5a00; }
.jomla-sidecart-min.is-done p { color: var(--jomla-ok); }
.jomla-sidecart-meter { display: block; height: 6px; border-radius: 3px; background: var(--jomla-bg); overflow: hidden; }
.jomla-sidecart-meter span { display: block; height: 100%; background: var(--jomla-accent); transition: width .3s; }
.jomla-sidecart-min.is-done .jomla-sidecart-meter span { background: var(--jomla-ok); }
.jomla-sidecart-go { width: 100%; min-height: 52px; font-size: var(--jomla-fs-base); }
.jomla-sidecart-go.is-disabled { background: #c9d0dc; color: #fff; cursor: not-allowed; filter: none; }
.jomla-sidecart-edit { justify-self: center; text-align: center; font-size: var(--jomla-fs-sm); font-weight: 500; }

/* Phones: the order opens as a sheet from the cart bar. */
@media (max-width: 959px) {
	.jomla-pos-mode .jomla-sidecart {
		display: block; position: fixed; z-index: var(--jomla-z-sheet); inset-inline: 0; inset-block-end: 0;
		max-height: 88vh; height: 88vh; background: #fff; border-radius: 18px 18px 0 0;
		box-shadow: 0 -10px 40px rgba(19, 32, 58, .25);
		transform: translateY(105%); visibility: hidden;
		transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s;
		padding-block-end: env(safe-area-inset-bottom);
	}
	.jomla-sheet-open .jomla-sidecart { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
	.jomla-sheet-backdrop { position: fixed; inset: 0; z-index: var(--jomla-z-backdrop); background: rgba(19, 32, 58, .45); }
	.jomla-sheet-backdrop[hidden] { display: none; }
	.jomla-sidecart-head::before { content: ""; position: absolute; inset-block-start: 6px; inset-inline-start: calc(50% - 20px); width: 40px; height: 4px; border-radius: 2px; background: var(--jomla-line); }
	.jomla-sidecart-head { position: relative; padding-block-start: 18px; }
}

@media (min-width: 600px) {
	ul.products, .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	.woocommerce ul.products li.product, ul.products li.product { padding: 10px; }
	.jomla-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jomla-footer-grid { grid-template-columns: 1fr 1fr; }
	.jomla-cart-total { display: inline; }
	.jomla-header-cart { padding-inline: 12px 14px; border: 1px solid var(--jomla-line); }
	.jomla-header-cart .jomla-cart-count { inset-block-start: -6px; inset-inline-end: -6px; }
}

@media (min-width: 960px) {
	body { --jomla-bottombar: 0px; }
	.jomla-header-row { grid-template-columns: auto 1fr auto; grid-template-areas: "brand search actions"; gap: 24px; padding-block: 12px; }
	.jomla-menu-toggle, .jomla-bottombar { display: none; }
	.jomla-search { max-width: 620px; justify-self: center; width: 100%; }
	.jomla-nav { display: block; }
	ul.products, .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.jomla-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.jomla-whatsapp { display: flex; }
	body:has(.jomla-cartbar:not([hidden])) .jomla-whatsapp { inset-block-end: 96px; }
	.jomla-cartbar { inset-inline: auto; inset-inline-start: 50%; transform: translateX(50%); width: 520px; inset-block-end: 16px; }
	[dir="ltr"] .jomla-cartbar { transform: translateX(-50%); }
	.jomla-toast { inset-inline: auto 24px; max-width: 420px; }
	.jomla-hero { padding-block: 64px; }
	.jomla-hero-inner { grid-template-columns: 1.4fr 1fr; align-items: center; gap: 48px; }
	.jomla-footer-grid { grid-template-columns: 1.6fr; grid-auto-flow: column; grid-auto-columns: 1fr; }
	.jomla-steps ol { grid-template-columns: repeat(3, 1fr); gap: 24px; }

	.jomla-pos { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
	.jomla-pos ul.products, .jomla-pos.woocommerce ul.products, .jomla-pos .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.jomla-sheet-close { display: none; }
	.jomla-pos-mode .jomla-sidecart {
		display: block; position: sticky; top: calc(var(--jomla-header-h, 76px) + 12px);
		max-height: calc(100vh - var(--jomla-header-h, 76px) - 24px); height: auto;
		background: #fff; border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius); overflow: hidden;
	}
	.admin-bar.jomla-pos-mode .jomla-sidecart { top: calc(var(--jomla-header-h, 76px) + 44px); max-height: calc(100vh - var(--jomla-header-h, 76px) - 56px); }
	.jomla-pos-mode .jomla-cartbar { display: none; }
	body.jomla-pos-mode { --jomla-cartbar: 0px !important; }
	.jomla-pos-mode .jomla-whatsapp { display: none; }
}
@media (min-width: 1440px) {
	.jomla-pos { grid-template-columns: minmax(0, 1fr) 380px; }
	.jomla-pos ul.products, .jomla-pos .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 959px) {
	.jomla-hide-mobile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ---------- Phone polish ---------- */

.woocommerce form .form-row textarea.input-text { border: 1px solid var(--jomla-line); border-radius: var(--jomla-ctl); padding: 10px 12px; font-size: 16px; background: #fff; }
/* The account page is already a card; the login and register forms don't need a second box inside it. */
.woocommerce-account .woocommerce form.login, .woocommerce-account .woocommerce form.register { border: 0; padding: 0; margin: 0 0 8px; border-radius: 0; }
/* Fingers need bigger targets than a mouse: grow the small text links' pill on phones and tablets. */
@media (max-width: 959px) {
	.jomla-sidecart-edit, .jomla-cart .jomla-cart-more, .showcoupon, .woocommerce-LostPassword a { padding-block: 9px !important; } /* beats the long hover-pill selector list */
}

/* Header on phones: menu | centred name | account + cart, search underneath.
   The facts strip shows one fact at a time instead of a row cut off at the edge. */
@media (max-width: 959px) {
	.jomla-header-row { grid-template-columns: 88px 1fr 88px; gap: 8px 4px; padding-block: 6px 10px; }
	.jomla-menu-toggle { justify-self: start; }
	.jomla-brand { justify-self: center; text-align: center; }
	.jomla-brand a { font-size: var(--jomla-fs-md); }
	.jomla-header-actions { justify-self: end; gap: 0; }
	.jomla-header-account { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--jomla-ctl); color: var(--jomla-ink); }
	.jomla-header-account:hover { background: var(--jomla-bg); }
	.jomla-header-account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
	.jomla-header-cart { border: 0; padding-inline: 10px; }
	.jomla-header-cart .jomla-cart-total { display: none; }
	.jomla-header-cart .jomla-cart-count { inset-block-start: 2px; inset-inline-end: 0; }
	.jomla-search input[type="search"] { min-height: 44px; }

	.jomla-facts-strip ul { position: relative; display: block; height: 30px; overflow: hidden; padding-block: 0; }
	.jomla-facts-strip li { position: absolute; inset: 0; justify-content: center; opacity: 0; }
	.jomla-facts-strip li:first-child { opacity: 1; }
	.jomla-facts-strip[data-count="2"] li { animation: jomla-fact2 8s infinite; }
	.jomla-facts-strip[data-count="2"] li:nth-child(2) { animation-delay: 4s; }
	.jomla-facts-strip[data-count="3"] li { animation: jomla-fact3 12s infinite; }
	.jomla-facts-strip[data-count="3"] li:nth-child(2) { animation-delay: 4s; }
	.jomla-facts-strip[data-count="3"] li:nth-child(3) { animation-delay: 8s; }
	.jomla-facts-strip[data-count="2"] li:first-child, .jomla-facts-strip[data-count="3"] li:first-child { opacity: 0; }
}
@keyframes jomla-fact2 { 0%, 45% { opacity: 1; transform: none; } 50%, 95% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 0; } }
@keyframes jomla-fact3 { 0%, 30% { opacity: 1; transform: none; } 33.3%, 97% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 0; } }
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
	.jomla-facts-strip li { animation: none !important; }
	.jomla-facts-strip li:first-child { opacity: 1 !important; }
}

/* Footer on phones: two tidy columns. Name and WhatsApp across the top, then sections, contact links in a row. */
@media (max-width: 959px) {
	.jomla-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; padding-block: 28px; }
	.jomla-footer-brand { grid-column: 1 / -1; }
	.jomla-footer-brand .jomla-btn-wa { width: 100%; }
	.jomla-footer-contact { grid-column: 1 / -1; padding-block-start: 16px; border-block-start: 1px solid rgba(255, 255, 255, .1); }
	.jomla-footer-contact .jomla-footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
	.jomla-footer-links a { min-height: 40px; }
	.jomla-footer-bottom .jomla-container { justify-content: center; text-align: center; }
	.jomla-footer-facts { display: none; } /* the strip at the top already says these */
	.jomla-steps ol { gap: 12px; }
}

/* ---------- Login / sign-up: one centred card ---------- */

.jomla-main:has(.jomla-auth) .jomla-page-title { display: none; } /* the card has its own heading */
.jomla-content:has(.jomla-auth) { background: transparent; border: 0; padding: 0; box-shadow: none; }
.jomla-auth {
	max-width: 440px; margin: 8px auto 0; padding: 24px 18px;
	background: var(--jomla-card); border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius);
	box-shadow: var(--jomla-shadow);
}
.jomla-auth-head { text-align: center; margin-block-end: 18px; }
.jomla-auth-mark {
	width: 56px; height: 64px; margin-block-end: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--jomla-accent); color: var(--jomla-ink);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.jomla-auth-mark .jomla-icon { width: 26px; height: 26px; }
.jomla-auth-title { margin: 0 0 6px; font-size: var(--jomla-fs-xl); color: var(--jomla-ink); text-wrap: balance; }
.jomla-auth-lead { margin: 0; color: var(--jomla-muted); font-size: var(--jomla-fs-sm); }

.jomla-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-block-end: 18px; background: var(--jomla-bg); border-radius: var(--jomla-ctl); }
.jomla-auth-tabs button {
	min-height: 44px; border: 0; border-radius: var(--jomla-r-sm); background: transparent;
	font-weight: 700; color: var(--jomla-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.jomla-auth-tabs button[aria-selected="true"] { background: #fff; color: var(--jomla-primary); box-shadow: 0 1px 3px rgba(19, 32, 58, .12); }
.jomla-auth-tabs button:focus-visible { outline: 2px solid var(--jomla-primary); outline-offset: 2px; }
.jomla-js .jomla-auth-panel[data-off] { display: none; }
.jomla-auth-panel + .jomla-auth-panel { margin-block-start: 18px; }
.jomla-js .jomla-auth-panel + .jomla-auth-panel { margin-block-start: 0; }

.woocommerce .jomla-auth form.login, .woocommerce .jomla-auth form.register { border: 0; padding: 0; margin: 0; border-radius: 0; }
.jomla-auth .form-row { margin-block-end: 14px; }
.jomla-auth .form-row label { display: block; font-weight: 500; margin-block-end: 6px; }
.jomla-auth .form-row input.input-text { width: 100%; min-height: 48px; font-size: 16px; }
.jomla-auth .password-input { display: block; position: relative; }
.jomla-auth .show-password-input { inset-inline-end: 6px; inset-inline-start: auto; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: var(--jomla-r-sm); }
.jomla-auth-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-block-end: 16px; }
.jomla-auth-row label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.jomla-auth-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--jomla-primary); }
.jomla-auth-link {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin-inline-end: -8px; border-radius: var(--jomla-r-sm);
	font-weight: 500; text-decoration: none; transition: background-color .15s ease;
}
.jomla-auth-link:hover { background: var(--jomla-hover); }
.woocommerce .jomla-auth .jomla-auth-submit { float: none; display: flex; width: 100%; margin: 0; min-height: 52px; font-size: var(--jomla-fs-md); } /* WooCommerce floats its login button; the line under it then had no room */
.jomla-auth-note { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--jomla-r-sm); background: var(--jomla-bg); color: var(--jomla-muted); font-size: var(--jomla-fs-sm); }
.jomla-auth .woocommerce-privacy-policy-text p { font-size: var(--jomla-fs-xs); color: var(--jomla-muted); }
.jomla-auth-safe {
	display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; padding-block-start: 14px;
	border-block-start: 1px solid var(--jomla-bg); color: var(--jomla-muted); font-size: var(--jomla-fs-xs); text-align: center;
}
.jomla-auth-safe .jomla-icon { width: 16px; height: 16px; flex: none; color: var(--jomla-ok); }
@media (min-width: 600px) {
	.jomla-auth { padding: 32px 32px 24px; margin-block-start: 16px; }
}

/* ---------- My account: menu beside the page, a welcome card, tiles and recent orders ---------- */

.woocommerce-account .jomla-content:has(.jomla-acct-nav) { background: transparent; border: 0; padding: 0; box-shadow: none; }
.woocommerce-account .woocommerce:has(.jomla-acct-nav) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.woocommerce-account .woocommerce:has(.jomla-acct-nav)::before, .woocommerce-account .woocommerce:has(.jomla-acct-nav)::after { display: none; }
.woocommerce-account .woocommerce .jomla-acct-nav, .woocommerce-account .woocommerce .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }
.jomla-main:has(.jomla-acct-hello) .jomla-page-title { display: none; } /* the welcome card says it */

/* Phones: the menu is a row of chips you can swipe. */
.jomla-acct-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block-end: 2px; }
.jomla-acct-nav li { flex: none; }
.jomla-acct-nav a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
	background: var(--jomla-card); border: 1px solid var(--jomla-line); border-radius: 999px;
	color: var(--jomla-ink); font-weight: 500; text-decoration: none; white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.jomla-acct-nav .jomla-icon { width: 18px; height: 18px; color: var(--jomla-muted); }
.jomla-acct-nav a:hover { background: var(--jomla-hover); }
.jomla-acct-nav a[aria-current="page"] { background: var(--jomla-ink); border-color: var(--jomla-ink); color: #fff; }
.jomla-acct-nav a[aria-current="page"] .jomla-icon { color: var(--jomla-accent); }
.jomla-acct-nav .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--jomla-danger); }
.jomla-acct-nav .woocommerce-MyAccount-navigation-link--customer-logout .jomla-icon { color: currentColor; }

.woocommerce-MyAccount-content { display: grid; gap: 16px; align-content: start; }
.woocommerce-MyAccount-content > p:first-child:empty { display: none; }

.jomla-acct-hello {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
	padding: 18px; border-radius: var(--jomla-radius); background: var(--jomla-ink); color: #fff;
}
.jomla-acct-avatar {
	width: 52px; height: 58px; display: flex; align-items: center; justify-content: center;
	background: var(--jomla-accent); color: var(--jomla-ink); font-family: var(--jomla-display); font-weight: 800; font-size: var(--jomla-fs-lg);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.jomla-acct-hello h2 { margin: 0; font-size: var(--jomla-fs-lg); color: #fff; }
.jomla-acct-hello p { margin: 2px 0 0; font-size: var(--jomla-fs-sm); color: #cfd7e6; overflow: hidden; text-overflow: ellipsis; }
.jomla-acct-logout {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--jomla-ctl);
	color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .25); font-weight: 500;
}
.jomla-acct-logout .jomla-icon { width: 18px; height: 18px; }
.jomla-acct-logout:hover { background: rgba(255, 255, 255, .12); }

.jomla-acct-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jomla-acct-tile {
	display: grid; gap: 4px; align-content: start; padding: 14px; min-height: 120px;
	background: var(--jomla-card); border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius);
	color: var(--jomla-ink); text-decoration: none; transition: border-color .15s ease, background-color .15s ease;
}
.jomla-acct-tile:hover { border-color: var(--jomla-primary); background: color-mix(in srgb, var(--jomla-primary) 4%, #fff); }
.jomla-acct-tile-icon { width: 40px; height: 40px; margin-block-end: 6px; border-radius: var(--jomla-ctl); display: flex; align-items: center; justify-content: center; background: var(--jomla-hover); color: var(--jomla-primary); }
.jomla-acct-tile-icon .jomla-icon { width: 22px; height: 22px; }
.jomla-acct-tile strong { font-size: var(--jomla-fs-base); }
.jomla-acct-tile small { font-size: var(--jomla-fs-xs); color: var(--jomla-muted); line-height: 1.5; overflow-wrap: anywhere; }
.jomla-acct-tile.is-primary { background: var(--jomla-primary); border-color: var(--jomla-primary); color: #fff; }
.jomla-acct-tile.is-primary small { color: rgba(255, 255, 255, .8); }
.jomla-acct-tile.is-primary .jomla-acct-tile-icon { background: rgba(255, 255, 255, .16); color: #fff; }
.jomla-acct-tile.is-primary:hover { filter: brightness(1.08); background: var(--jomla-primary); }

.jomla-acct-recent { background: var(--jomla-card); border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius); padding: 16px; }
.jomla-acct-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 8px; }
.jomla-acct-recent-head h2 { margin: 0; font-size: var(--jomla-fs-md); }
.jomla-acct-more { font-weight: 700; padding: 6px 8px; margin-inline-end: -8px; border-radius: var(--jomla-r-sm); text-decoration: none; }
.jomla-acct-more:hover { background: var(--jomla-hover); }
.jomla-acct-orders { list-style: none; margin: 0; padding: 0; }
.jomla-acct-orders li + li { border-block-start: 1px solid var(--jomla-bg); }
.jomla-acct-order {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main total" "main status"; gap: 4px 12px; align-items: center;
	padding: 12px 8px; margin-inline: -8px; border-radius: var(--jomla-ctl); color: var(--jomla-ink); text-decoration: none;
}
.jomla-acct-order:hover { background: var(--jomla-hover); }
.jomla-acct-order-main { grid-area: main; min-width: 0; }
.jomla-acct-order-main strong { display: block; }
.jomla-acct-order-main small { color: var(--jomla-muted); font-size: var(--jomla-fs-xs); }
.jomla-acct-order-total { grid-area: total; justify-self: end; font-family: var(--jomla-display); font-weight: 700; white-space: nowrap; }
.jomla-acct-order .jomla-status { grid-area: status; justify-self: end; }
.jomla-acct-empty { text-align: center; padding: 12px 0 4px; }
.jomla-acct-empty p { color: var(--jomla-muted); margin: 0 0 12px; }

.jomla-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--jomla-fs-xs); font-weight: 700; white-space: nowrap; }
.jomla-status.is-wait { background: #fff4d6; color: #8a5a00; }
.jomla-status.is-go { background: var(--jomla-hover); color: var(--jomla-primary); }
.jomla-status.is-done { background: color-mix(in srgb, var(--jomla-ok) 12%, #fff); color: var(--jomla-ok); }
.jomla-status.is-bad { background: color-mix(in srgb, var(--jomla-danger) 10%, #fff); color: var(--jomla-danger); }

/* The other account pages (orders, address, details) sit on a plain white card. */
.woocommerce-MyAccount-content > :not(.jomla-acct-hello):not(.jomla-acct-tiles):not(.jomla-acct-recent):not(.woocommerce-notices-wrapper):not(.woocommerce-message):not(.woocommerce-info):not(.woocommerce-error) {
	background: var(--jomla-card); border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius); padding: 16px;
}
.woocommerce-MyAccount-content > :empty { display: none; }
.woocommerce-account .woocommerce-orders-table { border: 0; margin: 0; }
.woocommerce-account .woocommerce-orders-table th, .woocommerce-account .woocommerce-orders-table td { border-color: var(--jomla-bg); padding: 12px 8px; }
.woocommerce-account .woocommerce-orders-table .button { background: var(--jomla-hover); color: var(--jomla-primary); border-radius: var(--jomla-r-sm); font-weight: 700; padding: 8px 14px; }
.woocommerce-account .woocommerce-Addresses { display: grid; gap: 16px; }
.woocommerce-account .woocommerce-Addresses .woocommerce-Address { float: none; width: auto; }
.woocommerce-account .woocommerce-Address-title h2 { font-size: var(--jomla-fs-md); margin: 0 0 6px; }
.woocommerce-account form .button, .woocommerce-account .woocommerce-Button { background: var(--jomla-primary); color: #fff; border-radius: var(--jomla-ctl); min-height: 48px; padding: 0 22px; font-weight: 700; }

@media (min-width: 720px) {
	.jomla-acct-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
	.woocommerce-account .woocommerce:has(.jomla-acct-nav) { grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 24px; }
	.jomla-acct-nav { position: sticky; top: 96px; background: var(--jomla-card); border: 1px solid var(--jomla-line); border-radius: var(--jomla-radius); padding: 8px; }
	.jomla-acct-nav ul { display: grid; gap: 2px; overflow: visible; padding: 0; }
	.jomla-acct-nav a { display: flex; width: 100%; border: 0; border-radius: var(--jomla-ctl); background: transparent; padding: 0 12px; min-height: 46px; }
	.jomla-acct-nav .woocommerce-MyAccount-navigation-link--customer-logout { margin-block-start: 6px; padding-block-start: 6px; border-block-start: 1px solid var(--jomla-bg); }
	.jomla-acct-hello { padding: 22px 24px; }
}
.jomla-acct-order-total ins { text-decoration: none; }
.jomla-acct-order-total del { color: var(--jomla-muted); font-weight: 500; margin-inline-end: 4px; }
.jomla-acct-order-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px; }
.jomla-acct-order-actions .jomla-btn { min-height: 40px; padding-inline: 14px; font-size: var(--jomla-fs-sm); }
.jomla-acct-pages { display: flex; justify-content: space-between; gap: 8px; padding-block-start: 12px; border-block-start: 1px solid var(--jomla-bg); }
@media (max-width: 719px) {
	.woocommerce-MyAccount-content .woocommerce-info .button, .woocommerce-MyAccount-content .woocommerce-message .button { float: none; display: flex; justify-content: center; width: 100%; margin: 0 0 10px; }
}