@charset "utf-8";
/* CSS Document */
:root{
  --ivory:#F8F6F2;
  --warm-white:#FCFBF8;
  --sand:#E8DFD4;
  --beige:#DCCFC1;
  --taupe:#B5A89B;
  --taupe-dark:#8A7D70;
  --charcoal:#2C2C2C;
  --ink:#1a1a1a;
  --gold:#C9A46A;
  --gold-soft:#E4CFA6;
  --line:rgba(44,44,44,.12);
  --shadow-soft: 0 30px 60px -30px rgba(60,45,30,.18), 0 12px 24px -18px rgba(60,45,30,.12);
  --shadow-lift: 0 40px 80px -40px rgba(60,45,30,.28);

  --font-serif:'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans:'Inter', 'Manrope', system-ui, sans-serif;

  --radius-sm:10px;
  --radius:22px;
  --radius-lg:32px;

  --container: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
}
/*----------------
RESET CSS
-----------------*/
body {
	margin: auto;
	padding: 0;
	color:var(--charcoal);
	background:var(--warm-white);
	font-family:var(--font-sans);
	font-weight: 400;
	
}
div, ul, h1, h2, h3, h4, h5, li, p, img, form, input, textarea {
	margin: 0;
	padding: 0;
}
header, section, footer, aside, nav, main, article, figure {
	display: block;
}
table, tr, td {border: 0;}
a {
	outline: none;
	color: #333;
	text-decoration: none;
}
a:hover {
	outline: none;
	text-decoration: none;
}
img {border: none; max-width:100%; vertical-align:middle; height:auto;}
li {list-style: none;}
* {box-sizing: border-box;}
.clearall {
	clear: both;
	font-size: 1px;
	line-height: 1px;
	height: 1px;
}
h1,h2,h3,h4{font-family:var(--font-serif); font-weight:400; letter-spacing:-.01em; color:var(--ink); margin:0}

/*-----------------------
MAIN CSS START
------------------------*/
.container{max-width:var(--container); margin:0 auto; padding:0}
.eyebrow{
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--taupe-dark);
	font-weight: 500;
	margin-bottom: 20px;
}
.eyebrow .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold); margin-right:10px; vertical-align:middle}

/* ==========================================================
   Buttons
   ========================================================== */
.btn{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 32px;
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: transform .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease;
	will-change: transform;
}
.btn-primary{background:var(--ink); color:var(--warm-white)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 40px -20px rgba(0,0,0,.4); background:var(--charcoal)}
.btn-ghost{border:1px solid var(--charcoal); color:var(--charcoal)}
.btn-ghost:hover{background:var(--ink); color:var(--warm-white); transform:translateY(-2px)}
.btn-gold{background:var(--gold); color:#fff}
.btn-gold:hover{background:#b78e56; transform:translateY(-2px)}
.btn svg{width:14px; height:14px}
/*-------------------------
CSS FOR TOP LOGO BAR
--------------------------*/
.blue-strip {
	float: left;
	width: 100%;
	background: #000000;
	padding: 5px 0;	
}
.bluestrip-txt{
	font-size:18px;
	line-height:22px;
	color:#fff;
	text-align:center;
}

/*-------------------------
CSS FOR TOP LOGO BAR
--------------------------*/
.top-bar {
	float: left;
	width: 100%;
	/*background: #fff;*/
	height: 78px;
	margin-top: -78px;
	position: relative;
	top: 78px;
	padding:12px 0;
}
.top-sec {
	float: left;
	width: 100%;
	margin-bottom: 78px;
}
/*----------------
MENU BAR CSS
-----------------*/
.logo{
	float: left;
        max-width: 130px;
    margin: 5px 0 0 0;
}
.menu-bar {
	margin: 13px 0 0 0;
    float: right;
}
.menu-bar li {
	float: left;
	position:relative;
}
.menu-bar li a {
	float: left;
    line-height: 18px;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--charcoal);
    position: relative;
    padding: 6px 20px;
}
.menu-bar li:after {
	content: '';
	position: absolute;
	width: 1px;
	height: 17px;
	background: #000000;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.menu-bar li:last-child:after{
	display:none;
}
.menu-bar li a:hover, .menu-bar li a.active {
	color: #000;
	text-decoration: none;
}
a.cart-top{
	float: right;
    font-size: 18px;
    line-height: 16px;
    color: #2d2d2d;
    margin-top: 10px;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px #d2d2d2;
}

.fixed-nav {
	background:#fff;
	position: fixed;
	z-index: 99999999;
	top: 0;
	-webkit-transition: margin .3s ease-out;
	transition: margin .3s ease-out;
	margin-top: 0;
	border-bottom: 1px solid #efede7;
}
	
/* ==========================================================
   HERO
========================================================== */
.hero{
	position: relative;
	padding: 196px 0;
	background: url(../images/banner.webp) no-repeat center top;
	overflow: hidden;
	display: inline-block;
	width: 100%;
}
.hero::before, .hero::after{
	content:""; position:absolute; border-radius:50%; filter:blur(60px); opacity:.55;
	animation: float 14s ease-in-out infinite;
}
.hero::before{ width:520px; height:520px; background:radial-gradient(circle, #f0d9b5, transparent 65%); top:-120px; left:-80px}
.hero::after{ width:600px; height:600px; background:radial-gradient(circle, #e8ded1, transparent 65%); bottom:-200px; right:-120px; animation-delay:-6s}
@keyframes float{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(30px,-40px)}
}
.hero-grd{
	display:grid;
	grid-template-columns: 1.05fr .95fr;
	gap:60px; align-items:center;
}
.hero-content{position:relative; z-index:2; max-width:640px}
.hero h1{
	font-size: clamp(48px, 6vw, 100px);
	line-height: .98;
	margin: 25px 0 30px;
	font-weight: 500;
}
.hero h1 em{font-style:italic; color:var(--gold); font-weight:300}
.hero p.lede{
	font-size: 17px;
	color: var(--taupe-dark);
	max-width: 100%;
	line-height: 28px;
	margin-bottom: 40px;
}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; margin-top:30px;}
.hero-trust{
	display: flex;
	gap: 40px;
	margin-top: 52px;
	padding-top: 30px;
	border-top: 1px solid var(--line);
	max-width: 100%;
}
.trust-item{display: flex; flex-direction: column; gap: 8px;}
.trust-item strong{font-family:var(--font-serif); font-size:22px; color:var(--ink)}
.trust-item span{ font-size: 10px; letter-spacing: 1px; text-transform: uppercase;  color: var(--taupe-dark);}

.hero-visual{
	position:relative; z-index:2;
	aspect-ratio: 4/5;
	border-radius:var(--radius-lg);
	overflow:hidden;
	box-shadow:var(--shadow-lift);
	transform:translateY(0);
	animation:heroReveal 1.4s cubic-bezier(.16,1,.3,1) both;
}
.hero-visual img{width:100%; height:100%; object-fit:cover}
.hero-visual .float-card{
	position:absolute; background:rgba(252,251,248,.72); backdrop-filter:blur(14px);
	padding:16px 20px; border-radius:14px; border:1px solid rgba(255,255,255,.6);
	box-shadow:0 20px 40px -20px rgba(0,0,0,.2);
	display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.08em;
}
.hero-visual .float-card.a{ top:32px; left:32px}
.hero-visual .float-card.b{ bottom:32px; right:32px}
.hero-visual .float-card .dot{width:8px; height:8px; border-radius:50%; background:var(--gold)}

@keyframes heroReveal{
	from{opacity:0; transform:translateY(40px) scale(.98)}
	to{opacity:1; transform:translateY(0) scale(1)}
}

/* ==========================================================
   Intro — asymmetric editorial
========================================================== */
.intro{    
	display: inline-block;
    width: 100%;
    vertical-align: top;
    padding: 80px 0;
}
.intro-grid{
	display:grid;
	grid-template-columns: 1fr 1.2fr;
	gap:80px; align-items:center;
}
.intro-media{
	position: relative;
	aspect-ratio: 4 / 4;
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.intro-media img{width:100%; height:100%; object-fit:cover}
.intro-media .overlap{
	position:absolute; bottom:-40px; right:-40px; width:60%; aspect-ratio:1;
	border-radius:50%;
	background:url('../images/texture.jpg') center/cover;
	box-shadow:var(--shadow-lift);
	border:8px solid var(--ivory);
}
.intro-copy{padding:20px 0}
.common-heading{
	font-size: clamp(40px, 5vw, 60px);
	line-height: clamp(48px, 5.6vw, 68px);
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: capitalize;
}
.common-heading em{font-style:italic; color:var(--gold); font-weight:300}
.common-text{
	margin-top: 30px;
	font-size: 17px;
	color: var(--taupe-dark);
	line-height: 28px;
}
.intro-copy .signature{
	margin-top:40px; font-family:var(--font-serif); font-style:italic; font-size:22px; color:var(--ink);
}
.intro-copy .signature small{
	display:block; font-family:var(--font-sans); font-style:normal;
	font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--taupe-dark); margin-top:6px;
}


/* Marquee */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:22px 0; background:var(--warm-white);
}
.marquee-track{
  display:flex; gap:80px; white-space:nowrap;
  animation:scroll 40s linear infinite;
  font-family:var(--font-serif); font-size:22px; color:var(--taupe);
  font-style:italic;
}
.marquee-track span{display:inline-flex; align-items:center; gap:80px}
.marquee-track span::after{content:"✽"; color:var(--gold); font-style:normal; font-size:16px}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ==========================================================
   Benefits — glass cards
========================================================== */
.benefits{
	background: linear-gradient(180deg, var(--ivory), var(--warm-white)), radial-gradient(circle at 80% 20%, rgba(201, 164, 106, .15), transparent 40%);
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 80px 0;
}
.benefits-grid{
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 50px;
}
.benefit{
	padding:44px 32px 36px;
	border-radius:var(--radius);
	background:rgba(255,255,255,.55);
	backdrop-filter: blur(14px);
	border:1px solid rgba(255,255,255,.9);
	box-shadow:var(--shadow-soft);
	transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
	position:relative; overflow:hidden;
}
.benefit:hover{transform:translateY(-8px); box-shadow:var(--shadow-lift)}
.benefit .num{
	font-family:var(--font-serif); font-size:14px; color:var(--gold);
	letter-spacing:.2em;
}
.benefit .icon{
	width:60px; height:60px; border-radius:14px;
	background:linear-gradient(135deg, var(--sand), var(--warm-white));
	display:grid; place-items:center; margin:18px 0 24px;
	border:1px solid rgba(255,255,255,.9);
	box-shadow: inset 0 -6px 14px rgba(201,164,106,.15);
}
.benefit .icon img{width:40px; height:40px; color:var(--taupe-dark)}
.benefit h3{font-size:24px; margin-bottom:12px}
.benefit p{    
	color: var(--taupe-dark);
    font-size: 16px;
    line-height: 26px;
}

/* ==========================================================
   Why choose — timeline
   ========================================================== */
.why{
	background: var(--ink);
    color: var(--warm-white);
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
    padding: 80px 0;
}
.why h2, .why h3{color:var(--warm-white)}
.why .eyebrow{color:var(--gold-soft)}
.why::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(201,164,106,.15), transparent 40%),
    radial-gradient(ellipse at 80% 80%, rgba(181,168,155,.1), transparent 40%);
  pointer-events:none;
}
.why-inner{position:relative; z-index:1}
.why-list{
	display: grid;
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	margin-top: 50px;
}
.why-item{
	display: grid;
	grid-template-columns: 80px 1fr 1fr 60px;
	/* gap: 10px; */
	align-items: center;
	padding: 44px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	transition: background .4s ease, padding .4s ease;
	cursor: pointer;
}
.why-item:hover{background:rgba(255,255,255,.03); padding-left:20px}
.why-item .num{
  font-family:var(--font-serif); font-size:34px; color:var(--gold);
}
.why-item h3{font-size:clamp(24px, 3vw, 38px); font-weight:300; letter-spacing:-.01em}
.why-item p{color:rgba(255,255,255,.6); font-size:15px; line-height:1.7}
.why-item .arrow{
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center;
  transition:background .35s ease, transform .35s ease;
}
.why-item:hover .arrow{background:var(--gold); border-color:var(--gold); transform:rotate(-45deg)}
.why-item .arrow svg{width:16px; height:16px}

/* ==========================================================
   Products
   ========================================================== */
 .products{
	display:inline-block;
	width:100%;
	padding:80px 0;
 }
.products-grid{
  display:grid; gap:32px;
  grid-template-columns: repeat(3, 1fr);
  margin-top:50px;
}
.product-card{
  border-radius:var(--radius); overflow:hidden;
  background:var(--warm-white);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
  position:relative;
}
.product-card:hover{transform:translateY(-6px)}
.product-media{
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 4.5;
	border-radius: var(--radius);
	background: var(--sand);
	display: flex;
	align-items: center;
}
.product-media img{
  width:100%; transition:transform 1.2s cubic-bezier(.16,1,.3,1);
}
.product-card:hover .product-media img{transform:scale(1.06)}
.product-media .label{
  position:absolute; top:20px; left:20px;
  background:rgba(252,251,248,.85); backdrop-filter:blur(10px);
  padding:8px 14px; border-radius:999px;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink);
}
.product-media .wishlist{
  position:absolute; top:20px; right:20px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(252,251,248,.85); backdrop-filter:blur(10px);
  display:grid; place-items:center;
  transition:background .3s ease, color .3s ease;
}
.product-media .wishlist:hover{background:var(--gold); color:#fff}
.product-media .wishlist svg{width:16px; height:16px}
.product-media .quick{
  position:absolute; bottom:20px; left:50%; transform:translate(-50%, 20px);
  background:var(--ink); color:var(--warm-white);
  padding:12px 22px; border-radius:999px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; transition:all .45s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
}
.product-card:hover .product-media .quick{opacity:1; transform:translate(-50%,0)}

.product-info{
  padding:24px 4px 8px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
}
.product-info h3{ font-size: 26px; margin-bottom: 0;}
.product-info .stars{color:var(--gold); font-size:12px; letter-spacing:.2em}
.product-info .price{font-family:var(--font-serif); font-size:22px; color:var(--ink)}
.product-info .desc{ color: var(--taupe-dark); font-size: 14px; margin-bottom: 10px;}
.add-cart-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 4px 4px;
}
.add-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); padding:8px 0;
  border-bottom:1px solid var(--ink);
  transition:color .3s ease, border-color .3s ease;
}
.add-btn:hover{color:var(--gold); border-color:var(--gold)}

/* ==========================================================
   Shop page
   ========================================================== */
.page-hero{
	padding: 40px 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(201, 164, 106, .15), transparent 55%), linear-gradient(180deg, var(--warm-white), var(--ivory));
    text-align: center;
    display: inline-block;
    width: 100%;
}
.page-hero .eyebrow{ margin:0 0 0 0;}
.page-hero h1{
	font-size:clamp(56px, 10vw, 140px); font-weight:300;
	letter-spacing:-.03em; line-height:.98; margin-top:20px;
}
.page-hero h1 em{font-style:italic; color:var(--gold); font-weight:300}
.page-hero p{margin:26px auto 0; max-width:560px; color:var(--taupe-dark); font-size:17px}

.shop-toolbar{
	max-width:var(--container); margin:0 auto; padding:32px var(--gutter);
	display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
	border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.filter-chip{
	padding:10px 20px; border-radius:999px; border:1px solid var(--line);
	font-size:12px; letter-spacing:.14em; text-transform:uppercase;
	transition:all .3s ease;
}
.filter-chip.active, .filter-chip:hover{background:var(--ink); color:var(--warm-white); border-color:var(--ink)}
.sort-select{
	padding:12px 20px; border-radius:999px; border:1px solid var(--line);
	font-size:12px; letter-spacing:.14em; text-transform:uppercase; background:var(--warm-white);
	color:var(--ink);
}

/* ==========================================================
   PDP
========================================================== */
.pdp{
  padding-top:130px;
  display:grid; grid-template-columns: 1.1fr 1fr; gap:80px;
  max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);
}
.pdp-gallery{display:grid; gap:16px}
.pdp-gallery .main{
  aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--sand);
      display: flex;
    align-items: center;
}
.pdp-gallery .main img{width:100%;}
.pdp-thumbs{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px}
.pdp-thumbs .thumb{
  aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--sand);
  border:2px solid transparent; transition:border-color .3s ease;
}
.pdp-thumbs .thumb.active{border-color:var(--gold)}
.pdp-thumbs .thumb img{width:100%; height:100%; object-fit:cover}

.pdp-info{position:sticky; top:120px; align-self:start; padding-top:20px}
.pdp-info .stars{color:var(--gold); letter-spacing:.2em; font-size:14px}
.pdp-info h1{font-size:clamp(40px, 5vw, 64px); font-weight:300; letter-spacing:-.02em; margin:14px 0 20px; line-height:1}
.pdp-info .price{font-family:var(--font-serif); font-size:36px; color:var(--ink)}
.pdp-info .price small{
  font-family:var(--font-sans); font-size:12px; letter-spacing:.18em;
  color:var(--taupe-dark); text-transform:uppercase; margin-left:10px;
}
.pdp-info .desc{margin-top:24px; color:var(--taupe-dark); font-size:16px; line-height:1.8}
p.s1-p2 {
    margin-top: 30px;
    font-size: 17px;
    color: var(--taupe-dark);
    line-height: 28px;
}

.pdp-highlights{
	margin-top: 25px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.pdp-highlight{
	padding: 10px 15px;
	border: 1px solid var(--line);
	border-radius: 14px;
	display: flex;
	gap: 12px;
	align-items: center;
}
.pdp-highlight .ic{
  width:40px; height:40px; border-radius:10px; background:var(--ivory);
  display:grid; place-items:center; color:var(--gold);
}
.pdp-highlight .ic svg{width:18px; height:18px}
.pdp-highlight p{   
	font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 5px;
    font-family: var(--font-serif);
}
.pdp-highlight small{
	font-size: 14px;
    color: var(--taupe-dark);
    display: block;
    line-height: 24px;}

.pdp-qty{
  margin-top:32px; display:flex; align-items:center; gap:20px;
}
.pdp-qty .option-field {
    height: 50px;
    width: 250px;
    font-size: 15px;
    line-height: 20px;
    color: var(--taupe-dark);
    text-align: left;
    padding: 10px 13px;
    outline: none;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    font-family: inherit;
}
.pdp-qty h4{ font-size:22px;}
.qty-box{
  display:flex; align-items:center; border:1px solid var(--line);
  border-radius:999px; padding:6px;
}
.qty-box button{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  transition:background .3s ease;
}
.qty-box button:hover{background:var(--sand)}
.qty-box span{padding:0 16px; font-family:var(--font-serif); font-size:18px}
.pdp-actions{margin-top:30px; display:flex; gap:12px; flex-wrap:wrap}
.pdp-actions .btn-primary{flex:1; justify-content:center; min-width:220px}
.pdp-wishlist{
  width:56px; height:56px; border-radius:999px; border:1px solid var(--line);
  display:grid; place-items:center; transition:all .3s ease;
}
.pdp-wishlist:hover{background:var(--ink); color:var(--warm-white); border-color:var(--ink)}

.accordion{margin-top:40px; border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{
	width: 100%;
	padding: 22px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	border: none;
	background: none;
}
.acc-head h4{font-family: var(--font-serif); font-size: 22px; font-weight: 400; text-transform: capitalize;}
.acc-head .plus{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; font-size:14px; transition:transform .3s ease, background .3s ease;
}
.acc-item.open .plus{background:var(--gold); color:#fff; transform:rotate(45deg); border-color:var(--gold)}
.acc-body{
  max-height:0; overflow:hidden; transition:max-height .5s ease, padding .5s ease;
  color:var(--taupe-dark); font-size:15px; line-height:1.8;
}
.acc-item.open .acc-body{max-height:400px; padding:0 0 24px}

.cart-items{display:grid; gap:20px}
.cart-item{
  display:grid; grid-template-columns: 140px 1fr auto; gap:24px;
  padding:24px; background:var(--ivory); border-radius:var(--radius);
  align-items:center;
}
.cart-item img{width:140px; aspect-ratio:1; object-fit:cover; border-radius:16px}
.cart-item h4{font-family:var(--font-serif); font-size:22px}
.cart-item .meta{color:var(--taupe-dark); font-size:13px; margin-top:4px}
.cart-item .price{font-family:var(--font-serif); font-size:22px; color:var(--ink); margin-top:12px}
.cart-item .remove{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe-dark);
  margin-top:12px; border-bottom:1px solid var(--line); padding-bottom:2px;
}
.cart-item .remove:hover{color:var(--gold); border-color:var(--gold)}

/* ==========================================================
   Contact
   ========================================================== */
.contact{
	display:inline-block;
	width:100%;
	padding:80px 0;
}
.contact-grid{
	max-width: var(--container);
    margin: 0 auto;
    padding: 50px 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
}
.contact-cards{display: grid; gap: 20px; grid-template-columns: 1fr 1fr;}
.contact-card{
  padding:32px; background:var(--ivory); border-radius:var(--radius);
  display:grid; grid-template-columns:56px 1fr; gap:20px; align-items:center;
  transition:transform .4s ease, box-shadow .4s ease;
}
.contact-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft)}
.contact-card .ic{
  width:56px; height:56px; border-radius:16px;
  background:linear-gradient(135deg, var(--sand), var(--warm-white));
  display:grid; place-items:center; color:var(--gold);
}
.contact-card .ic svg{width:22px; height:22px}
.contact-card h4{font-family:var(--font-serif); font-size:22px; margin-bottom:4px}
.contact-card p{ color: var(--taupe-dark); font-size: 16px; line-height: 26px;}
/*-------------------------
CSS FOR FOOTER
--------------------------*/
footer, .foo-btm {
	float: left;
	width: 100%;
	padding: 20px 0 25px 0;
	/* background: #ccc; */
	border-top: 1px solid #f3f3f3;
	text-align: center;	
}
.foo-logo{
	display:inline-block;
	vertical-align: middle;
	max-width: 250px;
	margin-bottom:20px;
}
.ftrBox2 {
    float: left;
    width: 100%;
    background: var(--ink);
    padding: 40px 0;
	position: relative;
}
.ftrBox2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 30%, rgba(201, 164, 106, .2), transparent 45%), radial-gradient(ellipse at 70% 70%, rgba(220, 207, 193, .08), transparent 45%);
}
.ftr-nav {
    display: inline-block;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0px 0 0;
}
.ftr-nav li {
        margin-right: 10px;
    display: inline-block;
    /* width: 30%; */
    text-align: center;
    color: #fff;
    font-size: 16px;
    line-height: 28px;
    position: relative;
    font-weight: 300;
}
/*.ftr-nav li:before{
	position: absolute;
	top: 7px;
	left: 0;
	content: '';
	width: 10px;
	height: 10px;
	background: #d09830;
}*/
ul.ftr-nav li a{ color:#fff;}
.ftr-nav li img{    
	display: inline-block;
	vertical-align: top;
	padding-top: 6px;
}
.ftr-nav li:nth-child(2) a:hover{ color:#fff;}
.ftr-nav li:last-child{ margin-right:0;}
.other-links {
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.other-links li{
	position: relative;
    margin-right: 20px;
    line-height: 28px;
}
.other-links li:last-child{margin-right:0;}
.other-links li:after{
	content:"";
	position:absolute;
	top:2px;
	bottom:2px;
	right:-10px;
	border-right:1px solid #ccc;
}
.other-links li:last-child:after{border:none;}
footer p, .foo-btm p {
	float: left;
	width: 100%;
	color: #2d2d2d;
	font-size: 16px;
	line-height: 20px;
	margin-top: 12px;
	font-weight: 300;
}
footer .ftr-txt2{
    float: left;
    width: 100%;
    color: #000;
    font-size: 16px;
    line-height: 26px;
    margin-top: 15px;
	}
footer p a{
	color: #2d2d2d;
	padding:0 5px;
}
.foo-btm{
	padding: 25px 0 25px 0;
	border-top: 1px solid var(--line);
	background: var(--warm-white);
}
.foo-btm p{margin:0;}


/*****************************/
/*TERMS- PRIVACY*/

.tems_bg {
	float: left;
	width: 100%;
	padding: 40px 0;
}
.trm-bx {
	background: #fff;
    width: 100%;
    float: left;
    text-align: left;
    font-size: 18px;
    line-height: 28px;
}
.trm-bx h1 {
	line-height: 30px;
    color: #000000;
    margin: 0;
    padding: 0px 0 10px;
    font-size: 22px;
    float: left;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 5px solid #000000;
}
.trm-bx h3 {
	line-height: 28px;
	text-align: left;
	font-size: 24px;
	float: left;
	width: 100%;
	margin: 0px 0 15px;
	color: #000;
	font-weight: 500;
}
.trm-bx li {
	font-size: 16px;
    line-height: 24px;
    float: left;
    width: 100%;
    list-style: decimal;
}
.trm-bx ol li {list-style: lower-roman;}
.trm-bx li ol li {list-style: lower-alpha;}
.trm-bx strong {text-transform: capitalize;}
.trm-bx span {
	text-transform: capitalize;
    display: block;
    font-weight: 700;
    margin-bottom: 5px;
}
.trm-bx p {
	font-size: 16px;
	line-height: 24px;
	float: left;
	width: 100%;
	margin-bottom: 10px;
	font-weight: 400;
}
.trm-bx h4, .trm-bx h5 {
	font-size: 22px;
    float: left;
    width: 100%;
    margin: 0px 0 10px;
    font-weight: 500;
    line-height: 30px;
}
.ingr-lst h4 {text-align: center;}
.ingr-lst img {
    display: block;
    margin: 0 auto 10px;
    max-width: 630px;
    width: 100%;
}
.trm-bx h5 {
	font-size: 20px;
	font-weight: 500;
}
.privacy-list {padding: 0 0 0 30px;}
.privacy-list li {font-weight: bold;}
.privacy-list li p {
	font-weight: normal;
	margin-top: 10px;
}
.mrg-tp {
	margin: 15px 0 !important;
	float: left;
	width: 100%
}
.trm-txt {
	float: left;
	width: 100%;
	background: #fff;
	padding: 20px 20px
}
.disclr-bx {
	border: 2px solid #000;
	padding: 10px;
	font-weight: 500;
	float: left;
	width: 100%;
	margin: 0;
}
.disclr-bx p {
	margin-bottom: 0;
	font-weight: bold;
}
.trm-bx ol, .trm-bx ul {
	margin-bottom: 20px;
    float: left;
    width: 100%;
    font-weight: 400;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
}
.trm-bx .disclmr {width: 100% !important;}
.thank-pg {
        float: left;
    width: 100%;
    text-align: center;
    padding: 30px 0
}
.thank-pg .s1-p2{
font-size: 18px;
    line-height: 28px;
    text-align: center;
    float: left;
    width: 100%;
    margin: 5px 0
}
.thank-hdg {
    float: left;
    width: 100%;
    font-size: 25px;
    margin: 10px 0;
}
.trm-bx table td, .trm-bx table th {
    padding: 14px;
    border: 1px solid #ccc;
}
.trm-bx table {
    float: left;
    width: 100%;
    border-collapse: collapse;
}


/*********************************/
.age-pop-overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0
}
.pop-up-bg {
	    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    z-index: 9999600;
    border: 0px;
    opacity: 0.3;
    background: #000;
}
.pop-up-bg-in {
	position: fixed;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    background: #000;
    transition: left 1s ease 0s;
    z-index: 10000010;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    text-align: center;
    display: flex;
    justify-content: center;
}
.pop-up-left {
	width: 100% ;
	height: 100% ;
	position: fixed ;
	left: 0px ;
	top: 0px ;
	border: 0px;
	background-color: rgb(0, 0, 0) ;
	display: none ;
	opacity: 0.8 ;
	z-index: 10000001 ;
}
.pop-up-left-txt {
	font-size: 16px;
    box-sizing: initial;
    overflow-wrap: break-word;
    transition: left 1s ease 0s;
    display: flex;
    text-align: left;
    padding: 20px;
    line-height: 24px;
    color: #fff;
    float: left;
    width: 100%;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
	flex-wrap: wrap;
}
.pop-innr {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 200px);
}
.pop-btn {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
}
.pop-up-left-txt span{
	font-weight: 700;
    font-size: 24px;
    margin-bottom: 15px;
    display: block;
	}
.pop-up-left-txt a{ text-decoration:underline;     display: inline-block; color: #fff}
.yes-btn, .no-btn {
    cursor: pointer;
    margin-top: 10px;
    height: 40px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    font-weight: 700;
    outline: none;
    box-shadow: none;
    background: #b45128;
    appearance: none;
    transition: left 1s ease 0s;
    display: inline-block;
    padding: 10px 20px;
    line-height: 16px;
    border-radius: 5px;
    border: none;
}
.no-btn {
    background: #333;
}
.error-sec{ float:left; width:100%;text-align:center;}
.card-error {
    max-width: 250px;
    margin-bottom: 20px;
}

/* ==========================================================
   Reveal animation
   ========================================================== */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1; transform:translateY(0)}	

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1024px){
  .hero{grid-template-columns:1fr; padding: 80px 0;}
  .hero-grd{grid-template-columns: 2fr .95fr;}
  .hero-trust{gap: 20px 30px;}
  .hero-visual{ order: -1; aspect-ratio: 4 / 4;}
  .intro-grid, .ritual-grid, .pdp, .cart-wrap, .checkout-grid, .contact-grid{grid-template-columns:1fr; gap:40px}
  .pdp-info, .cart-summary{position:static}
  .benefits-grid, .products-grid, .testimonial-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr; gap:40px}
  .why-item{grid-template-columns:70px 1fr 40px; gap:20px}
  .why-item p{grid-column:2/4}
}
@media (max-width: 640px){
  .nav-links{display:none}
  .menu-toggle{display:grid}
  .hero{padding: 40px 0; background:#ead8c0;}
  .hero-grd{ grid-template-columns: 1fr; gap: 40px;}
  .hero h1{ font-size: 50px; margin: 15px 0 20px;}
  .hero p.lede{font-size: 16px; line-height: 26px; margin-bottom: 20px;}
  .btn{ width:100%; justify-content: center;}
  
  .intro{ padding:40px 0;}
  .eyebrow { margin-bottom:10px;}
  .intro-copy {padding: 0;}
  .common-text{font-size: 16px; line-height: 26px; margin-top: 20px;}
  
  .marquee-track{animation: scroll 10s linear infinite;}
  .marquee-track{gap: 30px;}
  .marquee-track span{ gap: 30px;}
  
  .benefits, .why, .products, .pdp{padding:40px 0;}
  .benefit{padding:20px;}
  .benefits-grid{ margin-top:30px;}
  .benefits-grid, .products-grid, .testimonial-grid, .footer-grid{grid-template-columns:1fr}
  
  .why-item{ grid-template-columns: 30px 1fr 20px; gap: 20px; padding: 30px 0;}
  .why-item .arrow{ display:none;}
  
  .hero-trust{flex-wrap:wrap; gap:20px; margin-top: 40px;}
  .cart-item{grid-template-columns:80px 1fr auto; grid-template-areas: "img info" "img price"}
  .cart-item img{width:80px}
  .form-row{grid-template-columns:1fr}
  .steps-bar{gap:20px; flex-wrap:wrap}
  .news-form{flex-direction:column; border-radius:24px; padding:16px}
  .news-form input{text-align:center}
  
  .page-hero{padding: 20px 0;}
  .pdp-qty{    flex-wrap: wrap;}
  .pdp-info{padding-top: 40px;}
  .pdp-highlights{grid-template-columns:  1fr;}
  .pdp-actions .btn-primary{ min-width:100%;}
  
  .cart-item{ padding: 15px; gap: 15px;}
 
 .contact{ padding:40px 0;}
 .contact-cards{ grid-template-columns: 1fr;}
 .contact-card{padding: 15px;}
 .contact-grid{ padding:30px 0 0;}
  
  
}