@import url('https://fonts.googleapis.com/css2?family=Italianno&family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Nanum+Myeongjo&display=swap');

/* ==================== RESET ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: 1.6;
  overflow-x: hidden;
}

.container{
max-width: 1656px !important;
}
a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}



h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--color-black);
  font-weight: var(--fw-semibold);
}

.btn-focus:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==================== UTILITIES ==================== */
.section-pad {
  padding: var(--space-xl) 0;
}

/* .section-pad.product-sec .container {
  margin-top: -100px;
  padding-top: 150px !important;
} */

.product-sec p{
  text-align: center;
}

.text-primary-c {
  color: var(--color-primary) !important;
}


.bg-blush{
  position: relative;
}

.bg-blush::before {
  content: '';
  background: url("../assets/phul.png");
  background-repeat: no-repeat;
  background-position: top right;
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  margin-top: -162px;
}

.section-title {
  font-size: var(--fs-3xl);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
  letter-spacing: 1px;
}

.topbar .align-items-center.align-items-left .fa-location-dot,
.topbar .align-items-center.align-items-left span {
  display: none !important;
}
 .topbar span{
  font-size: 18px;
 }

.section-sub {
  text-align: center;
  color: var(--color-text-light);
  font-size: var(--fs-md);
  margin-bottom: var(--space-lg);
}

/* Pill Button — reused everywhere */
.btn-pill {
  display: inline-block;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: var(--color-white);
  padding: 0.7rem 2.1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;

}



.btn-pill:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.btn-pill-solid {
  background: var(--color-white);
  color: var(--color-primary);
  border: var(--color-white);
  border-radius: 100%;
}

.btn-pill-solid:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-radius: 100%;

}

.btn-pill-light {
}

.btn-pill-light:hover {
  background: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-3px);
}

/* Fade-up animation on scroll */
.fade-up {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

.love-club ul{
  padding: 0 !important;
}

.fade-up.delay-1 {
  transition-delay: .1s;
}

.fade-up.delay-2 {
  transition-delay: .2s;
}

.fade-up.delay-3 {
  transition-delay: .3s;
}

.fade-up.delay-4 {
  transition-delay: .4s;
}

/* ==================== TOPBAR ==================== */
.topbar {
  background: var(--color-primary-light);
  font-size: var(--fs-xs);
  padding: 0.45rem 0;
  color: var(--color-secondary);
}

.topbar .location i {
    color: var(--color-primary);
    margin-right: 5px;
    font-size: 20px;
}

.topbar .social a {
  color: var(--color-primary);
  margin-left: 14px;
  font-size: 18px;
  transition: transform var(--transition-fast), color var(--transition-fast);
  display: inline-block;
}

.topbar .social a:hover {
  color: var(--color-primary-dark);
  transform: translateY(-2px) scale(1.15);
}

/* ==================== HEADER ==================== */
.site-header {
  background: var(--color-primary-light);
  padding: 0.7rem 0;
  position: sticky;
  top: 0;
  z-index: 999;
  transition: box-shadow var(--transition-base), padding var(--transition-base);
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
  padding: 0.35rem 0;
}

.site-header .logo img {
  max-height: 68px;
  transition: transform var(--transition-base);
}

.site-header .logo:hover img {
  transform: scale(1.05);
}

.main-nav {
  display: flex;
  gap: 50px;
  justify-content: center;
  margin: 0;
}

.main-nav a {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-secondary);
  position: relative;
  padding: 6px 0;
}

.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition-base);
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--color-primary);
}

.main-nav a:hover::after,
.main-nav a.active::after {
  width: 100%;
}

.header-icons {
  display: flex;
  gap: 1.15rem;
  justify-content: center;
  align-items: center;
}

.header-icons a {
  color: var(--color-primary);
  font-size: 20px;
  position: relative;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.header-icons a:hover {
  transform: translateY(-3px);
  color: var(--color-primary-dark);
}

.header-icons .badge-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.6rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-toggler {
  border: none;
  font-size: 1.4rem;
  color: var(--color-primary);
  background: none;
}

/* ==================== HERO ==================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: url("../assets/banner.png");
  background-size: cover;
  background-position: center;
  padding: 5rem 0px;
}

.hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 62%;
  object-fit: cover;
  object-position: center top;
  animation: heroZoom 18s ease-in-out infinite alternate;
}

@keyframes heroZoom {
  0% {
    transform: scale(1);
  }

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

.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding:  0;
}

.hero-content .eyebrow {
  font-family: Monotype Corsiva;
  font-size: var(--fs-lg);
  display: block;
  margin-bottom: 0.4rem;
  opacity: 0;
  animation: slideFadeIn .8s ease forwards .2s;
}

.hero-content h1 {
  color: #fff;
  font-size: 80px;
  margin-bottom: 1rem;
  opacity: 0;
  animation: slideFadeIn .8s ease forwards .45s;
}

.hero-content p {
  margin-bottom: 1.6rem;
  font-size: var(--fs-md);
  opacity: 0;
  animation: slideFadeIn .8s ease forwards .7s;
}

.hero-content .btn-pill {
  opacity: 0;
  animation: slideFadeIn .8s ease forwards .95s;
}

@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== SHOP BY CATEGORY ==================== */
/* .cat-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 360px;
  box-shadow: var(--shadow-sm);
  display: block;
} */

.cat-card img {
  width: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.cat-card:hover img {
  transform: scale(1.1);
}

.cat-card .cat-label {
  text-align: center;
  padding: 0.9rem 0 0.5rem;
  color: #000;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cat-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-md);
}

.cat-title-row h2 {
  text-align: left;
  text-transform: uppercase;
  margin-bottom: .2rem;
}

/* ==================== PRODUCT CARDS ==================== */
.product-card {
  position: relative;
  margin-bottom: var(--space-md);
}

.product-img-wrap {
  position: relative;
  border-radius: var(--radius-md);
  /* overflow: hidden; */
  /* aspect-ratio: 3/4; */
  overflow: hidden;
  border-radius: 50px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}

.product-img-wrap img {
    width: 100%;
    border-radius: 55px;
    height: 390px;
    transition: transform var(--transition-slow);
}

.product-card:hover .product-img-wrap img {
  transform: scale(1.08);
}

.wishlist-btn {
  position: absolute;
  bottom: -50px !important;
  right: 12px;
  background: rgba(255, 255, 255, 0.85);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  transition: all var(--transition-fast);
  border: none;
  cursor: pointer;
}

.wishlist-btn:hover {
  background: var(--color-primary);
  color: #fff;
  transform: scale(1.15);
}

.wishlist-btn.active {
  background: var(--color-primary);
  color: #fff;
}

.product-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 0.7rem;
}

.product-info h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
  
}

.product-info .price {
  font-weight: var(--fw-medium);
  color: var(--color-price);
  font-size: var(--fs-sm);
  margin-top: 2px;
}

.view-all-wrap {
  text-align: center;
  margin-top: var(--space-md);
}

/* ==================== PROMO / WHY SHOP ==================== */

.why-shop {
  position: relative;
}

.why-shop::before {
  content: '';
  background: url("../assets/phul-2.png");
  background-repeat: no-repeat;
  background-position: top right;
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  margin-top: -200px;
}

.why-shop-item {
  text-align: center;
  padding: 0 1rem;
}

.why-shop-icon {
  width: 100px;
  height: 100px;
  border-radius: 50% 50% 50% 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-left: -20px;
  font-size: 1.4rem;
  transition: transform var(--transition-base);
}

.why-shop-item:hover .why-shop-icon {
  transform: rotate(-8deg) scale(1.1);
}

.why-shop-item h4 {
  font-size: 20px;
  margin-bottom: .3rem;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.why-shop-item p {
  color: var(--color-black);
  font-size: var(--fs-sm);
    text-align: left;

}

/* Deals banner */
.deals-banner {
  position: relative;
  background-image: url('../assets/deal.png');
  background-size: cover;
  background-position: center;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.deals-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(80, 10, 5, 0.28);
}

.deals-banner .content {
  position: relative;
  z-index: 2;
}

.deals-banner h2 {
  color: #fff;
  font-size: var(--fs-2xl);
}

.deals-banner p {
  margin-bottom: 1.3rem;
  font-size: var(--fs-sm);
}

/* Crossbody / Capsule split */
.promo-split-card {
  position: relative;
  border-radius: var(--radius-md);
  /* overflow: hidden; */
  /* height: 480px; */
}

/* .promo-split-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
} */

.promo-split-card:hover img {
  transform: scale(1.06);
}

.promo-caption {
  padding-top: 1rem;
}

.promo-caption h3 {
  font-size: var(--fs-lg);
  margin-bottom: .3rem;
  text-transform: uppercase;
}

.promo-caption p {
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.promo-split-card.overlay-caption {
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-split-card.overlay-caption::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("../assets/rectangle-15.png");
  background-size: cover;
  background-position: center;
  z-index: 1;
  border-radius: 10px;
}

.promo-split-card.overlay-caption .overlay-text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 1.6rem;
}

.promo-split-card.overlay-caption .overlay-text h3 {
  color: #fff;
  font-size: var(--fs-lg);
    text-align: center;
    text-transform: uppercase;

}


/* App section */
.app-section {
  background: #FCE8E6 ;
  overflow: hidden;
  position: relative;
}
.app-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("../assets/phul3.png");
    background-repeat: no-repeat;
    background-position: 13% 0%;
}
.app-section h2{
  font-size: 80px;
  text-transform: capitalize;
}

.app-mockup-wrap {
  text-align: center;
  position: relative;
}

.app-mockup-wrap img {
  max-height: 560px;
  margin: 0 auto;
  border-radius: 30px;
  box-shadow: var(--shadow-md);
  animation: floatPhone 5s ease-in-out infinite;
}

@keyframes floatPhone {

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

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

.app-section .eyebrow {
  font-family: Monotype Corsiva;
  color: var(--color-primary);
  font-size: var(--fs-lg);
}

.store-badges {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}


.store-badge {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--color-black);
  color: #fff;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.store-badge i {
  font-size: 1.5rem;
}

.store-badge span {
  display: block;
  font-size: 0.65rem;
}

.store-badge strong {
  display: block;
  font-size: 0.95rem;
  font-weight: var(--fw-semibold);
}

.store-badge:hover {
  transform: translateY(-4px);
  background: var(--color-primary);
}

/* Love Club */
.love-club {
  background: #fff;
  color: #fff;
  padding: 100px 0;
  overflow: hidden;
}

.love-club .section-pad{
  background-color: var(--color-primary-dark);
  padding: 40px !important;
}

.love-club-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.love-club h2 {
  color: #fff;
  text-align: left;
  text-transform: uppercase;
  font-size: var(--fs-2xl);
}

.love-club .lead-txt {
  font-size: var(--fs-md);
  margin-bottom: 1.5rem;
}

.love-club ul {
  margin-bottom: 1.6rem;
}

.love-club ul li {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .7rem;
  font-size: var(--fs-sm);
}

.love-club ul li i {
  color: #fff;
  font-size: 28px;
}

.love-club-photo {
  height: 100%;
  min-height: 420px;
  overflow: hidden;
}

.love-club-photo img {
  width: 100%; 
  height: 100%;
  object-fit: cover;
  /* position: absolute; */
  transition: transform var(--transition-slow);
}

.love-club-photo:hover img {
  transform: scale(1.05);
}

/* Pickup banner */
.pickup-banner {
  position: relative;
  background-image: url('../assets/bottom.png') !important;
  background-size: cover;
  background-position:  top;
  color: #fff;
  text-align: center;
}

/* .pickup-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(90, 10, 5, 0.4);
} */

.pickup-banner .content {
  position: relative;
  z-index: 2;
}

.pickup-banner h2 {
  color: #fff;
  font-size: 70px !important;
  margin-bottom: .6rem;
}

.pickup-banner>.content>p {
  max-width: 750px;
  margin: 0 auto 2.2rem;
  opacity: .95;
  color: #fff;
}

.pickup-box {
  background: #811F14;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  height: 100%;
  backdrop-filter: blur(2px);
  transition: transform var(--transition-base), background var(--transition-base);
  display: flex;
  gap: 20px;
}

.pickup-box .content {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
}

.pickup-box:hover {
  transform: translateY(-6px);
  background: rgba(122, 26, 20, 0.75);
}

.pickup-box i.icon-lg {
  font-size: 2rem;
  margin-bottom: .6rem;
}

.pickup-box h5 {
  color: #fff !important;
  font-family: var(--font-heading);
  letter-spacing: 1px;
  margin-bottom: .4rem;
  text-transform: uppercase;
  margin: 0 !important;
}
.pickup-box p {
  color: #fff !important;
  font-family: var(--font-body);
  letter-spacing: 1px;
  font-size: 18px;
  margin-bottom: .4rem;
text-align: left;}

.pickup-box .btn-pill-light {
  margin-top: 1rem;
  border-radius: 100px;
  font-size: var(--fs-xs);
  padding: .5rem 1.4rem;
}

/* ==================== FOOTER ==================== */
.site-footer {
    padding: 300px 0 0px 0;}
.footer-sec{
  margin-top: 150px;
}

.footer-sec .links-col{
  padding-left:  100px;
}
.site-footer .footer-logo img {
  max-height: 70px;
  margin-bottom: 1rem;
}

.site-footer p {
  color: var(--color-text-light);
  font-size: var(--fs-sm);
  margin-bottom: 1rem;
}

.footer-sec p ,
.footer-sec h5,
.site-footer .footer-links li  {
  text-align: left !important;
}

.footer-sec .col-lg-3.col-md-6 {
  display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.site-footer h5 {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  margin-bottom: 1.1rem;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.footer-links{
  padding: 0 !important;
}

.site-footer .footer-links li {
  margin-bottom: .6rem;
}

.site-footer .footer-links a {
  color: var(--color-black);
  font-size: var(--fs-sm);
  transition: all var(--transition-fast);
}

.site-footer .footer-links a:hover {
  color: var(--color-primary);
  padding-left: 5px;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .8rem;
  font-size: var(--fs-sm);
  color: var(--color-text-light);
}

.footer-contact i {
  color: var(--color-primary);
}

.newsletter-form {
    display: flex;
    background: #A51302;
    border-radius: 100px;
    overflow: hidden;
    margin-top: 1rem;
    padding: 5px 5px;
    width: 100%;
}

.newsletter-form input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.85rem 1.3rem;
  color: #fff;
  width: 75%;
  font-size: 15px;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.newsletter-form input:focus {
  outline: none;
}

.newsletter-form button {
  background: #fff;
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  border: none;
  padding: 0 1.5rem;
  font-family: var(--font-heading);
  letter-spacing: 1px;
  transition: all var(--transition-fast);
}

.newsletter-form button:hover {
  background: var(--color-primary-light);
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  /* margin-top: var(--space-md); */
  padding: 1.2rem 0;
  font-size: var(--fs-xs);
  color: var(--color-text-light);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 50%;
  margin: 0 5px;
  transition: all var(--transition-fast);
}

.footer-social a:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-3px);
}

.get-direction {
  display: inline-flex;
  font-family:var(--font-heading);
  align-items: center;
  text-transform: uppercase;
  gap: .5rem;
  background: #a51302;
  color: #fff;
  padding: .5rem 1.2rem;
  border-radius: 100px;
  font-size: var(--fs-sm);
  margin: .6rem 0 1rem;
  transition: background var(--transition-fast);
}

.get-direction:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991.98px) {
  .hero {
    min-height: auto;
    padding-top: 3rem;
  }

  .hero-photo {
    position: relative;
    width: 100%;
    height: 320px;
    margin-top: 1.5rem;
  }

  .hero-content {
    text-align: center;
  }

  .hero-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .love-club-photo {
    min-height: 280px;
  }

  .love-club h2,
  .love-club .cat-title-row h2 {
    text-align: center;
  }

  .cat-title-row {
    flex-direction: column;
    text-align: center;
    gap: .8rem;
  }
}

@media (max-width: 767.98px) {
  .section-title {
    font-size: var(--fs-xl);
  }

  .hero-content h1 {
    font-size: 2.2rem;
  }

  .main-nav {
    display: none;
  }
}

/* =========================================================================
   NEW PAGE — "ABOUT / COLLECTIONS / 22 YEARS" SECTIONS
   Added below the original stylesheet only. Nothing above this line was
   changed. Reuses the same design tokens (colors, fonts, spacing) that
   already power the rest of the site.
   ========================================================================= */

/* ---------- shared italic script eyebrow (uses --font-script,
   defined in tokens but not yet used anywhere else on the site) ---------- */
.eyebrow-script {
  display: block;
  font-family: Monotype Corsiva;
  font-size: 32px;
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.eyebrow-script.on-dark {
  color: var(--color-white);
}

/* ==================== ABOUT / STORY SECTION ==================== */
.about-story-sec {
  position: relative;
  overflow: hidden;
}

.about-story-sec::before {
  content: '';
  background: url("../assets/flower1.png");
  background-repeat: no-repeat;
  background-position: top left;
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  margin-left: -20px;
}
.about-story-sec::after {
  content: '';
  background: url("../assets/flower1.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 500px;
  height: 100%;
  margin-bottom: -250px;
}

.about-photo-row .about-photo-wrap.is-tall.fade-up.delay-2.in-view {
    margin-top: 60px !important;
}

.about-story-sec .section-sub {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* .about-photo-row {
  margin-top: var(--space-lg);
} */

.about-photo-wrap {
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 550px;
  box-shadow: var(--shadow-sm);
}

.about-photo-wrap.is-tall {
  height: 660px;
}

.about-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.about-photo-wrap:hover img {
  transform: scale(1.06);
}

.deco-flower {
  position: absolute;
  width: 230px;
  pointer-events: none;
  z-index: 1;
  animation: flowerSway 6s ease-in-out infinite alternate;
}

.deco-flower-tl {
  top: -40px;
  left: -30px;
}

.deco-flower-br {
  bottom: -40px;
  right: -20px;
  transform: scaleX(-1);
  animation-delay: .6s;
}

@keyframes flowerSway {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-10px) rotate(-3deg); }
}

.deco-flower-br {
  animation-name: flowerSwayFlipped;
}

@keyframes flowerSwayFlipped {
  from { transform: scaleX(-1) translateY(0) rotate(0deg); }
  to   { transform: scaleX(-1) translateY(-10px) rotate(3deg); }
}

/* ==================== COLLECTIONS SECTION ==================== */
.collections-sec {
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
}

.collections-sec .section-title,
.collections-sec .section-sub {
  color: var(--color-white);
}

.collection-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg) var(--space-md);
  margin: var(--space-lg) 0;
}

.collection-item {
  width: 220px;
  text-align: center;
  transition: transform var(--transition-base);
}

.collection-item:hover {
  transform: translateY(-8px);
}

.collection-circle {
  width: 150px;
  height: 150px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-md);
}

.collection-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.collection-item:hover .collection-circle img {
  transform: scale(1.1);
}

.collection-item h3 {
  color: var(--color-white);
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: .5rem;
}

.about-collections-sec  .collection-item h3 {
  color: var(--color-white);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: .5rem;
}

.collection-item p {
  color: var(--color-white);
  font-size: var(--fs-xs);
  opacity: .9;
}

/* ==================== 22 YEARS / TRUST SECTION ==================== */
.years-sec {
  position: relative;
  overflow: hidden;
}

.years-sec::before {
  content: '';
  background: url("../assets/flower1.png");
  background-repeat: no-repeat;
  background-size:contain;
  background-position: top left;
  position: absolute;
  top: -40px;
  left: 0;
  width: 200px;
  height: 50%;
  margin-left: -50px;
}
.years-sec::after {
  content: '';
  background: url("../assets/flower2.png");
  background-repeat: no-repeat;
  background-size:contain ;
  background-position: bottom right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 300px;
  height: 60%;
  margin-bottom: -70px;
}

/* .years-sec .eyebrow-script {
  font-style: italic;
} */

.years-sec h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
  text-transform: uppercase;
}

.years-sec p {
  max-width: 480px;
}

.years-features {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.years-feature {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: 1;
}

.years-feature i,
.years-feature img {
  font-size: 2.5rem;
  color: var(--color-primary);
  display: inline-block;
  transition: transform var(--transition-base);
}

.years-feature:hover i,
.years-feature:hover img
 {
  transform: scale(1.2) rotate(-6deg);
}

.years-feature strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-black);
  text-transform: uppercase;
}

.years-feature span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-light);
}

.years-divider {
  width: 1px;
  height: 80px;
  background: #000;
}

@media (max-width: 991.98px) {
  .about-photo-wrap,
  .about-photo-wrap.is-tall {
    height: 380px;
    margin-bottom: var(--space-md);
  }

  .deco-flower {
    width: 140px;
  }

  .years-features {
    justify-content: center;
  }

  .years-divider {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .eyebrow-script {
    font-size: 32px;
  }

  .collection-item {
    width: 45%;
  }
}

/* =========================================================================
   NEW PAGE — "FEATURED BLOG POSTS" SECTION
   Added below everything else. Nothing above this line was changed.
   Reuses existing tokens + eyebrow-script / section-title / fade-up
   from the previous additions.
   ========================================================================= */

.blog-sec {
  position: relative;
}

.blog-card {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-lg);
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.blog-img {
  height: 380px;
  overflow: hidden;
}

.blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.blog-card:hover .blog-img img {
  transform: scale(1.08);
}

.blog-content {
  padding: 1.5rem 1.4rem 1.9rem;
}

.blog-content h3 {
  font-size: var(--fs-md);
  margin-bottom: .6rem;
}

.blog-content h3 a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.blog-content h3 a:hover {
  color: var(--color-primary-dark);
}

.blog-content p {
  color: var(--color-text-light);
  font-size: var(--fs-sm);
  margin-bottom: 1.2rem;
}

.read-more {
  display: inline-block;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: var(--fs-sm);
  color: var(--color-black);
  border-bottom: 1px solid var(--color-black);
  padding-bottom: 3px;
  transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.read-more:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .9rem;
  margin-top: var(--space-md);
  list-style: none;
  padding: 0;
}

.blog-pagination a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.blog-pagination a.active,
.blog-pagination a:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-3px);
}

@media (max-width: 767.98px) {
  .blog-img {
    height: 280px;
  }
}

/* ==================== Arrivals ==================== */
.new-arrivals {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 5rem 0px;
  background: url("../assets/arrival-banner.png");
  background-size: cover;
  background-position: center;
}



/* Deals banner */
.new-arrival-deals-banner  {
  position: relative;
  background-image: url('../assets/arival-deal.png');
  background-size: cover;
  background-position: center;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  color: #fff;
}
.new-arrival-deals-banner h2{
  text-align: left;
}

.new-arrival-deals-banner .content{
  width: 450px;
}

/* ==================== Arrivals ==================== */
.jewelry {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: url("../assets/jewelry-banner.png");
  background-size: cover;
  background-position: center;
}

/* Deals banner */
.jewelry-deals-banner  {
  position: relative;
  background-image: url('../assets/jewelry-deal.png');
  background-size: cover;
  background-position: center;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  color: #fff;
}
.jewelry-deals-banner h2{
  text-align: left;
}

.jewelry-deals-banner .content{
  width: 850px;
}


/* ==================== PROMO / WHY SHOP ==================== */

.jewelry-why-shop {
  position: relative;
}

.jewelry-why-shop::before {
  content: '';
  background: url("../assets/phul-2.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom left;
  position: absolute;
  top: 50%;
  left: 0;
  width: 200px;
  height: 100%;
  transform: translateY(-35%);
}

/* ==================== Arrivals ==================== */
.accessories {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: url("../assets/accessories-banner.png");
  background-size: cover;
  background-position: center;
}

/* Deals banner */
.jewelry-deals-banner  {
  position: relative;
  background-image: url('../assets/accessories-deal.png');
  background-size: cover;
  background-position: center;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  color: #fff;
}

.accessories-sec {
background-color: var(--color-white);}

.accessories-sec .eyebrow-script.on-dark ,
.accessories-sec  .section-title,
.accessories-sec .section-sub,
.accessories-sec .collection-item h3,
.accessories-sec  .collection-item p{
    color: var(--color-black);
}



.accessories-sec .collection-item h3 {
  font-size: 20px ;
  text-transform: capitalize;
font-weight: 500;
}


.accessories-product-sec {
  position: relative;
  padding-bottom: 100px;
}
.accessories-product-sec::before {
  content: '';
  background: url("../assets/flower1.png");
  background-repeat: no-repeat;
  background-position: top right;
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  margin-top: -200px;
}

.accessories-why-shop {
  position: relative;
}

.accessories-why-shop::before {
  content: '';
  background: none;
}

/* ==================== HERO ==================== */
.about-us {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: url("../assets/about-banner.png");
  background-size: cover;
  background-position: center;
}


/* ==================== BLOGS ==================== */
.blogs {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: url("../assets/blogs-banner.png");
  background-size: cover;
  background-position: center;
  padding: 5rem 0;
}


/* =========================================================================
   ============  RESPONSIVE FIXES — NEW ADDITIONS BELOW  ==================
   Sirf neeche wala hissa add kiya gaya hai. Upar ka koi bhi line ya rule
   touch/change NAHI kiya gaya — is liye DESKTOP (992px aur upar) ka
   layout, content, spacing bilkul waisa hi rahega jaisa pehle tha.

   Bootstrap ke standard (default) breakpoints use kiye hain:
     - lg  breakpoint niche: max-width: 991.98px   (tablet + mobile)
     - md  breakpoint niche: max-width: 767.98px   (mobile + chhota tablet)
     - sm  breakpoint niche: max-width: 575.98px   (chhote phones)
   Sirf 2 jagah "range" query use ki hai (min-width+max-width) taake
   pehle se maujood tablet/mobile rules ke saath clash na ho.
   ========================================================================= */

/* ---------------------------------------------------------------------
   1) TABLET (max-width: 991.98px) — sirf naye/untouched selectors
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {

  /* Har inner page ka full-height hero banner (About/Jewelry/Accessories/
     New Arrivals/Blogs) — 100vh fixed height chhote screens par content
     ko cut/overlap kar deti hai, is liye auto height + safe padding */
  .hero.about-us,
  .hero.jewelry,
  .hero.accessories,
  .hero.new-arrivals,
  .hero.blogs {
    height: auto;
    min-height: 60vh;
    padding: 120px 0 60px;
  }

  /* Deals-banner ka fixed px width wala content box mobile par overflow
     karta tha — ab container ke andar fluid ho jayega */
  .new-arrival-deals-banner .content,
  .jewelry-deals-banner .content {
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
  }

  .deals-banner {
    min-height: 380px;
  }

  /* Bohat bade heading font-sizes jo sirf desktop ke liye theek thay */
  .app-section h2 {
    font-size: 46px;
  }

  .love-club h2 {
    font-size: var(--fs-xl);
  }

  .years-sec h2 {
    font-size: var(--fs-xl);
  }

  .pickup-banner h2 {
    font-size: 40px !important;
  }

  /* Footer ki desktop-only bohat zyada spacing (overlapping banner design
     ke liye thi) — tablet/mobile par kam kar di taake khaali jagah na bane */
  .site-footer {
    padding: 80px 0 0 0;
  }

  .footer-sec {
    margin-top: 60px;
  }

  .footer-sec .links-col {
    padding-left: 0;
  }

  .years-features {
    gap: var(--space-sm);
  }

  .collection-circle {
    width: 120px;
    height: 120px;
  }
}

/* ---------------------------------------------------------------------
   1b) SIRF TABLET RANGE (768px - 991.98px)
   Yeh selectors pehle se hi 767.98px query mein maujood hain, is liye
   inko range query mein rakha gaya hai taake mobile wala existing rule
   (767.98) disturb na ho aur sirf tablet ke liye alag adjustment ho.
   --------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-content h1 {
    font-size: 3.4rem;
  }

  .section-title {
    font-size: 38px;
  }

  .main-nav {
    gap: 24px;
  }

  .collection-item {
    width: 30%;
  }
}

/* ---------------------------------------------------------------------
   2) MOBILE (max-width: 767.98px)
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {

  .hero.about-us,
  .hero.jewelry,
  .hero.accessories,
  .hero.new-arrivals,
  .hero.blogs {
    min-height: 55vh;
    padding: 100px 0 50px;
  }

  .hero-content h1 {
    line-height: 1.15;
  }

  .app-section h2 {
    font-size: 34px;
  }

  .love-club h2 {
    font-size: var(--fs-lg);
  }

  .years-sec h2 {
    font-size: var(--fs-lg);
  }

  .pickup-banner h2 {
    font-size: 30px !important;
  }

  .site-footer {
    padding: 50px 0 0 0;
  }

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

  .footer-sec .col-lg-3.col-md-6 {
    align-items: center;
    text-align: center;
    margin-bottom: var(--space-md);
  }

  .footer-sec p,
  .footer-sec h5,
  .site-footer .footer-links li {
    text-align: center !important;
  }

  .store-badges {
    justify-content: center;
  }

  .newsletter-form {
    flex-wrap: wrap;
    border-radius: var(--radius-md);
  }

  .newsletter-form button {
    margin: 0.5rem auto 0;
  }

  /* Sirf decorative flower/petal images/backgrounds hide kiye hain
     (koi actual content nahi) taake chhoti screen saaf dikhe */
  .deco-flower,
  .why-shop::before,
  .bg-blush::before,
  .about-story-sec::before,
  .about-story-sec::after,
  .years-sec::before,
  .years-sec::after,
  .jewelry-why-shop::before,
  .accessories-product-sec::before,
  .app-section::before {
    display: none;
  }

  .collection-circle {
    width: 100px;
    height: 100px;
  }

  .why-shop-icon {
    margin-left: 0;
  }

  .blog-pagination {
    flex-wrap: wrap;
  }

  .site-header .logo img {
    max-height: 52px;
  }

  .header-icons {
    gap: 0.8rem;
  }
}

/* ---------------------------------------------------------------------
   3) CHHOTE PHONES (max-width: 575.98px)
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {

  .hero-content h1 {
    font-size: 1.9rem;
  }

  .hero-content .eyebrow {
    font-size: var(--fs-md);
  }

  .section-title {
    font-size: 30px;
  }

  .section-sub {
    font-size: var(--fs-sm);
  }

  .app-section h2 {
    font-size: 26px;
  }

  .pickup-banner h2 {
    font-size: 24px !important;
  }

  .deals-banner {
    min-height: 300px;
    padding: 0 10px;
  }

  .deals-banner h2 {
    font-size: var(--fs-lg);
  }

  .collection-item {
    width: 45%;
  }

  .collection-circle {
    width: 90px;
    height: 90px;
  }

  .why-shop-item,
  .why-shop-item p,
  .why-shop-item h4 {
    text-align: center;
  }

  .why-shop-icon {
    margin: 0 auto 1rem;
  }

  .promo-caption h3,
  .promo-caption p {
    text-align: center;
  }

  .btn-pill {
    padding: 0.6rem 1.5rem;
    font-size: var(--fs-xs);
  }

  .love-club-icon {
    justify-content: center;
  }

  .love-club h2,
  .love-club .lead-txt,
  .love-club p,
  .love-club ul li {
    text-align: center;
    justify-content: center;
  }

  .years-feature {
    flex-direction: column;
    text-align: center;
  }

  .blog-content h3 {
    font-size: var(--fs-sm);
  }

  .blog-img {
    height: 220px;
  }
}

/* =========================================================================
   ============  HEADER / FOOTER RESPONSIVE FIXES (header.php + footer.php)
   Yeh bhi sirf ADDITION hai — upar (is file ke pehle hisse) mein aur
   header.php/footer.php ke HTML mein KUCH change nahi kiya. Sirf neeche
   diye gaye naye media-query rules add kiye hain, desktop (992px+) bilkul
   waisa hi dikhega jaisa pehle tha.
   ========================================================================= */

@media (max-width: 991.98px) {

  /* Header ki row: logo aur icons/hamburger — mobileNav (jo Bootstrap
     collapse hai lekin uske 'collapse' class HTML mein nahi hai) ko
     poori width mein neeche le jate hain taake logo + icons ek row mein
     properly left-right dikhein */
  .site-header .row {
    flex-wrap: wrap;
  }

  .site-header .col-lg-3:not(.order-lg-2) {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .site-header .col-lg-3.order-lg-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  #mobileNav {
    order: 3;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* HTML mein #mobileNav par khud "collapse" class nahi hai, is liye
     Bootstrap ka default collapse-hide sirf pehle click ke baad kaam
     karta hai. Ye rule shuru se hi (page load par) menu ko band rakhta
     hai; jab navbar-toggler par click hoga to Bootstrap "show" class
     add karega aur neeche wala rule usay dikha dega. */
  #mobileNav:not(.show) {
    display: none;
  }

  #mobileNav.show {
    display: block;
  }

  /* Purani rule (upar, max-width:767.98px) mein .main-nav hamesha
     display:none tha — jis se hamburger button kabhi kaam nahi karta
     tha mobile par. Yahan overwrite kar diya (source order mein neeche
     hai is liye ye wala apply hoga) taake toggle khulne par menu dikhe */
  .main-nav {
    display: flex !important;
    gap: 18px;
    padding: 1rem 0;
  }

  .header-icons {
    justify-content: flex-end;
  }

  /* Topbar ka location text lambi screen ke liye tha, tablet par thoda kam */
  .topbar span {
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {

  .site-header .logo img {
    max-height: 46px;
  }

  #mobileNav .main-nav {
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    margin-top: 0.5rem;
  }

  .main-nav a {
    padding: 10px 0;
  }

  .topbar .container {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center !important;
    text-align: center;
  }

  .topbar .location {
    font-size: 13px;
  }

  .topbar .social {
    margin-top: 2px;
  }

  /* Pickup banner ke do info-box (location/hours) mobile par center */
  .pickup-box {
    text-align: center;
  }

  .pickup-box .content {
    align-items: center;
  }

  .pickup-box p,
  .pickup-box h5 {
    text-align: center !important;
  }
}

@media (max-width: 575.98px) {

  .topbar span {
    font-size: 12px;
  }

  .topbar .social a {
    margin-left: 8px;
    font-size: 15px;
  }

  .header-icons {
    gap: 0.6rem;
  }

  .header-icons a {
    font-size: 17px;
  }

  .pickup-box {
    flex-direction: column;
    gap: 10px;
  }

  .pickup-banner h2 {
    line-height: 1.2;
  }

  .footer-bottom {
    font-size: 13px;
  }

  .get-direction {
    font-size: var(--fs-xs);
    padding: 0.4rem 1rem;
  }
}

/* =========================================================================
   ============  MOBILE: HAR GRID SIRF 1 COLUMN PER ROW  ==================
   Sirf addition — sab grids jo pehle mobile par bhi "col-6" (2 per row)
   thi (Product cards, Category cards, Why-Shop-With-Us icons), un sab ko
   mobile par single column bana diya. Header ki row (jo bhi col-6 use
   karti hai) is se untouched hai kyunke wo <header> tag mein hai, ye
   rule sirf <section> ke andar wale col-6 par lagta hai. Desktop/tablet
   (768px aur upar) is se bilkul affect nahi hoga.
   ========================================================================= */
@media (max-width: 767.98px) {

  /* Product cards (New Arrivals / Jewelry / Accessories / New-Arrivals page)
     aur Category cards (Home page) aur Why-Shop-With-Us icons — sab
     "col-6 col-lg-3" pattern use karte hain */
  section .col-6.col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .cat-card,
  .why-shop-item {
    margin-bottom: var(--space-md);
  }

  /* Collections grid (About Us / Accessories pages) — is se pehle
     (original file ke) rule ne ".collection-item{width:45%}" set kiya
     tha (2 per row); yahan single column kar diya */
  .collection-item {
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================================================
   ============  MOBILE: HAR SECTION KO TOP PAR EK JAISI (SAME) PADDING
   Jin sections mein pehle se apni padding-top nahi thi (jaise deals-banner
   variants), unko yahan ek common chhoti padding-top di gayi hai taake
   sections aapas mein chipke hue na lagein — sab sections par SAME value.
   Jin sections mein pehle se ".section-pad" ya khud ka ".hero" wagera
   padding tha, wo zyada specific hone ki wajah se apni value hi rakhenge
   (is rule se override nahi honge), is liye unka layout change nahi hoga.
   ========================================================================= */
@media (max-width: 767.98px) {
  section {
    padding-top: 40px;
  }
}
.cat-title-row p {
    font-weight: 500;
    font-size: 18px;
}
a.btn-pill {
    position: relative;
}

a.btn-pill::after {
    content: '';
    position: absolute;
    width: 90px;
    height: 100%;
    border-radius: 100%;
    background: #FFEAE8;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    z-index: 1;
    transition: 1s ease;
}
a.btn-pill span {
    position: relative;
    z-index: 2;
}
a.btn-pill:hover::after {
    width: 100%;
}
.no-after::after {
    opacity: 0;
}
.btn-trans-white {
    background: transparent;
    border: 1px solid #fff;
    color: #000;
}

.hero a.btn-pill.btn-pill-solid:hover span {
    color: var(--color-primary-dark);
}

.ratings {
    margin-left: auto;
    display: block;
    text-align: right;
}

.product-price-row {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 12px;
}

table.sku-table tr {
    width: 60%;
}

.sku-table {
    font-size: 15px;
    margin: 10px 0;
    border-collapse: collapse;
    vertical-align: middle;
    margin-bottom: 30px;
}
.sku-table th {
    text-align: left;
    font-weight: 600;
    padding: 8px 12px 8px 0;
    color: #666;
}
.sku-table td {
    padding: 2px 0;
    color: #333;
}

.wrapper-btn {
    display: flex;
    align-items: center;
    /* gap: 16px; */
    margin: 20px 0;
    flex-wrap: wrap;
}

.wrapper-btn .qty.text {
    font-weight: 600;
    font-size: 18px;
    margin-right: 15px;
}

/* Pill-shaped qty stepper wrapping minus / input / plus */
.wrapper-btn .qty.minus,
.wrapper-btn .qty.plus,
.wrapper-btn .qty-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wrapper-btn .qty.minus,
.wrapper-btn .qty.plus {
    width: 38px;
    height: 38px;
    cursor: pointer;
    user-select: none;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    background: #fff;
    border: 1px solid #e5d9d3;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wrapper-btn .qty.minus {
    border-radius: 50% 0 0 50%;
    border-right: none;
}

.wrapper-btn .qty.plus {
    border-radius: 0 50% 50% 0;
    border-left: none;
}

.wrapper-btn .qty.minus:hover,
.wrapper-btn .qty.plus:hover {
    background: #fd683e;
    border-color: #fd683e;
    color: #fff;
}

.wrapper-btn .qty-value {
    width: 52px;
    height: 38px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    border: 1px solid #e5d9d3;
    border-left: none;
    border-right: none;
    -moz-appearance: textfield;
}

/* remove native number spinners */
.wrapper-btn .qty-value::-webkit-outer-spin-button,
.wrapper-btn .qty-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wrapper-btn .qty-value:focus {
    outline: none;
    border-color: #fd683e;
}

.wrapper-btn .cart-btn {
    margin-left: 20px;
}

.ratings {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 10px 0;
    justify-content: end;
}

.ratings i.fa-star {
    font-size: 14px;
    color: #fd683e;
}

.ratings .review-count {
    margin-left: 8px;
    font-size: 13px;
    color: #777;
    font-weight: 500;
}

.cart-alert {
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 14px;
    font-weight: 500;
}
.cart-alert-success {
    background: #e9f9ee;
    color: #1e7e34;
    border: 1px solid #b6ecc4;
}
.cart-alert-error {
    background: #fdeeee;
    color: #c0392b;
    border: 1px solid #f5c2c2;
}

.cart-table {
    border: 1px solid #eee2dd;
    border-radius: 10px;
    overflow: hidden;
}
.cart-table-head {
    display: flex;
    align-items: center;
    background: #faf5f2;
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #777;
}
.cart-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-top: 1px solid #f1e8e3;
    gap: 10px;
}
.cart-table-head .ct-product,
.cart-row .ct-product { flex: 2 1 260px; display: flex; align-items: center; gap: 14px; }
.cart-table-head .ct-price,
.cart-row .ct-price   {flex: 1 1 90px;}
.cart-table-head .ct-qty,
.cart-row .ct-qty     { flex: 1 1 130px; }
.cart-table-head .ct-total,
.cart-row .ct-total   { flex: 1 1 100px; font-weight: 700; }
.cart-table-head .ct-remove,
.cart-row .ct-remove  { flex: 0 0 30px; text-align: right; }

.ct-product img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
}
.ct-product-info h4 {
    font-size: 18px;
    margin: 0 0 4px;
}
.ct-view-link {
    font-size: 15px;
    color: var(--color-primary);
    text-decoration: none;
}

.ct-qty {
    display: flex;
    align-items: center;
}
.ct-qty .qty.minus,
.ct-qty .qty.plus {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5d9d3;
    cursor: pointer;
    font-weight: 600;
    color: #333;
}
.ct-qty .qty.minus { border-radius: 50% 0 0 50%; border-right: none; }
.ct-qty .qty.plus  { border-radius: 0 50% 50% 0; border-left: none; }
.ct-qty .qty.minus:hover,
.ct-qty .qty.plus:hover {
    background: #fd683e;
    border-color: #fd683e;
    color: #fff;
}
.cart-qty-input {
    width: 44px;
    height: 30px;
    text-align: center;
    border: 1px solid #e5d9d3;
    border-left: none;
    border-right: none;
    font-weight: 600;
    -moz-appearance: textfield;
}
.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.remove-item {
    color: #bbb;
    transition: color .2s ease;
}
.remove-item:hover { color: #e74c3c; }

.cart-actions {
    margin-top: 20px;
}

.cart-summary {
    background: #faf5f2;
    border-radius: 10px;
    padding: 28px;
    position: sticky;
    top: 100px;
}
.cart-summary h3 {
    margin-bottom: 20px;
    font-size: 18px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: #555;
    margin-bottom: 12px;
}
.summary-total {
    font-size: 17px;
    font-weight: 700;
    color: #222;
    margin-bottom: 22px;
}
.cart-summary .btn-pill {
    width: 100%;
    display: block;
}

.cart-empty {
    padding: 70px 20px;
}
.cart-empty i {
    font-size: 46px;
    color: #e5d9d3;
    margin-bottom: 16px;
}
.cart-empty h3 {
    margin-bottom: 8px;
}
.cart-empty p {
    color: #888;
    margin-bottom: 22px;
}

@media (max-width: 767px) {
    .cart-row { flex-direction: column; align-items: flex-start; }
    .cart-row > div { width: 100%; }
    .cart-row .ct-price::before,
    .cart-row .ct-qty::before,
    .cart-row .ct-total::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        color: #999;
        display: block;
        margin-bottom: 4px;
    }
    .ct-remove { text-align: left; }
}

.form-group.info-section {
    margin-bottom: 20px;
}

.checkout-block,
.order-summary-box,
.payment-box {
    background: #faf5f2;
    border-radius: 10px;
    padding: 28px;
}
.checkout-block { background: #fff; border: 1px solid #eee2dd; }

.checkout-block-title,
.order-summary-box h3,
.payment-box h3 {
    font-size: 25px;
    margin-bottom: 18px;
}

.returning-customer {
    font-size: 16px;
    color: #777;
    margin-bottom: 20px;
}
.returning-customer a {color: var(--color-primary);}

.info-section label {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
    color: #444;
}
.info-section .form-control {
    border: 1px solid #e5d9d3;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
}
.info-section .form-control:focus {
    border-color: #fd683e;
    box-shadow: none;
    outline: none;
}
.check-1 {
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-summary-box {
    margin-bottom: 24px;
}
.order-items {
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 18px;
}
.order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1e8e3;
}
.order-item:last-child { border-bottom: none; }
.order-item-img {
    position: relative;
    flex-shrink: 0;
}
.order-item-img img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
}
.order-item-qty {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #fd683e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.order-item-info {
    flex: 1;
}
.order-item-info h5 {
    font-size: 15px;
    margin: 0 0 2px;
}
.order-item-unit {
    font-size: 15px;
    color: #888;
}
.order-item-total {
    font-size: 20px;
    font-weight: 600;
}

.order-totals .summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    color: #555;
    margin-bottom: 10px;
}
.order-totals .summary-total {
    font-size: 17px;
    font-weight: 700;
    color: #222;
}

.payment-box .accordion-button {
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    box-shadow: none;
}
.payment-box .accordion-button:not(.collapsed) {
    background: #fff5f1;
    color: #fd683e;
}
.payment-box .accordion-button:focus { box-shadow: none; }

.StripeElement {
    box-sizing: border-box;
    height: 40px;
    padding: 10px 12px;
    border: 1px solid #e5d9d3;
    border-radius: 6px;
    background-color: white;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
    margin-bottom: 10px;
}
.StripeElement--focus { box-shadow: 0 1px 3px 0 #cfd7df; border-color: #fd683e; }
.StripeElement--invalid { border-color: #fa755a; }
.StripeElement--webkit-autofill { background-color: #fefde5 !important; }

.custom-btn {
    padding-top: 15px;
}

.form-group.info-section.custom-btn {
    text-align: center;
}

.product-checkout a {
    max-width: 300px;
    margin: auto;
}