@layer components {
  .announcement-bar { background: var(--sab-color-aubergine); color: var(--sab-color-white); font-size: var(--sab-step--1); }
  .announcement-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sab-space-3); min-block-size: 2.25rem; }
  .announcement-bar p { margin: 0; }
  .announcement-bar ul { display: flex; gap: var(--sab-space-4); margin: 0; padding: 0; list-style: none; opacity: .85; }
  .announcement-bar li + li::before { content: "·"; margin-inline-end: var(--sab-space-4); }
  .site-header { position: relative; z-index: 100; background: rgb(252 250 248 / 96%); border-block-end: 1px solid rgb(50 26 61 / 9%); }
  .site-header.is-stuck { position: sticky; inset-block-start: 0; box-shadow: 0 .75rem 2rem rgb(36 16 45 / 8%); backdrop-filter: blur(14px); }
  .header-scroll-marker { position: absolute; block-size: 1px; inline-size: 1px; pointer-events: none; }
  .site-header__main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-block-size: 5.6rem; }
  .site-header__start, .site-header__end { display: flex; align-items: center; gap: .35rem; }
  .site-header__end { justify-content: flex-end; }
  .site-branding { text-align: center; }
  .custom-logo-link { display: inline-flex; }
  .custom-logo { max-block-size: 4.4rem; inline-size: auto; }
  .brand-wordmark { display: inline-flex; flex-direction: column; align-items: center; color: var(--sab-color-aubergine); font-family: Georgia, serif; font-size: 1.55rem; letter-spacing: .22em; line-height: 1; text-decoration: none; }
  .brand-wordmark small { margin-block-start: .35rem; color: var(--sab-color-mauve); font-family: var(--sab-font-arabic); font-size: .82rem; letter-spacing: 0; }
  .header-control { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-inline-size: 2.75rem; min-block-size: 2.75rem; border: 0; background: transparent; color: var(--sab-color-aubergine); padding: .35rem; text-decoration: none; }
  button.header-control:hover { background: var(--sab-color-blush); color: var(--sab-color-aubergine); }
  .header-control__label { font-size: var(--sab-step--1); }
  .menu-toggle { display: none; }
  .menu-toggle__lines, .menu-toggle__lines::before, .menu-toggle__lines::after { display: block; inline-size: 1.25rem; block-size: 1px; background: currentColor; content: ""; }
  .menu-toggle__lines::before { transform: translateY(-.38rem); }
  .menu-toggle__lines::after { transform: translateY(.32rem); }
  .header-cart-count { position: absolute; inset-block-start: .1rem; inset-inline-end: -.05rem; display: grid; place-items: center; min-inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%; background: var(--sab-color-rose); color: white; font-size: .67rem; line-height: 1; }
  .language-switcher ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
  .language-switcher li + li::before { content: "/"; margin-inline: .35rem; color: var(--sab-color-muted); }
  .language-switcher a, .language-switcher span, .language-current { color: var(--sab-color-aubergine); font-size: .76rem; font-weight: 650; text-decoration: none; }
  .language-switcher [aria-current="page"] { color: var(--sab-color-mauve); }
  .header-search { border-block-start: 1px solid rgb(50 26 61 / 9%); padding-block: var(--sab-space-3); }
  .header-search form { display: flex; max-inline-size: 44rem; margin-inline: auto; }
  .header-search label { flex: 1; }
  .header-search input[type="search"] { inline-size: 100%; border-start-end-radius: 0; border-end-end-radius: 0; }
  [dir="rtl"] .header-search input[type="search"] { border-radius: 0 var(--sab-radius-sm) var(--sab-radius-sm) 0; }
  .header-search input[type="submit"] { border-start-start-radius: 0; border-end-start-radius: 0; }
  [dir="rtl"] .header-search input[type="submit"] { border-radius: var(--sab-radius-sm) 0 0 var(--sab-radius-sm); }
  .site-navigation { border-block-start: 1px solid rgb(50 26 61 / 7%); }
  .site-navigation__inner { display: flex; justify-content: center; }
  .primary-menu, .primary-menu-fallback > ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(.7rem, 2vw, 1.65rem); margin: 0; padding: 0; list-style: none; }
  .primary-menu li, .primary-menu-fallback li { position: relative; list-style: none; }
  .primary-menu a, .primary-menu-fallback a { display: flex; align-items: center; min-block-size: 3.1rem; color: var(--sab-color-charcoal); font-size: var(--sab-step--1); text-decoration: none; }
  .primary-menu a:hover, .primary-menu .current-menu-item > a, .primary-menu-fallback .current_page_item > a { color: var(--sab-color-mauve); }
  .primary-menu .sub-menu { position: absolute; inset-block-start: 100%; inset-inline-start: -.9rem; min-inline-size: 14rem; margin: 0; padding: .6rem .9rem; background: var(--sab-color-white); box-shadow: var(--sab-shadow-soft); list-style: none; opacity: 0; pointer-events: none; transform: translateY(.35rem); transition: opacity var(--sab-duration), transform var(--sab-duration); }
  .primary-menu li:hover > .sub-menu, .primary-menu li:focus-within > .sub-menu { opacity: 1; pointer-events: auto; transform: none; }
  .mobile-nav-head, .mobile-nav-meta { display: none; }
  .nav-scrim { position: fixed; z-index: 98; inset: 0; background: rgb(36 16 45 / 48%); }
  body.nav-open { overflow: hidden; }

  .site-footer { background: var(--sab-color-aubergine); color: rgb(255 255 255 / 82%); padding-block-start: var(--sab-space-6); }
  .footer-grid { display: grid; grid-template-columns: minmax(16rem, 1.4fr) repeat(3, minmax(9rem, 1fr)); gap: var(--sab-space-5); }
  .site-footer h2 { color: var(--sab-color-white); font-size: 1rem; }
  .site-footer p { max-inline-size: 34rem; }
  .site-footer address { font-style: normal; }
  .brand-wordmark--footer { align-items: flex-start; margin-block-end: var(--sab-space-4); color: var(--sab-color-white); }
  [dir="rtl"] .brand-wordmark--footer { align-items: flex-end; }
  .footer-column ul { margin: 0; padding: 0; list-style: none; }
  .footer-column li + li { margin-block-start: .55rem; }
  .site-footer a { color: rgb(255 255 255 / 82%); text-decoration: none; }
  .site-footer a:hover { color: var(--sab-color-white); text-decoration: underline; }
  .footer-contact { display: flex; flex-direction: column; gap: var(--sab-space-3); }
  .footer-bottom { display: flex; justify-content: space-between; gap: var(--sab-space-3); margin-block-start: var(--sab-space-6); border-block-start: 1px solid rgb(255 255 255 / 15%); padding-block: var(--sab-space-4); font-size: var(--sab-step--1); }
  .footer-bottom p { margin: 0; }
  .floating-whatsapp { position: fixed; z-index: 90; inset-inline-end: max(var(--sab-space-3), env(safe-area-inset-right)); inset-block-end: max(var(--sab-space-3), env(safe-area-inset-bottom)); display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; background: var(--sab-color-whatsapp); color: #102a18; box-shadow: var(--sab-shadow-soft); font-size: .76rem; font-weight: 750; text-decoration: none; }
}

@media (max-width: 62rem) {
  .announcement-bar ul, .header-control__label, .site-header__end > .language-switcher, .site-header__end > .language-current { display: none; }
  .announcement-bar__inner { justify-content: center; text-align: center; }
  .site-header__main { min-block-size: 4.7rem; }
  .menu-toggle { display: inline-flex; }
  .site-navigation { position: fixed; z-index: 99; inset-block: 0; inset-inline-start: 0; inline-size: min(88vw, 25rem); overflow-y: auto; border: 0; background: var(--sab-color-ivory); box-shadow: var(--sab-shadow-soft); transform: translateX(-105%); transition: transform var(--sab-duration) ease; }
  [dir="rtl"] .site-navigation { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(105%); }
  .site-navigation.is-open { transform: none; }
  .site-navigation__inner { display: block; inline-size: 100%; padding: var(--sab-space-4); }
  .mobile-nav-head { display: flex; align-items: center; justify-content: space-between; border-block-end: 1px solid rgb(50 26 61 / 10%); padding-block-end: var(--sab-space-3); }
  .mobile-nav-title { color: var(--sab-color-aubergine); font-size: var(--sab-step-1); font-weight: 650; }
  .mobile-nav-close { min-inline-size: 2.75rem; min-block-size: 2.75rem; border: 0; background: transparent; color: var(--sab-color-aubergine); font-size: 1.8rem; padding: 0; }
  .primary-menu, .primary-menu-fallback > ul { display: block; padding-block: var(--sab-space-3); }
  .primary-menu a, .primary-menu-fallback a { justify-content: space-between; min-block-size: 3rem; border-block-end: 1px solid rgb(50 26 61 / 8%); }
  .primary-menu .sub-menu { position: static; display: block; min-inline-size: 0; padding: 0 1rem; box-shadow: none; opacity: 1; pointer-events: auto; transform: none; }
  .mobile-nav-meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sab-space-4); padding-block-start: var(--sab-space-4); }
  .mobile-nav-meta > a { color: var(--sab-color-mauve); text-decoration: none; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .site-header__start, .site-header__end { gap: 0; }
  .site-header__end .header-whatsapp, .site-header__end .header-account { display: none; }
  .brand-wordmark { font-size: 1.25rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-column { border-block-start: 1px solid rgb(255 255 255 / 13%); padding-block-start: var(--sab-space-4); }
  .footer-bottom { flex-direction: column; }
  body.woocommerce-checkout .floating-whatsapp { display: none; }
}