/* ==========================================================================
   AALANKAAR STUDIOS — 07 · WOOCOMMERCE
   Product card · shop archive & filters · single product · cart · checkout ·
   account · notices · pagination
   ========================================================================== */

/* --------------------------------------------------------------------------
   PRODUCT CARD
   The unit the whole shop is built from. Hover swaps to the second gallery
   image, lifts a quick-view bar, and reveals the add-to-bag control.
   -------------------------------------------------------------------------- */

.product-card{
  --card-ratio: 3 / 4;
  position:relative;
  display:flex;
  flex-direction:column;
}

.product-card__media{
  position:relative;
  display:block;
  aspect-ratio:var(--card-ratio);
  overflow:hidden;
  background:var(--bg-lift);
}

/* A scrim that fades up under the quick-view control, so the label reads
   over a pale photograph as well as a dark one. */
.product-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(10,5,4,.32);
  opacity:0;
  transition:opacity var(--dur-3) var(--ease);
  pointer-events:none;
}
.product-card:hover .product-card__media::after{ opacity:1; }

.product-card__img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease);
}
/* No second image on hover. Swapping the photograph under the pointer means
   the piece you were looking at is not the piece you click, which is exactly
   the wrong trick for a shop. The image only pushes in slightly. */
.product-card:hover .product-card__img{ transform:scale(1.05); }

/* Badges pinned top-left */
.product-card__badges{
  position:absolute;
  top:var(--s-3); left:var(--s-3);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.product-card__badges .pill{
  transform:translateY(-6px);
  opacity:0;
  animation:badge-in .5s var(--ease) .15s forwards;
}
/* The outline pill needs a backing to stay legible over a photograph. The
   solid variants bring their own, and must not have it painted over —
   ivory-on-ivory made the sale badge read as an empty capsule. */
.product-card__badges .pill:not(.pill--solid):not(.pill--ink){
  background:var(--c-ivory);
}
@keyframes badge-in{ to{ opacity:1; transform:none; } }

/* Quick-view bar rising from the floor of the image */
/* Centred on the photograph, not on the card.
   Anchoring this to the bottom of .product-card put it over the title and
   price — the card is taller than the image. Matching the image's own ratio
   keeps the overlay exactly on the picture. */
.product-card__quick{
  position:absolute;
  top:0; left:0; right:0;
  aspect-ratio:var(--card-ratio);
  z-index:2;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-2) var(--ease);
}
.product-card:hover .product-card__quick,
.product-card:focus-within .product-card__quick{ opacity:1; pointer-events:auto; }

.product-card__quick button,
.product-card__quick a{
  min-height:40px;
  padding:0 var(--s-4);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--c-ivory);
  color:var(--c-ink);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  /* rises the last few pixels into place rather than sliding the full height */
  transform:translateY(10px) scale(.96);
  transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
             transform var(--dur-3) var(--ease-back);
}
.product-card:hover .product-card__quick button,
.product-card:hover .product-card__quick a,
.product-card:focus-within .product-card__quick button{ transform:none; }
.product-card__quick button:hover,
.product-card__quick a:hover{ background:var(--c-ink); color:var(--c-ivory); }
.product-card__quick .is-added{ background:var(--c-vermilion); color:var(--c-ivory); }

/* With one control the bar reads as a single deliberate affordance. */
.product-card__quick-btn{
  letter-spacing:var(--ls-label);
  background:rgba(241,230,198,.96);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  box-shadow:var(--shadow-md);
}

/* Card body */
.product-card__body{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding-top:var(--s-3);
}
.product-card__cat{
  font-size:9.5px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--c-gold);
}
.product-card__title{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:500;
  line-height:1.28;
  transition:color var(--dur-2) var(--ease);
}
.product-card:hover .product-card__title{ color:var(--c-vermilion); }
.product-card__price{
  display:flex;
  align-items:baseline;
  gap:var(--s-2);
  font-size:var(--fs-sm);
  margin-top:2px;
}
.product-card__price del{ color:var(--fg-faint); font-size:.85em; }
.product-card__price ins{ text-decoration:none; }

/* Stretch the card link over the whole tile without trapping the buttons. */
.product-card__link::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
}
.product-card__quick{ z-index:2; }

/* --------------------------------------------------------------------------
   SHOP ARCHIVE LAYOUT
   -------------------------------------------------------------------------- */

.shop{
  display:grid;
  grid-template-columns:236px 1fr;
  gap:clamp(var(--s-5), 4vw, var(--s-7));
  align-items:start;
}
@media (max-width:1024px){ .shop{ grid-template-columns:1fr; } }

.shop__aside{
  position:sticky;
  top:110px;
  display:flex;
  flex-direction:column;
  gap:var(--s-5);
}
@media (max-width:1024px){ .shop__aside{ position:static; } }

.filter-group__title{
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-faint);
  padding-bottom:var(--s-2);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--s-3);
}
.filter-list{ display:flex; flex-direction:column; gap:2px; }
.filter-list a{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:var(--s-3);
  padding:7px 0;
  font-size:var(--fs-sm);
  color:var(--fg-muted);
  transition:color var(--dur-2) var(--ease), padding-left var(--dur-2) var(--ease);
}
.filter-list a::before{
  content:"";
  position:absolute; left:0; top:50%;
  width:0; height:1px;
  background:var(--c-vermilion);
  transform:translateY(-50%);
  transition:width var(--dur-2) var(--ease);
}
.filter-list a:hover,
.filter-list a.is-on{ color:var(--fg); padding-left:16px; }
.filter-list a:hover::before,
.filter-list a.is-on::before{ width:10px; }
.filter-list span{ color:var(--fg-faint); font-variant-numeric:tabular-nums; font-size:var(--fs-xs); }

/* Toolbar above the grid */
.shop__toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--s-5);
  flex-wrap:wrap;
}
.shop__count{
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-muted);
}
.shop__tools{ display:flex; align-items:center; gap:var(--s-4); }

.woocommerce-ordering select{
  border-bottom:1px solid var(--rule);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  padding-block:6px;
  min-width:190px;
}

/* Grid — WooCommerce's own ul.products, restyled rather than replaced. */
ul.products{
  display:grid;
  grid-template-columns:repeat(var(--shop-cols, 3), minmax(0,1fr));
  gap:clamp(var(--s-4), 2.6vw, var(--s-6)) clamp(var(--s-3), 1.8vw, var(--s-4));
  list-style:none;
  margin:0;
  padding:0;
}
/* Below these widths the authored column count is overridden outright —
   declaring the real property beats an inline --shop-cols, which a custom
   property set on the element otherwise would not. */
@media (max-width:1024px){ ul.products{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
/* Two-up holds all the way down to a small phone: these are small objects
   photographed close, and a single column makes each card a full screen of
   scrolling for one piece. */
@media (max-width:820px){  ul.products{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:359px){  ul.products{ grid-template-columns:1fr; } }
/* Kill the WooCommerce clearfix pseudo-elements.
   WooCommerce's own woocommerce.css sets
       .woocommerce ul.products::before,
       .woocommerce ul.products::after { content:" "; display:table; }
   which is a legacy float-clearing hack. In our CSS Grid layout those
   pseudo-elements become the first and last grid children — an empty
   cell that steals the first slot of the grid and leaves a blank card
   where the first product should be. Match WooCommerce's specificity
   and shut them off. */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after{
  content:none !important;
  display:none !important;
}
ul.products li.product{ margin:0 !important; width:auto !important; float:none !important; }

/* Pagination */
.woocommerce-pagination,
.pagination{
  margin-top:var(--s-7);
  padding-top:var(--s-4);
  border-top:1px solid var(--rule);
}
.woocommerce-pagination ul,
.pagination .nav-links{
  display:flex;
  gap:var(--s-2);
  justify-content:center;
  list-style:none;
  border:0 !important;
  margin:0; padding:0;
}
.woocommerce-pagination li{ border:0 !important; margin:0 !important; }
.woocommerce-pagination a,
.woocommerce-pagination span,
.pagination a,
.pagination span{
  display:grid;
  place-items:center;
  min-width:44px; height:44px;
  border:1px solid var(--rule);
  font-size:var(--fs-label);
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  padding:0 !important;
  background:transparent !important;
}
.woocommerce-pagination a:hover,
.pagination a:hover{ background:var(--c-ink) !important; color:var(--c-ivory); border-color:var(--c-ink); }
.woocommerce-pagination .current,
.pagination .current{ background:var(--c-vermilion) !important; color:var(--c-ivory); border-color:var(--c-vermilion); }

/* --------------------------------------------------------------------------
   SINGLE PRODUCT
   Sticky gallery on the left, the buy column pinned beside it.
   -------------------------------------------------------------------------- */

.pdp{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(var(--s-5), 5vw, var(--s-8));
  align-items:start;
}
@media (max-width:960px){ .pdp{ grid-template-columns:1fr; } }

/* Gallery: a stacked column of full-bleed frames on desktop.
   `position:relative` is deliberate — the sale flash and any WC hook
   attached to `woocommerce_before_single_product_summary` (like `.onsale`)
   are absolute-positioned and would otherwise escape the gallery column
   and stretch across the whole page. */
.pdp__gallery{ position:relative; display:flex; flex-direction:column; gap:var(--s-3); }
.pdp__gallery > .onsale{ top:var(--s-3); left:var(--s-3); }
.pdp__frame{
  position:relative;
  overflow:hidden;
  background:var(--bg-lift);
  aspect-ratio:4 / 5;
}
.pdp__frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.pdp__frame:hover img{ transform:scale(1.045); }

/* WooCommerce's default gallery, tamed for when the zoom/lightbox is on. */
.woocommerce-product-gallery{ position:relative; }
.woocommerce-product-gallery__wrapper{ display:flex; flex-direction:column; gap:var(--s-3); }
.woocommerce-product-gallery__image a{ display:block; overflow:hidden; }
.woocommerce-product-gallery__image img{ width:100%; height:auto; }
.woocommerce-product-gallery__trigger{
  position:absolute;
  top:var(--s-3); right:var(--s-3);
  z-index:3;
  width:42px; height:42px;
  display:grid; place-items:center;
  background:var(--c-ivory);
  border-radius:50%;
  border:1px solid var(--rule);
  font-size:0;
}
.woocommerce-product-gallery__trigger::after{ content:"⤢"; font-size:15px; }
.flex-control-thumbs{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:var(--s-2);
  margin-top:var(--s-3);
  list-style:none;
  padding:0;
}
.flex-control-thumbs img{ aspect-ratio:1; object-fit:cover; opacity:.55; transition:opacity var(--dur-2) var(--ease); cursor:pointer; }
.flex-control-thumbs img:hover,
.flex-control-thumbs .flex-active{ opacity:1; }

/* Buy column */
.pdp__buy{
  position:sticky;
  top:110px;
  display:flex;
  flex-direction:column;
}
@media (max-width:960px){ .pdp__buy{ position:static; } }

.pdp__cat{
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--c-gold);
  margin-bottom:var(--s-3);
}
.pdp__title,
.product_title{
  font-family:var(--font-display);
  font-size:clamp(1.9rem, 3.6vw, 3.1rem);
  font-weight:500;
  line-height:1.05;
  letter-spacing:var(--ls-display);
}

.pdp__price,
.woocommerce-Price-amount{ font-family:var(--font-display); }
.pdp__price{
  display:flex;
  align-items:baseline;
  gap:var(--s-3);
  font-size:1.65rem;
  margin-top:var(--s-4);
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--rule);
}
.pdp__price del{ font-size:.6em; color:var(--fg-faint); }
.pdp__price ins{ text-decoration:none; }
.pdp__save{ font-family:var(--font-sans); font-size:var(--fs-label); letter-spacing:var(--ls-label); color:var(--c-vermilion); }

.pdp__excerpt{
  color:var(--fg-muted);
  line-height:var(--lh-loose);
  margin-top:var(--s-4);
}
.pdp__tags{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-4); }

/* Quantity + add to cart row */
.pdp__form{ margin-top:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3); }

.qty-stepper{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--rule);
  height:50px;
  flex-shrink:0;
}
.qty-stepper button{
  width:44px; height:100%;
  display:grid; place-items:center;
  font-size:1rem;
  color:var(--fg-muted);
  transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.qty-stepper button:hover{ background:var(--c-ink); color:var(--c-ivory); }
.qty-stepper input,
.quantity input.qty{
  width:52px;
  height:100%;
  text-align:center;
  border:0 !important;
  background:transparent;
  font-variant-numeric:tabular-nums;
  padding:0 !important;
  -moz-appearance:textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.pdp__row{ display:flex; gap:var(--s-2); align-items:stretch; }
.pdp__row .btn{ flex:1; }

/* Variations table */
.variations{ width:100%; margin-bottom:var(--s-3); }
.variations th{
  text-align:left;
  padding:var(--s-2) var(--s-3) var(--s-2) 0;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-muted);
  vertical-align:middle;
  white-space:nowrap;
}
.variations td{ padding:var(--s-2) 0; }
.reset_variations{
  font-size:var(--fs-xs);
  color:var(--fg-faint);
  text-decoration:underline;
  text-underline-offset:3px;
}
.woocommerce-variation-price{ font-family:var(--font-display); font-size:1.35rem; margin-bottom:var(--s-3); }

/* Reassurance list */
.pdp__assure{
  margin-top:var(--s-5);
  padding-top:var(--s-4);
  border-top:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
}
.pdp__assure li{
  display:flex;
  gap:var(--s-3);
  align-items:flex-start;
  font-size:var(--fs-sm);
  color:var(--fg-muted);
  line-height:1.6;
}
.pdp__assure li::before{
  content:"";
  width:5px; height:5px;
  border-radius:50%;
  background:var(--c-gold);
  margin-top:.55em;
  flex-shrink:0;
}

/* Meta */
.product_meta{
  margin-top:var(--s-5);
  padding-top:var(--s-4);
  border-top:1px solid var(--rule);
  font-size:var(--fs-xs);
  color:var(--fg-faint);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.product_meta a{ color:var(--fg-muted); text-decoration:underline; text-underline-offset:3px; }

/* Accordion for description / care / shipping */
.acc{ margin-top:var(--s-5); border-top:1px solid var(--rule); }
.acc__item{ border-bottom:1px solid var(--rule); }
.acc__head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  padding:var(--s-4) 0;
  text-align:left;
  font-family:var(--font-label);
  font-size:var(--fs-sm);
  letter-spacing:.06em;
  transition:color var(--dur-2) var(--ease);
}
.acc__head:hover{ color:var(--c-vermilion); }
.acc__sign{
  position:relative;
  width:13px; height:13px;
  flex-shrink:0;
}
.acc__sign::before,
.acc__sign::after{
  content:"";
  position:absolute; top:50%; left:0;
  width:100%; height:1px;
  background:currentColor;
  transition:transform var(--dur-3) var(--ease);
}
.acc__sign::after{ transform:rotate(90deg); }
.acc__item.is-open .acc__sign::after{ transform:rotate(0deg); }
.acc__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-3) var(--ease);
}
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__panel > div{ overflow:hidden; }
.acc__body{
  padding-bottom:var(--s-4);
  color:var(--fg-muted);
  line-height:var(--lh-loose);
  font-size:var(--fs-sm);
}

/* WooCommerce tabs — hidden in favour of the accordion, but styled if shown */
.woocommerce-tabs ul.tabs{
  display:flex;
  gap:var(--s-5);
  list-style:none;
  border-bottom:1px solid var(--rule);
  margin:0 0 var(--s-5);
  padding:0;
}
.woocommerce-tabs ul.tabs li a{
  display:block;
  padding-bottom:var(--s-3);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-muted);
  border-bottom:1px solid transparent;
  margin-bottom:-1px;
}
.woocommerce-tabs ul.tabs li.active a{ color:var(--fg); border-bottom-color:var(--c-vermilion); }

/* Reviews */
.woocommerce-Reviews .commentlist{ display:flex; flex-direction:column; gap:var(--s-5); list-style:none; padding:0; }
.woocommerce-Reviews .comment_container{ display:grid; grid-template-columns:52px 1fr; gap:var(--s-4); }
.woocommerce-Reviews .avatar{ border-radius:50%; }
.woocommerce-Reviews .meta{ font-size:var(--fs-xs); color:var(--fg-faint); margin-bottom:var(--s-2); }
.star-rating{
  position:relative;
  display:inline-block;
  width:5.4em;
  height:1em;
  overflow:hidden;
  font-size:.82rem;
  line-height:1;
  font-family:var(--font-sans);
  color:var(--c-gold);
}
.star-rating::before{ content:"★★★★★"; position:absolute; left:0; top:0; opacity:.28; letter-spacing:.08em; }
.star-rating span{ position:absolute; left:0; top:0; overflow:hidden; padding-top:1.5em; }
.star-rating span::before{ content:"★★★★★"; position:absolute; left:0; top:0; letter-spacing:.08em; }
.woocommerce-product-rating{ display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-3); font-size:var(--fs-xs); color:var(--fg-faint); }

/* Related products */
.related > h2,
.upsells > h2,
.cross-sells > h2{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:500;
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--s-5);
}

/* --------------------------------------------------------------------------
   CART PAGE
   -------------------------------------------------------------------------- */

.cart-layout{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:clamp(var(--s-5), 5vw, var(--s-7));
  align-items:start;
}
@media (max-width:960px){ .cart-layout{ grid-template-columns:1fr; } }

table.shop_table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:var(--s-5);
}
table.shop_table th{
  text-align:left;
  padding:0 var(--s-3) var(--s-3) 0;
  border-bottom:1px solid var(--rule);
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-faint);
}
table.shop_table td{
  padding:var(--s-4) var(--s-3) var(--s-4) 0;
  border-bottom:1px solid var(--rule-soft);
  vertical-align:middle;
}
table.shop_table .product-thumbnail{ width:96px; }
table.shop_table .product-thumbnail img{ width:96px; aspect-ratio:3/4; object-fit:cover; }
table.shop_table .product-name a{ font-family:var(--font-display); font-size:1.05rem; }
table.shop_table .product-remove a{
  display:grid; place-items:center;
  width:30px; height:30px;
  border:1px solid var(--rule);
  border-radius:50%;
  color:var(--fg-faint);
  font-size:1rem;
  transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}
table.shop_table .product-remove a:hover{ background:var(--c-vermilion); border-color:var(--c-vermilion); color:var(--c-ivory); transform:rotate(90deg); }

.cart-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--s-4);
  flex-wrap:wrap;
  padding-top:var(--s-4);
}
.coupon{ display:flex; gap:var(--s-2); align-items:flex-end; }
.coupon input{ min-width:190px; }

/* Order summary panel — shared by cart & checkout */
.summary-panel{
  position:sticky;
  top:110px;
  background:var(--c-ivory-lift);
  border:1px solid var(--rule);
  padding:var(--s-5);
}
@media (max-width:960px){ .summary-panel{ position:static; } }
.summary-panel__title{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:500;
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--s-4);
}
.summary-panel table{ width:100%; }
.summary-panel th,
.summary-panel td{
  padding:var(--s-2) 0;
  border:0;
  font-size:var(--fs-sm);
  text-align:left;
}
.summary-panel td{ text-align:right; }
.summary-panel .order-total th,
.summary-panel .order-total td{
  padding-top:var(--s-3);
  border-top:1px solid var(--rule);
  font-family:var(--font-display);
  font-size:1.2rem;
}

/* --------------------------------------------------------------------------
   CHECKOUT
   -------------------------------------------------------------------------- */

.checkout-layout{
  display:grid;
  grid-template-columns:1fr 400px;
  gap:clamp(var(--s-5), 5vw, var(--s-7));
  align-items:start;
}
@media (max-width:960px){ .checkout-layout{ grid-template-columns:1fr; } }

.checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3{
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:500;
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--s-4);
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-4) var(--s-4);
}
@media (max-width:640px){
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-address-fields__field-wrapper{ grid-template-columns:1fr; }
}
.form-row-wide,
.form-row.notes{ grid-column:1 / -1; }
.form-row{ display:flex; flex-direction:column; margin:0; }
.form-row label{
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-muted);
  margin-bottom:var(--s-2);
}
.required{ color:var(--c-vermilion); text-decoration:none; }

/* select2, if WooCommerce loads it */
.select2-container--default .select2-selection--single{
  border:0 !important;
  border-bottom:1px solid var(--rule) !important;
  border-radius:0 !important;
  height:auto !important;
  background:transparent !important;
  padding:var(--s-3) 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-left:0 !important;
  line-height:1.4 !important;
  color:var(--fg) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{ top:50% !important; transform:translateY(-50%); right:0 !important; }
.select2-dropdown{ border-color:var(--rule) !important; border-radius:0 !important; background:var(--c-ivory-lift) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--c-vermilion) !important; }

/* Payment box */
#payment{ margin-top:var(--s-4); }
#payment ul.payment_methods{
  list-style:none;
  padding:0;
  margin:0 0 var(--s-4);
  border-top:1px solid var(--rule);
}
#payment ul.payment_methods li{
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--rule-soft);
}
#payment ul.payment_methods label{
  font-size:var(--fs-sm);
  letter-spacing:.04em;
  text-transform:none;
  color:var(--fg);
  cursor:pointer;
}
#payment .payment_box{
  background:var(--c-ivory);
  padding:var(--s-3);
  margin-top:var(--s-3);
  font-size:var(--fs-xs);
  color:var(--fg-muted);
  line-height:1.6;
}
#payment .payment_box p{ margin:0; }
.woocommerce-terms-and-conditions-wrapper{ font-size:var(--fs-xs); color:var(--fg-muted); margin-bottom:var(--s-3); }

/* Route every WooCommerce button through the theme button.
   Selectors below out-specify WooCommerce's own
       .woocommerce a.button.alt,
       .woocommerce button.button.alt,
       .woocommerce input.button.alt        { background-color:#a46497; }
   which is the purple that keeps appearing on the single-product
   "Add to cart" button. Matching WC's `.woocommerce` prefix + explicit
   `button.` / `input.` / `a.` tag qualifiers gives us equal or higher
   specificity, so the ink colour wins without needing !important. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.single_add_to_cart_button,
.woocommerce input.single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
#place_order,
.checkout-button,
.button.alt,
.single_add_to_cart_button,
.woocommerce-Button,
button.button,
a.button,
input.button,
.wp-element-button,
.woocommerce .wp-element-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-height:50px;
  padding:var(--s-3) var(--s-5);
  background-color:var(--c-ink);
  color:var(--c-ivory);
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  border:1px solid var(--c-ink);
  border-radius:var(--radius-sm);
  transition:background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  cursor:pointer;
  text-decoration:none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce input.single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
#place_order:hover,
.checkout-button:hover,
.button.alt:hover,
.single_add_to_cart_button:hover,
button.button:hover,
a.button:hover,
input.button:hover,
.wp-element-button:hover,
.woocommerce .wp-element-button:hover{ background-color:var(--c-vermilion); border-color:var(--c-vermilion); color:var(--c-ivory); }
.button.loading{ opacity:.6; pointer-events:none; }

/* Order received */
.woocommerce-order{ max-width:820px; }
.woocommerce-thankyou-order-details{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:var(--s-4);
  list-style:none;
  padding:var(--s-5) 0;
  border-block:1px solid var(--rule);
  margin-block:var(--s-5);
}
.woocommerce-thankyou-order-details li{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-faint);
}
.woocommerce-thankyou-order-details li strong{
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--fg);
}

/* --------------------------------------------------------------------------
   MY ACCOUNT
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:clamp(var(--s-5), 4vw, var(--s-7));
  align-items:start;
}
@media (max-width:820px){ .woocommerce-account .woocommerce{ grid-template-columns:1fr; } }

/* Signed out there is no navigation rail — the sign-in / register pair uses
   the full width. :has() is well supported now; the fallback below covers the
   handful of engines that lack it. */
.woocommerce-account .woocommerce:has(#customer_login){ display:block; }
.woocommerce-account.woocommerce-page:not(.logged-in) .woocommerce{ display:block; }

.woocommerce-MyAccount-navigation ul{ display:flex; flex-direction:column; border-top:1px solid var(--rule); }
.woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--rule-soft); }
.woocommerce-MyAccount-navigation a{
  display:block;
  padding:var(--s-3) 0;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-muted);
  transition:color var(--dur-2) var(--ease), padding-left var(--dur-2) var(--ease);
}
.woocommerce-MyAccount-navigation a:hover{ color:var(--fg); padding-left:8px; }
.woocommerce-MyAccount-navigation .is-active a{ color:var(--c-vermilion); }

#customer_login{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-7);
  max-width:960px;
  margin-inline:auto;
}
@media (max-width:820px){ #customer_login{ grid-template-columns:1fr; gap:var(--s-6); } }
#customer_login h2{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:500;
  margin-bottom:var(--s-4);
}
.woocommerce-form{ display:flex; flex-direction:column; gap:var(--s-4); }
.woocommerce-form-login__rememberme{ font-size:var(--fs-xs); color:var(--fg-muted); }

/* --------------------------------------------------------------------------
   NOTICES
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-notice{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s-3);
  padding:var(--s-4);
  margin-bottom:var(--s-5);
  border-left:2px solid var(--c-gold);
  background:var(--c-ivory-lift);
  font-size:var(--fs-sm);
  list-style:none;
  animation:notice-in .5s var(--ease) both;
}
@keyframes notice-in{ from{ opacity:0; transform:translateY(-8px); } }
.woocommerce-message{ border-left-color:var(--c-green); }
.woocommerce-error{ border-left-color:var(--c-ruby); }
.woocommerce-error li{ width:100%; }
.woocommerce-message .button,
.woocommerce-info .button{ margin-left:auto; }

/* --------------------------------------------------------------------------
   MISC WOOCOMMERCE NORMALISATION
   -------------------------------------------------------------------------- */

.woocommerce-breadcrumb{
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-faint);
  margin-bottom:var(--s-4);
}
.woocommerce-breadcrumb a{ transition:color var(--dur-2) var(--ease); }
.woocommerce-breadcrumb a:hover{ color:var(--c-vermilion); }

.onsale{
  position:absolute;
  top:var(--s-3); left:var(--s-3);
  z-index:2;
  background:var(--c-vermilion);
  color:var(--c-ivory);
  padding:5px 11px;
  border-radius:var(--radius-pill);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.out-of-stock,
.stock.out-of-stock{ color:var(--c-ruby); font-size:var(--fs-xs); letter-spacing:.06em; }
.stock.in-stock{ color:var(--c-green); font-size:var(--fs-xs); letter-spacing:.06em; }

.woocommerce-result-count{
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-muted);
  margin:0;
}

.blockUI.blockOverlay{ background:var(--c-ivory) !important; opacity:.55 !important; }

/* Empty-state cart page */
.cart-empty{ text-align:center; padding-block:var(--s-8); }
.cart-empty .t-xl{ margin-bottom:var(--s-4); }
.return-to-shop{ margin-top:var(--s-5); }

/* --------------------------------------------------------------------------
   CART & CHECKOUT — TWO-COLUMN LAYOUT
   The design shows cart items / customer details on the LEFT and a sticky
   summary panel on the RIGHT. WooCommerce's default cart.php and
   form-checkout.php output stacked content — no wrapper we can target
   directly. Solution: make the .woocommerce container (cart) or the
   form.checkout element (checkout) a CSS grid, then place the direct
   children into columns. Scoped by `body.woocommerce-cart` /
   `body.woocommerce-checkout` (added by WooCommerce) so no other pages
   are affected.
   -------------------------------------------------------------------------- */

/* ---- CART page ---------------------------------------------------------
   Design cues:
   - "Your bag" title is display-mega (much larger than a normal page-head)
   - "Piece / Price / Quantity / Subtotal" columns, not "Product / ..."
   - Quantity cell has a ± stepper (theme injects it via JS)
   - No visible Update Cart button — qty change auto-submits after a debounce
   - Coupon is a small right-aligned APPLY next to the input
   - "← Continue shopping" link on the left below the items table
   - Order summary shows only Subtotal / Shipping / Total (no long address)
*/

/* Cart / checkout titles use the display scale — matches the design's
   "Your bag" / "Checkout" hero-style header without going overboard. */
body.woocommerce-cart .page-head__title,
body.woocommerce-checkout .page-head__title{
  font-size:var(--fs-xxl);
  line-height:.94;
}

/* Kill the Update Cart button — auto-submit handles it. */
body.woocommerce-cart button[name="update_cart"],
body.woocommerce-cart input[name="update_cart"]{ display:none !important; }

/* Actions row (coupon + would-be Update Cart) — inline, right-aligned */
body.woocommerce-cart .woocommerce-cart-form td.actions{
  padding:var(--s-4) 0 var(--s-3);
  border:0;
  text-align:right;
}
body.woocommerce-cart .woocommerce-cart-form td.actions .coupon{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  margin-right:0;
  vertical-align:middle;
}
body.woocommerce-cart .woocommerce-cart-form td.actions .coupon label{ display:none; }
body.woocommerce-cart .woocommerce-cart-form td.actions .coupon input{
  border:0;
  border-bottom:1px solid var(--rule);
  background:transparent;
  padding:var(--s-2) 0;
  min-width:220px;
  font-size:var(--fs-sm);
}
/* Apply Coupon: keep it small — don't inherit the full-height ink button */
body.woocommerce-cart .woocommerce-cart-form td.actions button[name="apply_coupon"],
body.woocommerce-cart .woocommerce-cart-form td.actions input[name="apply_coupon"]{
  min-height:38px !important;
  padding:0 var(--s-4) !important;
  font-size:9.5px !important;
}

/* Continue shopping link (injected via woocommerce_after_cart_contents hook) */
.alankar-continue-shopping{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  margin-top:var(--s-4);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-muted);
  transition:color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.alankar-continue-shopping:hover{ color:var(--c-vermilion); transform:translateX(-3px); }
.alankar-continue-shopping::before{ content:"←"; }

/* Two-column cart grid is declared below at the "2-COLUMN LAYOUT" block. */

body.woocommerce-cart .page-content > .woocommerce,
body.woocommerce-cart div.woocommerce{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 380px);
  gap:clamp(var(--s-5), 5vw, var(--s-7));
  align-items:start;
}
/* Notices span both columns so a "Product added" message reads as one line. */
body.woocommerce-cart div.woocommerce > .woocommerce-notices-wrapper{
  grid-column:1 / -1;
}
/* Hide the "has been added / View cart" success notice on the cart page.
   The visitor just landed here after clicking Add to Cart — telling them
   to "View cart" while they *are* viewing it is noise. Error/info notices
   remain visible. */
body.woocommerce-cart .woocommerce-message{ display:none !important; }
/* Left column — the cart items form (contains the items table + coupon/update actions row). */
body.woocommerce-cart div.woocommerce > form.woocommerce-cart-form{
  grid-column:1;
  grid-row:2;
  min-width:0;
  margin:0;
}
/* Right column — the totals panel with Proceed to Checkout, sticky as you scroll the items. */
body.woocommerce-cart div.woocommerce > .cart-collaterals{
  grid-column:2;
  grid-row:2;
  min-width:0;
  width:auto !important; /* WC's default is width:100% floated */
}
body.woocommerce-cart .cart-collaterals .cart_totals{
  position:sticky;
  top:110px;
  background:var(--c-ivory-lift);
  border:1px solid var(--rule);
  padding:var(--s-5);
  width:100% !important;
  float:none !important;
}
body.woocommerce-cart .cart-collaterals .cart_totals > h2{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:500;
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--s-4);
}
body.woocommerce-cart .cart-collaterals .cart_totals table{
  width:100%;
  margin-bottom:0;
}
body.woocommerce-cart .cart-collaterals .cart_totals table th,
body.woocommerce-cart .cart-collaterals .cart_totals table td{
  padding:var(--s-2) 0;
  border:0;
  font-size:var(--fs-sm);
  text-align:left;
}
body.woocommerce-cart .cart-collaterals .cart_totals table td{ text-align:right; }
body.woocommerce-cart .cart-collaterals .cart_totals .order-total th,
body.woocommerce-cart .cart-collaterals .cart_totals .order-total td{
  padding-top:var(--s-3);
  border-top:1px solid var(--rule);
  font-family:var(--font-display);
  font-size:1.2rem;
}
body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout{
  margin-top:var(--s-4);
  padding:0;
}
body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout .checkout-button{
  width:100%;
}
/* Simplify the shipping row inside the summary panel:
   WC prints the flat-rate method, then the address, then a "Change address"
   link. The design keeps only the label + amount ("Complimentary"). Hide
   the calculator noise. */
body.woocommerce-cart .cart-collaterals .cart_totals ul#shipping_method{
  list-style:none;
  margin:0;
  padding:0;
}
body.woocommerce-cart .cart-collaterals .cart_totals ul#shipping_method li{
  padding:0;
  margin:0;
}
body.woocommerce-cart .cart-collaterals .cart_totals ul#shipping_method li input{ display:none; }
body.woocommerce-cart .cart-collaterals .cart_totals ul#shipping_method li label{
  font-family:var(--font-sans);
  font-size:var(--fs-sm);
  color:var(--fg);
  text-transform:none;
  letter-spacing:.02em;
  margin:0;
}
body.woocommerce-cart .cart-collaterals .cart_totals .shipping-calculator-form,
body.woocommerce-cart .cart-collaterals .cart_totals .woocommerce-shipping-destination,
body.woocommerce-cart .cart-collaterals .cart_totals .shipping-calculator-button{ display:none !important; }
/* A soft ivory note under the Proceed button. */
body.woocommerce-cart .cart-collaterals .cart_totals::after{
  content:"Taxes calculated at checkout. Free shipping over ₹1,500.";
  display:block;
  margin-top:var(--s-3);
  font-size:var(--fs-xs);
  color:var(--fg-faint);
  text-align:center;
}
/* Cross-sells (if any) span full width below both columns. */
body.woocommerce-cart div.woocommerce > .cross-sells,
body.woocommerce-cart .cart-collaterals > .cross-sells{
  grid-column:1 / -1;
  margin-top:var(--s-7);
}
/* Coupon area inside the cart-form actions row */
body.woocommerce-cart .woocommerce-cart-form td.actions{
  padding:var(--s-4) 0;
  border:0;
}
body.woocommerce-cart .woocommerce-cart-form td.actions .coupon{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  margin-right:var(--s-4);
}
body.woocommerce-cart .woocommerce-cart-form td.actions .coupon input{
  border-bottom:1px solid var(--rule);
  min-width:200px;
}
/* Stack on tablet / phone.
   NOTE: the base rule above declares grid-template-columns on TWO selectors
   — `body.woocommerce-cart .page-content > .woocommerce` (specificity 0,3,1)
   AND the simpler `body.woocommerce-cart div.woocommerce` (0,2,2). page.php
   always wraps the WC shortcode output in `.page-content`, so the higher-
   specificity selector is the one that actually matches on the cart page.
   An override that only repeats the low-specificity selector loses that
   fight regardless of source order, so the 2-column grid silently survived
   past this breakpoint — squeezing both the items table (cut-off prices)
   and the summary panel (wrapped "Proceed to checkout" button) into a
   fraction of the viewport. Mirror the exact same selector pair here. */
@media (max-width:960px){
  body.woocommerce-cart .page-content > .woocommerce,
  body.woocommerce-cart div.woocommerce{ grid-template-columns:1fr; }
  body.woocommerce-cart div.woocommerce > form.woocommerce-cart-form,
  body.woocommerce-cart div.woocommerce > .cart-collaterals{ grid-column:1; grid-row:auto; }
  body.woocommerce-cart .cart-collaterals .cart_totals{ position:static; }
}

/* ---- CART items table on phones ----------------------------------------
   The 6-column table (remove / thumbnail / piece / price / quantity /
   subtotal) has no room to breathe on a phone even at full column width —
   WooCommerce's own `shop_table_responsive` stacking rules (thead hidden,
   each row turned into a labelled card via the `data-title` attributes it
   already prints) lived entirely in the default stylesheet this theme
   intentionally dequeues (see inc/enqueue.php), and nothing replaced them.
   Re-implemented here as a small CSS-grid card per row. */
@media (max-width:680px){
  body.woocommerce-cart table.shop_table.cart thead{ display:none; }
  body.woocommerce-cart table.shop_table.cart,
  body.woocommerce-cart table.shop_table.cart tbody,
  body.woocommerce-cart table.shop_table.cart tr,
  body.woocommerce-cart table.shop_table.cart td{ display:block; width:100%; }

  body.woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item{
    position:relative;
    display:grid;
    grid-template-columns:76px 1fr;
    column-gap:var(--s-3);
    padding:var(--s-4) 0;
    border-bottom:1px solid var(--rule-soft);
  }
  body.woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td{
    border:0;
    padding:0;
    width:auto;
  }
  body.woocommerce-cart table.shop_table.cart td.product-thumbnail{
    grid-column:1;
    grid-row:1 / span 4;
  }
  body.woocommerce-cart table.shop_table.cart td.product-thumbnail img{
    width:76px; height:auto; aspect-ratio:3/4; object-fit:cover;
  }
  body.woocommerce-cart table.shop_table.cart td.product-remove{
    position:absolute;
    top:var(--s-4);
    right:0;
  }
  body.woocommerce-cart table.shop_table.cart td.product-name{
    grid-column:2;
    grid-row:1;
    padding-right:34px !important;
  }
  body.woocommerce-cart table.shop_table.cart td.product-price{
    grid-column:2;
    grid-row:2;
    margin-top:2px;
    color:var(--fg-faint);
    font-size:var(--fs-sm);
  }
  body.woocommerce-cart table.shop_table.cart td.product-quantity{
    grid-column:2;
    grid-row:3;
    margin-top:var(--s-3);
  }
  body.woocommerce-cart table.shop_table.cart td.product-subtotal{
    grid-column:2;
    grid-row:4;
    margin-top:var(--s-2);
    font-family:var(--font-display);
    font-size:1.05rem;
  }

  /* Coupon / update-cart row (colspan, not a .cart_item row) — just stacks. */
  body.woocommerce-cart table.shop_table.cart td.actions{
    text-align:left;
    padding:var(--s-4) 0 0;
  }
  body.woocommerce-cart table.shop_table.cart td.actions .coupon{
    flex-wrap:wrap;
    width:100%;
    margin-right:0;
  }
  body.woocommerce-cart table.shop_table.cart td.actions .coupon input{
    flex:1 1 auto;
    min-width:0;
  }
}

/* ---- CHECKOUT page ----------------------------------------------------- */

body.woocommerce-checkout form.checkout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 400px);
  gap:clamp(var(--s-5), 5vw, var(--s-7));
  align-items:start;
}
/* WooCommerce prints these direct children of form.checkout:
     #customer_details.col2-set      (billing + shipping)
     <h3 id="order_review_heading">  (right column, top)
     #order_review                   (right column, main)
   plus WC coupon toggle at the top (a form) and a .clear div. */
body.woocommerce-checkout form.checkout > .woocommerce-form-coupon-toggle,
body.woocommerce-checkout form.checkout > .woocommerce-form-coupon,
body.woocommerce-checkout form.checkout > .woocommerce-form-login-toggle,
body.woocommerce-checkout form.checkout > .woocommerce-form-login,
body.woocommerce-checkout form.checkout > .woocommerce-info,
body.woocommerce-checkout form.checkout > .woocommerce-error,
body.woocommerce-checkout form.checkout > .woocommerce-notices-wrapper,
body.woocommerce-checkout form.checkout > .clear{
  grid-column:1 / -1;
}
/* Column 1 fills row 2 only (its natural height). Column 2 fills row 2
   with #order_review; the standalone <h3> heading is hidden because CSS
   Grid rows must accommodate the tallest column, and stacking heading +
   review as separate rows creates a big empty gap in column 2 whenever
   #customer_details is taller than the panel. The "Your order" title is
   re-injected as a ::before pseudo on #order_review so heading + panel
   are visually one unit. */
body.woocommerce-checkout form.checkout > #customer_details{
  grid-column:1;
  grid-row:2;
  min-width:0;
}
body.woocommerce-checkout form.checkout > #order_review_heading{
  display:none;
}
body.woocommerce-checkout form.checkout > #order_review{
  grid-column:2;
  grid-row:2;
  min-width:0;
  background:var(--c-ivory-lift);
  border:1px solid var(--rule);
  padding:var(--s-5);
  position:sticky;
  top:110px;
}
body.woocommerce-checkout form.checkout > #order_review::before{
  content:"Your order";
  display:block;
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:500;
  line-height:1.2;
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--s-4);
}
@media (max-width:960px){
  body.woocommerce-checkout form.checkout{ grid-template-columns:1fr; }
  body.woocommerce-checkout form.checkout > *{ grid-column:1 !important; grid-row:auto !important; }
  body.woocommerce-checkout form.checkout > #order_review{ position:static; }
}

/* Legacy .cart-layout / .checkout-layout classes still work if used. */
.cart-layout__items{ min-width:0; }
.cart-layout__summary{ min-width:0; }
.cart-layout__summary .cart_totals > h2{ display:none; }
.woocommerce-cart-form{ margin:0; }
.checkout-layout > #customer_details{ grid-row:1 / span 2; min-width:0; }
.checkout-layout > #order_review_heading{
  grid-column:2;
  grid-row:1;
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:500;
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--rule);
  margin-bottom:0;
}
.checkout-layout > #order_review{
  grid-column:2;
  grid-row:2;
  min-width:0;
  background:var(--c-ivory-lift);
  border:1px solid var(--rule);
  padding:var(--s-5);
}
@media (max-width:960px){
  .checkout-layout > #customer_details,
  .checkout-layout > #order_review_heading,
  .checkout-layout > #order_review{ grid-column:1; grid-row:auto; }
}

/* Billing and shipping stack inside the left column. */
#customer_details .col2-set,
#customer_details .col-1,
#customer_details .col-2{ width:100%; float:none; }
#customer_details .col-2{ margin-top:var(--s-6); }

/* The order review table reuses the summary panel type scale. */
#order_review table.shop_table th,
#order_review table.shop_table td{
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--rule-soft);
  font-size:var(--fs-sm);
}
#order_review table.shop_table td{ text-align:right; }
#order_review .order-total th,
#order_review .order-total td{
  font-family:var(--font-display);
  font-size:1.2rem;
  border-bottom:0;
  border-top:1px solid var(--rule);
  padding-top:var(--s-4);
}
/* Needs to out-specify `#order_review table.shop_table td`, which right-aligns
   every cell for the money column. */
#order_review table.shop_table td.product-name{ text-align:left; line-height:1.4; }
#order_review .product-quantity{ color:var(--fg-faint); font-weight:400; }

/* The theme's summary panel wrapper around the cart totals. */
.cart_totals .summary-panel{ padding:0; border:0; background:transparent; }
.cart-layout__summary .summary-panel{
  position:sticky;
  top:110px;
  background:var(--c-ivory-lift);
  border:1px solid var(--rule);
  padding:var(--s-5);
}
@media (max-width:960px){ .cart-layout__summary .summary-panel{ position:static; } }

.shipping-calculator-button{
  font-size:var(--fs-xs);
  text-decoration:underline;
  text-underline-offset:3px;
  color:var(--fg-muted);
}
.wc-proceed-to-checkout{ margin-top:var(--s-4); }
.wc-proceed-to-checkout .checkout-button{ width:100%; }

/* Cross-sells sit below the whole layout. */
.cross-sells{ grid-column:1 / -1; margin-top:var(--s-7); }

/* --------------------------------------------------------------------------
   PRODUCT CARD ON SMALL SCREENS
   Two cards across a phone leaves roughly 160px per card, so the card type
   steps down and the hover-only quick actions are dropped — there is no
   hover on a phone, and the bar would simply never appear.
   -------------------------------------------------------------------------- */

@media (max-width:640px){
  .product-card__title{ font-size:.95rem; }
  .product-card__price{ font-size:var(--fs-xs); }
  .product-card__cat{ font-size:9px; }
  .product-card__quick{
    position:static;
    aspect-ratio:auto;
    opacity:1;
    pointer-events:auto;
    margin-top:var(--s-2);
    display:flex;
  }
  .product-card__quick button{ flex:1; transform:none; }
  .product-card__quick button,
  .product-card__quick a{
    min-height:38px;
    background:transparent;
    border-color:var(--rule);
    font-size:9px;
  }
  /* The stretched link would swallow taps meant for the buttons below it. */
  .product-card__link::after{ inset:0 0 0 0; }
}

/* --------------------------------------------------------------------------
   ACTIVE FILTER CHIPS
   What is currently filtering the grid, and a way to drop each one. Without
   this a visitor who narrows twice has no idea why the grid is nearly empty.
   -------------------------------------------------------------------------- */

.filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--c-ivory-lift);
  border-color:var(--rule);
  color:var(--fg);
  cursor:pointer;
  transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.filter-chip span{
  font-size:1.1em;
  line-height:1;
  color:var(--fg-faint);
  transition:color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}
.filter-chip:hover{ background:var(--c-vermilion); border-color:var(--c-vermilion); color:var(--c-ivory); }
.filter-chip:hover span{ color:var(--c-ivory); transform:rotate(90deg); }

/* --------------------------------------------------------------------------
   ACCOUNT DASHBOARD
   Order history, saved addresses, account details — the screens a shopper
   expects after signing in.
   -------------------------------------------------------------------------- */

.woocommerce-account-layout{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:clamp(var(--s-5), 4vw, var(--s-7));
  align-items:start;
}
@media (max-width:820px){ .woocommerce-account-layout{ grid-template-columns:1fr; } }

.woocommerce-MyAccount-navigation button{
  display:block;
  width:100%;
  text-align:left;
  padding:var(--s-3) 0;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-muted);
  transition:color var(--dur-2) var(--ease), padding-left var(--dur-2) var(--ease);
}
.woocommerce-MyAccount-navigation button:hover{ color:var(--c-vermilion); padding-left:8px; }

/* An order, as a card rather than a table row — a table of four columns on a
   phone is unreadable, and the thumbnails are what make an order recognisable. */
.order-card{
  border:1px solid var(--rule);
  background:var(--c-ivory-lift);
  margin-bottom:var(--s-4);
}
.order-card__head{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-4) var(--s-6);
  align-items:center;
  padding:var(--s-4);
  border-bottom:1px solid var(--rule);
}
.order-card__head > div{ display:flex; flex-direction:column; gap:4px; }
.order-card__head strong{
  font-family:var(--font-display);
  font-size:1.02rem;
  font-weight:500;
  letter-spacing:0;
}
.order-card__head > div:last-child{ margin-left:auto; }

.order-card__body{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-4);
  padding:var(--s-4);
}
.order-card__thumbs{ display:flex; gap:6px; }
.order-card__thumb{
  width:52px; height:66px;
  object-fit:cover;
  background:var(--bg-lift);
}
.order-card__meta{
  font-size:var(--fs-xs);
  color:var(--fg-muted);
  flex:1;
  min-width:180px;
}
.order-card__body .link-arrow{ margin-left:auto; }

@media (max-width:560px){
  .order-card__head > div:last-child{ margin-left:0; }
  .order-card__body .link-arrow{ margin-left:0; }
}

/* Account details */
.detail-list{ border-top:1px solid var(--rule); }
.detail-list > div{
  display:flex;
  justify-content:space-between;
  gap:var(--s-4);
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--rule-soft);
}
.detail-list dt{
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-faint);
}
.detail-list dd{ margin:0; font-size:var(--fs-sm); }

/* --------------------------------------------------------------------------
   CONTACT PAGE
   Details on the left, the form on the right — the form is the thing most
   people came to use, so it gets the wider column.
   -------------------------------------------------------------------------- */

.contact{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(var(--s-5), 6vw, var(--s-8));
  align-items:start;
}
@media (max-width:900px){ .contact{ grid-template-columns:1fr; gap:var(--s-6); } }

.contact__details{ display:flex; flex-direction:column; gap:var(--s-5); }
.contact__block .filter-group__title{ margin-bottom:var(--s-2); }

.contact__address{
  font-style:normal;
  font-size:var(--fs-sm);
  line-height:1.8;
  color:var(--fg-muted);
}

.contact__line{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--fs-sm);
  color:var(--fg);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.contact__line:hover{ color:var(--c-vermilion); border-bottom-color:currentColor; }

.contact__form-wrap{
  background:var(--c-ivory-lift);
  border:1px solid var(--rule);
  padding:clamp(var(--s-4), 3vw, var(--s-6));
}
.contact__form{ display:flex; flex-direction:column; gap:var(--s-4); }
.contact__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
@media (max-width:520px){ .contact__row{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   CHECKOUT — the ship-to-different-address toggle
   WooCommerce renders this as a heading with a checkbox inside; the design
   wants a plain inline control.
   -------------------------------------------------------------------------- */

.aalankaar-ship-toggle{
  flex-direction:row;
  align-items:center;
  gap:10px;
}
.aalankaar-ship-toggle input{ width:auto; }
.aalankaar-ship-toggle label{
  margin:0;
  text-transform:none;
  letter-spacing:.02em;
  font-size:var(--fs-sm);
  color:var(--fg);
}
#ship-to-different-address{ margin:0; }
#ship-to-different-address label{
  font-family:var(--font-sans);
  font-size:var(--fs-sm);
  font-weight:400;
  text-transform:none;
  letter-spacing:.02em;
}
.shipping_address{ margin-top:var(--s-4); }

/* --------------------------------------------------------------------------
   CONTACT FORM 7 COMPATIBILITY
   CF7 wraps every input in an extra <span class="wpcf7-form-control-wrap">
   for its validation UI, and adds an ajax spinner + hidden fields wrapper.
   Left alone, those wrappers collapse to inline size and the inputs come
   out narrow; the spinner sits inline next to the submit button and always
   shows a rotating dot even when idle.

   These rules make the CF7 output behave like the theme's own form-row
   markup — full-width inputs, hidden spinner unless the form is submitting,
   validation messages in the theme's copy voice.
   -------------------------------------------------------------------------- */

.wpcf7 .wpcf7-form-control-wrap{ display:block; width:100%; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select{ width:100%; }
.wpcf7 .contact__row{ margin-bottom:0; }
.wpcf7 .fieldset,
.wpcf7 fieldset{ border:0; padding:0; margin:0; }
.wpcf7 .hidden-fields-container{ display:none; }
/* Spinner only appears while submitting (CF7 adds .submitting) */
.wpcf7 .wpcf7-spinner{
  display:none;
  vertical-align:middle;
  margin-left:var(--s-3);
  width:22px; height:22px;
  border-radius:50%;
  background:transparent;
  border:2px solid var(--rule);
  border-top-color:var(--c-vermilion);
  animation:cf7-spin .8s linear infinite;
}
.wpcf7 form.submitting .wpcf7-spinner{ display:inline-block; }
@keyframes cf7-spin{ to{ transform:rotate(360deg); } }
/* Validation messages */
.wpcf7-not-valid-tip{
  color:var(--c-ruby);
  font-size:var(--fs-xs);
  margin-top:6px;
  display:block;
}
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid{ border-bottom-color:var(--c-ruby); }
/* Response output — style like WC notices */
.wpcf7-response-output{
  margin:var(--s-4) 0 0 !important;
  padding:var(--s-3) var(--s-4);
  border-left:2px solid var(--c-gold);
  background:var(--c-ivory-lift);
  font-size:var(--fs-sm);
}
.wpcf7 form.sent .wpcf7-response-output{ border-left-color:var(--c-green); }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{ border-left-color:var(--c-ruby); }
/* CF7 submit — inherits our button styles because it renders as <input type="submit" class="wpcf7-form-control has-spinner wpcf7-submit">.
   Add width:100% since the design's send button is full width. */
.wpcf7 .wpcf7-submit{ width:100%; margin-top:var(--s-3); }