/*
  Amethyst theme — component skin.

  The theme's own defaults for the shared storefront primitives, extracted from
  the per-component inline <style> blocks that used to ship in the body of
  templates/product_collection.html and templates/product_collections_set.html.
  Serving them once as a static sheet drops ~9 KB per listing render (and again
  per extra listing on the same page), but the real reason for the move is the
  cascade — see below.

  EVERYTHING HERE LIVES IN `@layer components`, DELIBERATELY.

  The prebuilt assets/css/tailwind.css declares the layer order
  `properties, theme, base, components, utilities`; layer names are
  document-global, so this file joins that `components` slot. That buys two
  properties the storefront depends on:

    1. Per-instance page-builder utilities (`@layer utilities`) beat these
       defaults automatically, with no specificity games — a component whose
       props emit `px-8` still wins over a `padding-inline` set here.
    2. Per-shop custom CSS (/assets/styles.css) is UNLAYERED, and unlayered
       rules beat every layered rule regardless of specificity. So a shop can
       restyle any of these with a plain single-class selector and no
       `!important`. That is the whole point: as inline <style> blocks in the
       body, these rules were unlayered AND last in document order, so they
       silently beat the shop's own stylesheet.

  Consequences for editing this file:
    - Never set a property here that a template also sets via a Tailwind
      utility on the same element — the utility is in a higher layer and will
      win. Thread a custom property through the utility instead
      (`px-[var(--x,1.5rem)]`), the way deck.html does for --deck-gap.
    - Keep it plain CSS with var() references. No @apply: that would require a
      build step, and this file is served straight off disk by Themer::asset
      (backend/src/theming.rs), which live-reloads under
      SOUQ_THEME_LIVE_RELOAD=true exactly like chrome.css.

  Dynamic per-instance values arrive as inline custom properties on the element
  (`--cols` from the listing enhancer, `--pcs-cols` from items_per_line), so
  nothing here needs templating.
*/
@layer components {
  /* ══ Product listing (product_collection.html) ═══════════════════════════
     Hooks are a documented contract with the <souq-product-listing> enhancer —
     see the header comment in that template. DO NOT rename .pc-* classes. */

  /* Grid / list layout — the enhancer toggles .pc-list and sets --cols. */
  .pc-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .pc-grid.pc-list { grid-template-columns: 1fr; gap: 1rem; }

  /* Card: borderless, image-forward. Column flex so bodies align across a row. */
  .pc-card { position: relative; display: flex; flex-direction: column; }
  .pc-media { position: relative; overflow: hidden; border-radius: var(--card-radius, var(--radius)); background: var(--card-media-bg, var(--surface-alt)); }
  .pc-grid:not(.pc-list) .pc-media { aspect-ratio: 1 / 1; }
  .pc-media-link { display: block; height: 100%; width: 100%; }
  .pc-media-link img { height: 100%; width: 100%; object-fit: contain; padding: 1.25rem; }
  .pc-body { display: block; color: inherit; text-decoration: none; }
  souq-listing-actions { display: block; width: 100%; }

  /* Categories + description are list-view only; the grid keeps its own optional
     (show_description-gated) description. */
  .pc-cats, .pc-desc-list { display: none; }

  /* GRID buy actions: overlay the image bottom, slide up on hover / focus, so the
     resting card stays clean (image · brand · name · price) like the reference. */
  .pc-grid:not(.pc-list) .pc-actions { position: absolute; left: .5rem; right: .5rem; bottom: .5rem; z-index: 2;
    opacity: 0; transform: translateY(.5rem); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
  .pc-grid:not(.pc-list) .pc-card:hover .pc-actions,
  .pc-grid:not(.pc-list) .pc-card:focus-within .pc-actions { opacity: 1; transform: none; pointer-events: auto; }
  @media (hover: none) { .pc-grid:not(.pc-list) .pc-actions { position: static; opacity: 1; transform: none; pointer-events: auto; margin-top: .75rem; } }

  /* LIST layout: image · info (name · price · categories · description) · a fixed
     right-side actions box. Actions live in .pc-media in the DOM; making the media
     non-positioned in list mode anchors the absolute box to the card instead. */
  .pc-grid.pc-list .pc-card { position: relative; flex-direction: row; align-items: center; gap: 1.5rem;
    border: var(--card-border-width, 1px) solid var(--card-border, var(--border)); border-radius: var(--card-radius, var(--radius)); padding: 1rem; padding-inline-end: 9.5rem; }
  .pc-grid.pc-list .pc-media { flex: 0 0 220px; width: 220px; aspect-ratio: 1; position: static; overflow: visible; }
  .pc-grid.pc-list .pc-body { flex: 1; }
  .pc-grid.pc-list .pc-cats { display: block; }
  .pc-grid.pc-list .pc-desc-list { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .pc-grid.pc-list .pc-desc-grid { display: none; }
  .pc-grid.pc-list .pc-actions { position: absolute; top: 50%; inset-inline-end: 1.25rem; transform: translateY(-50%); width: 8rem; opacity: 1; pointer-events: auto; z-index: 2; }

  @media (max-width: 639px) {
    .pc-grid:not(.pc-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
    /* Mobile grids are always 2-up (rule above), so extra column choices are
       noise: keep the list button + the first grid button only. */
    [data-sf-layout] .pc-layout-btn:not([data-layout="list"]) ~ .pc-layout-btn:not([data-layout="list"]) { display: none; }
    .pc-grid.pc-list .pc-card { flex-direction: column; align-items: stretch; padding-inline-end: 1rem; }
    .pc-grid.pc-list .pc-media { width: 100%; flex: none; aspect-ratio: 4 / 5; position: relative; overflow: hidden; }
    .pc-grid.pc-list .pc-actions { position: absolute; top: auto; bottom: .5rem; inset-inline: .5rem; transform: none; width: auto; }
  }

  /* Control bar: layout icons + Filter + Sort. */
  .pc-toolbar-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border: var(--listing-control-border-width, 1px) solid var(--btn-outline-border, var(--border)); border-radius: var(--listing-control-radius, var(--radius)); padding: .5rem .85rem; color: var(--btn-outline-text, var(--text));
    background: transparent; cursor: pointer; font-weight: 600; line-height: 1; transition: border-color .15s, background .15s, color .15s; }
  .pc-toolbar-btn:hover { border-color: color-mix(in srgb, var(--btn-outline-accent, var(--accent)) 45%, var(--btn-outline-border, var(--border))); }
  .pc-layout-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
    border: var(--listing-control-border-width, 1px) solid transparent; border-radius: var(--listing-control-radius, var(--radius)); color: color-mix(in srgb, var(--text) 55%, transparent);
    background: transparent; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
  .pc-layout-btn:hover { color: var(--text); border-color: var(--border); }
  .pc-layout-btn[aria-pressed="true"] { color: var(--listing-active-text, var(--accent-contrast)); background: var(--listing-active-bg, var(--accent)); border-color: var(--listing-active-bg, var(--accent)); }
  .pc-sort { border: var(--listing-control-border-width, 1px) solid var(--border); border-radius: var(--listing-control-radius, var(--radius)); background: transparent; color: var(--text);
    padding: .5rem 2rem .5rem .75rem; font: inherit; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .6rem center; }

  /* Filter drawer — an offcanvas panel that slides in from the left with a dimmed
     backdrop, opened by the Filter button (toggles .facets-open on the host). */
  .pc-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; }
  souq-product-listing.facets-open .pc-drawer { visibility: visible; }
  .pc-drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .3s ease; }
  souq-product-listing.facets-open .pc-drawer-backdrop { opacity: 1; }
  .pc-drawer-panel { position: absolute; inset-block: 0; left: 0; width: min(92vw, 400px);
    display: flex; flex-direction: column; background: var(--bg); color: var(--text);
    transform: translateX(-100%); transition: transform .3s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .18); }
  souq-product-listing.facets-open .pc-drawer-panel { transform: translateX(0); }
  .pc-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
  .pc-drawer-title { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; }
  .pc-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
    border: 0; border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; transition: background .15s; }
  .pc-drawer-close:hover { background: var(--surface-alt); }
  .pc-facets { flex: 1; overflow-y: auto; padding: .25rem 1.5rem 2rem; }

  /* Facet sections — the enhancer builds fieldset.pc-facet > legend + labels; the
     heading toggles the section (collapse), matching the reference accordion. */
  .pc-facets .pc-facet { border: 0; margin: 0; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
  .pc-facets .pc-facet:last-child { border-bottom: 0; }
  .pc-facets .pc-facet > legend { display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 0; margin: 0 0 .35rem; font-weight: 600; font-size: 1.05rem; color: var(--text); cursor: pointer; text-transform: capitalize; }
  .pc-facets .pc-facet > legend::after { content: ""; width: 9px; height: 9px; margin-bottom: 3px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg); transition: transform .2s ease; }
  .pc-facets .pc-facet.pc-facet--collapsed > legend::after { transform: rotate(45deg); margin-bottom: -3px; }
  .pc-facets .pc-facet.pc-facet--collapsed > *:not(legend) { display: none; }
  .pc-facets .pc-facet-opt { display: flex; align-items: center; gap: .6rem; padding: .32rem 0; font-size: .9rem; cursor: pointer; text-transform: capitalize; }
  .pc-facets .pc-facet-opt input[type="checkbox"] { flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--listing-accent, var(--accent)); cursor: pointer; }
  .pc-facets .pc-facet-count { color: var(--muted); font-size: .82rem; }
  /* Price range: a slider flanked by the live min / max values as text. */
  .pc-facets .pc-price-row { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; }
  .pc-facets .pc-price-val { flex: none; font-size: .85rem; font-weight: 600; color: var(--text); white-space: nowrap; }
  .pc-facets .pc-price-slider { position: relative; flex: 1 1 auto; height: 30px; }
  .pc-facets .pc-price-track { position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%); height: 4px; border-radius: 999px; background: var(--border); }
  .pc-facets .pc-price-fill { position: absolute; inset-block: 0; border-radius: 999px; background: var(--listing-accent, var(--accent)); }
  .pc-facets .pc-price-range { position: absolute; inset-inline: 0; top: 0; width: 100%; height: 30px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
  .pc-facets .pc-price-range::-webkit-slider-runnable-track { background: transparent; border: 0; }
  .pc-facets .pc-price-range::-moz-range-track { background: transparent; border: 0; }
  .pc-facets .pc-price-range::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--listing-accent, var(--accent)); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
  .pc-facets .pc-price-range::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--listing-accent, var(--accent)); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }

  /* Pagination — the enhancer renders .pc-page[data-page][aria-current]. */
  .pc-page { min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem; display: inline-flex; align-items: center; justify-content: center;
    border: var(--listing-control-border-width, 1px) solid var(--border); border-radius: var(--listing-control-radius, var(--radius)); background: transparent; color: var(--text); cursor: pointer;
    font-weight: 600; transition: border-color .15s, background .15s, color .15s; }
  .pc-page:hover { border-color: color-mix(in srgb, var(--listing-active-bg, var(--accent)) 45%, var(--border)); }
  .pc-page[aria-current="page"] { background: var(--listing-active-bg, var(--accent)); color: var(--listing-active-text, var(--accent-contrast)); border-color: var(--listing-active-bg, var(--accent)); }

  /* ══ Curated collection block (product_collections_set.html) ══════════════
     Reuses .pc-card, but renders its own plain grid — no enhancer, no facets. */

  /* `display: grid` is declared HERE rather than via a `grid` utility on the
     element. It used to ride along as a class, but once these rules moved into
     @layer components the utilities-layer `.grid { display: grid }` outranked
     the mobile override below (layers beat media queries), silently killing the
     swipe carousel under 640px. Owning the property here keeps both states in
     the same layer, where source order decides. */
  .pcs-grid { display: grid; grid-template-columns: repeat(var(--pcs-cols, 4), minmax(0, 1fr)); }
  /* Mobile: turn the grid into a horizontal swipeable carousel. */
  @media (max-width: 639px) {
    .pcs-grid {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .pcs-grid::-webkit-scrollbar { display: none; }
    .pcs-grid > .pc-card {
      flex: 0 0 60%;
      max-width: 60%;
      scroll-snap-align: start;
    }
  }
}