/* ==========================================================================
   Noor — base front-end styles
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

/* Link colours come from theme.json (styles.elements.link) so style variations can change them. */

/*
 * The "Text" palette colour was renamed from `text` to `foreground`: a `text`
 * slug makes WordPress print `.has-text-color { color: … !important }`, which
 * is also the class every block with a custom text colour gets. Keep content
 * and custom CSS that used the old slug working.
 */
:root { --wp--preset--color--text: var(--wp--preset--color--foreground); }
.has-text-background-color { background-color: var(--wp--preset--color--foreground); }

:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Header (patterns/header-*.php, inc/header.php)
   -------------------------------------------------------------------------- */

/*
 * Sticky: a sticky group can't stick inside the header part, whose wrapper is
 * exactly as tall as the group, so the part itself sticks. The shadow appears
 * after 48px of scrolling (scroll-driven animation; no shadow without support).
 * Core sets --wp-admin--admin-bar--position-offset on .is-position-sticky only,
 * not on this wrapper, so the offset uses the admin bar height directly; at
 * 600px and below the admin bar scrolls away (as in core).
 * --noor-header-stick-offset (assets/js/header.js) is the height of what sits
 * above the last visible .noor-header__stick row: that part scrolls away.
 */
.wp-site-blocks > .wp-block-template-part:has(> .is-position-sticky) {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--noor-header-stick-offset, 0px));
    z-index: 100;
}
@media screen and (max-width: 600px) {
    .wp-site-blocks > .wp-block-template-part:has(> .is-position-sticky) { top: calc(0px - var(--noor-header-stick-offset, 0px)); }
}
@supports (animation-timeline: scroll()) {
    .wp-site-blocks > .wp-block-template-part:has(> .is-position-sticky) {
        animation: noor-header-shadow linear both;
        animation-timeline: scroll();
        animation-range: 0 48px;
    }
    /* Floating: the bar has its own shadow; the band around it stays clear. */
    .wp-site-blocks > .wp-block-template-part:has(> .noor-header--floating) { animation: none; }
}
@keyframes noor-header-shadow {
    to { box-shadow: var(--wp--preset--shadow--lift); }
}

.noor-header { border-bottom: 1px solid var(--wp--preset--color--line); }
.noor-header .wp-block-site-title a { color: inherit; text-decoration: none; }
/* Menu links take the link colour (primary; lighter in Midnight) on hover and for the current page, like the header icons (not in the coloured menu bar, below). */
.noor-header .wp-block-navigation-item__content:hover,
.noor-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--custom--color--link, var(--wp--preset--color--primary)); }
/* The brand gives way first on narrow screens; a long site title is cut short. */
.noor-header__brand { min-width: 0; }
.noor-header__brand .wp-block-site-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Button-only search: an icon like the header icons, not a filled button. */
.noor-header .wp-block-search__button-only .wp-block-search__button {
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
}
.noor-header .wp-block-search__button-only .wp-block-search__button:hover { color: var(--wp--preset--color--primary); }

/* The menu button is a 40px touch target, like the header icons. */
.noor-header .wp-block-navigation__responsive-container-open {
    min-width: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
}

/*
 * Phone menu: a drawer from the side over the dimmed page, instead of core's
 * full-screen overlay. Tapping the dimmed page closes it (header.js); core
 * keeps the page from scrolling behind it (html.has-modal-open).
 */
.noor-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    --navigation-layout-justification-setting: flex-start;
    --navigation-layout-justify: flex-start;
    padding: 0;
    background-color: color-mix(in srgb, var(--wp--preset--color--black) 45%, transparent);
    color: var(--wp--preset--color--foreground);
    text-align: start;
}
.noor-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
    width: min(320px, 86vw);
    max-width: none;
    height: 100%;
    margin: 0;
    margin-inline-end: auto;
    padding: 1rem 1.25rem 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--wp--preset--color--background);
    box-shadow: 4px 0 24px color-mix(in srgb, var(--wp--preset--color--black) 18%, transparent);
    animation: noor-drawer-in 0.28s ease-out;
}
.rtl .noor-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { animation-name: noor-drawer-in-rtl; }
@keyframes noor-drawer-in { from { transform: translateX(-100%); } }
@keyframes noor-drawer-in-rtl { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .noor-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { animation: none; }
}
.noor-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 3.25rem;
    align-items: stretch;
}
.noor-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { width: 100%; gap: 2px; }
.noor-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.noor-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    padding: 0.7rem 0.75rem;
    border-radius: 8px;
    font-size: var(--wp--preset--font-size--medium);
    text-transform: none;
    letter-spacing: normal;
}
.noor-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.noor-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
    background: var(--wp--preset--color--muted);
    color: var(--wp--custom--color--link, var(--wp--preset--color--primary));
}
.noor-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    padding-inline-start: 0.75rem;
    padding-top: 0;
    gap: 2px;
}
.noor-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--text-soft);
}
.noor-header .wp-block-navigation__responsive-container-close {
    top: 1rem;
    inset-inline-end: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
}
.noor-header .wp-block-navigation__responsive-container-close:hover { background: var(--wp--preset--color--muted); }

/* Store (default): marketplace layout — logo, a wide filled search, labelled icons; the menu in a primary-colour bar. */
.noor-header__phone-menu.wp-block-navigation { display: none; }
.noor-header--store .noor-header__search { max-width: 680px; }
.noor-header--store .noor-header__search .wp-block-search__inside-wrapper {
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--wp--preset--color--muted);
}
.noor-header--store .noor-header__search .wp-block-search__inside-wrapper:focus-within { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 0; }
.noor-header--store .noor-header__search .wp-block-search__input {
    min-height: 46px;
    padding-inline: 1rem;
    border: 0;
    background: transparent;
    outline: none;
}
.noor-header--store .noor-header__search .wp-block-search__button {
    margin: 0;
    padding: 0 0.9rem;
    border: 0;
    background: transparent;
    color: var(--wp--preset--color--foreground);
}
.noor-header--store .noor-header__search .wp-block-search__button:hover { color: var(--wp--preset--color--primary); }
.noor-header--store .wp-block-noor-header-icon.has-label { font-size: var(--wp--preset--font-size--small); gap: 4px; min-width: 56px; }
.noor-header--store .wp-block-noor-header-more.has-label .wp-block-noor-header-more__toggle { font-size: var(--wp--preset--font-size--small); gap: 4px; min-width: 56px; }
.noor-header__nav-bar .wp-block-navigation-item__content { padding-block: 0.6rem; }
/* The store's category bar holds Offer Zone and up to ten categories in one
   row: smaller type, and a smaller gap on narrower screens. */
.noor-header--store .noor-header__nav-bar .wp-block-navigation { font-size: var(--wp--preset--font-size--small); }
@media (max-width: 1200px) {
    .noor-header--store .noor-header__nav-bar .wp-block-navigation__container { gap: var(--wp--preset--spacing--30); }
}
/* The bar is primary: its top-level links stay white and underline instead. */
.noor-header__nav-bar .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.noor-header__nav-bar .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 781px) {
    .noor-header--store .noor-header__nav-bar { display: none; }
    .noor-header--store .noor-header__phone-menu.wp-block-navigation { display: flex; }
    .noor-header--store .noor-header__row { flex-wrap: wrap; row-gap: 0.75rem; column-gap: 0.25rem; }
    .noor-header--store .noor-header__brand { flex: 1 1 0; justify-content: center; }
    .noor-header--store .noor-header__search { order: 3; flex-basis: 100%; max-width: none; }
    /* Hidden visually only: the label is the link's name. */
    .noor-header--store .wp-block-noor-header-icon__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .noor-header--store .wp-block-noor-header-icon.has-label { position: relative; min-width: 40px; }
    .noor-header--store .wp-block-noor-header-icon.is-type-track-order,
    .noor-header--store .wp-block-noor-header-icon.is-type-wishlist,
    .noor-header--store .wp-block-noor-header-more { display: none; }
}

/* Digital store: the same layout on the primary colour, the menu bar in the inverse colour. */
.noor-header--dark { border-block-end: 0; }
.noor-header--dark .noor-header__search .wp-block-search__inside-wrapper { background: var(--wp--preset--color--surface); }
.noor-header--dark .noor-header__search .wp-block-search__inside-wrapper:focus-within { outline-color: var(--wp--preset--color--accent); }
.noor-header--dark .wp-block-noor-header-icon:hover,
.noor-header--dark .wp-block-noor-header-icon:focus-visible,
.noor-header--dark .wp-block-noor-header-icon > summary:hover { color: var(--wp--preset--color--accent); }
.noor-header--dark .wp-block-noor-header-icon__count { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--black); }
.noor-header--dark .wp-block-noor-header-icon.is-type-wallet .wp-block-noor-header-icon__label { color: var(--wp--preset--color--accent); font-weight: 700; }
.noor-header--dark .noor-header__social .wp-block-social-links { margin: 0; gap: var(--wp--preset--spacing--20); }
.noor-header--dark .noor-header__social { padding-inline-end: var(--wp--preset--spacing--30); border-inline-end: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent); }
.noor-header--dark .noor-header__phone-menu .wp-block-navigation__responsive-container-open { color: inherit; }
@media (max-width: 1023px) {
    .noor-header--dark .noor-header__social { display: none; }
}
@media (max-width: 600px) {
    .noor-header--dark .noor-header__wallet { display: none; }
}

/* Marketplace: the Digital store bars without the top bar; a white search box
   with a Search button in the accent colour, labels beside their icons and the
   wallet balance in a pill. */
.noor-header--marketplace .noor-header__search { max-width: 36rem; margin-inline: auto; }
.noor-header--marketplace .noor-header__search .wp-block-search__inside-wrapper { overflow: hidden; }
.noor-header--marketplace .noor-header__search .wp-block-search__input { min-height: 42px; color: var(--wp--preset--color--foreground); }
.noor-header--marketplace .noor-header__search .wp-block-search__button {
    padding: 0 var(--wp--preset--spacing--40);
    border-radius: 0;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--foreground);
    font-weight: 600;
}
.noor-header--marketplace .noor-header__search .wp-block-search__button:hover {
    background: color-mix(in srgb, var(--wp--preset--color--accent) 85%, var(--wp--preset--color--black));
    color: var(--wp--preset--color--foreground);
}
.noor-header--marketplace .wp-block-noor-header-icon.has-label,
.noor-header--marketplace .wp-block-noor-header-icon.has-menu.has-label > summary { flex-direction: row; gap: var(--wp--preset--spacing--20); min-width: 0; }
.noor-header--marketplace .wp-block-noor-header-icon.is-type-wallet {
    padding: calc(var(--wp--preset--spacing--20) * 0.7) var(--wp--preset--spacing--30);
    border-radius: 999px;
    background: var(--wp--preset--color--primary-dark);
}
.noor-header--marketplace .wp-block-noor-header-icon.is-type-wallet:hover { color: inherit; background: color-mix(in srgb, var(--wp--preset--color--primary-dark) 80%, var(--wp--preset--color--black)); }
.noor-header--marketplace .noor-header__brand { flex-shrink: 0; }
.noor-header--marketplace .noor-header__social .wp-block-social-links { flex-wrap: nowrap; }
@media (max-width: 1279px) {
    .noor-header--marketplace .noor-header__social { display: none; }
}

/* Classic: on phones the menu button comes first, then the logo, then the icons. */
@media (max-width: 600px) {
    .noor-header--classic .wp-block-navigation { order: -1; }
    .noor-header--classic .noor-header__brand { flex: 1 1 0; }
}

/* Boutique: the logo sits exactly in the middle between two equal sides. */
.noor-header--boutique .noor-header__side { flex: 1 1 0; min-width: 0; }
.noor-header--boutique .noor-header__brand { flex: 0 1 auto; justify-content: center; }
@media (max-width: 600px) {
    .noor-header--boutique .wp-block-noor-header-icon.is-type-account,
    .noor-header--boutique .wp-block-noor-header-icon.is-type-wishlist { display: none; }
    .noor-header--boutique .wp-block-site-title { font-size: var(--wp--preset--font-size--large) !important; }
}

/* Corporate: contact bar (primary dark) above, a call-to-action button beside the menu. */
.noor-header__contact { margin: 0; }
.noor-header__contact-bar a { text-decoration: none; }
.noor-header__contact-bar a:hover { text-decoration: underline; }
/* Social icons bound to Site Info: hidden while no network has a URL. */
.noor-social-links:not(:has(li)) { display: none; }
.noor-header__contact-bar .wp-block-social-links,
.noor-header__strip .wp-block-social-links { gap: 0.4rem; font-size: 14px; }
@media (max-width: 600px) {
    .noor-header__contact-bar .wp-block-social-links { display: none; }
    .noor-header--corporate .noor-header__cta { display: none; }
}

/* Floating: a rounded bar with its own shadow, no full-width rule. */
.noor-header--floating { border-bottom: 0; }
/* The border comes from CSS: a block border colour adds .has-border-color, which the "border" palette slug turns into a text colour. */
.noor-header--floating .noor-header__bar { border: 1px solid var(--wp--preset--color--line); box-shadow: var(--wp--preset--shadow--soft); }
@media (max-width: 480px) {
    .noor-header--floating .noor-header__cta { display: none; }
}

/* Magazine: thin strip, masthead, the menu between a double and a single rule. */
.noor-header--magazine { border-bottom: 0; }
.noor-header__strip { border-bottom: 1px solid var(--wp--preset--color--line); }
.noor-header__rules {
    border-top: 3px double var(--wp--preset--color--primary);
    border-bottom: 1px solid var(--wp--preset--color--primary);
}
.noor-header__masthead .wp-block-site-tagline { margin: 0; }
@media (max-width: 600px) {
    .noor-header__masthead { padding-top: 1rem !important; padding-bottom: 0.9rem !important; }
    .noor-header__masthead .wp-block-site-title { font-size: var(--wp--preset--font-size--x-large) !important; }
    .noor-header__masthead .wp-block-site-tagline { display: none; }
}

/* Header buttons keep their words on one line. */
.noor-header .noor-header__cta .wp-block-button__link { white-space: nowrap; }

/* Live search results (assets/js/live-search.js) */
.noor-live-search { position: relative; }

.noor-search-results {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    width: max(100%, min(360px, calc(100vw - 32px)));
    max-height: 420px;
    overflow-y: auto;
    background: var(--wp--preset--color--background);
    color: var(--wp--preset--color--foreground);
    border: 1px solid var(--wp--preset--color--line);
    border-radius: 10px;
    box-shadow: var(--wp--preset--shadow--deep);
    z-index: 200;
    text-align: start;
    scrollbar-width: thin;
}
.noor-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--wp--preset--color--muted);
}
.noor-search-result:last-child { border-bottom: 0; }
.noor-search-result:hover,
.noor-search-result.is-active { background: var(--wp--preset--color--surface); }
.noor-search-result.is-active { outline: 2px solid var(--wp--preset--color--primary); outline-offset: -2px; }
.noor-search-result__img {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--wp--preset--color--muted);
}
.noor-search-result__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.noor-search-result__name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.noor-search-result__price {
    font-size: 14px;
    font-weight: 600;
    color: var(--wp--preset--color--primary);
}
.noor-search-result__price ins { text-decoration: none; }
.noor-search-result__price del { margin-inline-start: 4px; font-size: 12px; font-weight: 400; color: var(--wp--preset--color--text-soft); }
.noor-search-result__brand { font-size: 12px; color: var(--wp--preset--color--text-soft); }
.noor-search-results__empty {
    margin: 0;
    padding: 22px 16px;
    font-size: 14px;
    text-align: center;
    color: var(--wp--preset--color--text-soft);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.noor-footer { font-size: 0.95rem; }
.noor-footer a { color: color-mix(in srgb, currentColor 85%, transparent); text-decoration: none; }
.noor-footer a:hover { color: var(--wp--preset--color--inverse-text); }
.noor-footer h2 { color: var(--wp--preset--color--inverse-text); }
.noor-footer p { color: color-mix(in srgb, currentColor 75%, transparent); }
.noor-footer .wp-block-social-links { margin-top: 0.9rem; }
/* The site title in a footer has the section's text colour, not a faded link colour. */
.noor-footer p.wp-block-site-title,
.noor-footer .wp-block-site-title a { color: inherit; }
/* A column that only has social links (Mega's "Follow us") hides while none is set. */
.noor-footer__follow:not(:has(.wp-block-social-link)) { display: none; }
/* Privacy Policy · Terms, beside the copyright. */
.noor-footer .noor-footer__policies { margin: 0; }
.noor-footer .wp-block-separator:not(.is-style-dots) { width: 100%; opacity: 0.25; }

.noor-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.noor-footer__columns li { margin-bottom: 0.5rem; }
.noor-footer .noor-menu h2 { margin-top: 0; }
/* Footer menus (core/navigation, inc/navigation.php): a plain list of links;
   a menu without links hides its heading too. */
.noor-menu:not(:has(.wp-block-navigation-item)) { display: none; }
.noor-menu > .noor-menu__nav { margin-block-start: 0.75rem; }
.noor-menu__nav,
.noor-menu__nav .wp-block-navigation-item { font-size: inherit; font-weight: inherit; }
.noor-menu__nav .wp-block-navigation__container { gap: 0; align-items: flex-start; }
.noor-menu__nav:not(.noor-menu--inline) .wp-block-navigation-item { margin-bottom: 0.5rem; }
.noor-footer .noor-menu__nav .wp-block-navigation-item__content {
    padding: 0;
    color: color-mix(in srgb, currentColor 85%, transparent);
}
.noor-footer .noor-menu__nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--inverse-text); }
.noor-footer--minimal .noor-menu__nav .wp-block-navigation-item__content:hover { color: var(--wp--custom--color--link, var(--wp--preset--color--primary)); }

/* Minimal: a light footer; links take the link colour on hover. */
.noor-footer--minimal a:hover { color: var(--wp--custom--color--link, var(--wp--preset--color--primary)); }
.noor-footer--minimal p { margin: 0; }

/* A menu in one line (Minimal, Centered, bottom rows): links only. */
.noor-menu--inline h2 { display: none; }
.noor-menu--inline .wp-block-navigation__container { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.noor-footer--centered .noor-menu--inline .wp-block-navigation__container { justify-content: center; }
.noor-footer--centered .wp-block-social-links { justify-content: center; }

/* Contact lines (Site Info text templates): an icon before each link or
   line, drawn in CSS so screen readers skip it (unlike 📞 / ✉ emoji). */
.noor-contact-link { display: inline-flex; align-items: flex-start; gap: 0.5em; }
.noor-contact-link::before {
    content: "";
    flex: none;
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.2em;
    background: currentColor;
    -webkit-mask: var(--noor-contact-icon) center / contain no-repeat;
    mask: var(--noor-contact-icon) center / contain no-repeat;
}
.noor-contact-link.is-phone { --noor-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z'/%3E%3C/svg%3E"); }
.noor-contact-link.is-email { --noor-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.noor-contact-link.is-address { --noor-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.3 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
.noor-contact-link.is-hours { --noor-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.noor-contact-link.is-secure { --noor-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.noor-contact-link.is-delivery { --noor-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }
.noor-contact-link.is-returns { --noor-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.7L4 8.6'/%3E%3Cpath d='M4 4v4.6h4.6'/%3E%3C/svg%3E"); }
.noor-contact-link.is-support { --noor-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0116 0v2'/%3E%3Crect x='3' y='13' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='13' width='4' height='6' rx='1.5'/%3E%3C/svg%3E"); }

/* Business footer: the call-to-action band above the columns. */
.noor-footer__cta { border-radius: var(--wp--custom--radius--card, 22px); }
.noor-footer__cta h2 { margin: 0; }

/* Store footer: trust badges and the payment line. */
.noor-footer__trust { border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.noor-footer__trust p { margin: 0; color: var(--wp--preset--color--inverse-text); font-weight: 600; }

/* Marketplace footer: the Account column (header icons as plain links), the
   about text beside the social links, the copyright centred. */
.noor-footer__account .wp-block-noor-header-icon.has-label {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--wp--preset--spacing--20);
    min-height: 0;
    padding: 0;
    font-size: inherit;
    color: color-mix(in srgb, currentColor 85%, transparent);
}
.noor-footer__account .wp-block-noor-header-icon:hover { color: var(--wp--preset--color--inverse-text); }
.noor-footer__account .wp-block-noor-header-icon svg { width: 18px; height: 18px; }
.noor-footer__account .wp-block-noor-header-icon__count { display: none; }
.noor-footer__note p { flex: 1 1 24rem; max-width: 40rem; margin: 0; }
.noor-footer__note .wp-block-social-links { margin-top: 0; }
.noor-footer--marketplace .wp-block-separator:not(.is-style-dots) { opacity: 1; }


/* Footer — mobile: compact spacing + 2-column link menus */
@media (max-width: 768px) {
    .noor-footer {
        padding-top: 1.75rem !important;
        padding-bottom: 1rem !important;
    }
    .noor-footer__columns {
        row-gap: 1.5rem !important;
        column-gap: 1rem !important;
        margin-bottom: 1.25rem;
    }
    /* Put the link menus side by side; brand + contact stay full width */
    .noor-footer__columns > .wp-block-column:has(> .noor-menu),
    .noor-footer__columns > .wp-block-column.noor-footer__account {
        flex-basis: calc(50% - 0.5rem) !important;
    }
    .noor-footer__columns h2 { margin-bottom: 0.6rem !important; }
    .noor-footer__columns > .wp-block-column > p:first-child { margin-top: 0; }
    .noor-footer__columns li { margin-bottom: 0.4rem; }
    .noor-footer__legal { row-gap: 0.4rem; margin-top: 0.75rem; }
    .noor-footer__trust > * { flex-basis: calc(50% - 1rem); }
}

/* --------------------------------------------------------------------------
   Below the first screen: the browser lays out and paints sections only when
   they come near the viewport (content-visibility), so long pages (a store's
   product rows) show their top sooner, above all on phones. `auto` remembers a
   section's real height once it has been shown.
   -------------------------------------------------------------------------- */
.noor-main > section:nth-child(n+3),
.wp-site-blocks > footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
    /* It also clips painting at the box: leave room for slider arrows and card shadows that stick out. */
    overflow-clip-margin: var(--wp--preset--spacing--60);
}

/* --------------------------------------------------------------------------
   Inline icons
   -------------------------------------------------------------------------- */
.noor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.noor-icon svg { width: 1em; height: 1em; }

/* --------------------------------------------------------------------------
   Page titles, archive headers
   -------------------------------------------------------------------------- */
.noor-page-title {
    margin-top: 0;
    font-size: var(--wp--preset--font-size--xx-large);
    line-height: 1.2;
}
.noor-archive-header {
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.noor-archive-header .wp-block-term-description { color: var(--wp--preset--color--text-soft); }

.noor-author-header {
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.noor-author-header__avatar img {
    width: 96px;
    height: 96px;
    object-fit: cover;
}
.noor-author-header__text { gap: 0.5rem; }
.noor-author-header__bio { margin: 0; color: var(--wp--preset--color--text-soft); }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.noor-404 .has-huge-font-size {
    font-size: clamp(4rem, 12vw, 8rem);
    color: var(--wp--preset--color--primary);
    line-height: 1;
}

/* The note editors see next to a sample contact detail (Site Info); `a.` wins over the footers' link colours. */
a.noor-sample-note,
.noor-footer a.noor-sample-note {
    display: inline-block;
    margin-inline-start: 0.35em;
    padding: 0 0.5em;
    border-radius: var(--wp--custom--radius--pill);
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--text-soft);
    font-size: var(--wp--preset--font-size--xs);
    font-style: normal;
    font-weight: 600;
    text-decoration: none;
    vertical-align: middle;
}

/* Store columns footer: the product categories as a plain list of links. */
.noor-footer__shop-by .wc-block-product-categories-list { list-style: none; margin: 0; padding: 0; }
.noor-footer__shop-by .wc-block-product-categories-list-item { margin-block-end: var(--wp--preset--spacing--20); }