body {
  margin: 0;
  font-family: system-ui;
  background: #f5efe6;
  color: #111;
}

* {
  box-sizing: border-box;
}

.app {
  width: 100%;
  min-height: 100vh;
}

/* HEADER */

.header {
  background: #efe7dc;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
}

.cart-icon {
  cursor: pointer;
  font-size: 22px;
}

/* CONTAINER */

.container {
  width: 100%;
  max-width: 1400px;
  margin: auto;
  padding: 18px;
}

.hero-title {
  font-size: 48px;
  margin-bottom: 12px;
}

.hero-subtitle {
  font-size: 20px;
  color: #666;
  margin-bottom: 30px;
}

/* PRODUCT GRID */

#products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* CARD */

.card {
  background: white;
  border-radius: 18px;
  overflow: hidden;
  padding: 14px;

  display: flex;
  flex-direction: column;

  transition: 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
}

.card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 14px;
  background: #eee;
}

.card h3 {
  margin-top: 14px;
  margin-bottom: 10px;
  font-size: 28px;
  line-height: 1.2;
}

.card p {
  color: #666;
  font-size: 16px;
  line-height: 1.5;

  min-height: 48px;
}

.price {
  font-size: 34px;
  font-weight: 700;
  margin-top: 14px;
}

.old-price {
  text-decoration: line-through;
  color: #999;
  font-size: 0.8em;
  font-weight: 400;
  margin-right: 6px;
}

.discount-tag {
  display: inline-block;
  background: #e63946;
  color: white;
  font-size: 0.55em;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.5px;
}

.btn {
  width: 100%;
  margin-top: auto;

  border: 1px solid #111;
  background: transparent;
  color: #111;

  padding: 16px;
  border-radius: 14px;

  font-size: 16px;
  cursor: pointer;

  transition: 0.2s;
}

.btn:hover {
  background: #111;
  color: white;
}

/* DRAWER */

.drawer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 999;
}

.hidden {
  display: none;
}

.drawer-content {
  position: absolute;
  right: 0;
  top: 0;

  width: 100%;
  max-width: 480px;

  height: 100vh;

  background: #f5efe6;

  padding: 24px;

  overflow-y: auto;
}

.drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 28px;
}

.drawer-title {
  font-size: 34px;
  font-weight: 700;
}

.close-btn {
  font-size: 36px;
  cursor: pointer;
}

/* DRAWER ITEM */

.drawer-item {
  display: flex;
  gap: 14px;

  background: white;
  border-radius: 18px;

  padding: 14px;

  margin-bottom: 18px;
}

.drawer-item img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 14px;
}

.drawer-info {
  flex: 1;
}

.drawer-info h3 {
  margin: 0;
  font-size: 26px;
  line-height: 1.3;
}

.drawer-price {
  font-size: 22px;
  font-weight: 700;
  margin-top: 12px;
}

/* QTY */

.qty-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.qty-btn {
  width: 42px;
  height: 42px;

  border: none;
  border-radius: 50%;

  background: #111;
  color: white;

  font-size: 24px;
  cursor: pointer;
}

.qty-number {
  font-size: 24px;
  font-weight: 600;
}

/* DRAWER FOOTER */

.drawer-footer {
  margin-top: 30px;
}

.total-text {
  font-size: 34px;
  font-weight: 700;
}

.checkout-btn {
  width: 100%;
  margin-top: 20px;

  padding: 18px;

  border: none;
  border-radius: 14px;

  background: #111;
  color: white;

  font-size: 18px;
  cursor: pointer;
}

.continue-btn {
  width: 100%;
  margin-top: 14px;

  padding: 18px;

  border: 1px solid #111;
  border-radius: 14px;

  background: transparent;

  font-size: 18px;
  cursor: pointer;
}

/* CART PAGE */

.cart-page {
  max-width: 1000px;
  margin: auto;
}

.cart-card {
  background: white;
  border-radius: 20px;

  padding: 16px;

  display: flex;
  gap: 18px;

  margin-bottom: 20px;
}

.cart-img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 16px;
}

.cart-info {
  flex: 1;
}

.cart-info h3 {
  margin: 0;
  font-size: 30px;
}

.cart-price {
  margin-top: 12px;
  font-size: 24px;
  font-weight: 700;
}

.cart-total-box {
  background: white;
  border-radius: 20px;

  padding: 24px;
}

.cart-total {
  font-size: 34px;
  font-weight: 700;
}

/* CHECKOUT */

.checkout-container {
  width: 100%;
  max-width: 700px;
  margin: auto;
}

.checkout-title {
  font-size: 52px;
  margin-bottom: 30px;
}

.input {
  width: 100%;

  padding: 18px;
  margin-bottom: 18px;

  border-radius: 14px;
  border: 1px solid #ccc;

  font-size: 18px;

  background: white;
}

textarea.input {
  min-height: 120px;
  resize: vertical;
}

.checkout-total {
  font-size: 38px;
  font-weight: 700;
  margin-top: 20px;
}

.pay-btn {
  width: 100%;
  margin-top: 24px;

  border: none;
  border-radius: 14px;

  padding: 20px;

  background: #111;
  color: white;

  font-size: 20px;
  cursor: pointer;
}

/* TABLET */

@media (max-width: 1100px) {

  #products {
    grid-template-columns: repeat(3, 1fr);
  }

  .card img {
    height: 260px;
  }

  .card h3 {
    font-size: 22px;
  }

  .hero-title {
    font-size: 40px;
  }
}

/* MOBILE */

@media (max-width: 768px) {

  .container {
    padding: 14px;
  }

  .hero-title {
    font-size: 26px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  #products {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .card {
    padding: 10px;
    border-radius: 14px;
  }

  .card img {
    height: 150px;
    border-radius: 10px;
  }

  .card h3 {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 6px;
  }

  .card p {
    font-size: 12px;
    min-height: 38px;
  }

  .price {
    font-size: 18px;
  }

  .old-price {
    font-size: 0.75em;
  }

  .btn {
    padding: 12px;
    font-size: 14px;
    border-radius: 10px;
  }

  .drawer-content {
    max-width: 100%;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;

    top: auto;
    bottom: 0;

    height: 88vh;
  }

  .drawer-title {
    font-size: 22px;
  }

  .drawer-item img {
    width: 90px;
    height: 90px;
  }

  .drawer-info h3 {
    font-size: 16px;
  }

  .drawer-price {
    font-size: 18px;
  }

  .qty-btn {
    width: 34px;
    height: 34px;
    font-size: 20px;
  }

  .qty-number {
    font-size: 18px;
  }

  .total-text {
    font-size: 26px;
  }

  .checkout-btn,
  .continue-btn {
    font-size: 16px;
    padding: 15px;
  }

  .cart-card {
    flex-direction: column;
  }

  .cart-img {
    width: 100%;
    height: 240px;
  }

  .cart-info h3 {
    font-size: 20px;
  }

  .cart-price {
    font-size: 18px;
  }

  .cart-total {
    font-size: 26px;
  }

  .checkout-title {
    font-size: 34px;
  }

  .input {
    font-size: 16px;
    padding: 14px;
  }

  .checkout-total {
    font-size: 28px;
  }

  .pay-btn {
    padding: 16px;
    font-size: 18px;
  }
}


/* VARIANT MODAL */

.variant-modal{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.5);

  display:flex;
  justify-content:center;
  align-items:center;

  z-index:3000;

  padding:20px;
}

.variant-box{
  width:90%;
  max-width:520px;
  max-height:90vh;
  overflow-y:auto;

  background:#f5efe6;

  border-radius:24px;

  padding:24px;

  position:relative;
}

.variant-close{
  position:absolute;
  top:14px;
  right:18px;
  font-size:32px;
  cursor:pointer;
}

.variant-image{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:18px;
}

.variant-title{
  font-size:24px;
  margin-top:16px;
  color:#111;
}

.variant-price{
  font-size:28px;
  font-weight:700;
  margin-top:10px;
}

.variant-options{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.variant-option{
  border:none;
  background:white;
  padding:12px 18px;
  border-radius:999px;
  cursor:pointer;
}

.variant-option.active{
  background:#111;
  color:white;
}

.variant-add-btn{
  width:100%;
  margin-top:24px;
  padding:16px;
  border:none;
  border-radius:14px;
  background:#111;
  color:white;
  font-size:16px;
}

.variant-cart-btn{
  width:100%;
  margin-top:12px;
  padding:16px;
  border-radius:14px;
  border:1px solid #111;
  background:transparent;
}

.hidden{
  display:none;
}

/* CHECKOUT ITEMS */

.checkout-item{
  display:flex;
  gap:14px;

  background:white;

  padding:14px;
  border-radius:18px;

  margin-bottom:16px;
}

.checkout-item-img{
  width:90px;
  height:90px;

  object-fit:cover;

  border-radius:12px;
}

.checkout-item-info{
  flex:1;
}

.checkout-item-info h3{
  margin:0;
  font-size:18px;
}

.checkout-variant{
  display:inline-block;

  margin-top:8px;

  padding:4px 10px;

  background:#efe7dc;

  border-radius:999px;

  font-size:12px;
  font-weight:600;
}

.checkout-item-price{
  margin-top:10px;
  font-size:18px;
  font-weight:700;
}




/* ADMIN */

.admin-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
}

.admin-add-btn{
  border:none;
  background:#111;
  color:white;
  padding:14px 18px;
  border-radius:12px;
  cursor:pointer;
}

.admin-card{
  background:white;
  border-radius:20px;
  padding:16px;
  display:flex;
  gap:18px;
  margin-bottom:18px;
}

.admin-img{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:14px;
}

.admin-info{
  flex:1;
}

.admin-info h3{
  margin:0;
}

.admin-actions{
  margin-top:14px;
}

.admin-delete-btn{
  border:none;
  background:#c62828;
  color:white;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
}

@media(max-width:768px){

  .admin-card{
    flex-direction:column;
  }

  .admin-img{
    width:100%;
    height:240px;
  }

  .admin-top{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
}




.admin-edit-btn{
  border:none;
  background:#111;
  color:white;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  margin-right:10px;
}

.admin-variant-btn{
  border:none;
  background:#444;
  color:white;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  margin-right:10px;
}

.admin-variant-card{
  background:white;
  padding:14px;
  border-radius:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

#admin-variants{
  max-height:300px;
  overflow-y:auto;
  margin-bottom:20px;
}

.admin-variant-card{
  background:white;
  border-radius:18px;
  padding:16px;
  margin-bottom:14px;

  display:flex;
  justify-content:space-between;
  align-items:center;
}

.admin-delete-btn{
  background:#dc2626;
  color:white;
  border:none;
  padding:10px 16px;
  border-radius:12px;
}

.admin-preview{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:18px;
  margin-top:14px;
}

/* CHECKOUT ITEMS */

.checkout-item{
  display:flex;
  gap:14px;

  background:white;

  padding:14px;
  border-radius:18px;

  margin-bottom:16px;
}

.checkout-item-img{
  width:90px;
  height:90px;

  object-fit:cover;

  border-radius:12px;
}

.checkout-item-info{
  flex:1;
}

.checkout-item-info h3{
  margin:0;
  font-size:18px;
}

.checkout-variant{
  display:inline-block;

  margin-top:8px;

  padding:4px 10px;

  background:#efe7dc;

  border-radius:999px;

  font-size:12px;
  font-weight:600;
}

.checkout-item-price{
  margin-top:10px;
  font-size:18px;
  font-weight:700;
}

.coupon-box{
  display:flex;
  gap:10px;
  margin:20px 0;
}

.apply-coupon-btn{
  border:none;
  background:#111;
  color:white;
  padding:0 20px;
  border-radius:12px;
  cursor:pointer;
  white-space:nowrap;
}

#coupon-message{
  margin-top:-8px;
  margin-bottom:20px;
  font-weight:600;
}

.shipping-strip{

  background:#111;
  color:white;

  text-align:center;

  padding:10px;

  font-size:13px;

  letter-spacing:1px;

  white-space:nowrap;

  overflow:hidden;

  position:relative;
}

.shipping-strip::after{

  content:
    "FREE DELIVERY ABOVE ₹599 ✨";

  position:absolute;

  left:100%;

  top:50%;

  transform:translateY(-50%);

  animation:
    marqueeMove 10s linear infinite,
    shippingGlow 1.4s infinite;

}

@keyframes marqueeMove{

  0%{
    left:100%;
  }

  100%{
    left:-100%;
  }
}

@keyframes shippingGlow{

  0%{
    text-shadow:
      0 0 0px white;
  }

  50%{
    text-shadow:
      0 0 10px white,
      0 0 18px white;
  }

  100%{
    text-shadow:
      0 0 0px white;
  }
}

.checkout-summary{
  background:white;
  padding:20px;
  border-radius:18px;
  margin-top:20px;
}

.summary-row{
  display:flex;
  justify-content:space-between;
  margin-bottom:14px;
}

.total-row{
  font-size:20px;
  font-weight:700;
}

#coupon-message{
  margin-top:10px;
  margin-bottom:16px;
  font-size:14px;
  font-weight:600;
}

.apply-coupon-btn{
  height:56px;
}

.coupon-success{

  animation:
    popBounce 0.7s ease;

  color:#0f9d58;
}

@keyframes popBounce{

  0%{
    transform:scale(0.8);
    opacity:0;
  }

  50%{
    transform:scale(1.08);
    opacity:1;
  }

  100%{
    transform:scale(1);
  }
}

.coupon-strip::after{

  content:
    "USE COUPON BOTAN10 AT CHECKOUT FOR 10% DISCOUNT ON ORDERS ABOVE ₹999 ✨";

  position:absolute;

  left:100%;

  top:50%;

  transform:translateY(-50%);

  animation:
    marqueeMove 14s linear infinite,
    shippingGlow 1.4s infinite;
}

.success-page{

  min-height:100vh;

  display:flex;

  justify-content:center;

  align-items:center;

  background:#f5f0e8;

  padding:20px;
}

.success-card{

  background:white;

  padding:40px 25px;

  border-radius:24px;

  text-align:center;

  max-width:400px;

  width:100%;
}

.success-icon{

  font-size:60px;

  margin-bottom:20px;
}

.continue-btn{

  display:inline-block;

  margin-top:25px;

  padding:14px 24px;

  background:black;

  color:white;

  text-decoration:none;

  border-radius:14px;
}


.success-note{

  margin-top:12px;

  font-size:15px;

  line-height:1.6;

  opacity:0.9;

  animation:
    blink 1.2s infinite;
}

@keyframes blink{

  0%{
    opacity:1;
  }

  50%{
    opacity:0.4;
  }

  100%{
    opacity:1;
  }
}

.footer{

  margin-top:120px;

  padding:
    60px 20px;

  text-align:center;

  background:#f7f4ee;
}

.footer-text{

  font-size:14px;

  color:#666;

  margin-bottom:24px;

  letter-spacing:0.4px;
}

.footer-instagram{

  display:inline-flex;

  align-items:center;

  gap:10px;

  text-decoration:none;

  color:#111;

  font-size:15px;

  transition:0.3s ease;
}

.footer-instagram:hover{

  opacity:0.65;
}

.footer svg{

  width:18px;

  height:18px;
}

.category-section{

  padding:
    80px 20px;

  background:
    #f8f5ef;
}

.category-header{

  text-align:center;

  margin-bottom:40px;
}

.category-label{

  font-size:12px;

  letter-spacing:2px;

  color:#777;

  margin-bottom:10px;
}

.category-header h2{

  font-size:34px;

  font-weight:500;
}

.category-carousel{

  display:flex;

  gap:20px;

  overflow-x:auto;

  scroll-snap-type:x mandatory;

  padding-bottom:10px;
}

.category-carousel::-webkit-scrollbar{

  display:none;
}

.category-card{

  position:relative;

  min-width:300px;

  height:420px;

  border-radius:28px;

  overflow:hidden;

  flex-shrink:0;

  scroll-snap-align:start;

  text-decoration:none;

  color:white;
}

.category-card img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:
    transform 0.5s ease;
}

.category-card:hover img{

  transform:scale(1.05);
}

.category-overlay{

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.55),
      rgba(0,0,0,0.05)
    );

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  padding:28px;
}

.category-overlay h3{

  font-size:30px;

  margin-bottom:8px;

  font-weight:500;
}

.category-overlay p{

  font-size:15px;

  opacity:0.9;

  line-height:1.6;
}

.category-hero{

  height:58vh;

  background:
    linear-gradient(
      rgba(0,0,0,0.35),
      rgba(0,0,0,0.35)
    ),

    url("https://images.unsplash.com/photo-1527799820374-dcf8d9d4a388?q=80&w=1600&auto=format&fit=crop");

  background-size:cover;

  background-position:center;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  padding:20px;

  color:white;
}

.category-hero-content p{

  letter-spacing:3px;

  font-size:12px;

  margin-bottom:14px;

  opacity:0.85;
}

.category-hero-content h1{

  font-size:54px;

  margin-bottom:18px;

  font-weight:500;
}

.category-hero-content span{

  max-width:620px;

  display:block;

  line-height:1.8;

  font-size:16px;

  opacity:0.95;
}

.category-products-section{

  padding:
    90px 24px;

  background:#f8f5ef;
}

.products-grid{

  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px,1fr)
    );

  gap:34px;

  max-width:1400px;

  margin:auto;
}

.premium-product-card{

  background:white;

  border-radius:28px;

  overflow:hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;

  box-shadow:
    0 8px 30px
    rgba(0,0,0,0.06);
}

.premium-product-card:hover{

  transform:
    translateY(-6px);

  box-shadow:
    0 14px 40px
    rgba(0,0,0,0.08);
}

.product-image-wrap{

  overflow:hidden;
}

.product-image-wrap img{

  width:100%;

  height:320px;

  object-fit:cover;

  transition:
    transform 0.5s ease;
}

.premium-product-card:hover
.product-image-wrap img{

  transform:scale(1.05);
}

.premium-product-info{

  padding:24px;
}

.premium-product-info h3{

  font-size:22px;

  margin-bottom:12px;

  font-weight:500;
}

.premium-price{

  font-size:18px;

  margin-bottom:20px;

  color:#444;
}

.premium-btn{

  width:100%;

  border:none;

  background:#111;

  color:white;

  padding:14px;

  border-radius:999px;

  font-size:14px;

  cursor:pointer;

  transition:0.3s ease;
}

.premium-btn:hover{

  opacity:0.82;
}

.launch-banner{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:60px;

  align-items:center;

  padding:90px 8%;
}

.launch-left span{

  letter-spacing:3px;

  font-size:14px;

  color:#8d7b68;
}

.launch-left h2{

  font-size:56px;

  margin:20px 0;

  line-height:1.1;
}

.launch-left p{

  font-size:18px;

  line-height:1.8;

  color:#666;

  margin-bottom:30px;
}

.launch-left button{

  padding:16px 34px;

  border:none;

  border-radius:999px;

  background:black;

  color:white;

  cursor:pointer;

  font-size:15px;
}

.launch-right img{

  width:100%;

  height:520px;

  object-fit:cover;

  border-radius:32px;
}

.spotlight-section{

  position:relative;

  height:95vh;

  margin:120px 0;

  overflow:hidden;

  border-radius:40px;
}

.spotlight-video-wrap{

  position:absolute;

  inset:0;
}

.spotlight-video{

  width:100%;

  height:100%;

  object-fit:cover;
}

.spotlight-overlay{

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    to right,
    rgba(0,0,0,0.72),
    rgba(0,0,0,0.15)
  );
}

.spotlight-content{

  position:relative;

  z-index:2;

  height:100%;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:0 8%;

  color:white;

  max-width:760px;
}

.spotlight-content span{

  letter-spacing:4px;

  font-size:14px;

  opacity:0.9;
}

.spotlight-content h2{

  font-size:88px;

  line-height:0.95;

  margin:26px 0;

  font-weight:500;
}

.spotlight-content p{

  font-size:20px;

  line-height:1.9;

  color:rgba(255,255,255,0.82);

  max-width:620px;

  margin-bottom:40px;
}

.spotlight-buttons{

  display:flex;

  gap:20px;
}

.spotlight-buttons button{

  padding:18px 38px;

  border:none;

  border-radius:999px;

  font-size:15px;

  cursor:pointer;

  transition:0.35s;
}

.spotlight-buttons button:first-child{

  background:white;

  color:black;
}

.spotlight-buttons button:first-child:hover{

  transform:translateY(-3px);
}

.ghost-btn{

  background:transparent;

  border:1px solid rgba(255,255,255,0.4) !important;

  color:white;
}

.ghost-btn:hover{

  background:white;

  color:black;
}

.ritual-badge{

  width:fit-content;

  padding:12px 22px;

  border-radius:999px;

  background:rgba(255,255,255,0.12);

  backdrop-filter:blur(10px);

  margin-top:20px;

  font-size:14px;

  letter-spacing:1px;
}

@media(max-width:768px){

  .spotlight-section{

    height:auto;

    border-radius:28px;

    margin:60px 0;
  }

  .spotlight-content{

    padding:80px 30px;
  }

  .spotlight-content h2{

    font-size:56px;

    line-height:0.95;
  }

  .spotlight-content p{

    font-size:17px;

    line-height:1.8;
  }

  .spotlight-buttons{

    flex-direction:column;
  }

  .spotlight-video{

    height:100%;
  }
}

.luxury-hero{

  position:relative;

  height:100vh;

  overflow:hidden;

  display:flex;

  align-items:center;

  padding:0 8%;

  color:white;

  background-size:cover;

  background-position:center;
}

.wellness-hero{

  background-image:
  linear-gradient(
    to right,
    rgba(0,0,0,0.58),
    rgba(0,0,0,0.15)
  ),
  url('https://images.unsplash.com/photo-1506126613408-eca07ce68773?q=80&w=1600&auto=format&fit=crop');
}

.hero-grain{

  position:absolute;

  inset:0;

  opacity:0.08;

  background-image:url(
    'https://grainy-gradients.vercel.app/noise.svg'
  );
}

.hero-glow{

  position:absolute;

  width:700px;

  height:700px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(255,210,160,0.18),
    transparent 70%
  );

  right:-200px;

  top:-120px;

  filter:blur(40px);
}

.hero-content{

  position:relative;

  z-index:2;

  max-width:720px;
}

.hero-content span{

  letter-spacing:4px;

  font-size:13px;

  opacity:0.85;
}

.hero-content h1{

  font-size:110px;

  line-height:0.92;

  margin:26px 0;

  font-weight:500;
}

.hero-content p{

  font-size:20px;

  line-height:1.9;

  color:rgba(255,255,255,0.82);

  max-width:580px;

  margin-bottom:38px;
}

.hero-buttons{

  display:flex;

  gap:20px;
}

.hero-buttons button{

  padding:18px 36px;

  border:none;

  border-radius:999px;

  cursor:pointer;

  font-size:15px;

  transition:0.35s;
}

.hero-buttons button:first-child{

  background:white;

  color:black;
}

.hero-buttons button:first-child:hover{

  transform:translateY(-3px);
}

.ghost-btn{

  background:rgba(255,255,255,0.08);

  backdrop-filter:blur(10px);

  border:1px solid rgba(255,255,255,0.15) !important;

  color:white;
}

.hero-floating-card{

  position:absolute;

  right:6%;

  bottom:8%;

  width:300px;

  border-radius:30px;

  overflow:hidden;

  backdrop-filter:blur(14px);

  background:rgba(255,255,255,0.08);

  border:1px solid rgba(255,255,255,0.12);

  z-index:2;
}

.hero-floating-card img{

  width:100%;

  height:320px;

  object-fit:cover;
}

.floating-info{

  padding:22px;
}

.floating-info p{

  font-size:13px;

  opacity:0.75;

  margin-bottom:10px;
}

.floating-info h3{

  font-size:28px;

  line-height:1.2;
}

@media(max-width:768px){

  .luxury-hero{

    height:92vh;

    padding:0 8%;
  }

  .hero-content h1{

    font-size:68px;
  }

  .hero-content p{

    font-size:16px;
  }

  .hero-buttons{

    flex-direction:column;
  }

  .hero-floating-card{

    display:none;
  }
}

.cinematic-hero{

  position:relative;

  height:100vh;

  overflow:hidden;

  color:white;



}



.hero-bg{

  width:100%;

  height:100%;

  object-fit:cover;

  transform:scale(1.04);
}

.hero-darkness{

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.12)
  );
}

.hero-topbar{

  position:absolute;

  top:40px;

  left:5%;

  right:5%;

  z-index:3;

  display:flex;

  align-items:center;

  gap:20px;

  font-size:12px;

  letter-spacing:4px;
}

.hero-line{

  flex:1;

  height:1px;

  background:
  rgba(255,255,255,0.25);
}

.hero-editorial{

  position:absolute;

  left:5%;

  bottom:9%;

  z-index:3;

  max-width:560px;
}

.hero-editorial h1{

  font-size:92px;

  line-height:0.9;

  font-weight:500;

  margin-bottom:24px;
}

.hero-editorial p{

  font-size:18px;

  line-height:1.9;

  color:rgba(255,255,255,0.82);

  margin-bottom:34px;

  max-width:500px;
}

.hero-editorial button{

  padding:18px 34px;

  border:none;

  border-radius:999px;

  background:white;

  color:black;

  font-size:14px;

  cursor:pointer;
}

.hero-product-card{

  position:absolute;

  right:5%;

  bottom:7%;

  width:280px;

  background:
  rgba(255,255,255,0.08);

  backdrop-filter:blur(18px);

  border:
  1px solid rgba(255,255,255,0.14);

  border-radius:28px;

  overflow:hidden;

  z-index:3;
}

.hero-product-card img{

  width:100%;

  height:320px;

  object-fit:cover;
}

.product-card-info{

  padding:22px;
}

.product-card-info span{

  font-size:12px;

  letter-spacing:2px;

  opacity:0.72;
}

.product-card-info h3{

  font-size:30px;

  margin:12px 0;
}

.product-card-info p{

  font-size:14px;

  opacity:0.82;
}

@media(max-width:768px){

  .hero-editorial{

    left:8%;

    right:8%;
  }

  .hero-editorial h1{

    font-size:64px;
  }

  .hero-editorial p{

    font-size:16px;
  }

  .hero-product-card{

    display:none;
  }
}

.typewriter{

  font-size:92px;

  line-height:0.9;

  white-space:pre-line;

  min-height:220px;

  

}




/* .product-showcase{

  min-height:100vh;

  display:grid;

  grid-template-columns:1fr 1fr;

  align-items:center;

  padding:120px 8%;

  position:relative;

  overflow:hidden;
}

.showcase-left span{

  letter-spacing:4px;

  font-size:13px;

  color:#8a7d6b;
}

.showcase-left h2{

  font-size:74px;

  line-height:0.95;

  margin:24px 0;
}

.showcase-left p{

  font-size:18px;

  line-height:1.9;

  color:#666;

  max-width:520px;

  margin-bottom:34px;
}

.showcase-left button{

  padding:18px 34px;

  border:none;

  border-radius:999px;

  background:black;

  color:white;

  cursor:pointer;
}

.showcase-center{

  position:relative;

  height:800px;

  display:flex;

  align-items:center;

  justify-content:center;
}

.product-glow{

  position:absolute;

  width:500px;

  height:500px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(201,160,112,0.28),
    transparent 70%
  );

  filter:blur(30px);
}

.floating-product{

  width:420px;

  position:relative;

  z-index:2;

  animation:floatBottle 5s ease-in-out infinite;

  filter:
  drop-shadow(
    0 40px 60px rgba(0,0,0,0.28)
  );
}

@keyframes floatBottle{

  0%{
    transform:
    translateY(0px)
    rotate(-3deg);
  }

  50%{
    transform:
    translateY(-22px)
    rotate(3deg);
  }

  100%{
    transform:
    translateY(0px)
    rotate(-3deg);
  }
} */


.product-showcase{

  min-height:100vh;

  display:grid;

  grid-template-columns:1fr 1fr;

  align-items:center;

  padding:120px 8%;

  position:relative;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #fff8f1 0%,
    #f9efe2 45%,
    #f4e4d1 100%
  );
}

/* SUN GLOW */

.product-showcase::before{

  content:"";

  position:absolute;

  width:700px;
  height:700px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(255,170,70,0.28),
    transparent 70%
  );

  top:-180px;
  right:-180px;

  filter:blur(40px);
}

/* LEFT CONTENT */

.showcase-left{

  position:relative;

  z-index:3;
}

.showcase-left span{

  letter-spacing:4px;

  font-size:13px;

  color:#c7772d;

  font-weight:600;
}

.showcase-left h2{

  font-size:78px;

  line-height:0.92;

  margin:24px 0;

  color:#111;

  max-width:580px;
}

.showcase-left p{

  font-size:18px;

  line-height:1.9;

  color:#6b6258;

  max-width:520px;

  margin-bottom:36px;
}

.showcase-left button{

  padding:18px 38px;

  border:none;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    #ff8a00,
    #ff5e00
  );

  color:white;

  font-size:15px;

  cursor:pointer;

  box-shadow:
  0 12px 30px rgba(255,120,0,0.28);

  transition:0.35s ease;
}

.showcase-left button:hover{

  transform:
  translateY(-4px)
  scale(1.03);
}

/* PRODUCT AREA */

.showcase-center{

  position:relative;

  height:820px;

  display:flex;

  align-items:center;

  justify-content:center;
}

/* MAIN PRODUCT GLOW */

.product-glow{

  position:absolute;

  width:520px;

  height:520px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(255,145,0,0.34),
    transparent 70%
  );

  filter:blur(45px);
}

/* PRODUCT IMAGE */

.floating-product{

  width:430px;

  position:relative;

  z-index:5;

  animation:
  sunscreenFloat 5s ease-in-out infinite;

  filter:
  drop-shadow(
    0 40px 80px rgba(0,0,0,0.22)
  );
}

@keyframes sunscreenFloat{

  0%{
    transform:
    translateY(0px)
    rotate(-4deg);
  }

  50%{
    transform:
    translateY(-24px)
    rotate(4deg);
  }

  100%{
    transform:
    translateY(0px)
    rotate(-4deg);
  }
}

/* BENEFIT CARDS */

.benefit-card{

  position:absolute;

  padding:24px;

  border-radius:28px;

  background:
  rgba(255,255,255,0.72);

  backdrop-filter:blur(20px);

  box-shadow:
  0 14px 40px rgba(0,0,0,0.08);

  z-index:6;

  animation:
  floatCard 4s ease-in-out infinite;
}

.benefit-card h4{

  font-size:24px;

  margin-bottom:8px;

  color:#111;
}

.benefit-card p{

  color:#666;

  line-height:1.6;
}

/* CARD POSITIONS */

.card-1{

  top:10%;

  left:0;
}

.card-2{

  top:42%;

  right:0;
}

.card-3{

  bottom:10%;

  left:10%;
}

@keyframes floatCard{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-12px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* MOBILE */

@media(max-width:768px){

  .product-showcase{

    grid-template-columns:1fr;

    padding:100px 8%;
  }

  .showcase-left h2{

    font-size:52px;
  }

  .showcase-center{

    height:620px;
  }

  .floating-product{

    width:280px;
  }

  .benefit-card{

    transform:scale(0.82);
  }
}



/* PRODUCT ABOVE CARDS */

.floating-product{

  width:430px;

  position:relative;

  z-index:20 !important;

  animation:
  sunscreenFloat 5s ease-in-out infinite;

  filter:
  drop-shadow(
    0 45px 80px rgba(255,120,0,0.35)
  );
}

/* BENEFIT CARDS BEHIND PRODUCT */

.benefit-card{

  z-index:5 !important;
}

/* NEW LAUNCHED GLOW */

.showcase-left span{

  letter-spacing:4px;

  font-size:13px;

  font-weight:700;

  color:#ff7a00;

  text-transform:uppercase;

  display:inline-block;

  position:relative;

  animation:
  glowLaunch 2s ease-in-out infinite;
}

@keyframes glowLaunch{

  0%{
    transform:translateY(0px);
    text-shadow:0 0 0px rgba(255,140,0,0);
  }

  50%{
    transform:translateY(-2px);
    text-shadow:
      0 0 12px rgba(255,140,0,0.8),
      0 0 22px rgba(255,180,0,0.5);
  }

  100%{
    transform:translateY(0px);
    text-shadow:0 0 0px rgba(255,140,0,0);
  }
}

/* AYURVEDIC HEADING */

.showcase-left h2{

  font-size:78px;

  line-height:0.92;

  margin:24px 0;

  font-weight:700;

  background:
  linear-gradient(
    135deg,
    #ff8a00 0%,
    #ff5e00 45%,
    #ffb347 100%
  );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;

  text-shadow:
    0 8px 30px rgba(255,140,0,0.12);
}

/* EXTRA SUNLIGHT GLOW */

.product-glow{

  position:absolute;

  width:560px;

  height:560px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(255,145,0,0.42),
    transparent 70%
  );

  filter:blur(50px);

  z-index:1;
}

.benefit-card{

  position:absolute;

  padding:22px;

  border-radius:24px;

  background:
  rgba(255,255,255,0.72);

  backdrop-filter:blur(20px);

  box-shadow:
  0 10px 40px rgba(0,0,0,0.08);

  animation:
  floatCard 4s ease-in-out infinite;
}

.benefit-card h4{

  font-size:20px;

  margin-bottom:8px;
}

.benefit-card p{

  color:#666;
}

.card-1{

  top:14%;

  left:0;
}

.card-2{

  top:45%;

  right:0;
}

.card-3{

  bottom:10%;

  left:12%;
}

@keyframes floatCard{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-12px);
  }

  100%{
    transform:translateY(0px);
  }
}

@media(max-width:768px){

  .product-showcase{

    grid-template-columns:1fr;

    padding:100px 8%;
  }

  .showcase-left h2{

    font-size:54px;
  }

  .showcase-center{

    height:620px;
  }

  .floating-product{

    width:280px;
  }

  .benefit-card{

    transform:scale(0.82);
  }
}


.hair-cinematic-hero{

  position:relative;

  height:100vh;

  overflow:hidden;

  display:flex;

  align-items:center;

  padding:0 8%;

  background:
  url('images/herosoap.jpeg');

  background-size:cover;

  background-position:center;

  color:white;
}

.hair-overlay{

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    to right,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.2)
  );
}

.hair-light{

  position:absolute;

  width:700px;

  height:700px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(255,180,90,0.22),
    transparent 70%
  );

  top:-150px;

  right:-100px;

  filter:blur(40px);
}

.hair-content{

  position:relative;

  z-index:3;

  max-width:700px;
}

.hair-tag{

  letter-spacing:4px;

  font-size:13px;

  opacity:0.82;
}

.hair-title{

  margin:28px 0;
}

.hair-title span{

  display:block;

  font-size:108px;

  line-height:0.88;

  opacity:0;

  transform:translateY(80px);

  animation:hairReveal 1s forwards;

  animation-delay:2.6s;
}



.hair-title span:nth-child(2){
  animation-delay:2.8s;
}

.hair-title span:nth-child(3){
  animation-delay:3s;
}

@keyframes hairReveal{

  to{

    opacity:1;

    transform:translateY(0);
  }
}

.hair-subtitle{

  font-size:19px;

  line-height:1.9;

  color:rgba(255,255,255,0.82);

  max-width:560px;

  margin-bottom:38px;
}

.hair-main-btn{

  padding:18px 36px;

  border:none;

  border-radius:999px;

  background:white;

  color:black;

  cursor:pointer;

  font-size:15px;

  transition:0.35s;
}

.hair-main-btn:hover{

  transform:translateY(-3px);
}

.hero-product-float{

  position:absolute;

  right:8%;

  bottom:5%;

  z-index:3;
}

.hero-bottle{

  width:360px;

  animation:
  floatBottle 5s ease-in-out infinite;

  filter:
  drop-shadow(
    0 40px 60px rgba(0,0,0,0.35)
  );
}

@keyframes floatBottle{

  0%{
    transform:
    translateY(0px)
    rotate(-4deg);
  }

  50%{
    transform:
    translateY(-22px)
    rotate(4deg);
  }

  100%{
    transform:
    translateY(0px)
    rotate(-4deg);
  }
}

.hair-showcase{

  min-height:100vh;

  display:grid;

  grid-template-columns:1fr 1fr;

  align-items:center;

  padding:120px 8%;

  gap:40px;

  overflow:hidden;
}

.showcase-left span{

  letter-spacing:4px;

  font-size:13px;

  color:#8a7d6b;
}

.showcase-left h2{

  font-size:76px;

  line-height:0.92;

  margin:24px 0;
}

.showcase-left p{

  font-size:18px;

  line-height:1.9;

  color:#666;

  max-width:520px;

  margin-bottom:36px;
}

.shop-ritual-btn{

  padding:18px 34px;

  border:none;

  border-radius:999px;

  background:black;

  color:white;

  cursor:pointer;
}

.showcase-right{

  position:relative;

  height:760px;

  display:flex;

  align-items:center;

  justify-content:center;
}

.gold-glow{

  position:absolute;

  width:520px;

  height:520px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(255,190,100,0.25),
    transparent 70%
  );

  filter:blur(40px);
}

.showcase-bottle{

  width:420px;

  position:relative;

  z-index:2;

  animation:
  showcaseFloat 5s ease-in-out infinite;

  filter:
  drop-shadow(
    0 40px 70px rgba(0,0,0,0.28)
  );
}

@keyframes showcaseFloat{

  0%{
    transform:
    translateY(0px)
    rotate(-3deg);
  }

  50%{
    transform:
    translateY(-18px)
    rotate(3deg);
  }

  100%{
    transform:
    translateY(0px)
    rotate(-3deg);
  }
}

.ingredient-card{

  position:absolute;

  padding:22px;

  border-radius:26px;

  background:
  rgba(255,255,255,0.74);

  backdrop-filter:blur(18px);

  box-shadow:
  0 12px 40px rgba(0,0,0,0.08);

  animation:
  cardFloat 4s ease-in-out infinite;
}

.ingredient-card h4{

  font-size:22px;

  margin-bottom:8px;
}

.ingredient-card p{

  color:#666;

  line-height:1.6;
}

.ingredient-1{

  top:12%;

  left:0;
}

.ingredient-2{

  right:0;

  top:42%;
}

.ingredient-3{

  left:10%;

  bottom:10%;
}

@keyframes cardFloat{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-12px);
  }

  100%{
    transform:translateY(0px);
  }
}

@media(max-width:768px){

  .hair-cinematic-hero{

    height:92vh;

    padding:0 8%;
  }

  .hair-title span{

    font-size:64px;
  }

  .hair-subtitle{

    font-size:16px;
  }

  .hero-product-float{

    display:none;
  }

  .hair-showcase{

    grid-template-columns:1fr;

    padding:100px 8%;
  }

  .showcase-left h2{

    font-size:52px;
  }

  .showcase-right{

    height:620px;
  }

  .showcase-bottle{

    width:280px;
  }

  .ingredient-card{

    transform:scale(0.82);
  }
}

.soap-3d-section{

  min-height:100vh;

  display:grid;

  grid-template-columns:1fr 1fr;

  align-items:center;

  padding:120px 8%;

  overflow:hidden;

  background:
  linear-gradient(
    to bottom,
    #fdf8f3,
    #fff
  );
}

.soap-intro span{

  letter-spacing:4px;

  font-size:13px;

  color:#a28d78;
}

.soap-intro h2{

  font-size:82px;

  line-height:0.92;

  margin:24px 0;

  color:#111;
}

.soap-intro p{

  font-size:18px;

  line-height:1.9;

  color:#666;

  max-width:520px;

  margin-bottom:36px;
}

.soap-intro button{

  padding:18px 34px;

  border:none;

  border-radius:999px;

  background:black;

  color:white;

  cursor:pointer;
}

.soap-stage{

  position:relative;

  height:760px;

  display:flex;

  align-items:center;

  justify-content:center;
}

.soap-aura{

  position:absolute;

  width:480px;

  height:480px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(255,220,180,0.35),
    transparent 70%
  );

  filter:blur(40px);
}

.rotating-soap{

  width:360px;

  position:relative;

  z-index:3;

  animation:
  rotateSoap 12s linear infinite;

  filter:
  drop-shadow(
    0 30px 60px rgba(0,0,0,0.18)
  );
}

@keyframes rotateSoap{

  from{

    transform:
    rotateY(0deg);
  }

  to{

    transform:
    rotateY(360deg);
  }
}

.orbit{

  position:absolute;

  width:560px;

  height:560px;

  border-radius:50%;

  animation:
  rotateOrbit 14s linear infinite;
}

.orbit span{

  position:absolute;

  top:0;

  left:50%;

  transform:translateX(-50%);

  padding:14px 22px;

  border-radius:999px;

  background:
  rgba(255,255,255,0.82);

  backdrop-filter:blur(20px);

  box-shadow:
  0 10px 40px rgba(0,0,0,0.08);

  font-size:14px;

  letter-spacing:1px;

  white-space:nowrap;

  animation:
  textPulse 2s ease-in-out infinite;
}

.orbit-2{

  animation-duration:18s;
}

.orbit-3{

  animation-duration:22s;
}

@keyframes rotateOrbit{

  from{

    transform:rotate(0deg);
  }

  to{

    transform:rotate(360deg);
  }
}

@keyframes textPulse{

  0%{
    transform:
    translateX(-50%)
    scale(1);
  }

  50%{
    transform:
    translateX(-50%)
    scale(1.05);
  }

  100%{
    transform:
    translateX(-50%)
    scale(1);
  }
}

@media(max-width:768px){

  .soap-3d-section{

    grid-template-columns:1fr;

    padding:100px 8%;
  }

  .soap-intro h2{

    font-size:56px;
  }

  .soap-stage{

    height:620px;
  }

  .rotating-soap{

    width:240px;
  }

  .orbit{

    width:380px;

    height:380px;
  }

  .orbit span{

    font-size:12px;

    padding:12px 18px;
  }
}

.oil-sacred-hero{

  position:relative;

  height:100vh;

  overflow:hidden;

  display:flex;

  align-items:center;

  padding:0 8%;

  background:
  url('https://images.unsplash.com/photo-1505576399279-565b52d4ac71?q=80&w=1800&auto=format&fit=crop');

  background-size:cover;

  background-position:center;

  color:white;
}

.oil-overlay{

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    to bottom,
    rgba(0,0,0,0.58),
    rgba(0,0,0,0.22)
  );
}

.oil-particles{

  position:absolute;

  inset:0;

  background-image:
  radial-gradient(
    rgba(255,220,150,0.25) 1px,
    transparent 1px
  );

  background-size:80px 80px;

  animation:
  particlesMove 20s linear infinite;
}

@keyframes particlesMove{

  from{
    transform:translateY(0);
  }

  to{
    transform:translateY(-120px);
  }
}

.oil-content{

  position:relative;

  z-index:3;

  max-width:720px;
}

.oil-tag{

  letter-spacing:4px;

  font-size:13px;

  opacity:0.82;
}

.oil-title{

  font-size:118px;

  line-height:0.88;

  margin:30px 0;

  font-weight:500;

  animation:
  oilReveal 1.5s ease;
}

@keyframes oilReveal{

  from{

    opacity:0;

    transform:
    translateY(60px)
    scale(0.95);
  }

  to{

    opacity:1;

    transform:
    translateY(0)
    scale(1);
  }
}

.oil-subtitle{

  font-size:19px;

  line-height:1.9;

  color:rgba(255,255,255,0.82);

  max-width:580px;

  margin-bottom:38px;
}

.oil-main-btn{

  padding:18px 36px;

  border:none;

  border-radius:999px;

  background:white;

  color:black;

  cursor:pointer;
}

.oil-experience{

  min-height:110vh;

  display:grid;

  grid-template-columns:1fr 1fr;

  align-items:center;

  padding:120px 8%;

  overflow:hidden;

  background:
  linear-gradient(
    to bottom,
    #f8f2ea,
    white
  );
}

.oil-left span{

  letter-spacing:4px;

  font-size:13px;

  color:#9f8462;
}

.oil-left h2{

  font-size:82px;

  line-height:0.92;

  margin:24px 0;
}

.oil-left p{

  font-size:18px;

  line-height:1.9;

  color:#666;

  max-width:520px;

  margin-bottom:36px;
}

.oil-left button{

  padding:18px 34px;

  border:none;

  border-radius:999px;

  background:black;

  color:white;

  cursor:pointer;
}

.oil-centerpiece{

  position:relative;

  height:820px;

  display:flex;

  align-items:center;

  justify-content:center;
}

.oil-bottle{

  width:360px;

  position:relative;

  z-index:5;

  animation:
  sacredFloat 6s ease-in-out infinite;

  filter:
  drop-shadow(
    0 40px 80px rgba(0,0,0,0.3)
  );
}

@keyframes sacredFloat{

  0%{
    transform:
    translateY(0px)
    rotate(-2deg);
  }

  50%{
    transform:
    translateY(-18px)
    rotate(2deg);
  }

  100%{
    transform:
    translateY(0px)
    rotate(-2deg);
  }
}

.liquid-ring{

  position:absolute;

  border-radius:50%;

  border:
  1px solid rgba(215,170,110,0.22);

  animation:
  sacredSpin linear infinite;
}

.ring-1{

  width:320px;

  height:320px;

  animation-duration:14s;
}

.ring-2{

  width:470px;

  height:470px;

  animation-duration:20s;

  animation-direction:reverse;
}

.ring-3{

  width:620px;

  height:620px;

  animation-duration:26s;
}

@keyframes sacredSpin{

  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }
}

.floating-ingredient{

  position:absolute;

  padding:20px 24px;

  border-radius:24px;

  background:
  rgba(255,255,255,0.72);

  backdrop-filter:blur(18px);

  box-shadow:
  0 12px 40px rgba(0,0,0,0.08);

  z-index:6;

  animation:
  ingredientFloat 4s ease-in-out infinite;
}

.floating-ingredient h4{

  font-size:20px;

  margin-bottom:8px;
}

.floating-ingredient p{

  color:#666;
}

.ingredient-a{

  top:14%;

  left:4%;
}

.ingredient-b{

  top:44%;

  right:0;
}

.ingredient-c{

  bottom:10%;

  left:12%;
}

@keyframes ingredientFloat{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-10px);
  }

  100%{
    transform:translateY(0px);
  }
}

@media(max-width:768px){

  .oil-sacred-hero{

    height:92vh;

    padding:0 8%;
  }

  .oil-title{

    font-size:64px;
  }

  .oil-subtitle{

    font-size:16px;
  }

  .oil-experience{

    grid-template-columns:1fr;

    padding:100px 8%;
  }

  .oil-left h2{

    font-size:54px;
  }

  .oil-centerpiece{

    height:620px;
  }

  .oil-bottle{

    width:260px;
  }

  .ring-1{

    width:240px;
    height:240px;
  }

  .ring-2{

    width:340px;
    height:340px;
  }

  .ring-3{

    width:440px;
    height:440px;
  }

  .floating-ingredient{

    transform:scale(0.82);
  }
}

#category-carousel{

  display:flex;

  gap:24px;

  overflow-x:auto;

  scroll-behavior:smooth;

  scrollbar-width:none;

  cursor:grab;

  user-select:none;
}

#category-carousel::-webkit-scrollbar{

  display:none;
}

#category-carousel.dragging{

  cursor:grabbing;
}


.category-card img{

  width:100%;
  height:100%;

  object-fit:cover;

  filter:
    brightness(0.95)
    saturate(1.15)
    contrast(1.02);

  transition:0.6s ease;
}

.category-card:hover img{

  transform:scale(1.08);
  filter:
    brightness(1)
    saturate(1.22);
}


/* HAIR PAGE COLORS */

body[data-category="hair"] .showcase-left h2{

  background:
  linear-gradient(
    135deg,
    #3d5a40,
    #6b8f71,
    #a3b18a
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

body[data-category="hair"] .showcase-left span{

  color:#5c7a60;
}

body[data-category="hair"] .product-glow{

  background:
  radial-gradient(
    rgba(90,130,90,0.35),
    transparent 70%
  );
}

body[data-category="hair"] .showcase-left button{

  background:
  linear-gradient(
    135deg,
    #3d5a40,
    #6b8f71
  );
}


/* SOAP PAGE COLORS */

body[data-category="soap"] .showcase-left h2{

  background:
  linear-gradient(
    135deg,
    #b08968,
    #d9c6a5,
    #f5e6cc
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

body[data-category="soap"] .showcase-left span{

  color:#b08968;
}

body[data-category="soap"] .product-glow{

  background:
  radial-gradient(
    rgba(214,190,150,0.35),
    transparent 70%
  );
}

body[data-category="soap"] .showcase-left button{

  background:
  linear-gradient(
    135deg,
    #b08968,
    #d9c6a5
  );

  color:black;
}



/* OIL PAGE COLORS */

body[data-category="oil"] .showcase-left h2{

  background:
  linear-gradient(
    135deg,
    #5f4b32,
    #8c6a43,
    #c49a6c
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

body[data-category="oil"] .showcase-left span{

  color:#8c6a43;
}

body[data-category="oil"] .product-glow{

  background:
  radial-gradient(
    rgba(140,106,67,0.35),
    transparent 70%
  );
}

body[data-category="oil"] .showcase-left button{

  background:
  linear-gradient(
    135deg,
    #5f4b32,
    #8c6a43
  );
}


/* CENTER BENEFIT CARD */

.center-benefit-card{

  position:absolute;

  bottom:8%;

  left:50%;

  transform:translateX(-50%);

  width:230px;

  padding:24px;

  border-radius:28px;

  background:
linear-gradient(
  135deg,
  rgba(61,90,64,0.88),
  rgba(107,143,113,0.82)
);

  backdrop-filter:blur(20px);

  text-align:center;

  z-index:30;

  box-shadow:
  0 20px 50px rgba(0,0,0,0.12);

  animation:
  floatingBenefit 4s ease-in-out infinite;
}

.center-benefit-card h4{

  font-size:24px;
color:white;
  margin-bottom:10px;
}

.center-benefit-card p{

  /* color:#666; */
  color:rgba(255,255,255,0.86);

  line-height:1.5;
}

@keyframes floatingBenefit{

  0%{
    transform:
    translateX(-50%)
    translateY(0px);
  }

  50%{
    transform:
    translateX(-50%)
    translateY(-10px);
  }

  100%{
    transform:
    translateX(-50%)
    translateY(0px);
  }
}


/* SUNSCREEN FLOATING CARD */

.sun-benefit-card{

  position:absolute;

  bottom:8%;

  left:50%;

  transform:translateX(-50%);

  width:240px;

  padding:24px;

  border-radius:30px;

  background:
  linear-gradient(
    135deg,
    rgba(255,190,90,0.88),
    rgba(255,130,40,0.82)
  );

  backdrop-filter:blur(20px);

  text-align:center;

  z-index:30;

  box-shadow:
  0 20px 50px rgba(255,140,0,0.28);

  animation:
  sunFloat 4s ease-in-out infinite;

  border:
  1px solid rgba(255,255,255,0.22);
}

.sun-benefit-card h4{

  font-size:24px;

  margin-bottom:10px;

  color:white;
}

.sun-benefit-card p{

  color:rgba(255,255,255,0.9);

  line-height:1.5;
}

@keyframes sunFloat{

  0%{
    transform:
    translateX(-50%)
    translateY(0px);
  }

  50%{
    transform:
    translateX(-50%)
    translateY(-12px);
  }

  100%{
    transform:
    translateX(-50%)
    translateY(0px);
  }
}

/* SOAP FLOATING CARD */

.soap-benefit-card{

  position:absolute;

  bottom:8%;

  left:50%;

  transform:translateX(-50%);

  width:240px;

  padding:24px;

  border-radius:30px;

  background:
  linear-gradient(
    135deg,
    rgba(240,210,170,0.92),
    rgba(201,160,112,0.84)
  );

  backdrop-filter:blur(20px);

  text-align:center;

  z-index:20;

  box-shadow:
  0 20px 50px rgba(176,137,104,0.22);

  animation:
  soapFloat 4s ease-in-out infinite;
}

.soap-benefit-card h4{

  font-size:24px;

  margin-bottom:10px;

  color:white;
}

.soap-benefit-card p{

  color:
  rgba(255,255,255,0.88);

  line-height:1.5;
}

@keyframes soapFloat{

  0%{
    transform:
    translateX(-50%)
    translateY(0px);
  }

  50%{
    transform:
    translateX(-50%)
    translateY(-10px);
  }

  100%{
    transform:
    translateX(-50%)
    translateY(0px);
  }
}


/* INTRO REVEAL */

.launch-intro{

  position:fixed;

  inset:0;

  background:
  linear-gradient(
    135deg,
    #f7f1e8,
    #efe5d6
  );

  display:flex;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  z-index:999999;

  overflow:hidden;

  animation:
  introFade 0.8s ease forwards;

  animation-delay:2.4s;
}

/* PRODUCT */

.intro-product{

  width:260px;

  z-index:5;

  animation:
  introProduct 2.2s ease;
}

/* TEXT */

.intro-text{

  position:absolute;

  font-size:clamp(70px,14vw,180px);

  line-height:0.85;

  text-align:center;

  font-weight:900;

  letter-spacing:-4px;

  color:white;

  mix-blend-mode:overlay;

  z-index:3;

  animation:
  introText 2s ease;
}

/* GLOW */

.intro-glow{

  position:absolute;

  width:500px;

  height:500px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(255,180,80,0.35),
    transparent 70%
  );

  animation:
  pulseGlow 2s ease infinite;
}

/* PRODUCT ANIMATION */

@keyframes introProduct{

  0%{

    opacity:0;

    transform:
    scale(0.4)
    rotate(-18deg);
  }

  60%{

    opacity:1;

    transform:
    scale(1.12)
    rotate(4deg);
  }

  100%{

    transform:
    scale(1)
    rotate(0deg);
  }
}

/* TEXT ANIMATION */

@keyframes introText{

  0%{

    opacity:0;

    transform:
    scale(0.6);
  }

  100%{

    opacity:1;

    transform:
    scale(1);
  }
}

/* GLOW */

@keyframes pulseGlow{

  0%{

    transform:scale(0.8);
  }

  50%{

    transform:scale(1.1);
  }

  100%{

    transform:scale(0.8);
  }
}

/* HIDE INTRO */

@keyframes introFade{

  to{

    opacity:0;

    visibility:hidden;

    pointer-events:none;
  }
}

/* REMOVE ALL HORIZONTAL SCROLL */

html,
body{

  overflow-x:hidden !important;

  width:100%;

  max-width:100%;
}

/* INTRO FIX */

.launch-intro{

  overflow:hidden;

  width:100vw;

  height:100vh;
}

/* PRODUCT FIX */

.intro-product{

  max-width:70vw;
  /* width:min(220px,60vw); */

  height:auto;
}

/* TEXT FIX */

.intro-text{

  width:100%;

  padding:0 20px;

  box-sizing:border-box;

  word-break:break-word;
}

/* FINAL HARD OVERFLOW FIX */

html,
body{

  margin:0 !important;
  padding:0 !important;

  width:100% !important;
  max-width:100% !important;

  overflow-x:hidden !important;
}

/* ALL SECTIONS */

section,
div{

  max-width:100%;
  box-sizing:border-box;
}

/* HERO */

.cinematic-hero,
.soap-hero,
.product-showcase,
.soap-showcase{

  width:100% !important;

  max-width:100% !important;

  overflow:hidden !important;

  position:relative;
}

/* HERO IMAGE */

.hero-bg{

  width:100% !important;

  height:100% !important;

  object-fit:cover;

  left:0;
  right:0;
}

/* INTRO */

.launch-intro{

  width:100vw;

  height:100vh;

  overflow:hidden !important;
}

/* PRODUCT PNG */

.intro-product,
.floating-product,
.rotating-soap{

  max-width:75vw !important;

  height:auto;
}

/* TEXT */

.intro-text,
.hero-editorial h1,
.showcase-left h2{

  word-break:break-word;

  overflow-wrap:break-word;
}

/* MOBILE */

@media(max-width:768px){

  .hero-editorial{

    width:90% !important;

    left:5% !important;

    right:5% !important;
  }

  .hero-editorial h1{

    font-size:58px !important;

    line-height:0.9;
  }

  .floating-product,
  .rotating-soap{

    width:280px !important;

    max-width:80vw !important;
  }

  .intro-product{

    width:220px !important;
  }
}

/* BOTANORIA GLOBAL LOADER */

.botanoria-loader{

  position:fixed;

  inset:0;

  z-index:999999;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  background:
  linear-gradient(
    135deg,
    #f8f4ee,
    #efe6d7
  );

  animation:
  loaderFade 0.8s ease forwards;

  animation-delay:2.2s;
}

/* GLOW */

.loader-glow{

  position:absolute;

  width:340px;

  height:340px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(214,190,150,0.35),
    transparent 70%
  );

  animation:
  pulseLoader 2s ease infinite;
}

/* LOGO */

.loader-logo{

  width:120px;

  z-index:3;

  animation:
  logoReveal 1.4s ease;
}

/* TEXT */

.loader-text{

  margin-top:24px;

  font-size:28px;

  font-weight:500;

  letter-spacing:1px;

  color:#7a6755;

  opacity:0;

  animation:
  textReveal 1s ease forwards;

  animation-delay:0.8s;

  z-index:3;
}

/* LOGO ANIMATION */

@keyframes logoReveal{

  0%{

    opacity:0;

    transform:
    scale(0.6)
    rotate(-10deg);
  }

  100%{

    opacity:1;

    transform:
    scale(1)
    rotate(0deg);
  }
}

/* TEXT */

@keyframes textReveal{

  to{

    opacity:1;

    transform:
    translateY(0px);
  }
}

/* GLOW */

@keyframes pulseLoader{

  0%{

    transform:scale(0.9);
  }

  50%{

    transform:scale(1.1);
  }

  100%{

    transform:scale(0.9);
  }
}

/* FADE OUT */

@keyframes loaderFade{

  to{

    opacity:0;

    visibility:hidden;

    pointer-events:none;
  }
}

/* HERO BUTTON DANCE */

.hero-editorial button,
.hair-main-btn,
.soap-intro button,
.showcase-left button{
animation-delay:5s;
  animation:
  heroButtonDance 2.2s ease-in-out infinite;

  transform-origin:center;
}

/* HOVER */

.hero-editorial button:hover,
.hair-main-btn:hover,
.soap-intro button:hover,
.showcase-left button:hover{

  animation-play-state:paused;
}

/* ANIMATION */

@keyframes heroButtonDance{

  0%{

    transform:
    translateY(0px)
    scale(1);
  }

  20%{

    transform:
    translateY(-4px)
    scale(1.03);
  }

  40%{

    transform:
    translateY(0px)
    scale(1);
  }

  60%{

    transform:
    rotate(-1deg)
    scale(1.02);
  }

  80%{

    transform:
    rotate(1deg)
    scale(1.02);
  }

  100%{

    transform:
    translateY(0px)
    scale(1);
  }
}

/* REVIEW ADMIN */

.admin-review-page{

  max-width:700px;

  margin:auto;

  padding:60px 20px;
}

.admin-review-page h1{

  font-size:48px;

  margin-bottom:30px;
}

.review-input{

  width:100%;

  margin-bottom:18px;

  padding:18px;

  border-radius:18px;

  border:none;

  background:white;

  font-size:16px;
}

.review-textarea{

  min-height:160px;

  resize:vertical;
}

.upload-label{

  display:block;

  margin-bottom:10px;

  font-weight:600;
}

.submit-review-btn{

  width:100%;

  padding:18px;

  border:none;

  border-radius:18px;

  background:black;

  color:white;

  font-size:18px;

  cursor:pointer;
}

/* CUSTOMER REVIEWS */

.reviews-page{

  padding:100px 20px;
}

.reviews-header{

  text-align:center;

  margin-bottom:60px;
}

.reviews-header span{

  letter-spacing:4px;

  font-size:12px;

  color:#8d7b68;
}

.reviews-header h1{

  font-size:68px;

  margin-top:20px;
}

.reviews-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(340px,1fr));

  gap:34px;
}

.review-card{

  background:white;

  border-radius:30px;

  overflow:hidden;

  box-shadow:
  0 12px 40px rgba(0,0,0,0.08);
}

.review-images{

  display:grid;

  grid-template-columns:1fr 1fr 1fr;

  gap:4px;
}

.review-images img{

  width:100%;

  height:160px;

  object-fit:cover;
}

.review-video{

  width:100%;

  max-height:420px;

  object-fit:cover;
}

.review-content{

  padding:24px;
}

.review-content h3{

  font-size:28px;

  margin-bottom:12px;
}

.review-stars{

  margin-bottom:16px;

  font-size:18px;
}

.review-content p{

  color:#666;

  line-height:1.8;
}

@media(max-width:768px){

  .reviews-header h1{

    font-size:42px;
  }

  .review-images img{

    height:110px;
  }
}

/* REVIEW IMAGE ZOOM */

.review-images img{

  cursor:pointer;

  transition:
  transform 0.3s ease;
}

.review-images img:hover{

  transform:scale(1.04);
}

.image-modal{

  position:fixed;

  inset:0;

  background:
  rgba(0,0,0,0.9);

  display:none;

  justify-content:center;

  align-items:center;

  z-index:99999;

  padding:20px;
}

.modal-image{

  max-width:95%;

  max-height:90vh;

  border-radius:20px;

  object-fit:contain;

  animation:
  zoomIn 0.35s ease;
}

@keyframes zoomIn{

  from{

    transform:scale(0.8);

    opacity:0;
  }

  to{

    transform:scale(1);

    opacity:1;
  }
}



/* WELLNESS DESKTOP IMAGE */

@media(min-width:900px){

  body[data-category="wellness"] .hero-bg{

    content:
    url("images/skin-desktop.png");
  }
}

/* SOAP DESKTOP IMAGE */

@media(min-width:900px){

  body[data-category="soap"] .hero-bg{

    content:
    url("images/soap-desktop.png");
  }
}

.header-logo{

  width:140px;

  height:auto;

  object-fit:contain;
}

.sith  {color:#355b3e;

  -webkit-text-fill-color:#355b3e;

  background:none;}

.collections-title{
   color:#355b3e;

  -webkit-text-fill-color:#355b3e;

  background:none;
}


.footer-logo{

  width:180px;

  max-width:80%;

  height:auto;

  object-fit:contain;

  display:block;

  margin:30px auto 10px;
}

.footer-rights{

  text-align:center;

  font-size:12px;

  color:#6f6f6f;

  letter-spacing:1px;

  margin-top:10px;

  padding-bottom:20px;
}

.admin-review-list{

  padding:30px 20px;
}

.review-admin-card{

  background:#f7f2e9;

  border-radius:24px;

  padding:18px;

  margin-bottom:20px;

  border:1px solid rgba(47,79,47,0.08);
}

.review-admin-card img{

  width:70px;

  height:70px;

  object-fit:cover;

  border-radius:14px;

  margin-right:8px;
}

.review-admin-images{

  display:flex;

  gap:10px;

  margin:14px 0;
}

.review-admin-actions{

  display:flex;

  gap:10px;

  margin-top:16px;
}

.review-admin-actions button{

  flex:1;

  border:none;

  border-radius:14px;

  padding:12px;

  font-weight:600;

  cursor:pointer;
}

.edit-review-btn{

  background:#2f4f2f;

  color:white;
}

.delete-review-btn{

  background:#d9534f;

  color:white;
}