/* ==========================================================================
   products-grid — Προϊόντα catalogue page
   Loaded only on pages that render the products-grid widget.

   All visual values derive from Arch tokens / Site Settings. The overrides
   below are scoped local exceptions required by the approved products-page
   mockup: uncropped product photography, the category sidebar rows, and the
   compact banner intro staying on the global grid.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page composition — compact banner intro (first widget on this page)
   -------------------------------------------------------------------------- */

/* The banner injects its own inline padding (space-xl, space-md below
   750px). Re-anchor it to the global section padding so the intro stays on
   the same grid as every other section. */
.widget-banner[data-widget-id="widget_e268097f-6341-4b9a-bac4-8968db8072e7"] {
  padding-inline: var(--section-padding-inline);
}

/* Photo banners use the highlight scheme’s gold/button pair. */
.widget-banner[data-widget-id="widget_e268097f-6341-4b9a-bac4-8968db8072e7"] {
  --accent: var(--colors-highlight_accent);
  --accent-text: var(--colors-highlight_accent_text, var(--color-white));
}

.widget-banner[data-widget-id="widget_e268097f-6341-4b9a-bac4-8968db8072e7"] .w-body.t-uppercase {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   List layout — category sidebar + product grid
   -------------------------------------------------------------------------- */

/* Background follows the standard scheme token (Site Settings: #ffffff). */
.widget-products-grid {
  background-color: var(--bg-primary);
}

.widget-products-grid .products-layout {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* Small screens: the sidebar stacks above the grid (rows stay full-width
   tap targets — no horizontal scrolling). */
@media (max-width: 749px) {
  .widget-products-grid .products-layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* --------------------------------------------------------------------------
   Category sidebar (CSS-only filter — radio rows)
   -------------------------------------------------------------------------- */

.widget-products-grid .products-sidebar-title {
  margin-block-end: calc(var(--space-md) * var(--spacing-scale));
}

/* Sticky sidebar (desktop two-column layout only): the category list stays
   in view while the product grid scrolls. The offset clears the global
   sticky header (≈10rem with the logo) plus breathing space; the grid
   layout already uses align-items: start so the sidebar can travel.
   Local exception — component-scoped. */
@media (min-width: 750px) {
  .widget-products-grid .products-sidebar {
    position: sticky;
    top: calc(var(--space-2xl) * 3);
  }
}

/* Reset fieldset UA styles (border, padding, min-inline-size). */
.widget-products-grid .products-filter-set {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.widget-products-grid .products-cats {
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Mobile disclosure — category "dropdown" below 750px
   (CSS-only: the rows collapse behind a trigger showing the active
   category; the radio rows stay the single filter state. Hidden at >=750px
   where the sidebar sits beside the grid, as in the mockup.)
   -------------------------------------------------------------------------- */

.widget-products-grid .products-filter-toggle {
  display: none; /* desktop: the trigger does not exist for keyboard/SR */
}

.widget-products-grid .products-filter-trigger {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: calc(var(--space-sm) * var(--spacing-scale)) calc(var(--space-md) * var(--spacing-scale));
  border: var(--border-width-thin) solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-primary);
  color: var(--text-content);
  cursor: pointer;
  transition:
    background-color var(--transition-speed-fast),
    border-color var(--transition-speed-fast);
}

.widget-products-grid .products-filter-trigger:hover {
  background-color: color-mix(in srgb, var(--accent) 6%, var(--bg-primary));
}

.widget-products-grid .products-filter-toggle:checked + .products-filter-trigger {
  border-color: var(--accent);
}

.widget-products-grid .products-filter-toggle:focus-visible + .products-filter-trigger {
  outline: var(--border-width-medium) solid var(--text-heading);
  outline-offset: calc(var(--border-width-medium) * -1);
}

.widget-products-grid .products-filter-trigger-icon {
  width: 1.8em;
  height: 1.8em;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--transition-speed-fast);
}

.widget-products-grid .products-filter-toggle:checked + .products-filter-trigger .products-filter-trigger-icon {
  transform: rotate(180deg);
}

/* Trigger label: exactly one category option is in flow (base = "all";
   the generated per-instance rules swap in the active one). */
.widget-products-grid .products-filter-option {
  display: none;
}

.widget-products-grid .products-filter-option[data-for=""] {
  display: inline;
}

@media (max-width: 749px) {
  .widget-products-grid .products-filter-toggle {
    display: block; /* .visually-hidden keeps it clipped but focusable */
  }

  .widget-products-grid .products-filter-trigger {
    display: flex;
    margin-block-end: calc(var(--space-sm) * var(--spacing-scale));
  }

  .widget-products-grid .products-cats {
    display: none;
  }

  .widget-products-grid .products-sidebar:has(.products-filter-toggle:checked) .products-cats {
    display: flex;
  }
}

/* Category row: full-width tap target with a hairline separator (mockup). */
.widget-products-grid .products-cat {
  display: flex;
  align-items: center;
  width: 100%;
  padding: calc(var(--space-sm) * var(--spacing-scale)) calc(var(--space-md) * var(--spacing-scale));
  border-block-end: var(--border-width-thin) solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--transition-speed-fast),
    color var(--transition-speed-fast);
}

.widget-products-grid .products-cat:last-of-type {
  border-block-end: 0;
}

/* Hover: a faint warm tint (derived from the accent token) on the white
   canvas. */
.widget-products-grid .products-cat:hover {
  background-color: color-mix(in srgb, var(--accent) 6%, var(--bg-primary));
  color: var(--text-heading);
}

/* Selected row: pale accent tint (derived from the accent token) with an
   accent bar and accent label, as in the approved mockup. */
.widget-products-grid .products-cat-input:checked + .products-cat {
  background-color: color-mix(in srgb, var(--accent) 12%, var(--bg-primary));
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--accent);
  font-weight: var(--font-weight-semibold);
}

/* Focus ring drawn just inside the row so it never overlaps the sidebar
   edge; the accent ring would disappear against the selected tint. */
.widget-products-grid .products-cat-input:focus-visible + .products-cat {
  outline: var(--border-width-medium) solid var(--text-heading);
  outline-offset: calc(var(--border-width-medium) * -1);
}

/* --------------------------------------------------------------------------
   Catalogue grid and cards
   -------------------------------------------------------------------------- */

/* Desktop column count comes from --grid-cols-desktop (schema setting) via
   Arch's grid. Below 750px the theme grid is 1-up; open it to 2-up from
   480px so larger phones use the width, and keep a safe single column on
   small phones (full photos + long Greek product names, zero overflow). */
@media (max-width: 479px) {
  .widget-products-grid .products-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 480px) and (max-width: 749px) {
  .widget-products-grid .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.widget-products-grid .products-empty {
  color: var(--text-muted);
}

/* Search and pagination share Arch form/pagination styling and tokens. */
.widget-products-grid [hidden] { display: none; }
.widget-products-grid .products-results { min-width: 0; }
.widget-products-grid .products-search {
  position: relative;
  margin-block-end: calc(var(--space-lg) * var(--spacing-scale));
  scroll-margin-top: calc(var(--space-2xl) * 3);
}
.widget-products-grid .products-search svg {
  position: absolute;
  inset-inline-start: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em;
  height: 1.5em;
  color: var(--text-muted);
  pointer-events: none;
}
.widget-products-grid .products-search input { padding-inline-start: calc(var(--space-md) * 3); }
.widget-products-grid button.pagination-link {
  background: var(--bg-primary);
  font-family: inherit;
  cursor: pointer;
}
.widget-products-grid button.pagination-link.is-current {
  background: var(--accent);
  color: var(--accent-text);
}
.widget-products-grid button.pagination-link:disabled { opacity: 0.4; cursor: default; }
.widget-products-grid .products-pagination .pagination-list {
  flex-wrap: nowrap;
  align-items: center;
}
.widget-products-grid .products-pagination-gap {
  color: var(--text-muted);
}
.widget-products-grid button.pagination-link:focus-visible {
  outline: var(--border-width-medium) solid var(--accent);
  outline-offset: var(--border-width-medium);
}

/* Local mockup exception: directional scrim and left-hand copy for the
   contact Banner, keeping the existing full-width photograph and global grid. */
.widget[data-widget-id="widget_9283a601-d72b-41b1-b3b4-e412a67b8e20"] {
  --accent: var(--colors-highlight_accent);
  --accent-text: var(--colors-highlight_accent_text, var(--color-white));
  padding-inline: var(--section-padding-inline);
}
.widget[data-widget-id="widget_9283a601-d72b-41b1-b3b4-e412a67b8e20"].has-overlay::before {
  background: linear-gradient(90deg, var(--colors-highlight_bg_primary) 0%, transparent 100%);
}
.widget[data-widget-id="widget_9283a601-d72b-41b1-b3b4-e412a67b8e20"] .widget-content { max-width: 40%; }
.widget[data-widget-id="widget_9283a601-d72b-41b1-b3b4-e412a67b8e20"] .t-uppercase { color: var(--accent); }
@media (max-width: 989px) {
  .widget[data-widget-id="widget_9283a601-d72b-41b1-b3b4-e412a67b8e20"] .widget-content { max-width: 65%; }
}
@media (max-width: 599px) {
  .widget[data-widget-id="widget_9283a601-d72b-41b1-b3b4-e412a67b8e20"] .widget-content { max-width: 100%; }
}