/* ==========================================================================
   PLP (Centered block + consistent card bottoms)
   Depends on main.css for typography/buttons/themes
   ========================================================================== */



.plp-filter-title {
    color: inherit !important;
    font-size: var(--type-h3) !important;
    font-weight: var(--fw-h3) !important;
    line-height: var(--lh-h3) !important;
    margin: 0 0 12px !important;
    font-family: 'Figtree',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
    color: var(--type-color) !important;
}


.plp-page{
  --plp-gap: 15px;
  --plp-card-w: 270px;      /* filter + product tile width */
  --plp-grid-cols: 4;       /* products beside the filter (desktop default) */
}

/* Site standard width for this page */
.plp-page .page-inner{
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

/* Page padding rhythm */
.plp-layout{
  padding: 40px 0;
}

/* --------------------------------------------------
   Center the visible content block (filter + results)
-------------------------------------------------- */

.plp-center{
  width: calc(
    (1 + var(--plp-grid-cols)) * var(--plp-card-w) +
    (var(--plp-grid-cols)) * var(--plp-gap)
  );
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;

  display: grid;
  grid-template-columns: var(--plp-card-w) 1fr;
  column-gap: var(--plp-gap);
  align-items: start;
}

/* Override main.css tile width rule (layout-tile width:100%) */
.plp-page .layout-tile.plp-filters,
.plp-page .layout-tile.plp-card{
  width: var(--plp-card-w);
  max-width: var(--plp-card-w);
}

/* Results column should shrink to grid width */
.plp-results{
  width: calc(
    var(--plp-grid-cols) * var(--plp-card-w) +
    (var(--plp-grid-cols) - 1) * var(--plp-gap)
  );
}

/* Title */
.plp-title{
  margin: 0 0 16px;
 padding-top: 18px;
  text-align: left;
  width: 100%;
}

/* Product grid: explicit columns */
.plp-grid{
  display: grid;
  grid-template-columns: repeat(var(--plp-grid-cols), var(--plp-card-w));
  gap: var(--plp-gap);
}

/* ==========================================================================
   CARD LAYOUT (fix: price + buttons align across row)
   image fixed height -> title flexes -> price + buttons pinned to bottom
   ========================================================================== */

.plp-card{
  display: flex;
  flex-direction: column;
  height: 100%;            /* key: allow internal flex pinning */
  overflow: hidden;
}

/* Force white background on product tiles */
.plp-card.theme{ background: #fff; }

/* Image stage (fixed) */
.plp-card__media{
  display: block;
  padding: 16px 16px 0;
}

.plp-card__media img{
  display: block;
  width: 100%;
  height: 160px;           /* THIS sets card image height */
  object-fit: contain;
  background: transparent;
}

/* Body becomes a full-height flex column */
.plp-card__body{
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.plp-card__name{
  margin: 0 0 12px;
  font-size: 1.0em;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
}

/* Price styling relative to type-body (keeps responsive behaviour) */
.plp-price{
  margin: auto 0 0;
  display: flex;
  justify-content: center;
  gap: 0.55em;
  align-items: baseline;
  text-align: center;
  line-height: 1.1;
/*  padding-bottom: 12px;    space before button stack */
}

.plp-price__from{
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.85;
}

.plp-price__now{
  font-size: 1.4em;
  font-weight: 700;
}

.plp-price__was{
  font-size: 0.8em;
  opacity: 0.65;
  text-decoration: line-through;
}

/* ======================================================================
   BUTTON STACK (PLP)
   Goal: consistent card bottoms with 1 or 2 buttons, no fragile grid math.
   ====================================================================== */

.plp-card{
  --btn-add-bg:#321400;
  --btn-add-hover:#4a1c00;

  --btn-view-bg:#803300;
  --btn-view-hover:#913D07;
}


.plp-card .btn-add{
  background:var(--btn-add-bg);
}

.plp-card .btn-add:hover{
  background:var(--btn-add-hover);
}

.plp-card .btn-view{
  background:var(--btn-view-bg);
}

.plp-card .btn-view:hover{
  background:var(--btn-view-hover);
}

.plp-card .buttons{
  /* vertical stack */
  display: flex;
  flex-direction: column;
  gap: 8px;                 /* tighter spacing (you wanted this) */
  align-items: center;

  margin-top: 12px;

  /* reserve space for a 2-button stack so 1-button cards don’t collapse */
  min-height: calc(
    (var(--type-body) * 0.8) + 18px +   /* text + vertical padding (desktop) */
    (var(--type-body) * 0.8) + 18px +   /* second button */
    8px                                 /* gap */
  );
}


.plp-card .buttons{
  --button-scale: 0.8;
}

.plp-card .buttons button{
  font-size: calc(var(--type-body) * var(--button-scale));
}


/* Button sizing (PLP only) */
/* Button sizing (PLP only) */
.plp-card .buttons .btn-add,
.plp-card .buttons .btn-view{
  width: var(--buy-w, 200px);
}

/* Single-button case: push it to the “bottom slot” */
.plp-card .buttons:not(.plp-buttons-2){
  justify-content: flex-end;
}


@media (max-width: 768px){
  .plp-card .buttons{
    min-height: calc(
      (var(--type-body) * 0.8) + 14px +
      (var(--type-body) * 0.8) + 14px +
      8px
    );
  }
}


/* ==================================================
   PLP — Buy control sizing only (behaviour + layout come from main.css)
   ================================================== */

.plp-buy[data-buy]{
  --buy-w: 200px;
  --buy-h: 40px;
  --buy-radius: 5px;
  --buy-border: 2px solid #321400;
  --buy-removed-border: 2px solid #321400;
}

/* Ensure the buy control itself is the fixed width item in your button stack */
.plp-card .plp-buy[data-buy]{
  width: var(--buy-w);
}


/* =========================
   Roast strength badge overlay
   Native: 124 x 510
   Toggle with:
   roast-1 throught to roast-5
   ========================= */

.plp-card{
  position: relative; /* anchor overlay */
}

/* Default: no badge unless a roast class is present */
.plp-card::before{
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 3;                 /* above image */
  width: 26px;
  aspect-ratio: 124 / 510;
  height: auto;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  pointer-events: none;
}

/* Choose which icon to show (set via class on the card) */
.plp-card.roast-1::before{ background-image: url("/assets/roast-1.webp"); }
.plp-card.roast-2::before{ background-image: url("/assets/roast-2.webp"); }
.plp-card.roast-3::before{ background-image: url("/assets/roast-3.webp"); }
.plp-card.roast-4::before{ background-image: url("/assets/roast-4.webp"); }
.plp-card.roast-5::before{ background-image: url("/assets/roast-5.webp"); }


/* =========================================================
   PLP CORNER RIBBON
   Toggle with:
   .has-ribbon-new
   .has-ribbon-sale
   .has-ribbon-deal
   .has-ribbon-limited
   ========================================================= */

.plp-card{
  position: relative;
  overflow: visible;
}

/* shared ribbon layer */
.plp-card::after{
  content: "";
  position: absolute;
  top: -3px;     /* was 0 */
  right: -3px;   /* was 0 */

  width: 133px;
  height: 133px;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;

  pointer-events: none;
  z-index: 3;
}

.plp-card::after{
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
}


/* OFF by default */
.plp-card:not(.has-ribbon-new):not(.has-ribbon-sale):not(.has-ribbon-deal):not(.has-ribbon-limited)::after{
  display: none;
}

/* variants */
.plp-card.has-ribbon-new::after{
  background-image: url("/assets/corner-lap-new-ribbon.webp");
}

.plp-card.has-ribbon-sale::after{
  background-image: url("/assets/corner-lap-sale-ribbon.webp");
}
.plp-card.has-ribbon-sale .plp-price__now{
  color: #c62828; /* sale red */
}

.plp-card.has-ribbon-deal::after{
  background-image: url("/assets/corner-lap-deal-ribbon.webp");
}

.plp-card.has-ribbon-limited::after{
  background-image: url("/assets/corner-lap-limited-edition-ribbon.webp");
}


/* =========================================================
   PLP Info Overlay (per-card)
   ========================================================= */

.plp-card{ position: relative; } /* anchor overlay + icon */

/* the small (i) button */
.plp-info-btn{
  position: absolute;
  top: 5px;
  right: 5px;
  width: 28px;              /* slightly larger hit area */
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 5;               /* above image + ribbons */
}

.plp-info-btn img{
  width: 24px;
  height: 24px;
  display: block;
}

/* overlay layer over the whole tile */
.plp-info-overlay{
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  padding: 5px;
  background: rgba(25,2,0,0.45);
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility .25s ease;
}

/* the panel itself */
.plp-info-panel{
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.92);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
  transform: translateY(0);
  transition: transform 1s cubic-bezier(.22,1,.36,1), opacity 1s ease;
}

.plp-info-overlay[hidden] .plp-info-panel{
  transform: translateY(14px);
}

.plp-info-overlay[hidden]{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* keep text consistent with site type */
.plp-info-title{
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 1em; /* inherits card text scaling */
}

.plp-info-list{
  margin: 0;
  padding-left: 18px;
  font-size: 0.85em;
}

.plp-info-list li{
  margin: 6px 0;
}

/* optional: visible focus */
.plp-info-btn:focus-visible{
  outline: 2px solid rgba(50,20,0,0.6);
  outline-offset: 2px;
}




/* ==========================================================================
   Filters (minimal)
   ========================================================================== */



.plp-tile-inner{ padding: 18px 18px 22px; }

.plp-filters__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(25,2,0,0,0.35);
  margin-bottom: 14px;
  font-size: 0.85em;
  text-transform:none !important;
}

.plp-clear {
    background: transparent;
    border: 2px solid currentColor;
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    text-transform: lowercase;
    transition: background 0.2s, color 0.2s;
}

    .plp-clear:hover {
        background-color: black;
        color: #F1EBE6;
        border-color: transparent;
    }

.plp-filter{ padding: 14px 0; border-bottom: 1px solid rgba(25,2,0,0,0.18); }
.plp-filter--last{ border-bottom: 0; padding-bottom: 0; }

.plp-filter__title{ margin: 0 0 10px; font-weight: 600; }

.plp-filter__subtitle {
    margin: 0 0 10px;
    font-weight: 600;
    font-size: 16px !important;
}

.plp-keywords{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items:center;
}

.plp-input{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(25,2,0,0,0.25);
  border-radius: 5px;
  background: rgba(255,255,255,0.6);
}

.plp-icon {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    border: 1px solid rgba(25,2,0,0,0.25);
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    font-weight: 700;
}

.plp-check{
  display:flex;
  gap: 10px;
  align-items:center;
  margin: 6px 0;
  font-size: 14px;
}

.plp-more{ display:inline-block; margin-top: 8px; }

/* ==========================================================================
   Filter dropdown wrapper (<details>)
   ========================================================================== */

.plp-filterdrop{
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}

.plp-filterdrop__summary{
  display: none; /* hidden on desktop */
}

/* Sticky filter (desktop) */
@media (min-width: 921px){
  .plp-center{ overflow: visible; }

  .plp-filterdrop{
    position: sticky;
    top: 40px;
    align-self: start;
  }
}

/* ==========================================================================
   Column step-downs (accounting for ~80px total page padding)
   ========================================================================== */

@media (max-width: 1490px){
  .plp-page{ --plp-grid-cols: 3; }
}

@media (max-width: 1205px){
  .plp-page{ --plp-grid-cols: 2; }
}

/* Mobile layout: stack + dropdown summary visible */
@media (max-width: 920px){
  .plp-center{
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .plp-results{ width: 100%; }

  .plp-grid{
    width: 100%;
    grid-template-columns: repeat(2, var(--plp-card-w));
    justify-content: center;
  }

  .plp-filterdrop{
    width: min(560px, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  .plp-filterdrop__summary{
    display: block;
    cursor: pointer;
    padding: 12px 14px;
    border-radius: 5px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(25,2,0,0,0.25);
    user-select: none;
  }

  .plp-filterdrop[open] .plp-filterdrop__summary{
    margin-bottom: 12px;
  }
}

/* Single column cards: 350px so they don’t look lost */
@media (max-width: 640px){
  .plp-page{ --plp-card-w: 350px; }

  .plp-page .layout-tile.plp-filters,
  .plp-page .layout-tile.plp-card{
    width: min(var(--plp-card-w), 100%);
    max-width: min(var(--plp-card-w), 100%);
  }

  .plp-grid{
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
}