/* ==========================================================================
   LASHUP — Design Tokens
   ========================================================================== */
:root{
  /* Color */
  --ink:        #211714;
  --ink-70:     rgba(33,23,20,.7);
  --ink-45:     rgba(33,23,20,.45);
  --rosewood:   #8C3B3F;
  --rosewood-dark: #6E2C2F;
  --blush:      #F3E6DE;
  --blush-deep: #E9D2C6;
  --cream:      #FBF7F2;
  --gold:       #C9A66B;
  --gold-line:  rgba(201,166,107,.5);
  --white:      #FFFFFF;
  --stone:      #F4F0EA;
  --line:       rgba(33,23,20,.14);
  --line-soft:  rgba(33,23,20,.08);

  /* Type */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body:    "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --step--1: clamp(.8rem, .77rem + .13vw, .875rem);
  --step-0:  clamp(1rem, .95rem + .22vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  --step-2:  clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
  --step-3:  clamp(2.5rem, 2rem + 2vw, 3.75rem);
  --step-4:  clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem);

  --container: 1360px;
  --gutter: clamp(1.25rem, 2vw + .5rem, 3rem);
  --radius: 2px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
input{font-family:inherit;}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:500;
  line-height:1.05;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

:focus-visible{outline:2px solid var(--rosewood);outline-offset:3px;}

/* ==========================================================================
   Eyebrow / masthead label — the recurring editorial device
   ========================================================================== */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--f-body);
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--rosewood);
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;}
.eyebrow--light{color:var(--gold);}
.eyebrow--light::before{background:var(--gold);}

/* ==========================================================================
   Masthead bar (site-wide device, echoed on hero)
   ========================================================================== */
.masthead-bar{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:.5rem 0;
  font-size:var(--step--1);
  letter-spacing:.12em;
  text-transform:uppercase;
  display:flex;
  justify-content:space-between;
  color:var(--ink-70);
}
.masthead-bar .container{display:flex;justify-content:space-between;width:100%;}

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header{
  background:var(--cream);
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(33,23,20,.08);
}
.site-header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:1.1rem;
  gap:1.5rem;
}
.site-logo{
  font-family:var(--f-display);
  font-size:var(--step-1);
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.site-logo em{font-style:italic;color:var(--rosewood);}

.primary-nav{flex:1;display:flex;justify-content:center;}
.primary-nav ul{display:flex;gap:2.1rem;}
.primary-nav a{
  font-size:var(--step--1);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  position:relative;
  padding-bottom:4px;
}
.primary-nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--rosewood);transition:width .25s ease;
}
.primary-nav a:hover::after,
.primary-nav .current-menu-item a::after{width:100%;}

.header-icons{display:flex;align-items:center;gap:1.35rem;}
.header-icons a{display:flex;align-items:center;gap:.35rem;font-size:var(--step--1);}
.header-icons svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.4;}
.cart-count{
  background:var(--rosewood);color:var(--white);
  border-radius:50%;width:16px;height:16px;
  font-size:10px;display:inline-flex;align-items:center;justify-content:center;
  margin-left:2px;
}

.menu-toggle{display:none;background:none;border:0;}
@media (max-width: 860px){
  .primary-nav{
    position:fixed;inset:0 0 0 auto;width:min(86vw,360px);
    background:var(--cream);flex-direction:column;justify-content:flex-start;
    padding:6rem 2rem 2rem;transform:translateX(100%);transition:transform .35s ease;
  }
  .primary-nav.is-open{transform:translateX(0);}
  .primary-nav ul{flex-direction:column;gap:1.5rem;}
  .menu-toggle{display:block;}
}

/* ==========================================================================
   Hero — asymmetric, video-capable, masthead treatment
   ========================================================================== */
.hero{
  position:relative;
  background:var(--blush);
  overflow:hidden;
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(320px,42%) 1fr;
  align-items:stretch;
  min-height:min(78vh,720px);
}
.hero__media{
  position:relative;
  overflow:hidden;
}
.hero__media video,
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  position:absolute;inset:0;
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(33,23,20,.18), transparent 35%);
}
.hero__copy{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(2rem,4vw,4.5rem);
  z-index:2;
}
.hero__word{
  font-family:var(--f-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(3.5rem,8vw,7rem);
  line-height:.85;
  color:var(--rosewood);
  margin:.2em 0 .1em -.02em;
}
.hero__title{
  font-size:var(--step-3);
  margin-bottom:.5rem;
}
.hero__title small{
  display:block;font-size:var(--step-1);font-weight:400;color:var(--ink-70);
}
.hero__lede{
  max-width:34ch;
  color:var(--ink-70);
  margin-bottom:1.75rem;
}
.hero__actions{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;}
.hero__note{font-size:var(--step--1);letter-spacing:.05em;color:var(--rosewood);}

/* Bleeding oversized word that overlaps the media edge, cropped — signature move */
.hero--bleed .hero__word{
  position:absolute;
  right:-.12em;
  bottom:-.06em;
  font-size:clamp(4.5rem,13vw,11rem);
  color:var(--cream);
  mix-blend-mode:difference;
  pointer-events:none;
  z-index:3;
  margin:0;
}

@media (max-width: 860px){
  .hero__grid{grid-template-columns:1fr;}
  .hero__media{min-height:52vh;}
  .hero__copy{padding:2.25rem 1.25rem;}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.95rem 2.1rem;
  font-size:var(--step--1);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  border:1px solid var(--ink);
  border-radius:var(--radius);
  background:var(--ink);
  color:var(--cream);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn--outline{background:transparent;color:var(--ink);}
.btn--outline:hover{background:var(--ink);color:var(--cream);}
.btn--rosewood{background:var(--rosewood);border-color:var(--rosewood);color:var(--white);}
.btn--rosewood:hover{background:var(--rosewood-dark);border-color:var(--rosewood-dark);}
.btn--ghost-light{background:transparent;border-color:var(--cream);color:var(--cream);}
.btn--ghost-light:hover{background:var(--cream);color:var(--ink);}
.btn--sm{padding:.6rem 1.3rem;font-size:.72rem;}
.btn--block{width:100%;}

/* ==========================================================================
   Marquee divider — runway ticker
   ========================================================================== */
.marquee{
  background:var(--ink);
  color:var(--blush);
  overflow:hidden;
  white-space:nowrap;
  padding:.85rem 0;
  border-top:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);
}
.marquee__track{display:inline-flex;gap:2.5rem;animation:marquee 32s linear infinite;}
.marquee__track span{
  font-family:var(--f-display);font-style:italic;font-size:var(--step-0);
  letter-spacing:.02em;display:inline-flex;align-items:center;gap:2.5rem;
}
.marquee__track span::after{content:"✦";font-style:normal;color:var(--gold);margin-left:2.5rem;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ==========================================================================
   Section headers
   ========================================================================== */
.section{padding-block:clamp(3.5rem,6vw,6.5rem);}
.section--tight{padding-block:clamp(2.5rem,4vw,4rem);}
.section--dark{background:var(--ink);color:var(--blush);}
.section--blush{background:var(--blush);}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  margin-bottom:2.5rem;flex-wrap:wrap;
}
.section-head h2{font-size:var(--step-3);max-width:16ch;}
.section-head p{max-width:38ch;color:var(--ink-70);margin:0;}
.section--dark .section-head p{color:rgba(243,230,222,.75);}
.section-foot{margin-top:2.5rem;display:flex;justify-content:center;}

/* ==========================================================================
   Collections grid (Featured Collections)
   ========================================================================== */
.collections-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(33,23,20,.1);
}
.collection-card{
  position:relative;background:var(--blush);aspect-ratio:3/4;overflow:hidden;
  display:flex;align-items:flex-end;
}
.collection-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .6s ease;}
.collection-card:hover img{transform:scale(1.06);}
.collection-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(33,23,20,.65), transparent 55%);}
.collection-card__label{
  position:relative;z-index:2;padding:1.4rem;width:100%;color:var(--cream);
}
.collection-card__label h3{font-size:var(--step-1);margin-bottom:.6rem;}
.collection-card__label .btn{padding:.5rem 1.1rem;}
@media (max-width: 860px){.collections-grid{grid-template-columns:repeat(2,1fr);}}

/* ==========================================================================
   Product grid — premium, Rhode-Beauty-inspired
   Quiet neutral field, hairline shared borders between cells (not floating
   cards), no colored badges/stars, restrained type, "Quick Add" text
   interaction on hover instead of a filled button.
   ========================================================================== */
.shop-header{
  padding-block:2.5rem 1.5rem;
  border-bottom:1px solid var(--line);
  margin-bottom:0;
}
.shop-header__eyebrow{margin-bottom:.6rem;}
.shop-header h1{
  font-size:var(--step-2);
  margin-bottom:.5rem;
}
.shop-header p{max-width:52ch;color:var(--ink-70);margin:0;}

.products-toolbar{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  padding-block:1.1rem;
  font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-70);
}
.products-toolbar select{
  border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink);
  padding-right:1.25rem;
}

.shop-filter-bar{
  display:flex;flex-wrap:wrap;gap:.6rem;
  padding-block:1rem 1.5rem;
}
.shop-filter-bar button{
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:.55rem 1.15rem;font-size:var(--step--1);letter-spacing:.05em;
  color:var(--ink-70);transition:.2s ease;
}
.shop-filter-bar button:hover,
.shop-filter-bar button.is-active{
  border-color:var(--ink);color:var(--ink);background:var(--stone);
}

/* Bordered, edge-to-edge grid — cells share hairlines like a gallery wall */
ul.products{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:0 !important;
  list-style:none !important;
  margin:0 !important;padding:0 !important;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
@media (max-width:1100px){ul.products{grid-template-columns:repeat(3,1fr) !important;}}
@media (max-width:720px){ul.products{grid-template-columns:repeat(2,1fr) !important;}}

.product-card, ul.products li.product{
  background:var(--cream);
  border-right:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
  text-align:left;
  padding:0 0 1.75rem !important;
  margin:0 !important;
  transition:background .3s ease;
}
.product-card:hover, ul.products li.product:hover{background:var(--white);}

.product-card__media{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--stone);
  margin-bottom:1.4rem;
}
.product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.product-card:hover .product-card__media img{transform:scale(1.03);}

.product-card__body{padding-inline:1.5rem;}
.product-card__badge{
  position:absolute;top:.9rem;left:.9rem;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--cream);border:1px solid var(--line);
  padding:.3rem .65rem;
}
.product-card__title{
  font-family:var(--f-body);font-weight:500;font-size:var(--step--1);
  letter-spacing:.02em;margin-bottom:.35rem;color:var(--ink);
}
.product-card__price{font-size:var(--step--1);letter-spacing:.03em;color:var(--ink-70);font-weight:400;}
.product-card__price del{color:var(--ink-45);font-weight:400;margin-right:.5em;}
.product-card__price ins{text-decoration:none;color:var(--rosewood);}

/* Quick Add — understated text link revealed on hover, sits under price */
.product-card__quick{
  margin-top:.85rem;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}
.product-card:hover .product-card__quick,
.product-card:focus-within .product-card__quick{
  max-height:3rem;opacity:1;
}
.product-card__quick a,
.product-card__quick .button{
  display:inline-block;background:none !important;border:0 !important;
  padding:0 !important;margin:0 !important;color:var(--ink) !important;
  font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--ink) !important;line-height:1.4;
}
@media (hover:none){
  .product-card__quick{max-height:3rem;opacity:1;}
}


/* ==========================================================================
   Curated bundles / editorial split promo
   ========================================================================== */
.promo-split{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.promo-split__panel{padding:clamp(2.5rem,5vw,5rem);display:flex;flex-direction:column;justify-content:center;}
.promo-split__panel--dark{background:var(--ink);color:var(--blush);}
.promo-split__panel--gold{background:var(--gold);color:var(--ink);}
.promo-split img{width:100%;height:100%;object-fit:cover;}
@media (max-width:860px){.promo-split{grid-template-columns:1fr;}}

/* ==========================================================================
   Testimonials — editorial pull-quotes, not cards
   ========================================================================== */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;}
.quote{border-top:1px solid var(--gold-line);padding-top:1.5rem;}
.quote p{font-family:var(--f-display);font-style:italic;font-size:var(--step-1);line-height:1.3;margin-bottom:1.25rem;}
.quote__byline{display:flex;align-items:center;gap:.75rem;font-size:var(--step--1);}
.quote__byline img{width:38px;height:38px;border-radius:50%;object-fit:cover;}
.quote__byline strong{display:block;font-weight:600;}
.quote__byline a{color:var(--rosewood);text-decoration:underline;text-underline-offset:3px;}
@media (max-width:860px){.quotes{grid-template-columns:1fr;gap:2.25rem;}}

/* ==========================================================================
   Behind the Lashes — video editorial grid
   ========================================================================== */
.editorial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;}
.editorial-card{position:relative;}
.editorial-card__media{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink);margin-bottom:1rem;
}
.editorial-card__media img,.editorial-card__media video{width:100%;height:100%;object-fit:cover;}
.editorial-card__play{
  position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;
  border:1px solid var(--cream);color:var(--cream);display:flex;align-items:center;justify-content:center;
  background:rgba(33,23,20,.25);
}
.editorial-card h3{font-size:var(--step-1);margin-bottom:.4rem;}
.editorial-card p{color:var(--ink-70);font-size:var(--step--1);margin-bottom:.8rem;}
@media (max-width:860px){.editorial-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   Newsletter band
   ========================================================================== */
.join-band{
  background:var(--rosewood);color:var(--cream);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem;
  padding:clamp(2.5rem,5vw,4rem);
}
.join-band h2{font-size:var(--step-2);margin-bottom:.4rem;}
.join-band p{color:rgba(251,247,242,.8);margin:0;}
.join-form{display:flex;gap:.75rem;min-width:340px;}
.join-form input{
  flex:1;padding:.9rem 1.1rem;border:1px solid rgba(251,247,242,.4);
  background:transparent;color:var(--cream);border-radius:var(--radius);
}
.join-form input::placeholder{color:rgba(251,247,242,.6);}
@media (max-width:760px){.join-band{grid-template-columns:1fr;}.join-form{min-width:0;width:100%;}}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--ink);color:var(--blush);padding-top:3.5rem;}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.5rem;padding-bottom:3rem;}
.footer-grid h4{font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem;color:var(--gold);}
.footer-grid ul li{margin-bottom:.6rem;}
.footer-grid a{color:rgba(243,230,222,.8);}
.footer-grid a:hover{color:var(--cream);}
.footer-logo{font-family:var(--f-display);font-size:var(--step-2);margin-bottom:.75rem;}
.footer-social{display:flex;gap:1rem;margin-top:1.25rem;}
.footer-social a{width:34px;height:34px;border:1px solid rgba(243,230,222,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.footer-bottom{
  border-top:1px solid rgba(243,230,222,.15);
  padding:1.25rem 0;display:flex;justify-content:space-between;
  font-size:var(--step--1);color:rgba(243,230,222,.6);flex-wrap:wrap;gap:.75rem;
}
@media (max-width:860px){.footer-grid{grid-template-columns:repeat(2,1fr);}}

/* ==========================================================================
   Native WooCommerce buttons — premium, square, no default rounding
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button{
  display:inline-flex !important;align-items:center;justify-content:center;
  background:var(--ink) !important;color:var(--cream) !important;
  border:1px solid var(--ink) !important;border-radius:0 !important;
  padding:.95rem 2.1rem !important;
  font-family:var(--f-body) !important;font-size:var(--step--1) !important;
  letter-spacing:.1em !important;text-transform:uppercase !important;font-weight:600 !important;
  box-shadow:none !important;transition:opacity .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover{opacity:.85;}
.woocommerce .quantity .qty{
  border:1px solid var(--line);border-radius:0;padding:.85rem .75rem;
  width:64px;text-align:center;font-family:var(--f-body);
}
.woocommerce form.cart{display:flex;gap:.85rem;align-items:center;margin:1.5rem 0;}

/* ==========================================================================
   Single product page
   ========================================================================== */
.product-single{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start;}
.product-single__gallery img{margin-bottom:.75rem;}
.product-single__price{font-size:var(--step-1);color:var(--rosewood);font-weight:600;margin-bottom:1rem;}
.product-single__meta{margin-top:2rem;border-top:1px solid rgba(33,23,20,.12);padding-top:1.25rem;font-size:var(--step--1);color:var(--ink-70);}
@media (max-width:860px){.product-single{grid-template-columns:1fr;}}

/* ==========================================================================
   Cart / checkout minimal polish
   ========================================================================== */
.woocommerce table.shop_table{border-collapse:collapse;width:100%;}
.woocommerce table.shop_table th{
  text-align:left;font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:.75rem;
}
.woocommerce table.shop_table td{padding:1rem 0;border-bottom:1px solid rgba(33,23,20,.1);}
.woocommerce-checkout input,.woocommerce-checkout select,.woocommerce-checkout textarea{
  border:1px solid rgba(33,23,20,.25);border-radius:var(--radius);padding:.75rem;width:100%;
}

/* ==========================================================================
   Utility
   ========================================================================== */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}