/* ================== NEW LAUNCH (Vertical Cards) — Scoped ================== */
/* Quick knobs you can tweak:
   --card-basis  → card width % of row on desktop
   --card-radius → card corner radius (5–6px recommended)
   --gap         → space between cards
   --aspect      → image aspect ratio (portrait look)
*/
.aniston-newlaunch{
  --card-basis:24%;   /* 🎯 4 cards in a row on desktop */
  --card-radius:6px;  /* 🎯 CARD CORNERS */
  --gap:10px;         /* 🎯 GAP BETWEEN CARDS */
  --aspect:3/5;       /* 🎯 IMAGE SHAPE; try 2/3 or 9/16 if needed */

  --bg:#ffffff;
  --fg:#111111;

  position:relative;
  height:100vh;
  min-height:460px;
  padding:clamp(16px,2.5vw,28px);
  background:var(--bg);
  color:var(--fg);
  isolation:isolate;
  box-sizing:border-box;
}

/* Header */
.aniston-newlaunch__head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px;
}
.aniston-newlaunch__title{
  font:600 clamp(16px,2.6vw,22px)/1.15 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  margin:0; color:var(--fg);
}
.aniston-newlaunch__viewall{
  font:500 14px/1 system-ui;
  color:var(--fg);
  text-decoration:none;
  border:1px solid rgba(0,0,0,.25);
  padding:.45rem .75rem;
  border-radius:999px;
  transition:background .2s ease;
}
.aniston-newlaunch__viewall:hover{ background:rgba(0,0,0,.06); }

/* Row (holds cards) */
.aniston-newlaunch__row{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:var(--gap);
  height:calc(100%);
}

/* Card */
.aniston-card{
  flex:0 1 var(--card-basis);
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  border:1px solid #ddd;
  border-radius:var(--card-radius);
  overflow:hidden;
  background:#fff;
  transition:transform .3s ease;
}
.aniston-card:hover{ transform:translateY(-3px); }

/* Image figure */
.aniston-card__figure{
  position:relative;
  margin:0;
  width:80%;
  height:80%;
  flex:1 1 auto;
}

/* Two images: cross-fade with opacity */
.aniston-card__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  aspect-ratio:var(--aspect);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.aniston-card__img.is-active{
  opacity:1;
  pointer-events:auto;
}

/* Removed product-name label area per request
.aniston-card__meta{ ... }
.aniston-card__model{ ... }
*/

/* ================== RESPONSIVE ================== */
@media (max-width: 1200px){
  .aniston-newlaunch{ --card-basis:24%; }
}
@media (max-width: 992px){
  .aniston-newlaunch{ --card-basis:24%; --gap:8px; }
}
@media (max-width: 768px){
  .aniston-newlaunch{ --card-basis:48%; } /* 2-up on mid phones */
  .aniston-newlaunch__row{ gap:8px; flex-wrap:wrap; }
}
@media (max-width: 520px){
  .aniston-newlaunch__row{
    flex-direction:column;
    align-items:center;
  }
  .aniston-card{
    width:90%;
    max-width:360px;
  }
  .aniston-card__figure{ height:auto; }
  .aniston-card__img{ position:relative; opacity:1; }
}


























/* ===================== TUNE HERE (your dials) ===================== */
/* Section height & column widths */
.aniston-newlaunch{
  --section-height: 86vh;          /* total height of the card area */
  --col-left:   22%;               /* left vertical column width   */
  --col-center: 54%;               /* center column width          */
  --col-right:  22%;               /* right vertical column width  */

  /* Center column vertical split (top vs bottom area) */
  --center-top-fr: 1.15;           /* more value => taller top     */
  --center-bottom-fr: 1;           /* bottom area                   */

  /* Spacing & look */
  --gap: 12px;
  --radius: 10px;
  --bg: #fff;
  --fg: #111;
  --card-bg: #fff;
  --card-border: #e5e5e5;
}
/* ================================================================= */

/* Shell */
.aniston-newlaunch{
  display:flex; flex-direction:column;
  padding:24px; background:var(--bg); color:var(--fg);
  box-sizing:border-box;
}

.aniston-newlaunch__head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px;
}
.aniston-newlaunch__title{ font:600 clamp(16px,2.6vw,22px)/1.2 system-ui; margin:0; }
.aniston-newlaunch__viewall{
  font:500 14px system-ui; color:inherit; text-decoration:none;
  border:1px solid rgba(0,0,0,.25); padding:.4rem .75rem; border-radius:999px;
}
.aniston-newlaunch__viewall:hover{ background:rgba(0,0,0,.06); }

/* Main grid (three columns) */
.aniston-newlaunch__row{
  display:grid;
  grid-template-columns: var(--col-left) var(--col-center) var(--col-right);
  column-gap:var(--gap);
  align-items:stretch;
  height:var(--section-height);
  min-height:420px;
}

/* Cards base */
.aniston-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .25s ease;
}
.aniston-card:hover{ transform:translateY(-3px); }

.aniston-card__figure{ position:relative; width:100%; height:100%; margin:0; }

/* Images always fit and never crop */
.aniston-card__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;               /* keeps geometry intact */
  background:transparent;           /* no black fill */
  opacity:0; transition:opacity .35s ease;
}
.aniston-card__img.is-active{ opacity:1; }

/* LEFT & RIGHT vertical cards fill the full column height */
.aniston-card.vertical{ height:100%; }

/* CENTER COLUMN LAYOUT */
.aniston-center{
  display:grid;
  grid-template-rows: minmax(0, var(--center-top-fr)) minmax(0, var(--center-bottom-fr));
  gap:var(--gap);
  height:100%;
}

/* Top horizontal fills its allocated row */
.aniston-card.horizontal.top{ height:100%; }

/* Bottom pair: two equal rectangles side-by-side filling the row */
.aniston-row-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  height:100%;
}
.aniston-card.rect{ height:100%; }

/* -------------------- Responsive -------------------- */
@media (max-width: 1100px){
  .aniston-newlaunch{
    --col-left: 24%;
    --col-center: 52%;
    --col-right: 24%;
  }
}
@media (max-width: 900px){
  /* stack columns; keep visual order left -> center -> right */
  .aniston-newlaunch__row{
    grid-template-columns: 1fr;
    row-gap: var(--gap);
    height:auto;
  }
  .aniston-card.vertical{ height:70vh; }  /* adjust on mobile if needed */
}