/* Fantom WooCommerce - product grid, cards, PDP. Tokens only. */

/* --- Product grid: 2 / 3 / 4 columns -------------------------------------
   Two on mobile, never one: collectors scan, and one-per-row buries stock.
   Blocksy drives its own grid from --shop-columns, so that is overridden too
   rather than left to fight with ours. */
ul.products,
.woocommerce ul.products,
ul.products[data-products] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  --shop-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ftm-space-6) var(--ftm-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  ul.products, .woocommerce ul.products, ul.products[data-products] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    --shop-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ftm-space-8) var(--ftm-space-6);
  }
}
@media (min-width: 1024px) {
  ul.products, .woocommerce ul.products, ul.products[data-products] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    --shop-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ftm-space-12) var(--ftm-space-6);
  }
}

/* --- Card ---------------------------------------------------------------- */
ul.products li.product.ftm-card,
.woocommerce ul.products li.product.ftm-card {
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  float: none !important;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
}
.ftm-card__link { display: block; text-decoration: none; color: inherit; }

.ftm-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ftm-surface-alt);
  overflow: hidden;
  margin-bottom: var(--ftm-space-4);
}
.ftm-card__media img,
.ftm-card .ftm-card__img {
  width: 100%;
  height: 100%;
  /* contain, not cover: the catalog spans 32cm statues and sticker sheets, and
     a crop that flatters one mangles the other. Padding is the honest default. */
  object-fit: contain;
  border-radius: 0;
  display: block;
  transition: opacity 0.18s ease;
}
/* No hover zoom: it shifts layout on touch and hurts CLS. */
.ftm-card:hover .ftm-card__img { opacity: 0.85; }
.ftm-card.outofstock .ftm-card__img { opacity: 0.45; }

.ftm-card__franchise {
  display: block;
  font-size: var(--ftm-text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ftm-ink-muted);
  margin-bottom: var(--ftm-space-2);
}
ul.products li.product .ftm-card__title,
.woocommerce ul.products li.product .ftm-card__title {
  font-size: var(--ftm-text-lg);
  font-weight: var(--ftm-weight-normal);   /* not bold - bold titles make noise */
  line-height: var(--ftm-leading-tight);
  color: var(--ftm-ink);
  margin: 0 0 var(--ftm-space-2);
  padding: 0;
}
ul.products li.product .ftm-card__price,
.woocommerce ul.products li.product .ftm-card__price,
.ftm-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  column-gap: var(--ftm-space-2);
  row-gap: 0;
  font-size: var(--ftm-text-base);
  font-weight: var(--ftm-weight-medium);
  color: var(--ftm-price);
  font-variant-numeric: tabular-nums;
}
/* WooCommerce wraps a discounted price in .sale-price, so the del/ins are
   grandchildren, not children - the flex container has to be that span too or
   the two amounts are laid out as inline text and drift out of alignment. */
.woocommerce ul.products li.product .ftm-card__price .sale-price,
.ftm-card__price .sale-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  column-gap: var(--ftm-space-2);
  row-gap: 0;
  width: 100%;
}
.ftm-card__price del { color: var(--ftm-price-was); font-weight: var(--ftm-weight-normal); }
.ftm-card__price ins { text-decoration: none; }

/* --- Badges over the image ----------------------------------------------- */
.ftm-loop-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border-radius: 0;
  font-size: var(--ftm-text-xs);
  font-weight: var(--ftm-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: var(--ftm-space-1) var(--ftm-space-2);
  line-height: 1.4;
}
/* Blocksy renders its own out-of-stock badge; ours is the only one shown. */
.woocommerce span.onsale,
.out-of-stock-badge,
[class*="ct-woo-badge-"] { display: none !important; }

/* --- Shop listing header -------------------------------------------------- */
.woocommerce-products-header { margin-bottom: var(--ftm-space-8); }
/* Blocksy still prints its listing bar, now empty since sorting moved into the
   header. Left alone it reserves vertical space for nothing. */
.woo-listing-top:empty { display: none; margin: 0; }
.ftm-listing-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ftm-space-4);
  padding-bottom: var(--ftm-space-3);
  border-bottom: 1px solid var(--ftm-border);
  margin-bottom: var(--ftm-space-8);
}
.ftm-listing-head h1,
.ftm-listing-head h2 {
  margin: 0;
  font-size: var(--ftm-text-2xl);
  font-weight: var(--ftm-weight-bold);
  letter-spacing: -0.01em;
}
.ftm-listing-head .ftm-listing-count {
  font-size: var(--ftm-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ftm-ink-muted);
  white-space: nowrap;
}

/* --- Product detail --- */
.woocommerce div.product .product_title { font-size: var(--ftm-text-xl); font-weight: var(--ftm-weight-bold); }
.woocommerce div.product p.price {
  font-size: var(--ftm-text-xl);
  font-weight: var(--ftm-weight-bold);
  color: var(--ftm-price);
  font-variant-numeric: tabular-nums;
}
.woocommerce div.product .stock.in-stock { color: var(--ftm-success); font-weight: var(--ftm-weight-medium); }
.woocommerce div.product .stock.out-of-stock { color: var(--ftm-danger); font-weight: var(--ftm-weight-medium); }

/* Dimensions sit above the fold, not buried in a tab: with one photo per
   product there is no scale reference shot, so measurements are the only
   size cue a customer gets. See ADR-012.

   Blocksy draws full grids on tables, which boxes this in and makes it read
   as a spreadsheet. Rows are separated by a single hairline and nothing else -
   the eye follows label-to-value without a cell border in the way. */
.woocommerce div.product .ftm-pdp-specs,
.ftm-pdp-specs {
  width: 100%;
  border: none;
  border-collapse: collapse;
  margin: var(--ftm-space-6) 0;
  font-size: var(--ftm-text-sm);
  background: transparent;
}
.woocommerce div.product .ftm-pdp-specs tr,
.ftm-pdp-specs tr { background: transparent; }
.woocommerce div.product .ftm-pdp-specs th,
.woocommerce div.product .ftm-pdp-specs td,
.ftm-pdp-specs th,
.ftm-pdp-specs td {
  text-align: left;
  padding: var(--ftm-space-3) 0;
  border: none;
  border-bottom: 1px solid var(--ftm-border);
  background: transparent;
  vertical-align: top;
}
.woocommerce div.product .ftm-pdp-specs th,
.ftm-pdp-specs th {
  font-weight: var(--ftm-weight-normal);
  color: var(--ftm-ink-muted);
  width: 40%;
}
.woocommerce div.product .ftm-pdp-specs td,
.ftm-pdp-specs td {
  font-weight: var(--ftm-weight-medium);
  color: var(--ftm-ink);
}
.ftm-pdp-specs tr:last-child th,
.ftm-pdp-specs tr:last-child td { border-bottom: none; }

/* PDP header block */
.ftm-pdp-eyebrow {
  font-size: var(--ftm-text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ftm-ink-muted);
  margin: 0 0 var(--ftm-space-2);
}
.ftm-pdp-stock {
  display: flex;
  align-items: center;
  gap: var(--ftm-space-2);
  font-size: var(--ftm-text-sm);
  font-weight: var(--ftm-weight-medium);
  margin: var(--ftm-space-2) 0 0;
}
.ftm-pdp-stock--in  { color: var(--ftm-success); }
.ftm-pdp-stock--out { color: var(--ftm-danger); }
.ftm-pdp-stock::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
  flex: 0 0 auto;
}
/* Woo prints its own stock line inside the add-to-cart form; ours replaces it */
.woocommerce div.product .stock { display: none; }

/* Single-image products: no empty filmstrip, no dead arrows (ADR-012) */
.woocommerce div.product .flex-control-thumbs:has(li:only-child) { display: none; }

/* --- Checkout: the plainest surface on the site. Nothing competes with
       finishing the purchase. --- */
.woocommerce-checkout .ftm-promo,
.woocommerce-checkout .cross-sells,
.woocommerce-checkout .up-sells { display: none; }

/* --- Sale pricing ---------------------------------------------------------
   Original struck through in muted ink, new price in full ink. The strike
   carries the discount, which is why the badge is free to carry scarcity
   instead - see the badge priority in content-product.php. */
.ftm-card__price del,
.woocommerce div.product p.price del {
  color: var(--ftm-price-was);
  font-weight: var(--ftm-weight-normal);
  text-decoration: line-through;
  margin-right: var(--ftm-space-2);
}
.ftm-card__price ins,
.woocommerce div.product p.price ins {
  text-decoration: none;
  background: transparent;
  color: var(--ftm-price);
  font-weight: var(--ftm-weight-medium);
}
.woocommerce div.product p.price ins { font-weight: var(--ftm-weight-bold); }
.ftm-save {
  display: inline-block;
  margin-left: var(--ftm-space-2);
  font-size: var(--ftm-text-xs);
  font-weight: var(--ftm-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ftm-danger);
}

/* --- Category strip -------------------------------------------------------
   Categories are for browsing; the strip sits above the grid so the whole
   catalog is one tap away. Scrolls horizontally on narrow screens rather than
   wrapping into a three-line block that buries the products. */
.ftm-cats { margin-bottom: var(--ftm-space-6); border-bottom: 1px solid var(--ftm-border); }
.ftm-cats ul {
  display: flex;
  align-items: stretch;
  gap: var(--ftm-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ftm-cats ul::-webkit-scrollbar { display: none; }
.ftm-cats li { flex: 0 0 auto; }
.ftm-cats a {
  display: flex;
  align-items: center;
  /* 44px minimum: these are the primary browsing control on a phone, and at
     27px tall they were a thumb-miss waiting to happen. */
  min-height: 44px;
  font-size: var(--ftm-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--ftm-weight-medium);
  color: var(--ftm-ink-muted);
  text-decoration: none;
  white-space: nowrap;
}
.ftm-cats a:hover { color: var(--ftm-ink); }
.ftm-cats a.is-active { color: var(--ftm-ink); box-shadow: inset 0 -2px 0 var(--ftm-accent); }
.ftm-cats a:focus-visible { outline-offset: -2px; }

/* --- Filter panel --------------------------------------------------------- */
.ftm-filters { margin-bottom: var(--ftm-space-8); border-bottom: 1px solid var(--ftm-border); }
.ftm-filters__toggle {
  display: flex;
  align-items: center;
  gap: var(--ftm-space-2);
  cursor: pointer;
  list-style: none;
  padding: var(--ftm-space-3) 0;
  font-size: var(--ftm-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--ftm-weight-bold);
  color: var(--ftm-ink);
  min-height: 44px;             /* tap target */
}
.ftm-filters__toggle::-webkit-details-marker { display: none; }
.ftm-filters__toggle::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}
.ftm-filters[open] .ftm-filters__toggle::after { transform: rotate(-135deg) translateY(-2px); }
.ftm-filters__count {
  background: var(--ftm-accent);
  color: var(--ftm-accent-ink);   /* never white on amber */
  padding: 0 var(--ftm-space-2);
  font-size: var(--ftm-text-xs);
}
.ftm-filters__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ftm-space-6);
  padding: var(--ftm-space-2) 0 var(--ftm-space-6);
}
@media (min-width: 640px)  { .ftm-filters__body { grid-template-columns: repeat(2, 1fr); gap: var(--ftm-space-8); } }
@media (min-width: 1024px) { .ftm-filters__body { grid-template-columns: repeat(4, 1fr); } }
.ftm-filters__label {
  font-size: var(--ftm-text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ftm-ink-muted);
  font-weight: var(--ftm-weight-medium);
  margin: 0 0 var(--ftm-space-3);
}
.ftm-filters ul.woocommerce-widget-layered-nav-list,
.ftm-filters .woocommerce-widget-layered-nav-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--ftm-space-1);
}
.ftm-filters .woocommerce-widget-layered-nav-list__item a {
  display: inline-block;
  padding: var(--ftm-space-2) 0;
  font-size: var(--ftm-text-sm);
  color: var(--ftm-ink);
  text-decoration: none;
  min-height: 40px;
}
.ftm-filters .woocommerce-widget-layered-nav-list__item a:hover { color: var(--ftm-ink-muted); }
.ftm-filters .woocommerce-widget-layered-nav-list__item .count { color: var(--ftm-ink-subtle); font-size: var(--ftm-text-xs); }
.ftm-filters .woocommerce-widget-layered-nav-list__item--chosen a { font-weight: var(--ftm-weight-bold); box-shadow: inset 0 -2px 0 var(--ftm-accent); }
.ftm-filters__clear {
  display: inline-block;
  font-size: var(--ftm-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ftm-danger);
  text-decoration: none;
  align-self: start;
  min-height: 44px;
  padding-top: var(--ftm-space-3);
}

/* --- Mobile pass ---------------------------------------------------------
   Verified against 360 / 390 / 414px, the widths that cover most Android
   traffic in Sri Lanka. */
@media (max-width: 639.98px) {
  .ftm-listing-head {
    gap: var(--ftm-space-3);
    padding-bottom: var(--ftm-space-3);
    margin-bottom: var(--ftm-space-6);
  }
  .ftm-listing-head h1 { font-size: var(--ftm-text-xl); }
  /* Count and sorting take the full second row: side by side at 360px the
     select shrinks until its label truncates again. */
  .ftm-listing-head__right {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
  .woocommerce .woocommerce-ordering select { max-width: 60vw; }

  /* Cards: title and price stay legible, gutters stay honest at 360px. */
  ul.products li.product .ftm-card__title,
.woocommerce ul.products li.product .ftm-card__title { font-size: var(--ftm-text-base); }
  .ftm-card__franchise { font-size: 0.6875rem; }
  .woocommerce ul.products { gap: var(--ftm-space-6) var(--ftm-space-3); }

  /* PDP stacks; the gallery must not eat the whole first screen. */
  .woocommerce div.product .woocommerce-product-gallery { margin-bottom: var(--ftm-space-6); }
  .woocommerce div.product .product_title { font-size: var(--ftm-text-xl); }
  .woocommerce div.product p.price { font-size: var(--ftm-text-xl); }
  .ftm-pdp-specs th { width: 45%; }

  /* Full-width primary action, comfortably tappable. */
  .woocommerce div.product form.cart .button {
    width: 100%;
    min-height: 3.25rem;
  }
  .ftm-hero { min-height: 13rem; padding-block: var(--ftm-space-8); }
  .ftm-hero__heading { font-size: var(--ftm-text-xl); }
}

/* Grid children must be allowed to shrink below their content width, or a long
   product title forces the column wider than its track.
   Deliberately no `overflow-x: hidden` on body: it hides real overflow bugs
   rather than fixing them, and it breaks position: sticky. */
ul.products li.product, .woocommerce ul.products li.product { min-width: 0; }
.ftm-card__title { overflow-wrap: anywhere; }

/* Blocksy appends its own sort icon as an <svg> sibling after the select,
   which stacked below it and made the control 70px tall. Our select already
   carries an inline chevron, so its icon is redundant. */
.woocommerce .woocommerce-ordering { display: flex; align-items: center; }
.woocommerce .woocommerce-ordering > svg { display: none; }

/* On a 166px card "LKR 26,500 LKR 21,000" does not fit on one line. The
   current price leads and the struck original wraps beneath it, both flush
   left. */
.ftm-card__price ins,
.ftm-card__price .sale-price ins { order: 1; }
.ftm-card__price del,
.ftm-card__price .sale-price del { order: 2; font-size: var(--ftm-text-sm); margin-right: 0; }

/* --- Empty states --------------------------------------------------------- */
.ftm-empty {
  text-align: center;
  padding: var(--ftm-space-16) var(--ftm-gutter);
  max-width: 34rem;
  margin-inline: auto;
}
.ftm-empty__title {
  font-size: var(--ftm-text-2xl);
  font-weight: var(--ftm-weight-bold);
  margin: 0 0 var(--ftm-space-3);
}
.ftm-empty__text {
  color: var(--ftm-ink-muted);
  margin: 0 0 var(--ftm-space-8);
}

/* --- Bank transfer + waitlist forms --------------------------------------- */
.ftm-transfer {
  margin: var(--ftm-space-8) 0;
  padding: var(--ftm-space-6);
  background: var(--ftm-surface-alt);
  border-left: 3px solid var(--ftm-accent);
}
.ftm-transfer h2 { margin: 0 0 var(--ftm-space-3); font-size: var(--ftm-text-lg); }
.ftm-transfer__ref { margin: 0 0 var(--ftm-space-2); }
.ftm-transfer__ref strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--ftm-text-lg);
  background: var(--ftm-bg);
  padding: var(--ftm-space-1) var(--ftm-space-2);
}
.ftm-transfer__note,
.ftm-waitlist__consent { font-size: var(--ftm-text-sm); color: var(--ftm-ink-muted); margin: 0; }
.ftm-transfer__done { color: var(--ftm-success); font-weight: var(--ftm-weight-medium); margin: 0; }
.ftm-proof { margin-top: var(--ftm-space-4); display: flex; flex-direction: column; gap: var(--ftm-space-3); align-items: flex-start; }
.ftm-proof__label { font-size: var(--ftm-text-sm); font-weight: var(--ftm-weight-medium); }

.ftm-waitlist { margin: var(--ftm-space-6) 0; padding-top: var(--ftm-space-6); border-top: 1px solid var(--ftm-border); }
.ftm-waitlist__label { display: block; font-size: var(--ftm-text-sm); font-weight: var(--ftm-weight-medium); margin-bottom: var(--ftm-space-3); }
.ftm-waitlist__row { display: flex; gap: var(--ftm-space-2); flex-wrap: wrap; margin-bottom: var(--ftm-space-2); }
.ftm-waitlist__row input[type="email"] { flex: 1 1 14rem; min-height: 44px; }
.ftm-waitlist__row .button { min-height: 44px; }

/* --- Drop countdown ------------------------------------------------------- */
.ftm-drop {
  margin: var(--ftm-space-6) 0;
  padding: var(--ftm-space-4) var(--ftm-space-6);
  background: var(--ftm-nav-bg);
  color: var(--ftm-nav-ink);
}
.ftm-drop__label {
  margin: 0;
  font-size: var(--ftm-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ftm-accent);
  font-weight: var(--ftm-weight-bold);
}
.ftm-drop__time { margin: var(--ftm-space-1) 0 0; font-size: var(--ftm-text-lg); font-weight: var(--ftm-weight-medium); }
.ftm-deadline { font-size: var(--ftm-text-sm); color: var(--ftm-warning); }

/* --- Sorting control ------------------------------------------------------
   Measured, not guessed: something upstream pins this select to a fixed 40px
   while giving it 12px padding top and bottom around a 25.6px line box - 49.6px
   of content in a 40px box, which sliced the descenders off "Default sorting".
   `!important` on the height because a plain override kept losing to it. */
.woocommerce .woocommerce-ordering select.orderby,
.ftm-listing-head select.orderby,
.woocommerce-ordering select {
  height: auto !important;
  min-height: 2.75rem !important;
  line-height: 1.4 !important;
  padding: var(--ftm-space-2) var(--ftm-space-8) var(--ftm-space-2) var(--ftm-space-3) !important;
  font-size: var(--ftm-text-sm) !important;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--ftm-border);
  border-radius: 0;
  background-color: var(--ftm-bg);
  color: var(--ftm-ink);
  font-family: var(--ftm-font);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23262626' stroke-width='1.5' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ftm-space-3) center;
  text-overflow: ellipsis;
}
.woocommerce .woocommerce-ordering select:focus { border-color: var(--ftm-border-strong); }
.woocommerce .woocommerce-ordering { display: flex; align-items: center; margin: 0; }
.woocommerce .woocommerce-ordering > svg { display: none; }