/* jdtheme26 — product detail page (2026-09-27, operator's list). Loaded on single product pages only.
   Server-side deletions (tabs kept to 描述, products nav, share icons, brands, product meta, TI wishlist) are settings / PHP — see functions.php. */

/* .product_title 24px, letter-spacing .05em (explicit operator values; the site default is .15em) */
body.single-product .product_title {
  font-size: 24px;
  letter-spacing: .05em;
}

/* WoodMart's outer tab nav (.wd-nav-tabs-wrapper) deleted — only the 描述 panel is left, whose own 4-tab block is the mu-plugin's */
body.single-product .woocommerce-tabs .wd-nav-tabs-wrapper { display: none; }

/* .product-tabs-wrapper: no border top / border bottom */
body.single-product .product-tabs-wrapper {
  border-top: 0;
  border-bottom: 0;
}

/* wishlist heart beside the add-to-cart button (icon only; markup = WoodMart's `.wd-wishlist-btn.wd-style-icon`, moved into the cart form by functions.php) */
body.single-product form.cart .wd-wishlist-btn,
body.single-product .woocommerce-variation-add-to-cart .wd-wishlist-btn {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
}
body.single-product form.cart .wd-wishlist-btn > a,
body.single-product .woocommerce-variation-add-to-cart .wd-wishlist-btn > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;                             /* operator 2026-09-27: no border around the heart */
  border-radius: 14px;
  background: transparent;
  color: #fe7a7b;                        /* heart colour = the product cards' (operator 2026-09-30: one pink for every heart; was #FCA0AB) */
  transition: color .2s, opacity .2s;
}
body.single-product form.cart .wd-wishlist-btn > a:hover,
body.single-product .woocommerce-variation-add-to-cart .wd-wishlist-btn > a:hover { color: #fe7a7b; opacity: .8; }
/* heart glyph 25 px (the 48 px hit area around it stays) */
body.single-product form.cart .wd-wishlist-btn .wd-action-icon,
body.single-product form.cart .wd-wishlist-btn .wd-action-icon::before,
body.single-product .woocommerce-variation-add-to-cart .wd-wishlist-btn .wd-action-icon,
body.single-product .woocommerce-variation-add-to-cart .wd-wishlist-btn .wd-action-icon::before {
  font-size: 25px;
  color: inherit;
}
body.single-product form.cart .wd-wishlist-btn .wd-action-text,
body.single-product .woocommerce-variation-add-to-cart .wd-wishlist-btn .wd-action-text { display: none; }

/* ---- quantity box + add-to-cart button as rounded shapes (operator 2026-09-27, reference ~/Downloads/addtocart.png: white rounded quantity box with a soft border,
   warm-brown − / + and a centred number; big fully-rounded yellow button with a cart icon before the label). Row height 48 px. ---- */
body.single-product form.cart .quantity {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 48px;
  width: 104px;
  padding: 0 4px;
  border: 1px solid var(--jd-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
body.single-product form.cart .quantity :is(.minus, .plus) {
  flex: 0 0 32px;
  width: 32px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--jd-text);
  font-size: 0;                          /* the "-" / "+" text is replaced by drawn bars (equal length + weight, like the reference) */
  line-height: 1;
  letter-spacing: 0;
  box-shadow: none;
  position: relative;
}
body.single-product form.cart .quantity :is(.minus, .plus)::before,
body.single-product form.cart .quantity .plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 1px;
  background: currentColor;
}
body.single-product form.cart .quantity .plus::after { transform: rotate(90deg); }
body.single-product form.cart .quantity :is(.minus, .plus):hover { color: var(--jd-accent); background: transparent; }
body.single-product form.cart .quantity input.qty {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--jd-text-title);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
body.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
body.single-product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

body.single-product form.cart .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 156px;                      /* small basis: qty (104) + button + heart (48) + 2 gaps stay on one row from ~360 px wide */
  min-width: 0;
  max-width: 340px;
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  background-color: #FBE08A;            /* the button's existing yellow (≈ the reference's #FFE085) */
  color: var(--jd-ink-900);
  font-size: 15px;
  font-weight: 700;
  transition: background-color .2s, transform .12s;
}
body.single-product form.cart .single_add_to_cart_button::before {
  content: "\f123";                    /* WoodMart icon font "cart" glyph — the one the product-card add-to-cart buttons use */
  font-family: "woodmart-font";
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
}
body.single-product form.cart .single_add_to_cart_button:hover { background-color: #F7D671; }
body.single-product form.cart .single_add_to_cart_button:active { transform: scale(.98); }

/* ---- product page, operator 2026-09-29 ----
   1. the active tab of the description's own tabs (.jd-tabs, printed by the product content) is black
   2. phones / tablets: WoodMart shows the product tabs as an accordion with ONE item ("描述"); its upper line and its title row are
      not shown — the description's own tabs stand directly there. The item's content is kept open, since the title that would
      open it is gone. */
body .jd-tabs__tab.is-active { color: #000; }
body.single-product .wd-accordion:where(.wd-style-default) > .wd-nav-wrapper + .wd-accordion-item { border-top: 0; }
body.single-product .woocommerce-tabs.tabs-layout-accordion > .wd-accordion-item > .wd-accordion-title { display: none; }
body.single-product .woocommerce-tabs.tabs-layout-accordion > .wd-accordion-item > .wd-accordion-content { display: block !important; }

/* space under the product page (operator 2026-09-30: 「single-product-page 加上 padding-bottom: 70px」; the site-wide 70px of the same day was taken back) */
.single-product-page { padding-bottom: 70px; }

/* points line above the quantity box (「將目前購物車結帳即可獲得 N 狗狗幣」, WooCommerce Points and Rewards), operator 2026-09-30:
   12px, #7EC7C8. Only this line - the other children of .woocommerce-variation-add-to-cart (date picker, quantity, button, wishlist) keep their look. */
body .woocommerce-variation-add-to-cart > p.points {
  font-size: 12px;
  color: #7EC7C8;
}

/* related products = a band like the home page's 熱銷商品 / Best Sellers (operator 2026-09-30: 「相關商品區塊底色改成跟首頁"Best Sellers"區塊
   一樣的底色和上方不規則弧形」): full window width, ground #fcfaf7, the .paper-band outline (assets/css/paper-edge.css: filter #paper-band,
   #paper-band-mobile on phones) on its ::before layer; the products keep the site container's width. */
body.single-product .related-and-upsells {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  margin-block: 30px 0;                     /* >= half the wave depth, as .paper-band */
  padding-block: 72px;
  padding-inline: max(15px, calc((100vw - 1222px) / 2 + 15px));
  overflow-x: clip;                         /* cuts the band's left / right ends only */
}
body.single-product .related-and-upsells::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -240px;                           /* runs on under the footer (operator 2026-09-30: no white strip - the band meets the footer's pink curve):
                                               covers the 70px page padding + 40px content padding + 20px footer margin, and the band's lower wave
                                               lies under the footer, which paints over it */
  left: -80px;
  right: -80px;
  z-index: -1;
  pointer-events: none;
  background: #fcfaf7;
  filter: url(#paper-band);
}
@media (max-width: 767px) {
  body.single-product .related-and-upsells { padding-block: 48px; }
  body.single-product .related-and-upsells::before { filter: url(#paper-band-mobile); }
}

/* the price that WooCommerce repeats under the variation form once a variation is chosen (operator 2026-09-30: 「重複兩次價格 … 把下面的
   woocommerce-variation-price 刪除」) - the price under the title stays. Effect: on a product with a price RANGE the chosen size's own price
   is no longer shown under the form. */
body.single-product .woocommerce-variation-price { display: none !important; }

/* desktop: the two columns (gallery | summary) stay in view while the page scrolls, like the sticky header (operator 2026-09-30:
   「桌機版的"entry-summary"欄位設定成類似sticky header的用法」). Both columns are sticky and aligned to the top of their grid row: the
   row is as tall as the taller column, so the shorter one (usually the gallery on a long product) stays pinned under the sticky header
   (60px) while the taller one scrolls normally; on a product whose gallery is taller, the summary is the one that stays. */
@media (min-width: 1025px) {
  body.single-product .product-image-summary-inner > :is(.product-images, .entry-summary) {
    position: sticky;
    top: 90px;
    align-self: start;
  }
}