/*
  Amethyst theme — chrome skin (header, footer, page reset).

  Extracted from templates/index.html so the storefront ships one static
  stylesheet instead of an inline <style> block. The only per-shop dynamic
  values are passed in as CSS custom properties set on :root by the template's
  inline <style> (palette/fonts/radius plus --header-position and
  --content-max); everything here is static and served at /assets/css/chrome.css.
*/
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
/* Chrome (header + footer) matches the eyebyrh storefront: a logo+nav cluster
   with the account/wishlist/cart icons pinned right, in the Albert Sans chrome
   typeface. Below lg the nav collapses behind a hamburger (logo left, icons
   right). --header-position is `sticky` or `relative` per the shop's
   sticky-header theme setting. */
header {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding: 0 var(--header-px, 2rem);
  min-height: var(--header-min-h, 4.75rem);
  background: var(--header-bg, var(--surface));
  border-bottom: var(--header-border-width, 1px) solid var(--header-border, var(--border));
  font-family: var(--font-chrome);
  position: var(--header-position, relative);
  top: 0;
  z-index: 50;
}
header .header-center { display: flex; align-items: center; gap: 1.5rem; }
header .brand { font-weight: 700; font-size: 1.15rem; font-family: var(--font-heading); color: var(--header-text, var(--text)); text-decoration: none; display: inline-flex; align-items: center; }
/* max-width clamps SVG logos without an intrinsic aspect ratio (viewBox-less
   or %-sized), which would otherwise collapse or overflow under width:auto;
   inert for raster logos at these heights. */
.brand-logo { height: 2.5rem; width: auto; max-width: 14rem; display: block; }
header .brand .brand-logo { height: 3rem; }
header .header-actions { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.nav-icon { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--header-text, var(--text)); background: none; border: 0; cursor: pointer; padding: 0.5rem; border-radius: var(--radius); text-decoration: none; }
.nav-icon:hover { background: var(--header-icon-hover, var(--surface-alt)); }
.nav-toggle { display: inline-flex; align-items: center; color: var(--header-text, var(--text)); background: none; border: 0; cursor: pointer; padding: 0.5rem; border-radius: var(--radius); }
.nav-toggle:hover { background: var(--header-icon-hover, var(--surface-alt)); }
/* Mobile: the nav is a full-screen drawer, parked off-canvas until .nav-open.
   It stays in the DOM rather than display:none so the slide can animate;
   visibility:hidden is what keeps it out of the tab order and the a11y tree
   while closed (opacity or transform alone would leave the links focusable
   behind the page). */
header nav {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--header-bg, var(--surface));
  transform: translateX(-100%); visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s;
}
header.nav-open nav { transform: none; visibility: visible; }
/* The page must not scroll under an open full-screen drawer. :has() reaches the
   ancestor the toggle can't — the class lives on <header>, the overflow has to
   land on <body>. */
body:has(header.nav-open) { overflow: hidden; }
/* Brand + close row: matches the header's height so the drawer's top edge lines
   up with the bar it replaced — logo left, close icon right. */
.nav-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-min-h, 4.75rem);
  padding: 0 var(--header-px, 2rem);
}
.nav-close {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--header-text, var(--text)); background: none; border: 0;
  cursor: pointer; padding: 0.5rem; border-radius: var(--radius);
}
.nav-close:hover { background: var(--header-icon-hover, var(--surface-alt)); }
.nav-links {
  display: flex; flex-direction: column;
  padding: 0 var(--header-px, 2rem);
  overflow-y: auto; overscroll-behavior-y: contain;
}
.nav-links a { display: flex; align-items: center; min-height: 3.25rem; font-size: 1.0625rem; }
/* Rules between items, none trailing — `a + a` gives that without a
   :last-child exception. */
.nav-links a + a { border-top: 1px solid var(--header-border, var(--border)); }
.nav-panel-foot {
  padding: 1.25rem var(--header-px, 2rem) calc(1.25rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--header-border, var(--border));
  color: var(--header-text, var(--text)); font-size: 0.875rem;
}
header nav a { color: var(--header-text, var(--text)); text-decoration: none; font-weight: 500; }
header nav a:hover { color: var(--header-link-hover, var(--muted)); }
@media (prefers-reduced-motion: reduce) {
  header nav { transition: none; }
}
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  header { min-height: 5.75rem; }
  header .brand .brand-logo { height: 4.5rem; }
  /* Logo + nav cluster grows to fill the row and centres its children (with a
     1.5rem gap); the nav is content-width and never wraps. Icons stay pinned
     right via header-actions' margin-left. */
  header .header-center { flex: 1; justify-content: center; }
  /* Desktop: the drawer collapses back to an inline row. Everything the
     off-canvas panel added — fixed position, transform, the head/foot rows —
     is unwound here rather than scoped behind a max-width query, so the mobile
     block above stays the single description of the drawer. */
  header nav {
    position: static; inset: auto; z-index: auto;
    display: block; background: none; border: 0;
    transform: none; visibility: visible; transition: none;
  }
  .nav-panel-head, .nav-panel-foot { display: none; }
  .nav-links {
    display: flex; flex-direction: row; flex-wrap: nowrap; gap: 1.5rem;
    padding: 0; overflow: visible;
  }
  .nav-links a { min-height: 0; font-size: inherit; white-space: nowrap; }
  .nav-links a + a { border-top: 0; }
}
/* Content width comes from the appearance "Content width" setting (passed in as
   --content-max); each component supplies its own horizontal gutter
   (mx-auto max-w-* px-4) and vertical rhythm (py-*), so main adds no
   padding/margin of its own — otherwise full-bleed decks couldn't reach the
   edges and content would be double-guttered on mobile. */
main { max-width: var(--content-max, 1100px); margin: 0 auto; }
/* Page-title band, emitted once per page by index.html (see `titlebar` in
   pages::render). Lives here rather than in Tailwind utilities so the shell
   never depends on the prebuilt sheet being regenerated. Colours come from the
   `titlebar` appearance component; the fallbacks keep an unconfigured shop on
   the same tint as the header instead of inverting against --bg. */
.page-titlebar {
  background: var(--titlebar-bg, var(--surface));
  border-bottom: 1px solid var(--titlebar-border, var(--border));
}
.page-titlebar-inner { max-width: 72rem; margin: 0 auto; padding: var(--titlebar-py, 3rem) 1rem; text-align: center; }
.page-titlebar h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--titlebar-text, var(--text));
}
.page-titlebar p { margin: 0.5rem auto 0; max-width: 42rem; color: var(--titlebar-muted, var(--muted)); }
@media (min-width: 640px) {
  .page-titlebar-inner { padding: 4rem 1rem; }
  .page-titlebar h1 { font-size: 2.25rem; }
}
/* Page-scoped popups (see templates/popup.html and pages::Popup).

   Open state lives in the URL fragment, and `:target` is what reveals the
   dialog — so a trigger link works with JavaScript disabled, the back button
   closes the popup, and a popup is deep-linkable. The <souq-popup> enhancer
   adds only behaviour (scroll lock, inert background, focus trap, Escape); it
   never owns visibility, so CSS and JS can't disagree about what's open.

   Lives here rather than in Tailwind utilities for the same reason as
   .page-titlebar: the shell must not depend on the prebuilt sheet being
   regenerated. */
souq-popup {
  --popup-w: 34rem;
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  place-items: center;
  padding: 1.5rem;
}
souq-popup[data-size="s"] { --popup-w: 24rem; }
souq-popup[data-size="l"] { --popup-w: 56rem; }
souq-popup[data-size="full"] { --popup-w: 100%; padding: 0; }
souq-popup:target,
souq-popup[data-open] { display: grid; }
/* The page must not scroll behind an open dialog. :has() reaches <body> from
   the popup, which is where the overflow has to land. The enhancer does the
   same thing imperatively for browsers without :has(). */
body:has(souq-popup:target) { overflow: hidden; }
.popup-backdrop {
  position: absolute;
  inset: 0;
  background: var(--popup-backdrop, rgba(0, 0, 0, 0.6));
}
souq-popup[data-no-backdrop] .popup-backdrop { background: none; }
.popup-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--popup-w);
  max-height: calc(100dvh - 3rem);
  overflow: hidden;
  background: var(--popup-bg, var(--surface));
  color: var(--popup-text, var(--text));
  border-radius: var(--popup-radius, var(--radius));
  box-shadow: var(--popup-shadow, 0 24px 60px rgba(0, 0, 0, 0.28));
}
souq-popup[data-size="full"] .popup-panel {
  max-width: none;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
}
.popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--btn-icon-radius, 3.40282e38px);
  color: var(--popup-close-text, var(--text));
  text-decoration: none;
}
.popup-close:hover { background: var(--popup-close-hover-bg, var(--surface-alt)); }
.popup-title {
  margin: 0;
  /* Right padding clears the close control; the bottom gap separates the
     heading from whatever the body leads with, image or copy. */
  padding: 1.5rem 3.5rem 0.75rem 1.75rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}
/* The scroll container. Advanced-mode popups hold ordinary components, which
   bring their own section padding — so the padding here is only for the simple
   mode's prose and image.

   `overflow-x: hidden` is stated rather than left to default: once one axis is
   not `visible`, CSS computes the other from `visible` to `auto`, so
   `overflow-y: auto` alone would silently allow sideways scrolling. A dialog
   scrolls one way only. Anything genuinely wider than the panel has to bring
   its own `overflow-x: auto` wrapper. */
.popup-body { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
/* Nothing inside may force the panel wider than it is. */
.popup-body img,
.popup-body video,
.popup-body iframe { max-width: 100%; }
.popup-prose { padding: 0.25rem 1.75rem 1.75rem; line-height: 1.6; }
/* An image supplies no gap of its own, so the copy under one needs its own. */
.popup-image + .popup-prose { padding-top: 1rem; }
/* Prose leading an untitled panel starts underneath the floating close
   control. Drop it to the top edge a title would have taken, and keep the
   block it opens with — normally its heading — clear of the control's corner.
   Only the first block pays the right inset, so the copy below stays full
   width. Keyed off the close control being the body's immediate predecessor,
   which is true only when no `.popup-title` sits between them. */
.popup-close + .popup-body > .popup-prose:first-child { padding-top: 1.5rem; }
.popup-close + .popup-body > .popup-prose:first-child > :first-child {
  padding-right: 2rem;
}
/* Authored bodies arrive as raw HTML, and the reset leaves their headings
   indistinguishable from body copy. The panel is narrower than a page, so the
   scale runs a step below the storefront's own. */
.popup-prose > :first-child { margin-top: 0; }
.popup-prose > :last-child { margin-bottom: 0; }
.popup-prose h1,
.popup-prose h2,
.popup-prose h3,
.popup-prose h4 {
  margin: 1.5rem 0 0.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
}
.popup-prose h1 { font-size: 1.5rem; }
.popup-prose h2 { font-size: 1.25rem; }
.popup-prose h3 { font-size: 1.0625rem; }
.popup-prose h4 { font-size: 1rem; }
/* A heading immediately under the one above it is a subtitle, not a new
   section — a role, a date, a strapline. Pull it up tight and set it back. */
.popup-prose h1 + h2,
.popup-prose h2 + h3 {
  margin-top: 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--popup-muted, var(--muted));
}
.popup-prose p { margin: 0 0 0.85rem; }
.popup-prose ul,
.popup-prose ol { margin: 0 0 0.85rem; padding-left: 1.25rem; }
.popup-prose ul { list-style: disc; }
.popup-prose ol { list-style: decimal; }
.popup-prose li { margin-bottom: 0.25rem; }
.popup-prose a { color: var(--accent); text-decoration: underline; }
.popup-prose strong { font-weight: 600; }
.popup-prose em { font-style: italic; }
/* Capped: staff portraits are typically tall, and at full height one would fill
   the panel and push the copy below the fold. Anchored to the top because the
   cap crops, and centre-cropping a portrait takes the head off. */
.popup-image {
  display: block;
  width: 100%;
  max-height: 45vh;
  object-fit: cover;
  object-position: center top;
}
souq-popup[data-position="sheet"] { place-items: end center; padding: 0; }
souq-popup[data-position="sheet"] .popup-panel {
  max-width: none;
  border-radius: var(--popup-radius, var(--radius)) var(--popup-radius, var(--radius)) 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
/* Docked: the style guide renders popups inline so they can be seen and styled
   without covering the guide. */
souq-popup[data-docked] {
  display: block;
  position: static;
  padding: 0;
  margin: 1rem auto;
  max-width: var(--popup-w);
}
souq-popup[data-docked] .popup-backdrop { display: none; }
souq-popup[data-docked] .popup-panel { max-height: none; }
@keyframes popup-fade { from { opacity: 0; } }
@keyframes popup-zoom { from { opacity: 0; transform: scale(0.94); } }
@keyframes popup-slide-up { from { opacity: 0; transform: translateY(2rem); } }
souq-popup:not([data-animation="none"]):not([data-docked]) .popup-backdrop {
  animation: popup-fade 0.2s ease;
}
souq-popup[data-animation="fade"]:not([data-docked]) .popup-panel { animation: popup-fade 0.2s ease; }
souq-popup[data-animation="zoom"]:not([data-docked]) .popup-panel { animation: popup-zoom 0.2s ease; }
souq-popup[data-animation="slide-up"]:not([data-docked]) .popup-panel { animation: popup-slide-up 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
  souq-popup .popup-panel,
  souq-popup .popup-backdrop { animation: none; }
}
@media (max-width: 640px) {
  souq-popup { padding: 0.75rem; }
  .popup-title { padding: 1.25rem 3.25rem 0.75rem 1.25rem; font-size: 1.25rem; }
  .popup-prose { padding: 0.25rem 1.25rem 1.25rem; }
  .popup-prose h1 { font-size: 1.25rem; }
  .popup-prose h2 { font-size: 1.125rem; }
}
footer {
  color: var(--footer-text, var(--muted));
  background: var(--footer-bg, var(--surface));
  border-top: 1px solid var(--footer-border, var(--border));
  font-family: var(--font-chrome);
}
footer .foot-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; max-width: 1200px; margin: 0 auto; padding: var(--footer-py, 4rem) 2rem 2.5rem; }
footer .foot-col { display: flex; flex-direction: column; min-width: 0; }
/* align-self keeps the logo at its intrinsic width — .foot-col is a flex
   column, whose default align-items:stretch would otherwise stretch the
   auto-width <img> to the full column width and distort it. */
footer .foot-brand-col .brand-logo { height: 4.5rem; margin-bottom: 1.25rem; align-self: flex-start; }
footer .foot-contact { display: flex; flex-direction: column; gap: 0.55rem; }
footer .foot-contact a { color: var(--footer-heading, var(--text)); text-decoration: none; font-size: 0.95rem; width: fit-content; }
footer .foot-contact a:hover { color: var(--footer-text, var(--muted)); }
footer .foot-contact a.foot-direction { margin-top: 0.65rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
footer .foot-social { display: flex; gap: 0.9rem; margin-top: 1.4rem; }
footer .foot-social a { color: var(--footer-heading, var(--text)); display: inline-flex; }
footer .foot-social a:hover { color: var(--footer-text, var(--muted)); }
footer .foot-head { font-family: var(--font-chrome); font-weight: 700; font-size: 1.15rem; color: var(--footer-heading, var(--text)); margin: 0 0 1.1rem; }
footer .foot-links { display: flex; flex-direction: column; gap: 0.7rem; }
footer .foot-links a { color: var(--footer-text, var(--muted)); text-decoration: none; font-size: 0.95rem; width: fit-content; }
footer .foot-links a:hover { color: var(--footer-heading, var(--text)); }
footer .foot-bottom { border-top: 1px solid var(--footer-border, var(--border)); text-align: left; max-width: 1200px; margin: 0 auto; padding: 1.5rem 2rem; font-size: .8rem; color: var(--footer-text, var(--muted)); }
@media (max-width: 768px) {
  footer .foot-main { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem 1.5rem; }
}