/** Shopify CDN: Minification failed

Line 24:175 Expected identifier but found whitespace
Line 162:0 Unexpected "<"
Line 188:0 Unexpected "<"

**/
/* Projects817 — Minimal Grid (Zara-style) + Mango Density
   - Mobile default 2 (choices 1/2/3)
   - Desktop default 2 (choices 2/3/4)
   - Font sizes: 15px desktop / 13px mobile
   - Gapless option respected via --p817-gap
*/

.p817-minigrid { --p817-gap: 0rem; --p817-ar: 125%; --p817-active: #E75480; }

/* Header */
.p817-minigrid__head{margin:0 0 1.2rem}
.p817-minigrid__head.is-center{text-align:center}
.p817-minigrid__title{margin:0;font-size:clamp(1.1rem,1.2vw+1rem,1.6rem);font-weight:600}
.p817-minigrid__sub{margin:.3rem 0 0;opacity:.7}

/* Toolbar (density switcher) */
./* ── Segmented density control ───────────────────────────────────────────── */
.p817-minigrid__toolbar{
  display:flex;align-items:center;justify-content:flex-end;
  gap:.5rem;margin:.5rem 0 .75rem;
}

/* The outer rectangle (outlined, slightly rounded, slim) */
.p817-density{
  display:flex;gap:.5rem;
}
.p817-density__group{
  display:flex;
  align-items:stretch;
  border:1px solid #ddd;          /* light grey outline */
  border-radius:8px;              /* slightly rounded */
  overflow:hidden;                /* keep pink fill inside outline */
  height:34px;                    /* slim */
  padding:0;                      /* no inner padding; buttons handle spacing */
  background:transparent;
}

/* Show mobile group on small screens, desktop group on large */
.p817-density__group--mobile{ display:flex; }
.p817-density__group--desktop{ display:none; }
@media (min-width:990px){
  .p817-density__group--desktop{ display:flex; }
  .p817-density__group--mobile{ display:none; }
}

/* Segments */
.p817-density__btn{
  position:relative;
  appearance:none;border:0;background:transparent;cursor:pointer;
  color:#444;                     /* inactive text */
  font-size:14px; line-height:1;
  padding:0 12px;                 /* horizontal breathing room */
  min-width:42px;                 /* keeps segments even if numbers are narrow */
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease, color .15s ease;
}

/* Vertical dividers: don’t touch top/bottom (equal inset) */
.p817-density__btn:not(:first-child)::before{
  content:"";
  position:absolute; left:0;
  top:6px; bottom:6px;            /* creates the | with equal top/bottom space */
  width:1px; background:#ddd;
}

/* Active segment = solid pink, white text */
.p817-density__btn[aria-pressed="true"]{
  background:#E75480; color:#fff;
}

/* Focus ring for accessibility */
.p817-density__btn:focus-visible{
  outline:2px solid #E75480; outline-offset:2px;
}

/* No hover “lift” here to keep it flat/minimal */
.p817-density__btn:hover{ transform:none; }


/* Grid layout driven by CSS vars */
.p817-minigrid__grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(var(--p817-cols,2),1fr);
  gap:var(--p817-gap,.6rem);
}
@media (max-width:989.98px){
  .p817-minigrid__grid{grid-template-columns:repeat(var(--p817-cols-md,2),1fr)}
}
@media (max-width:749.98px){
  .p817-minigrid__grid{grid-template-columns:repeat(var(--p817-cols-sm,2),1fr)}
}

.p817-minigrid__item{margin:0}
.p817-minigrid__card{display:block;text-decoration:none;color:inherit}
.p817-minigrid__media{
  position:relative;display:block;width:100%;
  padding-top:var(--p817-ar,125%);
  overflow:hidden;background:#f6f6f6;
}
.p817-minigrid__media>img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .35s ease,opacity .35s ease;
  will-change:transform,opacity;
}
.p817-minigrid__media>img.p817-minigrid__hover{opacity:0}
.p817-minigrid__card:hover .p817-minigrid__hover,
.p817-minigrid__card.is-peek .p817-minigrid__hover{opacity:1}
.p817-minigrid__card:hover .p817-minigrid__media>img:not(.p817-minigrid__hover),
.p817-minigrid__card.is-peek .p817-minigrid__media>img:not(.p817-minigrid__hover){opacity:0}
@media (hover:hover){
  .p817-minigrid__card:hover .p817-minigrid__media>img{transform:scale(1.02)}
}

/* Typography (future-proof if titles are shown) */
.p817-card__title{margin:6px 0 0;font-size:15px;line-height:1.25}
@media (max-width:749.98px){.p817-card__title{font-size:13px}}

/* Footer / Show More */
.p817-minigrid__footer{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin-top:2.5rem;gap:1rem;text-align:center;
}
.p817-minigrid__count{font-size:1.1rem;font-weight:500;color:#1e1e1e;opacity:.8}
.p817-minigrid__more{
  display:inline-block;padding:1rem 2.2rem;background:#E75480;color:#fff;border:none;border-radius:40px;
  font-weight:600;font-size:1.05rem;letter-spacing:.5px;text-transform:uppercase;
  box-shadow:0 4px 10px rgba(231,84,128,.3);
  transition:all .25s ease;
}
.p817-minigrid__more:hover{background:#ffb7c5;color:#1e1e1e;transform:translateY(-2px);box-shadow:0 6px 14px rgba(231,84,128,.35)}
.p817-minigrid__more.is-loading{opacity:.75;pointer-events:none}

/* Fade-in for appended items */
@keyframes p817FadeIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
.p817-just-added{opacity:0;animation:p817FadeIn .6s ease forwards}

/* Style Bar (your existing styling, deduped) */
.p817-stylebar{border-bottom:1px solid #eee;margin:0 0 1rem}
.p817-stylebar__scroller{display:flex;gap:1.25rem;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:.75rem .5rem;scrollbar-width:none}
.p817-stylebar__scroller::-webkit-scrollbar{display:none}
.p817-stylebar__item{
  flex:0 0 auto;text-decoration:none;color:#1e1e1e;font-weight:600;text-transform:uppercase;letter-spacing:.4px;
  font-size:13px;padding-bottom:.4rem;border-bottom:2px solid transparent;opacity:.85;transition:color .2s,border-color .2s,opacity .2s;
}
.p817-stylebar__item:hover{opacity:1}
.p817-stylebar__item.is-active{border-bottom-color:#E75480;color:#E75480;opacity:1;position:relative}
.p817-stylebar__x{font-size:.85em;margin-left:.25em;color:#E75480;transition:color .2s}
.p817-stylebar__item.is-active:hover .p817-stylebar__x{color:#1e1e1e}
@media (min-width:768px){
  .p817-stylebar__scroller{gap:2rem;justify-content:center;padding:1rem 0}
  .p817-stylebar__item{font-size:15px;letter-spacing:.5px}
}
<style>
/* === P817 Minigrid – Desktop alignment fix for density selector === */
@media (min-width: 750px) {
  /* Put filters and selector on the same baseline */
  .p817-filterbar { align-items: flex-end; }

  /* Make the selector the same visual height as the filter chips */
  .p817-density {
    height: 34px;         /* was auto; brings height down slightly */
    padding: 3px 4px;     /* tighter so it matches the pills */
  }
  .p817-density__btn {
    padding: 5px 10px;    /* matches chip height better */
    line-height: 1;       /* no extra vertical slack */
  }

  /* Keep it inline on the right and nudge up a hair to align baseline */
  .p817-minigrid__toolbar {
    margin-left: auto;
    align-self: flex-end;
    transform: translateY(-2px); /* subtle lift to align with underline */
  }

  /* Optional: add a tiny bottom pad so the filter underline doesn’t push the row taller */
  .p817-stylebar__scroller { padding-bottom: 2px; }
}
</style>
/* --- V2 lead image wrapper (optional polish) --- */
.p817-minigrid__lead {
  margin: 0 auto var(--lead-space, 2rem);
  max-width: var(--lead-w, 1200px);
  border-radius: var(--lead-r, 12px);
  overflow: hidden;
}
.p817-minigrid__lead-img {
  display: block;
  width: 100%;
  height: auto;
}
/* === V2 add-on: Lead image + description polish (optional) === */

.p817-minigrid__lead {
  margin: 0 auto var(--lead-space, 2rem);
  max-width: var(--lead-w, 1200px);
  border-radius: var(--lead-r, 12px);
  overflow: hidden;
}
.p817-minigrid__lead-img {
  display: block;
  width: 100%;
  height: auto;
}

.p817-minigrid__desc {
  max-width: 78ch;            /* comfortable reading width */
  margin-left: auto;
  margin-right: auto;
  opacity: 0.92;
}
.p817-minigrid__desc.rte p:first-child { margin-top: 0; }
.p817-minigrid__desc.rte p:last-child { margin-bottom: 0; }

/* Keep grid behavior identical to V1; these are simply helpers if your theme overrides */
.p817-minigrid__wrap { width: 100%; }
.p817-minigrid__grid { width: 100%; }

/* Defensive: ensure the density selector keeps the single-outline look */
.p817-density {
  background: transparent;
  box-shadow: none;
}