/* =========================================================
   Flavor Guide - Product List Card (match comps)
   - Single DOM supports narrow/wide
   - Theme-driven via tokens.css (--fg-*)
   - Release-ready (non-minified)
   ========================================================= */

/* ---------------------------------------------------------
   Optional page context
   DO NOT style body globally from a component sheet.
   If you want the page canvas, wrap the page content in .fg-page.
   --------------------------------------------------------- */
.fg-page {
  background: var(--fg-bg-page);
}

/* ---------------------------------------------------------
   Product list
   --------------------------------------------------------- */
.fg-product-list {
  margin: 24px 0 0;
  padding: 0;
}

.fg-product-list__list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  gap: 26px;
}

.fg-product-list__item {
  margin: 0;
  padding: 0;
}

@media (max-width: 1079px) {
    .fg-product-list__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    
    .fg-product-list__item {
        max-width: 342px;
    }
}

/* ---------------------------------------------------------
   Card root is one big link
   --------------------------------------------------------- */
.fg-product-card {
  display: block;
  text-decoration: none;
  color: inherit;

  border-radius: 22px; /* layout token could be added later if desired */
  background: var(--fg-bg-card);
  overflow: hidden;
  padding-bottom: 5px;
}

.fg-product-card:hover {
  filter: brightness(0.99);
}

.fg-product-card:focus-visible {
  outline: 3px solid var(--fg-data);
  outline-offset: 4px;
  border-radius: calc(22px + 4px);
}

/* ---------------------------------------------------------
   Header bar
   --------------------------------------------------------- */
.fg-product-card__header {
  background: var(--fg-bg-card-header);
  padding: 12px 18px 8px 274px;
  color: var(--fg-text-reverse);
}

@media (max-width: 1079px) {
    .fg-product-card__header {
        padding: 12px 18px 8px;
    }
}

.fg-product-card__title {
  margin: 0;
  font-size: var(--fg-size-title-product);
  font-weight: 600;

  color: var(--fg-text-reverse);

  display: block; /*flex;*/
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;

}

.fg-product-card__title_inner {
    margin-right: 8px;
}

.fg-product-card__brand {
  margin: 4px 0 0;

  /*font-size: 16px;*/
  font-size: var(--fg-size-title-brand);
  font-weight: 400;
  letter-spacing: 0.29px;
  /*font-family: var(--fg-font-title);
  font-weight: 500;*/ /* per spec: Inter 500 */
  /*
  line-height: var(--fg-lh-tight);*/

  color: var(--fg-text-reverse);
}

/* ---------------------------------------------------------
   Discontinued pill (system/state)
   --------------------------------------------------------- */
.fg-product-card__tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;

  background: var(--fg-system-substrate);
  color: var(--fg-text-primary);

  font-family: var(--fg-font-status);
  font-weight: 400;
  font-size: var(--fg-size-status);
  line-height: var(--fg-lh-tight);

  white-space: nowrap;
  vertical-align: middle;
}

/* ---------------------------------------------------------
   Main content grid
   --------------------------------------------------------- */
.fg-product-card__content {
  padding: 12px 36px; /* could be tokenized later */
  display: grid;
  column-gap: 48px;
  row-gap: 12px;

  /* Narrow layout default */
  grid-template-columns: 1fr;
  grid-template-areas:
    "media"
    "awesome"
    "graph"
    "reviews";

  align-items: start;
}

@media (max-width: 1079px) {
    .fg-product-card__content {
        padding: 16px;
        display: flex;
        flex-wrap: wrap;
        width: 310px;
        column-gap: unset; /*24px;*/
        justify-content: space-between;
    }
}

/* ---------------------------------------------------------
   Media well
   --------------------------------------------------------- */
.fg-product-card__media {
  grid-area: media;
}

.fg-product-card__image-well {
  background: #fff; /* intentional: comps show pure white media well */
  border-radius: 12px;
  padding: 14px;

  width: 210px;
  height: 210px;

  display: grid;
  place-items: center;

  margin: 0 auto;
}

@media (max-width: 1079px) {
    .fg-product-card__image-well {
        width: 126px;
        height: 164px;
        padding: 7px;
    }
}

.fg-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* ---------------------------------------------------------
   Shared subcomponent placement (card-only)
   --------------------------------------------------------- */
.fg-product-card__awesome {
  grid-area: awesome;
}

.fg-flavor-graph {
  grid-area: graph;
}

/* ---------------------------------------------------------
   Reviews line
   --------------------------------------------------------- */
.fg-product-card__reviews {
  grid-area: reviews;
  padding-top: 16px;

  /* Divider: theme-driven, with safe fallback */
  border-top: 2px solid color-mix(in srgb, var(--fg-text-primary) 14%, transparent);
  border-top-color: rgba(0, 0, 0, 0.14);

  display: grid;
  place-items: center;

  display: grid;
  grid-template-columns: 34px 1fr;
}

.fg-product-card__reviews-text {
  font-family: var(--fg-font-body);
  font-weight: 400;
  font-style: italic; /* only body links should be italic; this is body-ish CTA */
  font-size: 16px; /*var(--fg-size-body-lg);*/
  line-height: var(--fg-lh-tight);
  text-decoration: underline;
  text-align: right;
  width: 100%;

  /*color: var(--fg-link);*/
}

.fg-product-card:visited .fg-product-card__reviews-text {
  /*color: var(--fg-link-visited);*/
}

@media (max-width: 1079px) {
    .fg-product-card__reviews {
        border: 0;
        width: 100%;
        padding: 0;
    }
}

/* ---------------------------------------------------------
   Empty state
   --------------------------------------------------------- */
.fg-product-list__empty {
  margin: 0;
  padding: 18px;

  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;

  text-align: center;
  color: var(--fg-text-primary);

  font-family: var(--fg-font-status);
  font-weight: 400;
  font-size: var(--fg-size-status);
  line-height: var(--fg-lh-tight);
}

/* =========================================================
   Wide layout (desktop)
   ========================================================= */
/*************************************************************/
/*************************************************************/
/*************************************************************/
/*************************************************************/
/*************************************************************/

@media (min-width: 1080px) {
    .fg-product-card__content {
        grid-template-columns: 190px 1fr 326px;
        grid-template-areas:
            "media awesome graph"
            "media reviews graph";
        align-items: start;
    }

    .fg-product-card__image-well {
        width: 160px;
        height: 216px;
        margin: -65px 0 0 0; /*-59px 0 0 0;*/
    }

    /* Awesome row becomes 1x4 on wide card layout */
    .fg-product-card__awesome-list {
        /*grid-template-columns: repeat(4, minmax(70px, 1fr));
    justify-items: center;
    gap: 20px;*/
    }

    /* Award aligns more naturally under awesome list */
    .fg-product-card__award {
        place-items: start;
    }

    .fg-product-card__award_icon {
        height: 48px;
    }

    .fg-product-card__reviews {
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
    }

    .fg-product-card .fg-flavor-graph__rows {
        margin: 0;
    }
}

/* =========================================================
   WordPress layout compatibility (SCOPED)
   Avoid global nukes like:
     .is-layout-constrained > :where(...) { max-width: unset !important; }
   Only relax constraints inside FG output.
   ========================================================= */
.is-layout-constrained .fg-product-list :where(
  :not(.alignleft):not(.alignright):not(.alignfull)
) {
  /*max-width: unset;*/
}

/* ---------------------------------------------------------
   Optional: semantic utility styles (only if your markup uses them)
   --------------------------------------------------------- */
.fg-meta__label {
  font-family: var(--fg-font-meta-label);
  font-weight: 400;
  font-size: var(--fg-size-meta-lg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: var(--fg-lh-tight);
  color: var(--fg-text-primary);
}

.fg-meta__value {
  font-family: var(--fg-font-meta-number);
  font-weight: 600;
  font-size: var(--fg-size-meta-number);
  line-height: var(--fg-lh-tight);
  color: var(--fg-number);
}

.fg-status {
  font-family: var(--fg-font-status);
  font-weight: 400;
  font-size: var(--fg-size-status);
  line-height: var(--fg-lh-tight);
  color: var(--fg-text-primary);
  background: var(--fg-system-substrate);
}