/* FOTOFILE Storefront V2 scaffold. Local, lightweight, and free of WooCommerce template replacement. */
:root {
  --fotofile-v2-accent: #ee4d2d;
  --fotofile-v2-ink: #222;
  --fotofile-v2-muted: #6b6b6b;
  --fotofile-v2-line: #ececec;
  --fotofile-v2-surface: #fff;
  --fotofile-v2-container: 1200px;
  --fotofile-v2-bottom-nav: 62px;
  --fotofile-v2-radius: 12px;
  --fotofile-v2-radius-sm: 9px;
  --fotofile-v2-radius-lg: 14px;
  --fotofile-v2-shadow: 0 1px 2px rgba(17, 17, 17, 0.06), 0 4px 12px rgba(17, 17, 17, 0.05);
  --fotofile-v2-shadow-soft: 0 1px 1px rgba(17, 17, 17, 0.04), 0 6px 16px rgba(17, 17, 17, 0.06);
  --fotofile-v2-sale: #ee4d2d;
  --fotofile-v2-price: #ee4d2d;
  --fotofile-v2-tile: #f6f6f6;
  --fotofile-v2-ink-soft: #8a8a8a;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  margin: 0;
  overflow-wrap: break-word;
  color: var(--fotofile-v2-ink);
  background: #f7f7f7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a { color: inherit; }
img { max-width: 100%; height: auto; }

.fotofile-v2-container {
  width: min(100% - 24px, var(--fotofile-v2-container));
  margin-inline: auto;
}

.fotofile-v2-site-header,
.fotofile-v2-site-footer {
  background: var(--fotofile-v2-surface);
  border-color: var(--fotofile-v2-line);
}

.fotofile-v2-site-header { border-bottom: 1px solid var(--fotofile-v2-line); }

.fotofile-v2-site-header__inner,
.fotofile-v2-site-footer__inner {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.fotofile-v2-brand,
.fotofile-v2-app-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  text-decoration: none;
}

.fotofile-v2-brand__mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 8px;
}

.fotofile-v2-primary-nav ul,
.fotofile-v2-footer-nav ul {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fotofile-v2-main {
  min-height: 55vh;
  padding-block: 24px;
}

.fotofile-v2-entry {
  margin-bottom: 16px;
  padding: 20px;
  background: var(--fotofile-v2-surface);
}

.fotofile-v2-entry__title { margin-top: 0; font-size: 1.25rem; }
.fotofile-v2-site-footer { border-top: 1px solid var(--fotofile-v2-line); }
.fotofile-v2-app-shell,
.fotofile-v2-bottom-nav,
.fotofile-v2-drawer { display: none; }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.screen-reader-text:focus {
  z-index: 100000;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  clip: auto;
  padding: 10px 14px;
  background: #fff;
  color: #111;
}

@media (max-width: 782px) {
  /* Reserve space for the fixed bottom nav. `!important` is required because
     Elementor ships a `body{padding-bottom:0}` reset of equal specificity that
     loads after this file and would otherwise let the nav cover content. The
     +18px buffer keeps product CTAs clear of the nav, not just flush above it. */
  body { padding-bottom: calc(var(--fotofile-v2-bottom-nav) + 18px + env(safe-area-inset-bottom)) !important; }
  .fotofile-v2-site-header { display: none; }

  .fotofile-v2-app-shell {
    position: sticky;
    top: 0;
    z-index: 70;
    display: block;
    padding: max(6px, env(safe-area-inset-top)) 12px 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--fotofile-v2-accent), #ff7337);
  }

  .fotofile-v2-app-shell__top {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
  }

  .fotofile-v2-app-cart {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
  }

  .fotofile-v2-app-cart svg,
  .fotofile-v2-search svg,
  .fotofile-v2-bottom-nav svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .fotofile-v2-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    min-height: 42px;
    overflow: hidden;
    border-radius: 9px;
    background: #fff;
  }

  .fotofile-v2-search input,
  .fotofile-v2-search button {
    min-width: 0;
    min-height: 42px;
    border: 0;
    background: transparent;
  }

  .fotofile-v2-search input { padding-inline: 12px; }
  .fotofile-v2-search button { color: var(--fotofile-v2-accent); }

  .fotofile-v2-bottom-nav {
    position: fixed;
    z-index: 80;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: var(--fotofile-v2-bottom-nav);
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--fotofile-v2-line);
    background: rgba(255, 255, 255, 0.98);
  }

  .fotofile-v2-bottom-nav a {
    display: flex;
    min-width: 0;
    min-height: 54px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--fotofile-v2-muted);
    font-size: 10px;
    text-decoration: none;
  }

  .fotofile-v2-bottom-nav a.is-active {
    color: var(--fotofile-v2-accent);
    font-weight: 700;
  }

  .fotofile-v2-app-shell :focus-visible,
  .fotofile-v2-bottom-nav :focus-visible {
    outline: 3px solid #111;
    outline-offset: 2px;
  }

  .fotofile-v2-site-footer { margin-bottom: 8px; }
  .fotofile-v2-site-footer__inner { min-height: 54px; }
  .fotofile-v2-footer-nav { display: none; }

  body.woocommerce-cart,
  body.woocommerce-checkout { padding-bottom: 0 !important; }

  body.woocommerce-cart .fotofile-v2-bottom-nav,
  body.woocommerce-checkout .fotofile-v2-bottom-nav { display: none; }
}

/* ============================================================
   Theme-owned shell build - CUSTOM-THEME-V2-THEME-OWNED-SHELL-BUILD-C1
   Runtime note: Elementor still owns header/footer on staging, so most of this
   becomes active only after the Human retires Elementor display conditions.
   Bottom nav remains JS-fallback-compatible while Elementor owns footer.php.
   ============================================================ */
.fotofile-v2-header-strip {
  border-bottom: 1px solid var(--fotofile-v2-line);
  background: #fdfdfd;
  color: var(--fotofile-v2-muted);
  font-size: 0.82rem;
}

.fotofile-v2-header-strip__inner {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.fotofile-v2-header-strip a,
.fotofile-v2-footer-contact a { color: inherit; text-decoration: none; }

.fotofile-v2-site-header__inner {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(260px, 1fr) auto;
  min-height: 78px;
  gap: 18px;
}

.fotofile-v2-brand__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* WordPress Custom Logo (HF-P2): native logo replaces the F mark when configured.
   the_custom_logo() carries its own Home link; we only constrain the image box. */
.fotofile-v2-brand--logo,
.fotofile-v2-app-brand--logo { min-width: 0; }

.fotofile-v2-brand--logo .custom-logo-link,
.fotofile-v2-app-brand--logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
}

.fotofile-v2-brand--logo .custom-logo,
.fotofile-v2-app-brand--logo .custom-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 44px;
}

.fotofile-v2-header-search { min-width: 0; }

.fotofile-v2-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius-sm);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(238, 77, 45, 0.03);
}

.fotofile-v2-search input,
.fotofile-v2-search button {
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  font: inherit;
}

.fotofile-v2-search input { padding-inline: 14px; }
.fotofile-v2-search button { color: var(--fotofile-v2-accent); cursor: pointer; }

.fotofile-v2-search--fibosearch {
  display: block;
  min-height: 46px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.fotofile-v2-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fotofile-v2-icon-link,
.fotofile-v2-app-icon,
.fotofile-v2-drawer-toggle,
.fotofile-v2-drawer-close {
  position: relative;
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.fotofile-v2-icon-link {
  gap: 6px;
  padding-inline: 8px;
  color: var(--fotofile-v2-muted);
  font-size: 0.86rem;
}

.fotofile-v2-icon-link svg,
.fotofile-v2-app-icon svg,
.fotofile-v2-drawer-toggle svg,
.fotofile-v2-drawer-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.fotofile-v2-cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--fotofile-v2-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.fotofile-v2-header-nav-row {
  border-top: 1px solid var(--fotofile-v2-line);
  background: #fff;
}

.fotofile-v2-primary-nav ul,
.fotofile-v2-menu {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fotofile-v2-primary-nav a,
.fotofile-v2-drawer-nav a,
.fotofile-v2-footer-nav a { text-decoration: none; }

.fotofile-v2-primary-nav a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  color: var(--fotofile-v2-ink);
  font-size: 0.92rem;
  font-weight: 600;
}

.fotofile-v2-site-footer {
  background: #fff;
  color: var(--fotofile-v2-ink);
}

.fotofile-v2-site-footer__inner {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(180px, 1fr) minmax(160px, auto);
  align-items: start;
  gap: 24px;
  padding-block: 28px;
}

.fotofile-v2-footer-brand p {
  max-width: 34rem;
  margin: 10px 0 0;
  color: var(--fotofile-v2-muted);
  font-size: 0.92rem;
}

.fotofile-v2-footer-nav ul,
.fotofile-v2-footer-contact {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fotofile-v2-footer-contact {
  color: var(--fotofile-v2-muted);
  font-size: 0.92rem;
}

.fotofile-v2-breadcrumb {
  margin-block: 0 16px;
  color: var(--fotofile-v2-muted);
  font-size: 0.84rem;
}

.fotofile-v2-breadcrumb a { color: inherit; }

.fotofile-v2-site-header :focus-visible,
.fotofile-v2-site-footer :focus-visible,
.fotofile-v2-drawer :focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

@media (max-width: 782px) {
  .fotofile-v2-app-shell {
    display: block;
    color: #fff;
  }

  .fotofile-v2-app-shell__top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 6px;
  }

  .fotofile-v2-app-brand {
    justify-self: start;
    min-width: 0;
  }

  .fotofile-v2-app-brand .fotofile-v2-brand__name { max-width: 42vw; }

  /* HF-P2: keep the native custom logo compact inside the mobile app bar. */
  .fotofile-v2-app-brand--logo .custom-logo { max-height: 30px; }

  .fotofile-v2-app-actions {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .fotofile-v2-app-icon,
  .fotofile-v2-drawer-toggle { color: #fff; }

  .fotofile-v2-app-icon .fotofile-v2-cart-count {
    top: 1px;
    right: 0;
    background: #111;
  }

  .fotofile-v2-drawer[hidden] { display: none; }

  .fotofile-v2-drawer {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: block;
    background: rgba(17, 17, 17, 0.42);
  }

  .fotofile-v2-drawer__panel {
    width: min(84vw, 340px);
    height: 100%;
    overflow-y: auto;
    background: #fff;
    color: var(--fotofile-v2-ink);
    box-shadow: var(--fotofile-v2-shadow-soft);
  }

  .fotofile-v2-drawer__head {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    padding-inline: 16px 8px;
    border-bottom: 1px solid var(--fotofile-v2-line);
    font-weight: 800;
  }

  .fotofile-v2-drawer-nav ul,
  .fotofile-v2-drawer-nav .fotofile-v2-menu {
    display: grid;
    gap: 0;
    min-height: 0;
  }

  .fotofile-v2-drawer-nav a {
    display: flex;
    min-height: 48px;
    align-items: center;
    padding-inline: 16px;
    border-bottom: 1px solid var(--fotofile-v2-line);
    color: var(--fotofile-v2-ink);
    font-weight: 650;
  }

  body.fotofile-v2-drawer-open { overflow: hidden; }
}

@media (min-width: 783px) and (max-width: 1023px) {
  .fotofile-v2-site-header__inner {
    grid-template-columns: minmax(130px, 180px) minmax(220px, 1fr) auto;
    gap: 12px;
  }

  .fotofile-v2-icon-link span { display: none; }
}

@media (max-width: 520px) {
  .fotofile-v2-header-strip__inner,
  .fotofile-v2-site-footer__inner { grid-template-columns: 1fr; }

  .fotofile-v2-footer-contact,
  .fotofile-v2-footer-nav ul { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .fotofile-v2-drawer *,
  .fotofile-v2-bottom-nav a {
    scroll-behavior: auto;
    transition: none;
  }
}
/* ============================================================
   Mobile shopping-app UX — CUSTOM-THEME-V2-MOBILE-UX-SHOPEE-LAZADA-LIKE-A
   Supersedes POLISH-A/B. CSS-first.

   IMPORTANT (why POLISH-A/B looked unchanged): on staging, Elementor
   Theme Builder owns header/footer/archive site-wide, so the theme's
   `woocommerce.php` wrapper (`.fotofile-v2-woocommerce`) and app-shell
   markup never render. The previous rules were scoped to that absent
   wrapper, so none of them applied. These rules instead target the
   REAL rendered DOM (verified by anonymous GET on staging):
     - archive/search grid: `ul.products.elementor-grid` (Elementor
       `wc-archive-products` widget) — excludes the home `eael-post-appender`
       swiper so its carousel is never forced into a grid.
     - inner loop classes are standard WooCommerce:
       `.woocommerce-loop-product__title`, `.price`, `.button`,
       `.add_to_cart_button`, `.onsale`, `.woocommerce-ordering`,
       `.woocommerce-result-count`, `.woocommerce-pagination`.

   WooCommerce-rendered HTML, links, prices, add-to-cart, cart/checkout/
   order/payment/shipping/coupon logic, URLs, canonical, robots, schema,
   breadcrumb logic, title/meta, product query, and pagination are all
   preserved — only presentation changes.
   ============================================================ */

/* --- App feed grid: Elementor product grids (archive/search/related). The
       home `eael-post-appender` swiper is intentionally excluded. --- */
.woocommerce ul.products.elementor-grid,
.woocommerce.archive ul.products:not(.eael-post-appender),
.woocommerce-page.search ul.products:not(.eael-post-appender) {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Breadcrumb — lighter, low-noise on mobile (Essential Addons widget +
   any standard WooCommerce breadcrumb; links/logic untouched) */
.woocommerce .term-description { color: var(--fotofile-v2-muted); font-size: 0.85rem; }

/* Marketplace product tile (excludes the home swiper appender).
   Edge-to-edge image, bottom-pinned price, compact corner CTA. */
.woocommerce ul.products:not(.eael-post-appender) li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* clip the edge-to-edge image to the card radius */
  margin: 0;
  padding: 0;                  /* image is edge-to-edge; text/CTA are inset below */
  background: var(--fotofile-v2-surface);
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius-lg);
  box-shadow: var(--fotofile-v2-shadow-soft);
}

/* The product link wraps image + title + price (verified in live DOM) and is the
   primary tap target → product page. Kept as a simple block so image → title →
   price stack with consistent spacing (no bottom-pin: with a reserved 2-line
   title every tile is the same height, so price already aligns row to row). */
.woocommerce ul.products:not(.eael-post-appender) li.product > a.woocommerce-LoopProduct-link {
  display: block;
  text-decoration: none;
}

/* Image — larger, edge-to-edge, no inner tile/box (removes the card-in-a-card
   feel). Contained so product shots are never cropped; WooCommerce thumbnails
   are already square so this fills the tile cleanly. */
.woocommerce ul.products:not(.eael-post-appender) li.product a img,
.woocommerce ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail {
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border-radius: 0;
}

/* Out-of-stock product images must stay clear, bright, and equally vivid — same
   as in-stock. We removed the previous `opacity: 0.55` dim (LIKE-A) and force the
   image back to full clarity here, also guarding against any dim/blur/grey/fade a
   parent theme, Elementor, or WooCommerce defaults might apply to `.outofstock`
   thumbnails. Stock logic, the real `.outofstock` class, and availability text are
   untouched — this is image presentation only. */
body.woocommerce ul.products:not(.eael-post-appender) li.product.outofstock img,
body.woocommerce ul.products:not(.eael-post-appender) li.product.outofstock a img,
body.woocommerce ul.products.elementor-grid li.product.outofstock img,
body.woocommerce ul.products.elementor-grid li.product.outofstock a img {
  opacity: 1 !important;
  filter: none !important;
}

/* Title — modern sans, 2-line clamp, reserved height, inset from the card edge */
.woocommerce ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  margin: 0 10px;
  padding: 0;
  min-height: 2.5em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--fotofile-v2-ink);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Compact star rating only when genuinely present in markup */
.woocommerce ul.products:not(.eael-post-appender) li.product .star-rating { margin: 6px 10px 0; font-size: 0.8em; }

/* Price — strong hierarchy, inset, consistent fixed spacing under the title */
.woocommerce ul.products:not(.eael-post-appender) li.product .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 6px 10px 0;
  padding-top: 0;
  color: var(--fotofile-v2-price);
  font-size: 1.05rem;
  font-weight: 800;
}

.woocommerce ul.products:not(.eael-post-appender) li.product .price ins { text-decoration: none; }

.woocommerce ul.products:not(.eael-post-appender) li.product .price del {
  color: var(--fotofile-v2-ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 1;
}

/* CTA — compact refined accent pill in the corner (no longer a full-width block).
   Preserves add-to-cart / read-more / select-options links and AJAX behaviour. */
.woocommerce ul.products:not(.eael-post-appender) li.product .button,
.woocommerce ul.products:not(.eael-post-appender) li.product .added_to_cart {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: calc(100% - 20px);
  margin: 8px 10px 10px;
  padding: 8px 14px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--fotofile-v2-accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.woocommerce ul.products:not(.eael-post-appender) li.product .button:active { transform: scale(0.97); filter: brightness(0.95); }

.woocommerce ul.products:not(.eael-post-appender) li.product .added_to_cart {
  margin-top: 0;
  background: #fff;
  color: var(--fotofile-v2-accent);
  border: 1px solid var(--fotofile-v2-accent);
}

/* Sale badge — clean corner pill, real WooCommerce `.onsale` state only */
.woocommerce ul.products:not(.eael-post-appender) li.product .onsale {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  z-index: 2;
  margin: 0;
  min-width: 0;
  min-height: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fotofile-v2-sale);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(238, 77, 45, 0.35);
}

/* --- Sort / result-count toolbar: one compact marketplace row.
       Result count and ordering are siblings in `.woocommerce.columns-4`, so we
       float them onto a single line (count left, sort chip right) and clear the
       product grid below. Count truncates instead of colliding with the chip. --- */
.woocommerce .woocommerce-result-count {
  float: left;
  max-width: 50%;
  margin: 0;
  min-height: 44px;
  line-height: 44px;
  overflow: hidden;
  color: var(--fotofile-v2-muted);
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.woocommerce .woocommerce-ordering {
  float: right;
  margin: 0 0 12px;
}

/* Sort control rendered as a compact app filter/sort chip with a caret (no JS, no CDN) */
.woocommerce .woocommerce-ordering select {
  max-width: 100%;
  min-height: 44px;
  padding: 8px 32px 8px 14px;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: 999px;
  background-color: var(--fotofile-v2-surface);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236b6b6b'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
  color: var(--fotofile-v2-ink);
  font-size: 0.8rem;
  font-weight: 600;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* --- Pagination (visual only; WooCommerce keeps the links/logic) --- */
.woocommerce .woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  border: 0;
}

.woocommerce .woocommerce-pagination ul li { border: 0; margin: 0; }

.woocommerce .woocommerce-pagination a.page-numbers,
.woocommerce .woocommerce-pagination span.page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--fotofile-v2-radius-sm);
  background: var(--fotofile-v2-surface);
  border: 1px solid var(--fotofile-v2-line);
}

.woocommerce .woocommerce-pagination span.current {
  background: var(--fotofile-v2-accent);
  color: #fff;
  border-color: var(--fotofile-v2-accent);
}

/* --- Cart & checkout shared card surfaces (CSS-only sectioning) --- */
.woocommerce-cart .cart_totals,
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review,
.woocommerce-checkout #payment {
  background: var(--fotofile-v2-surface);
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius);
  box-shadow: var(--fotofile-v2-shadow);
}

/* Notices / login / coupon visual polish */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-form-login,
.checkout_coupon,
.woocommerce-form-coupon {
  border-radius: var(--fotofile-v2-radius-sm);
}

/* Quantity input usability */
.woocommerce .quantity .qty {
  min-height: 40px;
  padding: 4px 8px;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius-sm);
}

/* --- Mobile-specific layout (<=782px) --- */
@media (max-width: 782px) {
  /* Force an exact 2-equal-column feed on mobile. `!important` overrides
     Elementor's `columns-4` grid (no mobile column class) AND WooCommerce's
     default per-item `li.product{ width:22.05%; float:left }`, which together
     caused the uneven card widths. */
  .woocommerce ul.products.elementor-grid,
  .woocommerce.archive ul.products:not(.eael-post-appender),
  .woocommerce-page.search ul.products:not(.eael-post-appender) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    --e-grid-columns: 2;
    gap: 10px !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* Each tile fills its grid track exactly — kills WooCommerce's percentage width
     and float so every card is the same width with equal gutters. */
  .woocommerce ul.products:not(.eael-post-appender) li.product {
    width: auto !important;
    min-width: 0;
    max-width: none;
    margin: 0 !important;
    float: none !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Flatter, feed-like tile: drop the heavy panel shadow, hairline border only,
       tighter radius — so cards read as a product feed, not separate web panels. */
    box-shadow: none;
    border: 1px solid #eee;
    border-radius: 10px;
  }

  /* Marketplace image area: every tile gets the SAME 1:1 square frame on a white
     ground, image centred and CONTAINED (never cropped — cameras/lenses stay
     whole). A small, uniform inner padding gives every product equal breathing
     room: tight-cropped shots are inset slightly while loose/whitespace-heavy
     shots stay centred, so the two read at a MORE even visual size. This is the
     limit of what CSS can normalise — see the LIKE-E handoff: products whose
     source files bake in different amounts of white canvas will still differ in
     apparent size until the media thumbnails themselves are normalised. We do
     NOT switch to object-fit: cover, which would crop camera/lens detail. */
  .woocommerce ul.products:not(.eael-post-appender) li.product a img,
  .woocommerce ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail {
    width: 100%;
    margin-bottom: 6px;
    padding: 8px 10px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    background: #fff;
  }
  /* Title: reserve a full, equal 2-line block (2 × 1.3 line-height ≈ 2.6em) so
     every card is the same height and the price below aligns row to row. */
  .woocommerce ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title {
    min-height: 2.6em;
    margin: 0 8px;
    font-size: 0.82rem;
  }
  .woocommerce ul.products:not(.eael-post-appender) li.product .star-rating { margin: 4px 8px 0; }
  /* Price: tight, consistent spacing directly under the reserved title block. */
  .woocommerce ul.products:not(.eael-post-appender) li.product .price {
    margin: 4px 8px 10px;
    padding-top: 0;
    font-size: 1rem;
  }

  /* Marketplace behaviour: the product TILE is the tap target → product page (where
     add-to-cart lives). Hide the per-tile CTA on mobile so the listing is a clean
     product feed, not a button grid. Functionality preserved (add-to-cart on the
     product page; URLs/cart/checkout logic unchanged). */
  .woocommerce ul.products:not(.eael-post-appender) li.product .button,
  .woocommerce ul.products:not(.eael-post-appender) li.product .added_to_cart {
    display: none !important;
  }

  /* Header search-first: make the existing FiboSearch widget the prominent,
     full-width app search action. Visual only — no markup, no duplicate header,
     no position/overflow change, so the live suggestions dropdown and the
     Elementor nav-menu/account/cart widgets are untouched. */
  .elementor-location-header .elementor-widget-fibosearch { margin-block: 4px; }
  .dgwt-wcas-search-form { width: 100%; }
  .dgwt-wcas-search-form .dgwt-wcas-sf-wrapp,
  .dgwt-wcas-search-form .dgwt-wcas-search-input {
    border-radius: 999px !important;
  }
  .dgwt-wcas-search-form .dgwt-wcas-sf-wrapp {
    background: #f1f1f1;
    border: 1px solid #e4e4e4;
  }
  .dgwt-wcas-search-form .dgwt-wcas-search-input {
    min-height: 44px;
    background: transparent !important;
    font-size: 0.92rem;
  }
  .dgwt-wcas-search-form .dgwt-wcas-search-submit { color: var(--fotofile-v2-accent); }
  .dgwt-wcas-search-form .dgwt-wcas-search-submit svg,
  .dgwt-wcas-search-form .dgwt-wcas-ico-magnifier { fill: var(--fotofile-v2-accent); }

  /* Breadcrumb: hide on mobile listing/search/category so the page stops reading
     like a traditional website. CSS visual-only — the widget markup and any
     breadcrumb schema stay in the DOM (SEO/source logic untouched). */
  .elementor-widget-eael-breadcrumbs,
  .woocommerce .woocommerce-breadcrumb { display: none !important; }

  /* Lighter, more app-like bottom nav: drop the hard top border for a soft
     floating shadow on pure white; lighter inactive icons, accent active. */
  .fotofile-v2-bottom-nav {
    border-top: 0;
    background: #fff;
    box-shadow: 0 -1px 0 rgba(17, 17, 17, 0.05), 0 -6px 18px rgba(17, 17, 17, 0.06);
  }
  .fotofile-v2-bottom-nav a { color: #8a8a8a; }
  .fotofile-v2-bottom-nav a.is-active { color: var(--fotofile-v2-accent); }
  .fotofile-v2-bottom-nav svg { width: 22px; height: 22px; }

  /* Cart & checkout: stack data tables into mobile cards using
     WooCommerce's existing data-title attributes (no markup change). */
  .woocommerce-cart .shop_table,
  .woocommerce-cart .shop_table tbody,
  .woocommerce-checkout .woocommerce-checkout-review-order-table,
  .woocommerce-checkout .woocommerce-checkout-review-order-table tbody { display: block; width: 100%; }

  .woocommerce-cart .shop_table thead { display: none; }

  .woocommerce-cart .shop_table tr.cart_item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 6px 12px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--fotofile-v2-surface);
    border: 1px solid var(--fotofile-v2-line);
    border-radius: var(--fotofile-v2-radius);
    box-shadow: var(--fotofile-v2-shadow);
  }

  .woocommerce-cart .shop_table tr.cart_item td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border: 0;
    text-align: right;
  }

  .woocommerce-cart .shop_table tr.cart_item td::before {
    content: attr(data-title);
    margin-right: 12px;
    color: var(--fotofile-v2-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
  }

  .woocommerce-cart .shop_table tr.cart_item td.product-thumbnail {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .woocommerce-cart .shop_table tr.cart_item td.product-thumbnail::before { display: none; }
  .woocommerce-cart .shop_table tr.cart_item td.product-thumbnail img { width: 56px; border-radius: var(--fotofile-v2-radius-sm); }

  /* Checkout review rows readable on narrow screens */
  .woocommerce-checkout .woocommerce-checkout-review-order-table tr {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  /* Sectioned spacing on mobile */
  .woocommerce-cart .cart_totals,
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #payment { margin-bottom: 14px; padding: 14px; }

  /* Bottom-nav icon/label hierarchy + tap/active polish
     (fixed positioning, safe-area inset, and cart/checkout suppression set above) */
  .fotofile-v2-bottom-nav a {
    gap: 3px;
    font-size: 10px;
    letter-spacing: 0.01em;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .fotofile-v2-bottom-nav a span { line-height: 1; }
  .fotofile-v2-bottom-nav svg { width: 23px; height: 23px; }
  .fotofile-v2-bottom-nav a:active { background: rgba(238, 77, 45, 0.08); }
  .fotofile-v2-bottom-nav a.is-active { font-weight: 700; }
  .fotofile-v2-bottom-nav a.is-active svg { stroke-width: 2.1; }
}

/* ============================================================
   Desktop / tablet storefront polish — CUSTOM-THEME-V2-RESPONSIVE-HEADER-SEARCH-UX-A
   Scoped `min-width: 783px` so it begins exactly where the `<=782px` mobile
   marketplace feed ends — it can never reach or damage the approved mobile feed
   (2-column grid, hidden CTA, vivid out-of-stock images, single bottom nav).

   IMPORTANT (what this does NOT do): the staging header is owned end-to-end by
   Elementor Theme Builder, with SEPARATE desktop and mobile header rows toggled
   by `elementor-hidden-*`. The FiboSearch search BAR lives in an
   `elementor-hidden-desktop elementor-hidden-tablet` container — i.e. it renders
   on MOBILE ONLY, and the desktop/tablet header has no search field or search
   icon. Making search prominent on desktop is therefore a TEMPLATE change in
   Elementor (add/move a FiboSearch widget into the desktop header row), NOT
   something to force with fragile CSS that would fight Elementor's own
   responsive breakpoints and risk overlapping the logo/menu/cart. This block
   only styles the theme-owned product-grid surface, which already renders on
   desktop. See the handoff for the exact Elementor edit recommended.
   ============================================================ */
@media (min-width: 783px) {
  /* Modern storefront grid: comfortable equal columns instead of a cramped
     default-WooCommerce list. auto-fill keeps it usable from tablet to wide
     desktop. */
  .woocommerce ul.products.elementor-grid,
  .woocommerce.archive ul.products:not(.eael-post-appender),
  .woocommerce-page.search ul.products:not(.eael-post-appender) {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
  }

  /* Subtle lift on hover (pointer devices) so the grid reads as a modern
     storefront, not a static list. Image stays contained/vivid — no crop, no
     dim (out-of-stock clarity from CLARITY-F is unaffected). */
  .woocommerce ul.products:not(.eael-post-appender) li.product {
    transition: box-shadow 0.18s ease, transform 0.18s ease;
  }
  .woocommerce ul.products:not(.eael-post-appender) li.product:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(17, 17, 17, 0.10);
  }
}

@media (min-width: 783px) and (prefers-reduced-motion: reduce) {
  .woocommerce ul.products:not(.eael-post-appender) li.product,
  .woocommerce ul.products:not(.eael-post-appender) li.product:hover {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   Desktop / tablet ARCHIVE PARITY — CUSTOM-THEME-V2-ARCHIVE-DESKTOP-PARITY-B
   Additive on top of the UX-A `min-width: 783px` block above. It does NOT touch
   the `<=782px` mobile feed (2-col grid, hidden CTA, vivid out-of-stock image,
   JS bottom nav) and adds NO Elementor dependency. Targets only theme-styled
   WooCommerce product-loop classes on archive/category/search/brand. No PHP, no
   template override, no product-query/pagination/URL/canonical/SEO change; real
   `.onsale`/`.outofstock` only. No new animation — the UX-A reduced-motion guard
   already covers the single hover transition, and nothing here animates. No
   `!important` (same-specificity rules placed after the base cascade win on
   desktop). ============================================================ */
@media (min-width: 783px) {
  /* Balanced image framing: a small, uniform inner inset so product shots with
     different canvases read at a more even size. Contain + white ground inherit
     from the base rule — never cropped; out-of-stock images stay vivid. */
  .woocommerce ul.products:not(.eael-post-appender) li.product a img,
  .woocommerce ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail {
    margin-bottom: 6px;
    padding: 10px 12px;
  }

  /* Consistent text insets so title/price align cleanly with the action below. */
  .woocommerce ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title { margin: 0 12px; }
  .woocommerce ul.products:not(.eael-post-appender) li.product .price { margin: 8px 12px 0; }

  /* Action alignment: a clean full-width storefront button pinned to the card
     bottom. The grid stretches items to equal row height and `margin-top: auto`
     pushes the action down, so every card's button lines up across a row.
     Add-to-cart links / AJAX behaviour and the post-add `.added_to_cart` state
     are unchanged — this is layout only. */
  .woocommerce ul.products:not(.eael-post-appender) li.product .button,
  .woocommerce ul.products:not(.eael-post-appender) li.product .added_to_cart {
    align-self: stretch;
    margin: 0 12px 12px;
    margin-top: auto;
    max-width: none;
    min-height: 44px;
  }
}

/* Tablet (783–1023): tighter columns and gap. */
@media (min-width: 783px) and (max-width: 1023px) {
  .woocommerce ul.products.elementor-grid,
  .woocommerce.archive ul.products:not(.eael-post-appender),
  .woocommerce-page.search ul.products:not(.eael-post-appender) {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
}

/* Desktop (1024+): comfortable storefront columns. */
@media (min-width: 1024px) {
  .woocommerce ul.products.elementor-grid,
  .woocommerce.archive ul.products:not(.eael-post-appender),
  .woocommerce-page.search ul.products:not(.eael-post-appender) {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
  }
}

/* Wide desktop (1366+): a touch more air, never sparse/overflowing. */
@media (min-width: 1366px) {
  .woocommerce ul.products.elementor-grid,
  .woocommerce.archive ul.products:not(.eael-post-appender),
  .woocommerce-page.search ul.products:not(.eael-post-appender) {
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 24px;
  }
}

/* ============================================================
   M4 app-like commerce feed polish.
   Hook-rendered modules are visual/navigation aids only: no business claims,
   checkout, product query, URL, RankMath, schema, or H1 changes.
   ============================================================ */
.fotofile-v2-commerce-feed {
  clear: both;
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}

.fotofile-v2-commerce-feed__trust,
.fotofile-v2-promo-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.fotofile-v2-commerce-feed__trust::-webkit-scrollbar,
.fotofile-v2-promo-strip::-webkit-scrollbar,
.fotofile-v2-feed-rail__scroller::-webkit-scrollbar { display: none; }

.fotofile-v2-commerce-feed__trust span,
.fotofile-v2-promo-strip span {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #e4ece8;
  border-radius: 8px;
  background: #f7fbf9;
  color: #245b4b;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.fotofile-v2-commerce-feed__trust span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2a9d75;
}

.fotofile-v2-feed-rail {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: 8px;
  background: #fff;
}

.fotofile-v2-feed-rail__group {
  display: grid;
  gap: 7px;
}

.fotofile-v2-feed-rail__label {
  color: var(--fotofile-v2-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
}

.fotofile-v2-feed-rail__scroller {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.fotofile-v2-feed-rail__chip {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fbfbfb;
  color: var(--fotofile-v2-ink);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.fotofile-v2-feed-rail__chip.is-current {
  border-color: rgba(238, 77, 45, 0.45);
  background: #fff4ef;
  color: var(--fotofile-v2-accent);
}

.fotofile-v2-promo-strip span {
  border-color: #eadfee;
  background: #fbf7fd;
  color: #6a3b79;
}

.woocommerce ul.products:not(.eael-post-appender) li.product {
  border-radius: 8px;
}

.woocommerce ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title,
.woocommerce ul.products:not(.eael-post-appender) li.product .price,
.woocommerce ul.products:not(.eael-post-appender) li.product .button,
.woocommerce ul.products:not(.eael-post-appender) li.product .added_to_cart {
  letter-spacing: 0;
}

.woocommerce ul.products:not(.eael-post-appender) li.product .price ins {
  color: var(--fotofile-v2-price);
}

.woocommerce ul.products:not(.eael-post-appender) li.product .price del {
  text-decoration-thickness: 1px;
}

.fotofile-v2-bottom-nav a {
  position: relative;
}

.fotofile-v2-bottom-nav .fotofile-v2-cart-count {
  top: 3px;
  right: 50%;
  transform: translateX(24px);
}

@media (max-width: 782px) {
  .fotofile-v2-app-shell {
    padding: max(5px, env(safe-area-inset-top)) 10px 8px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 18px rgba(97, 39, 23, 0.16);
  }

  .fotofile-v2-app-shell__top {
    min-height: 38px;
  }

  .fotofile-v2-app-brand .fotofile-v2-brand__name {
    max-width: 36vw;
    font-size: 0.92rem;
  }

  .fotofile-v2-app-shell .fotofile-v2-search,
  .fotofile-v2-app-shell .dgwt-wcas-search-form {
    margin-top: 6px;
  }

  .fotofile-v2-app-shell .fotofile-v2-search {
    min-height: 40px;
    grid-template-columns: minmax(0, 1fr) 42px;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(97, 39, 23, 0.16);
  }

  .fotofile-v2-app-shell .fotofile-v2-search input,
  .fotofile-v2-app-shell .fotofile-v2-search button {
    min-height: 40px;
  }

  .fotofile-v2-commerce-feed {
    margin: -4px 0 12px;
  }

  .fotofile-v2-commerce-feed__trust,
  .fotofile-v2-promo-strip {
    margin-inline: -2px;
    padding-inline: 2px;
  }

  .fotofile-v2-commerce-feed__trust span,
  .fotofile-v2-promo-strip span {
    min-height: 32px;
    padding: 5px 9px;
    font-size: 0.76rem;
  }

  .fotofile-v2-feed-rail {
    margin-inline: -2px;
    padding: 8px;
    border-radius: 8px;
  }

  .fotofile-v2-feed-rail__group {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .fotofile-v2-feed-rail__label {
    font-size: 0.74rem;
  }

  .fotofile-v2-feed-rail__chip {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  .woocommerce .woocommerce-result-count {
    max-width: 46%;
    min-height: 40px;
    line-height: 40px;
    font-size: 0.76rem;
  }

  .woocommerce .woocommerce-ordering {
    margin-bottom: 10px;
  }

  .woocommerce .woocommerce-ordering select {
    min-height: 40px;
    max-width: 48vw;
    padding-block: 7px;
    font-size: 0.76rem;
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product {
    border-radius: 8px;
    background: #fff;
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title {
    margin-inline: 9px;
    font-size: 0.8rem;
    font-weight: 650;
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product .price {
    margin: 5px 9px 10px;
    font-size: 1.02rem;
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product .onsale {
    top: 8px;
    left: 8px;
    border-radius: 7px;
    box-shadow: none;
  }

  .fotofile-v2-bottom-nav {
    min-height: calc(var(--fotofile-v2-bottom-nav) + env(safe-area-inset-bottom));
    padding-top: 5px;
  }

  .fotofile-v2-bottom-nav a {
    min-height: 52px;
    border-radius: 8px;
  }
}

@media (min-width: 783px) {
  .fotofile-v2-commerce-feed {
    gap: 12px;
    margin-bottom: 18px;
  }

  .fotofile-v2-commerce-feed__trust {
    flex-wrap: wrap;
  }

  .fotofile-v2-promo-strip {
    flex-wrap: wrap;
  }

  .fotofile-v2-feed-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
  }
}

/* ============================================================
   M4B marketplace visual delta.
   Visual-only: no product query, URL, H1, SEO head, checkout, claims, or
   template behavior changes.
   ============================================================ */
.fotofile-v2-commerce-feed__headline {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
}

.fotofile-v2-commerce-feed__headline span {
  color: var(--fotofile-v2-ink);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0;
}

.fotofile-v2-commerce-feed__headline small {
  color: var(--fotofile-v2-muted);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0;
  text-align: right;
}

.fotofile-v2-feed-rail__chip {
  flex-direction: column;
  gap: 6px;
  width: 74px;
  min-height: 74px;
  padding: 8px 6px;
  white-space: normal;
}

.fotofile-v2-feed-rail__icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff0e8, #ffe2d5);
  color: var(--fotofile-v2-accent);
}

.fotofile-v2-feed-rail__icon::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 5px;
  box-shadow: inset 0 -5px 0 rgba(238, 77, 45, 0.14);
}

.fotofile-v2-feed-rail__chip:nth-child(2n) .fotofile-v2-feed-rail__icon {
  background: linear-gradient(135deg, #eef8f4, #dcf1ea);
  color: #218763;
}

.fotofile-v2-feed-rail__chip:nth-child(3n) .fotofile-v2-feed-rail__icon {
  background: linear-gradient(135deg, #fff6d7, #ffe7a3);
  color: #9b6a00;
}

.fotofile-v2-feed-rail__text {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 0.72rem;
  line-height: 1.18;
  text-align: center;
  text-overflow: ellipsis;
}

.fotofile-v2-promo-strip span {
  position: relative;
  min-height: 42px;
  border: 1px dashed rgba(238, 77, 45, 0.45);
  border-left: 4px solid var(--fotofile-v2-accent);
  background: linear-gradient(135deg, #fff7f2, #fff);
  color: #9c341d;
}

.fotofile-v2-promo-strip span::before,
.fotofile-v2-promo-strip span::after {
  content: "";
  position: absolute;
  left: -7px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #f7f7f7;
}

.fotofile-v2-promo-strip span::before { top: -6px; }
.fotofile-v2-promo-strip span::after { bottom: -6px; }

@media (max-width: 782px) {
  .fotofile-v2-app-shell {
    display: grid;
    gap: 7px;
    padding: max(5px, env(safe-area-inset-top)) 10px 9px;
  }

  .fotofile-v2-app-shell__top {
    min-height: 36px;
  }

  .fotofile-v2-drawer-toggle,
  .fotofile-v2-app-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
  }

  .fotofile-v2-app-shell .fotofile-v2-search {
    width: 100%;
    min-height: 46px;
    grid-template-columns: minmax(0, 1fr) 46px;
    margin-top: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(97, 39, 23, 0.2);
  }

  .fotofile-v2-app-shell .fotofile-v2-search input,
  .fotofile-v2-app-shell .fotofile-v2-search button {
    min-height: 46px;
  }

  .fotofile-v2-app-shell .fotofile-v2-search input {
    padding-left: 15px;
    color: var(--fotofile-v2-ink);
    font-size: 0.88rem;
    font-weight: 650;
  }

  .fotofile-v2-app-shell .fotofile-v2-search input::placeholder {
    color: #7a7a7a;
    opacity: 1;
  }

  .fotofile-v2-app-shell .fotofile-v2-search button {
    border-radius: 999px;
    background: #fff3ee;
  }

  .fotofile-v2-commerce-feed {
    gap: 8px;
    margin: -2px -4px 12px;
    padding: 8px;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff7f2 0, #fff 78px);
  }

  .fotofile-v2-commerce-feed__headline {
    align-items: start;
    padding-inline: 2px;
  }

  .fotofile-v2-commerce-feed__headline span {
    font-size: 1.05rem;
  }

  .fotofile-v2-commerce-feed__headline small {
    max-width: 48%;
    font-size: 0.68rem;
    line-height: 1.25;
  }

  .fotofile-v2-commerce-feed__trust span {
    border-color: rgba(238, 77, 45, 0.16);
    background: #fff;
    color: #6b3a2e;
    box-shadow: 0 1px 0 rgba(238, 77, 45, 0.06);
  }

  .fotofile-v2-feed-rail {
    border: 0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05);
  }

  .fotofile-v2-feed-rail__group {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .fotofile-v2-feed-rail__label {
    color: #5d5d5d;
    font-size: 0.75rem;
  }

  .fotofile-v2-promo-strip {
    padding-block: 1px;
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product {
    overflow: hidden;
    border: 1px solid #efefef;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product a img,
  .woocommerce ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail {
    aspect-ratio: 1 / 1;
    padding: 8px;
    background: #fff;
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title {
    min-height: 2.45em;
    margin: 1px 8px 0;
    font-size: 0.78rem;
    line-height: 1.22;
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product .price {
    margin: 5px 8px 9px;
    color: var(--fotofile-v2-price);
    font-size: 1.1rem;
    line-height: 1.18;
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product .star-rating {
    color: #f5a400;
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product .onsale {
    min-height: 24px;
    padding: 4px 7px;
    border-radius: 6px;
    background: var(--fotofile-v2-sale);
    font-size: 0.66rem;
    font-weight: 850;
  }

  .fotofile-v2-bottom-nav {
    border-top: 1px solid rgba(238, 77, 45, 0.12);
    box-shadow: 0 -4px 18px rgba(17, 17, 17, 0.08);
  }

  .fotofile-v2-bottom-nav a.is-active {
    background: #fff4ef;
    color: var(--fotofile-v2-accent);
  }
}

@media (min-width: 783px) {
  .fotofile-v2-commerce-feed {
    padding: 14px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: 8px;
    background: #fff;
  }

  .fotofile-v2-feed-rail__chip {
    width: auto;
    min-height: 62px;
    flex-direction: row;
    justify-content: flex-start;
    padding-inline: 10px;
  }

  .fotofile-v2-feed-rail__text {
    font-size: 0.78rem;
    text-align: left;
  }
}

/* ============================================================
   M4C visual hotfix: remove claim/promo clutter and keep the
   pre-loop module short so product cards appear sooner.
   ============================================================ */
.fotofile-v2-commerce-feed__trust,
.fotofile-v2-promo-strip {
  display: none;
}

.fotofile-v2-commerce-feed {
  gap: 6px;
  margin-bottom: 10px;
}

.fotofile-v2-commerce-feed__headline {
  align-items: center;
  padding: 0;
}

.fotofile-v2-commerce-feed__headline span {
  font-size: 0.95rem;
}

.fotofile-v2-commerce-feed__headline small {
  font-size: 0.72rem;
  font-weight: 600;
}

.fotofile-v2-feed-rail {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.fotofile-v2-feed-rail__group {
  gap: 5px;
}

.fotofile-v2-feed-rail__label {
  font-size: 0.72rem;
  font-weight: 750;
}

.fotofile-v2-feed-rail__scroller {
  gap: 6px;
}

.fotofile-v2-feed-rail__chip {
  width: auto;
  min-height: 32px;
  flex-direction: row;
  gap: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
}

.fotofile-v2-feed-rail__icon {
  display: none;
}

.fotofile-v2-feed-rail__text {
  font-size: 0.76rem;
  line-height: 1.1;
  text-align: left;
}

@media (max-width: 782px) {
  .fotofile-v2-commerce-feed {
    margin: -2px 0 8px;
    padding: 6px 0 2px;
    border-radius: 0;
    background: transparent;
  }

  .fotofile-v2-commerce-feed__headline small {
    max-width: 46%;
  }

  .fotofile-v2-feed-rail {
    margin-inline: 0;
  }

  .fotofile-v2-feed-rail__label {
    display: none;
  }
}

@media (min-width: 783px) {
  .fotofile-v2-commerce-feed {
    padding: 8px 0 10px;
    border: 0;
    background: transparent;
  }

  .fotofile-v2-feed-rail {
    display: block;
  }
}

/* ============================================================
   M5 — Product card marketplace polish
   (CUSTOM-THEME-V2-M5-PRODUCT-CARD-MARKETPLACE-POLISH)

   Appended last so it wins on equal specificity over the earlier
   milestone blocks WITHOUT editing them. Presentation only and scoped
   strictly to the archive/category/search/shop product loop
   (`.woocommerce ul.products:not(.eael-post-appender) li.product …`).
   The home `eael-post-appender` swiper is excluded; cart/checkout use
   `.shop_table`, not `ul.products`, so line items are never touched.

   No clutter added above the loop. No new markup. No query mutation, no
   H1, no URL/canonical/robots/schema/title/meta change, no fabricated
   sold/rating/coupon/free-shipping/flash-sale/countdown text. The only
   data-bearing addition is the real `-XX%` sale flash computed in
   `inc/product-card.php` from truthful WooCommerce regular/sale prices
   (fails closed for variable/complex products).
   ============================================================ */

/* Card frame: crisp hairline, edge-clipped media — reads as a marketplace
   tile, not a web panel. Applies at all widths; mobile/desktop tune below. */
.woocommerce ul.products:not(.eael-post-appender) li.product {
  overflow: hidden;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: 10px;
}

/* Image hierarchy: near edge-to-edge inside the 1:1 frame so the product is
   the loudest element on the card. `contain` is kept (from the base rule) so
   cameras/lenses are never cropped; only the inner inset shrinks. */
.woocommerce ul.products:not(.eael-post-appender) li.product a img,
.woocommerce ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail {
  padding: 4px;
  border-bottom: 1px solid var(--fotofile-v2-line);
}

/* Price: the strongest text on the card (clearly above the title) — accent
   colour, larger, heavy. Styles only WooCommerce's real `.price` output. */
.woocommerce ul.products:not(.eael-post-appender) li.product .price {
  gap: 5px;
  color: var(--fotofile-v2-price);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.15;
}

.woocommerce ul.products:not(.eael-post-appender) li.product .price ins {
  text-decoration: none;
  color: var(--fotofile-v2-price);
}

/* Original price: small, muted, struck — truthful regular price, de-emphasised
   next to the sale price. */
.woocommerce ul.products:not(.eael-post-appender) li.product .price del {
  color: var(--fotofile-v2-ink-soft);
  font-size: 0.74rem;
  font-weight: 500;
  opacity: 1;
}

/* Title: calm 2-line clamp under the strong price (hierarchy: image > price >
   title). Reserved height keeps every card the same height so prices align. */
.woocommerce ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Real WooCommerce star rating only — lightly tinted, never fabricated. */
.woocommerce ul.products:not(.eael-post-appender) li.product .star-rating {
  color: #f5a400;
}

/* Sale badge: compact solid pill. The `-XX%` percentage variant (from the
   truthful filter) reads a touch heavier — it is the marketplace signal. */
.woocommerce ul.products:not(.eael-post-appender) li.product .onsale {
  min-width: 0;
  min-height: 0;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--fotofile-v2-sale);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.4;
}

.woocommerce ul.products:not(.eael-post-appender) li.product .onsale.fotofile-v2-onsale--pct {
  font-weight: 850;
}

/* --- Mobile: denser 2-column feed (375 / 390 / 430) --- */
@media (max-width: 782px) {
  /* Tighter gutter for a Shopee/Lazada-grade dense feed. The base grid rule
     uses `!important` (Elementor/Woo width override), so this must match it. */
  .woocommerce ul.products.elementor-grid,
  .woocommerce.archive ul.products:not(.eael-post-appender),
  .woocommerce-page.search ul.products:not(.eael-post-appender) {
    gap: 8px !important;
  }

  /* Less wasted vertical whitespace; subtle tile shadow for separation. */
  .woocommerce ul.products:not(.eael-post-appender) li.product {
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05);
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product a img,
  .woocommerce ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail {
    margin-bottom: 7px;
    padding: 3px;
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title {
    min-height: 2.4em;
    margin: 0 8px;
    font-size: 0.78rem;
    line-height: 1.2;
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product .price {
    margin: 4px 8px 9px;
    font-size: 1.08rem;
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product .onsale {
    top: 7px;
    left: 7px;
  }
}

/* --- Desktop / tablet: keep the grid clean, cards never oversized (768 /
       1024 / 1366). Compact pill CTA pinned to the card bottom is inherited
       from the earlier parity block; M5 only strengthens price/image/title. --- */
@media (min-width: 783px) {
  .woocommerce ul.products:not(.eael-post-appender) li.product a img,
  .woocommerce ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail {
    margin-bottom: 8px;
    padding: 8px;
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title {
    margin: 0 12px;
    font-size: 0.9rem;
  }

  .woocommerce ul.products:not(.eael-post-appender) li.product .price {
    margin: 8px 12px 0;
    font-size: 1.15rem;
  }

  /* Compact pill CTA (preserves add-to-cart / read-more anchors & AJAX). */
  .woocommerce ul.products:not(.eael-post-appender) li.product .button,
  .woocommerce ul.products:not(.eael-post-appender) li.product .added_to_cart {
    margin: 10px 12px 12px;
    margin-top: auto;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
  }
}

/* ============================================================
   M6 - Cart/checkout visual polish
   (CUSTOM-THEME-V2-M6-CART-CHECKOUT-VISUAL-POLISH)

   CSS-only, scoped to WooCommerce cart and checkout body classes. This does
   not create templates, reorder checkout blocks, hide notices/errors, submit
   forms, or alter payment/shipping/order/coupon/cart logic. WooCommerce keeps
   all form names, buttons, validation, totals, gateways, terms, and notices.
   ============================================================ */

body.woocommerce-cart,
body.woocommerce-checkout {
  --fotofile-v2-commerce-shadow: 0 8px 24px rgba(17, 24, 39, 0.07);
  --fotofile-v2-commerce-border: #eceff3;
  background: #f6f7f9;
}

body.woocommerce-cart .fotofile-v2-main,
body.woocommerce-checkout .fotofile-v2-main {
  background: #f6f7f9;
}

body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce {
  max-width: 1160px;
  margin-inline: auto;
}

body.woocommerce-cart .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-notices-wrapper {
  margin-bottom: 14px;
}

body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error {
  overflow: visible;
  margin-bottom: 14px;
  border: 1px solid var(--fotofile-v2-commerce-border);
  border-left: 4px solid var(--fotofile-v2-accent);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.04);
  line-height: 1.5;
}

body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .checkout_coupon,
body.woocommerce-cart .woocommerce-form-coupon,
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #payment,
body.woocommerce-checkout .checkout_coupon,
body.woocommerce-checkout .woocommerce-form-login,
body.woocommerce-checkout .woocommerce-form-coupon {
  border: 1px solid var(--fotofile-v2-commerce-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--fotofile-v2-commerce-shadow);
}

body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart_totals,
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout #payment {
  padding: 18px;
}

body.woocommerce-cart table.shop_table,
body.woocommerce-checkout table.shop_table {
  overflow: hidden;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  background: #fff;
}

body.woocommerce-cart table.shop_table th,
body.woocommerce-cart table.shop_table td,
body.woocommerce-checkout table.shop_table th,
body.woocommerce-checkout table.shop_table td {
  border-color: #edf0f3;
  line-height: 1.45;
}

body.woocommerce-cart table.shop_table th,
body.woocommerce-checkout table.shop_table th {
  color: var(--fotofile-v2-ink-soft);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

body.woocommerce-cart .woocommerce-cart-form .product-name a,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
  color: var(--fotofile-v2-ink);
  font-weight: 650;
}

body.woocommerce-cart .product-price,
body.woocommerce-cart .product-subtotal,
body.woocommerce-cart .cart_totals .order-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total {
  color: var(--fotofile-v2-price);
  font-weight: 800;
}

body.woocommerce-cart .quantity .qty,
body.woocommerce-cart input.input-text,
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-checkout .select2-container .select2-selection--single {
  min-height: 44px;
  border: 1px solid #dfe4ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  font-size: 0.95rem;
}

body.woocommerce-checkout textarea {
  min-height: 96px;
}

body.woocommerce-cart input.input-text:focus,
body.woocommerce-checkout input.input-text:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-checkout select:focus {
  border-color: var(--fotofile-v2-accent);
  outline: 2px solid rgba(238, 77, 45, 0.16);
  outline-offset: 0;
}

body.woocommerce-cart .coupon,
body.woocommerce-checkout .checkout_coupon,
body.woocommerce-checkout .woocommerce-form-coupon {
  gap: 10px;
}

body.woocommerce-cart .coupon .input-text {
  min-width: min(100%, 240px);
  padding-inline: 12px;
}

body.woocommerce-cart .button,
body.woocommerce-cart button.button,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-checkout .button,
body.woocommerce-checkout button.button,
body.woocommerce-checkout #place_order {
  min-height: 44px;
  border-radius: 999px;
  font-weight: 750;
  letter-spacing: 0;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-checkout #place_order {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  background: var(--fotofile-v2-accent);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 10px 22px rgba(238, 77, 45, 0.22);
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-checkout #place_order:hover {
  background: #d93d20;
  color: #fff;
}

body.woocommerce-cart .cart_totals h2,
body.woocommerce-checkout h3,
body.woocommerce-checkout #order_review_heading {
  margin: 0 0 12px;
  color: var(--fotofile-v2-ink);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0;
}

body.woocommerce-cart .cart-collaterals .cart_totals {
  float: none;
  width: min(100%, 420px);
  margin-left: auto;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout #payment ul.payment_methods {
  margin-bottom: 14px;
}

body.woocommerce-checkout #payment ul.payment_methods {
  border-bottom-color: #edf0f3;
}

body.woocommerce-checkout #payment ul.payment_methods li {
  padding: 10px 0;
}

body.woocommerce-checkout #payment div.payment_box {
  margin: 8px 0 0;
  border-radius: 8px;
  background: #f7f8fa;
  color: var(--fotofile-v2-ink);
  line-height: 1.55;
}

body.woocommerce-checkout #payment div.form-row {
  padding: 0;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  color: var(--fotofile-v2-ink-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a,
body.woocommerce-cart .woocommerce-shipping-calculator a {
  color: var(--fotofile-v2-accent);
  font-weight: 700;
}

@media (max-width: 782px) {
  body.woocommerce-cart,
  body.woocommerce-checkout {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  body.woocommerce-cart .fotofile-v2-main,
  body.woocommerce-checkout .fotofile-v2-main {
    padding-inline: 10px;
  }

  body.woocommerce-cart .woocommerce,
  body.woocommerce-checkout .woocommerce {
    font-size: 0.93rem;
  }

  body.woocommerce-cart .woocommerce-cart-form,
  body.woocommerce-cart .cart_totals,
  body.woocommerce-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout .woocommerce-shipping-fields,
  body.woocommerce-checkout .woocommerce-additional-fields,
  body.woocommerce-checkout .woocommerce-checkout-review-order,
  body.woocommerce-checkout #payment {
    padding: 14px;
    border-radius: 8px;
  }

  body.woocommerce-cart .woocommerce-cart-form {
    overflow-x: clip;
  }

  body.woocommerce-cart table.shop_table tr.cart_item {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px 12px;
    padding: 12px;
  }

  body.woocommerce-cart table.shop_table tr.cart_item td {
    min-width: 0;
  }

  body.woocommerce-cart table.shop_table tr.cart_item td.product-thumbnail img {
    width: 64px;
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
  }

  body.woocommerce-cart table.shop_table td.actions {
    display: grid;
    gap: 10px;
    padding-top: 14px;
  }

  body.woocommerce-cart table.shop_table td.actions .coupon {
    display: grid;
    gap: 8px;
  }

  body.woocommerce-cart table.shop_table td.actions .coupon .input-text,
  body.woocommerce-cart table.shop_table td.actions .coupon .button,
  body.woocommerce-cart table.shop_table td.actions > .button,
  body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
  body.woocommerce-checkout #place_order {
    width: 100%;
  }

  body.woocommerce-cart .cart-collaterals .cart_totals {
    width: 100%;
  }

  body.woocommerce-checkout .form-row-first,
  body.woocommerce-checkout .form-row-last {
    float: none;
    width: 100%;
  }

  body.woocommerce-checkout .form-row {
    margin-bottom: 12px;
  }

  body.woocommerce-checkout .woocommerce-checkout-review-order-table tr {
    align-items: flex-start;
  }

  body.woocommerce-checkout #payment ul.payment_methods li {
    min-height: 44px;
  }
}

@media (min-width: 783px) {
  body.woocommerce-cart .woocommerce-cart-form,
  body.woocommerce-cart .cart_totals,
  body.woocommerce-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout .woocommerce-shipping-fields,
  body.woocommerce-checkout .woocommerce-additional-fields,
  body.woocommerce-checkout .woocommerce-checkout-review-order,
  body.woocommerce-checkout #payment {
    border-radius: 10px;
  }

  body.woocommerce-checkout form.checkout {
    display: block;
  }
}

/* ============================================================
   M7 - Search / category / filter-sort UX refinement
   (CUSTOM-THEME-V2-M7-SEARCH-CATEGORY-FILTER-SORT-UX)

   Additive only: hook-rendered context/chips plus CSS for WooCommerce's
   native result-count, ordering, no-results, and pagination surfaces.
   No template override, no query mutation, no duplicate sort/result-count,
   no H1, no product-card hierarchy rewrite, no cart/checkout/single change.
   ============================================================ */

.fotofile-v2-browse-context {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0 4px;
}

.fotofile-v2-browse-context__label {
  flex: 0 0 auto;
  color: var(--fotofile-v2-muted);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0;
}

.fotofile-v2-browse-context__value {
  min-width: 0;
  overflow: hidden;
  color: var(--fotofile-v2-ink);
  font-size: 0.98rem;
  font-weight: 850;
  letter-spacing: 0;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fotofile-v2-active-filters {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 4px 0 2px;
}

.fotofile-v2-active-filters__label {
  color: var(--fotofile-v2-muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0;
}

.fotofile-v2-active-filters__scroller {
  display: flex;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.fotofile-v2-active-filters__scroller::-webkit-scrollbar { display: none; }

.fotofile-v2-active-filters__chip {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 34px;
  max-width: min(78vw, 360px);
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(238, 77, 45, 0.24);
  border-radius: 999px;
  background: #fff7f3;
  color: var(--fotofile-v2-accent);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.25;
  text-decoration: none;
}

.fotofile-v2-active-filters__chip span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fotofile-v2-active-filters__chip span[aria-hidden="true"] {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: rgba(238, 77, 45, 0.12);
  font-size: 0.78rem;
  line-height: 1;
}

body.woocommerce-shop .woocommerce .woocommerce-info,
body.tax-product_cat .woocommerce .woocommerce-info,
body.tax-product_tag .woocommerce .woocommerce-info,
body[class*="tax-product_"] .woocommerce .woocommerce-info,
body.woocommerce-page.search .woocommerce .woocommerce-info {
  border: 1px solid var(--fotofile-v2-line);
  border-left: 4px solid var(--fotofile-v2-accent);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(17, 24, 39, 0.05);
  color: var(--fotofile-v2-ink);
  line-height: 1.55;
}

body.woocommerce-shop .woocommerce .woocommerce-pagination a.page-numbers,
body.woocommerce-shop .woocommerce .woocommerce-pagination span.page-numbers,
body.tax-product_cat .woocommerce .woocommerce-pagination a.page-numbers,
body.tax-product_cat .woocommerce .woocommerce-pagination span.page-numbers,
body.tax-product_tag .woocommerce .woocommerce-pagination a.page-numbers,
body.tax-product_tag .woocommerce .woocommerce-pagination span.page-numbers,
body[class*="tax-product_"] .woocommerce .woocommerce-pagination a.page-numbers,
body[class*="tax-product_"] .woocommerce .woocommerce-pagination span.page-numbers,
body.woocommerce-page.search .woocommerce .woocommerce-pagination a.page-numbers,
body.woocommerce-page.search .woocommerce .woocommerce-pagination span.page-numbers {
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 782px) {
  .fotofile-v2-browse-context {
    padding-inline: 2px;
  }

  .fotofile-v2-browse-context__value {
    font-size: 0.92rem;
  }

  .fotofile-v2-active-filters {
    margin-top: -2px;
  }

  body.woocommerce-shop .woocommerce .woocommerce-result-count,
  body.tax-product_cat .woocommerce .woocommerce-result-count,
  body.tax-product_tag .woocommerce .woocommerce-result-count,
  body[class*="tax-product_"] .woocommerce .woocommerce-result-count,
  body.woocommerce-page.search .woocommerce .woocommerce-result-count,
  body.woocommerce-shop .woocommerce .woocommerce-ordering,
  body.tax-product_cat .woocommerce .woocommerce-ordering,
  body.tax-product_tag .woocommerce .woocommerce-ordering,
  body[class*="tax-product_"] .woocommerce .woocommerce-ordering,
  body.woocommerce-page.search .woocommerce .woocommerce-ordering {
    position: sticky;
    top: 8px;
    z-index: 15;
  }

  body.woocommerce-shop .woocommerce .woocommerce-result-count,
  body.tax-product_cat .woocommerce .woocommerce-result-count,
  body.tax-product_tag .woocommerce .woocommerce-result-count,
  body[class*="tax-product_"] .woocommerce .woocommerce-result-count,
  body.woocommerce-page.search .woocommerce .woocommerce-result-count {
    max-width: calc(100% - 150px);
    padding: 0 10px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
    backdrop-filter: blur(8px);
  }

  body.woocommerce-shop .woocommerce .woocommerce-ordering,
  body.tax-product_cat .woocommerce .woocommerce-ordering,
  body.tax-product_tag .woocommerce .woocommerce-ordering,
  body[class*="tax-product_"] .woocommerce .woocommerce-ordering,
  body.woocommerce-page.search .woocommerce .woocommerce-ordering {
    max-width: 142px;
    margin-bottom: 14px;
  }

  body.woocommerce-shop .woocommerce .woocommerce-ordering select,
  body.tax-product_cat .woocommerce .woocommerce-ordering select,
  body.tax-product_tag .woocommerce .woocommerce-ordering select,
  body[class*="tax-product_"] .woocommerce .woocommerce-ordering select,
  body.woocommerce-page.search .woocommerce .woocommerce-ordering select {
    width: 100%;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
  }

  body.woocommerce-shop .woocommerce .products,
  body.tax-product_cat .woocommerce .products,
  body.tax-product_tag .woocommerce .products,
  body[class*="tax-product_"] .woocommerce .products,
  body.woocommerce-page.search .woocommerce .products {
    scroll-margin-top: 76px;
  }
}

@media (min-width: 783px) {
  .fotofile-v2-browse-context {
    padding-top: 4px;
  }

  .fotofile-v2-active-filters {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .fotofile-v2-active-filters__label {
    padding-top: 1px;
  }
}

/* ============================================================
   M8 - Cart / Checkout app-like order-flow refinement
   (CUSTOM-THEME-V2-M8-CART-CHECKOUT-ORDER-FLOW)

   Two independent surface passes live in this block:
   - CART  = M8-P8 (CART-ONLY aggressive app-grammar rebuild) - below.
   - CHECKOUT = M8-P5 (Option A: kept as the live staging baseline; NOT
     modified by the cart pass - verified byte-identical).
   M8-P8 recomposed only the CART; the CHECKOUT block is unchanged.

   Written against the REAL staging DOM (P1-P3 guessed selectors and
   failed). Key real-DOM facts driving this pass:
   - Cart is plain WooCommerce (body.woocommerce-cart, NO eael). Rows are
     tr.woocommerce-cart-form__cart-item.cart_item with td.product-*.
   - Cart quantity is NOT uniform: editable items use input.qty[type=number];
     fixed-qty items use input.qty[type=hidden]. P3 styled bare `.qty`, which
     drew an empty box around the HIDDEN input -> the "floating quantity" bug.
     P4 styles ONLY input.qty[type="number"].
   - Checkout is wrapped by Essential Addons (body...eael-woo-checkout), whose
     CSS outranked the earlier class-based rules. P4 uses the real IDs
     (#customer_details / #order_review / #payment) plus surgical !important
     on card/layout props ONLY, to win the cascade over EAEL. (Cart needs no
     !important - no EAEL there.)
   - Real gateways: li.wc_payment_method.payment_method_kasikorn_kpgw[_qr],
     radios are input.input-radio[name="payment_method"], logos are label img.
   - Bottom CTA is a STRONG IN-FLOW button (not sticky) per the P3 feedback.

   Still CSS-ONLY, append-only, no PHP/JS, no template override. Restyles
   only native WooCommerce/EAEL-rendered markup. Never hides notices/errors,
   terms/privacy/legal, payment/shipping radios, coupon inputs, or the single
   native #place_order; never duplicates totals or place-order; never changes
   field names/ids/values/selected-state/validation/totals/submit; no fake data.
   ============================================================ */

/* ============================================================
   CART  (M8-P8 app-grammar rebuild + M8-P9A functional controls + M8-P9B bar)

   P9A added, on top of P8 (Human function gate REQUEST_CHANGES - no qty +/-,
   no sticky checkout bar): (1) REAL − / + quantity controls (theme.js injects
   functional buttons for editable rows only; styled base block above). P9A also
   added a sticky bottom SUMMARY bar, but the Human gate rejected it as too tall
   (it included subtotal/shipping/destination/change-address/heading). P9B
   REPLACES that with a MINIMAL fixed bottom checkout bar showing ONLY the final
   order total (left) + the native checkout CTA (right); the breakdown is
   deferred to Checkout. The quantity controls are UNCHANGED from P9A. Product
   SELECTION checkboxes remain intentionally NOT implemented (would be fake UI -
   WooCommerce has no native partial-cart checkout);
   reported BLOCKED_PENDING_SELECTION_ARCHITECTURE.

   Plain WooCommerce (body.woocommerce-cart, NO eael). The cart PAGE renders
   through index.php (NOT woocommerce.php - is_cart() is not is_woocommerce()),
   so the real wrapper chain is:
     main.fotofile-v2-main.fotofile-v2-container
       > article.fotofile-v2-entry            (padding:20px; white bg)
         > h2.fotofile-v2-entry__title         ("Cart" - the heading the Human
                                                 calls the "H1"; there is NO real
                                                 <h1> on cart, and cart is noindex)
         > div.fotofile-v2-entry__content      > div.woocommerce > form...

   P7 went full-bleed but only flattened .fotofile-v2-main / .woocommerce / the
   form - it NEVER flattened the .fotofile-v2-entry article (20px padding + white
   bg), so the cart still sat inside a padded white PAGE panel and read like a
   website. The Human visual gate (P7-FIX) returned REQUEST_CHANGES vs Lazada/
   Shopee references. P8 closes the remaining grammar gaps, mobile + cart-only:
   - A) compact app cart chrome: slim the orange app-shell header and SUPPRESS
     the big mobile search bar on the cart screen ONLY (search stays on every
     other page; account/cart/drawer icons untouched) so the page reads as an
     app cart, not a listing page.
   - B) minimize the page heading visually (small quiet app title, kept in the
     DOM - no display:none on the heading) and FLATTEN the outer white panel
     (.fotofile-v2-entry padding/bg removed) so the list starts at the app edge.
   - C) edge-to-edge white items sheet, hairline row dividers, no per-row
     radius/shadow (kept from P7, now truly full-bleed).
   - D) row grammar: 84px image left, title beside, muted unit price, accent
     line-subtotal bottom-LEFT, app-pill quantity aligned to the RIGHT (P7 put
     quantity on the left; the Human rejected the centered/left quantity).
   - E) quantity: app-pill control aligned right; styles ONLY
     input.qty[type="number"] so fixed-qty hidden inputs draw no empty box.
   - F) coupon utility sheet, quiet secondary Update-cart, compact totals sheet,
     strong full-width in-flow proceed CTA reading as an app checkout summary.

   CSS-ONLY. Real DOM selectors only. Hides only the mobile thead, the td::before
   data-title pseudo-labels, and (cart-page-only) the redundant header search -
   never notices/errors/legal or any cart control. No field/logic change, no
   duplicated totals/place-order, no fake selection/shop/promo rows, no fake
   plus/minus buttons. The P5 CHECKOUT block below is UNCHANGED (byte-identical).
   ============================================================ */

/* ---- Base (all viewports): title / price / subtotal hierarchy ---- */
body.woocommerce-cart .woocommerce-cart-form .product-name a {
  color: var(--fotofile-v2-ink, #222);
  font-weight: 650;
  text-decoration: none;
}
body.woocommerce-cart .woocommerce-cart-form .product-name a:hover,
body.woocommerce-cart .woocommerce-cart-form .product-name a:focus-visible {
  color: var(--fotofile-v2-accent, #ee4d2d);
}
body.woocommerce-cart .woocommerce-cart-form .product-subtotal .amount {
  color: var(--fotofile-v2-price, #ee4d2d);
  font-weight: 800;
}

/* P9E: truthful regular/sale unit price (all viewports). The <del>/<ins> pair
   is emitted ONLY by the display-only woocommerce_cart_item_price filter when
   the product is genuinely on sale (real regular > active price); non-sale rows
   keep a single price and never reach these rules. Regular = muted strike,
   current = accent. Nothing here fabricates a discount. */
body.woocommerce-cart .woocommerce-cart-form td.product-price del {
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-weight: 400;
  text-decoration: line-through;
}
body.woocommerce-cart .woocommerce-cart-form td.product-price del .amount {
  color: inherit;
}
body.woocommerce-cart .woocommerce-cart-form td.product-price ins {
  text-decoration: none;
  font-weight: 700;
  color: var(--fotofile-v2-price, #ee4d2d);
}

/* Coupon utility (native input/button unchanged) */
body.woocommerce-cart .woocommerce-cart-form .actions .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
body.woocommerce-cart .woocommerce-cart-form .actions .coupon #coupon_code {
  min-height: 44px;
  flex: 1 1 150px;
  border: 1px solid var(--fotofile-v2-line, #ececec);
  border-radius: var(--fotofile-v2-radius-sm, 9px);
}
/* Update-cart kept quiet / secondary */
body.woocommerce-cart .woocommerce-cart-form .actions button[name="update_cart"] {
  background: transparent;
  color: var(--fotofile-v2-muted, #6b6b6b);
  border: 1px solid var(--fotofile-v2-line, #ececec);
  font-weight: 600;
}

/* P9F: in-flight "updating" state while the debounced − / + auto-press of the
   native Update-cart button round-trips to WooCommerce. Dim + lock the form to
   prevent double submits; WooCommerce replaces the form on success so the class
   clears itself. Display-only feedback — totals are whatever WooCommerce
   re-renders (never computed in JS). */
body.woocommerce-cart .woocommerce-cart-form.fotofile-v2-cart-updating {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Totals: strong grand total + truthful discount (real Woo rows only) */
body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
  padding-top: 12px;
  border-top: 1px solid var(--fotofile-v2-line, #ececec);
  font-size: 1.05rem;
}
body.woocommerce-cart .cart_totals .order-total .amount {
  color: var(--fotofile-v2-price, #ee4d2d);
  font-size: 1.35rem;
  font-weight: 800;
}
body.woocommerce-cart .cart_totals .cart-discount .amount {
  color: #1a7f37;
  font-weight: 700;
}

/* Proceed-to-checkout: EXISTING native link, strong (not duplicated) */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 15px 20px;
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  background: var(--fotofile-v2-accent, #ee4d2d);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
}

/* Empty cart: quiet honest polish (no fake merchandising) */
body.woocommerce-cart .cart-empty.woocommerce-info { font-size: 1rem; }
body.woocommerce-cart .return-to-shop .button {
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--fotofile-v2-radius-sm, 9px);
}

/* ============================================================
   P9A: real quantity stepper (all viewports)

   The − / + buttons are REAL functional controls injected by theme.js
   (`.fotofile-v2-qty-btn`) on the cart page, for EDITABLE rows only. They are
   NOT CSS pseudo-elements. The group styling is gated with :has(input.qty
   [type="number"]) so fixed-qty rows (hidden input, no buttons) draw no box.
   theme.js only sets the adjacent input's value and enables the native
   "Update cart" button - it never auto-submits, ajaxes, or removes items.
   ============================================================ */
body.woocommerce-cart .woocommerce-cart-form td.product-quantity .quantity:has(input.qty[type="number"]) {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--fotofile-v2-line, #d9dce1);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
body.woocommerce-cart .fotofile-v2-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: #f6f7f9;
  color: var(--fotofile-v2-ink, #222);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
body.woocommerce-cart .fotofile-v2-qty-btn:hover { background: #eceef1; }
body.woocommerce-cart .woocommerce-cart-form td.product-quantity input.qty[type="number"] {
  width: 46px;
  min-height: 40px;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  text-align: center;
  background: #fff;
  font-weight: 700;
  -moz-appearance: textfield;
}
/* hide the native number spinners (redundant with the real − / + buttons) */
body.woocommerce-cart .woocommerce-cart-form td.product-quantity input.qty[type="number"]::-webkit-outer-spin-button,
body.woocommerce-cart .woocommerce-cart-form td.product-quantity input.qty[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================================
   MOBILE: full-width marketplace app cart screen
   ============================================================ */
@media (max-width: 782px) {
  /* FULL-BLEED: kill outer gutters + the centered white panel.
     Scoped to the MAIN content element only (it carries both
     .fotofile-v2-main and .fotofile-v2-container). The bare
     .fotofile-v2-container is a SHARED wrapper used by header.php and
     footer.php, so it must NOT be targeted here or the cart-page
     header/search/footer would lose their centered width + padding. */
  body.woocommerce-cart .fotofile-v2-main.fotofile-v2-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  body.woocommerce-cart .woocommerce {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  body.woocommerce-cart form.woocommerce-cart-form {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  /* P8-A: compact app cart chrome. Slim the orange app-shell header and
     suppress the big mobile search bar on the CART SCREEN ONLY so the page
     reads as an app cart, not a website listing page. Cart-only scope means
     search is untouched on every other page; the account/cart icons and the
     drawer toggle inside .fotofile-v2-app-shell__top stay fully functional.
     The search control is not part of the cart action flow, so hiding it here
     removes no cart functionality. */
  body.woocommerce-cart .fotofile-v2-app-shell {
    padding-top: max(4px, env(safe-area-inset-top));
    padding-bottom: 6px;
  }
  body.woocommerce-cart .fotofile-v2-app-shell .fotofile-v2-search { display: none; }

  /* P8-B: flatten the outer white PAGE panel so the cart list starts at the
     app content edge. .fotofile-v2-entry (article) carried padding:20px + a
     white background -> the "still feels like a WooCommerce page" panel. */
  body.woocommerce-cart .fotofile-v2-entry {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body.woocommerce-cart .fotofile-v2-entry__content { margin: 0; }

  /* P8-B: minimize the page heading visually (kept in the DOM - no
     display:none on the heading; cart has no real <h1> and is noindex).
     Reads as a small quiet app screen title on the gray canvas. */
  body.woocommerce-cart .fotofile-v2-entry__title {
    margin: 0;
    padding: 12px 12px 8px;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fotofile-v2-ink, #222);
  }

  /* items list = EDGE-TO-EDGE white sheet, hairline-divided rows (no cards) */
  body.woocommerce-cart .woocommerce-cart-form__contents {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--fotofile-v2-surface, #fff);
    box-shadow: none;
    border-bottom: 1px solid var(--fotofile-v2-line, #ececec);
  }
  body.woocommerce-cart .woocommerce-cart-form__contents tbody { display: block; }
  body.woocommerce-cart .woocommerce-cart-form__contents thead { display: none; }

  /* dense horizontal app row */
  body.woocommerce-cart tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 84px 1fr auto;
    grid-template-areas:
      "thumb name     name"
      "thumb price    price"
      "thumb subtotal quantity";
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
    margin: 0;
    padding: 14px 12px;
    border: 0;
    border-top: 1px solid var(--fotofile-v2-line, #ececec);
    background: var(--fotofile-v2-surface, #fff);
  }
  body.woocommerce-cart tr.cart_item:first-child { border-top: 0; }
  body.woocommerce-cart tr.cart_item > td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    text-align: left;
  }
  /* hide ONLY the data-title pseudo-labels */
  body.woocommerce-cart tr.cart_item > td::before { display: none; }

  body.woocommerce-cart tr.cart_item td.product-thumbnail { grid-area: thumb; align-self: start; }
  body.woocommerce-cart tr.cart_item td.product-thumbnail img.attachment-woocommerce_thumbnail {
    width: 84px;
    height: 84px;
    margin: 0;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--fotofile-v2-line, #ececec);
    border-radius: 8px;
  }

  body.woocommerce-cart tr.cart_item td.product-name {
    grid-area: name;
    padding-right: 28px; /* room for corner remove */
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 600;
  }
  body.woocommerce-cart tr.cart_item td.product-name .variation {
    margin: 2px 0 0;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--fotofile-v2-muted, #6b6b6b);
  }

  body.woocommerce-cart tr.cart_item td.product-price {
    grid-area: price;
    align-self: end;
    color: var(--fotofile-v2-muted, #6b6b6b);
    font-size: 0.84rem;
  }

  /* Quantity: app-pill control aligned to the RIGHT (app cart grammar); ONLY
     the editable number input is styled, so fixed-qty hidden inputs draw no
     empty/floating box. No JS-created plus/minus (native number input only). */
  body.woocommerce-cart tr.cart_item td.product-quantity {
    grid-area: quantity;
    align-self: end;
    justify-self: end;
  }
  body.woocommerce-cart tr.cart_item td.product-quantity .quantity { margin: 0; }
  /* P9A: the editable-qty stepper (− input +) is styled in the base cart block
     above; the old standalone 76px pill rule was removed so the input now sits
     inside the bordered stepper group. */
  body.woocommerce-cart tr.cart_item td.product-quantity:not(:has(input[type="number"])) {
    min-height: 0;
  }

  /* Line subtotal: prominent accent, bottom-LEFT on the same baseline as the
     right-aligned quantity pill (app cart grammar: price left, stepper right) */
  body.woocommerce-cart tr.cart_item td.product-subtotal {
    grid-area: subtotal;
    align-self: end;
    justify-self: start;
    white-space: nowrap;
    color: var(--fotofile-v2-price, #ee4d2d);
    font-size: 1.1rem;
    font-weight: 800;
  }

  /* ----------------------------------------------------------------------
     P9D: cart-row price de-duplication (CSS-only, honest - no faked data).
     Default WooCommerce renders td.product-price as the UNIT price
     (WC()->cart->get_product_price() -> a single wc_price(); there is NO
     <del>/<ins> regular/sale pair in cart markup, so no real "normal vs sale"
     price exists to show) and td.product-subtotal as the LINE TOTAL
     (unit x qty). When the committed quantity is 1 the two are the SAME number,
     which the Human read as a duplicated price (gray unit + orange total).
     For qty-1 rows we therefore drop the redundant UNIT price and keep ONLY the
     emphasized line total, collapsing the now-empty price band. Rows with qty>1
     are UNTOUCHED (gray unit price + orange line total both stay) because the
     unit price is information needed to understand the line total. Nothing is
     faked or crossed out; this only removes a visual COPY of an existing real
     value. Progressive enhancement: browsers without :has() keep the current
     honest layout (no breakage). Mobile cart only; desktop is unchanged.
     Both qty=1 row shapes are covered: editable number input (value="1") and
     sold-individually rows (hidden qty input value="1"). ---------------------- */
  body.woocommerce-cart tr.cart_item:has(td.product-quantity input.qty[type="number"][value="1"]):not(:has(td.product-price del)),
  body.woocommerce-cart tr.cart_item:has(td.product-quantity input[type="hidden"][value="1"]):not(:has(td.product-price del)) {
    grid-template-areas:
      "thumb name     name"
      "thumb subtotal quantity";
  }
  body.woocommerce-cart tr.cart_item:has(td.product-quantity input.qty[type="number"][value="1"]):not(:has(td.product-price del)) td.product-price,
  body.woocommerce-cart tr.cart_item:has(td.product-quantity input[type="hidden"][value="1"]):not(:has(td.product-price del)) td.product-price {
    display: none;
  }

  /* P9E: SALE qty=1 rows keep the unit-price band (it carries the real struck
     regular price) but drop the <ins> current price there, because the
     emphasized current price is already the line subtotal below (unit x 1 =
     subtotal). Result: "~regular~" on the price band + bold current as the
     subtotal -> a truthful normal/sale pair with no repeated number. Rows with
     qty>1 keep BOTH <del> and <ins> so the unit pair stays readable. */
  body.woocommerce-cart tr.cart_item:has(td.product-quantity input.qty[type="number"][value="1"]):has(td.product-price del) td.product-price ins,
  body.woocommerce-cart tr.cart_item:has(td.product-quantity input[type="hidden"][value="1"]):has(td.product-price del) td.product-price ins {
    display: none;
  }
  /* On a SALE qty=1 row the lone struck regular reads as a quiet "was" caption. */
  body.woocommerce-cart tr.cart_item:has(td.product-quantity input.qty[type="number"][value="1"]):has(td.product-price del) td.product-price del,
  body.woocommerce-cart tr.cart_item:has(td.product-quantity input[type="hidden"][value="1"]):has(td.product-price del) td.product-price del {
    font-size: 0.82rem;
  }

  /* Remove: small, unobtrusive, pinned to the row corner */
  body.woocommerce-cart tr.cart_item td.product-remove {
    position: absolute;
    top: 12px;
    right: 10px;
    margin: 0;
  }
  body.woocommerce-cart tr.cart_item td.product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #f4f4f4;
    color: var(--fotofile-v2-muted, #6b6b6b) !important;
    font-size: 16px;
    line-height: 1;
  }

  /* Coupon / actions: its own app utility sheet, separated by a gray gap */
  body.woocommerce-cart .woocommerce-cart-form__contents tr td.actions {
    display: block;
    margin-top: 8px;
    padding: 14px 12px;
    border: 0;
    border-top: 1px solid var(--fotofile-v2-line, #ececec);
    border-bottom: 1px solid var(--fotofile-v2-line, #ececec);
    background: var(--fotofile-v2-surface, #fff);
  }
  body.woocommerce-cart .woocommerce-cart-form__contents tr td.actions::before { display: none; }

  /* P9B: MINIMAL fixed bottom checkout bar (Shopee/Lazada-like).
     The Human gate rejected the P9A sticky summary as too tall - it included
     subtotal, shipping method, shipping destination, change-address, and the
     "Cart totals" heading. P9B shows ONLY the final order total (left) + the
     native checkout CTA (right) in a compact fixed bottom bar. The subtotal /
     shipping / address breakdown is deferred to the Checkout page (hidden on
     the cart, NOT removed from the order - the grand total still reflects them
     and WooCommerce recomputes everything on Checkout).

     position:fixed on .cart_totals ONLY (not .cart-collaterals): it pins
     reliably regardless of containing-block height AND leaves .cross-sells
     (a sibling inside .cart-collaterals) in normal document flow so cross-sells
     are NOT trapped inside the bar. The cart content reserves bottom space
     (only when a .cart_totals exists, via :has(), so an empty cart adds none)
     so the last item / cross-sells / notices are never covered. Bottom nav is
     already display:none on cart (M6) and theme.js skips cart -> no bottom-nav
     overlap. Notices/errors (top of page) and the coupon input (in the cart
     form actions) are NOT hidden. Mobile only; desktop keeps in-flow totals. */
  body.woocommerce-cart .cart-collaterals {
    position: static;
    width: 100%;
    margin: 8px 0 0;
    float: none;
    background: transparent;
    box-shadow: none;
  }
  body.woocommerce-cart .woocommerce:has(.cart_totals) {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  body.woocommerce-cart .cart_totals {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    float: none;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--fotofile-v2-line, #ececec);
    background: var(--fotofile-v2-surface, #fff);
    box-shadow: 0 -6px 16px rgba(17, 17, 17, 0.10);
  }
  /* P9C: defer the WHOLE breakdown to Checkout and show ONLY the final order
     total in the bar. P9B hid the subtotal / shipping rows by class, but the
     later `.shop_table tr { display:flex }` rule had EQUAL specificity (0,3,2)
     and came afterwards, so it re-displayed every row -> the rejected clutter
     (subtotal "ยอดรวม", shipping "จัดส่งฟรี", and a duplicated total label).
     P9C instead hides EVERY totals row except the final `tr.order-total` with a
     higher-specificity `:not()` filter (0,4,2), and lays out ONLY the
     order-total row. The grand total stays correct (rows are hidden on the cart,
     NOT removed from the order); coupon input and notices are NOT touched. */
  body.woocommerce-cart .cart_totals h2,
  body.woocommerce-cart .cart_totals .shop_table tr:not(.order-total) {
    display: none;
  }
  /* Left host: the totals table collapses to a single block that holds just the
     order-total row and flexes to fill the space left of the CTA. */
  body.woocommerce-cart .cart_totals .shop_table,
  body.woocommerce-cart .cart_totals .shop_table tbody {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    border: 0;
    background: transparent;
  }
  /* Compact horizontal order-total row: label left, amount right, no Woo table
     chrome. Scoped to tr.order-total so the (now hidden) rows are never given a
     flex layout that could resurrect them. */
  body.woocommerce-cart .cart_totals .shop_table tr.order-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  body.woocommerce-cart .cart_totals .shop_table tr.order-total th,
  body.woocommerce-cart .cart_totals .shop_table tr.order-total td {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--fotofile-v2-muted, #6b6b6b);
  }
  body.woocommerce-cart .cart_totals .shop_table tr.order-total th { text-align: left; }
  body.woocommerce-cart .cart_totals .shop_table tr.order-total td { text-align: right; }
  /* Suppress the responsive-table generated label (content:attr(data-title)) so
     the order-total label is NOT duplicated inside the amount cell. */
  body.woocommerce-cart .cart_totals .shop_table tr.order-total td::before {
    content: none;
    display: none;
  }
  /* Amount: emphasized, never wraps (P9B let "฿70,640.00" break into
     "฿70,640.0" + "0" once the CTA squeezed the cell). */
  body.woocommerce-cart .cart_totals tr.order-total td .amount {
    font-size: 1.3rem;
    font-weight: 800;
    white-space: nowrap;
    color: var(--fotofile-v2-price, #ee4d2d);
  }
  body.woocommerce-cart .cart_totals tr.order-total td small.includes_tax {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
  }
  /* Right side: the native checkout CTA - compact, auto width (not full-width),
     never duplicated. */
  body.woocommerce-cart .wc-proceed-to-checkout {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }
  body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 46px;
    margin: 0;
    padding: 12px 24px;
    white-space: nowrap;
  }
  /* P9C: hide the site footer on the mobile cart ONLY so the fixed bottom bar
     reads as an app cart bar, not a website footer stacked above it. Scoped to
     body.woocommerce-cart inside this mobile media query: every other page keeps
     its footer, and the checkout page (body.woocommerce-checkout) is untouched.
     The footer nav is already display:none on mobile (line 228) and the cart
     navigation lives in the persistent app chrome, so no navigation is lost. */
  body.woocommerce-cart .fotofile-v2-site-footer { display: none; }
}
/* ============================================================
   CHECKOUT  (M8-P5 CHECKOUT-ONLY parity recompose)
   EAEL active (body.eael-woo-checkout) -> ID-scoped selectors
   (#customer_details / #order_review / #payment) + surgical !important
   on visual/layout/input-appearance props ONLY, to win the cascade over
   eael-woo-checkout. No PHP/JS (the only safe PHP-hook load path needs
   functions.php, which is outside this pass's allowed files). No field is
   moved; totals/place-order are never duplicated; notices/errors and
   terms/privacy/legal are never hidden.
   ============================================================ */

/* ---- Order-flow canvas: flatten the form, tighten gutters ---- */
body.woocommerce-checkout .fotofile-v2-container {
  width: min(100% - 24px, var(--fotofile-v2-container));
}
body.woocommerce-checkout .woocommerce { max-width: 760px; margin-inline: auto; }
body.woocommerce-checkout form.checkout {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
@media (max-width: 782px) {
  body.woocommerce-checkout .fotofile-v2-container { width: min(100% - 16px, var(--fotofile-v2-container)); }
  body.woocommerce-checkout .woocommerce { max-width: none; }
  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout #customer_details .col-1,
  body.woocommerce-checkout #customer_details .col-2 {
    width: 100%;
    max-width: none;
    float: none;
  }
}

/* ---- Scannable section headings with an accent bar ---- */
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3 {
  position: relative;
  margin: 0 0 12px;
  padding-left: 12px;
  color: var(--fotofile-v2-ink, #222);
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}
body.woocommerce-checkout #order_review_heading::before,
body.woocommerce-checkout .woocommerce-billing-fields > h3::before,
body.woocommerce-checkout .woocommerce-shipping-fields > h3::before,
body.woocommerce-checkout .woocommerce-additional-fields > h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 2px;
  background: var(--fotofile-v2-accent, #ee4d2d);
}

/* ---- Customer / address as a clean app info card ---- */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields,
body.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
body.woocommerce-checkout #customer_details .woocommerce-additional-fields {
  margin: 0 0 14px !important;
  padding: 16px !important;
  border: 1px solid var(--fotofile-v2-line, #ececec) !important;
  border-radius: 14px !important;
  background: var(--fotofile-v2-surface, #fff) !important;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 6px 16px rgba(17, 17, 17, 0.05) !important;
}
/* App-like inputs: filled, full-width, comfortable height (beats EAEL) */
body.woocommerce-checkout #customer_details .form-row {
  margin: 0 0 12px;
  padding: 0;
}
body.woocommerce-checkout #customer_details .form-row > label {
  display: block;
  margin-bottom: 5px;
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.82rem;
  font-weight: 600;
}
body.woocommerce-checkout .form-row label.checkbox,
body.woocommerce-checkout .form-row label.radio {
  display: inline;
  font-weight: 400;
}
body.woocommerce-checkout #customer_details .form-row .input-text,
body.woocommerce-checkout #customer_details .form-row textarea,
body.woocommerce-checkout #customer_details .form-row select {
  width: 100% !important;
  min-height: 48px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--fotofile-v2-line, #ececec) !important;
  border-radius: 10px !important;
  background: #f7f8fa !important;
  font-size: 0.95rem !important;
}
body.woocommerce-checkout #customer_details .form-row .input-text:focus,
body.woocommerce-checkout #customer_details .form-row textarea:focus,
body.woocommerce-checkout #customer_details .form-row select:focus {
  border-color: var(--fotofile-v2-accent, #ee4d2d) !important;
  background: #fff !important;
  outline: none;
}
/* select2 (billing_state) height parity */
body.woocommerce-checkout #customer_details .select2-container .select2-selection--single {
  min-height: 48px !important;
  border: 1px solid var(--fotofile-v2-line, #ececec) !important;
  border-radius: 10px !important;
  background: #f7f8fa !important;
}
body.woocommerce-checkout #customer_details .select2-container .select2-selection__rendered {
  line-height: 46px !important;
}
body.woocommerce-checkout #customer_details .select2-container .select2-selection__arrow {
  height: 46px !important;
}

/* ---- Coupon as a quiet supporting utility (must not dominate) ---- */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  font-size: 0.86rem;
}
body.woocommerce-checkout form.checkout_coupon {
  border: 1px solid var(--fotofile-v2-line, #ececec);
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  background: #fff;
}

/* ---- Order summary as a compact app card ---- */
body.woocommerce-checkout #order_review {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table {
  display: table;
  width: 100%;
  margin: 0 0 14px !important;
  padding: 16px !important;
  border: 1px solid var(--fotofile-v2-line, #ececec) !important;
  border-radius: 14px !important;
  background: var(--fotofile-v2-surface, #fff) !important;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 6px 16px rgba(17, 17, 17, 0.05) !important;
  border-collapse: collapse;
}
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td {
  padding: 9px 0;
  border: 0;
}
/* line items: name left, qty badge, total right */
body.woocommerce-checkout #order_review .cart_item td.product-name {
  color: var(--fotofile-v2-ink, #222);
  font-size: 0.9rem;
  line-height: 1.4;
}
body.woocommerce-checkout #order_review .cart_item td.product-name .product-quantity {
  margin-left: 6px;
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-weight: 600;
}
body.woocommerce-checkout #order_review .cart_item td.product-total {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}
body.woocommerce-checkout #order_review .cart_item + .cart_item td {
  border-top: 1px solid var(--fotofile-v2-line, #ececec);
}
/* subtotal / shipping rows: muted supporting figures */
body.woocommerce-checkout #order_review .cart-subtotal th,
body.woocommerce-checkout #order_review .cart-subtotal td,
body.woocommerce-checkout #order_review .woocommerce-shipping-totals th,
body.woocommerce-checkout #order_review .woocommerce-shipping-totals td {
  padding-top: 10px;
  border-top: 1px solid var(--fotofile-v2-line, #ececec);
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.9rem;
}
body.woocommerce-checkout #order_review .cart-subtotal td,
body.woocommerce-checkout #order_review .woocommerce-shipping-totals td {
  text-align: right;
}
/* grand total: large, scannable, accent */
body.woocommerce-checkout #order_review .order-total th,
body.woocommerce-checkout #order_review .order-total td {
  padding-top: 12px;
  border-top: 2px solid var(--fotofile-v2-line, #ececec);
}
body.woocommerce-checkout #order_review .order-total td,
body.woocommerce-checkout #order_review .order-total .amount {
  text-align: right;
  color: var(--fotofile-v2-price, #ee4d2d);
  font-size: 1.3rem;
  font-weight: 800;
}

/* ---- Shipping reads as a distinct app shipping section ---- */
body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping th {
  color: var(--fotofile-v2-ink, #222);
  font-weight: 700;
}
body.woocommerce-checkout #order_review #shipping_method {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
body.woocommerce-checkout #order_review #shipping_method li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--fotofile-v2-line, #ececec);
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  background: #f7f8fa;
}
body.woocommerce-checkout #order_review #shipping_method li label { display: inline; margin: 0; }

/* ---- Payment: card + LARGE tappable native choice rows ---- */
body.woocommerce-checkout #payment {
  margin-top: 14px;
  padding: 16px !important;
  border: 1px solid var(--fotofile-v2-line, #ececec) !important;
  border-radius: 14px !important;
  background: var(--fotofile-v2-surface, #fff) !important;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 6px 16px rgba(17, 17, 17, 0.05) !important;
}
body.woocommerce-checkout #payment ul.payment_methods {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none;
}
body.woocommerce-checkout #payment li.wc_payment_method {
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px !important;
  padding: 16px !important;
  min-height: 56px;
  border: 1px solid var(--fotofile-v2-line, #ececec) !important;
  border-radius: 12px !important;
  background: var(--fotofile-v2-surface, #fff) !important;
  list-style: none;
}
body.woocommerce-checkout #payment li.wc_payment_method input.input-radio {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
}
body.woocommerce-checkout #payment li.wc_payment_method > label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 650;
  cursor: pointer;
}
body.woocommerce-checkout #payment li.wc_payment_method > label img {
  max-height: 26px;
  width: auto;
}
/* selected-state: obvious accent border + tint (progressive :has, graceful) */
body.woocommerce-checkout #payment li.wc_payment_method:has(.input-radio:checked) {
  border-color: var(--fotofile-v2-accent, #ee4d2d) !important;
  background: #fff7f3 !important;
  box-shadow: 0 0 0 1px var(--fotofile-v2-accent, #ee4d2d) inset;
}
/* gateway description / QR box: own full-width line, never clipped/squashed */
body.woocommerce-checkout #payment li.wc_payment_method .payment_box {
  flex: 1 0 100%;
  margin: 12px 0 0;
  padding: 12px;
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  background: #f7f8fa;
  font-size: 0.88rem;
  line-height: 1.55;
}
body.woocommerce-checkout #payment li.wc_payment_method .payment_box::before { display: none; }

/* ---- Final CTA area: legal visible + strong single native place-order ---- */
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
  margin: 4px 0 12px;
  padding: 12px;
  border: 1px solid var(--fotofile-v2-line, #ececec);
  border-radius: var(--fotofile-v2-radius-sm, 9px);
  background: #f7f8fa;
}
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text { margin: 0; font-size: 0.84rem; }
body.woocommerce-checkout #payment .place-order { padding-top: 4px; }
body.woocommerce-checkout #payment #place_order {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 16px 24px;
  border: 0 !important;
  border-radius: var(--fotofile-v2-radius-sm, 9px) !important;
  background: var(--fotofile-v2-accent, #ee4d2d) !important;
  color: #fff !important;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* M8-P10C: neutralize unsafe M8-P5 payment-row flex; CSS-only; no logic/markup change. */
body.woocommerce-checkout #payment ul.wc_payment_methods > li.wc_payment_method {
display: block !important;
}

body.woocommerce-checkout #payment ul.wc_payment_methods > li.wc_payment_method > input.input-radio {
vertical-align: middle;
margin-right: 8px;
}

body.woocommerce-checkout #payment ul.wc_payment_methods > li.wc_payment_method > label {
display: inline !important;
white-space: normal;
word-break: normal;
overflow-wrap: normal;
}

body.woocommerce-checkout #payment ul.wc_payment_methods > li.wc_payment_method > label img {
max-width: 100%;
height: auto;
vertical-align: middle;
margin-left: 6px;
}

body.woocommerce-checkout #payment ul.wc_payment_methods > li.wc_payment_method > .payment_box {
display: block;
width: auto;
}

/* M8-P11A: checkout order-summary + customer-details grouping; CSS-only; review-TABLE scoped (never #order_review wrapper); no #payment/Turnstile/legal/shipping-logic touch. */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table {
  overflow-wrap: anywhere;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table thead th.product-name,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table thead th.product-total {
  padding: 14px 16px;
  border: 0;
  background: #f5f7fa;
  color: #475467;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0;
  vertical-align: middle;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table thead th.product-total {
  text-align: right;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tbody tr.cart_item {
  border: 0;
  background: #ffffff;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.cart_item td.product-name {
  padding: 14px 16px;
  border: 0;
  color: #1f2937;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.45;
  vertical-align: top;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.cart_item td.product-name strong.product-quantity {
  margin: 0 0 0 6px;
  padding: 2px 7px;
  border: 1px solid #d0d7e2;
  border-radius: 999px;
  background: #eef2f7;
  color: #344054;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.cart_item td.product-total {
  min-width: 84px;
  padding: 14px 16px 14px 8px;
  border: 0;
  color: #1f2937;
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.45;
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.cart_item td.product-total .amount {
  color: #1f2937;
  font-weight: 750;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.cart-discount th,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.cart-discount td,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.fee th,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.fee td,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.tax-rate th,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.tax-rate td,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.tax-total th,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.tax-total td {
  padding: 12px 16px;
  border: 0;
  background: #ffffff;
  color: #475467;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  vertical-align: top;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.cart-discount td,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.fee td,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.tax-rate td,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.tax-total td {
  color: #1f2937;
  text-align: right;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals #shipping_method li label {
  color: #1f2937;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total td {
  padding: 16px;
  border: 0;
  background: #fff7f3;
  color: #111827;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  vertical-align: middle;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total td {
  text-align: right;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total strong {
  font-weight: 850;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total .amount {
  color: #d63f1f;
  font-size: 1.16rem;
  font-weight: 850;
  line-height: 1.25;
}

body.woocommerce-checkout #customer_details {
  margin: 0 0 18px;
}

body.woocommerce-checkout #customer_details .form-row {
  margin: 0 0 14px;
  padding: 0;
}

body.woocommerce-checkout #customer_details .woocommerce-input-wrapper {
  line-height: 1.45;
}

/* M8-P11B-1/P11B-2: checkout app-like sections + payment list visual; CSS-only; no payment logic touch. */
body.woocommerce-checkout {
  background: #f4f6f8;
}

body.woocommerce-checkout form.checkout,
body.woocommerce-checkout .woocommerce-checkout {
  margin-top: 0;
  margin-bottom: 18px;
}

body.woocommerce-checkout #customer_details {
  margin: 0 0 14px;
}

body.woocommerce-checkout #customer_details .woocommerce-billing-fields,
body.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
body.woocommerce-checkout #customer_details .woocommerce-additional-fields {
  margin-bottom: 12px !important;
  border-color: #dde3ec !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05) !important;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table {
  margin-bottom: 14px !important;
  border-color: #dde3ec !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05) !important;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot {
  background: #ffffff;
}

body.woocommerce-checkout #payment {
  margin-top: 14px;
  padding: 14px !important;
  border: 1px solid #dde3ec !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05) !important;
}

body.woocommerce-checkout #payment ul.payment_methods {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  margin: 0 0 10px !important;
  padding: 13px 12px !important;
  min-height: 54px;
  border: 1px solid #d9e0ea !important;
  border-radius: 12px !important;
  background: #fbfcfe !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
  color: #1f2937;
  line-height: 1.45;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input[type="radio"]:checked) {
  border-color: var(--fotofile-v2-accent, #ee4d2d) !important;
  background: #fff7f3 !important;
  box-shadow: 0 0 0 1px var(--fotofile-v2-accent, #ee4d2d), 0 8px 18px rgba(238, 77, 45, 0.1);
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 2px 8px 0 0;
  accent-color: var(--fotofile-v2-accent, #ee4d2d);
  vertical-align: top;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"]:checked + label {
  color: #111827;
  font-weight: 750;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
  display: inline !important;
  margin: 0;
  color: #344054;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.45;
  vertical-align: middle;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img {
  max-width: min(120px, 46vw);
  max-height: 28px;
  height: auto;
  margin-left: 6px;
  vertical-align: middle;
}

body.woocommerce-checkout #payment .payment_box {
  margin: 11px 0 0;
  padding: 11px 12px;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  background: #f6f8fb;
  color: #475467;
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (max-width: 782px) {
  body.woocommerce-checkout {
    background: #f4f6f8;
  }

  body.woocommerce-checkout form.checkout,
  body.woocommerce-checkout .woocommerce-checkout {
    margin-bottom: 14px;
  }

  body.woocommerce-checkout #payment {
    padding: 12px !important;
  }

  body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    padding: 12px !important;
    border-radius: 11px !important;
  }
}

/* M8-P11B-3: checkout density + app grammar; CSS-only; no sticky bar/no payment logic. */
body.woocommerce-checkout {
  background: #f3f5f7;
}

body.woocommerce-checkout .woocommerce {
  margin-top: 0;
}

body.woocommerce-checkout form.checkout {
  margin-top: 0;
}

body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 11px;
  line-height: 1.45;
}

body.woocommerce-checkout #customer_details {
  margin-bottom: 10px;
}

body.woocommerce-checkout #customer_details .woocommerce-billing-fields,
body.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
body.woocommerce-checkout #customer_details .woocommerce-additional-fields {
  margin-bottom: 10px !important;
  padding: 14px !important;
  border-radius: 11px !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.045) !important;
}

body.woocommerce-checkout #customer_details .form-row {
  margin-bottom: 10px;
}

body.woocommerce-checkout #customer_details .form-row .input-text,
body.woocommerce-checkout #customer_details .form-row select,
body.woocommerce-checkout #customer_details .form-row textarea {
  min-height: 44px !important;
  padding: 9px 12px !important;
  border-radius: 9px !important;
}

body.woocommerce-checkout #customer_details .select2-container .select2-selection--single {
  min-height: 44px !important;
}

body.woocommerce-checkout #customer_details .select2-container .select2-selection__rendered {
  line-height: 42px !important;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table {
  margin-bottom: 10px !important;
  border-radius: 11px !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.045) !important;
}

body.woocommerce-checkout #payment {
  margin-top: 10px;
  padding: 12px !important;
  border-radius: 11px !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.045) !important;
}

body.woocommerce-checkout #payment ul.payment_methods {
  margin-bottom: 10px;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  margin-bottom: 8px !important;
  padding: 11px !important;
  min-height: 50px;
  border-radius: 11px !important;
  line-height: 1.38;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  margin-right: 7px;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
  font-size: 0.92rem;
  line-height: 1.38;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img {
  max-width: min(108px, 44vw);
  max-height: 24px;
  margin-left: 5px;
}

body.woocommerce-checkout #payment .payment_box {
  margin-top: 9px;
  padding: 10px 11px;
  border-radius: 9px;
  font-size: 0.86rem;
  line-height: 1.48;
}

@media (max-width: 782px) {
  body.woocommerce-checkout .woocommerce {
    margin-bottom: 12px;
  }

  body.woocommerce-checkout form.checkout {
    margin-bottom: 12px;
  }

  body.woocommerce-checkout .woocommerce-info,
  body.woocommerce-checkout .woocommerce-form-coupon-toggle {
    margin-bottom: 8px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 0.9rem;
  }

  body.woocommerce-checkout #customer_details .woocommerce-billing-fields,
  body.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
  body.woocommerce-checkout #customer_details .woocommerce-additional-fields {
    padding: 12px !important;
  }

  body.woocommerce-checkout #customer_details .form-row {
    margin-bottom: 9px;
  }

  body.woocommerce-checkout #payment {
    padding: 11px !important;
  }

  body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    padding: 10px 11px !important;
    min-height: 48px;
  }

  body.woocommerce-checkout #payment .payment_box {
    padding: 9px 10px;
  }
}

/* M8-P11B-4: checkout mobile footer suppression; CSS-only. */
@media (max-width: 767px) {
  body.woocommerce-checkout footer,
  body.woocommerce-checkout .site-footer {
    display: none;
  }
}

/* M8-P12: checkout app flow - app-like saved-address summary + collapsible billing
   form (returning-customer only) and order-total prominence. CSS pairs with the
   theme.js read-only summary + accessible collapse toggle. NOTE: the billing form
   is NEVER removed from the DOM and ALWAYS submits; collapse engages only when ALL
   required billing fields are already filled, hides them via max-height (not
   display:none), and an accessible toggle re-expands the form for editing. No
   payment / Turnstile / terms / total logic touched; no fake total; no value
   mutation (summary only READS current field values). */
@media (max-width: 767px) {
  /* Billing heading carries the edit/collapse toggle (app summary header). */
  body.woocommerce-checkout .woocommerce-billing-fields > h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  body.woocommerce-checkout .ff-addr-edit {
    flex: 0 0 auto;
    padding: 5px 13px;
    border: 1px solid var(--fotofile-v2-accent, #ee4d2d);
    border-radius: 999px;
    background: #ffffff;
    color: var(--fotofile-v2-accent, #ee4d2d);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
  }

  /* Compact app-like saved-address summary (read-only mirror of filled fields). */
  body.woocommerce-checkout .ff-addr-summary {
    margin: 2px 0 4px;
    padding: 12px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fbfcfe;
  }
  body.woocommerce-checkout .ff-addr-summary__name {
    color: #111827;
    font-weight: 750;
    line-height: 1.4;
  }
  body.woocommerce-checkout .ff-addr-summary__phone,
  body.woocommerce-checkout .ff-addr-summary__addr {
    color: #475467;
    font-size: 0.9rem;
    line-height: 1.45;
  }
  body.woocommerce-checkout .ff-addr-summary__addr { margin-top: 2px; }

  /* Collapsed billing form: hidden via max-height (NOT display:none); fields stay
     in the DOM and submit normally; the toggle re-expands them for editing. */
  body.woocommerce-checkout .woocommerce-billing-fields.ff-billing-collapsed .woocommerce-billing-fields__field-wrapper {
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  /* Order-total reads as the app summary hero. */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total .amount {
    font-size: 1.22rem;
  }
}

/* M8-P12 (flow): order-review app cards + itemized total summary + a SAFE app-like
   bottom review bar. The bottom bar MIRRORS the real Woo order total (read-only)
   and its button only SCROLLS to the native #place_order/terms area (type=button,
   NO .click(), NO submit, NO order creation). The native #place_order remains the
   only real submit. Real Woo tfoot rows only - no fake rows / no fake total. No
   payment / Turnstile / terms logic touched. */
@media (max-width: 767px) {
  /* Quiet the table header into small app labels (kept visible, not hidden). */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table thead th.product-name,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table thead th.product-total {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    color: #98a2b3;
  }

  /* Each line item reads as an app order row with a clear hairline separator. */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tbody tr.cart_item td {
    border-bottom: 1px solid #f0f2f5;
  }
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tbody tr.cart_item:last-child td {
    border-bottom: 0;
  }
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.cart_item td.product-name {
    font-size: 0.95rem;
    font-weight: 650;
  }
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.cart_item td.product-total {
    font-size: 0.98rem;
    font-weight: 750;
    color: #111827;
  }

  /* Totals = itemized app summary: a divider splits items from totals; subtotal/
     shipping read clearly; grand total stays the hero. Real Woo tfoot rows only. */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td {
    border-top: 1px dashed #e4e7ec;
    padding-top: 12px;
  }
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total th,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total td {
    border-top: 1px solid #e4e7ec;
  }

  /* Reserve space so the fixed review bar never covers checkout content. */
  body.woocommerce-checkout {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* Safe app-like bottom review bar (JS-built): real total mirror + scroll-to-order
     CTA. The CTA never submits - it only scrolls to the native place-order area. */
  .ff-checkout-review-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid #e4e7ec;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.1);
  }
  .ff-checkout-review-bar__total {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
  }
  .ff-checkout-review-bar__label {
    font-size: 0.72rem;
    color: #6b7280;
  }
  .ff-checkout-review-bar__amount {
    font-size: 1.14rem;
    font-weight: 850;
    color: #d63f1f;
    white-space: nowrap;
  }
  .ff-checkout-review-bar__cta {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 12px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--fotofile-v2-accent, #ee4d2d);
    color: #ffffff;
    font-size: 1.02rem;
    font-weight: 800;
    cursor: pointer;
  }
}

/* M8-P12R: Lazada-like full-page flatten + refine. Single-surface sections,
   dividers instead of nested frames, lighter/shorter bottom bar, app-list payment
   rows, shipping summary, tidy native coupon entry. CSS-only here (a display-only
   "ช่องทางการชำระเงิน" heading is added in theme.js). NO payment/shipping/gateway/
   total logic; no fake total/discount; no display:none on terms/Turnstile/
   place-order; li.wc_payment_method + label display are UNCHANGED (P10C/P11B
   anti-shatter preserved - only border/background/spacing change). */
@media (max-width: 767px) {
  /* ---- A. Bottom bar: shorter, lighter, balanced (total grows, CTA compact) ---- */
  .ff-checkout-review-bar {
    gap: 10px;
    padding: 7px 12px calc(7px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -3px 12px rgba(15, 23, 42, 0.07);
  }
  .ff-checkout-review-bar__total { flex: 1 1 auto; }
  .ff-checkout-review-bar__amount { font-size: 1.04rem; }
  .ff-checkout-review-bar__cta {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 9px 18px;
    font-size: 0.95rem;
    font-weight: 750;
  }
  body.woocommerce-checkout {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }

  /* ---- B/F. Flatten section surfaces: one card per section, lighter shadow ---- */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table,
  body.woocommerce-checkout #payment,
  body.woocommerce-checkout #customer_details .woocommerce-billing-fields,
  body.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
  body.woocommerce-checkout #customer_details .woocommerce-additional-fields {
    border-color: #eaedf1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  }

  /* Address summary: flat inside the billing card (no card-in-card). */
  body.woocommerce-checkout .ff-addr-summary {
    border: 0;
    background: transparent;
    padding: 4px 0 2px;
  }

  /* ---- C. Payment = clean app list inside ONE #payment surface ---- */
  body.woocommerce-checkout .ff-pay-heading {
    margin: 0 0 6px;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
  }
  body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    border: 0 !important;
    border-bottom: 1px solid #eef1f5 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 13px 2px !important;
  }
  body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:last-child {
    border-bottom: 0 !important;
  }
  body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input[type="radio"]:checked) {
    background: #fff7f3 !important;
    box-shadow: none !important;
  }
  body.woocommerce-checkout #payment .payment_box {
    border: 0 !important;
    background: #f7f8fa !important;
    margin: 8px 0 2px 26px !important;
    padding: 9px 11px !important;
  }

  /* ---- D. Shipping: the single free method reads as a clean summary value ---- */
  body.woocommerce-checkout #order_review #shipping_method {
    margin: 0;
    padding: 0;
  }
  body.woocommerce-checkout #order_review #shipping_method li {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.woocommerce-checkout #order_review #shipping_method li label {
    color: #0a8a4a;
    font-weight: 700;
  }

  /* ---- E. Coupon: tidy the NATIVE coupon entry into a clean app row ---- */
  body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid #eaedf1;
    border-left: 3px solid var(--fotofile-v2-accent, #ee4d2d);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
    font-size: 0.9rem;
  }

  /* ---- F. Terms/privacy: flat inside the payment surface (divider, no frame) ---- */
  body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
    margin: 8px 0 10px !important;
    padding: 10px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid #eef1f5 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
}

/* M8-P12R-2: mobile checkout polish - order-summary price-clipping fix (flex rows),
   lighter payment flatten + SUBTLE selected state (left accent, no heavy pink
   block), more compact bottom bar. CSS-only. The review rows are display:flex
   (M6), so the fix uses flex sizing: product-name grows + wraps (min-width:0),
   product-total holds its width + nowrap so the price is never clipped. No
   payment/shipping/gateway/total logic; no fake total/discount; no order creation;
   bottom bar stays scroll-only; li/label display UNCHANGED (P10C/P11B anti-shatter);
   nothing native hidden. */
@media (max-width: 767px) {
  /* ---- A. Order summary: price never clipped/squeezed at 390 (flex rows) ---- */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.cart_item td.product-name {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 8px;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 0.92rem;
  }
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.cart_item td.product-total {
    flex: 0 0 auto;
    min-width: 70px;
    padding-left: 6px;
    padding-right: 0;
    font-size: 0.92rem;
    text-align: right;
    white-space: nowrap;
  }
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.cart_item td.product-total .amount {
    white-space: nowrap;
  }
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.cart_item td.product-name strong.product-quantity {
    font-size: 0.72rem;
    padding: 1px 6px;
  }

  /* ---- B. Payment: lighter flatten + SUBTLE selected (left accent bar) ---- */
  body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    padding: 12px 2px !important;
  }
  body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input[type="radio"]:checked) {
    background: transparent !important;
    box-shadow: inset 3px 0 0 var(--fotofile-v2-accent, #ee4d2d) !important;
  }
  body.woocommerce-checkout #payment .payment_box {
    background: transparent !important;
    border: 0 !important;
    border-left: 2px solid #e4e7ec !important;
    margin: 6px 0 2px 26px !important;
    padding: 2px 0 2px 10px !important;
    font-size: 0.85rem !important;
  }

  /* ---- C. Bottom bar: more compact, smaller button, no right overflow ---- */
  .ff-checkout-review-bar {
    gap: 10px;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.06);
  }
  .ff-checkout-review-bar__total {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ff-checkout-review-bar__amount { font-size: 1rem; }
  .ff-checkout-review-bar__cta {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 750;
  }
  body.woocommerce-checkout {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

/* M8-P12R-3: final mobile checkout flatten. Subtle payment selected state (faint
   tint + 2px left accent, and the selected-row divider forced back to the light
   colour so there is NO red frame/border), lighter native place-order, flatter
   order-summary panel. CSS-only. No payment/shipping/order logic; no fake total/
   discount; no order creation; li/label display UNCHANGED (P10C/P11B anti-shatter);
   nothing native hidden; native #place_order stays the single real submit. */
@media (max-width: 767px) {
  /* ---- A. Payment selected: subtle (faint tint + small left accent, no red frame) ---- */
  body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input[type="radio"]:checked) {
    background: #fff9f6 !important;
    border-color: #eef1f5 !important;
    border-bottom-color: #eef1f5 !important;
    box-shadow: inset 2px 0 0 var(--fotofile-v2-accent, #ee4d2d) !important;
  }
  body.woocommerce-checkout #payment .payment_box {
    border: 0 !important;
    background: transparent !important;
    margin: 5px 0 2px 26px !important;
    padding: 2px 0 0 !important;
    color: #667085 !important;
    font-size: 0.84rem !important;
  }

  /* ---- B. Native place-order: lighter weight, still clearly the final action ---- */
  body.woocommerce-checkout #payment #place_order {
    min-height: 46px;
    padding: 11px 20px;
    border-radius: 10px !important;
    font-size: 1rem;
    font-weight: 750;
    box-shadow: none;
  }

  /* ---- C. Order summary: flat white panel (no frame/shadow), clean app rows ---- */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table {
    border: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    padding: 2px 14px !important;
  }
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table thead th.product-name,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table thead th.product-total {
    background: transparent !important;
    padding-top: 12px;
    padding-bottom: 8px;
  }
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tbody tr.cart_item td {
    border-bottom-color: #f2f4f7;
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

/* M8-P12R-4: checkout mobile right-gutter width fix; CSS-only. The mobile main was
   .fotofile-v2-main.fotofile-v2-container { width:min(100% - 16px, 1200px);
   margin-inline:auto } PLUS padding-inline:10px - a double-inset/centering chain
   that, with any child overflow, left an uneven right gutter on iOS. Collapse it to
   ONE clean full-width border-box column with balanced side padding, contain
   horizontal overflow, and pin the bar to the exact viewport. Checkout-only,
   mobile-only. No DOM/logic/payment change; nothing native hidden. */
@media (max-width: 767px) {
  /* Single full-usable-width column, balanced 12px side padding, no dead gutter. */
  body.woocommerce-checkout .fotofile-v2-main.fotofile-v2-container {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 12px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-x: clip;
  }
  body.woocommerce-checkout .woocommerce {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
  body.woocommerce-checkout form.checkout {
    width: 100%;
    max-width: 100%;
  }
  /* Every section card fits the column exactly (border-box, never wider). */
  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout #order_review,
  body.woocommerce-checkout #payment,
  body.woocommerce-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout .woocommerce-shipping-fields,
  body.woocommerce-checkout .woocommerce-additional-fields,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Bottom bar spans the viewport exactly: no right gap, no overflow. */
  .ff-checkout-review-bar {
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* M8-P12R-5: restore Select2 hidden accessible select sizing; fix iOS right gutter.
   The original <select#billing_state.select2-hidden-accessible> is Select2's 1px
   screen-reader element. Our broad #customer_details select rule wrongly sized it to
   the full field width; at position:absolute that pushed the layout +44px and made
   iOS zoom out (right gutter). This restores the standard visually-hidden 1px clip
   (NOT display:none/visibility:hidden, so Select2 accessibility/behaviour is intact).
   The VISIBLE .select2-container/.select2-selection is untouched.

   CART-CHECKOUT-ACCOUNT-P1-HF1: this clamp must apply at EVERY viewport. Previously it
   was scoped to `@media (max-width: 767px)`, so at >=768px the same broad checkout
   `select` sizing re-expanded the hidden accessible select to the field width; at
   position:absolute it then grew document scrollWidth and produced a page-wide
   horizontal overflow on Checkout at tablet/desktop widths (~50px at 768 up to ~347px
   at 1440). Removing the media wrapper keeps the standard 1px visually-hidden geometry
   at all widths. Selectors stay checkout-scoped to select.select2-hidden-accessible
   only, so the visible .select2-container / SelectWoo control, native country/state
   selection, submitted values, and AT semantics are unchanged. */
body.woocommerce-checkout #customer_details select.select2-hidden-accessible,
body.woocommerce-checkout select.select2-hidden-accessible {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* M8-P13-S1: mobile checkout app section grammar. CSS-only, additive, mobile-only.
   Strengthens the GUEST/empty checkout's app SECTION reading on top of the existing
   M8-P5 cards + P12 enhancers: clearer section-header dividers on the customer/billing
   form, comfortable form-row rhythm, a readable required marker, an app-style
   "have a coupon?" toggle ROW with a trailing chevron, and a clearer gap between the
   order-summary card and the (nested) payment card. NO JS, NO layout/logic change:
   every required field/radio/input stays visible and focusable; no display:none /
   visibility:hidden; NO select width rule (P12R-5 iOS select2-hidden-accessible 1px
   fix stays effective and later); NO broad #order_review card (payment + Turnstile are
   nested there) - order-summary touches are scoped to the review TABLE only; payment
   radios stay LEFT (P10C/P11B anti-shatter); native #place_order, terms/legal, and
   Turnstile untouched; no fake total/discount and no created rows (the coupon block
   only styles native Woo coupon markup, so it renders nothing when Woo emits none).
   Shipping value, payment heading, and order-summary thead/line hierarchy were already
   delivered in P12; this slice does not restate them. */
@media (max-width: 767px) {
  /* 1. Customer / billing / shipping / additional: the section title reads as an app
        card header (divider under the title) with comfortable field rhythm. The M8-P5
        left accent bar and the P12 billing-h3 flex edit toggle are preserved (only
        typography/spacing is added here). */
  body.woocommerce-checkout #customer_details .woocommerce-billing-fields > h3,
  body.woocommerce-checkout #customer_details .woocommerce-shipping-fields > h3,
  body.woocommerce-checkout #customer_details .woocommerce-additional-fields > h3 {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef1f5;
  }
  body.woocommerce-checkout #customer_details .form-row {
    margin-bottom: 13px;
  }
  /* Required marker: clearly visible (accent), never the dominant element; no dotted
     abbr underline. Does not hide or alter the field. */
  body.woocommerce-checkout #customer_details .form-row > label .required {
    color: var(--fotofile-v2-accent, #ee4d2d);
    border: 0;
    text-decoration: none;
  }

  /* 2. Coupon toggle as a full-width app "have a coupon?" row with a trailing chevron.
        Styles ONLY the native toggle notice + the native coupon form. It creates no
        row, no discount, and no total; if Woo renders no coupon UI, nothing here shows. */
  body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    position: relative;
    display: block;
    margin: 0 0 12px;
    padding: 13px 34px 13px 14px;
    border: 1px solid #eaedf1;
    border-left: 3px solid var(--fotofile-v2-accent, #ee4d2d);
    border-radius: 12px;
    background: #ffffff;
    color: var(--fotofile-v2-ink, #222);
    font-size: 0.9rem;
    line-height: 1.4;
  }
  body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::after {
    content: "\203A";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: var(--fotofile-v2-muted, #6b6b6b);
    font-size: 1.15rem;
    line-height: 1;
  }
  body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
    font-weight: 700;
  }
  body.woocommerce-checkout form.checkout_coupon,
  body.woocommerce-checkout .woocommerce-form-coupon {
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid #eaedf1;
    border-radius: 12px;
    background: #fbfcfe;
  }

  /* 3. Order summary -> payment reads as two distinct app sections: a clearer gap
        precedes the (nested) payment card. Scoped to #payment only -- the broad
        #order_review wrapper is deliberately NOT restyled (payment + Turnstile nest
        inside it; see ADR-0022). */
  body.woocommerce-checkout #payment {
    margin-top: 16px;
  }
}

/* M8-P13-S1b: mobile coupon row cleanup. Compact, single-tap app row scoped to the
   native coupon toggle notice only: neutralize the decorative Woo info glyph (the small
   blue square) via pseudo-element content, flex-align the label + link so it stops
   wrapping awkwardly mid-link, and tighten the height. The coupon link stays clickable,
   the native coupon form behaviour is unchanged, the S1b chevron stays on the right, and
   nothing is hidden / no discount or total is faked. */
@media (max-width: 767px) {
  body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 10px 34px 10px 14px;
    font-size: 0.84rem;
    line-height: 1.3;
  }
  /* Neutralize the decorative Woo info icon (small blue square) - pseudo-element content
     only; this is not a control, terms, legal, payment, or Turnstile element. */
  body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
    content: none;
  }
  /* The coupon link stays the clear, clickable accent affordance; keep it on one line so
     wrapping (if any) drops the whole link cleanly instead of breaking mid-phrase. */
  body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
    color: var(--fotofile-v2-accent, #ee4d2d);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  /* Keep the chevron snug to the (now shorter) row's vertical center. */
  body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::after {
    font-size: 1.05rem;
  }
}

/* M8-P13-S1c: mobile login notice cleanup. Gives the returning-customer login toggle the
   same compact app-row grammar as the S1/S1b coupon row: neutralize the decorative Woo
   info glyph (the small blue square) via pseudo-element content, app row with a left
   accent + right chevron, flex-aligned label + link. The login link stays clickable and
   the native Woo login toggle behaviour is unchanged; nothing is hidden and no
   payment/shipping/order/customer logic is touched. */
@media (max-width: 767px) {
  body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0 0 12px;
    padding: 10px 34px 10px 14px;
    border: 1px solid #eaedf1;
    border-left: 3px solid var(--fotofile-v2-accent, #ee4d2d);
    border-radius: 12px;
    background: #ffffff;
    color: var(--fotofile-v2-ink, #222);
    font-size: 0.84rem;
    line-height: 1.3;
  }
  /* Neutralize the decorative Woo info icon (small blue square) - pseudo-element content
     only; not a control, terms, legal, payment, or Turnstile element. */
  body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before {
    content: none;
  }
  /* Login link stays the clear, clickable accent affordance; kept on one line so any
     wrap drops the whole link cleanly instead of breaking mid-phrase. */
  body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a {
    color: var(--fotofile-v2-accent, #ee4d2d);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  /* Right chevron, snug to the row center; never intercepts the tap. */
  body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::after {
    content: "\203A";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: var(--fotofile-v2-muted, #6b6b6b);
    font-size: 1.05rem;
    line-height: 1;
    pointer-events: none;
  }
}

/* M8-P13-S2a: mobile address progressive collapse. Styles the JS step-flow elements
   only (the read-only summary + collapse are driven by theme.js): an app step badge on
   the billing section header, a full-width display-only step CTA, a non-blocking hint,
   and a transient empty-row flash. CSS-only here; no display:none / visibility:hidden;
   no select/width rule (the P12R-5 select2-hidden-accessible iOS 1px fix stays the later
   winning rule); no #order_review / #payment / #place_order / Turnstile / terms / shipping
   selectors. The field collapse reuses the P12 .ff-billing-collapsed max-height rule; the
   CTA + hint sit after the wrapper and are hidden on collapse by the S2a-FIX rule below
   (max-height/opacity, never display:none). */
@media (max-width: 767px) {
  /* Billing section header reads as an app step: a small numbered badge on the left,
     the edit pill pushed to the right. Overrides the M8-P5 absolute accent bar into an
     in-flow badge (mobile only); the P12 flex header keeps the layout. */
  body.woocommerce-checkout .woocommerce-billing-fields > h3 {
    justify-content: flex-start;
    gap: 10px;
  }
  body.woocommerce-checkout .woocommerce-billing-fields > h3::before {
    content: "1";
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--fotofile-v2-accent, #ee4d2d);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
  }
  body.woocommerce-checkout .woocommerce-billing-fields > h3 .ff-addr-edit {
    margin-left: auto;
  }

  /* Display-only step CTA: full-width, never overflows (border-box). type=button in JS;
     it only collapses the form / focuses the first empty field - it never submits. */
  body.woocommerce-checkout .ff-addr-step {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 14px 0 0;
    padding: 12px 16px;
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    background: var(--fotofile-v2-accent, #ee4d2d);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
  }
  /* Pending = required fields not yet complete: clearly visible OUTLINE button (not a
     faint fill that can read as missing), still tappable (tap -> focus + hint). */
  body.woocommerce-checkout .ff-addr-step--pending {
    background: #ffffff;
    color: var(--fotofile-v2-accent, #ee4d2d);
    border: 1px solid var(--fotofile-v2-accent, #ee4d2d);
  }

  /* M8-P13-S2a-FIX: the CTA + hint now sit after the field wrapper (reliable
     visibility), so collapse must hide them here (they are no longer inside the
     .__field-wrapper max-height rule). max-height/opacity/pointer-events only - never
     display:none/visibility:hidden, and these are our own elements (not native controls). */
  body.woocommerce-checkout .woocommerce-billing-fields.ff-billing-collapsed .ff-addr-step,
  body.woocommerce-checkout .woocommerce-billing-fields.ff-billing-collapsed .ff-addr-step-hint {
    max-height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }

  /* Non-blocking hint under the CTA (revealed via .is-visible; no display:none). */
  body.woocommerce-checkout .ff-addr-step-hint {
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    color: var(--fotofile-v2-accent, #ee4d2d);
    font-size: 0.82rem;
    line-height: 1.35;
    transition: max-height 0.18s ease, opacity 0.18s ease, margin-top 0.18s ease;
  }
  body.woocommerce-checkout .ff-addr-step-hint.is-visible {
    max-height: 60px;
    margin-top: 8px;
    opacity: 1;
  }

  /* Transient highlight on the first empty required row when the user taps too early. */
  body.woocommerce-checkout .form-row.ff-row-flash .input-text,
  body.woocommerce-checkout .form-row.ff-row-flash textarea,
  body.woocommerce-checkout .form-row.ff-row-flash select {
    border-color: var(--fotofile-v2-accent, #ee4d2d) !important;
    box-shadow: 0 0 0 2px rgba(238, 77, 45, 0.18);
  }
}

/* M8-P14-S1: order received / thank-you app card grammar. CSS-only, additive, mobile-first.
   Restyles ONLY WooCommerce's own thank-you output (success notice, order overview, order
   details table, customer/address sections) into app-like confirmation cards. Every rule is
   scoped under body.woocommerce-order-received (the page also carries body.woocommerce-checkout,
   so the inherited P12 bottom-bar padding is reset here; the checkout form selectors find no
   targets on this page). NO fake status / total / payment status - only WooCommerce's own
   printed values are restyled, and generated content is decorative only (a check icon). The
   gateway thank-you block (Kasikorn / QR / bank-transfer instructions, pay / order-again
   controls) is NEVER selected, hidden, or moved - separation comes only from margins on the
   styled cards. No display:none / visibility:hidden; no #payment / #order_review / #place_order /
   gateway / select selectors; no customer-data change. */
@media (max-width: 767px) {
  /* A. Inherited reset: the P12/P13 checkout bottom-bar reserve does not apply here (no bar
     renders on the order-received page), so drop the extra bottom padding. */
  body.woocommerce-order-received {
    padding-bottom: 24px;
  }

  /* B. Success hero: WooCommerce's own "order received" notice reads as a clear app
     confirmation card with a decorative check (pseudo-element content only - never data). */
  body.woocommerce-order-received .woocommerce-notice--success.woocommerce-thankyou-order-received {
    position: relative;
    margin: 0 0 16px;
    padding: 16px 16px 16px 50px;
    border: 1px solid #cdebd9;
    border-left: 3px solid #0a8a4a;
    border-radius: 14px;
    background: #f2fbf6;
    color: var(--fotofile-v2-ink, #222);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.45;
  }
  body.woocommerce-order-received .woocommerce-notice--success.woocommerce-thankyou-order-received::before {
    content: "\2713";
    position: absolute;
    top: 16px;
    left: 14px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #0a8a4a;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
  }

  /* C. Order overview summary card: order no / date / email / total / payment method read as
     app rows (label left, the real Woo <strong> value right). The total uses Woo's own amount. */
  body.woocommerce-order-received .woocommerce-order-overview {
    margin: 0 0 16px;
    padding: 4px 16px;
    list-style: none;
    border: 1px solid var(--fotofile-v2-line, #ececec);
    border-radius: 14px;
    background: var(--fotofile-v2-surface, #fff);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 6px 16px rgba(17, 17, 17, 0.05);
  }
  body.woocommerce-order-received .woocommerce-order-overview li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 11px 0;
    border: 0;
    border-top: 1px solid var(--fotofile-v2-line, #ececec);
    color: var(--fotofile-v2-muted, #6b6b6b);
    font-size: 0.85rem;
    text-transform: none;
    text-align: left;
  }
  body.woocommerce-order-received .woocommerce-order-overview li:first-child {
    border-top: 0;
  }
  body.woocommerce-order-received .woocommerce-order-overview li strong {
    color: var(--fotofile-v2-ink, #222);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: right;
    word-break: break-word;
  }
  body.woocommerce-order-received .woocommerce-order-overview li.woocommerce-order-overview__total strong {
    color: var(--fotofile-v2-price, #ee4d2d);
    font-size: 1.15rem;
  }

  /* D. Order details card: section header + the native order-details table as a readable card;
     product name wraps, line/footer totals stay right and never overflow. */
  body.woocommerce-order-received .woocommerce-order-details {
    margin: 0 0 16px;
  }
  body.woocommerce-order-received .woocommerce-order-details__title {
    margin: 0 0 10px;
    color: var(--fotofile-v2-ink, #222);
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -0.01em;
  }
  body.woocommerce-order-received .woocommerce-table--order-details {
    width: 100%;
    margin: 0;
    border: 1px solid var(--fotofile-v2-line, #ececec);
    border-radius: 14px;
    background: var(--fotofile-v2-surface, #fff);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 6px 16px rgba(17, 17, 17, 0.05);
    border-collapse: collapse;
    overflow: hidden;
  }
  body.woocommerce-order-received .woocommerce-table--order-details th,
  body.woocommerce-order-received .woocommerce-table--order-details td {
    padding: 11px 14px;
    border: 0;
    font-size: 0.9rem;
    vertical-align: top;
  }
  body.woocommerce-order-received .woocommerce-table--order-details thead th {
    color: var(--fotofile-v2-muted, #6b6b6b);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  body.woocommerce-order-received .woocommerce-table--order-details tbody tr.order_item td.woocommerce-table__product-name {
    color: var(--fotofile-v2-ink, #222);
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  body.woocommerce-order-received .woocommerce-table--order-details tbody tr.order_item td.woocommerce-table__product-total {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
  }
  body.woocommerce-order-received .woocommerce-table--order-details tbody tr.order_item + tr.order_item td {
    border-top: 1px solid var(--fotofile-v2-line, #ececec);
  }
  body.woocommerce-order-received .woocommerce-table--order-details tfoot th,
  body.woocommerce-order-received .woocommerce-table--order-details tfoot td {
    color: var(--fotofile-v2-muted, #6b6b6b);
    border-top: 1px solid var(--fotofile-v2-line, #ececec);
  }
  body.woocommerce-order-received .woocommerce-table--order-details tfoot td {
    text-align: right;
    white-space: nowrap;
  }
  body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th,
  body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td {
    color: var(--fotofile-v2-ink, #222);
    font-size: 1rem;
    font-weight: 800;
  }
  body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td {
    color: var(--fotofile-v2-price, #ee4d2d);
  }

  /* E. Customer details / address cards: section header + billing/shipping addresses stacked
     as readable app cards. */
  body.woocommerce-order-received .woocommerce-customer-details {
    margin: 0 0 16px;
  }
  body.woocommerce-order-received .woocommerce-customer-details > h2,
  body.woocommerce-order-received .woocommerce-customer-details__title {
    margin: 0 0 10px;
    color: var(--fotofile-v2-ink, #222);
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -0.01em;
  }
  body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--addresses {
    display: block;
    margin: 0;
  }
  body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column {
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid var(--fotofile-v2-line, #ececec);
    border-radius: 12px;
    background: var(--fotofile-v2-surface, #fff);
  }
  body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column__title {
    margin: 0 0 6px;
    color: var(--fotofile-v2-muted, #6b6b6b);
    font-size: 0.85rem;
    font-weight: 700;
  }
  body.woocommerce-order-received .woocommerce-customer-details address {
    font-style: normal;
    line-height: 1.5;
    color: var(--fotofile-v2-ink, #222);
  }
}

/* M8-P15: checkout polish (display-only). (1) The mobile sticky bottom review bar was
   removed in theme.js, so drop its reserved bottom-gap and neutralize any stale/cached bar
   (`.ff-checkout-review-bar` is our own injected element, NOT a native checkout control).
   (2) Present the order-total as ONE clean summary row - a single tinted pill with the label
   left and the real Woo amount right - instead of two separate boxed cells with a white split
   between them. No totals/shipping/coupon/payment logic, no fake totals, no hidden native
   controls; the native #place_order inside #payment remains the only submit control. */
@media (max-width: 767px) {
  body.woocommerce-checkout {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  /* Safety net: the bar's builder was removed; this only hides our own element if a stale
     cached theme.js briefly recreates it. It is not a native order/payment/legal control. */
  .ff-checkout-review-bar {
    display: none !important;
  }

  /* Order-total = one continuous tinted summary bar (rows are already display:flex with
     space-between, so the tint moves from the two cells onto the row to remove the split). */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total {
    align-items: center;
    margin: 4px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff7f3;
  }
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total th,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total td {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
  }
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total th {
    text-align: left;
  }
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total td {
    text-align: right;
  }
}

/* =========================================================
M9-P1C: Product Listing / Marketplace Card Frame Restore
Safe CSS-only archive/search/shop card refinement
========================================================= */

body.woocommerce-shop ul.products:not(.eael-post-appender),
body.tax-product_cat ul.products:not(.eael-post-appender),
body.tax-product_tag ul.products:not(.eael-post-appender),
body[class*="tax-product_"] ul.products:not(.eael-post-appender),
body.woocommerce-page.search ul.products:not(.eael-post-appender) {
  align-items: stretch;
  clear: both;
}

body.woocommerce-shop ul.products:not(.eael-post-appender) li.product,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product {
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(17, 17, 17, 0.08);
}

body.woocommerce-shop ul.products:not(.eael-post-appender) li.product > a.woocommerce-LoopProduct-link,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product > a.woocommerce-LoopProduct-link,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product > a.woocommerce-LoopProduct-link,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product > a.woocommerce-LoopProduct-link,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

body.woocommerce-shop ul.products:not(.eael-post-appender) li.product a img,
body.woocommerce-shop ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product a img,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product a img,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product a img,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product a img,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}

body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  min-height: 2.55em;
  overflow: hidden;
  color: var(--fotofile-v2-ink, #222);
  font-weight: 550;
  line-height: 1.28;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .price,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product .price,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product .price,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .price,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .price {
  min-width: 0;
  color: var(--fotofile-v2-price, #ee4d2d);
  font-weight: 850;
  line-height: 1.18;
}

body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .price ins,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product .price ins,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product .price ins,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .price ins,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .price ins {
  color: var(--fotofile-v2-price, #ee4d2d);
  font-weight: 850;
  text-decoration: none;
}

body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .price del,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product .price del,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product .price del,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .price del,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .price del {
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-weight: 500;
  opacity: 0.72;
}

body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .onsale,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product .onsale,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product .onsale,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .onsale,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .onsale {
  z-index: 2;
  max-width: calc(100% - 14px);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.12);
}

body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .star-rating,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product .star-rating,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product .star-rating,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .star-rating,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .star-rating {
  color: #f5a400;
  letter-spacing: 0;
}

body.woocommerce-shop ul.products:not(.eael-post-appender) li.product.outofstock,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product.outofstock,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product.outofstock,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product.outofstock,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product.outofstock {
  border-color: rgba(17, 17, 17, 0.12);
}

body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .stock.out-of-stock,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product .stock.out-of-stock,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product .stock.out-of-stock,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .stock.out-of-stock,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .stock.out-of-stock {
  margin: 6px 10px 0;
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.25;
}

body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .button,
body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .add_to_cart_button,
body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .added_to_cart,
body.woocommerce-shop ul.products:not(.eael-post-appender) li.product [class*="product_type_"],
body.tax-product_cat ul.products:not(.eael-post-appender) li.product .button,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product .add_to_cart_button,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product .added_to_cart,
body.tax-product_cat ul.products:not(.eael-post-appender) li.product [class*="product_type_"],
body.tax-product_tag ul.products:not(.eael-post-appender) li.product .button,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product .add_to_cart_button,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product .added_to_cart,
body.tax-product_tag ul.products:not(.eael-post-appender) li.product [class*="product_type_"],
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .button,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .add_to_cart_button,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .added_to_cart,
body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product [class*="product_type_"],
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .button,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .add_to_cart_button,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .added_to_cart,
body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product [class*="product_type_"] {
  display: none !important;
}

body.woocommerce-shop .woocommerce-result-count,
body.tax-product_cat .woocommerce-result-count,
body.tax-product_tag .woocommerce-result-count,
body[class*="tax-product_"] .woocommerce-result-count,
body.woocommerce-page.search .woocommerce-result-count {
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.9rem;
  line-height: 1.35;
}

body.woocommerce-shop .woocommerce-ordering select,
body.tax-product_cat .woocommerce-ordering select,
body.tax-product_tag .woocommerce-ordering select,
body[class*="tax-product_"] .woocommerce-ordering select,
body.woocommerce-page.search .woocommerce-ordering select {
  max-width: 100%;
  min-height: 38px;
  border-color: var(--fotofile-v2-line, #ececec);
  border-radius: 999px;
  background-color: #fff;
  color: var(--fotofile-v2-ink, #222);
}

body.woocommerce-shop .woocommerce-pagination ul,
body.tax-product_cat .woocommerce-pagination ul,
body.tax-product_tag .woocommerce-pagination ul,
body[class*="tax-product_"] .woocommerce-pagination ul,
body.woocommerce-page.search .woocommerce-pagination ul {
  gap: 6px;
}

@media (max-width: 782px) {
  body.woocommerce-shop ul.products:not(.eael-post-appender),
  body.tax-product_cat ul.products:not(.eael-post-appender),
  body.tax-product_tag ul.products:not(.eael-post-appender),
  body[class*="tax-product_"] ul.products:not(.eael-post-appender),
  body.woocommerce-page.search ul.products:not(.eael-post-appender) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product {
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 7px;
    border-color: rgba(17, 17, 17, 0.18);
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.09);
    float: none !important;
  }

  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product a img,
  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product a img,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product a img,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product a img,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product a img,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail {
    margin-bottom: 5px;
    padding: 3px;
  }

  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title {
    min-height: 2.62em;
    margin: 0 8px;
    font-size: 0.79rem;
  }

  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .price,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product .price,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product .price,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .price,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .price {
    margin: 4px 8px 7px;
    font-size: 1.08rem;
  }

  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .price del,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product .price del,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product .price del,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .price del,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .price del {
    font-size: 0.72rem;
  }

  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .onsale,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product .onsale,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product .onsale,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .onsale,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .onsale {
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    font-size: 0.66rem;
  }
}

@media (min-width: 783px) {
  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product {
    padding-bottom: 8px;
    border-color: rgba(17, 17, 17, 0.15);
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.075);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
  }

  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product:hover,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product:hover,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product:hover,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product:hover,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product:hover {
    border-color: rgba(238, 77, 45, 0.28);
    box-shadow: 0 5px 18px rgba(17, 17, 17, 0.12);
  }

  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product a img,
  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product a img,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product a img,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product a img,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product a img,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail {
    margin-bottom: 6px;
    padding: 6px;
  }

  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .woocommerce-loop-product__title {
    margin: 0 10px;
    font-size: 0.88rem;
  }

  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product .price,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product .price,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product .price,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product .price,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product .price {
    margin: 6px 10px 0;
    font-size: 1.14rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product {
    transition: none;
  }

  body.woocommerce-shop ul.products:not(.eael-post-appender) li.product:hover,
  body.tax-product_cat ul.products:not(.eael-post-appender) li.product:hover,
  body.tax-product_tag ul.products:not(.eael-post-appender) li.product:hover,
  body[class*="tax-product_"] ul.products:not(.eael-post-appender) li.product:hover,
  body.woocommerce-page.search ul.products:not(.eael-post-appender) li.product:hover {
    transform: none;
  }
}

/* =========================================================
   M9-P2: Mobile Listing Completion
   Safe CSS-only mobile listing chrome/rhythm refinement
   ========================================================= */

@media (max-width: 767px) {
  body.woocommerce-shop .fotofile-v2-browse-context,
  body.tax-product_cat .fotofile-v2-browse-context,
  body.tax-product_tag .fotofile-v2-browse-context,
  body[class*="tax-product_"] .fotofile-v2-browse-context,
  body.woocommerce-page.search .fotofile-v2-browse-context,
  body.woocommerce-shop .woocommerce-products-header,
  body.tax-product_cat .woocommerce-products-header,
  body.tax-product_tag .woocommerce-products-header,
  body[class*="tax-product_"] .woocommerce-products-header,
  body.woocommerce-page.search .woocommerce-products-header {
    margin: 8px 0 10px;
    padding: 12px 14px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 12px;
    background: linear-gradient(180deg, #fff 0%, #fff8f5 100%);
  }

  body.woocommerce-shop .fotofile-v2-browse-context__label,
  body.tax-product_cat .fotofile-v2-browse-context__label,
  body.tax-product_tag .fotofile-v2-browse-context__label,
  body[class*="tax-product_"] .fotofile-v2-browse-context__label,
  body.woocommerce-page.search .fotofile-v2-browse-context__label {
    margin-bottom: 3px;
    color: var(--fotofile-v2-muted, #6b6b6b);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0;
  }

  body.woocommerce-shop .fotofile-v2-browse-context__value,
  body.tax-product_cat .fotofile-v2-browse-context__value,
  body.tax-product_tag .fotofile-v2-browse-context__value,
  body[class*="tax-product_"] .fotofile-v2-browse-context__value,
  body.woocommerce-page.search .fotofile-v2-browse-context__value,
  body.woocommerce-shop .woocommerce-products-header__title,
  body.tax-product_cat .woocommerce-products-header__title,
  body.tax-product_tag .woocommerce-products-header__title,
  body[class*="tax-product_"] .woocommerce-products-header__title,
  body.woocommerce-page.search .woocommerce-products-header__title {
    margin: 0;
    color: var(--fotofile-v2-ink, #222);
    font-size: 1.08rem;
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: 0;
  }

  body.woocommerce-shop .term-description,
  body.tax-product_cat .term-description,
  body.tax-product_tag .term-description,
  body[class*="tax-product_"] .term-description,
  body.woocommerce-page.search .term-description {
    margin: 6px 0 0;
    color: var(--fotofile-v2-muted, #6b6b6b);
    font-size: 0.84rem;
    line-height: 1.45;
  }

  body.woocommerce-shop .woocommerce-result-count,
  body.tax-product_cat .woocommerce-result-count,
  body.tax-product_tag .woocommerce-result-count,
  body[class*="tax-product_"] .woocommerce-result-count,
  body.woocommerce-page.search .woocommerce-result-count,
  body.woocommerce-shop .woocommerce-ordering,
  body.tax-product_cat .woocommerce-ordering,
  body.tax-product_tag .woocommerce-ordering,
  body[class*="tax-product_"] .woocommerce-ordering,
  body.woocommerce-page.search .woocommerce-ordering {
    box-sizing: border-box;
    min-height: 44px;
    margin: 8px 0 10px;
  }

  body.woocommerce-shop .woocommerce-result-count,
  body.tax-product_cat .woocommerce-result-count,
  body.tax-product_tag .woocommerce-result-count,
  body[class*="tax-product_"] .woocommerce-result-count,
  body.woocommerce-page.search .woocommerce-result-count {
    display: inline-flex;
    align-items: center;
    width: calc(100% - 154px);
    padding: 0 4px;
    color: var(--fotofile-v2-muted, #6b6b6b);
    font-size: 0.8rem;
    line-height: 1.25;
    vertical-align: top;
  }

  body.woocommerce-shop .woocommerce-ordering,
  body.tax-product_cat .woocommerce-ordering,
  body.tax-product_tag .woocommerce-ordering,
  body[class*="tax-product_"] .woocommerce-ordering,
  body.woocommerce-page.search .woocommerce-ordering {
    float: right;
    width: 146px;
    text-align: right;
  }

  body.woocommerce-shop .woocommerce-ordering select,
  body.tax-product_cat .woocommerce-ordering select,
  body.tax-product_tag .woocommerce-ordering select,
  body[class*="tax-product_"] .woocommerce-ordering select,
  body.woocommerce-page.search .woocommerce-ordering select {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 999px;
    background-color: #fff;
    color: var(--fotofile-v2-ink, #222);
    font-size: 0.82rem;
    font-weight: 700;
  }

  body.woocommerce-shop ul.products:not(.eael-post-appender),
  body.tax-product_cat ul.products:not(.eael-post-appender),
  body.tax-product_tag ul.products:not(.eael-post-appender),
  body[class*="tax-product_"] ul.products:not(.eael-post-appender),
  body.woocommerce-page.search ul.products:not(.eael-post-appender) {
    clear: both;
    margin-top: 4px;
    margin-bottom: 18px;
    padding: 0 1px;
    row-gap: 10px;
  }

  body.woocommerce-shop .woocommerce-pagination,
  body.tax-product_cat .woocommerce-pagination,
  body.tax-product_tag .woocommerce-pagination,
  body[class*="tax-product_"] .woocommerce-pagination,
  body.woocommerce-page.search .woocommerce-pagination {
    clear: both;
    margin: 18px 0 calc(22px + env(safe-area-inset-bottom, 0px));
    text-align: center;
  }

  body.woocommerce-shop .woocommerce-pagination ul,
  body.tax-product_cat .woocommerce-pagination ul,
  body.tax-product_tag .woocommerce-pagination ul,
  body[class*="tax-product_"] .woocommerce-pagination ul,
  body.woocommerce-page.search .woocommerce-pagination ul {
    justify-content: center;
    gap: 7px;
  }

  body.woocommerce-shop .woocommerce-pagination a.page-numbers,
  body.woocommerce-shop .woocommerce-pagination span.page-numbers,
  body.tax-product_cat .woocommerce-pagination a.page-numbers,
  body.tax-product_cat .woocommerce-pagination span.page-numbers,
  body.tax-product_tag .woocommerce-pagination a.page-numbers,
  body.tax-product_tag .woocommerce-pagination span.page-numbers,
  body[class*="tax-product_"] .woocommerce-pagination a.page-numbers,
  body[class*="tax-product_"] .woocommerce-pagination span.page-numbers,
  body.woocommerce-page.search .woocommerce-pagination a.page-numbers,
  body.woocommerce-page.search .woocommerce-pagination span.page-numbers {
    min-width: 40px;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 999px;
  }

  body.woocommerce-shop .woocommerce-no-products-found,
  body.tax-product_cat .woocommerce-no-products-found,
  body.tax-product_tag .woocommerce-no-products-found,
  body[class*="tax-product_"] .woocommerce-no-products-found,
  body.woocommerce-page.search .woocommerce-no-products-found,
  body.woocommerce-shop .woocommerce-info,
  body.tax-product_cat .woocommerce-info,
  body.tax-product_tag .woocommerce-info,
  body[class*="tax-product_"] .woocommerce-info,
  body.woocommerce-page.search .woocommerce-info {
    margin: 14px 0 22px;
    padding: 16px 14px;
    border: 1px solid rgba(17, 17, 17, 0.10);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.06);
    color: var(--fotofile-v2-ink, #222);
    font-size: 0.92rem;
    line-height: 1.45;
  }
}

/* =========================================================
   M9-P8: Theme-owned Home runtime (F7A visual cleanup)
   Scoped to the Home template only.
   ========================================================= */

.fotofile-v2-home {
  display: grid;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 28px;
}

.fotofile-v2-home :focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

.fotofile-v2-home a,
.fotofile-v2-home ul.products li.product a,
.fotofile-v2-home .woocommerce-loop-product__title {
  text-decoration: none;
}

.fotofile-v2-home-layout,
.fotofile-v2-home-layout__sidebar,
.fotofile-v2-home-layout__content,
.fotofile-v2-home-banner-row,
.fotofile-v2-home-banner-wrap,
.fotofile-v2-home-section {
  min-width: 0;
}

.fotofile-v2-home-layout,
.fotofile-v2-home-layout__content {
  display: grid;
  gap: 12px;
}

.fotofile-v2-home-layout__sidebar {
  display: grid;
  align-content: start;
  gap: 12px;
}

.fotofile-v2-home-categories,
.fotofile-v2-home-banner-wrap,
.fotofile-v2-home-section {
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 6px 18px rgba(17, 17, 17, 0.05);
}

.fotofile-v2-home-categories {
  padding: 10px;
}

.fotofile-v2-home-section {
  padding: 10px;
}

.fotofile-v2-home-section-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.fotofile-v2-home-section-head h2 {
  margin: 0;
  color: var(--fotofile-v2-ink, #222);
  font-size: 1.08rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.25;
}

.fotofile-v2-home-section-head > a {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(17, 17, 17, 0.10);
  border-radius: 999px;
  background: #fff;
  color: var(--fotofile-v2-accent, #ee4d2d);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
}

/* Category hierarchy menu */
.fotofile-v2-home-cat-tree {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fotofile-v2-home-cat-item {
  min-width: 0;
}

.fotofile-v2-home-cat-toplink,
.fotofile-v2-home-cat-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 8px;
  background: #fbfbfb;
  color: var(--fotofile-v2-ink, #222);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.fotofile-v2-home-cat-summary {
  justify-content: space-between;
  list-style: none;
}

.fotofile-v2-home-cat-summary::-webkit-details-marker {
  display: none;
}

.fotofile-v2-home-cat-summary__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fotofile-v2-home-cat-summary::after {
  content: "\25be";
  flex: 0 0 auto;
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.8rem;
  transition: transform 0.15s ease;
}

.fotofile-v2-home-cat-details[open] > .fotofile-v2-home-cat-summary::after {
  transform: rotate(180deg);
}

.fotofile-v2-home-cat-children {
  display: grid;
  gap: 2px;
  margin: 4px 0 2px;
  padding: 0 0 0 8px;
  list-style: none;
}

.fotofile-v2-home-cat-link {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--fotofile-v2-ink, #222);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.fotofile-v2-home-cat-link--all {
  color: var(--fotofile-v2-accent, #ee4d2d);
  font-weight: 750;
}

.fotofile-v2-home-cat-toplink.is-active,
.fotofile-v2-home-cat-summary.is-active,
.fotofile-v2-home-cat-link.is-active {
  border-color: var(--fotofile-v2-accent, #ee4d2d);
  background: #fff1eb;
  color: var(--fotofile-v2-accent, #ee4d2d);
}

/* Banner slots */
.fotofile-v2-home-banner-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.fotofile-v2-home-banner-wrap {
  padding: 8px;
}

.fotofile-v2-home-banner {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #f7f7f7;
  color: var(--fotofile-v2-ink, #222);
  text-decoration: none;
}

.fotofile-v2-home-banner--square {
  aspect-ratio: 1 / 1;
}

.fotofile-v2-home-banner--wide {
  aspect-ratio: 16 / 5;
}

.fotofile-v2-home-banner__media {
  position: absolute;
  inset: 0;
  display: block;
}

.fotofile-v2-home-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fotofile-v2-home-banner--placeholder {
  align-content: center;
  gap: 4px;
  padding: 12px;
  background: linear-gradient(135deg, #fafafa 0%, #f2f2f2 100%);
}

.fotofile-v2-home-banner--placeholder span,
.fotofile-v2-home-banner--placeholder strong {
  display: block;
  margin: 0;
}

.fotofile-v2-home-banner--placeholder span {
  color: var(--fotofile-v2-accent, #ee4d2d);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0;
}

.fotofile-v2-home-banner--placeholder strong {
  color: var(--fotofile-v2-ink, #222);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.2;
}

/* Distributor / official brand logo strip */
.fotofile-v2-home-logo-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.fotofile-v2-home-logo {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 96px;
  height: 54px;
  padding: 8px 14px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 8px;
  background: #fff;
  scroll-snap-align: start;
}

.fotofile-v2-home-logo__image {
  max-width: 130px;
  max-height: 38px;
  object-fit: contain;
}

/* Product lists (shared) */
.fotofile-v2-home ul.products.fotofile-v2-home-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  clear: both;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fotofile-v2-home ul.products.fotofile-v2-home-products::before,
.fotofile-v2-home ul.products.fotofile-v2-home-products::after {
  content: none;
}

.fotofile-v2-home ul.products.fotofile-v2-home-products li.product {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0 0 6px;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.10);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
}

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

.fotofile-v2-home ul.products.fotofile-v2-home-products li.product a img,
.fotofile-v2-home ul.products.fotofile-v2-home-products li.product img.attachment-woocommerce_thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 7px;
  object-fit: contain;
  background: #fff;
}

.fotofile-v2-home ul.products.fotofile-v2-home-products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  min-height: 2.7em;
  margin: 7px 8px 0;
  overflow: hidden;
  color: var(--fotofile-v2-ink, #222);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.35;
  text-decoration: none;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.fotofile-v2-home ul.products.fotofile-v2-home-products li.product .price {
  display: block;
  min-height: 1.35em;
  margin: 6px 8px 0;
  color: var(--fotofile-v2-price, #ee4d2d);
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.2;
}

.fotofile-v2-home ul.products.fotofile-v2-home-products li.product .price ins {
  color: var(--fotofile-v2-price, #ee4d2d);
  font-weight: 850;
  text-decoration: none;
}

.fotofile-v2-home ul.products.fotofile-v2-home-products li.product .price del {
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-weight: 500;
  opacity: 0.72;
}

.fotofile-v2-home ul.products.fotofile-v2-home-products li.product .onsale {
  top: 8px;
  right: 8px;
  left: auto;
  min-width: 0;
  min-height: 0;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--fotofile-v2-sale, #ee4d2d);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
}

.fotofile-v2-home ul.products.fotofile-v2-home-products li.product .button,
.fotofile-v2-home ul.products.fotofile-v2-home-products li.product .add_to_cart_button,
.fotofile-v2-home ul.products.fotofile-v2-home-products li.product .added_to_cart,
.fotofile-v2-home ul.products.fotofile-v2-home-products li.product [class*="product_type_"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Horizontal rails (sale / new) */
.fotofile-v2-home ul.products.fotofile-v2-home-products--rail {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.fotofile-v2-home ul.products.fotofile-v2-home-products--rail li.product {
  flex: 0 0 min(72vw, 170px);
  scroll-snap-align: start;
}

/* Brands + blog rails */
.fotofile-v2-home-brand-list,
.fotofile-v2-home-blog-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.fotofile-v2-home-brand-list {
  padding-bottom: 4px;
}

.fotofile-v2-home-brand-card {
  display: grid;
  flex: 0 0 116px;
  min-width: 116px;
  align-items: center;
  justify-items: center;
  gap: 6px;
  min-height: 72px;
  padding: 9px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 8px;
  background: #fff;
  color: var(--fotofile-v2-ink, #222);
  text-align: center;
  text-decoration: none;
  scroll-snap-align: start;
}

.fotofile-v2-home-brand-card__logo {
  display: grid;
  width: 100%;
  min-height: 34px;
  place-items: center;
}

.fotofile-v2-home-brand-card__image {
  max-width: 100%;
  max-height: 34px;
  object-fit: contain;
}

.fotofile-v2-home-brand-card__initial {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: #fff1eb;
  color: var(--fotofile-v2-accent, #ee4d2d);
  font-size: 1rem;
  font-weight: 850;
}

.fotofile-v2-home-brand-card__name {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fotofile-v2-home-post {
  flex: 0 0 min(82vw, 260px);
  scroll-snap-align: start;
}

.fotofile-v2-home-post a {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 13px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 8px;
  background: #fbfbfb;
  color: var(--fotofile-v2-ink, #222);
  text-decoration: none;
}

.fotofile-v2-home-post__date {
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.76rem;
  font-weight: 700;
}

.fotofile-v2-home-post h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .fotofile-v2-home {
    width: min(100% - 20px, var(--fotofile-v2-container));
    padding-bottom: calc(24px + var(--fotofile-v2-bottom-nav, 62px));
  }

  .fotofile-v2-home-layout,
  .fotofile-v2-home-layout__sidebar,
  .fotofile-v2-home-layout__content {
    display: contents;
  }

  .fotofile-v2-home-categories { order: 1; }
  .fotofile-v2-home-banner-row { order: 2; }
  .fotofile-v2-home-banner-wrap--left_square { order: 3; }
  .fotofile-v2-home-distributors { order: 4; }
  .fotofile-v2-home-brands { order: 5; }
  .fotofile-v2-home-rail--sale { order: 6; }
  .fotofile-v2-home-rail--new { order: 7; }
  .fotofile-v2-home-board { order: 8; }
  .fotofile-v2-home-blog { order: 9; }
}

@media (min-width: 783px) {
  .fotofile-v2-home {
    width: min(100% - 20px, 1560px);
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 28px;
  }

  .fotofile-v2-home-layout {
    grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }

  .fotofile-v2-home-layout__sidebar {
    position: sticky;
    top: 10px;
    align-self: start;
  }

  .fotofile-v2-home-layout__content {
    gap: 10px;
  }

  .fotofile-v2-home-banner-row {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 230px);
    align-items: stretch;
    gap: 8px;
  }

  .fotofile-v2-home-banner-row .fotofile-v2-home-banner-wrap {
    min-width: 0;
  }

  .fotofile-v2-home-banner-row .fotofile-v2-home-banner-wrap--right_square .fotofile-v2-home-banner {
    aspect-ratio: 1 / 1;
  }

  .fotofile-v2-home-banner-row .fotofile-v2-home-banner-wrap--right_wide .fotofile-v2-home-banner {
    aspect-ratio: auto;
    height: 100%;
    min-height: 120px;
  }

  .fotofile-v2-home-brand-list {
    gap: 7px;
  }

  .fotofile-v2-home-brand-card {
    flex-basis: 118px;
    min-width: 118px;
    min-height: 62px;
    padding: 7px;
  }

  .fotofile-v2-home-brand-card__logo {
    min-height: 30px;
  }

  .fotofile-v2-home-brand-card__image {
    max-height: 30px;
  }

  .fotofile-v2-home ul.products.fotofile-v2-home-products--rail {
    display: flex;
    gap: 6px;
  }

  .fotofile-v2-home ul.products.fotofile-v2-home-products--rail li.product {
    flex-basis: 138px;
  }

  .fotofile-v2-home ul.products.fotofile-v2-home-products--rail li.product .woocommerce-loop-product__title {
    min-height: 2.45em;
    margin: 5px 6px 0;
    font-size: 0.7rem;
    line-height: 1.22;
  }

  .fotofile-v2-home ul.products.fotofile-v2-home-products--rail li.product .price {
    margin: 5px 6px 0;
    font-size: 0.78rem;
  }

  .fotofile-v2-home ul.products.fotofile-v2-home-products--board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  .fotofile-v2-home ul.products.fotofile-v2-home-products--board li.product a img,
  .fotofile-v2-home ul.products.fotofile-v2-home-products--board li.product img.attachment-woocommerce_thumbnail {
    padding: 6px;
  }

  .fotofile-v2-home ul.products.fotofile-v2-home-products--board li.product .woocommerce-loop-product__title {
    min-height: 2.5em;
    margin: 6px 7px 0;
    font-size: 0.74rem;
    line-height: 1.25;
  }

  .fotofile-v2-home ul.products.fotofile-v2-home-products--board li.product .price {
    margin: 5px 7px 0;
    font-size: 0.82rem;
  }

  .fotofile-v2-home ul.products.fotofile-v2-home-products--board li.product .onsale {
    top: 5px;
    right: 5px;
    padding: 3px 5px;
    font-size: 0.62rem;
  }

  .fotofile-v2-home-post {
    flex-basis: 260px;
  }
}

@media (min-width: 1180px) {
  .fotofile-v2-home-layout {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  }

  .fotofile-v2-home-banner-row {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
  }

  .fotofile-v2-home-brand-card {
    flex-basis: 124px;
    min-width: 124px;
  }

  .fotofile-v2-home ul.products.fotofile-v2-home-products--rail li.product {
    flex-basis: 148px;
  }

  .fotofile-v2-home ul.products.fotofile-v2-home-products--board {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .fotofile-v2-home-layout {
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
  }

  .fotofile-v2-home-banner-row {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 270px);
  }

  .fotofile-v2-home ul.products.fotofile-v2-home-products--rail li.product {
    flex-basis: 154px;
  }

  .fotofile-v2-home ul.products.fotofile-v2-home-products--board {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .fotofile-v2-home * {
    scroll-behavior: auto;
  }

  .fotofile-v2-home-cat-summary::after {
    transition: none;
  }
}

/* ============================================================
   M9-P11 Archive Runtime UX — theme-owned category/archive two-column layout.

   Scoped under `.fotofile-v2-woocommerce` (the theme `woocommerce.php` wrapper,
   proven active by the M9-P10 terminal PASS). Desktop/tablet render a left
   sidebar (real product_cat tree + honest collapsed filter shells) beside the
   native WooCommerce content column (result-count / ordering / product loop /
   pagination via `woocommerce_content()`).

   Mobile (<=782px) keeps the existing app-feed chip navigation and the accepted
   M9-P1C/P2 two-column product feed untouched — the sidebar is a desktop/tablet
   enhancement and is hidden below 783px. No template override, no query mutation
   beyond archive-scoped loop_shop_per_page=25 / columns, no SEO/H1
   change, and real WooCommerce data only.
   ============================================================ */
.fotofile-v2-woocommerce .fotofile-v2-archive { width: 100%; }
.fotofile-v2-woocommerce .fotofile-v2-archive__inner { display: block; }
/* min-width:0 lets the product grid shrink inside the layout (no overflow). */
.fotofile-v2-woocommerce .fotofile-v2-archive__main { min-width: 0; }
/* WooCommerce's clearfix `ul.products::before/::after` (content:""; display:table)
   become grid items once the loop is display:grid, taking the first and last grid
   cells so the first product is pushed into the 2nd cell and the first cell reads
   blank (the reported first-row gap: desktop "too far right", mobile first product
   in the right column). Remove them in the archive grid exactly as the Home grid
   already does (`.fotofile-v2-home-products::before/::after`). Unscoped by width —
   the gap showed on both the mobile 2-col feed and the desktop grid. */
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender)::before,
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender)::after {
  content: none;
}
/* Sidebar is a desktop/tablet enhancement; mobile keeps the app-feed chips. */
.fotofile-v2-woocommerce .fotofile-v2-archive__sidebar { display: none; }

/* Sidebar panels (category tree + filter shell) */
.fotofile-v2-archive__sidebar .fotofile-v2-archive-panel {
  margin: 0 0 16px;
  padding: 14px;
  background: var(--fotofile-v2-surface);
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius);
  box-shadow: var(--fotofile-v2-shadow-soft);
}
.fotofile-v2-archive__sidebar .fotofile-v2-archive-panel:last-child { margin-bottom: 0; }
.fotofile-v2-archive-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.fotofile-v2-archive-panel__title {
  margin: 0;
  color: var(--fotofile-v2-ink);
  font-size: 0.95rem;
  font-weight: 800;
}
.fotofile-v2-archive-panel__all {
  color: var(--fotofile-v2-accent);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Category tree */
.fotofile-v2-archive-cat-tree,
.fotofile-v2-archive-cat-children { margin: 0; padding: 0; list-style: none; }
.fotofile-v2-archive-cat-item { margin: 0; }
.fotofile-v2-archive-cat-details > summary,
.fotofile-v2-archive-cat-toplink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: var(--fotofile-v2-radius-sm);
  color: var(--fotofile-v2-ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
}
.fotofile-v2-archive-cat-details > summary::-webkit-details-marker { display: none; }
.fotofile-v2-archive-cat-toplink:hover,
.fotofile-v2-archive-cat-details > summary:hover { background: rgba(17, 17, 17, 0.03); }
.fotofile-v2-archive-cat-summary__icon {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--fotofile-v2-muted);
  border-bottom: 2px solid var(--fotofile-v2-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.fotofile-v2-archive-cat-details[open] > summary .fotofile-v2-archive-cat-summary__icon { transform: rotate(-135deg); }
.fotofile-v2-archive-cat-summary.is-active,
.fotofile-v2-archive-cat-toplink.is-active { color: var(--fotofile-v2-accent); }
.fotofile-v2-archive-cat-children {
  margin: 2px 0 6px;
  padding-left: 8px;
  border-left: 2px solid var(--fotofile-v2-line);
}
.fotofile-v2-archive-cat-link {
  display: block;
  padding: 6px 8px;
  border-radius: var(--fotofile-v2-radius-sm);
  color: var(--fotofile-v2-muted);
  font-size: 0.82rem;
  text-decoration: none;
}
.fotofile-v2-archive-cat-link:hover { background: rgba(17, 17, 17, 0.03); color: var(--fotofile-v2-ink); }
.fotofile-v2-archive-cat-link--all { color: var(--fotofile-v2-ink); font-weight: 600; }
.fotofile-v2-archive-cat-link.is-active { color: var(--fotofile-v2-accent); font-weight: 700; }

/* Filter shells (honest — no fabricated values or counts) */
.fotofile-v2-archive-filters__note {
  margin: 0 0 8px;
  color: var(--fotofile-v2-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}
.fotofile-v2-archive-filter-list { display: block; }
.fotofile-v2-archive-filter { border-top: 1px solid var(--fotofile-v2-line); }
.fotofile-v2-archive-filter:first-child { border-top: 0; }
.fotofile-v2-archive-filter__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 2px;
  color: var(--fotofile-v2-ink);
  font-size: 0.83rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.fotofile-v2-archive-filter__summary::-webkit-details-marker { display: none; }
.fotofile-v2-archive-filter__icon {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--fotofile-v2-muted);
  border-bottom: 2px solid var(--fotofile-v2-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.fotofile-v2-archive-filter[open] .fotofile-v2-archive-filter__icon { transform: rotate(-135deg); }
.fotofile-v2-archive-filter__body { padding: 2px 2px 10px; }
.fotofile-v2-archive-filter__soon {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.04);
  color: var(--fotofile-v2-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Desktop / tablet: two-column layout + denser content grid. */
@media (min-width: 783px) {
  .fotofile-v2-woocommerce .fotofile-v2-archive__inner {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }
  .fotofile-v2-woocommerce .fotofile-v2-archive__sidebar {
    display: block;
    position: sticky;
    top: 12px;
    align-self: start;
    max-height: calc(100vh - 24px);
    overflow: auto;
  }
  /* Tablet (783-1023px): flexible larger-card grid (~2-3 cols by width). Desktop
     (>=1024px) pins to an explicit 5 columns in the block below (hard requirement:
     5 products per row in grid view; ~170px cards at the 1200px-capped ~916px
     main). Equal specificity to the base archive grid rule, placed later, so it
     wins on desktop; the <=782px 2-col !important feed is unaffected. */
  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender) {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
  }
  /* Cards must fill their grid tracks. The native loop renders
     `ul.products.columns-5`, whose WooCommerce default `li.product{ float:left;
     width:~16% }` otherwise collapses every card into a narrow sliver inside the
     grid cell on desktop. The <=782px feed already neutralises this; desktop had
     no equivalent until archives became theme-native (M9-P10/P11). Scope keeps it
     archive-only; specificity (0,5,2) beats the WooCommerce default (0,3,2) so no
     !important is needed. */
  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender) li.product {
    width: auto;
    max-width: none;
    margin: 0;
    float: none;
  }
}

@media (min-width: 1024px) {
  .fotofile-v2-woocommerce .fotofile-v2-archive__inner {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
  }
  /* Desktop (>=1024px): fixed 5 products per row (hard requirement). Explicit
     5-col (not auto-fill) keeps it stable across all desktop widths; minmax(0,1fr)
     lets tracks shrink so there is never horizontal overflow. Grid view only —
     list view (ff_view=list) overrides to single-column rows separately. */
  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 783px) and (prefers-reduced-motion: reduce) {
  .fotofile-v2-archive-cat-summary__icon,
  .fotofile-v2-archive-filter__icon { transition: none; }
}

/* ============================================================
   M9-P12A Archive toolbar + grid/list (pricelist) view — presentational only.

   Grid/list toggle via the `ff_view` GET param (no query/loop/SEO change). List
   view restyles the NATIVE `li.product` markup as compact rows — real WooCommerce
   image / title / price / link only, no fabricated data.
   All selectors scoped under `.fotofile-v2-woocommerce .fotofile-v2-archive`.
   ============================================================ */
.fotofile-v2-archive-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 12px;
}
.fotofile-v2-archive-toolbar__label {
  margin-right: auto;
  color: var(--fotofile-v2-muted);
  font-size: 0.85rem;
  font-weight: 600;
}
.fotofile-v2-archive-toolbar__views {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--fotofile-v2-surface);
  border: 1px solid var(--fotofile-v2-line);
  border-radius: 999px;
}
.fotofile-v2-archive-toolbar__view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  color: var(--fotofile-v2-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
.fotofile-v2-archive-toolbar__view:hover { color: var(--fotofile-v2-ink); }
.fotofile-v2-archive-toolbar__view.is-active { background: var(--fotofile-v2-ink); color: #fff; }
.fotofile-v2-archive-toolbar__icon { width: 13px; height: 13px; flex: 0 0 auto; }
/* CSS-drawn icons — no external assets */
.fotofile-v2-archive-toolbar__icon--grid {
  background:
    linear-gradient(currentColor 0 0) 0 0 / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 8px 0 / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 0 8px / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 8px 8px / 5px 5px no-repeat;
}
.fotofile-v2-archive-toolbar__icon--list {
  background:
    linear-gradient(currentColor 0 0) 0 0 / 13px 3px no-repeat,
    linear-gradient(currentColor 0 0) 0 5px / 13px 3px no-repeat,
    linear-gradient(currentColor 0 0) 0 10px / 13px 3px no-repeat;
}

/* --- List / pricelist view: native li.product restyled as compact rows ---
   `display:flex !important` is required to override the accepted <=782px 2-col
   feed grid (which is itself `display:grid !important`) only when list view is
   explicitly selected; grid view is untouched. Selector carries the
   `.fotofile-v2-woocommerce` prefix so its (0,4,1) specificity wins over the
   mobile `body.woocommerce-shop ...` (0,3,2) !important rule. */
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
}
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  width: auto;
  max-width: none;
  padding: 10px 12px;
}
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product a img,
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product img.attachment-woocommerce_thumbnail {
  width: 96px;
  flex: 0 0 96px;
  margin: 0;
  padding: 4px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product .woocommerce-loop-product__title {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  font-size: 0.9rem;
}
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product .price {
  margin: 0 0 0 auto;
  padding: 0;
  white-space: nowrap;
  font-size: 1rem;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product .fotofile-v2-card-meta {
  flex: 0 0 auto;
  margin: 0 0 0 10px;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product .button,
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product .add_to_cart_button,
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product .added_to_cart,
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product [class*="product_type_"] {
  display: none !important;
}

@media (max-width: 782px) {
  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product a img,
  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product img.attachment-woocommerce_thumbnail {
    width: 76px;
    flex-basis: 76px;
  }
}

/* ============================================================
   M9-P12A.1 Archive visual alignment — marketplace rhythm only.

   Local-first presentational pass: real archive context, neutral service strip,
   unified native controls, and grid/list card polish. No search, no query
   mutation, no JS, no external assets, no fake product data.
   ============================================================ */
.fotofile-v2-woocommerce .fotofile-v2-archive__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
}

.fotofile-v2-woocommerce .fotofile-v2-archive-hero,
.fotofile-v2-woocommerce .woocommerce-products-header,
.fotofile-v2-woocommerce .term-description,
.fotofile-v2-woocommerce .fotofile-v2-commerce-feed,
.fotofile-v2-woocommerce .fotofile-v2-archive-services,
.fotofile-v2-woocommerce .woocommerce-notices-wrapper,
.fotofile-v2-woocommerce .woocommerce-info,
.fotofile-v2-woocommerce .woocommerce-error,
.fotofile-v2-woocommerce .woocommerce-message,
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender),
.fotofile-v2-woocommerce .woocommerce-pagination {
  flex: 0 0 100%;
  max-width: 100%;
}

.fotofile-v2-archive-hero {
  order: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 16px;
  margin: 0 0 12px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(238, 77, 45, 0.10) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #fff 0%, #fff9f6 100%);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 24px rgba(17, 17, 17, 0.05);
}

.fotofile-v2-archive-hero__copy {
  min-width: 0;
}

.fotofile-v2-archive-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: 7px;
  color: var(--fotofile-v2-accent, #ee4d2d);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.fotofile-v2-archive-hero__title {
  margin: 0;
  color: var(--fotofile-v2-ink, #222);
  font-size: clamp(1.38rem, 2.1vw, 2.1rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.12;
}

.fotofile-v2-archive-hero__description {
  max-width: 70ch;
  margin: 8px 0 0;
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.92rem;
  line-height: 1.55;
}

.fotofile-v2-archive-hero__meta {
  display: grid;
  align-content: center;
  justify-items: start;
  min-width: 148px;
  padding: 12px 14px;
  border: 1px solid rgba(238, 77, 45, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.fotofile-v2-archive-hero__meta span {
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.75rem;
  font-weight: 700;
}

.fotofile-v2-archive-hero__meta strong {
  margin-top: 3px;
  color: var(--fotofile-v2-ink, #222);
  font-size: 1rem;
  font-weight: 900;
}

.fotofile-v2-woocommerce .woocommerce-products-header {
  order: 2;
}

.fotofile-v2-woocommerce .term-description {
  order: 3;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(17, 17, 17, 0.07);
  border-radius: 8px;
  background: #fff;
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.9rem;
  line-height: 1.55;
}

.fotofile-v2-woocommerce .fotofile-v2-commerce-feed {
  order: 10;
  margin-bottom: 10px;
}

.fotofile-v2-archive-services {
  order: 20;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.fotofile-v2-archive-services__item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 8px;
  background: #fff;
  color: var(--fotofile-v2-ink, #222);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.035);
}

.fotofile-v2-archive-services__icon {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  background: #fff1eb;
}

.fotofile-v2-archive-services__icon::before {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--fotofile-v2-accent, #ee4d2d);
  border-bottom: 2px solid var(--fotofile-v2-accent, #ee4d2d);
  transform: rotate(-45deg);
}

.fotofile-v2-archive-toolbar,
.fotofile-v2-woocommerce .woocommerce-result-count,
.fotofile-v2-woocommerce .woocommerce-ordering {
  min-height: 44px;
  margin-top: 0;
  margin-bottom: 12px;
}

.fotofile-v2-archive-toolbar {
  order: 32;
  flex: 0 1 auto;
  margin-left: auto;
  padding: 5px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.035);
}

.fotofile-v2-woocommerce .woocommerce-result-count {
  order: 31;
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  width: auto;
  min-width: min(100%, 220px);
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

.fotofile-v2-woocommerce .woocommerce-ordering {
  order: 33;
  flex: 0 1 auto;
  float: none;
}

.fotofile-v2-woocommerce .woocommerce-ordering select {
  min-height: 44px;
  max-width: 100%;
  padding: 0 36px 0 12px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 8px;
  background-color: #fff;
  color: var(--fotofile-v2-ink, #222);
  font-size: 0.86rem;
  font-weight: 700;
}

.fotofile-v2-archive-toolbar__label {
  margin-right: 2px;
  padding: 0 6px;
  color: var(--fotofile-v2-muted, #6b6b6b);
}

.fotofile-v2-archive-toolbar__views {
  border: 0;
  background: #f6f6f6;
}

.fotofile-v2-archive-toolbar__view {
  min-height: 34px;
  padding: 6px 11px;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender) {
  order: 40;
}

.fotofile-v2-woocommerce .woocommerce-pagination {
  order: 50;
  margin-top: 8px;
  padding-bottom: 8px;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.09);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 20px rgba(17, 17, 17, 0.045);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product:hover {
  border-color: rgba(238, 77, 45, 0.22);
  box-shadow: 0 2px 4px rgba(17, 17, 17, 0.06), 0 12px 26px rgba(17, 17, 17, 0.075);
  transform: translateY(-1px);
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product a img,
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 10px;
  object-fit: contain;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  min-height: 2.7em;
  margin: 9px 10px 0;
  overflow: hidden;
  color: var(--fotofile-v2-ink, #222);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.35;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .price {
  display: block;
  min-height: 1.35em;
  margin: 7px 10px 0;
  color: var(--fotofile-v2-price, #ee4d2d);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.2;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .price ins {
  color: var(--fotofile-v2-price, #ee4d2d);
  font-weight: 900;
  text-decoration: none;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .price del {
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.72;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender) li.product .fotofile-v2-card-meta {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 6px;
  margin: 6px 10px 0;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender) li.product .fotofile-v2-card-shipping {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  background: #eef8f1;
  color: #147a35;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .onsale {
  top: 8px;
  right: 8px;
  left: auto;
  min-width: 0;
  min-height: 0;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--fotofile-v2-sale, #ee4d2d);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .button,
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .add_to_cart_button,
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .added_to_cart,
.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product [class*="product_type_"] {
  display: none !important;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product {
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.035);
}

@media (min-width: 1024px) {
  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 782px) {
  .fotofile-v2-woocommerce .fotofile-v2-archive__main {
    display: flex;
    gap: 0;
  }

  .fotofile-v2-archive-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 10px;
    padding: 14px;
  }

  .fotofile-v2-archive-hero__title {
    font-size: 1.28rem;
  }

  .fotofile-v2-archive-hero__description {
    font-size: 0.86rem;
  }

  .fotofile-v2-archive-hero__meta {
    min-width: 0;
    padding: 10px 12px;
  }

  .fotofile-v2-archive-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 10px;
  }

  .fotofile-v2-archive-services__item {
    min-height: 40px;
    padding: 8px;
    font-size: 0.72rem;
  }

  .fotofile-v2-archive-services__icon {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }

  .fotofile-v2-archive-toolbar,
  .fotofile-v2-woocommerce .woocommerce-result-count,
  .fotofile-v2-woocommerce .woocommerce-ordering {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 8px;
  }

  .fotofile-v2-archive-toolbar {
    justify-content: space-between;
    margin-left: 0;
  }

  .fotofile-v2-archive-toolbar__views {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .fotofile-v2-woocommerce .woocommerce-ordering select {
    width: 100%;
  }

  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product a img,
  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product img.attachment-woocommerce_thumbnail {
    padding: 7px;
  }

  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .woocommerce-loop-product__title {
    margin: 7px 8px 0;
    font-size: 0.76rem;
  }

  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .price {
    margin: 6px 8px 0;
    font-size: 0.86rem;
  }

  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender) li.product .fotofile-v2-card-meta {
    margin: 5px 8px 0;
  }

  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender) li.product .fotofile-v2-card-shipping {
    font-size: 0.68rem;
  }

  .fotofile-v2-woocommerce .woocommerce-pagination {
    padding-bottom: calc(12px + var(--fotofile-v2-bottom-nav, 62px));
  }

  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products.fotofile-v2-products--list li.product {
    gap: 10px;
    padding: 9px;
  }
}

/* ============================================================
   M9-P12A.4 Archive marketplace visual parity + real filter pass.

   Local-only presentational refinement. No JS, AJAX, external assets, fake
   product data, or query mutation CSS hooks.
   ============================================================ */
.fotofile-v2-archive-services--marketplace {
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.035);
}

.fotofile-v2-archive-services--marketplace .fotofile-v2-archive-services__item {
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-right: 1px solid rgba(17, 17, 17, 0.07);
  border-radius: 0;
  box-shadow: none;
  color: #444;
  font-size: 0.76rem;
  font-weight: 700;
}

.fotofile-v2-archive-services--marketplace .fotofile-v2-archive-services__item:last-child {
  border-right: 0;
}

.fotofile-v2-archive-services--marketplace .fotofile-v2-archive-services__icon {
  flex-basis: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(238, 77, 45, 0.09);
}

.fotofile-v2-archive-services--marketplace .fotofile-v2-archive-services__icon::before {
  width: 8px;
  height: 4px;
  border-width: 1.5px;
}

.fotofile-v2-archive-toolbar {
  gap: 6px;
}

.fotofile-v2-archive-toolbar__label {
  display: none;
}

.fotofile-v2-archive-toolbar__per-page {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border-right: 1px solid rgba(17, 17, 17, 0.08);
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.fotofile-v2-archive-toolbar__per-page strong {
  color: var(--fotofile-v2-ink, #222);
  font-size: 0.84rem;
  font-weight: 850;
}

.fotofile-v2-woocommerce .woocommerce-ordering {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-left: 10px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.035);
}

.fotofile-v2-woocommerce .woocommerce-ordering::before {
  content: "เรียงตาม:";
  flex: 0 0 auto;
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.fotofile-v2-woocommerce .woocommerce-ordering select {
  min-height: 34px;
  border: 0;
  border-left: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 0 8px 8px 0;
  background-color: #fff;
}

.fotofile-v2-archive-filter__options {
  display: grid;
  gap: 6px;
}

.fotofile-v2-archive-filter__option {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 6px;
  background: #fff;
  color: var(--fotofile-v2-ink, #222);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
}

.fotofile-v2-archive-filter__option:hover {
  border-color: rgba(238, 77, 45, 0.28);
  color: var(--fotofile-v2-accent, #ee4d2d);
}

.fotofile-v2-archive-filter-price {
  display: grid;
  gap: 8px;
}

.fotofile-v2-archive-filter-price label {
  display: grid;
  gap: 4px;
  color: var(--fotofile-v2-muted, #6b6b6b);
  font-size: 0.74rem;
  font-weight: 700;
}

.fotofile-v2-archive-filter-price input {
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 6px;
  background: #fff;
  color: var(--fotofile-v2-ink, #222);
  font-size: 0.86rem;
}

.fotofile-v2-archive-filter-price button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--fotofile-v2-accent, #ee4d2d);
  border-radius: 6px;
  background: var(--fotofile-v2-accent, #ee4d2d);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.fotofile-v2-archive-filter-price button:hover {
  filter: brightness(0.96);
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender) li.product .fotofile-v2-card-meta {
  display: flex;
  width: calc(100% - 20px);
  min-height: 16px;
  align-items: center;
  justify-content: space-between;
  margin: auto 10px 8px;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender) li.product .fotofile-v2-card-shipping {
  position: relative;
  display: inline-flex;
  min-height: 16px;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #8a8f93;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender) li.product .fotofile-v2-card-shipping::before {
  content: "";
  width: 11px;
  height: 7px;
  border: 1.2px solid currentColor;
  border-left-width: 4px;
  border-radius: 2px;
  opacity: 0.74;
}

.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender) li.product .fotofile-v2-card-shipping::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 7px 0 0 currentColor;
  opacity: 0.74;
}

@media (max-width: 782px) {
  .fotofile-v2-archive-services--marketplace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fotofile-v2-archive-services--marketplace .fotofile-v2-archive-services__item:nth-child(2n) {
    border-right: 0;
  }

  .fotofile-v2-archive-services--marketplace .fotofile-v2-archive-services__item:nth-child(n + 3) {
    border-top: 1px solid rgba(17, 17, 17, 0.07);
  }

  .fotofile-v2-archive-toolbar__per-page {
    border-right: 0;
    padding-left: 6px;
  }

  .fotofile-v2-woocommerce .woocommerce-ordering {
    padding-left: 10px;
  }

  .fotofile-v2-woocommerce .woocommerce-ordering select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender) li.product .fotofile-v2-card-meta {
    width: calc(100% - 16px);
    margin-right: 8px;
    margin-bottom: 7px;
    margin-left: 8px;
  }

  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender) li.product .fotofile-v2-card-shipping {
    font-size: 0.66rem;
  }
}

/* ============================================================
   M11-STAB-A Archive / category product-grid stabilization
   ------------------------------------------------------------
   Root cause: the M9-P12A polished grid + card CSS is scoped to
   `.fotofile-v2-archive__main`, a wrapper this branch's archive
   markup does NOT emit (inc/archive.php injects hero/toolbar/
   sidebar via woocommerce_before_shop_loop hooks but never wraps
   the loop in `.fotofile-v2-archive__main`). So that whole block
   (theme.css ~6579-7290) is inert. The archive then falls back to
   the older generic `.woocommerce ul.products` rules, whose grid
   activation is unreliable post-Elementor (no `.elementor-grid`
   token) and where WooCommerce's own `.columns-5 li.product`
   width/float sizing shrinks the cards into a tiny, scattered
   layout.

   Fix (CSS only): re-anchor the grid to the wrapper that IS always
   present on archives — `main.fotofile-v2-woocommerce` — scoped to
   archive/shop bodies (`body.archive`) so single-product related/
   up-sell rails, the home swiper (`.eael-post-appender`), cart and
   checkout are untouched. Force display:grid with responsive
   columns and neutralize WooCommerce's float/width/margin so the
   grid tracks control card width. List view
   (`.fotofile-v2-products--list`) is excluded. No `content:`, no
   `display:contents`, no PHP/template/loop change, no query /
   count / sort / pagination / canonical / schema change. Appended
   last + higher specificity so it wins deterministically.
   ============================================================ */
body.archive .fotofile-v2-woocommerce ul.products:not(.eael-post-appender):not(.fotofile-v2-products--list) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  float: none;
}

body.archive .fotofile-v2-woocommerce ul.products:not(.eael-post-appender):not(.fotofile-v2-products--list) li.product {
  width: auto;
  min-width: 0;
  margin: 0;
  float: none;
}

@media (min-width: 1024px) {
  body.archive .fotofile-v2-woocommerce ul.products:not(.eael-post-appender):not(.fotofile-v2-products--list) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 782px) {
  body.archive .fotofile-v2-woocommerce ul.products:not(.eael-post-appender):not(.fotofile-v2-products--list) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* ============================================================
   M11-STAB-B Archive grid FLOW fix (row alignment / left-start)
   ------------------------------------------------------------
   STAB-A restored card WIDTH but not row FLOW. Two WooCommerce
   legacy artifacts survive on the real archive DOM because the
   only rules that neutralized them (theme.css ~L6235, L595) are
   scoped to `.fotofile-v2-archive__main`, a wrapper this branch
   never emits:

     1. WooCommerce's `ul.products::before` / `::after` clearfix
        (display:table) become GRID ITEMS — ::before takes the
        first grid cell and ::after the last, so the first real
        product is pushed into cell 2, cell 1 renders blank, and
        the first row appears shifted toward the centre/right with
        an abnormal gap (the exact reported symptom).
     2. WooCommerce's `.columns-* li.product` / `li.product.first
        /.last` float + clear + margin-right + width sizing, which
        fights the CSS grid track flow.

   Fix: on the SAME always-present anchor STAB-A uses
   (`body.archive main.fotofile-v2-woocommerce ul.products` minus
   the home swiper and list view), suppress the clearfix pseudos so
   they stop consuming grid cells, and hard-reset the grid items to
   pure grid flow. `display:none` (not `content:`) removes the
   pseudos, so NO `content:` and NO `display:contents` are
   introduced. Mobile 2-col (STAB-A max-width:782px) and list view
   (`.fotofile-v2-products--list`) are untouched. CSS only; no
   PHP/template/loop/query/count/sort/pagination/canonical/schema
   change. Appended last + higher specificity ⇒ wins.
   ============================================================ */
body.archive main.fotofile-v2-woocommerce ul.products:not(.eael-post-appender):not(.fotofile-v2-products--list)::before,
body.archive main.fotofile-v2-woocommerce ul.products:not(.eael-post-appender):not(.fotofile-v2-products--list)::after {
  display: none;
}

body.archive main.fotofile-v2-woocommerce ul.products:not(.eael-post-appender):not(.fotofile-v2-products--list) li.product,
body.archive main.fotofile-v2-woocommerce ul.products:not(.eael-post-appender):not(.fotofile-v2-products--list) li.product.first,
body.archive main.fotofile-v2-woocommerce ul.products:not(.eael-post-appender):not(.fotofile-v2-products--list) li.product.last {
  float: none;
  clear: none;
  width: auto;
  margin: 0;
  grid-column: auto;
  justify-self: stretch;
}

/* ============================================================
   M14-P1 Home mobile containment + app shell/nav foundation
   ------------------------------------------------------------
   Fixes the reported mobile-Home "large grey/white area to the
   right" — horizontal overflow from uncontained horizontal rails
   inside the flattened home layout — and reinforces the existing
   app header + bottom nav to be full-width and safe-area aware
   (Shopee/Lazada-like). Everything is scoped to body.home and
   mobile (<=782px), so desktop and other pages are unchanged. It
   reuses the app-shell / bottom-nav's OWN existing sticky/fixed
   ownership (no new global fixed element). No content:, no url(),
   no display:contents, nothing hidden, no product/query/data change.

   DEFERRED (not M14-P1): the exact 1-wide + 2-square banner slot
   REORDER and the compact category shortcut row need a DOM change
   in front-page.php / inc/home.php -> M14-P2. Customizer controls
   -> M14-P3 (seams already added in inc/home.php). This block is a
   safe containment foundation only.
   ============================================================ */
@media (max-width: 782px) {
  /* Master containment: the Home document must never scroll sideways.
     `clip` (not hidden/auto) does NOT create a scroll container, so the
     sticky app-shell and fixed bottom-nav keep working. */
  body.home {
    overflow-x: clip;
  }

  body.home .fotofile-v2-home,
  body.home .fotofile-v2-home-layout,
  body.home .fotofile-v2-home-layout__sidebar,
  body.home .fotofile-v2-home-layout__content,
  body.home .fotofile-v2-home-section,
  body.home .fotofile-v2-home-categories,
  body.home .fotofile-v2-home-banner-row,
  body.home .fotofile-v2-home-banner-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Horizontal rails: the scroll stays INSIDE the rail; its children can
     never expand the page. App-like: contained overscroll, momentum, and
     a hidden scrollbar (content stays fully scrollable/visible). */
  body.home .fotofile-v2-home-brand-list,
  body.home .fotofile-v2-home-logo-strip,
  body.home .fotofile-v2-home ul.products.fotofile-v2-home-products--rail {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.home .fotofile-v2-home-brand-list::-webkit-scrollbar,
  body.home .fotofile-v2-home-logo-strip::-webkit-scrollbar,
  body.home .fotofile-v2-home ul.products.fotofile-v2-home-products--rail::-webkit-scrollbar {
    display: none;
  }

  /* Rail children keep their own width but must not force the page wider. */
  body.home .fotofile-v2-home-brand-card,
  body.home .fotofile-v2-home ul.products.fotofile-v2-home-products--rail li.product {
    flex-shrink: 0;
  }

  /* App header: guaranteed full viewport width, no clipping / no gap. */
  body.home .fotofile-v2-app-shell {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Bottom nav: full width, never wider than the viewport. */
  body.home .fotofile-v2-bottom-nav {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* >=44px tap targets for the Home app-header controls. */
  body.home .fotofile-v2-drawer-toggle,
  body.home .fotofile-v2-app-icon {
    min-width: 44px;
    min-height: 44px;
  }

  /* Mobile banner shape foundation: wide = landscape, square = 1:1;
     placeholder text stays compact (real markup/data unchanged). */
  body.home .fotofile-v2-home-banner--wide {
    aspect-ratio: 16 / 6;
  }

  body.home .fotofile-v2-home-banner--square {
    aspect-ratio: 1 / 1;
  }

  body.home .fotofile-v2-home-banner--placeholder {
    padding: 10px;
  }
}

/* ============================================================
   M14-P1-FIX1 Home mobile bottom-nav viewport width + app brand
   ------------------------------------------------------------
   Runtime showed the FIXED bottom nav sizing against a wide (1260px)
   initial containing block via `right:0`, so `width`/`right` did not
   match the visual mobile width (360/390/430). Binding its size to
   viewport units and dropping `right:0` ties it to the viewport
   instead. `body.home { overflow-x: clip }` from M14-P1 keeps any
   1px vw rounding contained, so this cannot reintroduce overflow.
   Also raises the app-brand anchor to a >=44px tap target. Scoped to
   body.home + mobile only; the bottom nav's existing position:fixed
   ownership + cart/checkout suppression are untouched. No new
   position:fixed, no content:, no url(), nothing hidden.
   ============================================================ */
@media (max-width: 782px) {
  body.home .fotofile-v2-bottom-nav {
    left: 0;
    right: auto;
    width: 100vw;
    max-width: 100vw;
    inline-size: 100vw;
    max-inline-size: 100vw;
    min-width: 0;
    box-sizing: border-box;
  }

  @supports (width: 100dvw) {
    body.home .fotofile-v2-bottom-nav {
      width: 100dvw;
      max-width: 100dvw;
      inline-size: 100dvw;
      max-inline-size: 100dvw;
    }
  }

  /* App-brand anchor: >=44px tap target, no logo/text distortion. */
  body.home .fotofile-v2-app-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ============================================================
   M14-P2A Home real app layout — banner grid + category rail
   ------------------------------------------------------------
   front-page.php now renders the category panel, the three REAL
   banner slots (right_wide, left_square, right_square), and the
   feed as FLAT grid children of .fotofile-v2-home-layout. This lays
   them out with grid-template-areas (no display:contents, no
   fragile order chains):
     Mobile (<=782): category shortcut rail -> wide banner ->
       [square | square] one 2-col row -> feed.
     Desktop (>=783): reconstructs the prior two-column feel.
   `body.home` + higher specificity so it overrides the older
   display:contents / two-column home rules. Real category links and
   real banner slots are preserved; nothing faked or hidden. No
   content:, no url(), no display:contents, no new fixed element.
   DEFERRED to M14-P2B: exact sticky-shortcut top offset tuning and
   a richer category dropdown; Customizer wiring -> M14-P3.
   ============================================================ */
body.home .fotofile-v2-home-categories,
body.home .fotofile-v2-home-banner-wrap,
body.home .fotofile-v2-home-feed {
  min-width: 0;
  max-width: 100%;
}

body.home .fotofile-v2-home-feed {
  display: grid;
  gap: 10px;
}

@media (max-width: 782px) {
  body.home .fotofile-v2-home-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    grid-template-areas:
      "cats  cats"
      "bwide bwide"
      "bsq1  bsq2"
      "feed  feed";
  }

  body.home .fotofile-v2-home-categories { grid-area: cats; }
  body.home .fotofile-v2-home-banner-wrap--right_wide { grid-area: bwide; }
  body.home .fotofile-v2-home-banner-wrap--left_square { grid-area: bsq1; }
  body.home .fotofile-v2-home-banner-wrap--right_square { grid-area: bsq2; }
  body.home .fotofile-v2-home-feed { grid-area: feed; }

  /* Category -> compact horizontal shortcut rail (not a long tree),
     sticky just under the app header (offset tunable via the var). */
  body.home .fotofile-v2-home-categories {
    position: sticky;
    top: var(--fotofile-v2-home-shortcut-top, 104px);
    z-index: 60;
    padding: 8px 10px;
  }

  body.home .fotofile-v2-home-categories .fotofile-v2-home-section-head {
    margin-bottom: 6px;
  }

  body.home .fotofile-v2-home-cat-tree {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body.home .fotofile-v2-home-cat-tree::-webkit-scrollbar {
    display: none;
  }

  body.home .fotofile-v2-home-cat-item {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  body.home .fotofile-v2-home-cat-toplink,
  body.home .fotofile-v2-home-cat-summary {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    min-width: 82px;
    max-width: 140px;
    padding: 8px 12px;
    border: 1px solid var(--fotofile-v2-line, #ececec);
    border-radius: 999px;
    white-space: nowrap;
    background: #fff;
  }

  /* On the rail, expanded children float as a dropdown so they never
     stretch the rail vertically (real links, not hidden). */
  body.home .fotofile-v2-home-cat-details[open] > .fotofile-v2-home-cat-children {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 61;
    min-width: 180px;
    max-width: 240px;
    margin-top: 4px;
    padding: 6px;
    border: 1px solid var(--fotofile-v2-line, #ececec);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.1);
  }
}

@media (min-width: 783px) {
  body.home .fotofile-v2-home-layout {
    display: grid;
    grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(160px, 230px);
    gap: 10px;
    align-items: start;
    grid-template-areas:
      "bsq1 bwide bsq2"
      "cats feed  feed";
  }

  body.home .fotofile-v2-home-categories { grid-area: cats; }
  body.home .fotofile-v2-home-banner-wrap--right_wide { grid-area: bwide; }
  body.home .fotofile-v2-home-banner-wrap--left_square { grid-area: bsq1; }
  body.home .fotofile-v2-home-banner-wrap--right_square { grid-area: bsq2; }
  body.home .fotofile-v2-home-feed { grid-area: feed; }
}

/* ============================================================
   M14-P2A-FIX1 Home mobile visual-viewport canvas clamp
   ------------------------------------------------------------
   Root cause of the residual right-side grey: on the audit device
   the LAYOUT viewport is ~1260px (window.innerWidth) while the
   VISUAL viewport is 360/390/430. The body + theme wrappers sized
   to that wide initial containing block, so grey showed to the
   right of the 430px content. M14-P1's `overflow-x: clip` clipped
   body CONTENT but never clamped body WIDTH, so the wide canvas
   remained pannable.

   Fix: clamp the whole Home mobile canvas (body + top-level
   wrappers + the app-shell/bottom-nav) to the VISUAL viewport.
   `100dvw` (dynamic viewport width) resolves to the visual width
   on the reported Chrome device; `100vw` is the pre-`dvw` fallback,
   and `overflow-x: clip` (not hidden — preserves sticky) contains
   any residual. Scoped to body.home + mobile only; desktop and
   other pages untouched. Does NOT shrink product cards (rails keep
   their own contained overflow), hide content, use transforms, or
   change the P2A category/banner layout. No content:, no url(),
   no display:none/visibility:hidden, no new fixed element.
   ============================================================ */
@media (max-width: 782px) {
  body.home {
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    overflow-x: clip;
  }

  body.home #page,
  body.home .site,
  body.home .fotofile-v2-main,
  body.home .fotofile-v2-container,
  body.home .fotofile-v2-home,
  body.home .fotofile-v2-home-layout,
  body.home .fotofile-v2-home-feed {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
  }

  body.home .fotofile-v2-app-shell,
  body.home .fotofile-v2-bottom-nav {
    width: 100vw;
    max-width: 100vw;
    inline-size: 100vw;
    max-inline-size: 100vw;
  }

  @supports (width: 100dvw) {
    body.home {
      width: 100dvw;
      max-width: 100dvw;
    }

    body.home .fotofile-v2-app-shell,
    body.home .fotofile-v2-bottom-nav {
      width: 100dvw;
      max-width: 100dvw;
      inline-size: 100dvw;
      max-inline-size: 100dvw;
    }
  }
}

/* ============================================================
   M14-P2A-FIX2 Home mobile sticky shortcut menu visible on entry
   ------------------------------------------------------------
   Human feedback: on mobile Home the category/shortcut menu should
   be visible the instant you enter the site (Shopee/Lazada-style),
   directly under the orange app header/search — not after scrolling
   — and it must read as a compact app shortcut STRIP, not a desktop
   category block.

   P2A already renders the category panel as the FIRST grid child
   (grid-area: cats) and makes `.fotofile-v2-home-categories` a sticky
   horizontal pill rail, so it is already the first content element
   under the sticky app-shell. This FIX2 is CSS-only and does two
   things:
     1) Defines the previously-undefined tunable offset var to the
        REAL runtime app-shell height (~111px). The prior 104px
        fallback let the rail tuck ~7px UNDER the header on scroll,
        so it stopped reading as a persistent sticky menu; 111px pins
        it flush beneath the header.
     2) Collapses the heading to a compact label row and slims the
        chips so the whole strip lands ~56-72px (<=84px), i.e. an
        app quick-menu bar rather than a tall category block — so it
        is unmistakably a shortcut strip on first paint.

   Real category links stay visible and horizontally scrollable;
   the real <h2> label and "see all" link stay visible (just small).
   Nothing hidden or faked. No content:, no url(), no display:none on
   real content, no visibility:hidden, no transform, no new fixed
   element (rail keeps the P2A sticky), no JS. Scoped to body.home +
   mobile only; desktop (>=783px) untouched; P2A banner/feed grid,
   FIX1 canvas clamp, and bottom-nav width all preserved.
   ============================================================ */
@media (max-width: 782px) {
  body.home {
    /* Measured runtime app-shell (header + mobile search) height. */
    --fotofile-v2-home-shortcut-top: 111px;
  }

  /* Pin the shortcut rail flush beneath the app header. Opaque
     background so banners/feed scroll cleanly under the sticky strip.
     z-index stays below the app shell (70) and above the banners. */
  body.home .fotofile-v2-home-categories {
    top: var(--fotofile-v2-home-shortcut-top, 111px);
    z-index: 60;
    padding-top: 6px;
    padding-bottom: 6px;
    background: var(--fotofile-v2-surface, #fff);
  }

  /* Heading -> compact single label row (real text + real "see all"
     link kept, just small) so the chips sit high and the strip stays
     app-compact. */
  body.home .fotofile-v2-home-categories .fotofile-v2-home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 0;
    margin-bottom: 4px;
  }

  body.home .fotofile-v2-home-categories .fotofile-v2-home-section-head h2 {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.2;
  }

  body.home .fotofile-v2-home-categories .fotofile-v2-home-section-head > a {
    font-size: 0.72rem;
    white-space: nowrap;
  }

  /* Chips: compact but still tappable, so the rail lands ~56-72px. */
  body.home .fotofile-v2-home-cat-toplink,
  body.home .fotofile-v2-home-cat-summary {
    min-height: 36px;
    min-width: 78px;
    padding: 6px 12px;
  }
}

/* ============================================================
   M14-P2A-FIX3 Home mobile shortcut strip compact height
   ------------------------------------------------------------
   FIX2 shrank the heading fonts but the runtime rail still measured
   90px (gate is <=84px). Root cause: the base rule
   `.fotofile-v2-home-section-head > a` (the real "ดูทั้งหมด" link)
   carries `min-height: 36px`, which FIX2 did not override, so the
   heading row stayed 36px tall (head 36 + tree 36 + padding/margin
   ~= 90). This FIX3 only trims heights so the strip lands ~71px:
     - "see all" link min-height 36 -> 24 (still tappable, secondary)
     - strip vertical padding 6 -> 4
     - head margin-bottom 4 -> 3
     - chips min-height 36 -> 34 (primary tap target kept comfortable)
   Both real links (the <h2> label and the "see all" link) and every
   category chip stay visible and horizontally scrollable. CSS-only,
   scoped to body.home + mobile. No content:, no url(), no
   display:none, no visibility:hidden, no transform, no fixed element,
   no viewport-width hack, no JS, no layout-order change. Sticky-on-
   entry, 111px offset, and the FIX1 canvas clamp are all preserved;
   desktop (>=783px) untouched.
   ============================================================ */
@media (max-width: 782px) {
  body.home .fotofile-v2-home-categories {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  body.home .fotofile-v2-home-categories .fotofile-v2-home-section-head {
    margin-bottom: 3px;
  }

  body.home .fotofile-v2-home-categories .fotofile-v2-home-section-head > a {
    min-height: 24px;
    padding: 0 8px;
    line-height: 1.1;
  }

  body.home .fotofile-v2-home-cat-toplink,
  body.home .fotofile-v2-home-cat-summary {
    min-height: 34px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

/* ============================================================
   M14-P2A-FIX4 Home mobile right-side grey — clip abs rail kids
   ------------------------------------------------------------
   Symptom: on mobile Home a wide grey band on the right; the page
   scrolls sideways. Measured live on staging: <html> scrollWidth =
   1259px while <body> and every theme wrapper are exactly 375px and
   no body child is wider than the viewport.

   Root cause: WooCommerce loop controls inside the horizontal rails
   — `a.add_to_cart_button` / `.button.product_type_simple` and the
   `.screen-reader-text` spans — are `position: absolute` with no
   offsets. None of their ancestors up to <body> is a positioned
   element, so their containing block resolves to the INITIAL
   containing block (the viewport), not the rail. A scroll container
   only clips descendants whose containing block is inside it, so the
   rails' `overflow-x: auto` never clipped these; each one sat at its
   far-right in-flow position (left ~805-1415px) and stretched the
   document, which FIX1's body-level clamp could not contain.

   Fix: give each horizontal rail `position: relative` (no offsets, so
   nothing moves and no stacking context is created). The rail then
   becomes the containing block for those absolute descendants, so its
   own `overflow-x` finally clips them. Verified live: <html>
   scrollWidth 1259 -> 375 with rails-only relative. Real content is
   untouched (nothing hidden, no links removed); this only fixes which
   box the already-hidden a11y/cart controls are positioned against.
   CSS-only, scoped body.home + mobile. No content:, no url(), no
   display:none, no visibility:hidden, no transform, no fixed element,
   no viewport-width hack, no JS. Desktop (>=783px) untouched.
   ============================================================ */
@media (max-width: 782px) {
  body.home ul.products.fotofile-v2-home-products--rail,
  body.home .fotofile-v2-home-brand-list,
  body.home .fotofile-v2-home-logo-strip,
  body.home .fotofile-v2-home-cat-tree {
    position: relative;
  }
}

/* ============================================================
   M14-P2A-FIX5 Home mobile — category rail NOT sticky
   ------------------------------------------------------------
   User clarification: keep the category/shortcut section exactly as
   is (rendered, real links/chips, horizontal rail, first under the
   header, before the banners) but DROP the sticky behaviour — it
   should scroll away with the page like normal content.

   FIX2 made `.fotofile-v2-home-categories` `position: sticky` with a
   111px top offset. This FIX5 only overrides that positioning back to
   normal flow. `position: static` also makes the `z-index`/`top` from
   FIX2 inert (they apply only to positioned boxes), so no other rule
   is needed. Nothing is hidden or removed and the grid order is
   unchanged (still `grid-area: cats`, first).

   IMPORTANT: this targets the `.fotofile-v2-home-categories` wrapper
   only. The FIX4 overflow guard `.fotofile-v2-home-cat-tree {
   position: relative }` (the inner rail) is deliberately left intact,
   so the right-side grey fix does NOT regress. CSS-only, scoped
   body.home + mobile. No content:, no url(), no display:none, no
   visibility:hidden, no transform, no JS. Desktop (>=783px) untouched.
   ============================================================ */
@media (max-width: 782px) {
  body.home .fotofile-v2-home-categories {
    position: static;
    top: auto;
  }
}

/* ==========================================================================
   Home Banner Slot Height Regression Fix
   ========================================================================== */

@media (min-width: 783px) {
    body.home .fotofile-v2-home-banner {
        block-size: clamp(190px, 15vw, 240px);
        aspect-ratio: auto;
    }
}

/* ============================================================
   HF-P2-HF2: AUTHORITATIVE HEADER COMMERCE LAYER
   ------------------------------------------------------------
   This block supersedes HF-P2-HF1.

   Future Header visual changes MUST edit this block.
   Do not append another competing Header layer.

   Desktop:
   - neutral / trustworthy electronics-retail header
   - strong Brand -> dominant Search -> compact Actions
   - category commerce navigation
   - one Stores dropdown backed by the real Primary Menu

   Mobile:
   - preserve the accepted warm commerce-app shell
   - preserve drawer, real account/cart actions and bottom nav

   No Elementor dependency.
   No WooCommerce template override.
   No payment/order/auth logic changes.
   ============================================================ */

:root {
  --ff-hf2-accent: #ff572f;
  --ff-hf2-accent-dark: #ed4824;
  --ff-hf2-ink: #211d1b;
  --ff-hf2-muted: #716864;
  --ff-hf2-line: #eee6e2;
  --ff-hf2-soft: #fff7f3;
  --ff-hf2-cream: #fff8f3;
  --ff-hf2-cream-2: #fff3eb;
  --ff-hf2-nav-bg: #fff6f1;
  --ff-hf2-main-height: 78px;
  --ff-hf2-nav-height: 46px;
  --ff-hf2-search-height: 48px;
  /* FIX7: orange used as small text must stay >=4.5:1 on white AND on
     the tinted nav surface; brighter accents are reserved for fills
     under white content. */
  --ff-hf2-accent-text: #c93d1c;
  /* FIX7 warm layer surfaces: strip (deepest) / sand nav / hairlines.
     These create header depth without any dark band. */
  --ff-hf2-stone: #efe9e3;
  --ff-hf2-sand: #f7f1eb;
  --ff-hf2-stone-line: #e2d8d0;
  --ff-hf2-sand-line: #ddd1c7;
}


/* HF-P2-HF2-FIX2: Desktop Contact Utility
   Desktop-only functional contact strip.
   Mobile remains unchanged. */
.fotofile-v2-contact-strip {
  display: none;
}

@media (min-width: 1024px) {

  .fotofile-v2-contact-strip {
    display: block;
    border-bottom: 1px solid #f1e9e5;
    color: #5f5753;
    background: #fff;
    font-size: 0.78rem;
  }

  .fotofile-v2-contact-strip__inner {
    display: flex;
    min-height: 30px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .fotofile-v2-contact-strip__links {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: clamp(14px, 1.7vw, 24px);
  }

  .fotofile-v2-contact-strip__link {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    color: #615854;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }

  .fotofile-v2-contact-strip__link svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .fotofile-v2-contact-strip__link:hover,
  .fotofile-v2-contact-strip__link:focus-visible {
    color: var(--ff-hf2-accent-dark);
  }

  .fotofile-v2-contact-strip__line-cta {
    display: inline-flex;
    min-height: 24px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 6px;
    border-radius: 999px;
    color: #fff;
    background: #06c755;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }

  .fotofile-v2-contact-strip__line-cta:hover,
  .fotofile-v2-contact-strip__line-cta:focus-visible {
    color: #fff;
    background: #05b84e;
  }

  .fotofile-v2-contact-strip__line-badge {
    display: inline-grid;
    min-width: 26px;
    height: 18px;
    place-items: center;
    padding-inline: 4px;
    border-radius: 999px;
    color: #06a948;
    background: #fff;
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: -0.02em;
  }
}
/* ============================================================
   DESKTOP / TABLET-LARGE
   ============================================================ */

@media (min-width: 783px) {

  .fotofile-v2-site-header {
    position: relative;
    z-index: 70;
    border: 0;
    border-bottom: 1px solid var(--ff-hf2-line);
    background: #fff;
    box-shadow: 0 5px 18px rgba(40, 29, 24, 0.045);
  }

  /* HF2 removes the utility strip from markup.
     Defensive fallback in case stale cached markup appears. */
  .fotofile-v2-site-header .fotofile-v2-header-strip {
    display: none;
  }

  .fotofile-v2-site-header__inner {
    display: grid;
    grid-template-columns:
      minmax(185px, 220px)
      minmax(420px, 1fr)
      auto;
    min-height: var(--ff-hf2-main-height);
    align-items: center;
    gap: clamp(20px, 2.3vw, 34px);
  }

  /* --------------------------
     Brand
     -------------------------- */

  .fotofile-v2-brand {
    min-width: 0;
    gap: 10px;
    color: var(--ff-hf2-ink);
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -0.025em;
  }

  .fotofile-v2-brand__mark {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--ff-hf2-accent);
    font-size: 1rem;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(255, 87, 47, 0.17);
  }

  .fotofile-v2-brand__name {
    color: var(--ff-hf2-ink);
  }

  .fotofile-v2-brand--logo {
    width: 100%;
  }

  .fotofile-v2-brand--logo .custom-logo-link {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
  }

  .fotofile-v2-brand--logo .custom-logo {
    display: block;
    width: auto;
    max-width: 205px;
    max-height: 48px;
  }

  /* --------------------------
     Search — visual focal point
     -------------------------- */

  .fotofile-v2-header-search {
    width: 100%;
    min-width: 0;
  }

  .fotofile-v2-header-search > .fotofile-v2-search:not(.fotofile-v2-search--fibosearch) {
    display: grid;
    width: 100%;
    min-height: var(--ff-hf2-search-height);
    grid-template-columns: minmax(0, 1fr) 56px;
    overflow: hidden;
    border: 1px solid #e7ddd8;
    border-radius: 8px;
    background: #fff;
    box-shadow:
      0 3px 12px rgba(46, 34, 28, 0.05),
      inset 0 0 0 1px rgba(255, 87, 47, 0.025);
  }

  .fotofile-v2-header-search > .fotofile-v2-search:not(.fotofile-v2-search--fibosearch) input,
  .fotofile-v2-header-search > .fotofile-v2-search:not(.fotofile-v2-search--fibosearch) button {
    min-height: var(--ff-hf2-search-height);
    border: 0;
  }

  .fotofile-v2-header-search > .fotofile-v2-search:not(.fotofile-v2-search--fibosearch) input {
    padding-inline: 17px;
    color: var(--ff-hf2-ink);
    background: #fff;
    font-size: 0.94rem;
  }

  .fotofile-v2-header-search > .fotofile-v2-search:not(.fotofile-v2-search--fibosearch) button {
    color: #fff;
    background: var(--ff-hf2-accent);
  }

  .fotofile-v2-header-search > .fotofile-v2-search:not(.fotofile-v2-search--fibosearch) button:hover {
    background: var(--ff-hf2-accent-dark);
  }

  /* FiboSearch owns its own internal structure.
     HF2 explicitly fills the visual shell instead of styling only the wrapper. */

  .fotofile-v2-header-search .fotofile-v2-search--fibosearch,
  .fotofile-v2-header-search .dgwt-wcas-search-wrapp,
  .fotofile-v2-header-search .dgwt-wcas-search-form {
    width: 100% !important;
    max-width: none !important;
    min-height: var(--ff-hf2-search-height) !important;
    margin: 0 !important;
  }

  .fotofile-v2-header-search .dgwt-wcas-sf-wrapp {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: var(--ff-hf2-search-height) !important;
    padding: 0 56px 0 0 !important;
    overflow: hidden !important;
    border: 1px solid #e7ddd8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow:
      0 3px 12px rgba(46, 34, 28, 0.05),
      inset 0 0 0 1px rgba(255, 87, 47, 0.025) !important;
  }

  .fotofile-v2-header-search .dgwt-wcas-search-input {
    display: block !important;
    width: 100% !important;
    height: var(--ff-hf2-search-height) !important;
    min-height: var(--ff-hf2-search-height) !important;
    margin: 0 !important;
    padding: 0 17px !important;
    border: 0 !important;
    border-radius: 8px 0 0 8px !important;
    outline: 0 !important;
    color: var(--ff-hf2-ink) !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 0.94rem !important;
  }

  .fotofile-v2-header-search .dgwt-wcas-search-input::placeholder {
    color: #8b817d !important;
    opacity: 1 !important;
  }

  .fotofile-v2-header-search .dgwt-wcas-search-submit {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    display: grid !important;
    width: 56px !important;
    height: var(--ff-hf2-search-height) !important;
    min-height: var(--ff-hf2-search-height) !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #fff !important;
    background: var(--ff-hf2-accent) !important;
    box-shadow: none !important;
  }

  .fotofile-v2-header-search .dgwt-wcas-search-submit:hover {
    background: var(--ff-hf2-accent-dark) !important;
  }

  .fotofile-v2-header-search .dgwt-wcas-search-submit::before,
  .fotofile-v2-header-search .dgwt-wcas-search-submit::after {
    display: none !important;
    content: none !important;
  }

  .fotofile-v2-header-search .dgwt-wcas-search-submit svg,
  .fotofile-v2-header-search .dgwt-wcas-search-submit path,
  .fotofile-v2-header-search .dgwt-wcas-ico-magnifier {
    width: 21px !important;
    height: 21px !important;
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
  }

  /* --------------------------
     Account / Cart actions
     -------------------------- */

  .fotofile-v2-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }

  .fotofile-v2-header-actions .fotofile-v2-icon-link {
    min-width: 0;
    min-height: 46px;
    gap: 7px;
    padding-inline: 10px;
    border: 0;
    border-radius: 8px;
    color: var(--ff-hf2-ink);
    background: transparent;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
  }

  .fotofile-v2-header-actions .fotofile-v2-icon-link svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.9;
  }

  .fotofile-v2-header-actions .fotofile-v2-icon-link:hover,
  .fotofile-v2-header-actions .fotofile-v2-icon-link:focus-visible {
    color: var(--ff-hf2-accent-dark);
    background: var(--ff-hf2-soft);
  }

  .fotofile-v2-header-actions .fotofile-v2-icon-link--cart {
    position: relative;
  }

  .fotofile-v2-header-actions .fotofile-v2-cart-count {
    top: -1px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    border: 2px solid #fff;
    color: #fff;
    background: var(--ff-hf2-accent);
    font-size: 0.64rem;
    font-weight: 850;
  }

  /* --------------------------
     Commerce navigation
     -------------------------- */

  .fotofile-v2-header-nav-row {
    position: relative;
    z-index: 72;
    overflow: visible;
    border-top: 1px solid #f4efec;
    border-bottom: 0;
    background: #fff;
  }

  .fotofile-v2-header-nav-row > .fotofile-v2-container {
    min-width: 0;
    overflow: visible;
  }

  .fotofile-v2-commerce-nav {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .fotofile-v2-commerce-nav__list {
    display: flex;
    width: 100%;
    min-height: var(--ff-hf2-nav-height);
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(15px, 1.7vw, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
  }

  .fotofile-v2-commerce-nav__item {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fotofile-v2-commerce-nav__item > a,
  .fotofile-v2-commerce-nav__stores-toggle {
    position: relative;
    display: inline-flex;
    min-height: var(--ff-hf2-nav-height);
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #3b3431;
    background: transparent;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
  }

  .fotofile-v2-commerce-nav__item > a::after,
  .fotofile-v2-commerce-nav__stores-toggle::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    content: "";
    background: var(--ff-hf2-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 150ms ease;
  }

  .fotofile-v2-commerce-nav__item > a:hover,
  .fotofile-v2-commerce-nav__item > a:focus-visible,
  .fotofile-v2-commerce-nav__stores-toggle:hover,
  .fotofile-v2-commerce-nav__stores-toggle:focus-visible {
    color: var(--ff-hf2-accent-dark);
  }

  .fotofile-v2-commerce-nav__item > a:hover::after,
  .fotofile-v2-commerce-nav__item > a:focus-visible::after,
  .fotofile-v2-commerce-nav__item--stores:hover .fotofile-v2-commerce-nav__stores-toggle::after,
  .fotofile-v2-commerce-nav__item--stores:focus-within .fotofile-v2-commerce-nav__stores-toggle::after {
    transform: scaleX(1);
  }

  .fotofile-v2-commerce-nav__stores-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 150ms ease;
  }

  .fotofile-v2-commerce-nav__item--stores:hover .fotofile-v2-commerce-nav__stores-toggle svg,
  .fotofile-v2-commerce-nav__item--stores:focus-within .fotofile-v2-commerce-nav__stores-toggle svg {
    transform: rotate(180deg);
  }

  /* Real Primary Menu reused as the Stores dropdown. */

  .fotofile-v2-commerce-nav__stores-dropdown {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    width: min(340px, 84vw);
    padding: 14px;
    visibility: hidden;
    opacity: 0;
    border: 1px solid var(--ff-hf2-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(38, 27, 22, 0.14);
    transform: translateY(-5px);
    transition:
      opacity 140ms ease,
      transform 140ms ease,
      visibility 140ms ease;
  }

  .fotofile-v2-commerce-nav__item--stores:hover .fotofile-v2-commerce-nav__stores-dropdown,
  .fotofile-v2-commerce-nav__item--stores:focus-within .fotofile-v2-commerce-nav__stores-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .fotofile-v2-commerce-nav__stores-title {
    margin-bottom: 9px;
    padding: 0 4px 9px;
    border-bottom: 1px solid #f0e9e5;
    color: var(--ff-hf2-ink);
    font-size: 0.88rem;
    font-weight: 850;
  }

  .fotofile-v2-store-menu,
  .fotofile-v2-store-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fotofile-v2-store-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
  }

  .fotofile-v2-store-menu > li {
    min-width: 0;
  }

  .fotofile-v2-store-menu a {
    display: flex;
    min-height: 36px;
    align-items: center;
    padding: 7px 9px;
    border-radius: 7px;
    color: #403936;
    font-size: 0.81rem;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none;
    white-space: normal;
  }

  .fotofile-v2-store-menu a:hover,
  .fotofile-v2-store-menu a:focus-visible {
    color: var(--ff-hf2-accent-dark);
    background: var(--ff-hf2-soft);
  }

  .fotofile-v2-store-menu .sub-menu {
    grid-column: 1 / -1;
    padding-left: 8px;
  }

  .fotofile-v2-store-menu .sub-menu a {
    min-height: 32px;
    color: var(--ff-hf2-muted);
    font-size: 0.77rem;
  }
}

/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 783px) and (max-width: 1023px) {

  .fotofile-v2-site-header__inner {
    grid-template-columns:
      minmax(135px, 170px)
      minmax(250px, 1fr)
      auto;
    min-height: 74px;
    gap: 12px;
  }

  .fotofile-v2-brand {
    font-size: 1rem;
  }

  .fotofile-v2-brand__mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .fotofile-v2-brand--logo .custom-logo {
    max-width: 160px;
    max-height: 42px;
  }

  .fotofile-v2-header-actions .fotofile-v2-icon-link {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .fotofile-v2-header-actions .fotofile-v2-icon-link > span:not(.fotofile-v2-cart-count) {
    display: none;
  }

  .fotofile-v2-commerce-nav {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
  }

  .fotofile-v2-commerce-nav::-webkit-scrollbar {
    display: none;
  }

  .fotofile-v2-commerce-nav__list {
    width: max-content;
    min-width: 100%;
    gap: 18px;
  }
}

/* ============================================================
   MOBILE APP HEADER
   Preserve working app grammar; targeted refinement only.
   ============================================================ */


/* HF-P2-HF2-FIX3: Desktop Header Rebalance
   HF-P2-HF2-FIX4: Professional desktop color polish + centered nav
   - move stores to top strip
   - remove duplicate header menu item via helper
   - add warm desktop color balance */
@media (min-width: 1024px) {

  .fotofile-v2-site-header {
    background: #fff;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.96) inset,
      0 5px 18px rgba(38, 31, 27, 0.05);
  }

  .fotofile-v2-contact-strip {
    border-bottom: 1px solid #e9e4e1;
    color: #5e5854;
    background: #fbfaf9;
  }

  .fotofile-v2-contact-strip__inner {
    min-height: 32px;
  }

  .fotofile-v2-contact-strip__actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }

  .fotofile-v2-contact-strip__stores {
    position: relative;
    flex: 0 0 auto;
  }

  .fotofile-v2-contact-strip__stores-toggle {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 5px;
    padding: 0 4px;
    border: 0;
    color: #5f5651;
    background: transparent;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
  }

  .fotofile-v2-contact-strip__stores-toggle:hover,
  .fotofile-v2-contact-strip__stores-toggle:focus-visible {
    color: var(--ff-hf2-accent-dark);
  }

  .fotofile-v2-contact-strip__stores-toggle svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 150ms ease;
  }

  .fotofile-v2-contact-strip__stores:hover
    .fotofile-v2-contact-strip__stores-toggle svg,
  .fotofile-v2-contact-strip__stores:focus-within
    .fotofile-v2-contact-strip__stores-toggle svg {
    transform: rotate(180deg);
  }

  .fotofile-v2-contact-strip__stores-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 90;
    width: min(360px, 86vw);
    padding: 14px;
    visibility: hidden;
    opacity: 0;
    border: 1px solid #e5dfdb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(36, 29, 26, 0.12);
    transform: translateY(-5px);
    transition:
      opacity 140ms ease,
      transform 140ms ease,
      visibility 140ms ease;
  }

  .fotofile-v2-contact-strip__stores:hover
    .fotofile-v2-contact-strip__stores-dropdown,
  .fotofile-v2-contact-strip__stores:focus-within
    .fotofile-v2-contact-strip__stores-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .fotofile-v2-contact-strip__stores-title {
    margin-bottom: 9px;
    padding: 0 4px 9px;
    border-bottom: 1px solid #f1e8e3;
    color: var(--ff-hf2-ink);
    font-size: 0.88rem;
    font-weight: 850;
  }

  .fotofile-v2-site-header__inner {
    border-bottom: 1px solid #eee8e4;
  }

  .fotofile-v2-header-nav-row {
    border-top: 0;
    background: #fff;
  }

  .fotofile-v2-commerce-nav__list {
    justify-content: center;
  }

  .fotofile-v2-commerce-nav__item > a {
    color: #37312e;
  }

  .fotofile-v2-commerce-nav__item--shop > a {
    color: #d94b27;
    font-weight: 800;
  }

  .fotofile-v2-header-actions .fotofile-v2-icon-link {
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.4);
  }

  .fotofile-v2-header-actions .fotofile-v2-icon-link:hover,
  .fotofile-v2-header-actions .fotofile-v2-icon-link:focus-visible {
    border-color: #eaded8;
    background: #fff8f5;
  }
}
@media (max-width: 782px) {

  .fotofile-v2-app-shell {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: grid;
    gap: 6px;
    padding:
      max(6px, env(safe-area-inset-top))
      10px
      9px;
    color: #fff;
    background: linear-gradient(135deg, #ff572f 0%, #ff6335 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.16),
      0 4px 14px rgba(87,35,21,0.13);
  }

  .fotofile-v2-app-shell__top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-height: 44px;
    align-items: center;
    gap: 5px;
  }

  .fotofile-v2-app-brand {
    min-width: 0;
    min-height: 44px;
    justify-self: start;
    gap: 7px;
    color: #fff;
    font-weight: 900;
  }

  .fotofile-v2-app-brand .fotofile-v2-brand__mark {
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 7px;
    color: #fff;
    background: transparent;
  }

  .fotofile-v2-app-brand .fotofile-v2-brand__name {
    max-width: 32vw;
    overflow: hidden;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fotofile-v2-app-brand--logo .custom-logo {
    width: auto;
    max-width: 128px;
    max-height: 34px;
  }

  .fotofile-v2-app-actions {
    display: flex;
    align-items: center;
    gap: 1px;
  }

  .fotofile-v2-drawer-toggle,
  .fotofile-v2-app-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 9px;
    color: #fff;
  }

  .fotofile-v2-drawer-toggle:active,
  .fotofile-v2-app-icon:active {
    background: rgba(255,255,255,0.14);
  }

  .fotofile-v2-drawer-toggle svg,
  .fotofile-v2-app-icon svg {
    width: 23px;
    height: 23px;
    stroke-width: 1.9;
  }

  .fotofile-v2-app-icon .fotofile-v2-cart-count {
    top: 0;
    right: -1px;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    border: 2px solid #ff5b31;
    color: #fff;
    background: #24201f;
    font-size: 0.66rem;
    font-weight: 850;
  }

  .fotofile-v2-app-shell .fotofile-v2-search {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    grid-template-columns: minmax(0, 1fr) 48px;
    margin-top: 0;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(85,34,20,0.14);
  }

  .fotofile-v2-app-shell .fotofile-v2-search input,
  .fotofile-v2-app-shell .fotofile-v2-search button {
    min-width: 0;
    min-height: 46px;
  }

  .fotofile-v2-app-shell .fotofile-v2-search input {
    padding: 0 14px;
    border-radius: 12px 0 0 12px;
    color: #332d2a;
    background: #fff;
    font-size: 0.88rem;
    font-weight: 500;
  }

  .fotofile-v2-app-shell .fotofile-v2-search input::placeholder {
    color: #827773;
    opacity: 1;
  }

  .fotofile-v2-app-shell .fotofile-v2-search button {
    border-left: 1px solid #f5e4dd;
    border-radius: 0 12px 12px 0;
    color: #f04f2b;
    background: #fff7f3;
  }

  .fotofile-v2-app-shell .fotofile-v2-search button svg {
    width: 21px;
    height: 21px;
    stroke-width: 2;
  }
}

/* HF-P2-HF2-FIX7: Balanced layered premium commerce header (FINAL)
   Rewrites the FIX6 color authority IN PLACE (no stacked FIX5->6->7
   paint layers; this block remains the single desktop color authority).
   FIX5 failed dark (navy band = admin chrome); FIX6 failed light
   (white-on-white washout). FIX7 sits between them:
   - three distinguishable light layers, no dark band, no striping:
     warm stone utility strip -> white main row -> soft sand nav row
   - dark values remain ink/hairlines only; no navy hue
   - FOTOFILE orange stays the single accent: fills for true actions
     (search submit, cart badge, logo mark); orange as small TEXT uses
     the AA-safe --ff-hf2-accent-text (checked on white AND sand)
   - search remains the strongest idle action anchor: white field on
     the white row framed by tinted rows above/below, stronger idle
     border, focus-within accent ring
   - branded accessible focus-visible states kept
   Desktop >=1024px only; tablet and mobile untouched. */
@media (min-width: 1024px) {

  /* Header container: warm soft elevation over the page. */
  .fotofile-v2-site-header {
    background: #fff;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.96) inset,
      0 6px 20px rgba(46, 34, 28, 0.07);
  }

  /* Utility strip: visible warm stone layer — clearly not white,
     never cool blue-grey. Quiet informational surface. */
  .fotofile-v2-contact-strip {
    border-bottom: 1px solid var(--ff-hf2-stone-line);
    color: #5f5651;
    background: var(--ff-hf2-stone);
  }

  .fotofile-v2-contact-strip__link {
    color: #5f5651;
  }

  .fotofile-v2-contact-strip__link:hover,
  .fotofile-v2-contact-strip__link:focus-visible {
    color: var(--ff-hf2-accent-dark);
  }

  /* Stores trigger: neutral at rest, accent on intent. */
  .fotofile-v2-contact-strip__stores-toggle {
    color: #514843;
    border-radius: 6px;
  }

  .fotofile-v2-contact-strip__stores-toggle:hover {
    color: var(--ff-hf2-accent-dark);
  }

  .fotofile-v2-contact-strip__stores-toggle:focus-visible {
    color: var(--ff-hf2-accent-dark);
    outline: 3px solid rgba(255, 87, 47, 0.28);
    outline-offset: 3px;
    background: rgba(255, 87, 47, 0.06);
  }

  .fotofile-v2-contact-strip__stores:focus-within
    .fotofile-v2-contact-strip__stores-toggle {
    color: var(--ff-hf2-accent-dark);
  }

  /* Stores dropdown: light, readable, warm-framed against the strip. */
  .fotofile-v2-contact-strip__stores-dropdown {
    border: 1px solid var(--ff-hf2-stone-line);
    background: #fff;
    color: var(--ff-hf2-ink);
    box-shadow:
      0 18px 42px rgba(46, 34, 28, 0.16),
      0 2px 8px rgba(46, 34, 28, 0.07);
  }

  .fotofile-v2-contact-strip__stores-dropdown a {
    color: #403936;
    border-radius: 6px;
  }

  .fotofile-v2-contact-strip__stores-dropdown a:hover,
  .fotofile-v2-contact-strip__stores-dropdown a:focus-visible {
    color: var(--ff-hf2-accent-dark);
    background: var(--ff-hf2-soft);
    outline-color: rgba(255, 87, 47, 0.32);
  }

  /* Main row: white contrast layer between the two tinted rows. */
  .fotofile-v2-site-header__inner {
    border-bottom: 0;
    background: #fff;
  }

  /* Search: stronger idle definition + focus-within conversion emphasis. */
  .fotofile-v2-header-search > .fotofile-v2-search:not(.fotofile-v2-search--fibosearch) {
    border-color: #d8ccc2;
    box-shadow:
      0 3px 12px rgba(46, 34, 28, 0.07),
      inset 0 0 0 1px rgba(255, 87, 47, 0.03);
  }

  .fotofile-v2-header-search > .fotofile-v2-search:not(.fotofile-v2-search--fibosearch):focus-within {
    border-color: var(--ff-hf2-accent);
    box-shadow:
      0 3px 12px rgba(46, 34, 28, 0.05),
      0 0 0 3px rgba(255, 87, 47, 0.15);
  }

  /* FiboSearch shell uses !important only where the HF2 base layer
     already locked the same properties with !important. */
  .fotofile-v2-header-search .dgwt-wcas-sf-wrapp {
    border-color: #d8ccc2 !important;
    box-shadow:
      0 3px 12px rgba(46, 34, 28, 0.07),
      inset 0 0 0 1px rgba(255, 87, 47, 0.03) !important;
  }

  .fotofile-v2-header-search .dgwt-wcas-sf-wrapp:focus-within {
    border-color: var(--ff-hf2-accent) !important;
    box-shadow:
      0 3px 12px rgba(46, 34, 28, 0.05),
      0 0 0 3px rgba(255, 87, 47, 0.15) !important;
  }

  /* Account / cart: ink at rest, accent on intent. */
  .fotofile-v2-header-actions .fotofile-v2-icon-link {
    color: var(--ff-hf2-ink);
  }

  .fotofile-v2-header-actions .fotofile-v2-icon-link:hover,
  .fotofile-v2-header-actions .fotofile-v2-icon-link:focus-visible {
    border-color: #e8dcd2;
    color: var(--ff-hf2-accent-dark);
    background: var(--ff-hf2-soft);
  }

  .fotofile-v2-header-actions .fotofile-v2-icon-link:focus-visible {
    outline: 3px solid rgba(255, 87, 47, 0.24);
    outline-offset: 2px;
  }

  /* Commerce navigation: its own soft sand layer — clearly a
     navigation surface, but far from a dark band. Ink links,
     orange only as intent. */
  .fotofile-v2-header-nav-row {
    border-top: 1px solid #e9dfd7;
    border-bottom: 1px solid var(--ff-hf2-sand-line);
    background: var(--ff-hf2-sand);
    box-shadow: 0 4px 10px rgba(46, 34, 28, 0.05);
  }

  .fotofile-v2-commerce-nav__list {
    justify-content: center;
  }

  .fotofile-v2-commerce-nav__item > a {
    color: #38322e;
  }

  .fotofile-v2-commerce-nav__item > a:hover,
  .fotofile-v2-commerce-nav__item > a:focus-visible {
    color: var(--ff-hf2-accent-dark);
    background: transparent;
  }

  .fotofile-v2-commerce-nav__item > a:focus-visible {
    outline: 3px solid rgba(255, 87, 47, 0.28);
    outline-offset: 2px;
    border-radius: 5px;
  }

  /* Single emphasized entry point; AA-safe orange text, no fill. */
  .fotofile-v2-commerce-nav__item--shop > a {
    color: var(--ff-hf2-accent-text);
    font-weight: 850;
  }

  .fotofile-v2-commerce-nav__item--shop > a:hover,
  .fotofile-v2-commerce-nav__item--shop > a:focus-visible {
    color: var(--ff-hf2-accent-dark);
    background: transparent;
  }

  /* Cart badge: token accent restored. */
  .fotofile-v2-header-actions .fotofile-v2-cart-count {
    border-color: #fff;
    color: #fff;
    background: var(--ff-hf2-accent);
  }
}

/* ============================================================
   HF-P3: AUTHORITATIVE FOOTER LAYER — warm charcoal anchor
   ------------------------------------------------------------
   Supersedes the scaffold footer rules earlier in this file
   (the white .fotofile-v2-site-footer / __inner grid / footer-nav
   era). The new markup uses .fotofile-v2-footer-grid, so the old
   __inner rules are inert; overrides below neutralize the rest.
   Future footer visual changes MUST edit this block.
   Bottom navigation rules are NOT owned here and stay untouched.
   Display rules (approved product decision):
   - desktop/large tablet >=783px: full footer, all page types
   - mobile feed pages (--feed: Home/Shop/product taxonomy/search):
     footer hidden entirely (bottom nav is the app chrome)
   - mobile cart/checkout: existing hide rules preserved
   - mobile utility pages (--utility): compact footer
   ============================================================ */

:root {
  --ff-p3-footer-bg: #2b2522;
  --ff-p3-footer-bg-deep: #241f1c;
  --ff-p3-footer-ink: #f4ede7;
  --ff-p3-footer-soft: #d9cfc7;
  --ff-p3-footer-muted: #b3a79e;
  --ff-p3-footer-line: rgba(244, 237, 231, 0.14);
  --ff-p3-footer-accent: #ff8a63;
}

.fotofile-v2-site-footer {
  margin: 0;
  border-top: 0;
  background: var(--ff-p3-footer-bg);
  color: var(--ff-p3-footer-ink);
}

.fotofile-v2-footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(140px, 1fr) minmax(170px, 1.2fr) minmax(150px, 1fr);
  gap: 36px;
  padding-block: 44px 36px;
}

/* Brand column */

.fotofile-v2-footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.fotofile-v2-site-footer .fotofile-v2-brand__mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--ff-hf2-accent, #ff572f);
  font-size: 1rem;
  font-weight: 900;
}

.fotofile-v2-footer-tagline {
  max-width: 30rem;
  margin: 14px 0 18px;
  color: var(--ff-p3-footer-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.fotofile-v2-footer-contact-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fotofile-v2-footer-contact-list a {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 8px;
  color: var(--ff-p3-footer-soft);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.fotofile-v2-footer-contact-list a:hover,
.fotofile-v2-footer-contact-list a:focus-visible {
  color: var(--ff-p3-footer-accent);
}

.fotofile-v2-footer-contact-list svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.fotofile-v2-footer-line-cta {
  gap: 8px;
}

.fotofile-v2-footer-line-badge {
  display: inline-grid;
  min-width: 30px;
  height: 19px;
  place-items: center;
  padding-inline: 5px;
  border-radius: 999px;
  color: #fff;
  background: #06c755;
  font-size: 0.6rem;
  font-weight: 900;
}

.fotofile-v2-footer-line-cta:hover .fotofile-v2-footer-line-badge,
.fotofile-v2-footer-line-cta:focus-visible .fotofile-v2-footer-line-badge {
  background: #05b84e;
}

/* Link columns */

.fotofile-v2-footer-heading {
  margin: 4px 0 14px;
  color: var(--ff-p3-footer-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fotofile-v2-footer-links,
.fotofile-v2-footer-links ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fotofile-v2-footer-links li {
  margin: 0;
  padding: 0;
}

.fotofile-v2-footer-links a {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  color: var(--ff-p3-footer-soft);
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.4;
  text-decoration: none;
}

.fotofile-v2-footer-links a:hover,
.fotofile-v2-footer-links a:focus-visible {
  color: var(--ff-p3-footer-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Nested branch sub-links (e.g. MBK floors) indent under their parent. */
.fotofile-v2-footer-links--stores .sub-menu {
  margin-top: 9px;
  padding-left: 14px;
}

.fotofile-v2-footer-links--stores .sub-menu a {
  color: var(--ff-p3-footer-muted);
  font-size: 0.84rem;
}

.fotofile-v2-footer-links--stores .sub-menu a:hover,
.fotofile-v2-footer-links--stores .sub-menu a:focus-visible {
  color: var(--ff-p3-footer-accent);
}

/* Legal bar */

.fotofile-v2-footer-legal {
  border-top: 1px solid var(--ff-p3-footer-line);
  background: var(--ff-p3-footer-bg-deep);
}

.fotofile-v2-footer-legal__inner {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ff-p3-footer-muted);
  font-size: 0.8rem;
}

.fotofile-v2-footer-legal a {
  color: var(--ff-p3-footer-soft);
  text-decoration: none;
}

.fotofile-v2-footer-legal a:hover,
.fotofile-v2-footer-legal a:focus-visible {
  color: var(--ff-p3-footer-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Branded focus ring readable on the charcoal surface (overrides the
   scaffold #111 outline, which is invisible here). */
.fotofile-v2-site-footer :focus-visible {
  outline: 3px solid rgba(255, 138, 99, 0.65);
  outline-offset: 3px;
}

/* Tablet: two columns, brand spans full width first. */
@media (min-width: 783px) and (max-width: 1023px) {
  .fotofile-v2-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    padding-block: 36px 28px;
  }

  .fotofile-v2-footer-col--brand {
    grid-column: 1 / -1;
  }
}

/* Mobile display rules (approved product decision). */
@media (max-width: 782px) {

  /* Feed pages: no footer at all; bottom nav is the chrome. */
  .fotofile-v2-site-footer--feed {
    display: none;
  }

  /* Cart/checkout: keep the existing hidden behavior explicit here too. */
  body.woocommerce-cart .fotofile-v2-site-footer,
  body.woocommerce-checkout .fotofile-v2-site-footer {
    display: none;
  }

  /* Utility pages: compact footer — brand + contact + legal only. */
  .fotofile-v2-site-footer {
    margin: 0;
  }

  .fotofile-v2-footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: 26px 20px;
  }

  .fotofile-v2-footer-col--categories,
  .fotofile-v2-footer-col--stores,
  .fotofile-v2-footer-col--account {
    display: none;
  }

  .fotofile-v2-footer-brand-link {
    font-size: 1rem;
  }

  .fotofile-v2-site-footer .fotofile-v2-brand__mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .fotofile-v2-footer-tagline {
    margin: 10px 0 14px;
    font-size: 0.84rem;
  }

  .fotofile-v2-footer-contact-list {
    gap: 8px;
  }

  .fotofile-v2-footer-legal__inner {
    min-height: 42px;
    flex-wrap: wrap;
    row-gap: 2px;
    font-size: 0.76rem;
  }
}

/* ============================================================
   ARCHIVE-P2 (FIX1): app-like AUTO progressive product feed (mobile)
   ------------------------------------------------------------
   Continuous Shopee/Lazada-style feed injected by theme.js
   (initArchiveLoadMore, IntersectionObserver). No visible Load More
   button in the normal flow — only a restrained inline loading
   indicator, and a retry button that appears ONLY on error.
   - The sentinel/indicator is JS-injected, so no-JS pages never show
     dead controls.
   - Native WooCommerce pagination stays in the DOM and is only hidden
     once JS marks the archive main `.is-loadmore-enhanced`, mobile
     only. Desktop keeps native numbered pagination.
   - The sentinel sits at the feed end with bottom clearance above the
     fixed bottom nav (on top of the existing body padding reserve), so
     it never collides and never leaves a large blank area.
   ============================================================ */

@media (max-width: 767px) {

  /* Hide native pagination ONLY after successful JS enhancement. */
  .fotofile-v2-woocommerce .fotofile-v2-archive__main.is-loadmore-enhanced .woocommerce-pagination,
  .fotofile-v2-woocommerce.is-loadmore-enhanced .woocommerce-pagination {
    display: none;
  }

  .fotofile-v2-feed-sentinel {
    /* The archive main is display:flex;flex-wrap:wrap with children ordered via
       `order:` (ul.products 40, pagination 50). Take a full-width row and sit at
       order 45 so the sentinel always renders AT THE FEED END — directly below
       the last product card and above the (hidden-when-enhanced) pagination —
       never above the archive controls. */
    order: 45;
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 8px;
    margin: 0;
    padding: 4px 0 14px;
    text-align: center;
  }

  /* Restrained inline status — part of the feed, never a CTA. Empty by
     default (collapses) so successful appends show no visible clutter. */
  .fotofile-v2-feed-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ff-hf2-muted, #716864);
    font-size: 0.82rem;
    font-weight: 600;
  }

  .fotofile-v2-feed-status:empty {
    display: none;
  }

  /* Small spinner glyph shown next to the loading text. */
  .fotofile-v2-feed-sentinel.is-loading .fotofile-v2-feed-status::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: fotofile-v2-feed-spin 700ms linear infinite;
  }

  .fotofile-v2-feed-sentinel.is-complete .fotofile-v2-feed-status {
    font-weight: 700;
  }

  .fotofile-v2-feed-sentinel.is-error .fotofile-v2-feed-status {
    color: var(--ff-hf2-accent-dark, #ed4824);
    font-weight: 700;
  }

  /* Retry appears only on error, so a real button is appropriate here. */
  .fotofile-v2-feed-retry {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid var(--ff-hf2-accent, #ff572f);
    border-radius: 10px;
    color: var(--ff-hf2-accent-dark, #ed4824);
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .fotofile-v2-feed-retry:hover {
    color: #fff;
    background: var(--ff-hf2-accent, #ff572f);
  }

  .fotofile-v2-feed-retry:focus-visible {
    outline: 3px solid rgba(255, 87, 47, 0.32);
    outline-offset: 3px;
  }

  .fotofile-v2-feed-retry[hidden] {
    display: none;
  }

  /* Screen-reader-only appended-count announcements. */
  .fotofile-v2-feed-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fotofile-v2-feed-sentinel.is-loading .fotofile-v2-feed-status::before {
    animation-duration: 0ms;
  }
}

@keyframes fotofile-v2-feed-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   HF-P4-R4 — Customer Login / My Account UX
   ------------------------------------------------------------
   Presentation for the theme-owned account shell (`inc/account.php`) rendered
   around native WooCommerce account content. Page 62 is native
   `[woocommerce_my_account]` (ADR-0032). There is NO WooCommerce template
   override and no `theme/woocommerce/` folder (ADR-0035) — the navigation is
   theme-owned via `remove_action`, the dashboard body via the public
   `wc_get_template` filter, and everything else is native markup styled here.

   R4 is a structural rebuild, replacing the Phase 2 / R2 / R3 rules rather than
   layering over them. What the R3 gate rejected and what changed:
     - "default WooCommerce navigation"  -> one continuous theme-owned dark rail
                                            carrying identity + menu + icons.
     - "default dashboard paragraphs"    -> removed; a real greeting built from
                                            the customer's own display name.
     - "default order table"             -> order rows become cards at every
                                            width, not a restyled admin table.
     - "native blocks with CSS around"   -> account heading, status shortcuts,
                                            recent-order panel and task grid are
                                            theme markup on a shared grid.

   Everything is scoped to `body.woocommerce-account`, the class WooCommerce
   prints on the dashboard and on every account endpoint. Cart, checkout, shop,
   archives, single product and Home cannot be reached by this block.

   CLOUDFLARE TURNSTILE — HARD CONSTRAINT
   This block contains ZERO rules matching `.cf-turnstile` (or `.cf-turnstile-br`),
   and NEVER sets `pointer-events`, `opacity`, `display` or `visibility` on
   `.woocommerce-form-login__submit`, `.woocommerce-form-register__submit` or
   `.woocommerce-ResetPassword .button`. The bot gate ships its own inline
   <style> that disables those buttons until the challenge is solved; because it
   is an in-body <style>, it wins over this file at equal specificity and its
   enable/disable behaviour is preserved exactly. Submit buttons here are given
   colour, size and radius only. Form containers never use `overflow:hidden` and
   the mobile shell is flattened so the ~300px Turnstile widget always has room.

   Native WooCommerce notices, validation messages, labels, nonces, autocomplete
   attributes and endpoint URLs are all preserved and never hidden.
   ============================================================ */

body.woocommerce-account {
  --acc-ink: #1a1a1a;
  --acc-muted: #6b6b6b;
  --acc-line: #ececec;
  --acc-hair: #f4f1ee;
  --acc-surface: #fff;
  --acc-wash: #faf8f7;
  --acc-accent: var(--fotofile-v2-accent, #ee4d2d);
  --acc-accent-ink: #d8431f;
  --acc-accent-wash: #fff4ef;
  --acc-danger: #b0342a;
  --acc-dark: #111;
  --acc-dark-ink: #fff;
  --acc-dark-muted: rgba(255, 255, 255, 0.62);
  --acc-dark-line: rgba(255, 255, 255, 0.09);
  --acc-radius: 14px;
  --acc-radius-sm: 10px;
  --acc-radius-lg: 16px;
  --acc-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 6px 16px rgba(17, 17, 17, 0.05);
  --acc-tap: 52px;
  --acc-rail: 258px;
}

/* --- Page shell -------------------------------------------------------- */

/* The account screens carry their own cards, so the outer white page panel is
   flattened at every width. This removes the card-in-a-card look, returns the
   full content width to the account grid, and is what guarantees the ~300px
   Turnstile widget fits at 390px without a horizontal scroll container. */
body.woocommerce-account .fotofile-v2-entry {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.woocommerce-account .fotofile-v2-entry__content {
  margin: 0;
}

/* The WordPress page title for page 62 is still "My Account". The theme prints
   its own Thai heading inside the account shell, so the page title would read
   as a duplicate. It is CLIPPED, not removed: it stays in the document and in
   the accessibility tree, and no `the_title` filter is used — menus,
   breadcrumbs and every other page title are untouched. */
body.woocommerce-account .fotofile-v2-entry__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Shared light card surface, grouped so elevation stays identical across the
   access surface, the panels, the tables and the address blocks. */
body.woocommerce-account #customer_login > .col-1,
body.woocommerce-account #customer_login > .col-2,
body.woocommerce-account .woocommerce-ResetPassword,
body.woocommerce-account .fotofile-v2-account-panel,
body.woocommerce-account .fotofile-v2-account-task,
body.woocommerce-account .woocommerce-Address,
body.woocommerce-account .woocommerce-columns--addresses .woocommerce-column {
  box-sizing: border-box;
  border: 1px solid var(--acc-line);
  border-radius: var(--acc-radius);
  background: var(--acc-surface);
  box-shadow: var(--acc-shadow);
}

/* Native notices (incl. the loyalty plugin's signup notice and every
   WooCommerce validation error) — styled, never hidden. */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
  margin: 0 0 16px;
  border-radius: var(--acc-radius-sm);
  font-size: 0.93rem;
  line-height: 1.5;
}

body.woocommerce-account .woocommerce-error li {
  line-height: 1.5;
}

/* --- Forms ------------------------------------------------------------- */

body.woocommerce-account .woocommerce-form-row,
body.woocommerce-account .form-row {
  margin: 0 0 14px;
  padding: 0;
}

body.woocommerce-account .form-row label,
body.woocommerce-account .woocommerce-form-row label {
  display: block;
  margin-bottom: 6px;
  color: var(--acc-ink);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}

/* 16px minimum kills iOS focus-zoom on every account form. */
body.woocommerce-account .input-text,
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="tel"],
body.woocommerce-account input[type="password"],
body.woocommerce-account select,
body.woocommerce-account textarea {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid #d8ccc2;
  border-radius: var(--acc-radius-sm);
  background: var(--acc-surface);
  color: var(--acc-ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}

body.woocommerce-account .input-text:focus,
body.woocommerce-account input[type="text"]:focus,
body.woocommerce-account input[type="email"]:focus,
body.woocommerce-account input[type="tel"]:focus,
body.woocommerce-account input[type="password"]:focus,
body.woocommerce-account select:focus,
body.woocommerce-account textarea:focus {
  border-color: var(--acc-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(238, 77, 45, 0.14);
}

body.woocommerce-account :focus-visible {
  outline: 3px solid #111;
  outline-offset: 2px;
}

body.woocommerce-account .required {
  border: 0;
  color: var(--acc-accent);
  text-decoration: none;
}

/* Primary actions. Colour/size/radius ONLY — no opacity, no pointer-events,
   so the Turnstile submit gate stays authoritative. */
body.woocommerce-account .woocommerce-button,
body.woocommerce-account .woocommerce-Button,
body.woocommerce-account button.button,
body.woocommerce-account a.button {
  display: inline-block;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid var(--acc-accent);
  border-radius: var(--acc-radius-sm);
  background: var(--acc-accent);
  color: #fff;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

body.woocommerce-account .woocommerce-button:hover,
body.woocommerce-account .woocommerce-Button:hover,
body.woocommerce-account button.button:hover,
body.woocommerce-account a.button:hover {
  border-color: var(--acc-accent-ink);
  background: var(--acc-accent-ink);
  color: #fff;
}

body.woocommerce-account .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  margin: 0 0 14px;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 500;
}

body.woocommerce-account .woocommerce-form-login__rememberme input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--acc-accent);
}

body.woocommerce-account .woocommerce-LostPassword {
  margin: 14px 0 0;
  font-size: 0.92rem;
}

body.woocommerce-account .woocommerce-LostPassword a {
  color: var(--acc-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.woocommerce-account .woocommerce-privacy-policy-text {
  margin: 0 0 14px;
  color: var(--acc-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* --- Logged out: login / registration access surface ------------------ */

body.woocommerce-account #customer_login {
  display: grid;
  margin: 0;
  gap: 18px;
}

/* Kill WooCommerce's default float/percentage columns so the grid governs. */
body.woocommerce-account #customer_login > .col-1,
body.woocommerce-account #customer_login > .col-2 {
  width: auto;
  max-width: none;
  float: none;
  margin: 0;
  padding: 20px;
}

body.woocommerce-account #customer_login h2 {
  margin: 0 0 4px;
  color: var(--acc-ink);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.35;
}

body.woocommerce-account #customer_login h2::after {
  display: block;
  width: 34px;
  height: 3px;
  margin: 8px 0 16px;
  border-radius: 2px;
  background: var(--acc-accent);
  content: "";
}

body.woocommerce-account #customer_login form {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

body.woocommerce-account #customer_login .register > p {
  margin: 0 0 14px;
  color: var(--acc-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register__submit,
body.woocommerce-account .woocommerce-ResetPassword .button {
  width: 100%;
}

/* Lost password / reset password: same access-surface card treatment. */
body.woocommerce-account .woocommerce-ResetPassword {
  max-width: 520px;
  margin: 0;
  padding: 20px;
}

body.woocommerce-account .woocommerce-ResetPassword > p:first-child {
  margin: 0 0 16px;
  color: var(--acc-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* --- Account rail (theme-owned, replaces myaccount/navigation.php) ----- */

/* ONE element carries identity + menu, so the dark desktop rail is a single
   continuous surface. Two adjacent cards could never close the seam, which is
   what the R3 gate rejected. On mobile the rail collapses to just the identity
   card — the menu below it is hidden and replaced by the hub's task grid. */
body.woocommerce-account .fotofile-v2-account-rail {
  width: auto;
  float: none;
  margin: 0;
  border-radius: var(--acc-radius-lg);
  background: var(--acc-dark);
  color: var(--acc-dark-ink);
}

body.woocommerce-account .fotofile-v2-account-rail__identity {
  display: flex;
  align-items: center;
  padding: 18px;
  gap: 12px;
}

body.woocommerce-account .fotofile-v2-account-rail__avatar {
  display: flex;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--acc-accent);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

body.woocommerce-account .fotofile-v2-account-rail__who {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

body.woocommerce-account .fotofile-v2-account-rail__name,
body.woocommerce-account .fotofile-v2-account-rail__email {
  overflow: hidden;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.woocommerce-account .fotofile-v2-account-rail__name {
  color: var(--acc-dark-ink);
  font-size: 1rem;
  font-weight: 700;
}

body.woocommerce-account .fotofile-v2-account-rail__email {
  color: var(--acc-dark-muted);
  font-size: 0.84rem;
}

body.woocommerce-account .fotofile-v2-account-rail__nav ul {
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
}

body.woocommerce-account .fotofile-v2-account-rail__nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.woocommerce-account .fotofile-v2-account-rail__nav a {
  display: flex;
  min-height: 46px;
  align-items: center;
  padding: 11px 18px;
  gap: 12px;
  color: var(--acc-dark-muted);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

body.woocommerce-account .fotofile-v2-account-rail__nav a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

body.woocommerce-account .fotofile-v2-account-rail__nav li.is-active > a {
  background: var(--acc-accent);
  color: #fff;
  font-weight: 800;
}

body.woocommerce-account .fotofile-v2-account-rail__icon svg,
body.woocommerce-account .fotofile-v2-account-task__icon svg,
body.woocommerce-account .fotofile-v2-account-status__icon svg,
body.woocommerce-account .fotofile-v2-account-heading__back svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

/* Icons inherit the row's own colour rather than being dimmed with `opacity`,
   so this block keeps ZERO `opacity` declarations and the Turnstile proof stays
   absolute rather than "absolute except one harmless case". */
body.woocommerce-account .fotofile-v2-account-rail__icon {
  flex: 0 0 auto;
}

/* Logout separated from the endpoint list, near the bottom of the rail. */
body.woocommerce-account .fotofile-v2-account-rail__nav li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 8px;
  border-top: 1px solid var(--acc-dark-line);
  padding-top: 8px;
}

body.woocommerce-account .fotofile-v2-account-rail__nav li.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: #ff9d86;
}

body.woocommerce-account .fotofile-v2-account-rail__nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: rgba(255, 157, 134, 0.12);
  color: #ffb9a8;
}

/* --- Workspace heading (theme-owned) ---------------------------------- */

body.woocommerce-account .fotofile-v2-account-heading {
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 8px;
}

body.woocommerce-account .fotofile-v2-account-heading__title {
  margin: 0;
  color: var(--acc-ink);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.3;
}

body.woocommerce-account .fotofile-v2-account-heading__greeting {
  margin: 0;
  color: var(--acc-muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

body.woocommerce-account .fotofile-v2-account-heading__greeting strong {
  color: var(--acc-ink);
  font-weight: 700;
}

body.woocommerce-account .fotofile-v2-account-heading__back {
  display: inline-flex;
  min-height: 40px;
  align-self: flex-start;
  align-items: center;
  padding: 8px 14px 8px 10px;
  gap: 6px;
  border: 1px solid var(--acc-line);
  border-radius: 999px;
  background: var(--acc-surface);
  color: var(--acc-ink);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

body.woocommerce-account .fotofile-v2-account-heading__back:hover {
  border-color: var(--acc-accent);
  color: var(--acc-accent);
}

/* --- Dashboard hub (theme-owned) -------------------------------------- */

body.woocommerce-account .fotofile-v2-account-hub {
  display: grid;
  margin: 0;
  gap: 14px;
}

/* Order-status shortcut row. These are ENTRY POINTS to the Orders endpoint
   styled as the reference's status row — deliberately not counters. Counts
   would cost one query per status, and faking them is prohibited. */
body.woocommerce-account .fotofile-v2-account-status {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px 10px;
  border: 1px solid var(--acc-line);
  border-radius: var(--acc-radius);
  background: var(--acc-surface);
  box-shadow: var(--acc-shadow);
}

/* Standalone filter bar above the Orders list (the hub supplies its own gap). */
body.woocommerce-account .fotofile-v2-account-status--bar {
  margin: 0 0 16px;
}

body.woocommerce-account .fotofile-v2-account-status__item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: 4px 2px;
  gap: 8px;
  color: var(--acc-ink);
  text-align: center;
  text-decoration: none;
}

body.woocommerce-account .fotofile-v2-account-status__item:hover {
  color: var(--acc-accent);
}

/* R4-FIX1: the selected filter. Marked with `aria-current="page"` in markup;
   the visual state below is a second, redundant signal — never the only one. */
body.woocommerce-account .fotofile-v2-account-status__item.is-active {
  border-radius: var(--acc-radius-sm);
  background: var(--acc-accent-wash);
  color: var(--acc-accent);
  font-weight: 800;
}

body.woocommerce-account .fotofile-v2-account-status__icon {
  color: var(--acc-accent);
}

body.woocommerce-account .fotofile-v2-account-status__label {
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
}

/* On the Orders endpoint the row gains a fifth "all orders" control that clears
   the filter. It keeps its own line so the four status tiles hold an even 4-up
   rhythm, but FIX3 demotes it to a small right-aligned reset link: as a big
   centred full-width row it read as a second heading nested inside the card,
   competing with the real endpoint title above. Its icon is dropped for the
   same reason — it is an action, not a fifth status. */
body.woocommerce-account .fotofile-v2-account-status__item--all {
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 2px 10px;
  gap: 6px;
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--acc-hair);
  border-radius: 0;
}

body.woocommerce-account .fotofile-v2-account-status__item--all .fotofile-v2-account-status__icon {
  display: none;
}

body.woocommerce-account .fotofile-v2-account-status__item--all .fotofile-v2-account-status__label {
  font-size: 0.82rem;
  font-weight: 700;
}

body.woocommerce-account .fotofile-v2-account-status__item--all.is-active {
  background: transparent;
}

/* Filtered empty state. WooCommerce's native "No order has been made yet." is
   untrue on a filtered list — the customer may have plenty of orders in other
   statuses — so it is suppressed by the single scoped rule below and replaced
   with this. Outside a filtered Orders view the `ff-orders-filtered` body class
   is absent and native empty-state behaviour is completely unchanged. */
body.ff-orders-filtered .woocommerce-MyAccount-content .woocommerce-info {
  display: none;
}

body.woocommerce-account .fotofile-v2-account-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 18px;
  padding: 28px 18px;
  gap: 10px;
  border: 1px solid var(--acc-line);
  border-radius: var(--acc-radius);
  background: var(--acc-surface);
  box-shadow: var(--acc-shadow);
  color: var(--acc-muted);
  font-size: 0.95rem;
  text-align: center;
}

body.woocommerce-account .fotofile-v2-account-empty a {
  color: var(--acc-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Recent orders panel */
body.woocommerce-account .fotofile-v2-account-panel {
  padding: 16px;
}

body.woocommerce-account .fotofile-v2-account-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}

body.woocommerce-account .fotofile-v2-account-panel__title {
  margin: 0;
  color: var(--acc-ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
}

body.woocommerce-account .fotofile-v2-account-panel__all {
  color: var(--acc-accent);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

body.woocommerce-account .fotofile-v2-account-panel__all:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.woocommerce-account .fotofile-v2-account-panel__empty {
  margin: 0;
  padding: 18px 0 6px;
  color: var(--acc-muted);
  font-size: 0.92rem;
  text-align: center;
}

body.woocommerce-account .fotofile-v2-account-order {
  display: grid;
  align-items: center;
  margin-bottom: 10px;
  padding: 14px;
  gap: 10px 14px;
  border: 1px solid var(--acc-line);
  border-radius: var(--acc-radius-sm);
  background: var(--acc-wash);
}

body.woocommerce-account .fotofile-v2-account-order:last-child {
  margin-bottom: 0;
}

body.woocommerce-account .fotofile-v2-account-order__meta,
body.woocommerce-account .fotofile-v2-account-order__figures {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 10px;
}

body.woocommerce-account .fotofile-v2-account-order__number,
body.woocommerce-account .fotofile-v2-account-order__total {
  color: var(--acc-ink);
  font-size: 1rem;
  font-weight: 800;
}

body.woocommerce-account .fotofile-v2-account-order__date {
  color: var(--acc-muted);
  font-size: 0.85rem;
}

body.woocommerce-account .fotofile-v2-account-order__status {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--acc-accent-wash);
  color: var(--acc-accent);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

body.woocommerce-account .fotofile-v2-account-order__cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--acc-accent);
  border-radius: var(--acc-radius-sm);
  background: var(--acc-surface);
  color: var(--acc-accent);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

body.woocommerce-account .fotofile-v2-account-order__cta:hover {
  background: var(--acc-accent);
  color: #fff;
}

/* Quick task cards */
body.woocommerce-account .fotofile-v2-account-tasks {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Three visible tasks in a two-column grid would leave an empty slot. The odd
   one out spans the row instead, so the grid is always balanced whether the
   allow-list yields two, three or four tasks. */
body.woocommerce-account .fotofile-v2-account-tasks > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

body.woocommerce-account .fotofile-v2-account-task {
  display: flex;
  min-height: 76px;
  flex-direction: column;
  justify-content: center;
  padding: 14px;
  gap: 8px;
  color: var(--acc-ink);
  text-decoration: none;
}

body.woocommerce-account .fotofile-v2-account-task:hover {
  border-color: var(--acc-accent);
  color: var(--acc-accent);
}

body.woocommerce-account .fotofile-v2-account-task__icon {
  color: var(--acc-accent);
}

body.woocommerce-account .fotofile-v2-account-task__label {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

/* Logout leaves the account, so it is last, full width and quieter — never the
   page's primary CTA. */
body.woocommerce-account .fotofile-v2-account-task--logout {
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  color: var(--acc-danger);
}

body.woocommerce-account .fotofile-v2-account-task--logout:hover {
  border-color: var(--acc-danger);
  background: #fdf2f0;
  color: #94271e;
}

body.woocommerce-account .fotofile-v2-account-task--logout .fotofile-v2-account-task__icon {
  color: var(--acc-danger);
}

/* --- Native endpoint content ------------------------------------------ */

body.woocommerce-account .woocommerce-MyAccount-content {
  width: auto;
  min-width: 0;
  float: none;
  margin: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content > p {
  margin: 0 0 14px;
  line-height: 1.65;
}

body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3,
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-order-details__title,
body.woocommerce-account .woocommerce-column__title {
  margin: 0 0 12px;
  color: var(--acc-ink);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
}

/* Orders and order-details become CARD ROWS at every width, not a restyled
   admin table. Cell labels come from WooCommerce's OWN `data-title` attributes,
   so nothing is invented and no markup changes. The `<thead>` is clipped rather
   than removed: it stays in the document, and each cell carries its own visible
   label. Trade-off recorded honestly — laying a table out with grid drops the
   implicit table semantics, which is the same technique already accepted for
   cart and for the R2/R3 mobile orders view.
   Order IDs, dates, statuses, totals, action labels, action URLs and nonces all
   remain exactly what WooCommerce rendered. */
body.woocommerce-account .shop_table,
body.woocommerce-account .shop_table tbody,
body.woocommerce-account .shop_table tr,
body.woocommerce-account .shop_table td {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

body.woocommerce-account .shop_table {
  margin: 0 0 18px;
  border: 0;
  border-collapse: collapse;
  background: transparent;
}

body.woocommerce-account .shop_table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.woocommerce-account .shop_table tr {
  margin: 0 0 12px;
  padding: 6px 16px;
  border: 1px solid var(--acc-line);
  border-radius: var(--acc-radius);
  background: var(--acc-surface);
  box-shadow: var(--acc-shadow);
}

body.woocommerce-account .shop_table td {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--acc-hair);
  gap: 14px;
  font-size: 0.93rem;
  line-height: 1.5;
  text-align: right;
}

body.woocommerce-account .shop_table tr td:last-child {
  border-bottom: 0;
}

body.woocommerce-account .shop_table td::before {
  flex: 0 0 auto;
  color: var(--acc-muted);
  font-size: 0.84rem;
  font-weight: 700;
  text-align: left;
  content: attr(data-title);
}

/* Scanning hierarchy: number, status and total read at three distinct levels. */
body.woocommerce-account .woocommerce-orders-table__cell-order-number a {
  color: var(--acc-ink);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover {
  color: var(--acc-accent);
}

body.woocommerce-account .woocommerce-orders-table__cell-order-date {
  color: var(--acc-muted);
}

body.woocommerce-account .woocommerce-orders-table__cell-order-status {
  color: var(--acc-accent);
  font-weight: 700;
}

/* Order summary (theme-owned `fotofile-order-summary` column): item count and
   total are two separate elements, never one merged string. Shared base; the
   desktop card splits them left/right, the mobile row keeps them together on the
   value side of the native `data-title` label. */
body.woocommerce-account .fotofile-account-order-summary {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px 10px;
}

body.woocommerce-account .fotofile-account-order-item-count {
  color: var(--acc-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

body.woocommerce-account .fotofile-account-order-total {
  color: var(--acc-ink);
  font-weight: 800;
  white-space: nowrap;
}

/* FIX2 - compact "รวม" (Total) presentation label so the amount reads as the
   strongest money value in the card. Presentation copy only; the monetary value
   (including native del/ins on a refund) is never altered. */
body.woocommerce-account .fotofile-account-order-total::before {
  content: "\0E23\0E27\0E21 ";
  margin-right: 2px;
  color: var(--acc-muted);
  font-size: 0.82em;
  font-weight: 600;
}

/* Refunded orders: WooCommerce's own `get_formatted_order_total()` already ships
   `<del>` (original) + `<ins>` (final). Style those native tags so the two
   amounts never collide — no currency is parsed. */
body.woocommerce-account .fotofile-account-order-total del {
  color: var(--acc-muted);
  font-weight: 600;
  text-decoration: line-through;
}

body.woocommerce-account .fotofile-account-order-total ins {
  margin-left: 6px;
  color: var(--acc-ink);
  text-decoration: none;
}

/* R5 — product-aware order preview (Orders history `fotofile-order-products`
   column) and the shared thumbnail media used on both Orders and View Order.
   Mobile-first base; the desktop card refines the layout below. */
body.woocommerce-account .fotofile-account-order-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

body.woocommerce-account .fotofile-account-order-product {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  text-align: left;
}

/* Shared thumbnail media: a fixed square that never distorts, used by the
   Orders preview rows and the View Order item cells alike. */
body.woocommerce-account .fotofile-account-order-item-media {
  display: block;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--acc-line);
  border-radius: var(--acc-radius-sm);
  background: var(--acc-wash);
}

body.woocommerce-account .fotofile-account-order-item-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.woocommerce-account .fotofile-account-order-item-media__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--acc-hair);
  background-image:
    linear-gradient(135deg, transparent 46%, var(--acc-line) 46%, var(--acc-line) 54%, transparent 54%),
    linear-gradient(45deg, transparent 46%, var(--acc-line) 46%, var(--acc-line) 54%, transparent 54%);
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
}

body.woocommerce-account .fotofile-account-order-product__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.woocommerce-account .fotofile-account-order-product__name {
  overflow: hidden;
  color: var(--acc-ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.woocommerce-account .fotofile-account-order-product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  color: var(--acc-muted);
  font-size: 0.8rem;
}

body.woocommerce-account .fotofile-account-order-product__figures {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}

body.woocommerce-account .fotofile-account-order-product__qty {
  color: var(--acc-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

body.woocommerce-account .fotofile-account-order-product__line {
  color: var(--acc-ink);
  font-size: 0.88rem;
  font-weight: 600;
}

body.woocommerce-account .fotofile-account-order-products__more {
  margin: 0;
  padding-left: 76px;
  color: var(--acc-accent);
  font-size: 0.82rem;
  font-weight: 700;
}

/* Order actions: ONE primary. `.view` leads; pay/cancel/invoice stay quiet so
   the cell never becomes a wall of orange. Every action link, URL and nonce is
   still WooCommerce's own. */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border-color: var(--acc-line);
  background: var(--acc-surface);
  color: var(--acc-ink);
  font-size: 0.88rem;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:hover {
  border-color: var(--acc-accent);
  background: var(--acc-accent-wash);
  color: var(--acc-accent);
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view {
  border-color: var(--acc-accent);
  background: var(--acc-accent);
  color: #fff;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view:hover {
  border-color: var(--acc-accent-ink);
  background: var(--acc-accent-ink);
  color: #fff;
}

/* Pay is a real commerce action, so it keeps weight without stealing primacy
   from ดูรายละเอียด. Cancel is destructive and stays the quietest thing in the
   group. Native actions, labels and URLs are untouched — colour only. */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.pay {
  border-color: var(--acc-accent);
  background: var(--acc-accent-wash);
  color: var(--acc-accent);
  font-weight: 800;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.cancel {
  border-color: var(--acc-line);
  background: var(--acc-surface);
  color: var(--acc-danger);
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.cancel:hover {
  border-color: var(--acc-danger);
  background: #fdf2f0;
  color: #94271e;
}

/* Addresses.
   ROOT CAUSE of the narrow cards / one-word-per-line Thai / oversized gap
   reported at the R2 gate: WooCommerce's own layout stylesheet ships
   `.woocommerce .col2-set .col-1 { float: left; width: 48% }` — three classes,
   specificity (0,3,0), against an override of (0,2,1). Class count is compared
   first, so WooCommerce won and the cards kept their 48% float; the grid never
   governed anything. Fixed by specificity, not by another layer: the selectors
   below carry the parent class for (0,3,1), and the explicit `.col-1`/`.col-2`
   pair reaches (0,4,1). No `!important`. */
body.woocommerce-account .woocommerce-Addresses,
body.woocommerce-account .woocommerce-columns--addresses {
  display: grid;
  width: 100%;
  margin: 0;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* WooCommerce's `col2-set` clearfix pseudo-elements become stray grid items
   once the container is a grid, which is what leaves a phantom cell beside the
   cards. Grid already contains the (now removed) floats. */
body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after,
body.woocommerce-account .woocommerce-columns--addresses::before,
body.woocommerce-account .woocommerce-columns--addresses::after {
  display: none;
}

/* R4-FIX2 — THE REAL CAUSE OF THE DIAGONAL ADDRESS CARDS.
   R3 and R4 both treated this as a specificity fight with WooCommerce's
   `.woocommerce .col2-set .col-1 { float:left; width:48% }`. It never was.
   `col2-set` also ships a clearfix — `::before` and `::after` with
   `content:""; display:table` — and the moment the container becomes a grid,
   those two pseudo-elements become GRID ITEMS. With two columns they take
   cells 1 and 3, pushing billing into cell 2 and shipping into cell 4: billing
   top-right, shipping bottom-left. That is exactly the diagonal in the
   evidence board, and no amount of extra specificity on the cards could have
   fixed it. The pseudo-elements are neutralised above.
   The float and width overrides below are still wanted — `width: 48%` does
   apply to a grid item even though `float` does not — and they win on
   specificity at (0,4,1) against WooCommerce's (0,3,0). No `!important` is
   needed anywhere, now that the actual cause is known rather than guessed at. */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .col-1,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .col-2,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns--addresses .woocommerce-column,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns--addresses > .col-1,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns--addresses > .col-2 {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  float: none;
  clear: none;
  margin: 0;
  padding: 20px;
}

body.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
}

body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
  margin: 0;
}

body.woocommerce-account .woocommerce-Address-title .edit {
  color: var(--acc-accent);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

body.woocommerce-account .woocommerce-Address address,
body.woocommerce-account .woocommerce-columns--addresses address {
  color: var(--acc-ink);
  font-size: 0.94rem;
  font-style: normal;
  line-height: 1.75;
}

body.woocommerce-account .woocommerce-customer-details {
  margin-top: 22px;
}

/* --- Shipping tracking card (theme-owned, View Order only) ------------- */

/* Deliberately quiet. With no verified tracking workflow yet, this card's job
   is to say "no data" honestly and to be ready to say more later — never to
   imply movement. There is no progress bar in the empty state and no disabled
   button, because a dead button is still a promise the data cannot keep. */
body.woocommerce-account .fotofile-v2-account-tracking {
  margin: 22px 0 0;
  padding: 20px;
  border: 1px solid var(--acc-line);
  border-radius: var(--acc-radius);
  background: var(--acc-surface);
  box-shadow: var(--acc-shadow);
}

body.woocommerce-account .fotofile-v2-account-tracking__title {
  margin: 0 0 12px;
  color: var(--acc-ink);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
}

body.woocommerce-account .fotofile-v2-account-tracking__empty {
  margin: 0 0 14px;
  color: var(--acc-muted);
  font-size: 0.95rem;
}

body.woocommerce-account .fotofile-v2-account-tracking__facts {
  display: grid;
  margin: 0;
  gap: 10px 20px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

body.woocommerce-account .fotofile-v2-account-tracking__fact {
  min-width: 0;
}

body.woocommerce-account .fotofile-v2-account-tracking__fact dt {
  margin: 0 0 2px;
  color: var(--acc-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

body.woocommerce-account .fotofile-v2-account-tracking__fact dd {
  margin: 0;
  color: var(--acc-ink);
  font-size: 0.98rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

body.woocommerce-account .fotofile-v2-account-tracking__note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--acc-hair);
  color: var(--acc-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

body.woocommerce-account .fotofile-v2-account-tracking__cta {
  display: inline-flex;
  min-height: 44px;
  margin-top: 16px;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1px solid var(--acc-accent);
  border-radius: var(--acc-radius-sm);
  background: var(--acc-accent);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

/* Progress rail — rendered ONLY when a future provider supplies a real
   `shipping_state`. A stage is `is-reached` only from that verified value, so
   the empty state can never show a stage as done. */
body.woocommerce-account .fotofile-v2-account-tracking__progress {
  display: grid;
  margin: 0 0 18px;
  padding: 0;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

body.woocommerce-account .fotofile-v2-account-tracking__stage {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--acc-muted);
  font-size: 0.78rem;
  text-align: center;
}

body.woocommerce-account .fotofile-v2-account-tracking__dot {
  width: 12px;
  height: 12px;
  border: 2px solid var(--acc-line);
  border-radius: 50%;
  background: var(--acc-surface);
}

body.woocommerce-account .fotofile-v2-account-tracking__stage.is-reached {
  color: var(--acc-accent);
  font-weight: 700;
}

body.woocommerce-account .fotofile-v2-account-tracking__stage.is-reached .fotofile-v2-account-tracking__dot {
  border-color: var(--acc-accent);
  background: var(--acc-accent);
}

/* Account details / edit address forms. CSS Grid rather than a specificity war
   with WooCommerce's `.woocommerce form .form-row-first { width:47%; float }`:
   floats do not apply to grid items, so the native rule is neutralised without
   `!important` and without out-specifying it. One column here, paired name
   fields on desktop. */
body.woocommerce-account form.woocommerce-EditAccountForm,
body.woocommerce-account .woocommerce-address-fields__field-wrapper {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
}

/* P6 ROOT CAUSE — the same class of bug as the address cards.
   WooCommerce ships `.woocommerce form .form-row-first { float:left; width:47% }`
   (and `-last` at `float:right`). Making the form a grid neutralises the FLOAT,
   because floats do not apply to grid items — but `width: 47%` still does. So
   each field rendered at 47% of its own grid cell, which is exactly the "first
   and last name too far apart" on the evidence board: the gap was not a gap, it
   was two half-empty cells.
   FIX2 set `grid-column` but never reset the width. This does. */
body.woocommerce-account form.woocommerce-EditAccountForm > .form-row,
body.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row {
  width: 100%;
  max-width: none;
  min-width: 0;
  float: none;
  clear: none;
  margin: 0 0 14px;
}

body.woocommerce-account .woocommerce-EditAccountForm fieldset,
body.woocommerce-account .woocommerce-address-fields fieldset {
  margin: 22px 0 0;
  padding: 18px;
  border: 1px solid var(--acc-line);
  border-radius: var(--acc-radius);
  background: var(--acc-wash);
}

body.woocommerce-account .woocommerce-EditAccountForm legend,
body.woocommerce-account .woocommerce-address-fields legend {
  padding: 0 6px;
  color: var(--acc-ink);
  font-size: 0.98rem;
  font-weight: 800;
}

body.woocommerce-account .woocommerce-EditAccountForm em,
body.woocommerce-account .woocommerce-address-fields em {
  display: block;
  margin-top: 4px;
  color: var(--acc-muted);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.5;
}

/* ---------------- Mobile (<=782px) ---------------- */

@media (max-width: 782px) {
  /* Never create a horizontal scroll container on the account document. */
  body.woocommerce-account {
    overflow-x: clip;
  }

  body.woocommerce-account .fotofile-v2-entry__content > .woocommerce {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  body.woocommerce-account #customer_login {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body.woocommerce-account #customer_login > .col-1,
  body.woocommerce-account #customer_login > .col-2 {
    padding: 16px;
  }

  /* THE MOBILE HUB IS THE EXPERIENCE, NOT THE MENU.
     R2/R3 shipped the desktop rail stacked vertically, so ~300px of navigation
     preceded every screen. On mobile the rail keeps only its identity card; the
     menu below it is hidden, because every one of those destinations is a task
     card in the hub, one tap away via "กลับไปภาพรวมบัญชี".
     No JS, no drawer, no accordion, no menu framework. */
  body.woocommerce-account .fotofile-v2-account-rail__nav {
    display: none;
  }

  body.woocommerce-account .fotofile-v2-account-rail {
    border-radius: var(--acc-radius);
  }

  body.woocommerce-account .fotofile-v2-account-rail__identity {
    padding: 16px;
  }

  /* M1 / P1 — the mobile dashboard opens on the customer, not on a title.
     The site header and search already say where you are, so the page heading
     and the welcome sentence were pure duplication above the fold.
     FIX2 clipped the two children but left the flex CONTAINER in the column, so
     it still consumed a `gap`. FIX3 takes the whole container out of flow, so
     it contributes exactly zero height. It is CLIPPED, not deleted: the
     semantic `h2` stays in the document and the accessibility tree. */
  body.ff-account-dashboard .fotofile-v2-account-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* An empty notices wrapper is invisible but still a flex item, so it was
     spending a full `gap` on nothing. WooCommerce prints it on every account
     screen whether or not there is a notice. */
  body.woocommerce-account .woocommerce-notices-wrapper:empty {
    display: none;
  }

  /* P1 / P2 — dashboard and endpoint top spacing are controlled SEPARATELY,
     which is the whole point: the dashboard was too far from the search bar,
     while Account Details was riding up under the sticky header. One value
     could not fix both. */
  body.ff-account-dashboard .fotofile-v2-main {
    padding-top: 14px;
  }

  body.ff-account-endpoint .fotofile-v2-main {
    padding-top: 22px;
  }

  /* Guarantees the back control clears the sticky header even when the browser
     restores a scroll position mid-page. */
  body.ff-account-endpoint .fotofile-v2-account-heading {
    scroll-margin-top: 96px;
  }

  /* M2 — endpoint screens must not repeat the dashboard's furniture.
     The rail carries the large identity card; on an endpoint the customer
     already knows who they are and came for the content, so the whole rail goes
     and the compact back control plus the endpoint title lead instead. */
  body.ff-account-endpoint .fotofile-v2-account-rail {
    display: none;
  }

  body.woocommerce-account .fotofile-v2-account-heading__title {
    font-size: 1.15rem;
  }

  /* M2 — status row: four equal columns that stay equal. Labels are centred,
     capped at two lines, and `overflow-wrap: normal` stops the global
     `break-word` from splitting a Thai label into orphan fragments. */
  body.woocommerce-account .fotofile-v2-account-status {
    padding: 14px 6px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.woocommerce-account .fotofile-v2-account-status__item {
    min-height: 74px;
    justify-content: flex-start;
    gap: 6px;
  }

  body.woocommerce-account .fotofile-v2-account-status__item--all {
    min-height: 0;
  }

  body.woocommerce-account .fotofile-v2-account-status__label {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.72rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: normal;
  }

  body.woocommerce-account .fotofile-v2-account-order__cta {
    width: 100%;
  }

  /* Bottom-nav clearance. The global mobile `body { padding-bottom: … }`
     reserves the bar's own height; this adds a real gap beneath the last action
     so nothing is obscured or untappable, sized off the bottom-nav token rather
     than a magic number and kept modest so it does not read as a blank gap.
     R5: the gap also carries `env(safe-area-inset-bottom)` so on a notched
     device the final order card, its actions, the tracking card, order totals
     and the address blocks clear the home indicator as well as the fixed nav.
     Scoped to the account content; desktop spacing is untouched. */
  body.woocommerce-account .fotofile-v2-main {
    padding-bottom: calc(var(--fotofile-v2-bottom-nav, 62px) / 2 + 12px + env(safe-area-inset-bottom, 0px));
  }

  /* ============================================================
     FIX2 - ORDERS AS A MOBILE COMMERCE CARD (<=782px)
     R5 left every `.woocommerce-orders-table td` on the base labelled flex row,
     so each order read as a converted admin table ("วันที่:", "สถานะ:", "รวม:",
     "เลือกคำสั่ง:"). Here the whole `<tr>` becomes ONE grid: a real transaction
     header, a product group, a total footer and an action footer. The duplicate
     mobile `td::before` pseudo-labels are hidden VISUALLY only (the accessibility
     `<thead>` stays in the DOM). Scoped strictly to `.woocommerce-orders-table`,
     so Addresses / Account Details / View Order / other tables are untouched.
     ============================================================ */
  body.woocommerce-account .woocommerce-orders-table tr {
    display: grid;
    align-items: start;
    gap: 6px 12px;
    padding: 14px 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "number   status"
      "date     status"
      "products products"
      "summary  summary"
      "actions  actions";
  }

  body.woocommerce-account .woocommerce-orders-table td {
    display: block;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
    text-align: left;
  }

  /* C - hide the duplicate mobile pseudo-labels for the ORDERS table only. */
  body.woocommerce-account .woocommerce-orders-table td::before {
    display: none;
  }

  /* A - LEVEL 1 transaction header: order number strongest, date muted directly
     below, status a compact pill on the right spanning both header rows. */
  body.woocommerce-account .woocommerce-orders-table__cell-order-number {
    grid-area: number;
    align-self: end;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-number a {
    color: var(--acc-ink);
    font-size: 1.02rem;
    font-weight: 800;
    text-decoration: none;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-date {
    grid-area: date;
    align-self: start;
    color: var(--acc-muted);
    font-size: 0.8rem;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-status {
    grid-area: status;
    justify-self: end;
    align-self: center;
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--acc-accent-wash);
    color: var(--acc-accent);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
  }

  /* Pill colour from WooCommerce's OWN row-status class - no query, no markup. */
  body.woocommerce-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status { background: #fff1e6; color: #b3541e; }
  body.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { background: #e7f4ec; color: #1f7a45; }
  body.woocommerce-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
  body.woocommerce-account .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status,
  body.woocommerce-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status { background: #f2f0f0; color: #857370; }

  /* B - product group: grouped under a restrained hairline, not bordered cells. */
  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-products {
    grid-area: products;
    display: block;
    padding-top: 12px;
    border-top: 1px solid var(--acc-hair);
    text-align: left;
  }

  /* Product row: thumbnail anchors the left; the name takes the full flexible
     width and may wrap; quantity sits above the (lighter) line price on one row. */
  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-products .fotofile-account-order-product {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "media body"
      "media figures";
    gap: 2px 12px;
    align-items: start;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-products .fotofile-account-order-item-media {
    grid-area: media;
    width: 66px;
    height: 66px;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-products .fotofile-account-order-product__body {
    grid-area: body;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-products .fotofile-account-order-product__name {
    -webkit-line-clamp: 3;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-products .fotofile-account-order-product__figures {
    grid-area: figures;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-products .fotofile-account-order-products__more {
    padding-left: 78px;
  }

  /* D - total footer: item count muted on the left, "รวม <amount>" strongest on
     the right (label via the shared `.fotofile-account-order-total::before`). */
  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-summary {
    grid-area: summary;
    display: block;
    padding-top: 12px;
    border-top: 1px solid var(--acc-hair);
    text-align: left;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-summary .fotofile-account-order-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-summary .fotofile-account-order-total {
    font-size: 1.06rem;
  }

  /* E - action footer: no "เลือกคำสั่ง:" label; two-up so the useful actions
     (View / Pay) land on the lower, thumb-nearest row. CSS `order` only; every
     native anchor, URL and nonce is WooCommerce's own. */
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--acc-hair);
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-actions::before {
    display: none;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
    flex: 1 1 calc(50% - 4px);
    order: 2;                 /* invoice / unknown plugin action between cancel and view */
    min-height: 44px;
    margin: 0;
    padding: 9px 14px;
    font-size: 0.86rem;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.cancel { order: 1; }
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view   { order: 3; }
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.pay    { order: 4; }

  /* Pay = solid orange primary when present; View = outline beside Pay, or the
     solid primary when Pay is absent (read from WooCommerce's own DOM, no JS).
     Cancel keeps the base quiet-destructive; Invoice keeps the base neutral. */
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.pay {
    border-color: var(--acc-accent);
    background: var(--acc-accent);
    color: #fff;
  }

  body.woocommerce-account .woocommerce-orders-table__row:has(.button.pay) .woocommerce-orders-table__cell-order-actions .button.view {
    border-color: var(--acc-accent);
    background: var(--acc-surface);
    color: var(--acc-accent);
  }

  body.woocommerce-account .woocommerce-orders-table__row:not(:has(.button.pay)) .woocommerce-orders-table__cell-order-actions .button.view {
    border-color: var(--acc-accent);
    background: var(--acc-accent);
    color: #fff;
  }

  /* H - View Order item rows as compact commerce rows: the injected thumbnail
     anchors the left, the native name takes the flexible width, quantity drops to
     a secondary line under the title, and native item meta sits below it. The
     native line total keeps its own row. `flow-root` contains the float so it
     never bleeds into the total cell. No pseudo-labels. Amounts are untouched. */
  body.woocommerce-account .woocommerce-table--order-details .product-name {
    display: flow-root;
    text-align: left;
  }

  body.woocommerce-account .woocommerce-table--order-details .product-name::before {
    display: none;
  }

  body.woocommerce-account .woocommerce-table--order-details .product-name .fotofile-account-order-item-media {
    float: left;
    width: 68px;
    height: 68px;
    margin: 0 12px 6px 0;
  }

  /* Native quantity becomes a quiet secondary line under the product title. */
  body.woocommerce-account .woocommerce-table--order-details .product-name .product-quantity {
    display: block;
    margin-top: 2px;
    color: var(--acc-muted);
    font-size: 0.85rem;
    font-weight: 600;
  }

  /* Native item meta stays directly below, quiet and compact. */
  body.woocommerce-account .woocommerce-table--order-details .product-name .wc-item-meta {
    margin: 4px 0 0;
    color: var(--acc-muted);
    font-size: 0.82rem;
  }

  /* FIX2-FIX1 - the line-total cell must be a clean right-aligned commerce price,
     not the generic `.shop_table td` flex label/value row it otherwise inherits.
     Override display + hide ITS pseudo-label only; tfoot/supporting totals keep
     their own `td::before` labels (they are not touched here). Amounts, refunds,
     quantity and item meta are all native and untouched. */
  body.woocommerce-account .woocommerce-table--order-details td.product-total {
    display: block;
    text-align: right;
    font-weight: 700;
  }

  body.woocommerce-account .woocommerce-table--order-details td.product-total::before {
    display: none;
  }

  body.woocommerce-account .woocommerce-EditAccountForm fieldset,
  body.woocommerce-account .woocommerce-address-fields fieldset {
    padding: 16px;
  }
}

/* ---------------- Desktop / tablet (>=783px) ---------------- */

@media (min-width: 783px) {
  /* Logged-out: balanced two-column access surface. */
  body.woocommerce-account #customer_login {
    align-items: start;
    gap: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.woocommerce-account #customer_login > .col-1,
  body.woocommerce-account #customer_login > .col-2 {
    padding: 26px;
  }

  body.woocommerce-account .woocommerce-form-login__submit,
  body.woocommerce-account .woocommerce-form-register__submit {
    width: auto;
    min-width: 190px;
  }

  /* D2 — two-column account centre. The rail spans both content rows so it
     reads as one tall dark column beside the workspace; the workspace takes all
     remaining width, with no `max-width` cap, so 1440px leaves no dead zone.
     Scoped with `.logged-in` so the logged-out access surface is never gridded. */
  body.woocommerce-account.logged-in .fotofile-v2-entry__content > .woocommerce {
    display: grid;
    align-items: start;
    gap: 18px 28px;
    grid-template-columns: var(--acc-rail) minmax(0, 1fr);
  }

  body.woocommerce-account.logged-in .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body.woocommerce-account.logged-in .fotofile-v2-account-heading {
    grid-column: 2;
    grid-row: 2;
  }

  body.woocommerce-account.logged-in .fotofile-v2-account-rail {
    grid-column: 1;
    grid-row: 2 / span 2;
  }

  body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
    grid-column: 2;
    grid-row: 3;
  }

  /* The rail supplies navigation context on desktop, so the back link would be
     a second way to say the same thing. */
  body.woocommerce-account .fotofile-v2-account-heading__back {
    display: none;
  }

  body.woocommerce-account .fotofile-v2-account-heading__title {
    font-size: 1.45rem;
  }

  /* P5 — hub composition: status row across the full workspace, then recent
     orders at ~60% beside quick actions at ~40%, on one shared gap so the two
     columns read as one composition rather than unrelated boxes. */
  body.woocommerce-account .fotofile-v2-account-hub {
    gap: 16px;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }

  body.woocommerce-account .fotofile-v2-account-status {
    grid-column: 1 / -1;
    padding: 18px 14px;
  }

  body.woocommerce-account .fotofile-v2-account-status__label {
    font-size: 0.85rem;
  }

  body.woocommerce-account .fotofile-v2-account-panel {
    padding: 20px;
  }

  body.woocommerce-account .fotofile-v2-account-order {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.woocommerce-account .fotofile-v2-account-order__cta {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  body.woocommerce-account .fotofile-v2-account-tasks {
    align-content: start;
    grid-template-columns: minmax(0, 1fr);
  }

  body.woocommerce-account .fotofile-v2-account-task {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  /* The rail already carries logout on desktop; the hub card would be a second
     copy of the same action on the same screen. */
  body.woocommerce-account .fotofile-v2-account-task--logout {
    display: none;
  }

  /* FIX4 — DESKTOP ORDERS AS A COMMERCE CARD (>=783px).
     The FIX3 four-column card still read as a sliced table: five equal-looking
     tracks, a status stretched across a 1fr track, item count and total merged
     into one string, and actions left-aligned above dead space. FIX4 replaces
     that with ONE card of three explicit levels built from named grid areas, so
     a row's geometry is identical no matter how many native actions it carries:

       row 1:  number | date | status(pill, right)
       row 2:  summary — item count (left) / total (right)
       row 3:  actions — full width, right-aligned

     No track is content-sized in a way that could drift row to row. Every value,
     action, URL and nonce is still WooCommerce's own; only arrangement, weight
     and colour change. The `data-title` micro-labels are dropped at this width
     (an order number, date, status pill and price identify themselves); they
     remain on mobile and `<thead>` stays in the accessibility tree at both. */
  body.woocommerce-account .woocommerce-orders-table tr {
    display: grid;
    align-items: center;
    padding: 18px 22px;
    gap: 12px 18px;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "number date status"
      "products products products"
      "summary summary summary"
      "actions actions actions";
  }

  body.woocommerce-account .woocommerce-orders-table td {
    display: block;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
    text-align: left;
  }

  body.woocommerce-account .woocommerce-orders-table td::before {
    display: none;
  }

  /* LEVEL 1 — order header. Number is the strongest element, date is quiet
     secondary text, status is a compact pill sized to its own text. */
  body.woocommerce-account .woocommerce-orders-table__cell-order-number {
    grid-area: number;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-number a {
    font-size: 1.05rem;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-date {
    grid-area: date;
    align-self: center;
    color: var(--acc-muted);
    font-size: 0.9rem;
  }

  /* Compact pill sized to its own text — never a full-width status bar. */
  body.woocommerce-account .woocommerce-orders-table__cell-order-status {
    grid-area: status;
    justify-self: end;
    align-self: center;
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--acc-accent-wash);
    color: var(--acc-accent);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
  }

  /* Pill colour is driven by WooCommerce's OWN row status class — no extra
     query, no extra markup, just a class WooCommerce already prints. */
  body.woocommerce-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
    background: #fff1e6;
    color: #b3541e;
  }

  body.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status {
    background: #e7f4ec;
    color: #1f7a45;
  }

  body.woocommerce-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
  body.woocommerce-account .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status,
  body.woocommerce-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status {
    background: #f2f0f0;
    color: #857370;
  }

  /* LEVEL 2 — summary. Item count left, total right, across the full card
     above a hairline. Count and total are already separate elements from the
     `fotofile-order-summary` column, so nothing is split in CSS. */
  /* LEVEL 2a — products. A full-width preview of the first items, grouped under
     the header by one restrained hairline. Not a set of bordered WooCommerce
     cells — the rows share spacing, and the larger 76px thumbnail anchors each. */
  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-products {
    grid-area: products;
    padding-top: 14px;
    border-top: 1px solid var(--acc-hair);
  }

  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-products .fotofile-account-order-item-media {
    width: 76px;
    height: 76px;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-products .fotofile-account-order-product__name {
    font-size: 0.95rem;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-products .fotofile-account-order-products__more {
    padding-left: 88px;
  }

  /* LEVEL 2b — summary. Item count left, total right, across the full card
     above a hairline. Count and total are already separate elements from the
     `fotofile-order-summary` column, so nothing is split in CSS. */
  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-summary {
    grid-area: summary;
    padding-top: 14px;
    border-top: 1px solid var(--acc-hair);
  }

  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-summary .fotofile-account-order-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-summary .fotofile-account-order-item-count {
    font-size: 0.92rem;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-fotofile-order-summary .fotofile-account-order-total {
    font-size: 1.05rem;
  }

  /* LEVEL 3 — actions. One full-width footer row, always right-aligned, with a
     stable visual order regardless of how many actions the order carries:
     cancel · invoice · view · pay (left→right). Reordered with flex `order`
     only; the DOM, links and nonces are WooCommerce's / the plugin's own. */
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--acc-hair);
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-actions::before {
    display: none;
  }

  /* Any action without a more specific rule (e.g. the invoice plugin's button)
     sits between cancel and view. */
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
    order: 2;
    min-height: 40px;
    min-width: 104px;
    padding: 9px 18px;
    font-size: 0.86rem;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.cancel {
    order: 1;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view {
    order: 3;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.pay {
    order: 4;
  }

  /* Action hierarchy.
     Pay is the solid primary whenever it exists. View is the orange OUTLINE
     beside it, and becomes the solid primary only when the row has no Pay — read
     straight from WooCommerce's own DOM with `:has()`, no JS. Cancel stays quiet
     and destructive; the invoice button keeps the neutral secondary base. */
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.pay {
    border-color: var(--acc-accent);
    background: var(--acc-accent);
    color: #fff;
    font-weight: 800;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.pay:hover {
    border-color: var(--acc-accent-ink);
    background: var(--acc-accent-ink);
    color: #fff;
  }

  body.woocommerce-account .woocommerce-orders-table__row:has(.button.pay) .woocommerce-orders-table__cell-order-actions .button.view {
    border-color: var(--acc-accent);
    background: var(--acc-surface);
    color: var(--acc-accent);
    font-weight: 700;
  }

  body.woocommerce-account .woocommerce-orders-table__row:not(:has(.button.pay)) .woocommerce-orders-table__cell-order-actions .button.view {
    border-color: var(--acc-accent);
    background: var(--acc-accent);
    color: #fff;
    font-weight: 700;
  }

  /* D3 — VIEW ORDER.
     The R4 card-row treatment was applied to every `.shop_table`, which turned
     the order-details table into the tall narrow strip in the evidence board
     with a huge dead area beside it. On desktop that table goes back to being a
     real table, full width, inside one wide card. Mobile keeps the card rows. */
  body.woocommerce-account .woocommerce-table--order-details {
    display: table;
    border-collapse: collapse;
  }

  body.woocommerce-account .woocommerce-table--order-details thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }

  body.woocommerce-account .woocommerce-table--order-details tbody {
    display: table-row-group;
  }

  body.woocommerce-account .woocommerce-table--order-details tfoot {
    display: table-footer-group;
  }

  body.woocommerce-account .woocommerce-table--order-details tr {
    display: table-row;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.woocommerce-account .woocommerce-table--order-details th,
  body.woocommerce-account .woocommerce-table--order-details td {
    display: table-cell;
    padding: 12px 14px;
    border-bottom: 1px solid var(--acc-hair);
    text-align: left;
    vertical-align: top;
  }

  body.woocommerce-account .woocommerce-table--order-details td::before {
    display: none;
  }

  /* R5 — View Order thumbnail: floated to the left edge of the native
     product-name cell, which is a table-cell and therefore already contains the
     float. The native product link, name, quantity and item meta flow to its
     right and wrap beneath when taller; none of that markup is altered. */
  body.woocommerce-account .woocommerce-table--order-details .product-name .fotofile-account-order-item-media {
    float: left;
    width: 76px;
    height: 76px;
    margin: 2px 14px 6px 0;
  }

  /* H desktop - quantity is a quiet secondary line under the title; item meta
     sits below it, muted; the line total stays right-aligned in its own column.
     Real table semantics (restored in FIX4/R5) are kept - no display:block rows. */
  body.woocommerce-account .woocommerce-table--order-details .product-name .product-quantity {
    display: block;
    margin-top: 2px;
    color: var(--acc-muted);
    font-weight: 600;
  }

  body.woocommerce-account .woocommerce-table--order-details .product-name .wc-item-meta {
    margin: 4px 0 0;
    color: var(--acc-muted);
    font-size: 0.86rem;
  }

  body.woocommerce-account .woocommerce-table--order-details td.product-total {
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
  }

  body.woocommerce-account .woocommerce-table--order-details tfoot th {
    color: var(--acc-muted);
    font-weight: 700;
  }

  body.woocommerce-account .woocommerce-table--order-details tfoot td {
    color: var(--acc-ink);
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
  }

  /* The order-details section becomes the composition grid: title and the items
     table span the full width, and any additional direct children — the plugin
     metadata blocks such as LINE ID and Taxpayer Identification No. — flow into
     two compact columns instead of each taking a giant, mostly empty row.
     Nothing about that plugin data is read, altered or reordered. */
  body.woocommerce-account .woocommerce-order-details {
    display: grid;
    align-items: start;
    padding: 22px;
    gap: 4px 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--acc-line);
    border-radius: var(--acc-radius);
    background: var(--acc-surface);
    box-shadow: var(--acc-shadow);
  }

  body.woocommerce-account .woocommerce-order-details > * {
    min-width: 0;
  }

  body.woocommerce-account .woocommerce-order-details > h2,
  body.woocommerce-account .woocommerce-order-details > table,
  body.woocommerce-account .woocommerce-order-details > section {
    grid-column: 1 / -1;
  }

  body.woocommerce-account .woocommerce-order-details table {
    margin: 0 0 6px;
    border: 0;
    box-shadow: none;
  }

  /* Addresses: two balanced cards filling the workspace width. */
  body.woocommerce-account .woocommerce-Addresses,
  body.woocommerce-account .woocommerce-columns--addresses {
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Account details / edit address: name fields pair, everything else spans.
     The FORM is capped at a readable measure — not the account shell, which
     keeps using the full workspace width. An over-stretched 1440px input is
     harder to scan, not more useful. */
  body.woocommerce-account form.woocommerce-EditAccountForm,
  body.woocommerce-account .woocommerce-address-fields__field-wrapper {
    max-width: 900px;
    gap: 0 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.woocommerce-account form.woocommerce-EditAccountForm > *,
  body.woocommerce-account .woocommerce-address-fields__field-wrapper > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  body.woocommerce-account form.woocommerce-EditAccountForm > .form-row-first,
  body.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-first {
    grid-column: 1;
  }

  body.woocommerce-account form.woocommerce-EditAccountForm > .form-row-last,
  body.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-last {
    grid-column: 2;
  }
}

/* No `prefers-reduced-motion` block is needed here: this section declares zero
   `animation` and zero `transition`, so there is no motion to reduce. A blanket
   `body.woocommerce-account *` reset would add an expensive universal selector
   and an `!important` for no behavioural gain. */

/* ============================================================
   HF-P4A — Login / Register Professional UX
   ------------------------------------------------------------
   Presentation only.

   Native WooCommerce Login/Register/Lost Password forms remain intact.
   The installed Nextend renderer supplies the Google control.
   Security-widget markup and submission behaviour are not styled or altered.
   ============================================================ */

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-head {
  box-sizing: border-box;
  width: min(100%, 560px);
  margin: 20px auto 14px;
  text-align: center;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-head__eyebrow {
  margin: 0 0 8px;
  color: var(--acc-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-head__title {
  margin: 0;
  color: var(--acc-ink);
  font-size: clamp(1.55rem, 4vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-head__copy {
  max-width: 440px;
  margin: 9px auto 0;
  color: var(--acc-muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 20px;
  padding: 4px;
  border: 1px solid #eadfd6;
  border-radius: 12px;
  background: #f8f4f1;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-tab {
  min-height: 44px;
  padding: 9px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #666;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-tab:hover {
  color: var(--acc-ink);
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-tab.is-active {
  background: #fff;
  color: var(--acc-accent-ink);
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.08);
}

body.woocommerce-account:not(.logged-in) #customer_login {
  width: min(100%, 560px);
  max-width: 560px;
  margin: 0 auto 28px;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}

body.woocommerce-account:not(.logged-in) #customer_login > .col-1,
body.woocommerce-account:not(.logged-in) #customer_login > .col-2 {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding: 24px;
  overflow: visible;
  border-color: #e8e1db;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(17, 17, 17, 0.04),
    0 8px 26px rgba(17, 17, 17, 0.055);
}

body.woocommerce-account:not(.logged-in).fotofile-v2-auth-enhanced #customer_login {
  gap: 0;
}

body.woocommerce-account:not(.logged-in).fotofile-v2-auth-enhanced #customer_login > [hidden] {
  display: none !important;
}

body.woocommerce-account:not(.logged-in).fotofile-v2-auth-enhanced #customer_login h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.woocommerce-account:not(.logged-in) #customer_login form {
  overflow: visible;
}

body.woocommerce-account:not(.logged-in) #customer_login .form-row label {
  margin-bottom: 7px;
  font-size: 0.9rem;
  font-weight: 650;
}

body.woocommerce-account:not(.logged-in) #customer_login .input-text,
body.woocommerce-account:not(.logged-in) #customer_login input[type="text"],
body.woocommerce-account:not(.logged-in) #customer_login input[type="email"],
body.woocommerce-account:not(.logged-in) #customer_login input[type="password"] {
  min-height: 48px;
  padding: 11px 13px;
  border-color: #ddd5ce;
  border-radius: 10px;
  background: #fff;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-social {
  margin: 0 0 18px;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-social__provider {
  width: 100%;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-social .nsl-container,
body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-social .nsl-container-buttons {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-social .nsl-container-buttons {
  display: block !important;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-social .nsl-button-google {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 48px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #202124 !important;
  box-shadow: none !important;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-social .nsl-button-google:hover {
  border-color: #b9bdc3 !important;
  background: #fafafa !important;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-social .nsl-button-label-container {
  flex: 1 1 auto !important;
  justify-content: center !important;
  font-family: inherit !important;
  font-size: 0.94rem !important;
  font-weight: 650 !important;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: #999;
  font-size: 0.8rem;
  line-height: 1;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-divider::before,
body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-divider::after {
  height: 1px;
  flex: 1 1 auto;
  background: #ece7e2;
  content: "";
}

body.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit,
body.woocommerce-account:not(.logged-in) .woocommerce-form-register__submit,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword .button {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
}

body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword {
  text-align: right;
}

body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a {
  text-decoration: none;
}

body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 18px 0 0;
  color: var(--acc-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-switch button {
  min-height: 36px;
  padding: 4px 5px;
  border: 0;
  background: transparent;
  color: var(--acc-accent-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

body.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text {
  padding: 10px 12px;
  border-radius: 9px;
  background: #faf8f6;
  font-size: 0.78rem;
}

body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper {
  width: min(100%, 560px);
  margin-right: auto;
  margin-left: auto;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-head--lost {
  margin-bottom: 14px;
}

body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword {
  width: min(100%, 560px);
  max-width: 560px;
  margin: 0 auto;
  padding: 24px;
  overflow: visible;
  border-color: #e8e1db;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(17, 17, 17, 0.04),
    0 8px 26px rgba(17, 17, 17, 0.055);
}

body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword > p:first-child {
  color: var(--acc-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-back {
  width: min(100%, 560px);
  margin: 14px auto 28px;
  text-align: center;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-back a {
  color: var(--acc-accent-ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-back a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 782px) {
  body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-head {
    margin-top: 12px;
    padding: 0 4px;
  }

  body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-head__title {
    font-size: 1.55rem;
  }

  body.woocommerce-account:not(.logged-in) #customer_login > .col-1,
  body.woocommerce-account:not(.logged-in) #customer_login > .col-2,
  body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword {
    padding: 18px;
    border-radius: 12px;
  }

  body.woocommerce-account:not(.logged-in) .fotofile-v2-auth-tabs {
    margin-top: 16px;
  }
}

@media (min-width: 783px) {
  body.woocommerce-account:not(.logged-in) #customer_login {
    grid-template-columns: minmax(0, 1fr);
  }

  body.woocommerce-account:not(.logged-in) #customer_login > .col-1,
  body.woocommerce-account:not(.logged-in) #customer_login > .col-2 {
    padding: 28px;
  }

  body.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit,
  body.woocommerce-account:not(.logged-in) .woocommerce-form-register__submit {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   HF-P4A-R1 — Registration Profile Fields
   ============================================================ */

body.woocommerce-account:not(.logged-in) .fotofile-v2-register-profile {
  margin: 0;
}

body.woocommerce-account:not(.logged-in) .fotofile-v2-register-name-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.woocommerce-account:not(.logged-in)
  .fotofile-v2-register-name-grid
  .form-row,
body.woocommerce-account:not(.logged-in)
  .fotofile-v2-register-phone {
  float: none;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

body.woocommerce-account:not(.logged-in)
  #reg_billing_first_name,
body.woocommerce-account:not(.logged-in)
  #reg_billing_last_name,
body.woocommerce-account:not(.logged-in)
  #reg_billing_phone {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
}

@media (max-width: 520px) {
  body.woocommerce-account:not(.logged-in)
    .fotofile-v2-register-name-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* ============================================================
   HF-ACCOUNT-P5-HOTFIX1-B — Home tablet rail containment
   ------------------------------------------------------------
   Extends the proven M14-FIX4 containing-block repair into the
   Theme V2 tablet band. At 783px the rail descendants could
   escape to the initial containing block, expanding <html> from
   783px to ~1291px and leaving ~508px empty space on the right.

   Browser proof at 783px:
   htmlScrollWidth 1291 -> 783
   visualOffsetLeft 498 -> 0
   extraRightSpace 508 -> 0

   Tablet only. No PHP/JS/query/template/search changes.
   ============================================================ */
@media (min-width: 783px) and (max-width: 1023px) {
  body.home ul.products.fotofile-v2-home-products--rail,
  body.home .fotofile-v2-home-brand-list,
  body.home .fotofile-v2-home-logo-strip,
  body.home .fotofile-v2-home-cat-tree,
  body.home .fotofile-v2-home-blog-list {
    position: relative;
  }
}