/* Zouqly global.css — announcement, header, mega-menu, mobile nav, footer,
   plus template-level editorial sections (front page, taxonomy, search, 404).
   Tokens only — no raw values. */

/* =========================================================
   Header
   ========================================================= */
.zq-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--zq-color-canvas);
  border-bottom: 1px solid var(--zq-color-line);
}

.zq-header__inner {
  display: flex;
  align-items: center;
  gap: var(--zq-space-4);
  min-height: calc(var(--zq-space-6) - var(--zq-space-1)); /* 56px */
}

.zq-header__logo {
  display: inline-flex;
  align-items: center;
  color: var(--zq-color-ink);
  flex: 0 0 auto;
}
.zq-header__logo:hover,
.zq-header__logo:focus-visible { color: var(--zq-color-ink); }
.zq-logo { height: 22px; width: auto; display: block; }
@media (min-width: 900px) {
  .zq-logo { height: 28px; }
}

.zq-header__tools {
  display: flex;
  align-items: center;
  gap: var(--zq-space-3);
  margin-left: auto;
  flex: 0 0 auto;
}
.zq-header__search,
.zq-header__cart {
  color: var(--zq-color-ink);
  text-decoration: none;
  font-size: var(--zq-size-step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: var(--zq-space-1) 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--zq-motion-fast) var(--zq-motion-ease),
              color var(--zq-motion-fast) var(--zq-motion-ease);
}
.zq-header__search:hover,
.zq-header__cart:hover,
.zq-header__search:focus-visible,
.zq-header__cart:focus-visible {
  color: var(--zq-color-accent-deep);
  border-bottom-color: var(--zq-color-accent-deep);
}
.zq-header__search:active,
.zq-header__cart:active { color: var(--zq-color-ink); }

.zq-cart-count {
  display: inline-block;
  min-width: calc(var(--zq-space-2) + var(--zq-space-1) / 2);
  text-align: center;
  margin-left: calc(var(--zq-space-1) / 2);
  padding: 0 calc(var(--zq-space-1) / 2);
  border: 1px solid var(--zq-color-ink);
  border-radius: var(--zq-radius-pill);
  font-size: var(--zq-size-step--1);
}

/* =========================================================
   Primary nav — desktop mega-menu
   ========================================================= */
.zq-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--zq-space-4);
}
.zq-nav__item > a {
  display: inline-block;
  color: var(--zq-color-ink);
  text-decoration: none;
  font-size: var(--zq-size-step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: var(--zq-space-2) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--zq-motion-fast) var(--zq-motion-ease),
              border-color var(--zq-motion-fast) var(--zq-motion-ease);
}
.zq-nav__item > a:hover,
.zq-nav__item > a:focus-visible {
  color: var(--zq-color-accent-deep);
  border-bottom-color: var(--zq-color-accent-deep);
}
.zq-nav__item > a:active { color: var(--zq-color-ink); }

@media (min-width: 900px) {
  .zq-nav-toggle { display: none; }

  /* Full-width panel anchored to the sticky header */
  .zq-nav__item { position: static; }
  .zq-nav__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--zq-color-canvas);
    border-top: 1px solid var(--zq-color-line);
    border-bottom: 1px solid var(--zq-color-line);
    box-shadow: var(--zq-shadow-raise);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-1 * var(--zq-space-1) / 2));
    pointer-events: none;
    transition: opacity var(--zq-motion-base) var(--zq-motion-ease),
                transform var(--zq-motion-base) var(--zq-motion-ease),
                visibility 0s linear var(--zq-motion-base);
  }
  .zq-nav__item.has-children:hover .zq-nav__panel,
  .zq-nav__item.has-children:focus-within .zq-nav__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .zq-nav__panel > ul {
    list-style: none;
    margin: 0 auto;
    padding: var(--zq-space-5) var(--zq-space-3);
    max-width: var(--zq-layout-container);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--zq-space-2) var(--zq-space-5);
  }
  .zq-nav__panel a {
    display: block;
    color: var(--zq-color-ink);
    text-decoration: none;
    font-size: var(--zq-size-step-0);
    padding: var(--zq-space-1) 0;
    border-bottom: 1px solid var(--zq-color-line);
    transition: color var(--zq-motion-fast) var(--zq-motion-ease),
                border-color var(--zq-motion-fast) var(--zq-motion-ease);
  }
  .zq-nav__panel a:hover,
  .zq-nav__panel a:focus-visible {
    color: var(--zq-color-accent-deep);
    border-bottom-color: var(--zq-color-accent-deep);
  }
}

/* =========================================================
   Mobile nav — slide-down panel
   ========================================================= */
.zq-nav-toggle {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  margin-left: auto;
  order: 3;
  width: var(--zq-space-5);
  height: var(--zq-space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--zq-color-ink);
}
.zq-nav-toggle__bar,
.zq-nav-toggle__bar::before,
.zq-nav-toggle__bar::after {
  content: "";
  display: block;
  width: var(--zq-space-3);
  height: 2px;
  background: currentColor;
  transition: transform var(--zq-motion-base) var(--zq-motion-ease),
              opacity var(--zq-motion-base) var(--zq-motion-ease);
}
.zq-nav-toggle__bar { position: relative; }
.zq-nav-toggle__bar::before,
.zq-nav-toggle__bar::after { position: absolute; left: 0; }
.zq-nav-toggle__bar::before { top: -7px; }
.zq-nav-toggle__bar::after { top: 7px; }
.zq-nav-toggle[aria-expanded="true"] .zq-nav-toggle__bar { transform: rotate(45deg); }
.zq-nav-toggle[aria-expanded="true"] .zq-nav-toggle__bar::before { transform: rotate(-90deg) translateX(-7px); }
.zq-nav-toggle[aria-expanded="true"] .zq-nav-toggle__bar::after { opacity: 0; }
.zq-nav-toggle:hover { color: var(--zq-color-accent-deep); }
.zq-nav-toggle:active { color: var(--zq-color-ink); }

@media (max-width: 899.98px) {
  .zq-header__tools { margin-left: 0; order: 2; }
  .zq-nav-toggle { order: 3; }

  .zq-nav {
    position: fixed;
    inset: auto 0 0 0;
    top: calc(var(--zq-space-6) - var(--zq-space-1)); /* header height */
    order: 4;
    background: var(--zq-color-canvas);
    border-top: 1px solid var(--zq-color-line);
    overflow-y: auto;
    padding: var(--zq-space-4) var(--zq-space-3) var(--zq-space-7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-1 * var(--zq-space-2)));
    transition: opacity var(--zq-motion-base) var(--zq-motion-ease),
                transform var(--zq-motion-base) var(--zq-motion-ease),
                visibility 0s linear var(--zq-motion-base);
  }
  .zq-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  /* Body scroll lock while the panel is open */
  .zq-scroll-lock,
  body:has(.zq-nav.is-open) { overflow: hidden; }

  .zq-nav__list { flex-direction: column; gap: 0; }
  .zq-nav__item > a {
    display: block;
    font-family: var(--zq-font-display);
    font-size: var(--zq-size-step-2);
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: var(--zq-space-2) 0;
    border-bottom: 1px solid var(--zq-color-line);
  }
  .zq-nav__panel > ul {
    list-style: none;
    margin: 0;
    padding: var(--zq-space-1) 0 var(--zq-space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--zq-space-1) var(--zq-space-3);
  }
  .zq-nav__panel a {
    color: var(--zq-color-ink-soft);
    text-decoration: none;
    font-size: var(--zq-size-step--1);
    padding: var(--zq-space-1) 0;
  }
  .zq-nav__panel a:hover,
  .zq-nav__panel a:focus-visible { color: var(--zq-color-accent-deep); }
}

/* =========================================================
   Footer — asymmetric grid
   ========================================================= */
.zq-footer {
  background: var(--zq-color-ink);
  color: var(--zq-color-canvas);
  margin-top: var(--zq-space-7);
  padding-block: var(--zq-space-7) var(--zq-space-4);
}
.zq-footer a { color: var(--zq-color-canvas); }
.zq-footer a:hover { color: var(--zq-color-line); }

.zq-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zq-space-5);
}
@media (min-width: 900px) {
  .zq-footer__grid {
    grid-template-columns: 6fr 3fr 3fr; /* brand wide-left, nav + contact right */
    gap: var(--zq-space-6);
  }
}
.zq-footer__brand { max-width: 34ch; }
.zq-footer__mark { height: var(--zq-space-5); width: auto; margin-bottom: var(--zq-space-3); color: var(--zq-color-canvas); }
.zq-footer__brand .zq-small { color: var(--zq-color-line); }

.zq-footer__list,
.zq-footer__legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zq-footer__list li { border-bottom: 1px solid var(--zq-color-ink-soft); }
.zq-footer__list a {
  display: block;
  padding: var(--zq-space-2) 0;
  text-decoration: none;
  font-size: var(--zq-size-step--1);
  transition: color var(--zq-motion-fast) var(--zq-motion-ease),
              padding-left var(--zq-motion-fast) var(--zq-motion-ease);
}
.zq-footer__list a:hover,
.zq-footer__list a:focus-visible { color: var(--zq-color-line); padding-left: var(--zq-space-1); }

.zq-footer__contact { color: var(--zq-color-line); }
.zq-footer__contact p { margin: 0; line-height: 2; }

.zq-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--zq-space-3);
  margin-top: var(--zq-space-6);
  padding-top: var(--zq-space-3);
  border-top: 1px solid var(--zq-color-ink-soft);
  color: var(--zq-color-line);
}
.zq-footer__legal-list { display: flex; flex-wrap: wrap; gap: var(--zq-space-3); margin-left: auto; }
.zq-footer__legal-list a { text-decoration: none; }
.zq-footer__legal-list a:hover { text-decoration: underline; }

/* =========================================================
   Shared editorial pieces (front page, taxonomy, patterns)
   ========================================================= */

/* Image slot fallback: a quiet field of line colour, never a broken img */
.zq-placeholder {
  background: var(--zq-color-line);
  border-radius: var(--zq-radius-base);
  width: 100%;
}
.zq-placeholder--tall { aspect-ratio: 4 / 5; }
.zq-placeholder--wide { aspect-ratio: 16 / 7; }
.zq-placeholder--square { aspect-ratio: 1 / 1; }

.zq-kicker {
  font-family: var(--zq-font-body);
  font-size: var(--zq-size-step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--zq-color-ink-soft);
  margin: 0 0 var(--zq-space-3);
}

.zq-standfirst {
  font-size: var(--zq-size-step-1);
  color: var(--zq-color-ink-soft);
  max-width: 44ch;
}

/* Hero */
.zq-hero h1 { max-width: 14ch; margin-bottom: var(--zq-space-4); }
.zq-hero .zq-btn { margin-top: var(--zq-space-2); }
.zq-hero__media img {
  width: 100%;
  border-radius: var(--zq-radius-base);
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

/* Bleed-scroll product cards need a fixed track width */
.zq-bleed-scroll .zq-product-card { width: min(72vw, 320px); }
.zq-bleed-hero img {
  width: 100%;
  border-radius: var(--zq-radius-base);
  object-fit: cover;
  aspect-ratio: 16 / 7;
}
.zq-caption {
  font-family: var(--zq-font-display);
  font-size: var(--zq-size-step-4);
  line-height: 1.2;
  font-feature-settings: "onum" 1;
  max-width: 26ch;
}
.zq-caption p { margin: 0; }

/* Ink pull-quote band */
.zq-band-ink {
  background: var(--zq-color-ink);
  color: var(--zq-color-canvas);
}
.zq-band-ink blockquote {
  margin: 0;
  font-family: var(--zq-font-display);
  font-size: var(--zq-size-step-4);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 24ch;
}
@media (min-width: 900px) {
  .zq-band-ink blockquote { font-size: var(--zq-size-step-5); }
}
.zq-band-ink cite {
  display: block;
  font-family: var(--zq-font-body);
  font-style: normal;
  font-size: var(--zq-size-step--1);
  color: var(--zq-color-line);
  margin-top: var(--zq-space-4);
}

/* Two-category feature cards */
.zq-cat-feature { text-decoration: none; color: var(--zq-color-ink); display: block; }
.zq-cat-feature .zq-media {
  overflow: hidden;
  border-radius: var(--zq-radius-base);
  margin-bottom: var(--zq-space-3);
}
.zq-cat-feature .zq-media img,
.zq-cat-feature .zq-media .zq-placeholder {
  aspect-ratio: 5 / 4;
  width: 100%;
  object-fit: cover;
  transition: transform var(--zq-motion-slow) var(--zq-motion-ease);
}
.zq-cat-feature:hover .zq-media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .zq-cat-feature:hover .zq-media img { transform: none; }
}
.zq-cat-feature h3 { margin-bottom: var(--zq-space-1); }
.zq-cat-feature p { color: var(--zq-color-ink-soft); max-width: 44ch; }
.zq-cat-feature .zq-btn--text { padding: 0; border: 0; }
.zq-cat-feature:hover h3 { color: var(--zq-color-accent-deep); }

/* Taxonomy (collection) header */
.zq-tax-header h1 { margin-bottom: var(--zq-space-3); }
.zq-tax-header .zq-tax-desc { color: var(--zq-color-ink-soft); max-width: 52ch; }
.zq-tax-header__media img {
  width: 100%;
  border-radius: var(--zq-radius-base);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.zq-subcat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zq-space-1);
  margin-top: var(--zq-space-4);
}
.zq-subcat-pills .zq-pill {
  text-decoration: none;
  transition: border-color var(--zq-motion-fast) var(--zq-motion-ease),
              color var(--zq-motion-fast) var(--zq-motion-ease);
}
.zq-subcat-pills .zq-pill:hover,
.zq-subcat-pills .zq-pill:focus-visible {
  border-color: var(--zq-color-accent-deep);
  color: var(--zq-color-accent-deep);
}
.zq-subcat-pills .zq-pill:active { color: var(--zq-color-ink); }

/* Search + 404 */
.zq-search-form {
  display: flex;
  gap: var(--zq-space-2);
  max-width: 48ch;
}
.zq-search-form input[type="search"] { flex: 1 1 auto; }
.zq-search-form .zq-btn { flex: 0 0 auto; }

.zq-result { padding-block: var(--zq-space-4); border-bottom: 1px solid var(--zq-color-line); }
.zq-result h2 { font-size: var(--zq-size-step-2); margin-bottom: var(--zq-space-1); }
.zq-result h2 a { color: var(--zq-color-ink); text-decoration: none; }
.zq-result h2 a:hover { color: var(--zq-color-accent-deep); text-decoration: underline; }
.zq-result .zq-result__meta { color: var(--zq-color-ink-soft); font-size: var(--zq-size-step--1); }

.zq-404 h1 { max-width: 18ch; }

/* Product loop as a list */
ul.zq-products { list-style: none; margin: 0; padding: 0; }
.zq-tax-loop li.product { margin: 0; }
.zq-tax-loop li.product img { border-radius: var(--zq-radius-base); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.zq-tax-loop li.product .woocommerce-loop-product__title {
  font-family: var(--zq-font-body);
  font-weight: 600;
  font-size: var(--zq-size-step-0);
  margin: var(--zq-space-2) 0 0;
}
.zq-tax-loop li.product a { text-decoration: none; color: var(--zq-color-ink); }
.zq-tax-loop li.product a:hover .woocommerce-loop-product__title { color: var(--zq-color-accent-deep); text-decoration: underline; }
.zq-tax-loop li.product .price { color: var(--zq-color-ink-soft); font-variant-numeric: tabular-nums; display: block; margin-top: calc(var(--zq-space-1) / 2); }
.zq-tax-loop li.product .button { margin-top: var(--zq-space-2); }

.zq-tax-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--zq-space-3);
  margin-block: var(--zq-space-6) var(--zq-space-4);
  padding-top: var(--zq-space-3);
  border-top: 1px solid var(--zq-color-line);
  color: var(--zq-color-ink-soft);
  font-size: var(--zq-size-step--1);
}
.zq-tax-toolbar .woocommerce-result-count { margin: 0; }
.zq-tax-toolbar .woocommerce-ordering { margin-left: auto; }
.zq-tax-toolbar .woocommerce-ordering select { width: auto; padding: var(--zq-space-1) var(--zq-space-2); }

/* Woo pagination inside our loops */
.zq-shop .woocommerce-pagination ul,
.zq-pagination ul {
  list-style: none;
  display: flex;
  gap: var(--zq-space-1);
  margin: var(--zq-space-6) 0 0;
  padding: 0;
}
.zq-shop .woocommerce-pagination li a,
.zq-shop .woocommerce-pagination li span,
.zq-pagination li a,
.zq-pagination li span,
.zq-pagination > a,
.zq-pagination > span {
  display: inline-block;
  min-width: var(--zq-space-5);
  text-align: center;
  padding: var(--zq-space-1) var(--zq-space-2);
  border: 1px solid var(--zq-color-line);
  border-radius: var(--zq-radius-base);
  text-decoration: none;
  color: var(--zq-color-ink);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--zq-motion-fast) var(--zq-motion-ease),
              color var(--zq-motion-fast) var(--zq-motion-ease);
}
.zq-shop .woocommerce-pagination li a:hover,
.zq-pagination li a:hover,
.zq-pagination > a:hover {
  border-color: var(--zq-color-accent-deep);
  color: var(--zq-color-accent-deep);
}
.zq-shop .woocommerce-pagination li span.current,
.zq-pagination li span.current,
.zq-pagination > span.current {
  background: var(--zq-color-ink);
  border-color: var(--zq-color-ink);
  color: var(--zq-color-canvas);
}

/* ---------- Editorial placeholder panel (photography aane tak) ---------- */
.zq-editorial-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--zq-space-3);
  background: var(--zq-color-ink);
  color: var(--zq-color-canvas);
  border-radius: var(--zq-radius-base);
}
.zq-editorial-panel__mark { width: 72px; height: auto; opacity: .9; color: var(--zq-color-accent); }
.zq-editorial-panel__note {
  margin: 0;
  font-size: var(--zq-size-step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--zq-color-canvas);
  opacity: .55;
}
.zq-placeholder--tall { aspect-ratio: 4 / 5; }
.zq-placeholder--wide { aspect-ratio: 16 / 7; }

/* Hero: kam khaali oopar-neeche, text/media balance */
.zq-hero { padding-block-start: var(--zq-space-5); }
@media (min-width: 900px) {
  .zq-hero { padding-block: var(--zq-space-6) var(--zq-space-7); }
  .zq-hero .zq-split { align-items: center; }
}