/* ============================================================
   SHOP — the cart drawer and the header search, shared by every page.
   ------------------------------------------------------------
   Both used to live on a single page: the cart was locked inside
   products.html, and search was a whole separate document. They are
   one module now so the header behaves the same everywhere.

   Self-contained on purpose: index.html and products.html carry
   their own token blocks and the other eight pages carry a
   different one, so nothing here may assume a page's variables.
   ============================================================ */
.dcb-shop{
  --shop-cream:#fce4cd;
  --shop-cream-soft:#fdeedf;
  --shop-paper:#fff6ea;
  --shop-ink:#2e1a0e;
  --shop-cocoa:#572010;
  --shop-cocoa-soft:#7a3a1e;
  --shop-honey:#ffc24b;
  --shop-honey-deep:#e8a81e;
  --shop-brick:#b23a27;
  --shop-display:'Alfa Slab One',Georgia,serif;
  --shop-body:'Hanken Grotesk',Arial,sans-serif;
  --shop-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- shared backdrop ---------- */
.shop-backdrop{
  position:fixed;
  inset:0;
  z-index:155;
  background:rgba(46,26,14,.48);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s var(--shop-ease),visibility 0s linear .45s;
}

.shop-backdrop.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s
}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-drawer{
  position:fixed;
  inset:0 0 0 auto;
  z-index:160;
  width:min(100%,480px);
  background:var(--shop-cream);
  color:var(--shop-ink);
  font-family:var(--shop-body);
  display:flex;
  flex-direction:column;
  padding:22px clamp(20px,5vw,42px) 28px;
  transform:translateX(102%);
  visibility:hidden;
  transition:transform .45s var(--shop-ease),visibility 0s linear .45s;
  box-shadow:-18px 0 48px rgba(46,26,14,.22);
}

.cart-drawer.is-open{
  transform:translateX(0);
  visibility:visible;
  transition-delay:0s
}

.cart-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-bottom:20px;
  border-bottom:2px solid rgba(87,32,16,.14)
}

.cart-drawer-title{
  margin:0;
  font-family:var(--shop-display);
  font-size:clamp(28px,6vw,42px);
  font-weight:400;
  line-height:.94;
  letter-spacing:0;
  text-transform:uppercase
}

.cart-items{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:14px;
  overflow-y:auto;
  padding:24px 2px
}

.cart-empty{
  margin:auto;
  text-align:center;
  color:var(--shop-cocoa-soft);
  font-size:14px;
  line-height:1.55;
  max-width:28ch
}

.cart-empty strong{
  display:block;
  margin-bottom:8px;
  color:var(--shop-cocoa);
  font-family:var(--shop-display);
  font-size:24px;
  font-weight:400;
  letter-spacing:-.005em;
  text-transform:uppercase
}

.cart-item{
  display:grid;
  grid-template-columns:82px 1fr auto;
  align-items:center;
  gap:14px;
  padding:12px;
  border-radius:18px;
  background:rgba(87,32,16,.055)
}

.cart-item-photo{
  width:82px;
  height:92px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:rgba(87,32,16,.055);
  overflow:hidden
}

.cart-item-photo img{
  width:72%;
  height:84%;
  object-fit:contain;
  filter:drop-shadow(0 8px 9px rgba(40,16,4,.2))
}

.cart-item-name{
  margin:0;
  font-family:var(--shop-display);
  font-size:17px;
  font-weight:400;
  line-height:1.05;
  text-transform:uppercase
}

.cart-item-package{
  display:block;
  margin-top:6px;
  color:var(--shop-cocoa-soft);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase
}

.cart-item-price{
  margin:8px 0 0;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em
}

.cart-item-quantity{
  display:inline-grid;
  grid-template-columns:32px minmax(28px,auto) 32px;
  align-items:center;
  margin-top:10px;
  border:1.5px solid rgba(87,32,16,.24);
  border-radius:999px;
  overflow:hidden
}

.cart-quantity-button{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:18px;
  font-weight:900;
  cursor:pointer
}

.cart-quantity-button:hover{
  background:rgba(87,32,16,.09)
}

.cart-quantity-button:focus-visible{
  outline:3px solid var(--shop-honey-deep);
  outline-offset:-3px
}

.cart-quantity-value{
  min-width:28px;
  text-align:center;
  font-size:12px;
  font-weight:900
}

.cart-remove{
  min-width:44px;
  min-height:44px;
  border:0;
  background:transparent;
  color:var(--shop-cocoa-soft);
  font-size:20px;
  cursor:pointer;
  border-radius:50%
}

.cart-remove:hover{
  background:rgba(87,32,16,.08);
  color:var(--shop-cocoa)
}

.cart-remove:focus-visible{
  outline:3px solid var(--shop-honey-deep);
  outline-offset:2px
}

.cart-drawer-foot{
  padding-top:20px;
  border-top:2px solid rgba(87,32,16,.14)
}

.cart-total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase
}

.cart-total strong{
  font-family:var(--shop-display);
  font-size:25px;
  font-weight:400;
  letter-spacing:.02em
}

.cart-discount{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
  color:var(--shop-teal,#25655a);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase
}

.cart-discount[hidden]{display:none}

.cart-checkout{
  width:100%;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:999px;
  background:var(--shop-cocoa);
  color:var(--shop-cream-soft);
  font-family:var(--shop-body);
  font-size:15px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s var(--shop-ease),transform .2s var(--shop-ease);
}

.cart-checkout:hover{
  background:var(--shop-ink);
  transform:translateY(-2px)
}

.cart-checkout:focus-visible{
  outline:3px solid var(--shop-honey-deep);
  outline-offset:3px
}

.cart-note{
  margin:10px 0 0;
  text-align:center;
  color:var(--shop-cocoa-soft);
  font-size:10px;
  letter-spacing:.08em
}

/* badge on whichever header button exists */
.cart-button{
  position:relative
}

.cart-count{
  position:absolute;
  right:-5px;
  top:-5px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:9px;
  display:none;
  place-items:center;
  background:var(--shop-brick);
  color:var(--shop-cream-soft);
  font-family:var(--shop-body);
  font-size:10px;
  font-weight:900;
  line-height:1;
}

.cart-count.has-items{
  display:grid
}

/* a small kick when the count changes, so adding from anywhere is felt */
@keyframes cartBump{
  40%{
    transform:scale(1.38)
  }
  100%{
    transform:scale(1)
  }
}

.cart-count.is-bumping{
  animation:cartBump .42s var(--shop-ease)
}

@media(max-width:520px){
  .cart-drawer{
    width:100%
  }
  .cart-item{
    grid-template-columns:70px 1fr auto
  }
  .cart-item-photo{
    width:70px;
    height:82px
  }
}

/* ============================================================
   SEARCH — a cream panel that drops out of the header
   ============================================================ */
.search-panel{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:160;
  background:var(--shop-cream);
  color:var(--shop-ink);
  font-family:var(--shop-body);
  border-bottom:2px solid var(--shop-cocoa);
  padding:clamp(18px,4vw,30px) clamp(16px,5vw,54px) clamp(20px,4vw,34px);
  max-height:min(86vh,760px);
  overflow-y:auto;
  transform:translateY(-101%);
  visibility:hidden;
  transition:transform .5s var(--shop-ease),visibility 0s linear .5s;
  box-shadow:0 22px 44px rgba(46,26,14,.2);
}

.search-panel.is-open{
  transform:translateY(0);
  visibility:visible;
  transition-delay:0s
}

.search-shell{
  max-width:1080px;
  margin:0 auto
}

.search-row{
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,20px);
  border-bottom:2px solid rgba(87,32,16,.22);
  padding-bottom:10px
}

.search-row svg{
  width:26px;
  height:26px;
  flex:none;
  stroke:var(--shop-cocoa);
  fill:none;
  stroke-width:2;
  stroke-linecap:round
}

.search-input{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--shop-ink);
  font-family:var(--shop-display);
  font-size:clamp(26px,5.4vw,54px);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.02em;
  text-transform:uppercase;
  padding:4px 0;
}

.search-input::placeholder{
  color:rgba(87,32,16,.3)
}

.search-input:focus{
  outline:none
}

.search-close{
  min-width:44px;
  min-height:44px;
  flex:none;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--shop-cocoa);
  font-size:24px;
  cursor:pointer;
}

.search-close:hover{
  background:rgba(87,32,16,.09)
}

.search-close:focus-visible{
  outline:3px solid var(--shop-honey-deep);
  outline-offset:2px
}

.search-meta{
  margin:14px 0 0;
  font-size:10px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--shop-cocoa-soft)
}

.search-results{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:grid;
  gap:8px
}

.search-results li{
  opacity:0;
  transform:translateY(12px)
}

.search-panel.is-open .search-results li{
  animation:searchIn .45s var(--shop-ease) forwards;
  animation-delay:calc(var(--i) * 45ms + 120ms)
}

@keyframes searchIn{
  to{
    opacity:1;
    transform:none
  }
}

.search-hit{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  background:var(--shop-paper);
  border:1.5px solid rgba(87,32,16,.14);
  transition:background .2s var(--shop-ease),border-color .2s var(--shop-ease),transform .2s var(--shop-ease);
}

.search-hit:hover{
  background:var(--shop-honey);
  border-color:var(--shop-cocoa);
  transform:translateX(4px)
}

.search-hit:focus-visible{
  outline:3px solid var(--shop-honey-deep);
  outline-offset:2px
}

.search-hit strong{
  font-family:var(--shop-display);
  font-size:19px;
  font-weight:400;
  letter-spacing:-.005em;
  text-transform:uppercase
}

.search-hit span{
  font-size:13px;
  color:var(--shop-cocoa-soft)
}

.search-hit mark{
  background:var(--shop-honey);
  color:inherit;
  border-radius:3px;
  padding:0 2px
}

.search-empty{
  padding:26px 4px;
  color:var(--shop-cocoa-soft);
  font-size:14px
}

.search-empty b{
  display:block;
  margin-bottom:6px;
  color:var(--shop-cocoa);
  font-family:var(--shop-display);
  font-size:22px;
  font-weight:400;
  text-transform:uppercase
}

@media(prefers-reduced-motion:reduce){
  .cart-drawer,.shop-backdrop,.search-panel,.cart-checkout,.search-hit{
    transition-duration:0s
  }
  .search-panel.is-open .search-results li{
    animation:none;
    opacity:1;
    transform:none
  }
  .cart-count.is-bumping{
    animation:none
  }
}