/* TWD Product Collection — v1.4.5
   - FILTER icon inline
   - Header 70/30 desktop, 1col mobile
   - Hover-to-open dropdown
   - Mobile: remove borders + align filter
*/

.twd-pc{
  --page-bg:#F3EFEA;
  --ink:#353132;
  --muted:#6E6053;
  --line:#E6E0D9;
  --blue:#A9C2E0; /* FILTER text */
  --red:#DB362A;  /* chevron + accent */
  background:var(--page-bg);
  color:var(--ink);
  font-family:'Outfit',system-ui,sans-serif;
}

/* Header split 70 / 30 (title / copy) */
.twd-pc__header{
  display:grid;
  grid-template-columns:70% 30%;
  gap:24px;
  padding:24px 0;
  border-bottom:1px solid #A9C2E0;
}

.twd-pc__title{
  font-family:'Righteous',cursive;
  font-weight:400;
  font-size:38px;
  line-height:1.1;
  color:#353132;
  margin:0;
  width:50% !important; /* per your design */
}

.twd-pc__intro,
.twd-pc__note{
  font-weight:400;
  font-size:14px;
  line-height:1.5;
  color:#353132;
  margin:0 0 12px;
  width:82% !important; /* per your design */
}

/* FILTER trigger */
.twd-pc__copy{
  border-left:1px solid #A9C2E0;
  padding-left:15px;
}

.twd-pc__sortwrap{
  position:relative;
  display:flex;
  justify-content:flex-end;
  left:-70px !important; /* aligns to mock on desktop */
}

.twd-pc__trigger{
  all:unset !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  cursor:pointer;
  white-space:nowrap !important;
  line-height:1 !important;
}
.twd-pc__trigger *{ line-height:1 !important; }

.twd-pc__trigger-text{
  font-family:'Outfit',sans-serif;
  font-weight:400;
  font-size:16px;
  color:var(--blue);
}

/* keep svg inline even if theme forces block */
.twd-pc__trigger svg,
.twd-pc__chev{
  display:inline-block !important;
  width:14px; height:14px;
  flex:0 0 14px;
  vertical-align:middle;
  transform:translateY(1px) rotate(0deg);
  transition:transform .2s ease;
}
.twd-pc__trigger[aria-expanded="true"] .twd-pc__chev{
  transform:translateY(1px) rotate(180deg);
}

/* Dropdown */
.twd-pc__menu{
  position:absolute; right:0; top:30px;
  min-width:220px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  z-index:50;
  list-style:none !important; margin:0 !important; padding:8px !important;
  display:none !important;
}
.twd-pc__menu.is-open{ display:block !important; }

/* Hover-to-open on desktop; focus-within also works */
.twd-pc__sortwrap:hover .twd-pc__menu,
.twd-pc__sortwrap:focus-within .twd-pc__menu{
  display:block !important;
}
.twd-pc__sortwrap:hover .twd-pc__trigger .twd-pc__chev,
.twd-pc__sortwrap:focus-within .twd-pc__trigger .twd-pc__chev{
  transform:translateY(1px) rotate(180deg);
}

.twd-pc__menu li{ list-style:none !important; margin:0; padding:0; }
.twd-pc__opt{
  padding:8px 12px; border-radius:8px; font-size:14px; color:#353132; cursor:pointer;
}
.twd-pc__opt + .twd-pc__opt{ margin-top:2px; }
.twd-pc__opt:hover{ background:#F6F4F1; }

/* Grid */
.twd-pc__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:16px;
}

/* Cards */
.twd-pc__card{
  background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column;
}

/* Image swap on hover */
.twd-pc__imgwrap{
  position:relative; width:100%; aspect-ratio:413/552; background:#f5f5f5; overflow:hidden;
}
.twd-pc__imgwrap img, .twd-pc__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .25s ease;
}
.twd-pc__img--main{ opacity:1; }
.twd-pc__img--hover{ opacity:0; }
.twd-pc__thumb:hover .twd-pc__img--hover{ opacity:1; }
.twd-pc__thumb:hover .twd-pc__img--main{ opacity:0; }

.twd-pc__info{
  position:relative; padding:12px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:8px 10px;
}
.twd-pc__name{ grid-column:1/2; font-weight:500; font-size:16px; color:#353132; line-height:1.3; text-decoration:none; }
.twd-pc__price{ grid-column:1/2; color:var(--red); font-size:14px; }
.twd-pc__plus{
  grid-column:2/3; justify-self:end; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); display:inline-grid; place-items:center; color:#6E6053; text-decoration:none;
  font-size:20px; line-height:1;
}

/* =========================
   Responsive adjustments
   ========================= */

/* Tablet & down */
@media (max-width:1024px){
  .twd-pc__header{
    grid-template-columns:1fr;           /* stack */
    border-bottom:none;                  /* remove bottom border */
    padding-bottom:16px;
  }
  .twd-pc__copy{
    border-left:none;                    /* remove left border */
    padding-left:0;
  }
  .twd-pc__title,
  .twd-pc__intro,
  .twd-pc__note{
    width:100% !important;               /* undo desktop fixed widths */
  }

  /* FILTER: align left and remove desktop offset */
  .twd-pc__sortwrap{
    justify-content:flex-start;
    left:0 !important;
    margin-top:8px;
  }

  /* Dropdown should anchor to the left on mobile to avoid overflow */
  .twd-pc__menu{
    left:0; right:auto; top:30px;
  }
}

/* Medium phones: 2-up product grid */
@media (max-width:860px){
  .twd-pc__grid{ grid-template-columns:repeat(2,1fr); }
}

/* Small phones: 1-up product grid */
@media (max-width:560px){
  .twd-pc__grid{ grid-template-columns:1fr; }
}

/* === Pagination (clean pills) === */
.twd-pc__pager{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
  margin:28px 0 44px;
}
.twd-pc__page{
  appearance:none; border:1px solid var(--line); background:#fff; color:#353132;
  min-width:38px; height:38px; padding:0 12px; border-radius:999px;
  font:600 14px/38px 'Outfit',sans-serif; text-align:center; cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.twd-pc__page:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.08); }
.twd-pc__page.is-active{ background:#A9C2E0; color:#DB362A; border-color:#A9C2E0; box-shadow:0 6px 14px rgba(169,194,224,.35); }
.twd-pc__page[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.twd-pc__prev,.twd-pc__next{ padding:0 14px; min-width:42px; }