/* ============================================================
   SOIANE — delta layer
   ------------------------------------------------------------
   styles.css is her original stylesheet, untouched. This file
   carries only what the agreed edits changed:

     1. the collection grid holds five collections, not four
     2. sub-collection grids on the category pages
     3. one new tile tone (plum) for the fifth collection

   Breakpoints mirror hers: 5-up desktop, 3-up laptop, 2-up
   tablet, 1-up phone.
   ============================================================ */

/* ---------- 1. main collection grid: five collections ---------- */
.collection-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 1180px) {
  .collection-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .collection-card {
    min-height: 445px;
    padding: 24px 17px 30px;
  }
  .collection-card h3 {
    font-size: 25px;
  }
  .collection-card small {
    font-size: 12px;
  }
  .collection-ornament {
    width: 72px;
    height: 72px;
    margin: 52px 0 26px;
  }
}

@media (min-width: 981px) and (max-width: 1179px) {
  .collection-card:nth-child(3n) {
    border-right: 0;
  }
  .collection-card:nth-child(-n + 3) {
    border-bottom: 1px solid var(--gold-light);
  }
}

@media (max-width: 980px) {
  .collection-grid {
    grid-template-columns: 1fr 1fr;
  }
  .collection-card:nth-child(odd) {
    border-right: 1px solid var(--gold-light);
  }
  .collection-card:nth-child(even) {
    border-right: 0;
  }
  .collection-card:not(:last-child) {
    border-bottom: 1px solid var(--gold-light);
  }
  /* five collections in a 2-up grid leaves the fifth alone on its row;
     let it run full width so the block closes cleanly instead of ragged */
  .collection-grid > .collection-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .collection-grid {
    grid-template-columns: 1fr;
  }
}

.collection-grid > .collection-card:last-child {
  border: 0;
}

/* ---------- 2. sub-collection grids (category pages) ---------- */
.collection-grid.subs {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border: 0;
  margin-bottom: 10px;
}

.collection-grid.subs .collection-card {
  border: 1px solid var(--gold-light) !important;
  min-height: 285px;
  padding: 22px 20px 26px;
}

.collection-grid.subs .collection-ornament {
  width: 56px;
  height: 56px;
  font-size: 15px;
  margin: 26px 0 20px;
}

.collection-grid.subs .collection-card h3 {
  font-size: 23px;
}

.collection-grid.subs .collection-card > p {
  letter-spacing: 0.24em;
}

@media (max-width: 980px) {
  .collection-grid.subs {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .collection-grid.subs {
    grid-template-columns: 1fr;
  }
}

/* ---------- 3. one new tile tone for the fifth collection ---------- */
.collection-card.plum {
  background: linear-gradient(160deg, #b3a1a8, #d5c8cc);
}

/* ---------- 4. account-gated collections (login wall) ---------- */
.shop-gate {
  text-align: center;
  padding: 80px 25px 120px;
}
.shop-gate > span {
  color: #a8874d;
  font-size: 27px;
}
.shop-gate .gate-kicker {
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #a8874d;
  margin: 26px 0 0;
  font: 700 8px Arial, sans-serif;
}
.shop-gate h2 {
  margin: 20px 0 15px;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.02;
}
.shop-gate h2 em {
  color: #9fb4c4;
  font-weight: 400;
}
.shop-gate .gate-copy {
  color: #748188;
  max-width: 460px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.8;
}
.gate-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 34px;
}
.gate-actions .gate-login {
  color: #fff;
  background: #263b4b;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 16px 26px;
  font: 9px Arial, sans-serif;
}
.gate-actions .gate-register {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border-bottom: 1px solid #d4c29d;
  padding: 12px 0;
  font: 9px Arial, sans-serif;
}
.gate-actions .gate-register span {
  margin-left: 14px;
}
@media (max-width: 620px) {
  .gate-actions {
    flex-direction: column;
    gap: 12px;
  }
}

/* ---------- 5. product pages (Professional Aesthetics) ---------- */
.product-page {
  padding: 0 5vw 100px;
}
.product-page .shop-filters {
  margin-inline: 0;
}
.product-layout {
  display: grid;
  grid-template-columns: 46% 1fr;
  gap: 7vw;
  max-width: 1240px;
  margin: 30px auto 0;
  align-items: start;
}
.product-art {
  border: 1px solid var(--gold-light);
  background: var(--paper);
  padding: 22px;
}
.product-art img {
  width: 100%;
  height: auto;
  display: block;
}
.product-info {
  padding-top: 8px;
}
.product-kicker {
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a8874d;
  margin: 0 0 22px;
  font: 700 8px Arial, sans-serif;
}
.product-info h1 {
  font-size: clamp(40px, 4.6vw, 60px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 14px;
}
.product-tagline {
  color: #718087;
  font: 14px/1.6 Georgia, serif;
  margin: 0 0 26px;
}
.product-desc {
  color: #4c585f;
  font: 15px/1.8 Georgia, serif;
  margin: 0 0 30px;
}
.product-info h2 {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a8874d;
  margin: 0 0 14px;
  font: 700 8px Arial, sans-serif;
}
.product-actives {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.product-actives li {
  border: 1px solid #d8c8a5;
  background: #fffdf9;
  padding: 9px 13px;
  font: 11px Arial, sans-serif;
  color: #4c585f;
}
.product-price {
  border-top: 1px solid var(--gold-light);
  padding-top: 22px;
  margin: 0 0 24px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.product-price span {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8b9296;
  font: 8px Arial, sans-serif;
}
.product-price {
  color: #263b4b;
  font: 22px Georgia, serif;
}
.product-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 26px;
}
.product-download {
  color: #fff;
  background: #263b4b;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 16px 24px;
  font: 9px Arial, sans-serif;
}
.product-download span {
  margin-left: 12px;
}
.product-enquire {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border-bottom: 1px solid #d4c29d;
  padding: 12px 0;
  font: 9px Arial, sans-serif;
}
.product-enquire span {
  margin-left: 14px;
}
.product-note {
  color: #8b9296;
  font: 11px/1.7 Arial, sans-serif;
  margin: 0;
}
@media (max-width: 850px) {
  .product-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .product-art {
    max-width: 460px;
  }
}
@media (max-width: 620px) {
  .product-page {
    padding-inline: 20px;
  }
  .product-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}