/* ==========================================================================
   LAHIZA — BENTO DESIGN SYSTEM · 04. LAYOUT
   App shell: top line, floating header, overlays, bento footer, tab bar.
   ========================================================================== */

/* ==========================================================================
   Top line — one message at a time, cross-fading
   ========================================================================== */
.lz-topline { position: relative; height: 2.25rem; color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.lz-topline li {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  opacity: 0; transform: translateY(.4rem);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.lz-topline li.is-on { opacity: 1; transform: none; }
.lz-topline .lz-ico { width: 1rem; height: 1rem; color: var(--accent-strong); }

/* ==========================================================================
   Floating header
   ========================================================================== */
.lz-header { position: sticky; inset-block-start: var(--gap); z-index: var(--z-header); margin-block-end: var(--gap); }
.lz-header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  height: var(--header-h);
  padding-inline: var(--s-7) var(--s-3);
  background: rgba(251, 248, 241, .9);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.lz-header.is-stuck .lz-header-bar { box-shadow: 0 0 0 1px var(--line), var(--shadow-md); background: rgba(251, 248, 241, .96); }
.lz-brand { display: inline-flex; align-items: center; flex: none; justify-self: start; color: var(--primary); }
.lz-brand:hover { color: var(--primary); }
.lz-brand .lz-logo { height: 2.5rem; }

.lz-nav { display: flex; justify-content: center; }
.lz-menu { display: flex; gap: var(--s-1); }
.lz-menu > li { position: relative; }
.lz-menu > li > a {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: var(--tap); padding-inline: var(--s-4);
  border-radius: var(--r-pill);
  color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-semibold);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lz-menu > li > a:hover { background: var(--canvas); color: var(--text-strong); }
.lz-menu > .current-menu-item > a,
.lz-menu > .current-menu-ancestor > a,
.lz-menu > .current-product_cat-ancestor > a,
.lz-menu > .current_page_parent > a { background: var(--canvas); color: var(--primary); }
.lz-menu .sub-menu {
  position: absolute; inset-block-start: calc(100% + var(--s-3)); inset-inline-start: 0;
  min-width: 14rem; padding: var(--s-2);
  background: var(--surface); border-radius: 1.25rem; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translateY(.375rem);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.lz-menu li:hover > .sub-menu, .lz-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.lz-menu .sub-menu a { display: block; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-weight: var(--fw-medium); }
.lz-menu .sub-menu a:hover { background: var(--canvas); color: var(--primary); }

.lz-header-tools { display: flex; align-items: center; gap: var(--s-2); justify-self: end; }
.lz-nav-toggle { display: none; }
.lz-cart-pill {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: var(--ctl); padding-inline: var(--s-5) var(--s-2);
  background: var(--primary); color: var(--on-primary);
  border-radius: var(--r-pill); font-weight: var(--fw-semibold); font-size: var(--fs-md);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lz-cart-pill:hover { background: var(--primary-hover); }
.lz-cart-pill:active { transform: scale(.97); }
.lz-cart-pill .lz-ico { display: none; width: 1.25rem; height: 1.25rem; }
.lz-cart-count {
  display: grid; place-items: center;
  min-width: 2rem; height: 2rem; padding-inline: var(--s-1);
  background: var(--clay-600); color: var(--on-accent);
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1;
}
.lz-cart-count.is-bump { animation: lz-pop var(--t-slow) var(--ease-spring); }
.lz-cart-pill .lz-cart-count[data-count="0"] { display: none; }
.lz-cart-pill:has(.lz-cart-count[data-count="0"]) { padding-inline-end: var(--s-5); }

/* ==========================================================================
   Search overlay
   ========================================================================== */
.lz-search-layer { overflow-y: auto; }
.lz-search-box {
  position: relative;
  width: min(48rem, calc(100% - var(--gap) * 2));
  margin: calc(var(--gap) + var(--header-h) + var(--s-6)) auto var(--s-10);
  padding: var(--s-6);
  background: var(--surface);
  border-radius: var(--r-tile);
  box-shadow: var(--shadow-xl);
  opacity: 0; transform: translateY(-.75rem) scale(.98);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.lz-search-layer.is-open .lz-search-box { opacity: 1; transform: none; }
.lz-search-top { display: flex; gap: var(--s-2); align-items: center; }
.lz-search-top .lz-search-form { flex: 1; }
.lz-search-hints { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-block-start: var(--s-5); color: var(--text-muted); font-size: var(--fs-sm); }
.lz-search-hints button {
  min-height: var(--ctl-sm); padding-inline: var(--s-4);
  background: var(--canvas); border-radius: var(--r-pill); color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lz-search-hints button:hover { background: var(--primary); color: var(--on-primary); }
.lz-search-results { max-height: min(56vh, 30rem); margin-block-start: var(--s-5); overflow-y: auto; overscroll-behavior: contain; }
.lz-search-results:not(.is-on) { display: none; }
.lz-search-loading { display: grid; place-items: center; padding-block: var(--s-8); }
.lz-search-label { margin-block: var(--s-3) var(--s-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.lz-search-list { display: grid; gap: var(--s-1); }
.lz-search-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4);
  padding: var(--s-2); padding-inline-end: var(--s-4);
  border-radius: var(--r-inner);
  transition: background-color var(--t-fast) var(--ease);
}
.lz-search-item:hover { background: var(--canvas); }
.lz-search-item img { width: 3.5rem; height: 3.5rem; object-fit: cover; object-position: 50% 58%; border-radius: var(--r-sm); background: var(--surface-img); }
.lz-search-item strong { display: block; color: var(--text-strong); font-weight: var(--fw-bold); }
.lz-search-item small { color: var(--text-muted); font-size: var(--fs-xs); }
.lz-search-item b { color: var(--text-strong); font-size: var(--fs-sm); white-space: nowrap; }
.lz-search-post { grid-template-columns: 1fr; padding: var(--s-3) var(--s-4); background: var(--canvas); }
.lz-search-all {
  display: flex; justify-content: center; align-items: center; min-height: var(--ctl); margin-block-start: var(--s-3);
  background: var(--primary); color: var(--on-primary); border-radius: var(--r-pill); font-weight: var(--fw-semibold);
}
.lz-search-all:hover { background: var(--primary-hover); color: var(--on-primary); }
.lz-search-empty { padding-block: var(--s-7); color: var(--text-muted); text-align: center; }

/* ==========================================================================
   Off-canvas menu
   ========================================================================== */
.lz-menu-mobile { display: grid; gap: var(--s-1); }
.lz-menu-mobile a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 3.25rem; padding-inline: var(--s-4);
  border-radius: var(--r-inner); color: var(--text-strong);
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  transition: background-color var(--t-fast) var(--ease);
}
.lz-menu-mobile a:hover, .lz-menu-mobile .current-menu-item > a { background: var(--canvas); }
.lz-menu-mobile .sub-menu { padding-inline-start: var(--s-4); }
.lz-menu-mobile .sub-menu a { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.lz-panel-cats { display: grid; gap: var(--s-2); }
.lz-panel-cats a {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s-3);
  min-height: 4.5rem; padding-inline: var(--s-5);
  background: var(--tone-bg); color: var(--tone-fg); border-radius: 1.25rem;
  transition: transform var(--t-fast) var(--ease);
}
.lz-panel-cats a:hover { color: var(--tone-fg); transform: translateY(-2px); }
.lz-panel-cats strong { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.lz-panel-cats small { grid-column: 1; color: var(--tone-fg-2); font-size: var(--fs-xs); }
.lz-panel-cats .lz-ico { grid-row: span 2; width: 1.5rem; height: 1.5rem; color: var(--tone-accent); }
.lz-panel-foot { display: grid; gap: var(--s-3); margin-block-start: auto; }
.lz-panel-tag { color: var(--accent-strong); font-weight: var(--fw-bold); text-align: center; }

/* ==========================================================================
   Bento footer
   ========================================================================== */
.lz-footer { padding-block: var(--gap) calc(var(--gap) + env(safe-area-inset-bottom)); }
.lz-footer-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap); }
.lz-footer-brand { display: flex; flex-direction: column; gap: var(--s-4); min-height: 22rem; }
.lz-footer-brand .lz-brand { color: var(--cream-200); }
.lz-footer-brand .lz-brand .lz-logo { height: 4.5rem; }
.lz-footer-art { position: absolute; z-index: -1; inset-block-end: -3rem; inset-inline-end: -2.5rem; width: 18rem; height: 24rem; opacity: .22; }
.lz-footer-tag { color: var(--clay-300); font-size: var(--fs-2xl); font-weight: var(--fw-heavy); }
.lz-footer-about { max-width: 38ch; color: var(--tone-fg-2); line-height: var(--lh-relaxed); }
.lz-socials { display: flex; gap: var(--s-2); margin-block-start: auto; }
.lz-socials .lz-icon-btn { background: var(--tone-chip); color: var(--tone-fg); }
.lz-socials .lz-icon-btn:hover { background: var(--cream-200); color: var(--primary); }
.lz-footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7); }
.lz-footer h2 { margin-block-end: var(--s-4); font-size: var(--fs-md); font-weight: var(--fw-heavy); }
.lz-footer-col ul { display: grid; gap: var(--s-1); }
.lz-footer-col a {
  display: inline-flex; align-items: center; min-height: 2rem;
  color: var(--text); font-weight: var(--fw-medium);
  transition: color var(--t-fast) var(--ease);
}
.lz-footer-col a:hover { color: var(--accent-strong); }
.lz-footer-contact li { display: flex; align-items: center; gap: var(--s-3); min-height: 2rem; color: var(--text); }
.lz-footer-contact .lz-ico { width: 1.125rem; height: 1.125rem; color: var(--accent-strong); }
.lz-footer-promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-block-start: var(--gap); }
.lz-footer-promise li {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 4rem; padding-inline: var(--s-5);
  background: var(--surface); border-radius: 1.25rem;
  color: var(--text-strong); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.lz-footer-promise .lz-ico { width: 1.375rem; height: 1.375rem; color: var(--accent-strong); }
.lz-footer-base { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-3) var(--s-2); color: var(--text-muted); font-size: var(--fs-xs); }

/* ==========================================================================
   Floating helpers
   ========================================================================== */
.lz-tabbar { display: none; }
.lz-top {
  position: fixed; inset-block-end: var(--s-6); inset-inline-end: var(--s-6); z-index: var(--z-sticky);
  display: grid; place-items: center; width: var(--ctl); height: var(--ctl);
  background: var(--primary); color: var(--on-primary); border-radius: 50%; box-shadow: var(--shadow-lg);
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.lz-top:hover { background: var(--primary-hover); transform: translateY(-3px); }
.lz-progress { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: calc(var(--z-header) + 5); height: 3px; pointer-events: none; }
.lz-progress span { display: block; height: 100%; background: var(--clay-500); transform-origin: right; transform: scaleX(0); }

/* Sticky buy bar — floating pill */
.lz-sticky-buy {
  position: fixed; inset-inline: 0; inset-block-end: var(--gap); z-index: var(--z-sticky);
  pointer-events: none;
  transform: translateY(calc(100% + var(--s-6)));
  transition: transform var(--t-slow) var(--ease);
}
.lz-sticky-buy.is-on { transform: none; }
.lz-sticky-buy-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  max-width: 46rem; margin-inline: auto; padding: var(--s-2); padding-inline-start: var(--s-2);
  background: rgba(251, 248, 241, .95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-radius: var(--r-pill); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
  pointer-events: auto;
}
.lz-sticky-buy-info { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.lz-sticky-buy-img img { width: 3rem; height: 3rem; object-fit: cover; object-position: 50% 58%; border-radius: 50%; background: var(--surface-img); }
.lz-sticky-buy-info strong { display: block; color: var(--text-strong); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lz-sticky-buy-price { color: var(--text-muted); font-size: var(--fs-sm); }

/* ==========================================================================
   Responsive shell
   ========================================================================== */
@media (max-width: 75rem) {
  .lz-footer-links { grid-template-columns: 1fr 1fr; }
  .lz-footer-contact { grid-column: 1 / -1; }
}
@media (max-width: 64rem) {
  :root { --header-h: 4rem; }
  .lz-nav { display: none; }
  .lz-nav-toggle { display: inline-grid; }
  .lz-header-bar { padding-inline: var(--s-2); }
  .lz-nav-toggle { grid-column: 1; grid-row: 1; justify-self: start; }
  .lz-header-bar > .lz-brand { grid-column: 2; grid-row: 1; justify-self: center; }
  .lz-header-tools { grid-column: 3; grid-row: 1; }
  .lz-brand .lz-logo { height: 2.125rem; }
  .lz-hide-sm { display: none !important; }
  .lz-cart-pill { padding-inline: var(--s-3) var(--s-1); gap: var(--s-2); }
  .lz-cart-pill .lz-cart-label { display: none; }
  .lz-cart-pill .lz-ico { display: block; }
  .lz-footer-grid { grid-template-columns: 1fr; }
  .lz-footer-promise { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 45rem) {
  :root { --gap: .625rem; --r-tile: 1.25rem; }
  .lz-topline { height: 2rem; }
  .lz-search-box { margin-block-start: var(--s-4); padding: var(--s-4); }
  .lz-footer-links { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .lz-footer-base { flex-direction: column; align-items: center; text-align: center; }

  .lz-tabbar {
    position: fixed; inset-inline: var(--gap); inset-block-end: calc(var(--gap) + env(safe-area-inset-bottom)); z-index: var(--z-tabbar);
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: var(--s-1);
    background: rgba(251, 248, 241, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-radius: var(--r-pill); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
    transition: transform var(--t-base) var(--ease);
  }
  .lz-tabbar.is-down { transform: translateY(calc(100% + var(--s-6))); }
  .lz-tabbar a, .lz-tabbar button {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 2px;
    min-height: 3.25rem; border-radius: var(--r-pill);
    color: var(--text-muted); font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .lz-tabbar .lz-ico { width: 1.375rem; height: 1.375rem; }
  .lz-tabbar .is-active { background: var(--primary); color: var(--on-primary); }
  .lz-tabbar .lz-cart-count { position: absolute; inset-block-start: var(--s-1); left: 50%; margin-inline-start: var(--s-2); min-width: 1.25rem; height: 1.25rem; font-size: .6875rem; }
  .lz-tabbar .lz-cart-count[data-count="0"] { display: none; }
  body { padding-block-end: calc(var(--tabbar-h) + var(--gap) * 2); }
  .lz-top { inset-block-end: calc(var(--tabbar-h) + var(--gap) * 3); inset-inline-end: var(--gap); width: var(--tap); height: var(--tap); }
  .lz-sticky-buy { inset-block-end: calc(var(--tabbar-h) + var(--gap) * 2); padding-inline: var(--gap); transition: transform var(--t-slow) var(--ease), inset-block-end var(--t-base) var(--ease); }
  .lz-tabbar-hidden .lz-sticky-buy { inset-block-end: calc(var(--gap) + env(safe-area-inset-bottom)); }
}