/* ============================================================
   AE SPORTS - CART DRAWER
   Blocksy renders the mini cart as a small dark dropdown; the
   panel was slate while the text was coloured for a white panel,
   so the product title was ink on dark and unreadable.

   This rebuilds it as a slide-in drawer: white, full height,
   opening from the right when an item is added.
   ============================================================ */

/* ---- backdrop ---------------------------------------------- */
.ae-cart-backdrop{
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(14,16,18,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--ae-t-overlay) var(--ae-ease),
             visibility var(--ae-t-overlay) var(--ae-ease);
}
body.ae-cart-open .ae-cart-backdrop{opacity:1;visibility:visible}

/* ---- the drawer -------------------------------------------- */
body header#header .ct-cart-content,
.ct-cart-content{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:auto;
  z-index:9999;
  width:min(410px,100vw);
  max-width:none;
  height:100%;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  background:var(--ae-paper-raised);
  border:0;
  border-left:1px solid var(--ae-line-paper);
  border-radius:0;
  box-shadow:var(--ae-sh-overlay);
  transform:translateX(100%);
  visibility:hidden;
  opacity:1;
  transition:transform var(--ae-t-overlay) var(--ae-ease),
             visibility var(--ae-t-overlay) var(--ae-ease);
  overflow:hidden;
}
body.ae-cart-open header#header .ct-cart-content,
body.ae-cart-open .ct-cart-content{
  transform:none;
  visibility:visible;
}

/* ---- header row -------------------------------------------- */
.ae-cart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ae-s4);
  padding:var(--ae-s5) var(--ae-s5);
  border-bottom:1px solid var(--ae-line-paper);
  flex:0 0 auto;
}
.ae-cart-head__title{
  font-family:var(--ae-ff);
  font-size:var(--ae-l1);
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ae-on-paper);
}
.ae-cart-close{
  width:44px;
  height:44px;
  margin:-10px -10px -10px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:0;
  cursor:pointer;
  color:var(--ae-on-paper);
  border-radius:0;
  transition:color var(--ae-t-micro) var(--ae-ease);
}
.ae-cart-close:hover{color:var(--ae-seal-deep)}
.ae-cart-close svg{
  width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;
}

/* ---- items -------------------------------------------------- */
.ct-cart-content ul.woocommerce-mini-cart{
  flex:1 1 auto;
  overflow-y:auto;
  margin:0;
  padding:var(--ae-s3) var(--ae-s5);
  list-style:none;
  max-height:none;
}
.ct-cart-content li.mini_cart_item{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 32px;
  gap:var(--ae-s4);
  align-items:start;
  padding:var(--ae-s4) 0;
  margin:0;
  border-bottom:1px solid var(--ae-line-paper);
  position:relative;
  color:var(--ae-on-paper);
}
.ct-cart-content li.mini_cart_item:last-child{border-bottom:0}

.ct-cart-content li.mini_cart_item a.ct-media-container,
.ct-cart-content li.mini_cart_item > a:not(.remove){
  grid-column:1;
  display:block;
  width:64px;
  height:80px;
  margin:0;
  background:var(--ae-paper-sunk);
  overflow:hidden;
}
.ct-cart-content li.mini_cart_item img{
  width:100%;
  height:100%;
  object-fit:contain;
  margin:0;
  padding:4px;
  float:none;
  position:static;
}

.ct-cart-content .product-data,
.ct-cart-content li.mini_cart_item > span{grid-column:2;min-width:0}

.ct-cart-content a.product-title{
  display:block;
  font-family:var(--ae-ff);
  font-size:13.5px;
  font-weight:700;
  line-height:1.4;
  color:var(--ae-on-paper);
  text-decoration:none;
  margin-bottom:5px;
}
.ct-cart-content a.product-title:hover{color:var(--ae-seal-deep)}

.ct-cart-content .quantity,
.ct-cart-content li.mini_cart_item .quantity{
  display:block;
  font-size:13px;
  color:var(--ae-on-paper-2);
  font-variant-numeric:tabular-nums;
}
.ct-cart-content .quantity .woocommerce-Price-amount,
.ct-cart-content li.mini_cart_item .woocommerce-Price-amount{
  color:var(--ae-on-paper);
  font-weight:700;
}

/* remove control */
.ct-cart-content a.remove_from_cart_button{
  grid-column:3;
  position:static;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  border-radius:50%;
  background:var(--ae-paper-sunk);
  color:var(--ae-on-paper-2);
  font-size:0;
  line-height:0;
  text-decoration:none;
  transition:background var(--ae-t-micro) var(--ae-ease),color var(--ae-t-micro) var(--ae-ease);
}
.ct-cart-content a.remove_from_cart_button::before{
  content:'\00d7';
  font-size:18px;
  line-height:1;
  font-weight:400;
}
.ct-cart-content a.remove_from_cart_button:hover{
  background:var(--ae-mark);
  color:#fff;
}

/* ---- footer ------------------------------------------------- */
.ct-cart-content .total,
.ct-cart-content p.total{
  flex:0 0 auto;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--ae-s4);
  margin:0;
  padding:var(--ae-s5);
  border-top:1px solid var(--ae-line-paper);
  border-bottom:0;
  font-family:var(--ae-ff);
  font-size:var(--ae-l1);
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ae-on-paper);
}
.ct-cart-content .total .woocommerce-Price-amount,
.ct-cart-content .total strong{
  font-size:20px;
  font-weight:800;
  letter-spacing:0;
  text-transform:none;
  color:var(--ae-on-paper);
  font-variant-numeric:tabular-nums;
}

.ct-cart-content .buttons,
.ct-cart-content p.buttons{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--ae-s3);
  margin:0;
  padding:0 var(--ae-s5) var(--ae-s5);
}
.ct-cart-content .buttons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--ae-tap);
  padding:0 var(--ae-s4);
  border:1px solid var(--ae-on-paper);
  border-radius:0;
  font-family:var(--ae-ff);
  font-size:var(--ae-l1);
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background var(--ae-t-micro) var(--ae-ease),
             color var(--ae-t-micro) var(--ae-ease),
             border-color var(--ae-t-micro) var(--ae-ease);
}
.ct-cart-content .buttons a:first-child{
  background:transparent;
  color:var(--ae-on-paper);
}
.ct-cart-content .buttons a:first-child:hover{
  background:var(--ae-on-paper);
  color:var(--ae-paper);
}
.ct-cart-content .buttons a.checkout,
.ct-cart-content .buttons a:last-child{
  background:var(--ae-on-paper);
  color:var(--ae-paper);
}
.ct-cart-content .buttons a.checkout:hover,
.ct-cart-content .buttons a:last-child:hover{
  background:var(--ae-seal);
  border-color:var(--ae-seal);
  color:var(--ae-ink);
}

/* ---- empty state -------------------------------------------- */
.ct-cart-content .woocommerce-mini-cart__empty-message,
.ct-cart-content .empty{
  padding:var(--ae-s7) var(--ae-s5);
  text-align:center;
  color:var(--ae-on-paper-2);
  font-size:var(--ae-b2);
}

/* ---- item entrance ------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  body.ae-cart-open .ct-cart-content li.mini_cart_item{
    animation:ae-cart-item 340ms var(--ae-ease) both;
  }
  body.ae-cart-open .ct-cart-content li.mini_cart_item:nth-child(2){animation-delay:50ms}
  body.ae-cart-open .ct-cart-content li.mini_cart_item:nth-child(3){animation-delay:100ms}
  body.ae-cart-open .ct-cart-content li.mini_cart_item:nth-child(n+4){animation-delay:140ms}
}
@keyframes ae-cart-item{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:none}
}

/* the cart count ticks when an item lands */
@media (prefers-reduced-motion:no-preference){
  header#header .ct-cart-count.ae-bump,
  header#header .ct-dynamic-count-cart.ae-bump{
    animation:ae-bump 420ms var(--ae-ease);
  }
}
@keyframes ae-bump{
  0%{transform:scale(1)}
  35%{transform:scale(1.35)}
  100%{transform:scale(1)}
}

/* ---- page must not scroll behind the drawer ----------------- */
body.ae-cart-open{overflow:hidden}

/* ---- mobile -------------------------------------------------- */
@media(max-width:480px){
  body header#header .ct-cart-content,
  .ct-cart-content{width:100vw;border-left:0}
  .ct-cart-content .buttons{grid-template-columns:1fr}
}

/* ------------------------------------------------------------
   Explicit grid placement.
   The remove link is the first child in WooCommerce's markup, so
   auto-placement pushed the image and text onto a second row.
   ------------------------------------------------------------ */
.ct-cart-content li.mini_cart_item a.remove_from_cart_button{grid-column:3;grid-row:1}
.ct-cart-content li.mini_cart_item a.ct-media-container,
.ct-cart-content li.mini_cart_item > a:not(.remove){grid-column:1;grid-row:1}
.ct-cart-content li.mini_cart_item .product-data,
.ct-cart-content li.mini_cart_item > span:not(.remove){grid-column:2;grid-row:1}

/* The floating WhatsApp button must not sit over the checkout CTA. */
body.ae-cart-open a.ae-wa{opacity:0;visibility:hidden;transition:opacity var(--ae-t-overlay) var(--ae-ease),visibility var(--ae-t-overlay) var(--ae-ease)}

/* ------------------------------------------------------------
   Stacking fix.

   The drawer lives inside header.ct-header, which is position:relative
   with z-index:50. That is a stacking context, so the drawer's z-index
   only competes inside the header - and the backdrop, a child of body
   at 9998, rendered on top of it and swallowed every click.

   Lifting the header above the backdrop while the drawer is open puts
   the drawer back in reach. Only applies while open, so the header's
   normal stacking is untouched the rest of the time.
   ------------------------------------------------------------ */
body.ae-cart-open header#header,
body.ae-cart-open header.ct-header{
  z-index:10000;
}

/* The header sits above the dim, so give it the drawer's ground rather
   than leaving it looking detached from the dimmed page. */
body.ae-cart-open header#header [data-row]{
  position:relative;
  z-index:1;
}

/* ---- quantity stepper --------------------------------------- */
.ae-qty{
  display:inline-flex;
  align-items:center;
  margin-top:8px;
  border:1px solid var(--ae-line-paper);
  border-radius:var(--ae-r0);
  background:var(--ae-paper-raised);
  overflow:hidden;
}
.ae-qty__btn{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:none;
  cursor:pointer;
  font-family:var(--ae-ff);
  font-size:15px;
  font-weight:700;
  line-height:1;
  color:var(--ae-on-paper);
  transition:background var(--ae-t-micro) var(--ae-ease),color var(--ae-t-micro) var(--ae-ease);
}
.ae-qty__btn:hover{background:var(--ae-on-paper);color:var(--ae-paper)}
.ae-qty__btn:focus-visible{outline:2px solid var(--ae-seal);outline-offset:-2px}
.ae-qty__value{
  min-width:34px;
  text-align:center;
  font-family:var(--ae-ff);
  font-size:13px;
  font-weight:800;
  color:var(--ae-on-paper);
  font-variant-numeric:tabular-nums;
  border-left:1px solid var(--ae-line-paper);
  border-right:1px solid var(--ae-line-paper);
  line-height:34px;
}
.mini_cart_item.ae-qty-busy{opacity:.55;pointer-events:none;transition:opacity var(--ae-t-micro) var(--ae-ease)}

/* the quantity line now shows the unit price only */
.ct-cart-content li.mini_cart_item .quantity{
  display:block;
  font-size:13px;
  color:var(--ae-on-paper-2);
}
.ct-cart-content li.mini_cart_item .quantity .woocommerce-Price-amount{
  color:var(--ae-on-paper);
  font-weight:700;
}
.ae-qty__each{
  font-size:var(--ae-l1);
  letter-spacing:.06em;
  color:var(--ae-on-paper-3);
  text-transform:uppercase;
}