/* ============================================
   SHAY RUNWAY BRANDS — Subpage Shared Styles
   Beauty, Runway, Product pages
   ============================================ */

/* ====== PAGE HERO ====== */
.page-hero{position:relative;height:clamp(180px,22vw,280px);overflow:hidden;display:flex;align-items:center;justify-content:center}
.page-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:brightness(.55) saturate(.85)}
.page-hero__overlay{position:absolute;inset:0}
.page-hero--beauty .page-hero__overlay{background:linear-gradient(135deg,rgba(184,151,107,1),rgba(139,115,85,1))}
.page-hero--runway .page-hero__overlay{background:linear-gradient(135deg,rgba(74,69,64,.7),rgba(107,93,77,.75))}
.page-hero__content{position:relative;z-index:2;text-align:center;padding:0 2rem}
.page-hero__label{display:block;font-size:.55rem;font-weight:500;letter-spacing:.45em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:1rem}
.page-hero__title{font-family:var(--didot);font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:400;color:var(--white);line-height:1;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.12em}
.page-hero__title em{font-style:italic}
.page-hero__sub{font-size:.72rem;font-weight:300;color:rgba(255,255,255,.6);max-width:440px;margin:0 auto;line-height:1.7}

/* ====== BREADCRUMB ====== */
.breadcrumb{padding:.8rem clamp(1rem,2.5vw,1.5rem);font-size:.6rem;font-weight:400;letter-spacing:.08em;color:var(--taupe)}
.breadcrumb a{color:var(--taupe);transition:color .3s}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{margin:0 .4rem;color:rgba(139,115,85,.3)}

/* ====== CATEGORY FILTER TABS ====== */
.filter{display:flex;justify-content:center;gap:clamp(1rem,2vw,2.5rem);padding:clamp(1.2rem,2vw,1.8rem) 2rem;border-bottom:1px solid rgba(201,169,98,.1);position:sticky;top:60px;background:var(--cream);z-index:50}
.filter__btn{font-family:var(--sans);font-size:.6rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);background:none;border:none;cursor:pointer;padding:.4rem 0;position:relative;transition:color .3s}
.filter__btn::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:1px;background:var(--gold);transition:all .4s var(--ease);transform:translateX(-50%)}
.filter__btn:hover,.filter__btn.active{color:var(--char)}
.filter__btn.active::after{width:100%}

/* ====== PRODUCT GRID ====== */
.products{padding:clamp(2rem,4vw,3rem) clamp(1rem,2.5vw,1.5rem);max-width:1600px;margin:0 auto}
.products__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.5rem)}
.products__section-title{font-family:var(--serif);font-size:clamp(1.4rem,2.5vw,1.8rem);font-weight:400;color:var(--char);margin-bottom:clamp(1rem,2vw,1.5rem);padding-bottom:.6rem;border-bottom:1px solid rgba(201,169,98,.1)}
.products__category{margin-bottom:clamp(2.5rem,5vw,4rem);scroll-margin-top:160px}

/* Card Color Indicator Dots */
.card__colors{display:flex;gap:.35rem;margin:.3rem 0}
.card__color-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.1)}

/* ====== STORY / ORGANIC SECTION ====== */
.story{padding:clamp(3rem,6vw,5rem) clamp(1rem,2.5vw,1.5rem);max-width:1600px;margin:0 auto}
.story__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.story__img{overflow:hidden;position:relative}
.story__img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.story__content{padding:clamp(1rem,2vw,2rem) 0}
.story__badge{display:inline-block;font-size:.5rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:.4rem 1rem;margin-bottom:1.2rem}
.story__heading{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:400;color:var(--char);line-height:1.12;margin-bottom:1rem}
.story__text{font-size:.78rem;font-weight:300;color:var(--taupe);line-height:1.85;margin-bottom:1.5rem}
.story__list{list-style:none;padding:0;margin:0 0 1.5rem}
.story__list li{font-size:.72rem;font-weight:400;color:var(--char);padding:.4rem 0;padding-left:1.2rem;position:relative;border-bottom:1px solid rgba(201,169,98,.06)}
.story__list li::before{content:'';position:absolute;left:0;top:50%;width:5px;height:5px;border:1px solid var(--gold);transform:translateY(-50%) rotate(45deg)}

/* Shop Buttons */
.story__buttons{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.story__btn{display:inline-block;font-family:var(--didot);font-size:.7rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:var(--char);border:1px solid var(--gold);padding:.7rem 1.4rem;transition:all .3s var(--ease)}
.story__btn:hover{background:var(--gold);color:var(--white);border-color:var(--gold)}

/* ====== INGREDIENT STRIP ====== */
.ingredients{background:var(--white);padding:clamp(2rem,4vw,3rem) clamp(1rem,2.5vw,1.5rem);border-top:1px solid rgba(201,169,98,.06);border-bottom:1px solid rgba(201,169,98,.06)}
.ingredients__inner{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.ingredients__item{padding:1rem}
.ingredients__icon{font-size:1.8rem;margin-bottom:.6rem;display:block}
.ingredients__name{font-family:var(--serif);font-size:.9rem;font-weight:400;color:var(--char);margin-bottom:.3rem}
.ingredients__desc{font-size:.65rem;font-weight:300;color:var(--taupe);line-height:1.6}

/* INGREDIENT IMAGE */
.ingredients-image{width:100%;max-width:1600px;margin:clamp(3rem,6vw,5rem) auto;padding:0 clamp(1rem,2.5vw,1.5rem)}
.ingredients-image img{width:100%;height:auto;object-fit:cover;border-radius:4px;box-shadow:0 8px 30px rgba(0,0,0,.08)}

/* COMING SOON CARD */
.card--coming-soon{pointer-events:none}
.card__img--placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--cream-dk) 0%,#e8e4dc 100%);aspect-ratio:3/4;position:relative}
.card__img--placeholder::before{content:'';position:absolute;width:60px;height:60px;border:2px solid var(--gold);border-radius:50%;opacity:.3}
.card__placeholder-content{text-align:center}
.card__placeholder-content span{font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--taupe)}

/* ====== BACK TO TOP ====== */
.back-top{position:fixed;bottom:2rem;right:2rem;z-index:90;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--char);border:1px solid rgba(201,169,98,.2);color:var(--gold);cursor:pointer;
  opacity:0;transform:translateY(10px);transition:all .4s var(--ease);pointer-events:none}
.back-top.visible{opacity:1;transform:translateY(0);pointer-events:all}
.back-top:hover{background:var(--gold);color:var(--char);border-color:var(--gold)}

/* ====== RESPONSIVE ====== */
@media(max-width:1024px){
  .products__grid{grid-template-columns:repeat(3,1fr)}
  .ingredients__inner{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .story__inner{grid-template-columns:1fr}
  .products__grid{grid-template-columns:repeat(2,1fr)}
  .filter{gap:1rem;flex-wrap:wrap}
  .filter__btn{font-size:.52rem}
}
@media(max-width:480px){
  .products__grid{grid-template-columns:1fr 1fr}
  .ingredients__inner{grid-template-columns:1fr 1fr}
}

/* ====== POLICY PAGES (Returns, Privacy) ====== */
.policy{padding:clamp(2rem,4vw,3rem) clamp(1rem,2.5vw,1.5rem);max-width:800px;margin:0 auto}
.policy__inner{font-family:var(--sans);color:var(--char);line-height:1.8}
.policy__title{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:400;color:var(--char);margin-bottom:2rem;text-align:center}
.policy h2{font-family:var(--serif);font-size:clamp(1rem,2vw,1.3rem);font-weight:400;color:var(--char);margin:2rem 0 .8rem;padding-top:1rem;border-top:1px solid rgba(201,169,98,.12)}
.policy h2:first-of-type{border-top:none;padding-top:0}
.policy p{font-size:.82rem;font-weight:300;color:var(--taupe);margin-bottom:1rem}
.policy ul{list-style:none;padding:0;margin:0 0 1.2rem}
.policy li{font-size:.82rem;font-weight:300;color:var(--taupe);padding:.4rem 0 .4rem 1.2rem;position:relative}
.policy li::before{content:'';position:absolute;left:0;top:.85rem;width:5px;height:5px;border:1px solid var(--gold);transform:rotate(45deg)}
.policy h3{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--char);margin:1.2rem 0 .5rem}
.policy a{color:var(--gold);text-decoration:underline;transition:color .3s}
.policy a:hover{color:var(--gold-dk)}

/* ====== COMPACT COLLECTION IMAGES (Tickets 30, 31) ====== */
.spread__feature-img--compact img{max-height:600px;object-fit:contain}
.collage__hero-img-wrap img,.collage__item-img-wrap img{object-position:top center}

/* ====== INGREDIENTS LIST (Ticket 25) ====== */
.spread__ingredients-list{list-style:none;padding:0;margin:1rem 0}
.spread__ingredients-list li{font-size:.75rem;font-weight:400;color:var(--taupe);padding:.3rem 0;padding-left:1rem;position:relative}
.spread__ingredients-list li::before{content:'';position:absolute;left:0;top:50%;width:4px;height:4px;background:var(--gold);border-radius:50%;transform:translateY(-50%)}

/* ====== QUICK VIEW MODAL ====== */
.qv-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s var(--ease)}
.qv-modal.open{opacity:1}
.qv-modal__backdrop{position:absolute;inset:0;background:rgba(10,10,10,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.qv-modal__panel{position:relative;z-index:2;background:var(--cream);max-width:820px;width:92%;max-height:85vh;overflow-y:auto;
  transform:translateY(20px);transition:transform .4s var(--ease-out)}
.qv-modal.open .qv-modal__panel{transform:translateY(0)}
.qv-modal__close{position:absolute;top:1rem;right:1.2rem;font-size:1.6rem;color:var(--char);background:none;border:none;cursor:pointer;z-index:5;transition:color .3s}
.qv-modal__close:hover{color:var(--gold)}
.qv-modal__inner{display:grid;grid-template-columns:1fr 1fr;gap:0}
.qv-modal__gallery{position:relative;background:var(--cream-dk);overflow:hidden}
.qv-modal__slides{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden}
.qv-modal__slide{position:absolute;inset:0;width:100%;height:100%;transition:transform .4s var(--ease-out)}
.qv-modal__slide img{width:100%;height:100%;object-fit:cover}
.qv-modal__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;background:var(--white);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--char);cursor:pointer;transition:all .3s;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.qv-modal__arrow:hover{background:var(--char);color:var(--white)}
.qv-modal__arrow--prev{left:1rem}
.qv-modal__arrow--next{right:1rem}
.qv-modal__dots{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;z-index:5}
.qv-modal__dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);border:none;cursor:pointer;transition:all .3s}
.qv-modal__dot.active{background:var(--gold);transform:scale(1.3)}
.qv-modal__img{background:var(--cream-dk)}
.qv-modal__img img{width:100%;aspect-ratio:3/4;object-fit:cover}
.qv-modal__info{padding:clamp(1.5rem,3vw,2.5rem);display:flex;flex-direction:column;justify-content:center}
.qv-modal__name{font-family:var(--serif);font-size:clamp(1.4rem,2.5vw,1.8rem);font-weight:400;color:var(--char);margin-bottom:.2rem}
.qv-modal__variant{font-family:var(--serif);font-size:.95rem;font-style:italic;color:var(--taupe);margin-bottom:.4rem}
.qv-modal__price{font-size:1.1rem;font-weight:500;color:var(--char);margin-bottom:1rem}
.qv-modal__desc{font-size:.72rem;font-weight:300;color:var(--taupe);line-height:1.8;margin-bottom:1.5rem}
.qv-modal__add{width:100%;padding:.85rem;font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--white);background:var(--char);border:none;cursor:pointer;transition:all .4s var(--ease);margin-bottom:.8rem}
.qv-modal__add:hover{background:var(--gold)}
.qv-modal__full{display:block;text-align:center;font-size:.58rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--taupe);transition:color .3s}
.qv-modal__full:hover{color:var(--gold)}

/* Quick View Variant Swatches */
.qv-modal__variants{margin-bottom:1.2rem}
.qv-modal__variant-label{font-size:.65rem;font-weight:500;letter-spacing:.1em;color:var(--char);margin-bottom:.5rem}
.qv-modal__variant-label strong{font-weight:600}
.qv-modal__swatch-row{display:flex;gap:.5rem}
.qv-modal__swatch{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .3s}
.qv-modal__swatch:hover{transform:scale(1.1)}
.qv-modal__swatch.active{border-color:var(--char);box-shadow:0 0 0 2px var(--cream),0 0 0 3.5px var(--char)}

@media(max-width:768px){
  .qv-modal__inner{grid-template-columns:1fr}
  .qv-modal__img img{aspect-ratio:4/3}
}