/* Shared layout layer: one header and footer on every page, the language switch and search.
   Loaded last on every page (tools/layout.py keeps it there). */

/* accessibility */
.skip-link { position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 100; padding: .7rem 1.1rem; background: #FF9E1B; color: #0F2747; font-weight: 700; }
.skip-link:focus { top: .5rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid #C8A45D; outline-offset: 3px; }

/* header: identical on every page */
.subpage-categories { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.subpage-categories::-webkit-scrollbar { display: none; }
.subpage-categories a { white-space: nowrap; }
.subpage-categories a:hover, .subpage-nav a:hover { color: #FF9E1B; }
.subpage-actions .lang-toggle { display: inline-grid; place-items: center; min-width: 42px; min-height: 42px; padding: 0 .55rem; cursor: pointer; font-family: Alexandria, Arial, sans-serif; }

@media (max-width: 800px) {
  .subpage-nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 1.15rem; padding-inline: .25rem; white-space: nowrap; }
  .subpage-nav::-webkit-scrollbar { display: none; }
  .subpage-categories { justify-content: flex-start; gap: 1.4rem; padding: .7rem 1rem; }
  .subpage-categories a { font-size: .8rem; }
  .subpage-actions { gap: .35rem; }
  .subpage-actions .lang-toggle, .subpage-search { display: inline-grid; width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
  .subpage-search svg { width: 19px; height: 19px; }
}

/* collections search */
.collection-search { position: relative; width: min(100%, 560px); margin: 0 auto 1.6rem; }
.collection-search svg { position: absolute; inset-inline-start: 1rem; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: #0F2747; stroke-width: 1.65; stroke-linecap: round; opacity: .6; pointer-events: none; }
.collection-search input { width: 100%; min-height: 52px; padding: .8rem 1rem; padding-inline-start: 3rem; border: 1px solid rgba(200,164,93,.55); border-radius: 0; background: #fff; color: #0F2747; font: 400 1rem/1.4 Alexandria, Arial, sans-serif; }
.collection-search input:focus { border-color: #C8A45D; outline: none; box-shadow: 0 0 0 3px rgba(200,164,93,.25); }
.search-empty { margin: 2rem auto 0; color: #40516a; text-align: center; }

/* English (LTR) */
html[dir="ltr"] body { letter-spacing: 0; }

/* Phones: two header rows only (logo + actions, main nav). The product categories stay one tap
   away on the collections page, the home tiles and the footer (Ahmed, 6 Oct). */
@media (max-width: 900px) { .subpage-categories { display: none; } }
