/* OrganizedChaos Prime Viewport Contract
   Single visual root -> top chrome -> active page scrollport -> bottom command pill.
   Runtime enhancement is optional; CSS remains usable if JS fails. */

:root{
  --pv-w:100vw;
  --pv-h:100dvh;
  --pv-left:0px;
  --pv-top:0px;
  --pv-keyboard:0px;
  --pv-top-shell-h:0px;
  --pv-bottom-shell-h:0px;
}

html,body{
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

body{
  position:fixed;
  inset:0;
}

.prime-viewport{
  position:fixed;
  left:var(--pv-left);
  top:var(--pv-top);
  width:var(--pv-w);
  height:var(--pv-h);
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  background:var(--paper);
  contain:layout paint;
  isolation:isolate;
}

.prime-top-shell{
  position:relative;
  z-index:20;
  min-width:0;
  padding-top:env(safe-area-inset-top);
  background:rgba(245,241,232,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}

.prime-top-shell .announcement{
  padding-top:7px;
  padding-bottom:7px;
}

.site-header{
  position:relative;
  top:auto;
  z-index:auto;
  border-bottom:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.brand-button,
.desktop-nav button{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}

.desktop-nav button{
  position:relative;
  font:inherit;
  color:inherit;
}

.desktop-nav button::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-5px;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s;
}

.desktop-nav button:hover::after,
.desktop-nav button:focus-visible::after{
  transform:scaleX(1);
}

.prime-scroll{
  min-width:0;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  contain:layout style;
}

.prime-page{
  min-width:0;
  width:100%;
  min-height:100%;
}

.prime-command-pill{
  position:relative;
  z-index:25;
  justify-self:center;
  align-self:end;
  display:flex;
  gap:4px;
  max-width:min(94vw,520px);
  margin:8px auto max(8px,env(safe-area-inset-bottom));
  padding:6px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(17,17,17,.93);
  color:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.24);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.prime-command-pill button{
  min-width:0;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:1 1 0;
  border:0;
  border-radius:999px;
  padding:8px 14px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font-weight:700;
  font-size:.82rem;
  white-space:nowrap;
}

.prime-command-pill button:hover,
.prime-command-pill button:focus-visible,
.prime-command-pill button[aria-current="page"]{
  background:#fff;
  color:#111;
}

.prime-command-pill b{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-size:.7rem;
}

.prime-command-pill button:hover b,
.prime-command-pill button:focus-visible b,
.prime-command-pill button[aria-current="page"] b{
  background:#111;
  color:#fff;
}

.prime-overlay{
  position:absolute;
  inset:0;
  z-index:80;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,min(540px,100%));
  min-width:0;
  min-height:0;
  overflow:hidden;
}

.prime-overlay[hidden]{
  display:none!important;
}

.overlay-scrim{
  grid-column:1/-1;
  grid-row:1;
  width:100%;
  height:100%;
  border:0;
  background:rgba(0,0,0,.46);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  cursor:pointer;
}

.cart-drawer{
  position:relative;
  inset:auto;
  right:auto;
  top:auto;
  z-index:2;
  grid-column:2;
  grid-row:1;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));
  transform:none;
  transition:none;
  background:var(--paper);
  box-shadow:-24px 0 60px rgba(0,0,0,.16);
}

.cart-local-scroll,
.dialog-local-scroll{
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.prime-modal-overlay{
  place-items:center;
  grid-template-columns:1fr;
  padding:
    max(18px,env(safe-area-inset-top))
    max(18px,env(safe-area-inset-right))
    max(18px,env(safe-area-inset-bottom))
    max(18px,env(safe-area-inset-left));
}

.prime-modal-overlay .overlay-scrim{
  grid-column:1;
  grid-row:1;
}

.prime-modal-overlay .dialog-card{
  position:relative;
  z-index:2;
  grid-column:1;
  grid-row:1;
  width:min(640px,100%);
  max-height:100%;
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:minmax(0,1fr);
}

.dialog-card form{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}

.toast{
  z-index:110;
  bottom:calc(max(78px,env(safe-area-inset-bottom) + 70px));
}

.prime-footer{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:24px;
  align-items:center;
  padding:30px clamp(20px,5vw,74px) 42px;
  border-top:1px solid var(--line);
}

/* Parent-first organization and pressure states */
.prime-section,
.category-strip,
.section-heading,
.product-grid,
.styling-section,
.prime-footer{
  container-type:inline-size;
}

.prime-viewport[data-pressure="compact"] .announcement{
  font-size:.6rem;
  letter-spacing:.13em;
}

.prime-viewport[data-pressure="compact"] .site-header{
  padding-top:12px;
  padding-bottom:12px;
}

.prime-viewport[data-pressure="compact"] .prime-command-pill{
  margin-top:5px;
  margin-bottom:max(5px,env(safe-area-inset-bottom));
}

.prime-viewport[data-pressure="tight"] .announcement{
  display:none;
}

.prime-viewport[data-pressure="tight"] .site-header{
  padding-top:10px;
  padding-bottom:10px;
}

.prime-viewport[data-pressure="tight"] .brand{
  font-size:1.08rem;
}

.prime-viewport[data-pressure="tight"] .prime-command-pill{
  width:calc(100% - 16px);
  max-width:none;
}

.prime-viewport[data-pressure="tight"] .prime-command-pill button{
  min-height:40px;
  padding:7px 8px;
  font-size:.74rem;
}

@container (max-width:900px){
  .section-heading{
    align-items:flex-start;
    flex-direction:column;
  }
}

@container (max-width:680px){
  .styling-section{
    grid-template-columns:1fr;
  }
  .prime-footer{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
}

@container (max-width:520px){
  .product-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .prime-command-pill{
    width:calc(100% - 20px);
  }
}

@media (max-width:560px){
  .prime-overlay{
    grid-template-columns:1fr;
  }
  .cart-drawer{
    grid-column:1;
  }
}

@media (prefers-reduced-motion:reduce){
  .prime-scroll{scroll-behavior:auto}
}