/* ------------------------------------------------------------
 * Instant archive: search box, per-page choice, swap state.
 * Loaded on archive layouts only.
 * ------------------------------------------------------------ */

/* ---- Swap state -------------------------------------------------
 * The old results stay on screen, dimmed, until the new ones arrive.
 * Blanking the column first would make a fast swap feel like a page load,
 * which is the thing this is meant to remove.
 * ---------------------------------------------------------------- */

@media (min-width: 783px) {
  [data-ff-archive-inner] { position: relative; }

  [data-ff-archive-inner].is-ff-loading { pointer-events: none; }

  [data-ff-archive-inner].is-ff-loading .fotofile-v2-archive__main {
    opacity: 0.45;
    transition: opacity 0.12s ease;
  }

  [data-ff-archive-inner].is-ff-loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--fotofile-v2-accent);
    animation: ff-archive-bar 0.9s ease-in-out infinite;
  }

  @keyframes ff-archive-bar {
    0%   { transform: scaleX(0);   transform-origin: left; }
    50%  { transform: scaleX(1);   transform-origin: left; }
    51%  { transform: scaleX(1);   transform-origin: right; }
    100% { transform: scaleX(0);   transform-origin: right; }
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-ff-archive-inner].is-ff-loading::after { animation: none; transform: scaleX(1); }
  [data-ff-archive-inner].is-ff-loading .fotofile-v2-archive__main { transition: none; }
}


/* ============================================================
 * Price-list layer - DESKTOP ONLY.
 *
 * Everything this layer adds is hidden by default and only switched on from
 * 783px, the breakpoint the theme already uses. Below it the archive keeps the
 * app feed, the chips and the card grid it has today: no new markup shows, no
 * existing rule is overridden, nothing moves.
 * ============================================================ */

.fotofile-v2-pl-bar,
.fotofile-v2-pl-results,
.fotofile-v2-pl-chips,
.fotofile-v2-archive__rail,
.fotofile-v2-pl-sku,
.fotofile-v2-pl-stock,
.fotofile-v2-pl-badge,
.fotofile-v2-pl-view,
.fotofile-v2-pl-promises { display: none; }

@media (min-width: 783px) {

  /* ---- Three columns: categories, products, filters ---- */

  .fotofile-v2-woocommerce .fotofile-v2-archive__sidebar { width: 210px; }

  .fotofile-v2-woocommerce .fotofile-v2-archive__inner {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .fotofile-v2-archive__rail { display: none; }

  .fotofile-v2-pl-bar { display: block; }

  /* ---- Result header ---- */

  .fotofile-v2-pl-results {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 14px;
  }

  .fotofile-v2-pl-results__count {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
  }

  .fotofile-v2-pl-results__count strong { font-size: 1rem; }

  .fotofile-v2-pl-results__count span {
    color: var(--fotofile-v2-muted);
    font-size: 0.85rem;
  }

  /* ---- Pager ---- */

  .fotofile-v2-pl-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .fotofile-v2-pl-pager .page-numbers {
    display: inline-grid;
    min-width: 32px;
    height: 32px;
    place-items: center;
    padding: 0 9px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: var(--fotofile-v2-radius-sm);
    background: var(--fotofile-v2-surface);
    font-size: 0.85rem;
    text-decoration: none;
  }

  .fotofile-v2-pl-pager .page-numbers.current {
    border-color: var(--fotofile-v2-accent);
    background: var(--fotofile-v2-accent);
    color: #fff;
    font-weight: 700;
  }

  .fotofile-v2-pl-pager .page-numbers.dots {
    border-color: transparent;
    background: transparent;
  }

  /* ---- Active filter chips ---- */

  .fotofile-v2-pl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .fotofile-v2-pl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: 999px;
    background: var(--fotofile-v2-surface);
    font-size: 0.8rem;
    text-decoration: none;
  }

  .fotofile-v2-pl-chip:hover {
    border-color: var(--fotofile-v2-accent);
    color: var(--fotofile-v2-accent);
  }

  .fotofile-v2-pl-chip__x {
    color: var(--fotofile-v2-ink-soft);
    font-size: 1rem;
    line-height: 1;
  }

  .fotofile-v2-pl-chips__clear {
    font-size: 0.8rem;
    color: var(--fotofile-v2-accent);
    text-decoration: none;
  }

  /* ---- Card: SKU and stock ---- */

  .fotofile-v2-pl-sku {
    display: block;
    margin-top: 2px;
    color: var(--fotofile-v2-ink-soft);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
  }

  .fotofile-v2-pl-stock {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .fotofile-v2-pl-stock.is-in { color: #1f9254; }
  .fotofile-v2-pl-stock.is-out { color: var(--fotofile-v2-ink-soft); }

  /* ---- Right rail panels ---- */

  .fotofile-v2-pl-brands {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
  }

  .fotofile-v2-pl-brands a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    text-decoration: none;
  }

  .fotofile-v2-pl-brands a:hover .fotofile-v2-pl-brands__name { color: var(--fotofile-v2-accent); }

  .fotofile-v2-pl-brands__count { color: var(--fotofile-v2-ink-soft); }
}

/* ============================================================
 * The one control bar - DESKTOP ONLY.
 *
 * The theme toolbar, the app feed and WooCommerce's own result count and
 * ordering are still printed, for mobile, and hidden here. That is why the
 * desktop page shows one of each control instead of two.
 * ============================================================ */

@media (min-width: 783px) {

  .fotofile-v2-woocommerce .fotofile-v2-archive__main .fotofile-v2-commerce-feed,
  .fotofile-v2-woocommerce .fotofile-v2-archive__main .fotofile-v2-archive-services,
  .fotofile-v2-woocommerce .fotofile-v2-archive__main .fotofile-v2-archive-toolbar,
  .fotofile-v2-woocommerce .fotofile-v2-archive__main .woocommerce-result-count,
  .fotofile-v2-woocommerce .fotofile-v2-archive__main .woocommerce-ordering { display: none; }

  .fotofile-v2-pl-bar__row--find {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }

  .fotofile-v2-pl-bar__find { flex: 1 1 340px; min-width: 0; }

  .fotofile-v2-pl-bar__find form { display: flex; gap: 8px; }

  .fotofile-v2-pl-bar__find .fotofile-v2-archive-find__input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: var(--fotofile-v2-radius-sm);
    background: var(--fotofile-v2-surface);
    font-size: 0.95rem;
  }

  .fotofile-v2-pl-bar__find .fotofile-v2-archive-find__input:focus {
    outline: none;
    border-color: var(--fotofile-v2-accent);
    box-shadow: 0 0 0 3px rgba(238, 77, 45, 0.12);
  }

  .fotofile-v2-pl-bar__find .fotofile-v2-archive-find__submit {
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--fotofile-v2-radius-sm);
    background: var(--fotofile-v2-accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
  }

  .fotofile-v2-pl-bar__sort {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
  }

  .fotofile-v2-pl-bar__sort-label { color: var(--fotofile-v2-muted); }

  .fotofile-v2-pl-bar__select {
    height: 40px;
    min-width: 168px;
    padding: 0 12px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: var(--fotofile-v2-radius-sm);
    background: var(--fotofile-v2-surface);
    font-size: 0.88rem;
  }

  .fotofile-v2-pl-bar__views {
    display: flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: var(--fotofile-v2-radius-sm);
    background: var(--fotofile-v2-surface);
  }

  .fotofile-v2-pl-bar__view {
    display: grid;
    width: 36px;
    height: 32px;
    place-items: center;
    border-radius: 6px;
    color: var(--fotofile-v2-muted);
  }

  .fotofile-v2-pl-bar__view.is-active {
    background: var(--fotofile-v2-accent);
    color: #fff;
  }

  .fotofile-v2-pl-bar__view-icon {
    width: 14px;
    height: 14px;
    background-image:
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
  }

  .fotofile-v2-pl-bar__view--grid .fotofile-v2-pl-bar__view-icon {
    background-size: 6px 6px;
    background-position: 0 0, 8px 0, 0 8px, 8px 8px;
  }

  .fotofile-v2-pl-bar__view--list .fotofile-v2-pl-bar__view-icon {
    background-size: 14px 2px;
    background-position: 0 0, 0 4px, 0 8px, 0 12px;
  }

  .fotofile-v2-pl-bar .fotofile-v2-pl-chips { margin-bottom: 10px; }
}


/* ============================================================
 * Price-list layout, part 2 - DESKTOP ONLY.
 *
 * The cage came first: the archive was capped at 1200px, so with two rails the
 * product column had 710px and five cards were 131px wide. Widening the archive
 * container is what makes every other measurement here possible.
 * ============================================================ */

@media (min-width: 1280px) {

  /* Only the archive's own main element - the header and footer containers,
     which share this class, keep the 1200px they were designed for. */
  main.fotofile-v2-woocommerce.fotofile-v2-container {
    width: min(100% - 32px, 2400px);
  }

  .fotofile-v2-woocommerce .fotofile-v2-archive__inner {
    grid-template-columns: 220px minmax(0, 1fr) 250px;
    gap: 28px;
  }

  .fotofile-v2-archive__rail {
    display: block;
    position: sticky;
    top: 12px;
    align-self: start;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  .fotofile-v2-archive__rail .fotofile-v2-archive-panel {
    margin: 0 0 14px;
    padding: 14px;
    background: var(--fotofile-v2-surface);
    border: 1px solid var(--fotofile-v2-line);
    border-radius: var(--fotofile-v2-radius);
  }

  /*
   * Cards size themselves to the column instead of being counted out against
   * the viewport, which is what produced five 131px cards on a 1600px screen.
   *
   * The `body` and the second :not() are here to match the specificity of
   * theme.css's `body.archive .fotofile-v2-woocommerce ul.products:not():not()`,
   * which pins five columns from 1024px and was silently winning: measured five
   * 228px cards on a 1194px column where six should have fitted.
   */
  body .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender):not(.fotofile-v2-products-rail) {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  /* One filter panel, in the right rail. The left rail is navigation only:
     categories and the store's promises. The same panel in both rails is the
     duplication this layout was meant to remove. */
  .fotofile-v2-archive__sidebar .fotofile-v2-archive-filters { display: none; }
}

@media (min-width: 783px) {

  /* ---- One paging mechanism, not three ---- */

  .fotofile-v2-woocommerce .fotofile-v2-archive__main .fotofile-v2-feed-sentinel,
  .fotofile-v2-woocommerce .fotofile-v2-archive__main .woocommerce-pagination { display: none; }

  /* ---- Control rows ---- */

  .fotofile-v2-pl-bar__row--find { flex-wrap: nowrap; }

  .fotofile-v2-pl-bar__find { flex: 1 1 auto; }

  .fotofile-v2-pl-bar__sort { flex: 0 0 auto; margin-left: auto; }

  .fotofile-v2-pl-bar__views { flex: 0 0 auto; }

  .fotofile-v2-pl-bar__row--filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
  }

  .fotofile-v2-pl-field {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
  }

  .fotofile-v2-pl-field__label { color: var(--fotofile-v2-muted); white-space: nowrap; }

  .fotofile-v2-pl-select {
    height: 38px;
    min-width: 148px;
    padding: 0 12px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: var(--fotofile-v2-radius-sm);
    background: var(--fotofile-v2-surface);
    font-size: 0.86rem;
  }

  .fotofile-v2-pl-clear {
    color: var(--fotofile-v2-muted);
    font-size: 0.83rem;
    text-decoration: none;
  }

  .fotofile-v2-pl-clear:hover { color: var(--fotofile-v2-accent); }

  /* ---- Left rail: dark, like the reference ---- */

  .fotofile-v2-woocommerce .fotofile-v2-archive__sidebar {
    padding: 16px 14px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: var(--fotofile-v2-radius);
    background: var(--fotofile-v2-surface);
    color: var(--fotofile-v2-ink);
  }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-panel__title { color: var(--fotofile-v2-ink); }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-panel__all { color: var(--fotofile-v2-accent); }

  .fotofile-v2-archive__sidebar a { color: var(--fotofile-v2-ink); }

  .fotofile-v2-archive__sidebar a:hover { color: var(--fotofile-v2-accent); }

  /* Parent rows carry their own muted colour from theme.css, which was almost
     unreadable on the dark rail. Pin it to a real text colour. */
  .fotofile-v2-archive__sidebar summary,
  .fotofile-v2-archive__sidebar summary * { color: var(--fotofile-v2-ink); }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-cats a {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    text-decoration: none;
  }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-cats a:hover { background: rgba(17, 17, 17, 0.05); }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-cats a[aria-current],
  .fotofile-v2-archive__sidebar .fotofile-v2-archive-cats .is-current > a {
    background: #c93a17;
    color: #fff;
    font-weight: 600;
  }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-cats a[aria-current]:hover,
  .fotofile-v2-archive__sidebar .fotofile-v2-archive-cats .is-current > a:hover {
    background: #c93a17;
    color: #fff;
  }

  /* ---- The promises box under the categories ---- */

  .fotofile-v2-pl-promises {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding: 14px;
    border-radius: var(--fotofile-v2-radius);
    background: var(--fotofile-v2-tile);
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .fotofile-v2-pl-promise {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--fotofile-v2-ink);
  }

  .fotofile-v2-pl-promise__tick {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    border-radius: 50%;
    background: #e3f3e9;
    position: relative;
  }

  .fotofile-v2-pl-promise__tick::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    width: 4px;
    height: 7px;
    border: solid #1f9254;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  /* ---- Card: badge and the view button ---- */

  .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products li.product { position: relative; }

  .fotofile-v2-pl-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
  }

  .fotofile-v2-pl-badge.is-new { background: #3b6ef5; }
  .fotofile-v2-pl-badge.is-hot { background: #f0a01e; }

  .fotofile-v2-pl-view {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: var(--fotofile-v2-radius-sm);
    color: var(--fotofile-v2-ink);
    font-size: 0.82rem;
    text-decoration: none;
  }

  .fotofile-v2-pl-view:hover {
    border-color: var(--fotofile-v2-accent);
    color: var(--fotofile-v2-accent);
  }

  .fotofile-v2-pl-view__eye {
    width: 14px;
    height: 9px;
    border: 1.5px solid currentColor;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
  }

  .fotofile-v2-pl-view__eye::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1.5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
  }
}

/* ============================================================
 * Density pass - DESKTOP ONLY.
 *
 * Every value below was set by injecting it into the live page, measuring the
 * result, and only then writing it down. The long selector prefix is not
 * decoration: theme.css styles these cards through
 * `.fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not():not()`,
 * which outranks a shorter selector no matter how late it loads. Two earlier
 * attempts here changed nothing on screen for exactly that reason.
 * ============================================================ */

@media (min-width: 1280px) {

  /* ---- Card: nine to a row means the type has to shrink with it ----
     At 139px wide the card was 332px tall, and the price was rendering LARGER
     than the product name - the hierarchy was upside down. */

  body .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product {
    padding-bottom: 10px;
  }

  body .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: 6px 0 2px;
    font-size: 12px;
    line-height: 1.35;
  }

  body .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .price {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.3;
  }

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

  body .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .fotofile-v2-pl-stock {
    margin-top: 2px;
    font-size: 11px;
  }

  body .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .fotofile-v2-pl-view {
    margin-top: 7px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .fotofile-v2-pl-sku { font-size: 10px; }

  /* ---- Left rail: the whole list, no scrollbar ----
     54 links at 32px needed 1034px of a 1056px rail, so any shorter screen
     scrolled. At 26px the list needs 804px and fits. */

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-cats a {
    padding: 4px 9px;
    font-size: 11.5px;
  }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-panel__title { font-size: 13px; }

  .fotofile-v2-pl-promises {
    gap: 7px;
    margin-top: 12px;
    padding: 11px;
    font-size: 11px;
  }

  /* ---- Top bar: one control height, real space between rows ----
     Rows were 44 / 38 / 32px tall with 10px between them and three different
     control heights, which is what made it read as a pile. */

  .fotofile-v2-pl-bar__row--find {
    gap: 14px;
    margin-bottom: 14px;
  }

  .fotofile-v2-pl-bar__find .fotofile-v2-archive-find__input,
  .fotofile-v2-pl-bar__find .fotofile-v2-archive-find__submit,
  .fotofile-v2-pl-select { height: 40px; }

  .fotofile-v2-pl-bar__views { padding: 4px; }

  .fotofile-v2-pl-bar__view {
    width: 38px;
    height: 32px;
  }

  .fotofile-v2-pl-bar__row--filters {
    gap: 18px;
    margin-bottom: 16px;
  }

  .fotofile-v2-pl-results {
    padding-top: 14px;
    border-top: 1px solid var(--fotofile-v2-line);
  }
}

/* ============================================================
 * Card proportions - DESKTOP ONLY.
 *
 * Eight to a row makes the card 158px wide. With a square thumbnail it came out
 * 319px tall - a 2:1 column of mostly photograph. Cropping to 4:3 gives the
 * height back without losing any of the picture: object-fit is `contain`, so a
 * portrait product is letterboxed rather than cut. Measured after: 158x277.
 * ============================================================ */

@media (min-width: 1280px) {

  body .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .woocommerce-LoopProduct-link img {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: contain;
    background: #fff;
  }

  body .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .fotofile-v2-pl-view {
    margin-top: 6px;
    padding: 5px 8px;
  }
}

/* ============================================================
 * Finish pass - DESKTOP ONLY.
 *
 * The control bar was 668px wide inside a 1347px column: theme.css sets
 * .fotofile-v2-archive__main to `display:flex; flex-direction:row`, so the bar
 * was a flex item sized to its content and everything crowded into the left
 * half with dead space beside it. That, not the spacing, is what made the top
 * read as a pile. Stacking the column fixes it; the search field goes from
 * 239px to 880px on its own.
 *
 * Everything here is CSS: no image, no webfont, no script. The only motion is a
 * shadow on card hover.
 * ============================================================ */

@media (min-width: 1280px) {

  .fotofile-v2-woocommerce .fotofile-v2-archive__main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* Seven to a row: a 180px card carries a Thai product name without shrinking
     the type to the point where the price list stops being readable. */
  body .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender):not(.fotofile-v2-products-rail) {
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 14px;
    /* Rows size independently by default, so a row whose product names all
       fit on one line came out 17px shorter than its neighbour and the
       chip below moved with it. 1fr makes every row match the tallest. */
    grid-auto-rows: 1fr;
  }

  /* Seven to a row, pinned. The auto-fill rule above only reaches seven when
     the product column happens to exceed ~1330px; measured at a 1920 viewport it
     produced six, which left the 28-product page as four rows plus a ragged
     four. Pinning the count keeps the promised 4x7 grid. Below this width seven
     cards would fall under 140px, so auto-fill still governs there. */
  @media (min-width: 1700px) {
    body .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.eael-post-appender):not(.fotofile-v2-products-rail) {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
  }

  /* ---- The bar is a panel, not loose controls ---- */

  .fotofile-v2-pl-bar {
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: 12px;
    background: var(--fotofile-v2-surface);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
  }

  .fotofile-v2-pl-bar__find { flex: 1 1 auto; }

  .fotofile-v2-pl-bar__row--find {
    margin-bottom: 0;
    padding-bottom: 14px;
  }

  .fotofile-v2-pl-bar__row--filters {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
  }

  .fotofile-v2-pl-field__label { font-size: 12px; }

  .fotofile-v2-pl-select,
  .fotofile-v2-pl-bar__find .fotofile-v2-archive-find__input,
  .fotofile-v2-pl-bar__find .fotofile-v2-archive-find__submit { border-radius: 9px; }

  .fotofile-v2-pl-results {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
  }

  .fotofile-v2-pl-results__count strong { font-size: 1.05rem; }

  /* ---- Sidebar: hierarchy instead of a flat list ---- */

  .fotofile-v2-woocommerce .fotofile-v2-archive__sidebar {
    padding: 18px 14px;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
  }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-panel__head {
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fotofile-v2-line);
  }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-panel__title {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fotofile-v2-muted);
  }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-cats a {
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    line-height: 1.3;
  }

  /* Parent rows read as parents: heavier, same rhythm. */
  .fotofile-v2-archive__sidebar summary {
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
  }

  .fotofile-v2-archive__sidebar summary:hover { background: rgba(17, 17, 17, 0.04); }

  .fotofile-v2-pl-promises {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    background: #fafafa;
    font-size: 11.5px;
  }

  /* ---- Card is a card ---- */

  body .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products li.product {
    padding: 10px 10px 12px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: 12px;
    background: var(--fotofile-v2-surface);
    transition: box-shadow 0.16s ease, border-color 0.16s ease;
  }

  body .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products li.product:hover {
    border-color: #ddd;
    box-shadow: 0 4px 14px rgba(17, 17, 17, 0.07);
  }

  @media (prefers-reduced-motion: reduce) {
    body .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products li.product { transition: none; }
  }
}

/* One chip list, not two.
 *
 * The bar and the right rail were both printing the active filters, so a
 * category showed as "Video x" twice on the same screen. The rail owns them
 * wherever the rail is on screen; below that width the bar keeps them, because
 * the rail is hidden there and the chips would otherwise vanish. */
@media (min-width: 1280px) {
  .fotofile-v2-pl-bar .fotofile-v2-pl-chips { display: none; }
}

/* Shortcuts, account box and the shortcut nav are desktop-only like the rest. */
.fotofile-v2-pl-shortcuts,
.fotofile-v2-pl-account { display: none; }

/* ============================================================
 * Owner pass - DESKTOP ONLY (1280px and up).
 *
 * The site header is hidden on this layout, so account and cart move into the
 * rail rather than disappearing. Below 1280px the header is untouched and the
 * whole block is inert: the phone gets exactly the page it had.
 * ============================================================ */

@media (min-width: 1280px) {

  /* ---- Header off, on product archives only ---- */

  body.woocommerce-shop .fotofile-v2-site-header,
  body.tax-product_cat .fotofile-v2-site-header,
  body.post-type-archive-product .fotofile-v2-site-header { display: none; }

  body.woocommerce-shop main.fotofile-v2-woocommerce,
  body.tax-product_cat main.fotofile-v2-woocommerce,
  body.post-type-archive-product main.fotofile-v2-woocommerce { padding-top: 18px; }

  /* ---- One row: search, brand, price, clear | sort, view ---- */

  .fotofile-v2-pl-bar__row--find { flex-wrap: wrap; }

  .fotofile-v2-pl-bar__find { flex: 1 1 260px; }

  .fotofile-v2-pl-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  .fotofile-v2-pl-select { min-width: 132px; }

  /* ---- Account and cart, at the top of the rail ---- */

  .fotofile-v2-pl-account {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
  }

  .fotofile-v2-pl-account__link {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: 9px;
    background: var(--fotofile-v2-surface);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
  }

  .fotofile-v2-pl-account__link:hover {
    border-color: var(--fotofile-v2-accent);
    color: var(--fotofile-v2-accent);
  }

  .fotofile-v2-pl-account__link--cart {
    border-color: var(--fotofile-v2-accent);
    background: var(--fotofile-v2-accent);
    color: #fff;
  }

  .fotofile-v2-pl-account__link--cart:hover {
    background: #d8431f;
    border-color: #d8431f;
    color: #fff;
  }

  .fotofile-v2-pl-account__count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
  }

  /* ---- Shortcut links above the category tree ---- */

  .fotofile-v2-pl-shortcuts {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--fotofile-v2-line);
  }

  .fotofile-v2-pl-shortcut {
    display: block;
    padding: 8px 10px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
  }

  .fotofile-v2-pl-shortcut:hover { border-color: var(--fotofile-v2-accent); }

  .fotofile-v2-pl-shortcut--deal { color: var(--fotofile-v2-accent); }

  .fotofile-v2-pl-shortcut.is-active {
    border-color: #c93a17;
    background: #c93a17;
    color: #fff;
  }
}

/* Home link and the moved result bar are desktop-only like the rest. */
.fotofile-v2-pl-home,
.fotofile-v2-pl-resultsbar { display: none; }

/* ============================================================
 * Colour pass - DESKTOP ONLY (1280px and up).
 * ============================================================ */

@media (min-width: 1280px) {

  /* ---- 4. Page ground ---- */

  body.woocommerce-shop,
  body.tax-product_cat,
  body.post-type-archive-product { background: #e9e5d7; }

  /* ---- 3. Both rails dark ---- */

  .fotofile-v2-woocommerce .fotofile-v2-archive__sidebar,
  .fotofile-v2-archive__rail .fotofile-v2-archive-panel,
  .fotofile-v2-pl-account__link {
    border-color: rgba(255, 255, 255, 0.09);
    background: #001e19;
    color: #eef3f1;
  }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-panel__head,
  .fotofile-v2-pl-shortcuts { border-bottom-color: rgba(255, 255, 255, 0.12); }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-panel__title,
  .fotofile-v2-archive__rail .fotofile-v2-archive-panel__title { color: rgba(238, 243, 241, 0.62); }

  .fotofile-v2-archive__sidebar a,
  .fotofile-v2-archive__rail a,
  /* Parent rows inherit a muted grey from theme.css that vanishes on this
     ground, so they are pinned to a real colour. */
  .fotofile-v2-archive__sidebar summary,
  .fotofile-v2-archive__sidebar summary * { color: #eef3f1; }

  .fotofile-v2-archive__sidebar a:hover,
  .fotofile-v2-archive__rail a:hover { color: #fff; }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-cats a:hover,
  .fotofile-v2-archive__sidebar summary:hover { background: rgba(255, 255, 255, 0.07); }

  .fotofile-v2-archive__sidebar .fotofile-v2-archive-cats a[aria-current],
  .fotofile-v2-archive__sidebar .fotofile-v2-archive-cats .is-current > a,
  .fotofile-v2-pl-shortcut.is-active {
    background: var(--fotofile-v2-accent);
    border-color: var(--fotofile-v2-accent);
    color: #fff;
  }

  .fotofile-v2-pl-shortcut,
  .fotofile-v2-pl-home { border-color: rgba(255, 255, 255, 0.16); }

  .fotofile-v2-pl-brands__count { color: rgba(238, 243, 241, 0.55); }

  .fotofile-v2-archive__rail input[type="text"],
  .fotofile-v2-archive__rail input[type="number"] {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #eef3f1;
  }

  .fotofile-v2-pl-promises {
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.05);
  }

  .fotofile-v2-pl-promise { color: rgba(238, 243, 241, 0.88); }

  .fotofile-v2-pl-promise__tick { background: rgba(255, 255, 255, 0.12); }

  .fotofile-v2-pl-account__link--cart {
    border-color: var(--fotofile-v2-accent);
    background: var(--fotofile-v2-accent);
    color: #fff;
  }

  /* ---- 2. Back to the front page ---- */

  .fotofile-v2-pl-home {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
  }

  .fotofile-v2-pl-home:hover { border-color: var(--fotofile-v2-accent); }

  .fotofile-v2-pl-home__arrow {
    width: 7px;
    height: 7px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  /* ---- 5. Result line and pager, under the grid ---- */

  .fotofile-v2-pl-resultsbar {
    display: block;
    /* __main is a flex column and the product grid carries order:40, so
       coming after it in the DOM is not enough - measured this rendering
       above the grid before the order was set. */
    order: 60;
    margin-top: 18px;
    padding: 14px 18px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: 12px;
    background: var(--fotofile-v2-surface);
  }

  .fotofile-v2-pl-resultsbar .fotofile-v2-pl-results {
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* ---- 1. "ส่งฟรี" stops moving ----
     The chip sat wherever the copy above it ended, so it landed at a different
     height on every card - product names run to one line or three, and only
     some products carry a SKU. Pushing it to the foot of the link gives every
     card the same anchor. */

  /*
   * The :not() chain is required, not decorative. An earlier rule in this same
   * file pins `margin: 3px 0 0` on the chip through that longer selector, so a
   * shorter `margin-top: auto` here loses to it and nothing moves - measured
   * exactly that on the live page before this was corrected. Same weight, later
   * in the file, wins. `margin: auto 0 0` also beats the shorthand outright.
   */
  body .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;
  }

  body .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .woocommerce-LoopProduct-link {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  body .fotofile-v2-woocommerce .fotofile-v2-archive__main ul.products:not(.fotofile-v2-products--list):not(.eael-post-appender) li.product .fotofile-v2-card-meta {
    margin: auto 0 0;
    padding-top: 6px;
  }
}

/* The blog rail is desktop-only like everything else here. */
.fotofile-v2-pl-blog { display: none; }

/* ============================================================
 * Controls in the rail, articles on top - DESKTOP ONLY.
 *
 * The right rail widens to 300px: a search field is the widest control moved
 * into it, and at 250px it would have been too narrow to read a product name in.
 * ============================================================ */

@media (min-width: 1280px) {

  .fotofile-v2-woocommerce .fotofile-v2-archive__inner {
    grid-template-columns: 220px minmax(0, 1fr) 300px;
  }

  /* ---- The bar, stacked, inside the rail ---- */

  .fotofile-v2-pl-bar--rail {
    margin-bottom: 14px;
    padding: 14px;
    border-color: rgba(255, 255, 255, 0.09);
    background: #001e19;
    box-shadow: none;
  }

  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-bar__row--find {
    display: grid;
    gap: 10px;
    padding-bottom: 0;
  }

  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-bar__find,
  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-filters,
  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-bar__sort { display: grid; gap: 10px; }

  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-bar__find form { display: grid; gap: 8px; }

  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-field { display: grid; gap: 4px; }

  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-field__label,
  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-bar__sort-label { color: rgba(238, 243, 241, 0.62); }

  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-select,
  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-bar__select,
  .fotofile-v2-pl-bar--rail .fotofile-v2-archive-find__input {
    width: 100%;
    min-width: 0;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #eef3f1;
  }

  .fotofile-v2-pl-bar--rail .fotofile-v2-archive-find__input::placeholder { color: rgba(238, 243, 241, 0.45); }

  /* The horizontal bar sized its own children with fixed track widths
     (a 270px find row, a 140px sort select). Switching the rail copy to
     display:grid was not enough - those tracks survived, so the sort block
     came out 181px wide next to a 350px view toggle. Measured exactly that
     before these resets. */
  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-bar__row--find,
  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-bar__find,
  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-filters,
  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-bar__sort {
    grid-template-columns: minmax(0, 1fr);
  }

  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-bar__row--find > *,
  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-bar__sort > * {
    width: 100%;
    min-width: 0;
  }

  /* The base toggle sits on a white pill, which reads as a bright slab once
     the bar is on the dark rail. */
  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-bar__views {
    justify-content: center;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
  }

  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-bar__view { color: rgba(238, 243, 241, 0.75); }

  /* Chips keep a white pill from the base sheet. On the dark rail the label
     inherited #eef3f1 and went invisible on white - measured white-on-white. */
  .fotofile-v2-archive__rail .fotofile-v2-pl-chip {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.10);
    color: #eef3f1;
  }

  .fotofile-v2-pl-bar--rail .fotofile-v2-pl-clear { color: rgba(238, 243, 241, 0.7); }

  /* ---- Articles, where the controls used to be ---- */

  /* One band shaped like the news table the owner pointed at: the two newest
     posts as cards on the left, the rest as a dense headline list on the right. */
  .fotofile-v2-pl-blog {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid var(--fotofile-v2-line);
    border-radius: 12px;
    background: var(--fotofile-v2-surface);
  }

  .fotofile-v2-pl-blog__lead {
    display: grid;
    gap: 8px;
    align-content: center;
    padding: 12px 14px;
    border-right: 1px solid var(--fotofile-v2-line);
    background: rgba(0, 30, 25, 0.04);
  }

  .fotofile-v2-pl-blog__card {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
    text-decoration: none;
  }

  .fotofile-v2-pl-blog__thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--fotofile-v2-tile);
  }

  .fotofile-v2-pl-blog__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .fotofile-v2-pl-blog__text { min-width: 0; }

  .fotofile-v2-pl-blog__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
  }

  .fotofile-v2-pl-blog__card:hover .fotofile-v2-pl-blog__name { color: var(--fotofile-v2-accent); }

  .fotofile-v2-pl-blog__date {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--fotofile-v2-muted);
  }

  /* Headlines, two columns so the band stays short above the grid. */
  .fotofile-v2-pl-blog__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 2px 22px;
    padding: 10px 16px;
  }

  .fotofile-v2-pl-blog__row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    min-width: 0;
    padding: 3px 0;
    font-size: 12.5px;
    line-height: 1.45;
    text-decoration: none;
  }

  .fotofile-v2-pl-blog__row-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .fotofile-v2-pl-blog__row:hover .fotofile-v2-pl-blog__row-name { color: var(--fotofile-v2-accent); }

  .fotofile-v2-pl-blog__row-date {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--fotofile-v2-muted);
  }

  .fotofile-v2-pl-blog__more {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fotofile-v2-accent);
    text-decoration: none;
  }

}