/* Shop UI (2026-10): colour palette, product card, wishlist heart, buying actions.
   Loaded after style.css / responsive.css, so it overrides the older absolute-positioned card rules. */
:root {
    --aa-brand: #bc8b3f;        /* gold: brand accent (headings, lines, sale prices, wishlist, counters) */
    --aa-brand-dark: #966f33;   /* gold hover (same as the theme's existing button hover) */
    --aa-brand-soft: #faf4ea;
    --aa-ink: #282d3b;          /* dark blue: text, header, footer and the main buying buttons */
    --aa-ink-dark: #1f232e;
    --aa-muted: #8a8f98;
    --aa-line: #dfe2e8;
    --aa-brand-text: #966f33;   /* gold for small text and white-on-gold: 4.5:1 on white (#bc8b3f is only 3.0:1) */
    --aa-text-2: #5c6370;       /* secondary text: breadcrumbs, notes */
    /* line cart-plus icon for the card button, same stroke style as the wishlist heart (Lucide shopping-cart, ISC licence, + plus sign) */
    --aa-icon-cart-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3Cpath d='M13 9.5v4M11 11.5h4'/%3E%3C/svg%3E");
}

/* ---------- Product card: title, then one row [price] ........ [add to cart][♡] ----------
   The price is moved into .aa-card-actions by functions.php. Arabic (RTL): price on the right, heart + cart on the left;
   German (LTR): mirrored. */
li.product.type-product { display: flex; flex-direction: column; }
li.product.type-product > .woocommerce-LoopProduct-link { flex: 1 1 auto; }
li.product.type-product .price {
    position: static !important; display: block; margin: 8px 0 0 !important;
    color: var(--aa-brand-text) !important; font-size: 18px !important; font-weight: 700; line-height: 1.35;
}
li.product.type-product .price del { color: var(--aa-muted) !important; font-size: 13px; font-weight: 400; opacity: 1; margin-inline-end: 6px; }
li.product.type-product .price ins { color: var(--aa-brand-text); text-decoration: none; }
/* style.css colours every .woocommerce-Price-amount bdi #565656: let card prices take the gold (old sale price stays grey via del) */
li.product.type-product .price bdi { color: inherit; }

.aa-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
li.product.type-product .aa-card-actions .price { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
/* sale price: old price stacked above the new one, so it stays narrow enough for the row */
li.product.type-product .aa-card-actions .price del { display: block !important; margin: 0; line-height: 1.2; }
li.product.type-product .aa-card-actions .price ins { display: block !important; }
/* icon-only outlined button, styled exactly like the wishlist heart next to it (plugin wishlist.css):
   grey outline at rest, gold outline + icon on hover/focus, light gold fill once added.
   The label stays in the markup for screen readers, plus aria-label/title;
   auto start margin keeps cart + heart together at the end if a long price ever pushes them to a second line */
.aa-card-actions a.add_to_cart_button.button {
    position: relative !important; left: auto !important; right: auto !important; bottom: auto !important;
    flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center;
    width: 40px !important; height: 40px !important; margin: 0 !important; margin-inline-start: auto !important; padding: 0 !important;
    border: 1px solid var(--aa-line) !important; border-radius: 8px !important;
    background: #fff !important; color: var(--aa-ink) !important;
    font-size: 0 !important; line-height: 1 !important; overflow: visible;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.aa-card-actions a.add_to_cart_button.button:hover,
.aa-card-actions a.add_to_cart_button.button:focus-visible {
    background: #fff !important; border-color: var(--aa-brand) !important; color: var(--aa-brand) !important; outline: none;
}
.aa-card-actions a.add_to_cart_button.button:focus-visible { box-shadow: 0 0 0 3px rgba(188, 139, 63, .25); }
.aa-card-actions a.add_to_cart_button.button.added {
    background: var(--aa-brand-soft) !important; border-color: var(--aa-brand) !important; color: var(--aa-brand) !important;
}
.aa-card-actions a.add_to_cart_button.button::before {
    float: none !important; flex: 0 0 auto; width: 20px; height: 20px; margin: 0 !important;
    -webkit-mask: var(--aa-icon-cart-line) no-repeat center / contain; mask: var(--aa-icon-cart-line) no-repeat center / contain;
}
/* while adding: the spinner (sized in em, so it needs its own font-size) replaces the cart icon;
   no WooCommerce 25% fade, so the button keeps the same look as the heart */
.aa-card-actions a.add_to_cart_button.button.loading { opacity: 1; cursor: progress; }
.aa-card-actions a.add_to_cart_button.button.loading::before { display: none; }
.aa-card-actions a.add_to_cart_button.button.loading::after {
    position: static !important; top: auto !important; right: auto !important; left: auto !important; margin: 0 !important; font-size: 18px !important;
}
/* added: small gold tick badge on the top corner (same look as the header counters) */
.aa-card-actions a.add_to_cart_button.button.added::after {
    content: "" !important; position: absolute !important; top: -7px !important; right: auto !important; left: auto !important; inset-inline-start: -7px !important;
    width: 18px; height: 18px; margin: 0 !important; border-radius: 50%; box-shadow: 0 0 0 2px #fff;
    background: var(--aa-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M173.9 439.4l-166.4-166.4c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.7 432.1 72.6c10-10 26.2-10 36.2 0l36.2 36.2c10 10 10 26.2 0 36.2l-294.4 294.4c-10 10-26.2 10-36.2 0z'/%3E%3C/svg%3E") no-repeat center / 10px 10px;
}
.aa-card-actions .added_to_cart { display: none !important; }

@media (max-width: 767px) {
    .aa-card-actions { gap: 6px; }
    li.product.type-product .aa-card-actions .price { font-size: 16px !important; }
    /* Shop / category list on phones: image on one side, title + the actions row on the other */
    .archive-grid-content li.product.type-product { position: relative; }
    .archive-grid-content li.product.type-product .woocommerce-loop-product__title { margin-bottom: 52px !important; }
    .archive-grid-content li.product.type-product .aa-card-actions {
        position: absolute; bottom: 12px; inset-inline-end: 12px; width: calc(60% - 24px); margin: 0;
    }
}
/* very small phones (2 cards per carousel row): slightly smaller buttons so price + cart + heart stay on one line */
@media (max-width: 380px) {
    .aa-card-actions a.add_to_cart_button.button,
    .aa-card-actions .aa-wl-toggle { width: 36px !important; height: 36px !important; }
}

/* ---------- Product images: rounded corners ----------
   Cards everywhere (shop, categories, home carousels, related products, wishlist page) and the product page gallery: 10px.
   The gallery frame is rounded too, so the hover-zoom image is clipped to the same corners.
   The ~32px cart / mini-cart thumbnails get 6px (10px would make them almost round). */
li.product.type-product .woocommerce-LoopProduct-link img,
.woocommerce-product-gallery .woocommerce-product-gallery__image,
.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-control-thumbs img { border-radius: 10px; }
/* clip-path, not just overflow: the slider moves slides with a transform, and then Chrome ignores the rounded overflow clip for the zoom image */
.woocommerce-product-gallery .woocommerce-product-gallery__image { overflow: hidden; clip-path: inset(0 round 10px); }
.woocommerce-cart-form td.product-thumbnail img,
.woocommerce-mini-cart-item img { border-radius: 6px; }

/* ---------- Main buying buttons: dark blue, gold on hover ---------- */
.woocommerce div.product form.cart button.single_add_to_cart_button.button { background-color: var(--aa-ink) !important; }
/* the cart icon box takes the button colour (keeps style.css's thin divider line) */
.woocommerce div.product form.cart button.single_add_to_cart_button.button::before { background-color: transparent !important; }
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:hover { background-color: var(--aa-brand-dark) !important; }
.woocommerce .cart-collaterals .wc-proceed-to-checkout a.checkout-button { background: var(--aa-ink) !important; }
.woocommerce .cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover { background: var(--aa-brand-dark) !important; }
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order { background: var(--aa-ink) !important; }
.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover { background: var(--aa-brand-dark) !important; }
.dropdown-cart-content .woocommerce-mini-cart__buttons a.checkout { background: var(--aa-ink) !important; }
.dropdown-cart-content .woocommerce-mini-cart__buttons a.checkout:hover { background: var(--aa-brand-dark) !important; }

/* ---------- Header wishlist counter (same look as the cart counter) ---------- */
.wishlist-link > a { position: relative; display: inline-block; }
.wishlist-link .aa-wl-count {
    position: absolute; top: -6px; inset-inline-start: calc(50% + 2px);
    min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
    background: var(--aa-brand); color: #fff; font-size: 10px; font-weight: 500; line-height: 18px; text-align: center;
}
.wishlist-link .aa-wl-count[hidden] { display: none; }

/* =====================================================================================
   Design review (2026-10): contrast, buttons, header, home, listings, product page,
   cart / checkout, footer, 404, phone menu. Markup: includes/shop-ux.php, includes/shop-i18n.php,
   parts/home-*.php, 404.php, header.php, footer.php.
   ===================================================================================== */

/* ---------- Contrast: small gold text / white text on gold ---------- */
.woocommerce div.product p.price, .woocommerce div.product span.price,
.summary .price .woocommerce-Price-amount bdi { color: var(--aa-brand-text) !important; }
.woocommerce-info a, .woocommerce-message a, .woocommerce-error a { color: var(--aa-brand-text); }
.woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-breadcrumb a, .woocommerce-breadcrumb, .woocommerce-breadcrumb a { color: var(--aa-text-2); }
.menu-title { background: var(--aa-brand-text) !important; }
#mini-cart-count, .wishlist-link .aa-wl-count { background: var(--aa-brand-text) !important; }
.dropdown-cart-content .woocommerce-mini-cart__buttons a.button:not(.checkout) { background: var(--aa-brand-text) !important; }

/* ---------- Buttons: primary = navy (gold on hover), secondary = outlined ---------- */
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .woocommerce-form-login .woocommerce-form-login__submit, .woocommerce .lost_reset_password .woocommerce-Button,
.woocommerce-MyAccount-content form .button, .woocommerce table.my_account_orders .button,
.woocommerce-account .addresses .title .edit, .woocommerce #review_form #respond .form-submit input, .wpcf7-submit {
    background: var(--aa-ink) !important; color: #fff !important; border: 0; border-radius: 8px !important;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce .woocommerce-form-login .woocommerce-form-login__submit:hover, .woocommerce-MyAccount-content form .button:hover,
.woocommerce table.my_account_orders .button:hover, .woocommerce-account .addresses .title .edit:hover, .wpcf7-submit:hover {
    background: var(--aa-brand-text) !important; color: #fff !important;
}
.woocommerce .coupon button.button, .woocommerce .actions button.button[name="update_cart"] {
    background: #fff !important; color: var(--aa-ink) !important; border: 1px solid var(--aa-line) !important; border-radius: 8px !important;
}
.woocommerce .coupon button.button:hover, .woocommerce .actions button.button[name="update_cart"]:hover:not(:disabled) {
    background: #fff !important; color: var(--aa-brand-text) !important; border-color: var(--aa-brand) !important;
}
.woocommerce .actions button.button[name="update_cart"]:disabled { opacity: .5; }

.aa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
    border: 1px solid transparent; border-radius: 8px; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.aa-btn--primary { background: var(--aa-ink); color: #fff; }
.aa-btn--primary:hover, .aa-btn--primary:focus-visible { background: var(--aa-brand-text); color: #fff; }
.aa-btn--ghost { background: #fff; color: var(--aa-ink); border-color: var(--aa-line); }
.aa-btn--ghost:hover, .aa-btn--ghost:focus-visible { color: var(--aa-brand-text); border-color: var(--aa-brand); }

/* ---------- Header: less empty space; slim sticky header on desktop once scrolled (js/main.js) ---------- */
@media (min-width: 992px) {
    header .logo img { margin-top: 24px; }
    header .menu-top ul { margin-bottom: 14px; }
    #header { position: sticky; top: 0; z-index: 1000; transition: box-shadow .2s ease; }
    .admin-bar #header { top: 32px; }
    body.aa-header-compact #header { box-shadow: 0 2px 14px rgba(40, 45, 59, .09); }
    body.aa-header-compact #header .menu-top { display: none; }
    body.aa-header-compact #header .logo img { width: 140px; margin-top: 10px; }
    body.aa-header-compact #header .user-menu, body.aa-header-compact #header .dgwt-wcas-search-wrapp { margin-top: 10px; margin-bottom: 10px; }
}
/* German: normal capitalisation instead of all capitals */
html[lang^="de"] .menu-title, html[lang^="de"] .header-bottom-menu li a, html[lang^="de"] .home-block .section-title,
html[lang^="de"] .related > h2, html[lang^="de"] footer h3 { text-transform: none !important; }

/* ---------- Home: section headers with "View all" ---------- */
.home-block .section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aa-view-all { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--aa-ink); white-space: nowrap; }
.aa-view-all:hover { color: var(--aa-brand-text); }
.aa-view-all .icon { width: .5em; height: .8em; }
html[dir="rtl"] .aa-view-all .icon { transform: scaleX(-1); }

/* ---------- Home: hero slide (coded, per language) ---------- */
.home-slider { height: auto !important; }
.aa-hero {
    position: relative; display: flex; align-items: center; gap: 4%; margin-top: 30px; padding: 0 6%;
    aspect-ratio: 990 / 496; overflow: hidden; border-radius: 10px;
    background: radial-gradient(120% 140% at 85% 15%, #fffaf2 0%, #f6ead7 55%, #eedbbb 100%);
}
.aa-hero__text { position: relative; z-index: 1; flex: 1 1 56%; min-width: 0; }
.aa-hero__eyebrow { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--aa-brand-text); }
.aa-hero__title { margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 44px); font-weight: 700; line-height: 1.2; color: var(--aa-ink); }
.aa-hero__sub { margin: 0 0 22px; font-size: clamp(14px, 1.3vw, 18px); line-height: 1.6; color: #4a5060; }
.aa-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.aa-hero__note { margin: 16px 0 0; font-size: 14px; font-weight: 500; color: var(--aa-ink); }
.aa-hero__note::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; border-radius: 50%; background: var(--aa-brand); vertical-align: middle; }
.aa-hero__art { position: relative; flex: 0 0 38%; height: 82%; }
.owl-carousel .aa-hero__art img.aa-hero__img { position: absolute; width: 50%; height: auto; filter: drop-shadow(0 10px 18px rgba(40, 45, 59, .10)); transform: none !important; }
.aa-hero__img--1 { top: 0; inset-inline-start: 0; }
.aa-hero__img--2 { top: 4%; inset-inline-end: 0; width: 46% !important; }
.aa-hero__img--3 { bottom: 0; inset-inline-start: 14%; width: 42% !important; }
.aa-hero__img--4 { bottom: 6%; inset-inline-end: 4%; width: 40% !important; }
.home-slider .aa-slide { display: block; }
@media (max-width: 767px) {
    .aa-hero { margin-top: 16px; padding: 0 5%; gap: 3%; }
    .aa-hero__eyebrow, .aa-hero__sub, .aa-hero__note, .aa-hero__actions .aa-btn--ghost { display: none; }
    .aa-hero__title { font-size: 21px; margin-bottom: 12px; }
    .aa-hero .aa-btn { height: 38px; padding: 0 16px; font-size: 14px; }
    .aa-hero__art { flex-basis: 40%; height: 78%; }
    .aa-hero__img--3, .aa-hero__img--4 { display: none; }
    .owl-carousel .aa-hero__art img.aa-hero__img--1 { width: 64%; top: 2%; }
    .owl-carousel .aa-hero__art img.aa-hero__img--2 { width: 58% !important; top: auto; bottom: 2%; }
}

/* ---------- Product cards: sale badge, titles clamped to 2 lines ---------- */
li.product.type-product .woocommerce-LoopProduct-link { position: relative; }
.aa-sale-badge {
    position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; padding: 3px 8px; border-radius: 6px;
    background: var(--aa-ink); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.4; direction: ltr;
}
li.product.type-product .woocommerce-loop-product__title {
    display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    line-height: 1.5 !important; min-height: 3em; height: auto !important;
}
@media (max-width: 767px) {
    .archive-grid-content li.product.type-product .woocommerce-loop-product__title { -webkit-line-clamp: 3; min-height: 0; }
}
.aa-free { color: var(--aa-brand-text); font-weight: 700; }

/* ---------- Shop / category toolbar (phones: sort + filter in one row) and sub-category chips ---------- */
.aa-filter-btn { display: none; }
.aa-subcats { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; clear: both; margin: 14px 0 2px; }
.aa-subcat {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--aa-line); border-radius: 999px;
    background: #fff; color: var(--aa-ink); font-size: 14px; line-height: 1.3; transition: border-color .15s ease, color .15s ease;
}
.aa-subcat:hover, .aa-subcat:focus-visible { border-color: var(--aa-brand); color: var(--aa-brand-text); }
.aa-subcat__count { padding: 0 7px; border-radius: 999px; background: #f2f3f5; color: var(--aa-text-2); font-size: 12px; }
@media (max-width: 767px) {
    .archive-grid-header .col { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .archive-grid-header .woocommerce-notices-wrapper { flex: 0 0 100%; }
    .archive-grid-header .woocommerce-result-count { display: none !important; }
    .archive-grid-header .woocommerce-ordering { display: block !important; flex: 1 1 auto; order: 2; margin: 0 !important; }
    .archive-grid-header .woocommerce-ordering select { width: 100%; height: 44px; border-radius: 8px; }
    .aa-filter-btn {
        display: inline-flex; order: 3; align-items: center; gap: 6px; height: 44px; margin: 0; padding: 0 14px;
        border: 1px solid var(--aa-line); border-radius: 8px; background: #fff; color: var(--aa-ink); font-weight: 600; cursor: pointer;
    }
    body:has(#shop-sidebar-toggle:checked) .aa-filter-btn { border-color: var(--aa-brand); color: var(--aa-brand-text); }
    .aa-subcats { order: 4; flex-wrap: nowrap; overflow-x: auto; margin: 6px 0 0; padding-bottom: 4px; scrollbar-width: none; }
    .aa-subcats::-webkit-scrollbar { display: none; }
    .aa-subcat { flex: 0 0 auto; }
    #sidebar .shop-sidebar-toggle-label { display: none !important; }
    .woocommerce-products-header__title.page-title, .woocommerce .page-title { font-size: 26px !important; margin: 4px 0 8px !important; }
}
.aa-ico { width: 20px; height: 20px; flex: 0 0 20px; }
.aa-filter-btn .aa-ico { width: 18px; height: 18px; flex-basis: 18px; }

/* ---------- Product page ---------- */
.aa-price-note { margin: -4px 0 10px; font-size: 13px; color: var(--aa-text-2); }
.aa-price-note a { color: inherit; text-decoration: underline; }
.woocommerce div.product .woocommerce-product-details__short-description { margin-bottom: 14px; font-size: 14px; color: var(--aa-text-2); }
.aa-buy-info { display: grid; gap: 10px; margin: 18px 0 6px; padding: 14px 16px; list-style: none; border-radius: 10px; background: var(--aa-brand-soft); }
.aa-info { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--aa-ink); }
.aa-info a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.aa-info .aa-ico { color: var(--aa-brand-text); }
.aa-info.is-out { color: #a23b2c; }
.aa-info.is-out .aa-ico { color: #a23b2c; }

/* add-to-cart row: [qty][Add to cart][♡] on one line, also on phones */
.woocommerce div.product form.cart:not(.variations_form), .woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.woocommerce div.product form.cart div.quantity { order: 1; float: none !important; margin: 0 !important; }
.woocommerce div.product form.cart button.single_add_to_cart_button.button { order: 2; float: none !important; flex: 0 1 260px; width: auto !important; min-width: 0; margin: 0 !important; border-radius: 8px !important; overflow: hidden; }
.woocommerce div.product form.cart .aa-wl-toggle--single { order: 3; margin: 0; }
@media (max-width: 767px) {
    .woocommerce div.product form.cart button.single_add_to_cart_button.button { flex: 1 1 auto; }
    .single-product div.product .product_title { font-size: 24px !important; line-height: 1.4 !important; }
    .single-product .woocommerce-breadcrumb { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
    .single-product .woocommerce-breadcrumb::-webkit-scrollbar { display: none; }
}

/* quantity stepper: [−][1][+] (js/main.js adds the +/− buttons) */
div.quantity {
    display: inline-flex !important; align-items: stretch; height: 48px; margin: 0 !important; float: none !important;
    overflow: hidden; border: 1px solid var(--aa-line); border-radius: 8px; background: #fff;
}
div.quantity .quantity-nav { display: contents; }
div.quantity input.qty, div.quantity input[type="number"] {
    order: 2; width: 52px !important; height: auto !important; margin: 0; padding: 0 !important; float: none !important;
    border: 0 !important; background: transparent; font-size: 16px; text-align: center;
}
div.quantity .quantity-button {
    order: 3; position: static !important; display: flex; align-items: center; justify-content: center; width: 40px; height: auto !important;
    border: 0 !important; transform: none !important; color: var(--aa-ink); font-size: 20px; line-height: 1; cursor: pointer;
}
div.quantity .quantity-button.quantity-down { order: 1; }
div.quantity .quantity-button:hover { background: var(--aa-brand-soft); color: var(--aa-brand-text); }
.woocommerce-cart div.quantity { height: 40px; }
div.quantity:has(> input[type="hidden"]) { display: none !important; }

/* gallery thumbnails: one scrollable strip (5 images no longer leave one alone on a second row) */
.woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 8px; margin-top: 8px !important; overflow-x: auto; scrollbar-width: thin; }
.woocommerce div.product div.images .flex-control-thumbs li { flex: 0 0 76px; width: 76px !important; margin: 0 !important; float: none !important; }

/* description: readable line length, lighter bold, nutrition list as a table (script in includes/shop-ux.php) */
.woocommerce-Tabs-panel--description > * { max-width: 80ch; }
.woocommerce-Tabs-panel--description strong, .woocommerce-Tabs-panel--description b { font-weight: 600; }
.woocommerce-Tabs-panel--description p, .woocommerce-Tabs-panel--description li { line-height: 1.85; }
.woocommerce-Tabs-panel--description ul.aa-nutrition { max-width: 460px; margin: 6px 0 22px; padding: 0 !important; overflow: hidden; list-style: none; border: 1px solid var(--aa-line); border-radius: 10px; }
.woocommerce-Tabs-panel--description ul.aa-nutrition li { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 7px 14px; list-style: none; border-bottom: 1px solid var(--aa-line); }
.woocommerce-Tabs-panel--description ul.aa-nutrition li::marker { content: none; }
.woocommerce-Tabs-panel--description ul.aa-nutrition li:nth-child(even) { background: #fafbfc; }
.woocommerce-Tabs-panel--description ul.aa-nutrition li:last-child { border-bottom: 0; }
.woocommerce-Tabs-panel--description ul.aa-nutrition li strong { font-weight: 500; }
.woocommerce-Tabs-panel--description ul.aa-nutrition .aa-n-val { font-weight: 600; white-space: nowrap; }
.woocommerce-Tabs-panel--description ul.aa-nutrition li.aa-n-group { background: var(--aa-brand-soft); }
.woocommerce-Tabs-panel--description ul.aa-nutrition li.aa-n-group strong { font-weight: 600; }

/* ---------- Cart & checkout ---------- */
.woocommerce .coupon input.input-text { width: 190px !important; height: 40px; border-radius: 8px; }
@media (max-width: 767px) {
    .woocommerce table.shop_table_responsive.cart tr td.product-thumbnail { display: block !important; text-align: start !important; }
    .woocommerce table.shop_table_responsive.cart tr td.product-thumbnail::before { display: none !important; }
    .woocommerce table.shop_table_responsive.cart tr td.product-thumbnail img { width: 72px !important; height: auto; }
    .woocommerce .cart .coupon { display: flex; gap: 8px; width: 100%; }
    .woocommerce .cart .coupon input.input-text { flex: 1 1 auto; width: auto !important; min-width: 0; }
    .woocommerce .cart .coupon button.button { flex: 0 0 auto; white-space: nowrap; }
}
.woocommerce-form-login-toggle .woocommerce-info, .woocommerce-form-coupon-toggle .woocommerce-info {
    margin: 0 0 6px !important; padding: 6px 0 !important; border: 0 !important; background: transparent !important; font-size: 14px; color: var(--aa-text-2);
}
.woocommerce-form-login-toggle .woocommerce-info::before, .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none !important; }
.woocommerce-checkout #payment { background: #fff !important; border-radius: 10px; }
.woocommerce-checkout #payment div.payment_box { background: var(--aa-brand-soft) !important; color: var(--aa-ink); border-radius: 8px; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--aa-brand-soft) !important; }
.woocommerce-checkout #order_comments { border: 1px solid #e3e6eb !important; border-radius: 4px; }

/* ---------- WhatsApp button: smaller, no text bubble on phones and in cart/checkout ---------- */
@media (max-width: 767px) {
    .wa__btn_popup .wa__btn_popup_txt { display: none !important; }
    .wa__btn_popup { transform: scale(.85); transform-origin: bottom left; }
    html[dir="rtl"] .wa__btn_popup { transform-origin: bottom right; }
}
.woocommerce-cart .wa__btn_popup .wa__btn_popup_txt, .woocommerce-checkout .wa__btn_popup .wa__btn_popup_txt { display: none !important; }

/* ---------- Trust strip + footer ---------- */
.aa-trust { margin-top: 40px; padding: 22px 0; background: #fff; border-top: 1px solid var(--aa-line); }
.aa-trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.aa-trust__list .aa-info { gap: 12px; font-size: 15px; font-weight: 500; }
.aa-trust__list .aa-ico { box-sizing: content-box; width: 24px; height: 24px; flex: 0 0 24px; padding: 10px; border-radius: 50%; background: var(--aa-brand-soft); }
@media (max-width: 991px) { .aa-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .aa-trust__list { grid-template-columns: 1fr; gap: 10px; } .aa-trust__list .aa-info { font-size: 14px; } }
.aa-trust + #footer { margin-top: 0 !important; }
#footer ul li a { display: inline-block; padding: 5px 0; }
.footer-bottom .aa-price-footnote { margin-bottom: 4px; font-size: 13px; opacity: .85; }
.footer-bottom .aa-price-footnote a { color: inherit; text-decoration: underline; }

/* ---------- 404 ---------- */
.aa-404 { max-width: 780px; margin: 20px auto 60px; padding: 40px 24px; border-radius: 10px; background: #fff; text-align: center; }
.aa-404__code { margin: 0 0 6px; font-size: 72px; font-weight: 800; line-height: 1; color: var(--aa-brand); }
.aa-404__title { margin: 0 0 8px; font-size: 26px; color: var(--aa-ink); }
.aa-404__text { max-width: 520px; margin: 0 auto 20px; color: var(--aa-text-2); }
.aa-404__search { max-width: 520px; margin: 0 auto 20px; text-align: start; }
.aa-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px; }
.aa-404__cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.aa-404__cats a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 10px; color: var(--aa-ink); font-size: 14px; }
.aa-404__cats a:hover { background: var(--aa-brand-soft); }
@media (max-width: 575px) { .aa-404__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aa-404__code { font-size: 56px; } }

/* ---------- Phone menu: extra links under the categories ---------- */
.aa-mobile-links { margin: 0; padding: 8px 0; list-style: none; border-top: 1px solid var(--aa-line); }
.aa-mobile-links a { display: block; padding: 13px 20px; font-size: 17px; color: var(--aa-ink); }
.aa-mobile-links--account a { font-size: 15px; color: var(--aa-text-2); }

/* ---------- Follow-up fixes after the live check ---------- */
#home-slider .home-slider-image img { width: 100%; height: auto; }
@media (max-width: 991px) { .home-slider { min-height: 0 !important; } }
@media (max-width: 767px) {
    .archive-grid-header .woocommerce-ordering { flex: 1 1 0 !important; width: auto !important; min-width: 0; }
    .archive-grid-header .woocommerce-ordering select { width: 100% !important; }
    /* product page: qty + button + heart on one line at 320px */
    .woocommerce div.product form.cart:not(.variations_form) { flex-wrap: nowrap; }
    .woocommerce div.product form.cart div.quantity { height: 46px; }
    .woocommerce div.product form.cart .quantity .quantity-button { width: 32px; }
    .woocommerce div.product form.cart .quantity input.qty { width: 36px !important; }
    .woocommerce div.product form.cart button.single_add_to_cart_button.button { flex: 1 1 0; height: 46px !important; }
    .woocommerce div.product form.cart .aa-wl-toggle--single { flex: 0 0 46px; width: 46px; height: 46px; }
}
.wa__btn_popup .wa__btn_popup_txt { font-family: inherit !important; font-size: 13px !important; width: auto !important; white-space: nowrap; }
html[lang^="ar"] .wa__btn_popup .wa__btn_popup_txt, html[lang^="ar"] .wa__btn_popup .wa__btn_popup_txt * { font-family: "Cairo", sans-serif !important; }
html[lang^="de"] .wa__btn_popup .wa__btn_popup_txt, html[lang^="de"] .wa__btn_popup .wa__btn_popup_txt * { font-family: "Poppins", sans-serif !important; }
@media (max-width: 767px) {
    .woocommerce div.product form.cart .quantity .quantity-button { width: 28px; }
    .woocommerce div.product form.cart .quantity input.qty { width: 30px !important; }
    .woocommerce div.product form.cart .aa-wl-toggle--single { flex-basis: 44px; width: 44px; }
    .woocommerce div.product form.cart button.single_add_to_cart_button.button { font-size: 14px !important; white-space: nowrap; }
    /* home categories: 3 per row on phones (swipe), compact tiles */
    .owl-carousel-cats .product { padding: 10px 6px !important; min-height: 0 !important; }
    .owl-carousel-cats .product img { padding: 4px !important; }
    .owl-carousel-cats .woocommerce-loop-product__title { font-size: 14px !important; line-height: 1.4 !important; min-height: 0 !important; margin: 6px 0 0 !important; text-align: center; }
    /* slider dots instead of arrows on phones */
    .owl-carousel-slider .owl-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
    .owl-carousel-slider .owl-dots button.owl-dot { position: static !important; width: 8px; height: 8px; border-radius: 50%; background: #d9dce2 !important; font-size: 0; }
    .owl-carousel-slider .owl-dots button.owl-dot.active { width: 20px; border-radius: 4px; background: var(--aa-brand) !important; }
}
@media (min-width: 992px) { body.aa-header-compact #header .user-menu { margin-top: 16px; margin-bottom: 6px; } }
/* Carousels: before the deferred carousel script starts, lay out the first items exactly as the carousel will
   (same items per row as js/main.js), so they paint with the page and nothing jumps when the script runs. */
.owl-carousel-slider:not(.owl-loaded) { display: flex !important; flex-wrap: nowrap; overflow: hidden; }
.owl-carousel-slider:not(.owl-loaded) > * { flex: 0 0 auto; min-width: 0; width: 100%; }
.owl-carousel-slider:not(.owl-loaded) > :not(:first-child) { display: none; }
/* Product / category carousels: only on phones and tablets (there they sit right under the slider; on desktop Chrome
   counts the carousel rebuild of a pre-laid-out RTL row as a large layout shift, while hidden-until-ready measures 0). */
@media (max-width: 991px) {
    .owl-carousel-products:not(.owl-loaded), .owl-carousel-cats:not(.owl-loaded) { display: flex !important; flex-wrap: nowrap; overflow: hidden; }
    .owl-carousel-products:not(.owl-loaded) > *, .owl-carousel-cats:not(.owl-loaded) > * { flex: 0 0 auto; min-width: 0; }
    .owl-carousel-products:not(.owl-loaded) > * { width: 50%; }
    .owl-carousel-cats:not(.owl-loaded) > * { width: 33.3333%; }
}
@media (min-width: 600px) and (max-width: 991px) { .owl-carousel-cats:not(.owl-loaded) > * { width: 25%; } }
@media (max-width: 767px) { .owl-carousel-slider:not(.owl-loaded) { padding-bottom: 34px; } } /* room for the dots */
#footer .footer-logos { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
.product_meta .posted_in a, .product_meta .tagged_as a { text-decoration: underline; text-underline-offset: 2px; }
/* slider dots: 24px tap area around the visible dot */
@media (max-width: 767px) {
    .owl-carousel-slider .owl-dots { gap: 0; }
    .owl-carousel-slider .owl-dots button.owl-dot { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: transparent !important; }
    .owl-carousel-slider .owl-dots button.owl-dot span { display: block; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: #d9dce2; }
    .owl-carousel-slider .owl-dots button.owl-dot.active { width: 32px; background: transparent !important; }
    .owl-carousel-slider .owl-dots button.owl-dot.active span { width: 20px; border-radius: 4px; background: var(--aa-brand); }
}
/* Carousels are rebuilt by the script after load: keep them out of the browser's scroll anchoring, or (with the sticky
   header) Chrome counts their rebuild as a large layout shift. */
.owl-carousel, #header { overflow-anchor: none; } /* the sticky header must not become the scroll anchor either */

/* ---------- Header cart: badge anchored to the cart link (it stayed behind when the header shrinks on scroll) ---------- */
.header-cart .header-cart-button { position: relative; display: inline-block; }
.header-cart .header-cart-button #mini-cart-count { top: -6px !important; left: calc(50% + 5px) !important; right: auto !important; } /* beats rtl.css's phone left:31px!important */

/* ---------- Header mini-cart dropdown ---------- */
.dropdown-cart-content {
    width: 360px; padding: 4px 16px 16px; border: 1px solid var(--aa-line); border-radius: 10px;
    background: #fff !important; box-shadow: 0 14px 36px rgba(40, 45, 59, .16);
    left: auto !important; right: auto !important; inset-inline-end: 0 !important; z-index: 1001;
}
.dropdown-cart-content .woocommerce-mini-cart { max-height: 340px; margin: 0 !important; padding: 0 !important; overflow-y: auto; list-style: none; }
.dropdown-cart-content .woocommerce-mini-cart .mini_cart_item {
    position: relative; display: block; min-height: 82px; margin: 0 !important; padding: 13px 0 !important;
    padding-inline-start: 68px !important; padding-inline-end: 34px !important;
    border-bottom: 1px solid var(--aa-line); border-radius: 0 !important; background: none !important; list-style: none;
}
.dropdown-cart-content .woocommerce-mini-cart .mini_cart_item:last-child { border-bottom: 0; }
.dropdown-cart-content .mini_cart_item a:not(.remove) {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    color: var(--aa-ink) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.45; text-align: start;
}
.dropdown-cart-content .mini_cart_item a:not(.remove):hover { color: var(--aa-brand-text) !important; }
.dropdown-cart-content .mini_cart_item a:not(.remove) img {
    position: absolute; top: 13px; inset-inline-start: 0; float: none !important; width: 56px !important; height: 56px !important; margin: 0 !important;
    object-fit: cover; border: 1px solid var(--aa-line); border-radius: 6px; background: #fff;
}
.dropdown-cart-content .mini_cart_item .quantity {
    display: block !important; height: auto !important; margin: 4px 0 0 !important; padding: 0 !important; overflow: visible; border: 0 !important;
    background: none !important; color: var(--aa-text-2); font-size: 13px; text-align: start;
}
.dropdown-cart-content .mini_cart_item .quantity .woocommerce-Price-amount { color: var(--aa-ink); font-size: 14px; font-weight: 600; }
.dropdown-cart-content .mini_cart_item a.remove {
    position: absolute !important; top: 13px !important; left: auto !important; right: auto !important; inset-inline-end: 0 !important;
    display: flex !important; align-items: center; justify-content: center; width: 26px !important; height: 26px !important; margin: 0 !important;
    border-radius: 50%; background: #f2f3f5 !important; color: var(--aa-text-2) !important; font-size: 18px !important; line-height: 1 !important;
}
.dropdown-cart-content .mini_cart_item a.remove:hover { background: #fbe9e7 !important; color: #a23b2c !important; }
.dropdown-cart-content .woocommerce-mini-cart__total {
    display: flex; align-items: center; justify-content: space-between; margin: 0 !important; padding: 14px 0 !important;
    border-top: 1px solid var(--aa-line) !important; color: var(--aa-ink) !important; font-size: 15px;
}
.dropdown-cart-content .woocommerce-mini-cart__total strong { font-weight: 500; }
.dropdown-cart-content .woocommerce-mini-cart__total .woocommerce-Price-amount { font-size: 17px; font-weight: 700; color: var(--aa-ink); }
.dropdown-cart-content .woocommerce-mini-cart__total bdi, .dropdown-cart-content .mini_cart_item .quantity bdi { color: inherit !important; } /* an old rule made these white (dark panel) */
.dropdown-cart-content .woocommerce-mini-cart__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 !important; padding: 0 !important; }
.dropdown-cart-content .woocommerce-mini-cart__buttons a.button {
    display: flex !important; align-items: center; justify-content: center; height: 44px; margin: 0 !important; padding: 0 10px !important;
    border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.2; text-align: center;
}
.dropdown-cart-content .woocommerce-mini-cart__buttons a.button:not(.checkout) {
    background: #fff !important; color: var(--aa-ink) !important; border: 1px solid var(--aa-line) !important;
}
.dropdown-cart-content .woocommerce-mini-cart__buttons a.button:not(.checkout):hover { color: var(--aa-brand-text) !important; border-color: var(--aa-brand) !important; }
.dropdown-cart-content .woocommerce-mini-cart__buttons a.checkout { border: 1px solid var(--aa-ink) !important; }
.dropdown-cart-content .woocommerce-mini-cart__buttons a.checkout:hover { border-color: var(--aa-brand-dark) !important; }
.dropdown-cart-content .woocommerce-mini-cart__empty-message { margin: 0; padding: 26px 0 12px; color: var(--aa-text-2); text-align: center; }
@media (max-width: 991px) {
    .dropdown-cart-content { position: fixed !important; top: 62px !important; left: 10px !important; right: 10px !important; width: auto; max-height: calc(100vh - 80px); overflow-y: auto; }
    .dropdown-cart-content .woocommerce-mini-cart { max-height: none; }
}

/* ---------- Carousel arrows: round white buttons with a line chevron (slider + home carousels) ----------
   Previous sits on the reading-start side (right in Arabic, left in German), next on the other side.
   js/main.js sets --aa-nav-top to the middle of the product / category images. */
:root {
    --aa-chev-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
    --aa-chev-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
    position: absolute !important; top: var(--aa-nav-top, 40%) !important; z-index: 3; transform: translateY(-50%);
    display: flex !important; align-items: center; justify-content: center;
    width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important;
    border: 1px solid var(--aa-line) !important; border-radius: 50% !important;
    background: #fff !important; color: var(--aa-ink) !important; opacity: 1 !important; font-size: 0 !important; line-height: 0 !important;
    box-shadow: 0 4px 14px rgba(40, 45, 59, .14); cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.owl-carousel .owl-nav button.owl-prev span, .owl-carousel .owl-nav button.owl-next span { display: none !important; }
.owl-carousel .owl-nav button.owl-prev::before, .owl-carousel .owl-nav button.owl-next::before {
    content: ""; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--aa-chev-left) no-repeat center / contain; mask: var(--aa-chev-left) no-repeat center / contain;
}
.owl-carousel .owl-nav button.owl-next::before,
html[dir="rtl"] .owl-carousel .owl-nav button.owl-prev::before { -webkit-mask-image: var(--aa-chev-right); mask-image: var(--aa-chev-right); }
html[dir="rtl"] .owl-carousel .owl-nav button.owl-next::before { -webkit-mask-image: var(--aa-chev-left); mask-image: var(--aa-chev-left); }
.owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-prev:focus-visible, .owl-carousel .owl-nav button.owl-next:focus-visible {
    background: var(--aa-ink) !important; border-color: var(--aa-ink) !important; color: #fff !important; outline: none;
}
.owl-carousel .owl-nav button.disabled { opacity: .35 !important; box-shadow: none; cursor: default; }
.owl-carousel .owl-nav button.disabled:hover { background: #fff !important; border-color: var(--aa-line) !important; color: var(--aa-ink) !important; }
html[dir="rtl"] .owl-carousel .owl-nav .owl-prev { right: 8px !important; left: auto !important; }
html[dir="rtl"] .owl-carousel .owl-nav .owl-next { left: 8px !important; right: auto !important; }
html[dir="ltr"] .owl-carousel .owl-nav .owl-prev { left: 8px !important; right: auto !important; }
html[dir="ltr"] .owl-carousel .owl-nav .owl-next { right: 8px !important; left: auto !important; }
/* slider: a little larger, inside the rounded slide */
.owl-carousel-slider .owl-nav button.owl-prev, .owl-carousel-slider .owl-nav button.owl-next { top: calc(50% + 15px) !important; width: 44px !important; height: 44px !important; }
html[dir="rtl"] .owl-carousel-slider .owl-nav .owl-prev { right: 16px !important; }
html[dir="rtl"] .owl-carousel-slider .owl-nav .owl-next { left: 16px !important; }
html[dir="ltr"] .owl-carousel-slider .owl-nav .owl-prev { left: 16px !important; }
html[dir="ltr"] .owl-carousel-slider .owl-nav .owl-next { right: 16px !important; }
@media (max-width: 767px) {
    .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { width: 34px !important; height: 34px !important; }
    .owl-carousel .owl-nav button.owl-prev::before, .owl-carousel .owl-nav button.owl-next::before { width: 16px; height: 16px; }
    html[dir="rtl"] .owl-carousel .owl-nav .owl-prev { right: 4px !important; }
    html[dir="rtl"] .owl-carousel .owl-nav .owl-next { left: 4px !important; }
    html[dir="ltr"] .owl-carousel .owl-nav .owl-prev { left: 4px !important; }
    html[dir="ltr"] .owl-carousel .owl-nav .owl-next { right: 4px !important; }
}

/* ---------- Slider: background styles (cream default, navy, sand) and picture layouts by count (art-1…4) ---------- */
.aa-hero--navy { background: radial-gradient(120% 140% at 85% 15%, #39405a 0%, #2a3040 55%, #1f2430 100%); }
.aa-hero--navy .aa-hero__eyebrow { color: #e2bf84; }
.aa-hero--navy .aa-hero__title { color: #fff; }
.aa-hero--navy .aa-hero__sub { color: #d3d7df; }
.aa-hero--navy .aa-btn--primary { background: var(--aa-brand); color: #fff; }
.aa-hero--navy .aa-btn--primary:hover { background: var(--aa-brand-text); }
.aa-hero--navy .aa-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.aa-hero--navy .aa-btn--ghost:hover { border-color: #fff; color: #fff; }
.owl-carousel .aa-hero--art-3 .aa-hero__art img.aa-hero__img--1 { top: 2%; inset-inline-start: 0; width: 56%; }
.owl-carousel .aa-hero--art-3 .aa-hero__art img.aa-hero__img--2 { top: 8%; inset-inline-end: 0; width: 44% !important; }
.owl-carousel .aa-hero--art-3 .aa-hero__art img.aa-hero__img--3 { bottom: 0; inset-inline-start: 26%; width: 44% !important; }
.aa-hero--sand { background: radial-gradient(120% 140% at 15% 85%, #fffaf2 0%, #f3e9d6 60%, #e9d8b8 100%); }
.owl-carousel .aa-hero--art-2 .aa-hero__art img.aa-hero__img--1 { top: 0; inset-inline-start: 0; width: 64%; }
.owl-carousel .aa-hero--art-2 .aa-hero__art img.aa-hero__img--2 { top: auto; bottom: 0; inset-inline-end: 0; width: 52% !important; }
@media (max-width: 767px) {
    .owl-carousel .aa-hero--art-3 .aa-hero__art img.aa-hero__img--1 { width: 70%; top: 4%; }
    .owl-carousel .aa-hero--art-3 .aa-hero__art img.aa-hero__img--2 { width: 58% !important; top: auto; bottom: 2%; }
    .owl-carousel .aa-hero--art-2 .aa-hero__art img.aa-hero__img--1 { width: 72%; top: 0; }
    .owl-carousel .aa-hero--art-2 .aa-hero__art img.aa-hero__img--2 { width: 58% !important; bottom: 2%; }
}

/* Phone menu open: the menu lives inside the sticky header (z-index 999), below the WP admin bar (99999) and the
   WhatsApp button. Lift the header only while the menu is open, and stop the page behind it from scrolling. */
body.aa-menu-open #header { z-index: 100000 !important; }
body.aa-menu-open { overflow: hidden; }
body.aa-menu-open .wa__btn_popup, body.aa-menu-open .wa__popup_chat_box { display: none !important; }
/* keep slide text clear of the round arrows (44px button + 16px offset) */
@media (min-width: 768px) { .aa-hero { padding-left: 84px; padding-right: 84px; } }

/* one picture: large, centred in the picture area */
.owl-carousel .aa-hero--art-1 .aa-hero__art img.aa-hero__img--1 { top: 50%; inset-inline-start: 50%; width: 78%; transform: translate(-50%, -50%) !important; }
html[dir="rtl"] .owl-carousel .aa-hero--art-1 .aa-hero__art img.aa-hero__img--1 { transform: translate(50%, -50%) !important; }
/* slide without pictures: text uses the full width */
.aa-hero--art-0 .aa-hero__text { flex-basis: 100%; }

/* ---------- Slider next to the category menu (desktop): 30px space at the top, bottom level with the menu; no neighbour edge ---------- */
.owl-carousel-slider .owl-item { border: 0 !important; }
@media (min-width: 992px) {
    #home-slider .aa-hero { margin-top: 30px; aspect-ratio: auto; height: calc(var(--aa-hero-h, 497px) - 30px); }
    #home-slider .home-slider-image { margin-top: 30px !important; height: calc(var(--aa-hero-h, 497px) - 30px); overflow: hidden; border-radius: 10px; }
    #home-slider .home-slider-image img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- Footer on phones: centred logo rows, less empty space, even spacing between groups ---------- */
@media (max-width: 767px) {
    footer#footer { padding-top: 36px; margin-top: 0; }
    #footer .row > [class*="col-"] { margin-bottom: 0; }
    #footer .logo-white { margin-bottom: 10px; }
    #footer .footer-address, #footer ul, #footer .footer-logos { margin-bottom: 0 !important; }
    #footer h3 { margin: 26px 0 10px; } /* the same space above every heading */
    #footer ul li a { padding: 6px 0; }
    #footer .footer-logos { justify-content: center; gap: 6px; }
    #footer .footer-logos img { height: 30px; width: auto; object-fit: contain; }
    #footer ul.social-footer { display: inline-block; text-align: start; }
    .footer-bottom { padding: 16px 0 84px; } /* room for the WhatsApp button */
}

/* ---------- Phone header: logo + menu button always on one line (the button wrapped under the logo below ~380px) ---------- */
@media (max-width: 991px) {
    header .mobile-header-container .logo { display: flex; align-items: center; gap: 4px; }
    header .mobile-header-container .logo .mobile-menu-con { order: -1; float: none !important; flex: 0 0 auto; }
    header .mobile-header-container .logo > a { flex: 0 1 auto; min-width: 0; }
    header .mobile-header-container .logo > a img { max-width: 100%; height: auto; }
}

/* ---------- Product page on phones: [qty] ........ [♡] then a full-width add-to-cart button ---------- */
@media (max-width: 767px) {
    .woocommerce div.product form.cart:not(.variations_form):has(div.quantity input[type="number"]) { flex-wrap: wrap; gap: 10px; }
    .woocommerce div.product form.cart:has(div.quantity input[type="number"]) div.quantity { order: 1; }
    .woocommerce div.product form.cart:has(div.quantity input[type="number"]) .aa-wl-toggle--single { order: 2; margin-inline-start: auto !important; }
    .woocommerce div.product form.cart:has(div.quantity input[type="number"]) button.single_add_to_cart_button.button { order: 3; flex: 1 1 100%; }
    .woocommerce div.product form.cart .quantity .quantity-button { width: 40px; }
    .woocommerce div.product form.cart .quantity input.qty { width: 44px !important; }
    .woocommerce div.product form.cart button.single_add_to_cart_button.button { height: 50px !important; font-size: 15px !important; }
    .woocommerce div.product form.cart div.quantity, .woocommerce div.product form.cart .aa-wl-toggle--single { height: 46px; }
}
/* German: normal capitalisation on the add-to-cart button */
html[lang^="de"] .woocommerce div.product form.cart .button { text-transform: none; }

/* ---------- Tables inside product descriptions (pasted with fixed widths): fit the screen, clean rows ---------- */
.woocommerce-Tabs-panel table { width: 100% !important; max-width: 640px; height: auto !important; margin: 8px 0 22px; border-collapse: collapse; border: 1px solid var(--aa-line); }
.woocommerce-Tabs-panel table td, .woocommerce-Tabs-panel table th { width: auto !important; padding: 8px 12px !important; border-bottom: 1px solid var(--aa-line); vertical-align: top; overflow-wrap: anywhere; }
.woocommerce-Tabs-panel table tr:nth-child(even) td { background: #fafbfc; }
.woocommerce-Tabs-panel table td:first-child { width: 42% !important; color: var(--aa-text-2); }
/* WooCommerce's clearfix pseudo-elements became flex items and pushed the quantity box 20px in */
.woocommerce div.product form.cart:not(.variations_form)::before, .woocommerce div.product form.cart:not(.variations_form)::after { display: none !important; }
/* description headings: long German words fit on phones */
.woocommerce-Tabs-panel h1, .woocommerce-Tabs-panel h2, .woocommerce-Tabs-panel h3, .woocommerce-Tabs-panel h4 { overflow-wrap: anywhere; }
@media (max-width: 767px) {
    .woocommerce-Tabs-panel h1, .woocommerce-Tabs-panel h2 { font-size: 24px !important; line-height: 1.35 !important; }
    .woocommerce-Tabs-panel h3, .woocommerce-Tabs-panel h4 { font-size: 20px !important; line-height: 1.4 !important; }
}