/**
 * Juye - WooCommerce: product cards, shop, product detail, cart, checkout.
 */

/* ==========================================================================
   Archive header
   ========================================================================== */
/* Blocksy's own products header renders empty once the child theme replaces
   the site header, so it is hidden and .juye-archive-head used instead. The
   parent theme also prints its own h1.page-title on archives, which would
   leave the page with two identical h1s. */
.woocommerce-products-header { display: none; }

.post-type-archive-product .page-title,
.tax-product_cat .page-title,
.tax-product_tag .page-title { display: none; }

.juye-archive-head {
  background: var(--juye-cream);
  padding-block: clamp(38px, 5.5vw, 70px) clamp(26px, 3.5vw, 44px);
  margin-bottom: clamp(26px, 3.5vw, 48px);
}

.juye-archive-head__title { font-size: var(--juye-fs-h2); margin: 0; }

.juye-archive-head__text {
  margin-top: 16px;
  color: var(--juye-ink-soft);
  max-width: 58ch;
}

/* ==========================================================================
   Product cards
   ========================================================================== */
ul.products,
ul.products.juye-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(20px, 2.4vw, 34px) clamp(16px, 1.8vw, 26px);
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.products::before,
ul.products::after { display: none !important; }

ul.products li.product {
  /* Blocksy wraps the thumbnail in a static <figure>, so without a positioning
     context here the sale badge escapes to the top-left of the page. */
  position: relative;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  background: var(--juye-milk);
  border: none;
  border-radius: var(--juye-radius);
  overflow: hidden;
  padding: 0 0 22px;
  text-align: left;
  box-shadow: var(--juye-shadow-sm);
  transition:
    transform    .45s var(--juye-ease-out, var(--juye-ease)),
    box-shadow   .45s var(--juye-ease-out, var(--juye-ease)),
    border-color .45s var(--juye-ease-out, var(--juye-ease));
}

/* A hairline edge stops the card dissolving into the cream page and gives the
   hover somewhere to go. */
ul.products li.product {
  border: 1px solid var(--juye-line);
}

ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--juye-shadow-lg);
  border-color: var(--juye-cardamom);
}

/* The image sits on its own tinted field, which is what makes a flat pack
   shot read as a photographed product. Targeted at the media container rather
   than "the first link in the card": Blocksy also puts
   .woocommerce-LoopProduct-link on the product title, which was painting a
   cream block behind the title text. */
ul.products li.product figure,
ul.products li.product .ct-media-container {
  display: block;
  /* A soft key light from above turns a flat tint into a lit surface. */
  background:
    radial-gradient(118% 88% at 50% 10%, rgba(var(--c-highlight-rgb), .58), rgba(var(--c-highlight-rgb), 0) 62%),
    var(--juye-cream);
  overflow: hidden;
  margin-bottom: 18px;
}

ul.products li.product a { text-decoration: none; }

/* The 4/5 ratio is set through Blocksy's product-card ratio filter in
   functions.php, because the parent theme writes it as an inline style. */
ul.products li.product img {
  display: block;
  width: 100%;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0;
  transition: transform .65s var(--juye-ease);
}

ul.products li.product:hover img { transform: scale(1.05); }

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title {
  font-family: var(--juye-display);
  font-size: 1.12rem !important;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--juye-forest);
  padding: 0 20px;
  margin: 0 0 6px;
}

ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--juye-terra); }

ul.products li.product .price {
  display: block;
  color: var(--juye-ink);
  font-family: var(--juye-body);
  font-weight: 700;
  font-size: 15px;
  padding: 0 20px;
  margin: 0 0 16px;
}

ul.products li.product .price del {
  color: var(--juye-ink-faint);
  font-weight: 400;
  margin-right: 7px;
}

ul.products li.product .price ins {
  text-decoration: none;
  color: var(--juye-terra);
  font-weight: 700;
}

/* Blocksy prints the category after the price, which reads as an afterthought.
   The pack size already carries the secondary line, and categories have their
   own section, so this is dropped from the card rather than reordered. */
ul.products li.product .ct-product-categories,
ul.products li.product .entry-meta,
ul.products li.product .posted_in { display: none; }

ul.products li.product .button,
ul.products li.product .added_to_cart {
  margin: auto 20px 0;
  align-self: stretch;
  text-align: center;
  background: var(--c-brand);
  color: var(--c-on-dark);
  border: 2px solid var(--c-brand);
  /* Reaches the 44px minimum without needing a fixed height. */
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-pill);
}

ul.products li.product .button:hover,
ul.products li.product .added_to_cart:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--juye-forest);
  transform: none;
}

ul.products li.product .button.loading { opacity: .65; }

/* Blocksy positions the sale badge absolutely inside the thumbnail <figure>.
   Deliberately not prefixed with .woocommerce: the homepage body does not
   carry that class, so a prefixed rule would silently fail there and the badge
   would anchor to the page and land in its top-left corner. */
ul.products li.product figure,
ul.products li.product .ct-media-container { position: relative; }

/* Placement stays Blocksy's; this only restyles the badge. */
ul.products li.product span.onsale,
.single-product div.product span.onsale {
  background: var(--juye-terra);
  color: var(--c-on-dark);
  border-radius: var(--juye-radius-pill);
  font-family: var(--juye-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 13px;
  min-height: 0;
  min-width: 0;
  line-height: 1;
}

ul.products li.product .stock.out-of-stock { font-size: var(--fs-xs); color: var(--c-sale); padding: 0 var(--sp-5); }

/* ==========================================================================
   Shop controls
   ========================================================================== */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: var(--sp-6); font-size: var(--fs-sm); color: var(--c-ink-muted); }

.woocommerce .woocommerce-ordering select {
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-pill);
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  font-size: var(--fs-xs);
  color: var(--c-ink);
}

.woocommerce nav.woocommerce-pagination ul { border: none; gap: 7px; display: flex; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 50%;
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--juye-forest);
  color: var(--juye-cream);
}

/* ==========================================================================
   Single product
   ========================================================================== */
/* Blocksy lays the gallery and summary out as a flex row inside
   .product-entry-wrapper and sizes the gallery from --product-gallery-width.
   Work with that rather than imposing a competing grid. */
.single-product div.product { padding-block: clamp(26px, 3.5vw, 50px); }

.single-product .product-entry-wrapper {
  --product-gallery-width: 52%;
  gap: clamp(26px, 4.5vw, 72px);
  align-items: flex-start;
}

.single-product div.product .woocommerce-product-gallery {
  float: none !important;
  margin: 0 !important;
  position: sticky;
  top: 102px;
}

/* Deliberately no `position: relative` here. There used to be one, and being
   later in the file it beat the `position: sticky` above it -- which left the
   `top: 102px` applying as a plain downward offset instead. The gallery was
   painted 102px below its own box and spilled over the tabs underneath.
   Sticky is the intent; the narrow-screen rule below switches it to static. */
.single-product div.product .woocommerce-product-gallery__wrapper {
  background: var(--juye-cream);
  border-radius: var(--juye-radius);
  overflow: hidden;
}

.single-product div.product .summary {
  flex: 1 1 0;
  min-width: 0;
  float: none !important;
  margin: 0 !important;
}

.single-product div.product .product_title {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  margin: 0 0 16px;
}

.single-product div.product p.price,
.single-product div.product span.price {
  color: var(--juye-ink);
  font-family: var(--juye-body);
  font-size: 1.45rem;
  font-weight: 700;
  margin-bottom: 22px;
  display: block;
}

.single-product div.product p.price del { color: var(--juye-ink-faint); font-weight: 400; }
.single-product div.product p.price ins { text-decoration: none; color: var(--juye-terra); }

.single-product div.product .woocommerce-product-details__short-description {
  color: var(--juye-ink-soft);
  font-size: 1.05rem;
  line-height: 1.75;
  padding-bottom: 26px;
  border-bottom: 1.5px solid var(--juye-line);
  margin-bottom: 26px;
  max-width: 48ch;
}

.single-product div.product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-bottom: 0; }
/* Blocksy's quantity container is 120px and positions its own - and + inset
   from the container's edges, but the input below is pinned to 92px, so the +
   landed outside the input's border. The container is matched to the input so
   both controls sit inside it. Scoped above 600px because the narrow-screen
   rule stretches the input to full width, where they already agree.
   min-height matches the input's own 56px, which the container was not
   accounting for -- that was the 6px vertical spill. */
.single-product div.product form.cart .quantity { margin: 0; min-height: 56px; }

@media (min-width: 601px) {
  .single-product div.product form.cart .quantity { width: 92px; }
}

.single-product div.product form.cart .quantity input[type="number"] {
  width: 92px;
  height: 100%;
  min-height: 56px;
  text-align: center;
  font-size: 16px;
  border-radius: var(--juye-radius-pill);
}

.single-product div.product form.cart button[type="submit"] {
  flex: 1 1 220px;
  min-height: 56px;
  font-size: var(--fs-base);
  padding-inline: var(--sp-7);
}

.single-product div.product .stock.in-stock { color: var(--c-success); font-size: var(--fs-sm); font-weight: 600; }
.single-product div.product .stock.out-of-stock { color: var(--c-sale); font-size: var(--fs-sm); font-weight: 600; }

.single-product div.product .product_meta {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
}

.single-product div.product .product_meta a { color: var(--c-accent-ink); }

.single-product .woocommerce-tabs,
.single-product .related,
.single-product .upsells { padding-top: clamp(40px, 5vw, 76px); }

.woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 28px;
  border-bottom: 1.5px solid var(--juye-line);
  display: flex;
  gap: 30px;
}

.woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce-tabs ul.tabs li { background: none; border: none; border-radius: 0; margin: 0; padding: 0; }
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none !important; }

.woocommerce-tabs ul.tabs li a {
  padding: var(--sp-3) 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--juye-ink-soft);
  border-bottom: 3px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a { color: var(--juye-forest); border-bottom-color: var(--juye-saffron); }

.woocommerce-tabs .panel { max-width: 70ch; color: var(--juye-ink-soft); line-height: 1.8; }
.woocommerce-tabs .panel h2 { font-size: 1.35rem; margin-bottom: 16px; }

.single-product .related > h2,
.single-product .upsells > h2 { font-size: var(--juye-fs-h2); margin-bottom: 32px; }

/* ==========================================================================
   Cart
   ========================================================================== */
.woocommerce-cart .woocommerce { padding-block: clamp(30px, 4vw, 56px); }

.woocommerce table.shop_table { border: none; border-radius: 0; border-collapse: collapse; }

.woocommerce table.shop_table th {
  font-family: var(--juye-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--juye-ink-soft);
  border-bottom: 2px solid var(--juye-forest);
  padding: 15px 10px;
}

.woocommerce table.shop_table td {
  border-top: none;
  border-bottom: 1.5px solid var(--juye-line);
  padding: 22px 10px;
  vertical-align: middle;
}

.woocommerce table.cart img {
  width: 82px;
  border-radius: var(--juye-radius-sm);
  background: var(--juye-cream);
}

.woocommerce table.cart .product-name a {
  font-family: var(--juye-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--juye-forest);
  text-decoration: none;
}

.woocommerce a.remove { color: var(--juye-ink-faint) !important; font-weight: 400; line-height: 1; }
.woocommerce a.remove:hover { background: transparent; color: var(--juye-terra) !important; }

.woocommerce .cart_totals {
  background: var(--juye-cream);
  border: none;
  border-radius: var(--juye-radius);
  padding: 30px;
}

.woocommerce .cart_totals h2 { font-size: 1.35rem; margin: 0 0 20px; }
.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th { border-bottom-color: rgba(var(--c-brand-rgb), .12); padding: 15px 0; }

.woocommerce .wc-proceed-to-checkout a.checkout-button {
  width: 100%;
  text-align: center;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15.5px;
  background: var(--juye-saffron);
  border-color: var(--juye-saffron);
  color: var(--juye-forest);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--juye-saffron-dk);
  border-color: var(--juye-saffron-dk);
  color: var(--juye-forest);
}

.woocommerce .cart-empty,
.woocommerce .return-to-shop { text-align: center; }

.woocommerce .cart-empty {
  font-family: var(--juye-display);
  font-size: 1.6rem;
  color: var(--juye-forest);
  margin-bottom: 22px;
}

/* ==========================================================================
   Checkout
   ========================================================================== */
.woocommerce-checkout .woocommerce { padding-block: clamp(30px, 4vw, 56px); }

.woocommerce-checkout h3 {
  font-size: 1.3rem;
  margin: 0 0 22px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--juye-forest);
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }

.woocommerce-checkout-review-order {
  background: var(--juye-cream);
  border: none;
  border-radius: var(--juye-radius);
  padding: 28px;
}

.woocommerce-checkout-review-order table.shop_table { background: none; }
.woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout-review-order table.shop_table td { border-bottom-color: rgba(var(--c-brand-rgb), .12); padding: 14px 0; }

.woocommerce-checkout #payment { background: transparent; border: none; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border: none; padding: 22px 0 0; }

.woocommerce-checkout #payment ul.payment_methods li {
  border: 2px solid var(--juye-line);
  border-radius: var(--juye-radius);
  padding: 20px;
  margin-bottom: 14px;
  background: var(--juye-milk);
  list-style: none;
  transition: border-color var(--juye-t) var(--juye-ease), background var(--juye-t) var(--juye-ease);
}

.woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--juye-cardamom); }

.woocommerce-checkout #payment ul.payment_methods li.juye-selected {
  border-color: var(--juye-forest);
  background: var(--c-surface);
}

.woocommerce-checkout #payment ul.payment_methods li label {
  /* Body font deliberately. The display face is for headings; at label size
     a serif cost legibility here, and these labels wrapped to four lines on
     a phone. This is the most consequential choice on the site -- it has to
     read instantly. */
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-ink);
  cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--juye-cream);
  border-radius: var(--juye-radius-sm);
  color: var(--juye-ink-soft);
  font-size: 14px;
  line-height: 1.65;
  margin: 16px 0 0;
  padding: 18px;
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .place-order { padding: 22px 0 0; }

.woocommerce-checkout #payment #place_order {
  width: 100%;
  min-height: 58px;
  font-size: 16px;
  background: var(--juye-saffron);
  border-color: var(--juye-saffron);
  color: var(--juye-forest);
}

.woocommerce-checkout #payment #place_order:hover {
  background: var(--juye-saffron-dk);
  border-color: var(--juye-saffron-dk);
  color: var(--juye-forest);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: var(--fs-sm); color: var(--c-ink-muted); }

@media (min-width: 900px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(30px, 4vw, 62px);
    align-items: start;
  }
  .woocommerce-checkout form.checkout .col2-set { grid-column: 1; }
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review { grid-column: 2; }
  .woocommerce-checkout form.checkout #order_review { position: sticky; top: 102px; }

  .woocommerce .cart-collaterals { max-width: 450px; margin-left: auto; }
}

/* ==========================================================================
   My account
   ========================================================================== */
.woocommerce-account .woocommerce { padding-block: clamp(30px, 4vw, 56px); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1.5px solid var(--juye-line); }

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 0;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--juye-ink);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--juye-terra); font-weight: 700; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .single-product .product-entry-wrapper { flex-direction: column; --product-gallery-width: 100%; }
  .single-product div.product .woocommerce-product-gallery { position: static; width: 100%; max-width: 470px; }
}

@media (max-width: 600px) {
  ul.products,
  ul.products.juye-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }

  ul.products li.product { padding-bottom: 18px; }

  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product h2.woocommerce-loop-product__title { font-size: 1rem !important; padding: 0 14px; }

  ul.products li.product .price,
  ul.products li.product .ct-product-categories { padding: 0 14px; }

  ul.products li.product .button,
  ul.products li.product .added_to_cart { margin-inline: var(--sp-3); padding-inline: var(--sp-3); font-size: var(--fs-xs); }

  .woocommerce table.shop_table td { padding: 16px 6px; }
  .woocommerce table.cart img { width: 62px; }

  .single-product div.product form.cart { flex-direction: column; }
  .single-product div.product form.cart .quantity input[type="number"] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  ul.products li.product,
  ul.products li.product img,
  ul.products li.product:hover,
  ul.products li.product:hover img { transition: none; transform: none; }
}

/* Pack size under the product title. Real data, so a card gives a reason to
   choose one blend over another instead of just a name and a price. */
ul.products li.product .juye-pack-size {
  display: block;
  padding: 0 20px;
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--juye-ink-faint);
}

@media (max-width: 600px) {
  ul.products li.product .juye-pack-size { padding: 0 14px; }
}

/* ==========================================================================
   Saving line - what a discount is worth, said in rupees
   ========================================================================== */
.juye-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--juye-terra-soft);
  color: var(--juye-terra-ink);
  border-radius: var(--juye-radius-pill);
  /* The product card is a flex column, so without this the pill stretches to
     the full card width instead of hugging its text. */
  align-self: flex-start;
  font-family: var(--juye-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .01em;
  padding: 6px 13px;
  margin: 0 0 18px;
}

ul.products li.product .juye-save {
  font-size: var(--fs-xs);
  padding: var(--sp-1) var(--sp-3);
  margin: -4px 20px 14px;
}

/* Blocksy composes the card from its own layout list rather than from the
   WooCommerce loop hooks, so no hook priority can place the saving after the
   price -- anything printed on woocommerce_after_shop_loop_item_title lands
   ahead of it. The card is a flex column, so the order is settled here
   instead. Image, title and pack size keep the default 0 and stay in source
   order above these. */
ul.products li.product .price              { order: 1; }
ul.products li.product .juye-save          { order: 2; }
ul.products li.product .entry-meta         { order: 3; }
ul.products li.product .ct-woo-card-actions { order: 4; }

/* ==========================================================================
   Sticky buy bar - built by motion.js, shown once the real form scrolls off
   ========================================================================== */
.juye-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 11px clamp(14px, 4vw, 20px);
  padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  background: rgba(var(--c-surface-rgb), .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--juye-line);
  box-shadow: 0 -8px 28px rgba(var(--c-brand-rgb), .13);
  transform: translate3d(0, 100%, 0);
  transition: transform .42s var(--juye-ease-out, var(--juye-ease));
}

.juye-buybar.is-up { transform: none; }

.juye-buybar__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.juye-buybar__name {
  font-family: var(--juye-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--juye-forest);
  line-height: 1.2;
  /* One line only: the bar must never grow and cover the page. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.juye-buybar__price {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-sale);
}

.juye-buybar__price del { color: var(--juye-ink-faint); font-weight: 400; margin-right: 6px; }
.juye-buybar__price ins { text-decoration: none; color: var(--juye-terra); }

.juye-buybar__btn {
  flex: 0 0 auto;
  /* layout.css stretches every .juye-btn to full width on small screens,
     which is right for the hero calls to action and wrong here: in the bar
     the button has to leave room for the name and price beside it. */
  width: auto;
  padding: 13px 22px;
  min-height: 48px;
  font-size: 14px;
}

/* The bar is a mobile and tablet affordance; on desktop the real form stays
   in comfortable reach. */
@media (max-width: 899px) {
  .single-product .juye-buybar { display: flex; }
}

/* Lift the WhatsApp button clear of the bar instead of letting them stack. */
.juye-wa-float {
  transition: transform .42s var(--juye-ease-out, var(--juye-ease)), box-shadow var(--juye-t) var(--juye-ease);
}

body:has(.juye-buybar.is-up) .juye-wa-float { transform: translate3d(0, -74px, 0); }

@media (prefers-reduced-motion: reduce) {
  .juye-buybar { transition: none; }
  .juye-wa-float { transition: none; }
}

/* ==========================================================================
   Phase 4: archive affordances
   ========================================================================== */

/* The card title was a 27px tap target. Blocksy nests the link inside the
   h2, so the height has to go on the anchor rather than the heading. */
ul.products li.product .woocommerce-loop-product__title a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* Blocksy hides the result count below its small breakpoint. "Showing all 6
   results" is reassurance, not chrome -- a shopper on a phone has the least
   context about how big the range is, so it stays. */
/* !important is unavoidable here: Blocksy hides this with a utility class
   declared as `.ct-hidden-sm{display:none !important}`, which no amount of
   specificity can beat. It is the only one this rebuild adds; the other 18
   in this file predate it and are Blocksy overrides of the same kind. */
.woocommerce .woocommerce-result-count.ct-hidden-sm {
  display: block !important;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

/* The pill is a single line or it is nothing: wrapped onto two it stops
   reading as a tag and starts reading as a broken button. */
.juye-save { white-space: nowrap; }

/* ==========================================================================
   Phase 5: product page affordances
   ========================================================================== */

/* Blocksy renders breadcrumbs as 20px inline links. They are pure navigation
   rather than prose, so they get a real tap height -- the row grows to 44px,
   which is the point.

   The category link inside .product_meta is left alone on purpose: it sits
   inside a sentence ("Category: Masala Chai"), and WCAG 2.5.8 exempts inline
   targets in a block of text. Forcing it to 44px would break the line. */
.single-product .ct-breadcrumbs a,
.single-product .ct-breadcrumbs span {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.single-product .ct-breadcrumbs {
  font-size: var(--fs-xs);
  letter-spacing: .04em;
}

.single-product .ct-breadcrumbs a { color: var(--c-ink-muted); }
.single-product .ct-breadcrumbs a:hover { color: var(--c-accent-ink); }

/* The returns link sits with the trust list, where the decision is made. */
.juye-returns-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.juye-returns-link:hover { color: var(--c-brand); }

/* ==========================================================================
   Phase 6: cart and checkout affordances
   ========================================================================== */

/* The remove control was a 17px glyph. It deletes a line from the order, so
   it needs a real target even though it looks small. */
.woocommerce a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--r-pill);
}

.woocommerce a.remove:hover { background: var(--c-bg); }

/* The shipping calculator toggle is a control, not prose. */
.woocommerce .shipping-calculator-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-sm);
  color: var(--c-accent-ink);
}

/* Coupons are a minority path. A full-width solid button next to a greyed
   "Update cart" made the two loudest things on the cart a discount box and a
   control that looks broken -- while the actual next step sat below the
   fold. The coupon is an outline now, and the disabled update button reads
   as waiting rather than dead. */
.woocommerce .coupon button[name="apply_coupon"] {
  background: transparent;
  color: var(--c-ink);
  border: 1.5px solid var(--c-border);
}

.woocommerce .coupon button[name="apply_coupon"]:hover {
  background: var(--c-surface);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}

.woocommerce button[name="update_cart"]:disabled,
.woocommerce button[name="update_cart"][disabled] {
  background: transparent;
  color: var(--c-ink-muted);
  border: 1.5px dashed var(--c-border);
  opacity: 1;
  cursor: default;
}

/* The cart line item title is the link back to the product. */
.woocommerce td.product-name > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* --------------------------------------------------------------------------
   Payment chooser

   This is the single most consequential control on the site, so it gets laid
   out explicitly rather than inheriting. The label was a flex row carrying
   50px of horizontal padding, which left 191px for a 43-character title at
   18px -- four lines for "Cash on Delivery (small advance to confirm)".
   -------------------------------------------------------------------------- */
.woocommerce-checkout #payment ul.payment_methods li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--sp-3);
  padding: var(--sp-4);
}

.woocommerce-checkout #payment ul.payment_methods li input.input-radio {
  /* A 16px radio is not a target. The whole row is clickable through the
     label, but the control itself should be hittable too. */
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--c-accent-ink);
}

.woocommerce-checkout #payment ul.payment_methods li label {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
}

/* The description belongs under both, spanning the full row. */
.woocommerce-checkout #payment ul.payment_methods li .payment_box {
  grid-column: 1 / -1;
  margin-top: var(--sp-3);
}

@media (min-width: 561px) {
  .woocommerce-checkout #payment ul.payment_methods li label { font-size: var(--fs-md); }
}

/* Terms and privacy: the checkbox is a control and gets a real size; the
   links inside the sentence keep the WCAG 2.5.8 inline exception. */
/* Specific enough to beat the parent theme's own form rules, which were
   still sizing the shipping-address toggle at 16px. */
.woocommerce form .form-row.woocommerce-validated input[type="checkbox"],
.woocommerce-checkout input#terms,
/* Needs ID weight: a class-level rule elsewhere was holding this one at 16px. */
.woocommerce-checkout input#ship-to-different-address-checkbox,
.woocommerce .woocommerce-form__label input.woocommerce-form__input-checkbox,
.woocommerce-checkout .woocommerce-form__input-checkbox,
.woocommerce-form__input-checkbox {
  width: 22px;
  height: 22px;
  margin-right: var(--sp-2);
  accent-color: var(--c-accent-ink);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label,
.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  gap: var(--sp-1);
}

/* --------------------------------------------------------------------------
   "View cart", the link WooCommerce adds after an AJAX add-to-cart.

   It was never styled for the single product page, so it fell through to
   Blocksy's default: a grey-blue pill with `flex: 1 1 0%`, which collapsed it
   to 73px and wrapped "View cart" onto two lines next to a full-size primary.

   It is a secondary action -- the shopper may well add more -- so it reads as
   an outline button at the same height as Add to cart rather than competing
   with it. Ink on surface is 16:1; brass on page on hover is 5.01:1.
   -------------------------------------------------------------------------- */
.single-product div.product form.cart .added_to_cart {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-6);
  /* One line. Collapsing to two was the whole problem. */
  white-space: nowrap;
  background: var(--c-surface);
  color: var(--c-brand);
  border: 2px solid var(--c-border);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  transition:
    background   var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    color        var(--t-base) var(--ease),
    transform    var(--t-base) var(--ease);
}

.single-product div.product form.cart .added_to_cart:hover {
  background: var(--c-bg);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
  transform: translateY(-2px);
}

.single-product div.product form.cart .added_to_cart:active {
  transform: translateY(0) scale(.975);
  transition-duration: var(--t-fast);
}

/* Deliberately not stretched on small screens. Full width made the secondary
   wider than the primary beside it, which inverts the hierarchy -- Add to cart
   measured 233px against a 343px "View cart". It stays sized to its text. */

@media (prefers-reduced-motion: reduce) {
  .single-product div.product form.cart .added_to_cart,
  .single-product div.product form.cart .added_to_cart:hover,
  .single-product div.product form.cart .added_to_cart:active { transition: none; transform: none; }
}