/* ============================================================
   FOTOFILE Storefront V2 — Single Product UX Module (M3)
   ------------------------------------------------------------
   Scope:   single product detail page only (body.single-product).
   Intent:  a familiar e-commerce product-detail layout
            (Shopee/Lazada-inspired, FOTOFILE-owned) — readable
            gallery, clear title hierarchy, prominent real price,
            real stock state, and an obvious add-to-cart area.
   Safety:  CSS-only enhancement over WooCommerce's DEFAULT
            single-product markup. No template override, no markup
            change, no commerce-logic change. Prices, sale prices,
            stock and variations are whatever WooCommerce renders.
            Nothing here fakes sold counts, ratings, coupons,
            flash-sales or free-shipping.
   Tokens:  reuses the theme.css design tokens (var(--fotofile-v2-*)).
   ============================================================ */

/* ---- Shared surfaces / rhythm (mobile-first base) ---- */
.single-product div.product {
  color: var(--fotofile-v2-ink, #222);
}

/* Title hierarchy: the product name is the clear page anchor. */
.single-product div.product .product_title.entry-title,
.single-product div.product .product_title {
  font-size: clamp(20px, 4.4vw, 28px);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fotofile-v2-ink, #222);
  margin: 0 0 12px;
}

/* Price prominence — driven purely by WooCommerce's .price markup.
   <del> = regular price, <ins> = sale price (real Woo data only). */
.single-product div.product .summary .price,
.single-product div.product .summary p.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 0 0 14px;
  color: var(--fotofile-v2-price, #ee4d2d);
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 700;
  line-height: 1.15;
}

.single-product div.product .summary .price ins,
.single-product div.product .summary .price ins .amount {
  text-decoration: none;
  color: var(--fotofile-v2-price, #ee4d2d);
  font-weight: 700;
}

.single-product div.product .summary .price del,
.single-product div.product .summary .price del .amount {
  color: var(--fotofile-v2-ink-soft, #8a8a8a);
  font-weight: 400;
  font-size: 0.56em;
  text-decoration: line-through;
}

/* Real stock state, rendered as a quiet status pill. */
.single-product div.product .summary .stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.single-product div.product .summary .stock.in-stock {
  color: #1a7f37;
  background: rgba(26, 127, 55, 0.1);
}

.single-product div.product .summary .stock.out-of-stock,
.single-product div.product .summary .stock.available-on-backorder {
  color: #b42318;
  background: rgba(180, 35, 24, 0.09);
}

.single-product div.product .summary .woocommerce-product-details__short-description {
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* ---- Add-to-cart area: prominent, but markup/behaviour untouched ---- */
.single-product div.product .summary form.cart {
  margin: 4px 0 18px;
  padding: 16px;
  border: 1px solid var(--fotofile-v2-line, #ececec);
  border-radius: var(--fotofile-v2-radius, 12px);
  background: var(--fotofile-v2-surface, #fff);
  box-shadow: var(--fotofile-v2-shadow-soft, 0 1px 1px rgba(17, 17, 17, 0.04), 0 6px 16px rgba(17, 17, 17, 0.06));
}

.single-product div.product .summary form.cart .quantity input.qty {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--fotofile-v2-line, #ececec);
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  font-size: 15px;
  text-align: center;
}

.single-product div.product .summary .single_add_to_cart_button,
.single-product div.product .summary form.cart button.single_add_to_cart_button {
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  background: var(--fotofile-v2-accent, #ee4d2d);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.single-product div.product .summary .single_add_to_cart_button:hover,
.single-product div.product .summary .single_add_to_cart_button:focus-visible {
  filter: brightness(0.95);
}

.single-product div.product .summary .single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--fotofile-v2-accent, #ee4d2d);
  outline-offset: 2px;
}

/* ---- Variation UI: readability only, same Woo markup/behaviour ---- */
.single-product div.product .variations {
  width: 100%;
  margin: 0 0 14px;
  border-collapse: collapse;
}

.single-product div.product .variations th.label {
  padding: 8px 12px 8px 0;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--fotofile-v2-muted, #6b6b6b);
  vertical-align: middle;
}

.single-product div.product .variations td.value {
  padding: 6px 0;
}

.single-product div.product .variations td.value select {
  min-height: 44px;
  width: 100%;
  max-width: 320px;
  padding: 8px 12px;
  border: 1px solid var(--fotofile-v2-line, #ececec);
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  font-size: 15px;
  background: var(--fotofile-v2-surface, #fff);
}

.single-product div.product .woocommerce-variation-price .price {
  margin: 8px 0;
}

.single-product div.product .reset_variations {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  color: var(--fotofile-v2-muted, #6b6b6b);
}

/* ---- Product meta (SKU / categories / tags from Woo) ---- */
.single-product div.product .product_meta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--fotofile-v2-line, #ececec);
  font-size: 13px;
  color: var(--fotofile-v2-muted, #6b6b6b);
}

/* ---- Gallery: clean, readable image area ---- */
.single-product div.product .woocommerce-product-gallery {
  position: relative;
  margin: 0 0 18px;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  border-radius: var(--fotofile-v2-radius-lg, 14px);
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
  width: 64px;
  margin: 0;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
  border: 1px solid var(--fotofile-v2-line, #ececec);
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
  opacity: 1;
  border-color: var(--fotofile-v2-accent, #ee4d2d);
}

/* Sale badge — styling only; visibility is Woo's onsale decision. */
.single-product div.product span.onsale {
  background: var(--fotofile-v2-sale, #ee4d2d);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- Tabs (description / additional info / reviews) ---- */
.single-product div.product .woocommerce-tabs ul.tabs {
  margin-bottom: 0;
}

.single-product div.product .woocommerce-tabs .panel {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fotofile-v2-ink, #222);
}

/* ---- Related / up-sell sections: spacing only, grid left to theme.css ---- */
.single-product div.product .related,
.single-product div.product .upsells {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--fotofile-v2-line, #ececec);
}

.single-product div.product .related > h2,
.single-product div.product .upsells > h2 {
  font-size: clamp(18px, 3.4vw, 22px);
  font-weight: 600;
  margin: 0 0 16px;
}

/* ============================================================
   Desktop: two-column product detail with a sticky summary.
   Neutralises WooCommerce's default float/width on the gallery
   and summary, then lays them out with CSS grid. Tabs/related
   span the full width. Pure CSS — no JS needed on desktop.
   ============================================================ */
/* P2 note: the block below intentionally avoids CSS grid/sticky summary. */
@media (min-width: 783px) {
  .single-product div.product {
    display: flow-root;
    max-width: 1180px;
    margin-inline: auto;
  }

  .single-product div.product > .woocommerce-product-gallery,
  .single-product div.product > .images {
    max-width: min(100%, 640px);
  }

  .single-product div.product > .summary,
  .single-product div.product > .entry-summary {
    max-width: min(100%, 600px);
  }

  .single-product div.product > .woocommerce-tabs,
  .single-product div.product > .related,
  .single-product div.product > .upsells,
  .single-product div.product > .woocommerce-product-rating,
  .single-product div.product > .product_meta {
    clear: both;
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 783px) and (max-width: 1023px) {
  .single-product div.product > .woocommerce-product-gallery,
  .single-product div.product > .images,
  .single-product div.product > .summary,
  .single-product div.product > .entry-summary {
    float: none;
    width: auto;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   Mobile (<=782px): single column, thumb-friendly targets, and
   room reserved at the bottom so the progressive sticky buy bar
   and the app bottom-nav never cover product content.
   ============================================================ */
@media (max-width: 782px) {
  .single-product div.product {
    display: block;
  }

  .single-product div.product .summary,
  .single-product div.product .entry-summary {
    float: none;
    width: auto;
  }

  /* Larger tap targets on touch. */
  .single-product div.product .summary .single_add_to_cart_button {
    width: 100%;
    min-height: 50px;
  }

  .single-product div.product .summary .quantity input.qty {
    min-height: 46px;
  }

  /* Reserve space for the JS buy bar (overrides theme.css body padding,
     scoped to single-product only). */
  body.single-product {
    padding-bottom: calc(var(--fotofile-v2-bottom-nav, 62px) + 70px + env(safe-area-inset-bottom)) !important;
  }
}

/* ============================================================
   Progressive sticky buy bar (built by single-product.js).
   Hidden by default and only ever exists when JS runs; shown on
   mobile when the real add-to-cart scrolls out of view. Its CTA
   scrolls to and focuses the REAL add-to-cart button — it never
   submits the cart or changes any WooCommerce behaviour.
   ============================================================ */
.fotofile-v2-buybar {
  display: none;
}

@media (max-width: 782px) {
  body.single-product .fotofile-v2-buybar {
    display: none;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--fotofile-v2-bottom-nav, 62px) + env(safe-area-inset-bottom));
    z-index: 1002;
    padding: 10px 14px;
    background: var(--fotofile-v2-surface, #fff);
    border-top: 1px solid var(--fotofile-v2-line, #ececec);
    box-shadow: 0 -4px 16px rgba(17, 17, 17, 0.08);
    opacity: 0;
    transform: translateY(115%);
    transition: transform 0.22s ease;
    visibility: hidden;
    /* While hidden (slid off-screen) the bar must not capture pointer input;
       JS also makes its CTA non-focusable/inert. */
    pointer-events: none;
  }

  body.single-product .fotofile-v2-buybar.is-visible,
  body.single-product .fotofile-v2-buybar[aria-hidden="false"] {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }

  .fotofile-v2-buybar__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
  }

  .fotofile-v2-buybar__title {
    font-size: 12.5px;
    color: var(--fotofile-v2-muted, #6b6b6b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fotofile-v2-buybar__price {
    font-size: 17px;
    font-weight: 700;
    color: var(--fotofile-v2-price, #ee4d2d);
    line-height: 1.2;
  }

  .fotofile-v2-buybar__price del {
    display: none;
  }

  .fotofile-v2-buybar__cta {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 11px 22px;
    border: 0;
    border-radius: var(--fotofile-v2-radius-sm, 9px);
    background: var(--fotofile-v2-accent, #ee4d2d);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }

  .fotofile-v2-buybar__cta:focus-visible {
    outline: 2px solid var(--fotofile-v2-ink, #222);
    outline-offset: 2px;
  }
}

/* ============================================================
   M10 Slice-1D Conservative Single Product Polish
   ------------------------------------------------------------
   Conservative CSS-only polish over the existing native
   WooCommerce flow. No structural takeover of div.product.
   ============================================================ */
body.single-product {
  background: #f6f7f9;
}

body.single-product .site-main,
body.single-product .content-area,
body.single-product main {
  background: transparent;
}

body.single-product div.product {
  background: var(--fotofile-v2-surface, #fff);
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.05);
}

body.single-product div.product .summary,
body.single-product div.product .entry-summary {
  color: var(--fotofile-v2-ink, #222);
}

body.single-product div.product .summary > *,
body.single-product div.product .entry-summary > * {
  max-width: 680px;
}

body.single-product div.product .product_title.entry-title,
body.single-product div.product .product_title {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

body.single-product div.product .summary .price,
body.single-product div.product .summary p.price {
  padding: 8px 0 4px;
}

body.single-product div.product .summary .price del,
body.single-product div.product .summary .price del .amount {
  opacity: 0.78;
}

body.single-product div.product .summary .woocommerce-product-details__short-description {
  padding: 12px 0;
  border-top: 1px solid rgba(17, 17, 17, 0.06);
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}

body.single-product div.product .summary form.cart {
  margin-top: 14px;
  border-color: rgba(17, 17, 17, 0.09);
  box-shadow: 0 8px 22px rgba(17, 17, 17, 0.06);
}

body.single-product div.product .summary form.cart .quantity {
  margin-right: 10px;
}

body.single-product div.product .summary form.cart .quantity input.qty {
  border-color: rgba(17, 17, 17, 0.14);
  background: #fff;
}

body.single-product div.product .summary .single_add_to_cart_button,
body.single-product div.product .summary form.cart button.single_add_to_cart_button {
  box-shadow: 0 8px 18px rgba(238, 77, 45, 0.2);
}

body.single-product div.product .variations {
  background: #fff;
}

body.single-product div.product .variations th.label {
  color: var(--fotofile-v2-ink, #222);
}

body.single-product div.product .variations td.value select {
  border-color: rgba(17, 17, 17, 0.14);
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.03);
}

body.single-product div.product .woocommerce-variation {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(17, 17, 17, 0.06);
}

body.single-product div.product .product_meta {
  line-height: 1.7;
}

body.single-product div.product .product_meta a {
  color: var(--fotofile-v2-ink, #222);
  text-decoration: none;
}

body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  background: #fff;
  border-radius: 14px;
}

body.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
  background: #fff;
  border-color: rgba(17, 17, 17, 0.1);
}

body.single-product div.product span.onsale {
  box-shadow: 0 8px 18px rgba(238, 77, 45, 0.22);
}

body.single-product div.product .woocommerce-tabs {
  margin-top: 24px;
}

body.single-product div.product .woocommerce-tabs ul.tabs {
  border-bottom-color: rgba(17, 17, 17, 0.08);
}

body.single-product div.product .woocommerce-tabs ul.tabs li a {
  color: var(--fotofile-v2-ink, #222);
  font-weight: 600;
}

body.single-product div.product .woocommerce-tabs .panel {
  border-color: rgba(17, 17, 17, 0.08);
  line-height: 1.75;
}

body.single-product div.product .related,
body.single-product div.product .upsells {
  margin-top: 28px;
}

body.single-product div.product .related ul.products li.product,
body.single-product div.product .upsells ul.products li.product {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.04);
}

body.single-product div.product .related ul.products li.product img,
body.single-product div.product .upsells ul.products li.product img {
  border-radius: 10px;
  background: #fff;
}

body.single-product div.product .related ul.products li.product .woocommerce-loop-product__title,
body.single-product div.product .upsells ul.products li.product .woocommerce-loop-product__title {
  color: var(--fotofile-v2-ink, #222);
  line-height: 1.4;
}

body.single-product div.product .related ul.products li.product .price,
body.single-product div.product .upsells ul.products li.product .price {
  color: var(--fotofile-v2-price, #ee4d2d);
  font-weight: 700;
}

@media (min-width: 783px) {
  body.single-product div.product {
    padding: 24px;
  }

  body.single-product div.product .summary,
  body.single-product div.product .entry-summary {
    padding: 4px 0 0;
  }
}

@media (max-width: 782px) {
  body.single-product {
    background: #f7f8fa;
  }

  body.single-product div.product {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  body.single-product div.product .summary,
  body.single-product div.product .entry-summary {
    padding: 0 2px;
  }

  body.single-product div.product .summary form.cart {
    padding: 14px;
  }
}

/* ============================================================
   M10 Slice-1F Real Improvement
   ------------------------------------------------------------
   Final CSS-only cosmetic-tolerant pass. Flatten the native
   buy area, strengthen real WooCommerce controls, and normalize
   related/upsell card rhythm without changing product count.
   ============================================================ */
body.single-product div.product {
  border-color: rgba(17, 17, 17, 0.07);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.06);
}

body.single-product div.product .summary,
body.single-product div.product .entry-summary {
  max-width: 680px;
}

body.single-product div.product .product_title.entry-title,
body.single-product div.product .product_title {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom-color: rgba(17, 17, 17, 0.1);
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0;
}

body.single-product div.product .summary .price,
body.single-product div.product .summary p.price {
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(238, 77, 45, 0.18);
  color: var(--fotofile-v2-price, #ee4d2d);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
}

body.single-product div.product .summary .price del,
body.single-product div.product .summary .price del .amount {
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.62em;
  font-weight: 500;
}

body.single-product div.product .summary .price ins {
  text-decoration: none;
}

body.single-product div.product .summary .woocommerce-product-details__short-description {
  margin: 0 0 18px;
  padding: 12px 0 14px;
  border-top: 0;
  border-bottom-color: rgba(17, 17, 17, 0.08);
  color: #444;
  line-height: 1.72;
}

body.single-product div.product .summary form.cart {
  margin-top: 18px;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  background: transparent;
  box-shadow: none;
}

body.single-product div.product .summary form.cart .quantity {
  margin: 0 12px 12px 0;
}

body.single-product div.product .summary form.cart .quantity input.qty {
  min-height: 48px;
  border-color: rgba(17, 17, 17, 0.18);
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  font-size: 17px;
  font-weight: 700;
}

body.single-product div.product .summary .single_add_to_cart_button,
body.single-product div.product .summary form.cart button.single_add_to_cart_button {
  min-height: 50px;
  min-width: min(100%, 300px);
  padding: 14px 28px;
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  background: var(--fotofile-v2-accent, #ee4d2d);
  box-shadow: 0 10px 22px rgba(238, 77, 45, 0.24);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
}

body.single-product div.product .summary .single_add_to_cart_button:hover,
body.single-product div.product .summary form.cart button.single_add_to_cart_button:hover {
  background: #df3f20;
  box-shadow: 0 12px 26px rgba(238, 77, 45, 0.28);
}

body.single-product div.product .summary .single_add_to_cart_button:focus-visible,
body.single-product div.product .summary form.cart button.single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--fotofile-v2-ink, #222);
  outline-offset: 3px;
}

body.single-product div.product .variations {
  margin-bottom: 14px;
  border-color: rgba(17, 17, 17, 0.08);
  background: transparent;
}

body.single-product div.product .variations td.value select {
  min-height: 46px;
  border-color: rgba(17, 17, 17, 0.18);
  font-weight: 600;
}

body.single-product div.product .product_meta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  color: var(--fotofile-v2-muted, #6b6b6b);
}

body.single-product div.product .woocommerce-tabs {
  margin-top: 30px;
}

body.single-product div.product .woocommerce-tabs .panel {
  border-color: rgba(17, 17, 17, 0.07);
  box-shadow: none;
}

body.single-product div.product .related,
body.single-product div.product .upsells {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

body.single-product div.product .related > h2,
body.single-product div.product .upsells > h2 {
  margin-bottom: 14px;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  letter-spacing: 0;
}

body.single-product div.product .related ul.products,
body.single-product div.product .upsells ul.products {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 2px 2px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

body.single-product div.product .related ul.products li.product,
body.single-product div.product .upsells ul.products li.product {
  flex: 0 0 clamp(172px, 19vw, 232px);
  min-width: 172px;
  margin: 0;
  scroll-snap-align: start;
  border-color: rgba(17, 17, 17, 0.09);
  box-shadow: 0 7px 18px rgba(17, 17, 17, 0.05);
}

body.single-product div.product .related ul.products li.product .woocommerce-loop-product__title,
body.single-product div.product .upsells ul.products li.product .woocommerce-loop-product__title {
  min-height: 2.8em;
  font-weight: 650;
}

body.single-product div.product .related ul.products li.product .button,
body.single-product div.product .upsells ul.products li.product .button {
  min-height: 40px;
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  font-weight: 700;
}

@media (min-width: 1024px) {
  body.single-product div.product {
    padding: 28px;
  }

  body.single-product div.product .summary,
  body.single-product div.product .entry-summary {
    padding-top: 2px;
  }
}

@media (max-width: 782px) {
  body.single-product div.product {
    box-shadow: none;
  }

  body.single-product div.product .product_title.entry-title,
  body.single-product div.product .product_title {
    font-size: 22px;
  }

  body.single-product div.product .summary .price,
  body.single-product div.product .summary p.price {
    font-size: 30px;
  }

  body.single-product div.product .summary form.cart {
    padding: 16px 0 0;
  }

  body.single-product div.product .summary .single_add_to_cart_button,
  body.single-product div.product .summary form.cart button.single_add_to_cart_button {
    width: 100%;
    min-width: 0;
  }

  body.single-product div.product .related ul.products li.product,
  body.single-product div.product .upsells ul.products li.product {
    flex-basis: clamp(152px, 58vw, 210px);
    min-width: 152px;
  }
}

/* Respect reduced-motion: no slide/scroll easing. */
@media (prefers-reduced-motion: reduce) {
  body.single-product .fotofile-v2-buybar {
    transition: none;
  }

  .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img,
  .single-product div.product .summary .single_add_to_cart_button {
    transition: none;
  }
}

/* ============================================================
   M11-P2R-V2 Single Product Native Visual Polish
   ------------------------------------------------------------
   Consolidated CSS-only polish of the native WooCommerce /
   Theme V2 single-product page (Elementor Single retired). Three
   tightly-scoped areas, all under body.single-product div.product:
     (A) Related / Up-sell products -> horizontal app-like RAIL on
         ALL viewports (desktop ~5 cards + horizontal scroll, no
         wrap / no second row; mobile ~1.5-2 cards + scroll-snap).
     (B) Gallery thumbnail nav      -> compact single-row rail so
         the 18 thumbnails stop stacking into ~5 rows.
     (C) Tabs (description/info/     -> cleaner underline tabs +
         reviews)                       padded panel card (spacing).
   Safety: no template override, no woocommerce/ folder, no query
   change, no product hidden, no fabricated rating/sold/voucher/
   countdown/stock/wishlist/compare/Buy-Now, no content: data, no
   url(), no position:fixed. Does NOT restructure the main
   div.product / gallery figure / summary (ADR-0029); grid/flex is
   used only inside .related/.upsells ul.products (ADR-0030) and on
   the gallery thumbnail nav + tab chrome. WooCommerce gallery
   flexslider behaviour, add-to-cart/read-more behaviour, product
   count, prices, stock and SEO/schema are all unchanged. Fully
   scoped to single-product; cannot reach archive/search cards
   (those are body.archive / .woocommerce-page, not single-product).
   ============================================================ */

/* ---------- (A) Related / Up-sell: horizontal rail ---------- */

/* Keep the rail from ever widening <body>; the ul owns the scroll. */
body.single-product div.product .related,
body.single-product div.product .upsells {
  max-width: 100%;
}

/* Rail container: single non-wrapping horizontal row, scroll-snap. */
body.single-product div.product .related ul.products,
body.single-product div.product .upsells ul.products {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0;
  padding: 2px 2px 16px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Card = equal-height flex column; mobile shows ~1.5-2 cards. */
body.single-product div.product .related ul.products li.product,
body.single-product div.product .upsells ul.products li.product {
  display: flex;
  flex: 0 0 clamp(150px, 60vw, 210px);
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 10px 10px 12px;
  scroll-snap-align: start;
}

/* Inner link grows so the price/CTA line up across cards. */
body.single-product div.product .related ul.products li.product > a.woocommerce-LoopProduct-link,
body.single-product div.product .upsells ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
}

/* Uniform image area — contain, never crop product photos. */
body.single-product div.product .related ul.products li.product img,
body.single-product div.product .upsells ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  margin: 0 0 8px;
}

/* Two-line title reserve keeps every card's title block equal height. */
body.single-product div.product .related ul.products li.product .woocommerce-loop-product__title,
body.single-product div.product .upsells ul.products li.product .woocommerce-loop-product__title {
  display: block;
  min-height: 2.6em;
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.3;
}

/* Price sits at the bottom of the link area -> aligns across cards. */
body.single-product div.product .related ul.products li.product .price,
body.single-product div.product .upsells ul.products li.product .price {
  margin-top: auto;
  padding-top: 4px;
}

/* CTA (real add-to-cart / read-more) pinned to the card bottom. */
body.single-product div.product .related ul.products li.product > .button,
body.single-product div.product .related ul.products li.product > .added_to_cart,
body.single-product div.product .upsells ul.products li.product > .button,
body.single-product div.product .upsells ul.products li.product > .added_to_cart {
  margin: 10px 0 0;
  width: 100%;
  text-align: center;
}

/* Desktop: KEEP the rail (no grid, no wrap) but size cards so ~5 are
   visible per viewport; relax snap to proximity for mouse/trackpad. */
@media (min-width: 1024px) {
  body.single-product div.product .related ul.products,
  body.single-product div.product .upsells ul.products {
    gap: 16px;
    scroll-snap-type: x proximity;
  }

  body.single-product div.product .related ul.products li.product,
  body.single-product div.product .upsells ul.products li.product {
    flex: 0 0 clamp(180px, 17vw, 210px);
  }
}

/* ---------- (B) Gallery thumbnail nav: compact single-row rail ---------- */
/* WooCommerce core floats --columns-4 thumbnails at 25% width, so 18
   images wrap into ~5 rows and stretch the page. Override the flexslider
   thumbnail NAV only into one horizontal, height-capped rail. The main
   image, zoom, lightbox, and flexslider image-switching are untouched. */
body.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 2px 2px 8px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

body.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 64px;
  width: 64px;
  margin: 0;
}

body.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}

/* ---------- (C) Tabs: cleaner underline tabs + padded panel card ---------- */
body.single-product div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 14px;
  padding: 0 0 2px;
  list-style: none;
}

/* Remove WooCommerce's decorative tab-corner pseudo borders only
   (tab chrome — not product content, nothing informational hidden). */
body.single-product div.product .woocommerce-tabs ul.tabs::before,
body.single-product div.product .woocommerce-tabs ul.tabs li::before,
body.single-product div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

body.single-product div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.single-product div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 10px 2px;
  border-bottom: 2px solid transparent;
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-weight: 600;
}

body.single-product div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--fotofile-v2-ink, #222);
  border-bottom-color: var(--fotofile-v2-accent, #ee4d2d);
}

body.single-product div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 12px;
  background: var(--fotofile-v2-surface, #fff);
}

/* Small screens: tabs become a scrollable row and never overflow. */
@media (max-width: 782px) {
  body.single-product div.product .woocommerce-tabs ul.tabs {
    gap: 4px 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  body.single-product div.product .woocommerce-tabs ul.tabs li a {
    white-space: nowrap;
  }

  body.single-product div.product .woocommerce-tabs .panel {
    padding: 14px;
  }
}

/* ============================================================
   M11-P2S-1 Summary meta reposition + safe share (styling only)
   ------------------------------------------------------------
   WooCommerce's OWN product meta is relocated under the title by
   inc/product-summary-marketplace.php (hook priority, no template
   override). This styles that real meta as a compact marketplace
   chip line + styles the real-URL Share row. No fabricated data,
   no guarantee/shipping/buy-now/wishlist. Scoped to the single-
   product summary; no structural grid/flex takeover of .summary.
   ============================================================ */
body.single-product div.product .summary .product_meta {
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-top: 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  font-size: 13px;
  line-height: 1.7;
  color: var(--fotofile-v2-muted, #6b6b6b);
}

body.single-product div.product .summary .product_meta > span {
  display: inline-block;
  margin: 0 6px 4px 0;
}

body.single-product div.product .summary .product_meta a {
  color: var(--fotofile-v2-ink, #222);
  text-decoration: none;
}

body.single-product div.product .summary .product_meta a:hover,
body.single-product div.product .summary .product_meta a:focus-visible {
  text-decoration: underline;
}

/* Safe share row — real outbound links only, no counts/claims. */
body.single-product div.product .summary .fotofile-v2-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
}

body.single-product div.product .summary .fotofile-v2-share__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fotofile-v2-muted, #6b6b6b);
}

body.single-product div.product .summary .fotofile-v2-share__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--fotofile-v2-line, #ececec);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fotofile-v2-ink, #222);
  text-decoration: none;
  background: var(--fotofile-v2-surface, #fff);
  transition: border-color 0.15s ease, color 0.15s ease;
}

body.single-product div.product .summary .fotofile-v2-share__link:hover,
body.single-product div.product .summary .fotofile-v2-share__link:focus-visible {
  border-color: var(--fotofile-v2-accent, #ee4d2d);
  color: var(--fotofile-v2-accent, #ee4d2d);
}

/* ============================================================
   M11-P2S-2 Trust rows + Buy Now + wishlist (styling only)
   ------------------------------------------------------------
   Real static FOTOFILE facts and real actions rendered by
   inc/product-trust-actions.php. No CSS content, no fabricated
   data, no urgency/countdown. Scoped to the single-product
   summary; no structural takeover of .summary.
   ============================================================ */
body.single-product div.product .summary .fotofile-v2-assurance {
  margin: 14px 0;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 12px;
  background: var(--fotofile-v2-surface, #fff);
  overflow: hidden;
}

body.single-product div.product .summary .fotofile-v2-assurance__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
}

body.single-product div.product .summary .fotofile-v2-assurance__row + .fotofile-v2-assurance__row {
  border-top: 1px solid rgba(17, 17, 17, 0.06);
}

body.single-product div.product .summary .fotofile-v2-assurance__key {
  flex: 0 0 auto;
  min-width: 104px;
  font-weight: 700;
  color: var(--fotofile-v2-muted, #6b6b6b);
}

body.single-product div.product .summary .fotofile-v2-assurance__row--guarantee .fotofile-v2-assurance__val {
  color: #1a7f37;
  font-weight: 600;
}

body.single-product div.product .summary .fotofile-v2-assurance__row--shipping .fotofile-v2-assurance__val {
  color: var(--fotofile-v2-ink, #222);
  font-weight: 600;
}

/* Buy Now: real secondary action beside the native add-to-cart. Behaviour is
   real (native add-to-cart + checkout redirect); styling only differentiates. */
body.single-product div.product .summary form.cart .fotofile-v2-buy-now {
  min-height: 50px;
  width: 100%;
  margin: 10px 0 0;
  padding: 12px 26px;
  border: 2px solid var(--fotofile-v2-accent, #ee4d2d);
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  background: transparent;
  color: var(--fotofile-v2-accent, #ee4d2d);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

body.single-product div.product .summary form.cart .fotofile-v2-buy-now:hover,
body.single-product div.product .summary form.cart .fotofile-v2-buy-now:focus-visible {
  background: var(--fotofile-v2-accent, #ee4d2d);
  color: #fff;
}

body.single-product div.product .summary form.cart .fotofile-v2-buy-now:focus-visible {
  outline: 2px solid var(--fotofile-v2-ink, #222);
  outline-offset: 2px;
}

body.single-product div.product .summary .fotofile-v2-wishlist {
  margin: 12px 0 0;
}

@media (min-width: 783px) {
  body.single-product div.product .summary form.cart .fotofile-v2-buy-now {
    width: auto;
    min-width: 200px;
    margin: 0 0 0 10px;
  }
}

/* ============================================================
   M11-P3 Product family sibling selector (styling only)
   ------------------------------------------------------------
   Chips rendered by inc/product-family.php from REAL sibling
   products sharing a private product_family term. Navigation
   only (each chip is a real product link / the active product).
   No CSS content, no fabricated options. Scoped to the single-
   product summary; no structural takeover of .summary.
   ============================================================ */
body.single-product div.product .summary .fotofile-v2-family {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

body.single-product div.product .summary .fotofile-v2-family__option {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid var(--fotofile-v2-line, #ececec);
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  background: var(--fotofile-v2-surface, #fff);
  color: var(--fotofile-v2-ink, #222);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

body.single-product div.product .summary a.fotofile-v2-family__option:hover,
body.single-product div.product .summary a.fotofile-v2-family__option:focus-visible {
  border-color: var(--fotofile-v2-accent, #ee4d2d);
  color: var(--fotofile-v2-accent, #ee4d2d);
}

body.single-product div.product .summary .fotofile-v2-family__option.is-active {
  border-color: var(--fotofile-v2-accent, #ee4d2d);
  background: var(--fotofile-v2-accent, #ee4d2d);
  color: #fff;
  cursor: default;
}

/* ============================================================
   M11-P3-FIX4 CTA band — CommerceKit-aware marketplace row
   ------------------------------------------------------------
   The add-to-cart form is restructured by the CommerceKit (cgkit)
   sticky-ATC plugin: quantity + add-to-cart live inside
   .commercekit-sticky-atc-intersector, and Buy Now is now rendered
   INSIDE that same container (hook moved to
   woocommerce_after_add_to_cart_quantity in inc/product-trust-
   actions.php). This flexes that container (and native form.cart as
   a fallback) into one row: [quantity] [Buy Now] [Add to cart] --
   quantity compact/fixed-width; Add to cart wider than Buy Now;
   both CTAs stay on one line (nowrap), equal height, side by side.
   We deliberately do NOT use display:contents on the intersector,
   which would remove its box and break cgkit's IntersectionObserver
   / sticky bar. Scoped to simple products only. No content:, no
   template override, no behaviour/text change. Share row stays
   separate below. Mobile <=560px stacks full-width.
   ============================================================ */
body.single-product div.product.product-type-simple .summary form.cart,
body.single-product div.product.product-type-simple .summary form.cart .commercekit-sticky-atc-intersector {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

/* Keep the cgkit form wrapper full width so the band uses the column. */
body.single-product div.product.product-type-simple .summary form.cart .commercekit-pdp-simple-form {
  flex: 1 1 100%;
  min-width: 0;
}

/* Quantity: compact fixed-width control on the left. */
body.single-product div.product.product-type-simple .summary form.cart .quantity {
  flex: 0 0 82px;
  margin: 0;
}

body.single-product div.product.product-type-simple .summary form.cart .quantity input.qty {
  width: 100%;
}

/* Buy Now (middle): narrower CTA, text on one line. */
body.single-product div.product.product-type-simple .summary form.cart .fotofile-v2-buy-now {
  flex: 1 1 auto;
  min-width: 130px;
  width: auto;
  margin: 0;
  white-space: nowrap;
}

/* Add to cart (right): wider than Buy Now, text on one line. */
body.single-product div.product.product-type-simple .summary form.cart .single_add_to_cart_button,
body.single-product div.product.product-type-simple .summary form.cart button.single_add_to_cart_button {
  flex: 1.7 1 auto;
  min-width: 190px;
  width: auto;
  margin: 0;
  white-space: nowrap;
}

/* Mobile: stack quantity + both CTAs full-width in a single column. */
@media (max-width: 560px) {
  body.single-product div.product.product-type-simple .summary form.cart,
  body.single-product div.product.product-type-simple .summary form.cart .commercekit-sticky-atc-intersector {
    flex-direction: column;
    align-items: stretch;
  }

  body.single-product div.product.product-type-simple .summary form.cart .quantity {
    flex: 0 0 auto;
    align-self: flex-start;
  }

  body.single-product div.product.product-type-simple .summary form.cart .fotofile-v2-buy-now,
  body.single-product div.product.product-type-simple .summary form.cart .single_add_to_cart_button,
  body.single-product div.product.product-type-simple .summary form.cart button.single_add_to_cart_button {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ============================================================
   M11-P3-FIX5B Stockless frontend + inquiry CTA (styling only)
   ------------------------------------------------------------
   Human policy: the single product frontend shows NO stock or
   availability status ("มีสินค้า" / exact count / "ไม่มีสินค้า").
   inc/product-trust-actions.php returns an empty availability
   string so WooCommerce prints no .stock element; this hides any
   residual/empty .stock wrapper as belt-and-suspenders. When a
   product cannot be purchased online (not purchasable / out of
   stock) the same file renders ONE outbound "ติดต่อสอบถาม" button
   (.fotofile-v2-inquiry); this styles it as the primary CTA.
   Display only: no content:, no display:contents, no template
   override, no cart/checkout/schema change.
   ============================================================ */
body.single-product div.product .summary .stock {
  display: none;
}

body.single-product div.product .summary .fotofile-v2-inquiry {
  margin: 12px 0 0;
}

body.single-product div.product .summary .fotofile-v2-inquiry__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  width: 100%;
  max-width: 360px;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  background: var(--fotofile-v2-accent, #ee4d2d);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(238, 77, 45, 0.24);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

body.single-product div.product .summary .fotofile-v2-inquiry__btn:hover,
body.single-product div.product .summary .fotofile-v2-inquiry__btn:focus-visible {
  background: #df3f20;
  color: #fff;
  box-shadow: 0 12px 26px rgba(238, 77, 45, 0.28);
}

body.single-product div.product .summary .fotofile-v2-inquiry__btn:focus-visible {
  outline: 2px solid var(--fotofile-v2-ink, #222);
  outline-offset: 3px;
}

/* ============================================================
   M11-P3-FIX5B Above-the-fold compact polish (spacing only)
   ------------------------------------------------------------
   Tightens the vertical rhythm of the native summary so the key
   purchase area (family selector -> price -> CTA band) sits as
   high as reasonably possible at desktop 1366x768. Spacing only:
   no font shrink of the title/price, no content:, no
   display:contents, no structural takeover, gallery/tabs/related
   rail untouched, mobile safe. Appended last so these win over
   the base spacing at equal specificity.
   ============================================================ */
body.single-product div.product .product_title.entry-title,
body.single-product div.product .product_title {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

body.single-product div.product .summary .product_meta {
  margin-top: 10px;
  padding-top: 10px;
}

body.single-product div.product .summary .fotofile-v2-family {
  margin-bottom: 10px;
}

body.single-product div.product .summary .price,
body.single-product div.product .summary p.price {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

body.single-product div.product .summary .woocommerce-product-details__short-description {
  margin-bottom: 12px;
  padding: 8px 0 10px;
}

body.single-product div.product .summary .fotofile-v2-assurance {
  margin: 10px 0;
}

body.single-product div.product .summary form.cart {
  margin-top: 12px;
  padding-top: 12px;
}

body.single-product div.product .summary .fotofile-v2-share {
  margin-top: 10px;
}

body.single-product div.product .summary .fotofile-v2-wishlist {
  margin-top: 10px;
}

@media (min-width: 1024px) {
  /* Desktop 1366x768: squeeze a little more so the CTA band clears
     the fold. Gallery, tabs, and related rail are untouched. */
  body.single-product div.product .summary .product_meta {
    margin-top: 8px;
    padding-top: 8px;
  }

  body.single-product div.product .summary .fotofile-v2-family {
    margin-bottom: 8px;
  }

  body.single-product div.product .summary .fotofile-v2-assurance {
    margin: 8px 0;
  }

  body.single-product div.product .summary .fotofile-v2-assurance__row {
    padding: 8px 14px;
  }

  body.single-product div.product .summary form.cart {
    margin-top: 10px;
    padding-top: 10px;
  }
}

/* ============================================================
   M12 Related products rail - marketplace card polish
   ============================================================ */
body.single-product div.product .related,
body.single-product div.product .upsells {
  max-width: 100%;
  overflow-x: clip;
}

body.single-product div.product .related > h2,
body.single-product div.product .upsells > h2 {
  margin: 0 0 14px;
  color: var(--fotofile-v2-ink, #222);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0;
}

body.single-product div.product .related ul.products,
body.single-product div.product .upsells ul.products {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  max-width: 100%;
  margin: 0;
  padding: 3px 2px 18px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-left: 2px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(238, 77, 45, 0.42) rgba(17, 17, 17, 0.08);
  scrollbar-width: thin;
}

body.single-product div.product .related ul.products::-webkit-scrollbar,
body.single-product div.product .upsells ul.products::-webkit-scrollbar {
  height: 6px;
}

body.single-product div.product .related ul.products::-webkit-scrollbar-track,
body.single-product div.product .upsells ul.products::-webkit-scrollbar-track {
  background: rgba(17, 17, 17, 0.06);
  border-radius: 999px;
}

body.single-product div.product .related ul.products::-webkit-scrollbar-thumb,
body.single-product div.product .upsells ul.products::-webkit-scrollbar-thumb {
  background: rgba(238, 77, 45, 0.42);
  border-radius: 999px;
}

body.single-product div.product .related ul.products li.product,
body.single-product div.product .upsells ul.products li.product {
  display: flex;
  flex: 0 0 clamp(156px, 58vw, 212px);
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: 10px 10px 12px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 12px;
  background: var(--fotofile-v2-surface, #fff);
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.06);
  scroll-snap-align: start;
  transform: translateY(0);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

body.single-product div.product .related ul.products li.product:hover,
body.single-product div.product .related ul.products li.product:focus-within,
body.single-product div.product .upsells ul.products li.product:hover,
body.single-product div.product .upsells ul.products li.product:focus-within {
  border-color: rgba(238, 77, 45, 0.5);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.1);
  transform: translateY(-1px);
}

body.single-product div.product .related ul.products li.product > a.woocommerce-LoopProduct-link,
body.single-product div.product .upsells ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

body.single-product div.product .related ul.products li.product img,
body.single-product div.product .upsells ul.products li.product img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 0 9px;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
}

body.single-product div.product .related ul.products li.product .woocommerce-loop-product__title,
body.single-product div.product .upsells ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  min-height: 2.7em;
  margin: 0 0 6px;
  overflow: hidden;
  color: var(--fotofile-v2-ink, #222);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.single-product div.product .related ul.products li.product .price,
body.single-product div.product .upsells ul.products li.product .price {
  margin-top: auto;
  padding-top: 5px;
  color: var(--fotofile-v2-price, var(--fotofile-v2-accent, #ee4d2d));
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
}

body.single-product div.product .related ul.products li.product > .button,
body.single-product div.product .related ul.products li.product > .added_to_cart,
body.single-product div.product .upsells ul.products li.product > .button,
body.single-product div.product .upsells ul.products li.product > .added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--fotofile-v2-accent, #ee4d2d);
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  background: var(--fotofile-v2-accent, #ee4d2d);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(238, 77, 45, 0.2);
}

body.single-product div.product .related ul.products li.product > .button:hover,
body.single-product div.product .related ul.products li.product > .button:focus-visible,
body.single-product div.product .related ul.products li.product > .added_to_cart:hover,
body.single-product div.product .related ul.products li.product > .added_to_cart:focus-visible,
body.single-product div.product .upsells ul.products li.product > .button:hover,
body.single-product div.product .upsells ul.products li.product > .button:focus-visible,
body.single-product div.product .upsells ul.products li.product > .added_to_cart:hover,
body.single-product div.product .upsells ul.products li.product > .added_to_cart:focus-visible {
  border-color: #df3f20;
  background: #df3f20;
  color: #fff;
  box-shadow: 0 10px 22px rgba(238, 77, 45, 0.26);
}

body.single-product div.product .related ul.products li.product > .button:focus-visible,
body.single-product div.product .related ul.products li.product > .added_to_cart:focus-visible,
body.single-product div.product .upsells ul.products li.product > .button:focus-visible,
body.single-product div.product .upsells ul.products li.product > .added_to_cart:focus-visible {
  outline: 2px solid var(--fotofile-v2-ink, #222);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  body.single-product div.product .related ul.products,
  body.single-product div.product .upsells ul.products {
    gap: 16px;
    scroll-snap-type: x proximity;
  }

  body.single-product div.product .related ul.products li.product,
  body.single-product div.product .upsells ul.products li.product {
    flex-basis: calc((100% - 64px) / 5);
    max-width: 230px;
  }
}

@media (max-width: 420px) {
  body.single-product div.product .related ul.products li.product,
  body.single-product div.product .upsells ul.products li.product {
    flex-basis: clamp(154px, 62vw, 198px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.single-product div.product .related ul.products li.product,
  body.single-product div.product .upsells ul.products li.product {
    transition: none;
  }

  body.single-product div.product .related ul.products li.product:hover,
  body.single-product div.product .related ul.products li.product:focus-within,
  body.single-product div.product .upsells ul.products li.product:hover,
  body.single-product div.product .upsells ul.products li.product:focus-within {
    transform: none;
  }
}

/* ============================================================
   M12-FIX1 Mobile CTA density polish (styling only)
   ------------------------------------------------------------
   Human feedback: the mobile single-product purchase buttons and
   the sticky buy bar read as too tall / bulky vs Shopee/Lazada.
   This trims height, padding, font-weight, and shadow weight of
   the CTA area on mobile ONLY (<=782px) so it feels denser and
   more app-like, while keeping tap targets >=40px (never tiny).
   Behaviour, labels, HTML, hierarchy (solid primary vs outline
   secondary), and native WooCommerce ownership are unchanged.
   Scoped entirely to body.single-product; appended last so it
   wins over the base 50px sizing at equal specificity. No
   content:, no display:contents, no url(), no new position:fixed
   (the existing buy-bar sticky ownership is left intact — only
   its padding/shadow are softened).
   ============================================================ */
@media (max-width: 782px) {
  /* Main purchase actions: add-to-cart / Buy Now / inquiry -> compact. */
  body.single-product div.product .summary .single_add_to_cart_button,
  body.single-product div.product .summary form.cart button.single_add_to_cart_button,
  body.single-product div.product .summary form.cart .fotofile-v2-buy-now,
  body.single-product div.product .summary .fotofile-v2-inquiry__btn {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(238, 77, 45, 0.18);
  }

  /* Outline secondary (Buy Now) stays flat — no accent drop shadow. */
  body.single-product div.product .summary form.cart .fotofile-v2-buy-now {
    box-shadow: none;
  }

  /* Quantity control matches the trimmed button height. */
  body.single-product div.product .summary form.cart .quantity input.qty {
    min-height: 44px;
    font-size: 15px;
  }

  /* Tighter vertical rhythm around the purchase band + inquiry. */
  body.single-product div.product .summary form.cart {
    margin-top: 10px;
    padding-top: 10px;
  }

  body.single-product div.product .summary .fotofile-v2-inquiry {
    margin-top: 10px;
  }

  /* Related/up-sell card CTA stays compact in the same area. */
  body.single-product div.product .related ul.products li.product > .button,
  body.single-product div.product .related ul.products li.product > .added_to_cart,
  body.single-product div.product .upsells ul.products li.product > .button,
  body.single-product div.product .upsells ul.products li.product > .added_to_cart {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 700;
  }

  /* Sticky buy bar: lighter, denser (keeps its existing position:fixed). */
  body.single-product .fotofile-v2-buybar {
    gap: 10px;
    padding: 8px 12px;
    box-shadow: 0 -3px 12px rgba(17, 17, 17, 0.06);
  }

  body.single-product .fotofile-v2-buybar__cta {
    min-height: 42px;
    padding: 9px 18px;
    font-size: 14px;
  }
}

/* ============================================================
   M12-FIX2A Mobile sticky-first purchase bar (styling only)
   ------------------------------------------------------------
   The JS buy bar (assets/js/single-product.js) is now shown from
   page entry on mobile and carries TWO real-action proxies:
   a compact secondary add-to-cart (.fotofile-v2-buybar__cta--cart)
   and a primary Buy Now (.fotofile-v2-buybar__cta--buy), both of
   which forward a click to WooCommerce's own controls. This styles
   that bar Shopee/Lazada-like: price leads on the left, actions on
   the right in one compact row. It only STYLES existing JS-built
   nodes — no new position:fixed (the bar keeps its own sticky
   ownership + bottom-nav offset), no content:, no display:contents,
   no url(), nothing hidden. Mobile-only, scoped to body.single-
   product; appended last so it wins at equal specificity.
   ============================================================ */
@media (max-width: 782px) {
  /* Info column: price-led; truncates before it can push actions off-row. */
  body.single-product .fotofile-v2-buybar__info {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Actions: compact fixed cluster on the right, one row. */
  body.single-product .fotofile-v2-buybar__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 8px;
  }

  /* Shared proxy sizing: compact + tappable, single line. */
  body.single-product .fotofile-v2-buybar__cta {
    min-height: 42px;
    padding: 9px 14px;
    font-size: 14px;
    line-height: 1.1;
    white-space: nowrap;
  }

  /* Secondary add-to-cart: outline (Shopee/Lazada-like). */
  body.single-product .fotofile-v2-buybar__cta--cart {
    background: transparent;
    border: 1px solid var(--fotofile-v2-accent, #ee4d2d);
    color: var(--fotofile-v2-accent, #ee4d2d);
    font-weight: 700;
  }

  /* Primary Buy Now: solid accent, visually dominant. */
  body.single-product .fotofile-v2-buybar__cta--buy {
    background: var(--fotofile-v2-accent, #ee4d2d);
    border: 0;
    color: #fff;
    font-weight: 800;
  }
}

/* Very narrow phones: trim padding so price + both actions stay on one row. */
@media (max-width: 380px) {
  body.single-product .fotofile-v2-buybar {
    gap: 8px;
    padding: 8px 10px;
  }

  body.single-product .fotofile-v2-buybar__actions {
    gap: 6px;
  }

  body.single-product .fotofile-v2-buybar__cta {
    padding: 9px 11px;
  }
}

/* ============================================================
   M12-FIX3 Mobile main summary CTA — one compact row (styling only)
   ------------------------------------------------------------
   The non-sticky purchase band in the summary previously STACKED
   full-width on phones (M11-P3-FIX4's `@media (max-width:560px)`
   column). This restores ONE compact marketplace row on all mobile
   widths and aligns the primary/secondary hierarchy with the FIX2A
   sticky bar:  [quantity]  [ซื้อเลย = primary solid]  [หยิบใส่ตะกร้า
   = compact outline secondary].  DOM order is already
   quantity -> Buy Now -> Add to cart (Buy Now is hooked
   `after_add_to_cart_quantity`), so NO `order:` reordering is used.
   Real native controls keep their real labels and behaviour — only
   size/colour change; the long add-to-cart label stays as text
   (no fake `+`/cart icon, which would need markup). Scoped to
   simple products' `form.cart` only (variable/other product types
   keep native stacking — fail closed). No content:, no
   display:contents, no url(), no new position:fixed, nothing
   hidden. Appended last so it wins at equal specificity.
   ============================================================ */
@media (max-width: 782px) {
  /* One row — overrides the earlier <=560px full-width column stack. */
  body.single-product div.product.product-type-simple .summary form.cart,
  body.single-product div.product.product-type-simple .summary form.cart .commercekit-sticky-atc-intersector {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  body.single-product div.product.product-type-simple .summary form.cart .commercekit-pdp-simple-form {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Quantity: compact fixed control on the left. */
  body.single-product div.product.product-type-simple .summary form.cart .quantity {
    flex: 0 0 60px;
    align-self: auto;
    margin: 0;
  }

  body.single-product div.product.product-type-simple .summary form.cart .quantity input.qty {
    width: 100%;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 15px;
  }

  /* ซื้อเลย = primary (solid accent), grows most. */
  body.single-product div.product.product-type-simple .summary form.cart .fotofile-v2-buy-now {
    flex: 1.3 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 14px;
    white-space: nowrap;
    background: var(--fotofile-v2-accent, #ee4d2d);
    border: 1px solid var(--fotofile-v2-accent, #ee4d2d);
    color: #fff;
  }

  /* หยิบใส่ตะกร้า = compact outline secondary (real label, no fake icon). */
  body.single-product div.product.product-type-simple .summary form.cart .single_add_to_cart_button,
  body.single-product div.product.product-type-simple .summary form.cart button.single_add_to_cart_button {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
    white-space: nowrap;
    background: transparent;
    border: 1px solid var(--fotofile-v2-accent, #ee4d2d);
    color: var(--fotofile-v2-accent, #ee4d2d);
    box-shadow: none;
  }
}

/* Ultra-narrow phones: tighten so all three controls keep one row. */
@media (max-width: 360px) {
  body.single-product div.product.product-type-simple .summary form.cart .quantity {
    flex: 0 0 54px;
  }

  body.single-product div.product.product-type-simple .summary form.cart .fotofile-v2-buy-now,
  body.single-product div.product.product-type-simple .summary form.cart .single_add_to_cart_button,
  body.single-product div.product.product-type-simple .summary form.cart button.single_add_to_cart_button {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 13px;
  }
}

/* ============================================================
   M13-P1 Above-the-fold marketplace polish — mobile (styling only)
   ------------------------------------------------------------
   Denser Shopee/Lazada-like above-the-fold on phones: tighter
   title<->price grouping with a more prominent price, quieter
   product meta, compact trust/assurance rows, and reduced gallery
   bottom whitespace. Spacing/typography only — native title, price,
   meta and trust text/data are unchanged, nothing reordered or
   hidden.

   GALLERY HEIGHT CAP: evaluated and DROPPED
   (BLOCKED_GALLERY_CAP_RISK_DROPPED_TO_SPACING_ONLY). WooCommerce
   flexslider sets the `.flex-viewport` height inline via JS, so a
   CSS max-height on the main image would desync the slider viewport
   (whitespace / paging glitches) and risk zoom/lightbox. We only
   trim the gallery's bottom margin, which does not touch flexslider,
   zoom, lightbox, or the thumbnail rail.

   Mobile-only, scoped to body.single-product div.product. Does NOT
   touch the M12 CTA row (form.cart / quantity / .fotofile-v2-buy-now
   / .single_add_to_cart_button), the sticky buybar
   (.fotofile-v2-buybar*), or the related/upsells rail. No content:,
   no display:contents, no url(), no new position:fixed, nothing
   hidden. Appended last so it wins at equal specificity.
   ============================================================ */
@media (max-width: 782px) {
  /* Gallery: trim bottom whitespace only (flexslider height untouched). */
  body.single-product div.product .woocommerce-product-gallery {
    margin-bottom: 12px;
  }

  /* Title: tighter, lighter divider so it groups with the price below. */
  body.single-product div.product .product_title.entry-title,
  body.single-product div.product .product_title {
    margin-bottom: 8px;
    padding-bottom: 8px;
    line-height: 1.28;
  }

  /* Product meta: quieter + denser (data kept, nothing hidden). */
  body.single-product div.product .summary .product_meta {
    margin-top: 8px;
    padding-top: 8px;
    font-size: 12px;
    line-height: 1.55;
  }

  /* Family selector: tighter above the price. */
  body.single-product div.product .summary .fotofile-v2-family {
    margin-bottom: 8px;
  }

  /* Price: the above-the-fold anchor — more prominent, tightly grouped. */
  body.single-product div.product .summary .price,
  body.single-product div.product .summary p.price {
    margin-bottom: 8px;
    padding-bottom: 8px;
    font-size: 32px;
    line-height: 1.05;
    font-weight: 800;
  }

  /* Short description: compact above the CTA. */
  body.single-product div.product .summary .woocommerce-product-details__short-description {
    margin-bottom: 10px;
    padding: 6px 0 8px;
    font-size: 14px;
    line-height: 1.6;
  }

  /* Trust / assurance: lighter chrome, denser rows (all text kept). */
  body.single-product div.product .summary .fotofile-v2-assurance {
    margin: 8px 0;
    border-radius: 10px;
  }

  body.single-product div.product .summary .fotofile-v2-assurance__row {
    gap: 4px 10px;
    padding: 7px 12px;
    font-size: 12.5px;
  }

  body.single-product div.product .summary .fotofile-v2-assurance__key {
    min-width: 92px;
  }
}

/* ============================================================
   M13-P2 Mobile gallery compaction (JS-aware, styling only)
   ------------------------------------------------------------
   Pairs with the M13-P2 gallery IIFE in assets/js/single-product.js.
   The JS adds `.is-fotofile-v2-gallery-compact` and sets the
   `--fotofile-v2-gallery-main-height` custom property on the gallery
   (mobile <=782px only), and — ONLY when flexslider owns a real
   `.flex-viewport` — mirrors that height onto its inline style. This
   caps the MAIN image height so title/price/CTA sit higher, while the
   image is contained (never cropped) and centered. No markup change;
   flexslider paging, the zoom trigger, lightbox, and the thumbnail
   rail stay functional and visible. Everything is gated behind the
   compact class + the mobile media query, so desktop / >782px and any
   product without the class are untouched. No content:, no url(), no
   display:contents, no position:fixed, nothing hidden. Appended last
   so it wins at equal specificity.
   ============================================================ */
@media (max-width: 782px) {
  body.single-product div.product .woocommerce-product-gallery.is-fotofile-v2-gallery-compact {
    margin-bottom: 10px;
  }

  /* flexslider's own viewport — height mirrored by JS; keep CSS in sync. */
  body.single-product div.product .woocommerce-product-gallery.is-fotofile-v2-gallery-compact .flex-viewport {
    height: var(--fotofile-v2-gallery-main-height) !important;
  }

  /* Main image cell: capped, centered, contained (slides + single image). */
  body.single-product div.product .woocommerce-product-gallery.is-fotofile-v2-gallery-compact .woocommerce-product-gallery__image {
    height: var(--fotofile-v2-gallery-main-height);
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
  }

  body.single-product div.product .woocommerce-product-gallery.is-fotofile-v2-gallery-compact .woocommerce-product-gallery__image a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  body.single-product div.product .woocommerce-product-gallery.is-fotofile-v2-gallery-compact .woocommerce-product-gallery__image img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }

  /* Keep the zoom trigger tappable above the capped image. */
  body.single-product div.product .woocommerce-product-gallery.is-fotofile-v2-gallery-compact .woocommerce-product-gallery__trigger {
    z-index: 2;
  }

  /* Thumbnails stay a visible single horizontal scroll rail (unchanged). */
  body.single-product div.product .woocommerce-product-gallery.is-fotofile-v2-gallery-compact .flex-control-thumbs {
    margin-top: 8px;
  }
}

/* M13-P3: Price / sale / badge polish
   ------------------------------------------------------------
   Presentation-only refinement of the NATIVE WooCommerce single-product
   price and the NATIVE `.onsale` sale flash. Appended last so it wins on
   source order at equal-or-higher specificity — no earlier milestone block
   is rewritten, reordered, or deleted. Retains WooCommerce's own price
   markup (`.woocommerce-Price-amount`, `<del>` regular, `<ins>` active) and
   the real `.onsale` state; adds no fabricated text, labels, or badges of any
   kind. The main badge is scoped with the direct-child combinator so the
   `.related` / `.upsells` card badges are never touched. No `position` on the
   badge — WooCommerce core keeps owning placement. The sticky buybar
   (`.fotofile-v2-buybar*`) is untouched. */

/* Main price container: keep the regular <del> and sale <ins> together on a
   single line (no wrap between them). min-width:0/max-width:100% keep it inside
   the summary column; nothing is hidden or clipped. */
body.single-product div.product .summary .price,
body.single-product div.product .summary p.price {
  min-width: 0;
  max-width: 100%;
  align-items: baseline;
  flex-wrap: nowrap;
  column-gap: 12px;
}

/* Active (sale) price: the dominant figure — underline-free, heavy, unbroken. */
body.single-product div.product .summary .price ins,
body.single-product div.product .summary .price ins .amount {
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}

/* Regular price on sale: clearly secondary — struck through, lighter, unbroken. */
body.single-product div.product .summary .price del,
body.single-product div.product .summary .price del .amount {
  text-decoration: line-through;
  font-weight: 500;
  opacity: 0.85;
  white-space: nowrap;
}

/* Currency symbol: readable and baseline-aligned, a touch smaller than digits. */
body.single-product div.product .summary .price .woocommerce-Price-currencySymbol {
  font-size: 0.72em;
  font-weight: 600;
  margin-right: 1px;
}

/* Variation price mirrors the same single-line behaviour (del/ins together). */
body.single-product div.product .woocommerce-variation-price .price {
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
}

/* Main native sale badge only (direct child of div.product). Legibility polish
   — padding / radius / type only. No positioning, no invented text. */
body.single-product div.product > span.onsale {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (max-width: 782px) {
  /* Mobile (M13-P3-FIX2): equal-size sale pair. The exaggerated large-vs-small
     hierarchy is dropped — regular <del> and sale <ins> render at the SAME
     size; contrast comes from weight/colour/strike only, not from font size.
     Stays on one line (nowrap), no clip, no ellipsis. Desktop is untouched. */
  body.single-product div.product .summary .price,
  body.single-product div.product .summary p.price {
    flex-wrap: nowrap;
    align-items: baseline;
    font-size: clamp(22px, 6.4vw, 24px);
    line-height: 1.2;
    column-gap: 6px;
  }

  /* Equal-size native pair: both del and ins (and their .amount) at 1em. */
  body.single-product div.product .summary .price del,
  body.single-product div.product .summary .price del .amount,
  body.single-product div.product .summary .price ins,
  body.single-product div.product .summary .price ins .amount {
    font-size: 1em;
    white-space: nowrap;
  }

  /* Sale price keeps its emphasis via weight only (size now matches regular). */
  body.single-product div.product .summary .price ins,
  body.single-product div.product .summary .price ins .amount {
    font-weight: 700;
  }

  body.single-product div.product > span.onsale {
    padding: 4px 9px;
    font-size: 12px;
  }
}

/* ============================================================
   M13-P3-HOTFIX: Main CTA real-device width rebalance
   Fixes the in-flow mobile purchase row:
   quantity | ซื้อเลย | หยิบใส่ตะกร้า
   Simple products only. Not the sticky buybar.
   ============================================================ */
@media (max-width: 782px) {
  body.single-product div.product.product-type-simple .summary form.cart .fotofile-v2-buy-now {
    flex: 1 1 auto;
    min-width: 84px;
  }

  body.single-product div.product.product-type-simple .summary form.cart .single_add_to_cart_button,
  body.single-product div.product.product-type-simple .summary form.cart button.single_add_to_cart_button {
    flex: 1.35 1 auto;
    min-width: 128px;
  }
}

/* Very-narrow fallback: preserve the real CommerceKit intersector box
   while moving add-to-cart to a clean full-width second row. */
@media (max-width: 340px) {
  body.single-product div.product.product-type-simple .summary form.cart,
  body.single-product div.product.product-type-simple .summary form.cart .commercekit-sticky-atc-intersector {
    flex-wrap: wrap;
  }

  body.single-product div.product.product-type-simple .summary form.cart .single_add_to_cart_button,
  body.single-product div.product.product-type-simple .summary form.cart button.single_add_to_cart_button {
    flex: 1 1 100%;
  }
}

/* ============================================================
   M13-P4 Product family selector polish (CSS-only, Option A)
   Reuses the existing base selector specificity so the mobile
   touch-target actually overrides the base option rule.
   No new markup, no fabricated state; long-label robustness +
   real 44px mobile tap height only.
   ============================================================ */
body.single-product div.product .summary .fotofile-v2-family__option {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

@media (max-width: 782px) {
  body.single-product div.product .summary .fotofile-v2-family__option {
    min-height: 44px;
    padding: 9px 14px;
  }
}

/* ============================================================
   M15-P1 Mobile description table overflow hotfix
   Overrides fixed HTML width attributes in legacy product
   description tables without hiding or removing specification
   content. Mobile-only; direct description tables only.
   ============================================================ */
@media (max-width: 782px) {
  body.single-product div.product #tab-description > table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
  }

  body.single-product div.product #tab-description > table th,
  body.single-product div.product #tab-description > table td {
    width: auto;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* ==========================================================================
   M13-P5 Trust / Service Strip Polish
   --------------------------------------------------------------------------
   CSS-only polish (Option A) of the existing native assurance markup rendered
   by inc/product-trust-actions.php. Turns the mobile guarantee/shipping card
   into a compact marketplace service strip while preserving BOTH rows and the
   exact owner-provided text (FOTOFILE การันตี / สินค้าของแท้ 100% ·
   รับประกันศูนย์ไทย / จัดส่ง / ฟรี). No CSS-generated text or icons, no markup
   change, no behaviour change. Scoped through body.single-product div.product
   .summary; appended last so it wins at equal specificity. Desktop density is
   left unchanged (all compaction is mobile-only; the shared value rule only
   affects overflow, never height when text fits).
   ========================================================================== */

/* Shared: let the value shrink and wrap safely instead of overflowing. */
body.single-product div.product .summary .fotofile-v2-assurance__val {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

/* Mobile: compact, strip-like rows with a smaller key column. */
@media (max-width: 782px) {
  body.single-product div.product .summary .fotofile-v2-assurance {
    margin: 8px 0;
    border-radius: 8px;
  }

  body.single-product div.product .summary .fotofile-v2-assurance__row {
    align-items: baseline;
    gap: 4px 8px;
    padding: 6px 10px;
    line-height: 1.45;
  }

  body.single-product div.product .summary .fotofile-v2-assurance__key {
    min-width: 72px;
  }
}

/* ==========================================================================
   Single Product Visible Breadcrumb
   ========================================================================== */

body.single-product .fotofile-v2-product-breadcrumb {
    min-width: 0;
    max-width: 100%;
    margin: 0 0 16px;
    line-height: 1.5;
}

body.single-product .fotofile-v2-product-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

body.single-product .fotofile-v2-product-breadcrumb a:hover {
    text-decoration: underline;
}

body.single-product .fotofile-v2-product-breadcrumb__separator {
    display: inline-block;
    margin: 0 6px;
    color: currentColor;
    opacity: 0.6;
}

body.single-product .fotofile-v2-product-breadcrumb a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

@media (max-width: 782px) {
    body.single-product .fotofile-v2-product-breadcrumb {
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   M13-P8-HF1 — 783–1023px Main CTA containment
   ------------------------------------------------------------
   The compact CTA sizing was bounded to max-width:782px, but the
   WooCommerce two-column summary (~48% width) persists up to
   1023px. At 783–~1000px the base CTA min-width budget
   (quantity 82 + Buy Now min 130 + Add to cart min 190 + 2×10 gap
   = 422px) exceeds the narrow summary column (~333–445px), so the
   Add to cart control is clipped on the right. This extends the
   proven ≤782px compact treatment across the tablet range so the
   row fits the column. Simple products only; NOT the sticky buybar.
   DOM order (quantity → Buy Now → Add to cart) and native labels
   are unchanged — size/spacing only. No content:, no url(), no
   display:contents, no order:, no new position:fixed, nothing
   hidden. Appended last so it wins at equal specificity. Safe at
   782px (mobile block untouched) and ≥1024px (out of range).
   ============================================================ */
@media (min-width: 783px) and (max-width: 1023px) {
  body.single-product div.product.product-type-simple .summary form.cart,
  body.single-product div.product.product-type-simple .summary form.cart .commercekit-sticky-atc-intersector {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  body.single-product div.product.product-type-simple .summary form.cart .quantity {
    flex: 0 0 60px;
  }

  body.single-product div.product.product-type-simple .summary form.cart .fotofile-v2-buy-now {
    flex: 1 1 auto;
    min-width: 84px;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 14px;
    white-space: nowrap;
  }

  body.single-product div.product.product-type-simple .summary form.cart .single_add_to_cart_button,
  body.single-product div.product.product-type-simple .summary form.cart button.single_add_to_cart_button {
    flex: 1.35 1 auto;
    min-width: 128px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
    white-space: nowrap;
  }
}

/* ============================================================
   PROD-P1-FIX2 Hide Related card CTA on desktop (CSS-only)
   ------------------------------------------------------------
   Human request: the single-product Related-products rail shows
   WooCommerce card CTA links (หยิบใส่ตะกร้า / อ่านเพิ่มเติม /
   Select options / external) on desktop; hide them there. Mobile
   (<=782px) is visually accepted and is left entirely untouched —
   this rule lives only in the desktop half of the file's existing
   782/783 breakpoint boundary, so no mobile rule is altered.

   Scope: ONLY the direct card CTA links (li.product > .button and
   the post-ajax .added_to_cart "view cart" link) inside the
   single-product .related rail. Per Human review, .upsells is
   intentionally NOT included — this fix is scoped to the Related
   Products rail exactly as requested.

   NOT touched: the product-card link (a.woocommerce-LoopProduct-
   link), image, title, price, sale badge, rail scroll, card sizing;
   the main single-product CTA / sticky buy bar; and any archive /
   shop / search card (those are body.archive / .woocommerce-page,
   never body.single-product). Uses display:none (not visibility)
   so no blank button-height gap is reserved; price keeps its
   margin-top:auto and simply settles at the card bottom.
   ============================================================ */
@media (min-width: 783px) {
  body.single-product div.product .related ul.products li.product > .button,
  body.single-product div.product .related ul.products li.product > .added_to_cart {
    display: none;
  }
}

/* ============================================================
   PROD-P1-CLS-P3 Coordinated gallery ready-state stabilization
   ------------------------------------------------------------
   Mobile-only (<=782px), single-product only. Reserves the FINAL
   document-flow gallery height from FIRST PAINT so neither the
   Theme V2 pre-FlexSlider compaction (verified CLS ~0.052637) nor
   the WooCommerce FlexSlider single-slide collapse (verified CLS
   ~0.274629) moves div.summary.entry-summary.

   Measured geometry (evidence 13/15/16, deterministic across
   320/390/412/430/782 and products 10631/44676/30000):
     CAP(w)              = min(100vw - 24px, clamp(280px, 78vw, 320px))
     single-image height = CAP(w)
     multi-image  height = CAP(w) + 82px   (8px thumb gap + 74px
                           single-row thumbnail rail; constant for
                           7- and 16-image galleries)
     gallery margin-bottom = 10px

   Inner main-image / .flex-viewport sizing is OWNED by the M13-P2
   compact block above (added synchronously BEFORE FlexSlider
   measures); this block only reserves the OUTER box and pins the
   summary. Temporary overflow containment applies ONLY in the
   pre-ready (gallery opacity:0) window and is released by the
   explicit Theme-V2 JS ready class .is-fotofile-v2-gallery-ready.
   A JS-init-failure class .is-fotofile-v2-gallery-fallback reveals
   the native vertical stack. No rule here applies at 783px+, and
   no product image is display:none / visibility:hidden; no
   Theme-V2 opacity:0, no clip-path, no height transition.
   ============================================================ */
@media (max-width: 782px) {
  /* STATE 1 — first-paint reservation (ungated; single-image default). */
  body.single-product div.product .woocommerce-product-gallery {
    --fotofile-v2-gallery-cap: min(100vw - 24px, clamp(280px, 78vw, 320px));
    --fotofile-v2-gallery-reserved: var(--fotofile-v2-gallery-cap);
    height: var(--fotofile-v2-gallery-reserved);
    min-height: var(--fotofile-v2-gallery-reserved);
    margin-bottom: 10px;
    /* STATE 3 — temporary pre-ready containment (gallery is opacity:0 here). */
    overflow: hidden;
  }

  /* Multi-image (>=2 gallery images): reserve the thumb gap + rail (8 + 74). */
  body.single-product div.product .woocommerce-product-gallery:has(.woocommerce-product-gallery__image + .woocommerce-product-gallery__image) {
    --fotofile-v2-gallery-reserved: calc(var(--fotofile-v2-gallery-cap) + 82px);
  }

  /* STATE 6 — ready release: drop the temporary containment but keep the
     measured minimum geometry via min-height, so the summary never shifts. */
  body.single-product div.product .woocommerce-product-gallery.is-fotofile-v2-gallery-ready {
    height: auto;
    overflow: visible;
  }

  /* STATE 7 — JS-enabled initialization failure: reveal + restore the native
     vertical image stack (avoids a permanently invisible gallery). */
  body.single-product div.product .woocommerce-product-gallery.is-fotofile-v2-gallery-fallback {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    margin-bottom: 18px !important;
  }
  body.single-product div.product .woocommerce-product-gallery.is-fotofile-v2-gallery-fallback .flex-viewport,
  body.single-product div.product .woocommerce-product-gallery.is-fotofile-v2-gallery-fallback .woocommerce-product-gallery__image {
    height: auto !important;
  }
}