/* ============================================================================
   THE STORE
   Each book stands in its own niche of gold light on a gold shelf, the way the
   logo's arch holds the city. No frames or boxes around the covers: the light
   and the shelf do that work. Loaded after site.css on /store and /thank-you.
   ========================================================================= */

/* ---------- opening ---------- */
.store-head{padding:clamp(8rem,13vw,10.5rem) 0 clamp(2.5rem,5vw,3.5rem);text-align:center}
.store-title{line-height:1.12}
.store-title .gold-leaf{display:inline-block;margin-top:.12em}
.store-lede{margin-top:1.8rem;color:#D6D0E2}
.store-terms{
  margin:2.2rem auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6em 1.6em;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--steel);max-width:62rem;
}
.store-terms span{display:flex;align-items:center;gap:1.6em}
.store-terms span+span::before{
  content:"";width:4px;height:4px;rotate:45deg;background:var(--fuchsia);margin-left:-.8em;flex:none;
}
@media(max-width:639px){
  .store-terms{flex-direction:column;align-items:center;gap:.55em}
  .store-terms span+span::before{display:none}
}

/* ---------- the shelf ---------- */
.shelf-ground{padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(6rem,11vw,9rem)}
.shelf{
  --cg:0px;
  display:grid;grid-template-columns:1fr;row-gap:clamp(4.5rem,9vw,7rem);column-gap:var(--cg);
  max-width:440px;margin-inline:auto;
}
@media(min-width:640px){.shelf{--cg:clamp(2rem,4vw,3.5rem);grid-template-columns:repeat(2,1fr);max-width:none}}
@media(min-width:1040px){.shelf{grid-template-columns:repeat(3,1fr)}}

.book{display:flex;flex-direction:column;min-width:0;scroll-margin-top:120px}

.book-niche{
  position:relative;height:clamp(310px,31vw,372px);
  display:flex;align-items:flex-end;justify-content:center;
  isolation:isolate;
}
/* the light the book stands in */
.book-niche::before{
  content:"";position:absolute;inset:0 4% 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52% 64% at 50% 66%,rgba(224,179,82,.17),rgba(224,179,82,.05) 52%,transparent 74%),
    radial-gradient(40% 30% at 50% 100%,rgba(252,41,153,.10),transparent 80%);
  transition:opacity .6s var(--ease);opacity:.85;
}
/* the shelf it stands on: one gold line that runs across the whole row */
.book-niche::after{
  content:"";position:absolute;bottom:-1px;height:2px;z-index:2;
  left:calc(var(--cg) * -.5);right:calc(var(--cg) * -.5);
  background:var(--leaf-gold);
  box-shadow:0 10px 26px -6px rgba(224,179,82,.4);
}

.cover{
  position:relative;margin:0;height:clamp(268px,27vw,330px);
  border-radius:1px 3px 3px 1px;overflow:hidden;
  box-shadow:0 36px 38px -28px rgba(0,0,0,.95),18px 14px 40px -26px rgba(0,0,0,.8);
  transform-origin:50% 100%;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.cover img{height:100%;width:auto;max-width:none}
/* the spine and a little sheen, so it reads as a book in the hand, not a picture */
.cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(255,255,255,.18) 1.4%,rgba(0,0,0,.1) 3.2%,transparent 7.5%),
    linear-gradient(112deg,transparent 52%,rgba(255,255,255,.07) 66%,transparent 82%);
}
.book:hover .cover,.book:focus-within .cover{
  transform:translateY(-10px);
  box-shadow:0 52px 46px -30px rgba(0,0,0,.95),18px 18px 44px -24px rgba(0,0,0,.8);
}
.book:hover .book-niche::before,.book:focus-within .book-niche::before{opacity:1}

/* ---------- words ---------- */
.book-body{display:flex;flex-direction:column;flex:1;padding-top:clamp(1.8rem,3vw,2.3rem)}
.book-title{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.12rem,1.5vw,1.36rem);line-height:1.22;letter-spacing:.04em;color:var(--silver);
}
.book-sub{
  margin-top:.4rem;font-family:var(--prose);font-style:italic;font-weight:400;
  font-size:clamp(1.02rem,1.2vw,1.14rem);line-height:1.4;color:var(--gold-lite);
}
.book-blurb{
  margin-top:1.05rem;font-family:var(--prose);font-weight:300;
  font-size:clamp(1.04rem,1.15vw,1.12rem);line-height:1.62;color:#C4BECF;
}

.book-buy{
  margin-top:auto;padding-top:1.6rem;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.book-price{display:grid;gap:.2rem;line-height:1}
.book-price b{
  font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:.02em;
  background-image:var(--leaf-gold);background-clip:text;-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
}
.book-price span{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--steel)}

.buy-slot{min-height:48px;display:flex;align-items:center}
.btn-add{min-height:48px;padding:.85em 1.5em;border-radius:999px}
.btn-add svg{width:15px;height:15px;flex:none}

/* in the cart: a quiet stepper in place of the button */
.in-cart{display:grid;justify-items:end;gap:.4rem}
.in-cart-label{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.qty{
  display:inline-flex;align-items:center;height:46px;border-radius:999px;
  border:1px solid rgba(224,179,82,.5);background:rgba(224,179,82,.06);
}
.qty button{
  width:44px;height:44px;display:grid;place-items:center;border:0;background:none;cursor:pointer;
  color:var(--gold-lite);border-radius:999px;transition:background-color .25s var(--ease),color .25s;
}
.qty button:hover{background:rgba(224,179,82,.16);color:#fff}
.qty svg{width:14px;height:14px}
.qty output{min-width:2.2ch;text-align:center;font-family:var(--display);font-size:1.05rem;color:#fff}

.book-elsewhere{
  margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--rule);
  font-size:.74rem;letter-spacing:.06em;color:var(--steel);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em 1.1em;
}
.book-elsewhere a{
  color:var(--on-dark-soft);text-decoration:underline;text-decoration-color:rgba(224,179,82,.45);
  text-underline-offset:.28em;transition:color .25s;
}
.book-elsewhere a:hover{color:var(--gold-lite)}

/* ---------- the cart bar ---------- */
.cart{
  position:fixed;left:0;right:0;bottom:0;z-index:75;
  background:rgba(6,5,9,.93);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  transform:translateY(110%);transition:transform .5s var(--ease);
}
.cart::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--leaf-gold);opacity:.8}
.cart.is-up{transform:none}
.cart-inner{
  width:var(--gutter);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem 1.6rem;flex-wrap:wrap;
  padding:.85rem 0 calc(.85rem + env(safe-area-inset-bottom));
}
.cart-sum{display:grid;line-height:1.25}
.cart-label{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.cart-count{font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.6vw,1.2rem);color:#fff;letter-spacing:.02em}
.cart-ship{font-size:.72rem;color:var(--steel)}
.cart-go{display:grid;justify-items:center;gap:.35rem}
.cart-go .btn{min-height:50px;padding:.9em 2.2em;border-radius:999px}
.cart-go .btn[aria-busy="true"]{opacity:.75;pointer-events:none}
.cart-note{font-size:.66rem;letter-spacing:.08em;color:var(--steel)}
.cart-note[data-state="error"]{color:#FF8CC6}
body.has-cart .foot{padding-bottom:clamp(8rem,12vw,9rem)}
@media(max-width:520px){
  .cart-inner{flex-wrap:nowrap}
  .cart-go .btn{padding:.9em 1.4em}
  .cart-note{display:none}
  .cart-note[data-state="error"]{display:block}
}

/* ---------- thank you ---------- */
.thanks{min-height:78vh;display:grid;align-items:center;padding:clamp(9rem,16vw,12rem) 0 clamp(5rem,9vw,7rem);text-align:center}
.thanks-title{line-height:1.12}
.thanks .prose{margin-top:1.6rem;color:#D6D0E2}
.thanks-order{
  margin:2.6rem auto 0;max-width:34rem;text-align:left;
  border-top:1px solid rgba(224,179,82,.4);border-bottom:1px solid rgba(224,179,82,.4);
  padding:1.2rem 0;display:grid;gap:.55rem;
}
.thanks-order[hidden]{display:none}
.thanks-order li{
  display:flex;gap:1rem;font-family:var(--prose);font-size:1.15rem;line-height:1.4;color:var(--on-dark);
}
.thanks-order li b{font-family:var(--display);font-weight:600;color:var(--gold);min-width:2.4ch}
.thanks-order .total{
  margin-top:.5rem;padding-top:.7rem;border-top:1px solid var(--rule);justify-content:space-between;
  font-family:var(--ui);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--steel);
}
.thanks-order .total b{font-size:1.1rem;letter-spacing:.02em;min-width:0}
.thanks .btn-row{margin-top:2.8rem}

/* ============================================================================
   OUR BUILDERS: community women and what they offer. Each builder's sales and
   orders are her own; her page sends visitors to her shop.
   ========================================================================= */
.builders{
  display:grid;gap:clamp(2.5rem,5vw,3.5rem);margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  grid-template-columns:repeat(auto-fit,minmax(240px,300px));justify-content:center;
}
.builder-card a{display:grid;justify-items:center;text-align:center;gap:.35rem;color:var(--on-light)}
.builder-photo{
  display:block;width:min(240px,70vw);aspect-ratio:3/4;overflow:hidden;margin-bottom:1rem;
  border-radius:50% 50% 6px 6px / 40% 40% 6px 6px;
  box-shadow:0 28px 50px -30px rgba(20,10,30,.6);
}
.builder-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;transition:transform .7s var(--ease)}
.builder-card a:hover .builder-photo img{transform:scale(1.04)}
.builder-name{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:1.2rem;letter-spacing:.04em}
.builder-biz{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fuchsia-deep)}
.builder-line{font-family:var(--prose);font-size:1.12rem;line-height:1.5;color:var(--on-light-soft);text-wrap:balance}
.builder-go{
  margin-top:.6rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  border-bottom:1px solid var(--fuchsia);padding-bottom:.2em;
}
/* builder pages open on a light ground, so the menu wears its dark bar from the start */
.page-builder .nav{
  background:rgba(6,5,9,.94);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:rgba(224,179,82,.22);
}