/* ==========================================================================
   Shiva Cosmetic — Main Stylesheet
   لوازم آرایشی شیوا — استایل اصلی سایت
   Font: Vazirmatn | Framework: Bootstrap 5 RTL
   ========================================================================== */

:root{
  --pink: #d6006c;
  --pink-rgb: 214,0,108;
  --pink-dark: #9c0050;
  --pink-darker: #6e0038;
  --pink-light: #ff4fa0;
  --pink-50: #fff6fa;
  --pink-100: #ffe9f3;
  --pink-200: #ffd3e6;
  --gold: #c9a15a;
  --gold-light: #e6cd9a;
  --dark: #5c1638;
  --dark-2: #7a1c46;
  --ink: #2b1420;
  --text: #3a2430;
  --muted: #8d7580;
  --border-soft: #f3dde8;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 10px 35px -12px rgba(155, 0, 80, .18);
  --shadow-card: 0 6px 20px -8px rgba(155, 0, 80, .15);
  --transition: all .35s cubic-bezier(.22,.61,.36,1);
}

html{ scroll-behavior: smooth; }

body{
  font-family: 'Vazirmatn', sans-serif;
  color: var(--text);
  background: #fff;
  font-size: 15.5px;
  line-height: 1.9;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Vazirmatn', sans-serif;
  font-weight: 700;
  color: var(--dark);
}

a{ text-decoration: none; color: inherit; transition: var(--transition); }
img{ max-width: 100%; }
::selection{ background: var(--pink); color: #fff; }

.text-pink{ color: var(--pink) !important; }
.text-gold{ color: var(--gold) !important; }
.text-muted-soft{ color: var(--muted) !important; }
.bg-pink{ background-color: var(--pink) !important; }
.bg-pink-50{ background-color: var(--pink-50) !important; }
.bg-pink-100{ background-color: var(--pink-100) !important; }
.bg-dark-plum{ background-color: var(--dark) !important; }
.fw-800{ font-weight: 800 !important; }

.container-x{ max-width: 1290px; margin-inline: auto; padding-inline: 1rem; }

/* ---------- Buttons ---------- */
.btn{ border-radius: 50px; font-weight: 600; padding: .65rem 1.6rem; transition: var(--transition); }
.btn-pink{
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-light) 100%);
  color:#fff; border: none;
  box-shadow: 0 10px 20px -8px rgba(var(--pink-rgb),.55);
}
.btn-pink:hover{ color:#fff; transform: translateY(-2px); box-shadow: 0 14px 26px -8px rgba(var(--pink-rgb),.65); }
.btn-outline-pink{ border: 1.5px solid var(--pink); color: var(--pink); background: transparent; }
.btn-outline-pink:hover{ background: var(--pink); color:#fff; transform: translateY(-2px); }
.btn-dark-plum{ background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%); color: var(--dark); }
.btn-dark-plum:hover{ color: var(--dark); transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(201,161,90,.55); }
.btn-icon{
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border-soft); color: var(--dark); background: #fff;
  padding: 0;
}
.btn-icon:hover{ background: var(--pink); border-color: var(--pink); color:#fff; }
.btn-sm-pill{ border-radius: 50px; padding: .4rem 1rem; font-size: .85rem; }

/* ---------- Section heading ---------- */
.section-pad{ padding-block: 4.5rem; }
.section-head{ margin-bottom: 2.6rem; }
.section-head .eyebrow{
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--pink); font-weight: 700; font-size: .85rem;
  letter-spacing: .5px; margin-bottom: .6rem;
}
.section-head .eyebrow::before, .section-head .eyebrow::after{ content:""; width: 22px; height: 2px; background: var(--pink); border-radius: 2px; }
.section-head h2{ font-size: clamp(1.5rem, 2.4vw, 2.15rem); margin-bottom: .5rem; }
.section-head p{ color: var(--muted); max-width: 620px; }

/* ==========================================================================
   Top bar
   ========================================================================== */
.topbar{
  background: linear-gradient(90deg, var(--pink-dark) 0%, var(--pink) 100%);
  color: rgba(255,255,255,.92);
  font-size: .82rem;
}
.topbar a{ color: rgba(255,255,255,.92); }
.topbar a:hover{ color: #fff; opacity:.85; }
.topbar .divider{ width:1px; height:14px; background: rgba(255,255,255,.3); display:inline-block; }
.topbar .social-mini a{
  width: 28px; height: 28px; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.15); font-size: .8rem; color:#fff;
}
.topbar .social-mini a:hover{ background: #fff; color: var(--pink); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{ background: #fff; }
.header-main{ padding-block: 1.1rem; border-bottom: 1px solid var(--border-soft); }
.brand-logo img{ height: 56px; width: auto; }
.brand-logo .brand-text{ line-height: 1.15; }
.brand-logo .brand-text strong{ font-size: 1.25rem; letter-spacing: .5px; color: var(--dark); font-weight: 800; }
.brand-logo .brand-text span{ font-size: .72rem; color: var(--pink); letter-spacing: 2px; }

.header-search{
  max-width: 560px; background:#fff; border: 1.5px solid var(--border-soft); border-radius: 50px;
  padding: .3rem .3rem .3rem 0; transition: var(--transition); position:relative;
}
.header-search:focus-within{ border-color: var(--pink); box-shadow: 0 6px 20px -8px rgba(var(--pink-rgb),.35); }
.header-search select{
  border: none; background: transparent; font-size: .8rem; font-weight:600; color: var(--muted);
  padding-inline: 1.2rem .6rem; max-width: 150px; position: relative;
}
.header-search select:focus{ outline: none; box-shadow:none; color: var(--dark); }
.header-search::before{
  content:""; position:absolute; top:9px; bottom:9px; inset-inline-start:152px; width:1px; background: var(--border-soft);
}
.header-search .form-control{
  border: none; padding: .55rem .5rem; box-shadow: none; background: transparent; font-size: .87rem;
}
.header-search .form-control:focus{ border: none; box-shadow: none; }
.header-search .btn{
  border-radius: 50%; background: linear-gradient(135deg, var(--pink) 0%, var(--pink-light) 100%); color:#fff;
  width: 42px; height: 42px; display:flex; align-items:center; justify-content:center; flex: none; padding:0;
  box-shadow: 0 8px 16px -6px rgba(var(--pink-rgb),.5); transition: var(--transition);
}
.header-search .btn:hover{ transform: scale(1.06); }

.header-actions{ gap: .6rem; }
.header-actions .action-item{ position: relative; text-align:center; color: var(--dark); }
.header-actions .action-item i{ font-size: 1.35rem; }
.header-actions .action-item small{ display:block; font-size: .68rem; color: var(--muted); }
.header-actions .action-item:hover{ color: var(--pink); }
.header-actions .badge-count{
  position:absolute; top:-6px; left:-8px; background: var(--pink); color:#fff;
  font-size: .62rem; width: 18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}

/* Main nav */
.main-nav{ background: #fff; border-bottom: 1px solid var(--border-soft); box-shadow: 0 2px 10px -6px rgba(155,0,80,.08); }
.main-nav .container-x{ position: relative; }
.main-nav .navbar-nav{ gap: .2rem; }
.main-nav .navbar-nav .nav-link{
  color: var(--dark); font-weight: 600; font-size: .93rem; padding: 1.05rem 1.05rem; position: relative;
}
.main-nav .navbar-nav .nav-link::after{
  content:""; position:absolute; bottom:8px; inset-inline:1.05rem; height:2px; background: var(--pink);
  transform: scaleX(0); transition: var(--transition); border-radius: 2px;
}
.main-nav .navbar-nav .nav-link:hover, .main-nav .navbar-nav .nav-link.active{ color: var(--pink); }
.main-nav .navbar-nav .nav-link:hover::after, .main-nav .navbar-nav .nav-link.active::after{ transform: scaleX(1); }
.main-nav .nav-item.dropdown{ position: relative; }
.main-nav .nav-item.dropdown.mega{ position: static; }
.main-nav .nav-item.dropdown > .nav-link .bi-chevron-down{ font-size:.7rem; margin-inline-start:.3rem; transition: var(--transition); }
.main-nav .nav-item.dropdown:hover > .nav-link .bi-chevron-down{ transform: rotate(180deg); }
.main-nav .dropdown-menu{
  border: none; border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); padding: .6rem;
  border-top: 3px solid var(--pink);
  position: absolute; top: 100%; inset-inline-start: 0; margin-top: 0;
  display: block; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: var(--transition); pointer-events: none;
}
.main-nav .nav-item.dropdown:hover .dropdown-menu{ opacity:1; visibility:visible; transform: translateY(0); pointer-events: auto; }
.main-nav .dropdown-menu li a{ border-radius: 8px; padding:.5rem .8rem; font-size:.88rem; color: var(--text); font-weight: 500; }
.main-nav .dropdown-menu li a:hover{ background: var(--pink-50); color: var(--pink); }
.main-nav .nav-badge-sale{
  background: var(--pink); color:#fff; font-size: .62rem; border-radius: 50px; padding: 1px 7px; margin-inline-start: 4px; vertical-align: 2px;
}

/* Mega menu */
.dropdown-menu.mega-menu{
  inset-inline-start: 0; inset-inline-end: 0; width: auto; min-width: 0; max-width: none;
  padding: 2rem 2.2rem 1.6rem; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.mega-menu .mega-col-title{
  font-size: .88rem; font-weight: 800; color: var(--dark); margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem; padding-bottom: .6rem; border-bottom: 1px dashed var(--border-soft);
}
.mega-menu .mega-col-title i{ color: var(--pink); font-size: 1.05rem; }
.mega-menu .mega-links{ list-style: none; padding: 0; margin: 0; }
.mega-menu .mega-links li{ margin-bottom: .6rem; }
.mega-menu .mega-links a{ font-size: .83rem; color: var(--text); display: inline-block; transition: var(--transition); }
.mega-menu .mega-links a:hover{ color: var(--pink); transform: translateX(-3px); }
.mega-menu .mega-links a.view-all{ color: var(--pink); font-weight: 700; }
.mega-menu .mega-promo{
  background: linear-gradient(120deg, var(--pink) 0%, var(--pink-dark) 100%); border-radius: var(--radius-sm);
  padding: 1.1rem 1.6rem; color: #fff; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.4rem; flex-wrap: wrap;
}
.mega-menu .mega-promo .txt strong{ font-size: 1rem; display: block; }
.mega-menu .mega-promo .txt span{ font-size: .8rem; opacity: .85; }
.mega-menu .mega-promo .btn{ white-space: nowrap; }

/* ==========================================================================
   Breadcrumb / Page header
   ========================================================================== */
.page-header{
  background: linear-gradient(120deg, var(--pink-100) 0%, #fff 60%, var(--pink-50) 100%);
  padding-block: 2.6rem;
  position: relative;
  overflow: hidden;
}
.page-header::after{
  content:""; position:absolute; inset:0; background: url('../images/logo.png') no-repeat left -60px bottom -60px;
  background-size: 220px; opacity:.06; pointer-events:none;
}
.page-header h1{ font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom:.4rem; }
.breadcrumb{ font-size: .85rem; margin-bottom:0; }
.breadcrumb-item a{ color: var(--muted); }
.breadcrumb-item a:hover{ color: var(--pink); }
.breadcrumb-item.active{ color: var(--pink); font-weight: 600; }

/* ==========================================================================
   Hero slider
   ========================================================================== */
.hero-slider{ position: relative; background: var(--pink-50); }
.hero-slide{
  position: relative; min-height: 560px;
  overflow: hidden; background: var(--pink-50);
}
/* Photo half — pinned physically left */
.hero-slide .slide-media{
  position:absolute; top:0; bottom:0; left:0; width:62%;
  overflow:hidden;
}
.hero-slide .slide-bg{
  position:absolute; inset:0; background-size: cover; background-position:center;
  transform: scale(1.06); transition: transform 7s ease;
}
.carousel-item.active .hero-slide .slide-bg{ transform: scale(1.15); }
.hero-slide .slide-media::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:24%;
  background: linear-gradient(to left, var(--pink) 0%, rgba(214,0,108,0) 100%);
  opacity:.9; pointer-events:none;
}
/* Content panel — pinned physically right, diagonal cut faces the photo (left side) */
.hero-slide .slide-panel{
  position:absolute; top:0; bottom:0; right:0; width:47%; min-width:340px;
  display:flex; align-items:center; z-index:2;
  background: linear-gradient(155deg, var(--pink) 0%, var(--pink-dark) 100%);
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 0% 100%);
  box-shadow: -40px 0 70px -30px rgba(20,0,10,.35);
}
.hero-slide .slide-panel::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.09) 1.6px, transparent 1.6px);
  background-size: 18px 18px; pointer-events:none;
}
.hero-slide .slide-content{ position:relative; z-index:2; color:#fff; padding: 2.2rem 2.6rem 2.2rem 3.6rem; }
.hero-slide .slide-content .eyebrow{
  display:inline-flex; align-items:center; gap:.4rem; background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4);
  padding: .35rem 1rem; border-radius: 50px; font-size: .78rem; margin-bottom: 1.1rem; backdrop-filter: blur(4px);
}
.hero-slide .slide-content h2{ color:#fff; font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight:800; margin-bottom: 1rem; line-height:1.5; }
.hero-slide .slide-content p{ color: rgba(255,255,255,.88); max-width: 360px; margin-bottom: 1.7rem; font-size: .94rem; }
/* Floating info card over the photo */
.slide-float-card{
  position:absolute; bottom:26px; left:26px; z-index:3; background:#fff; border-radius:14px;
  padding:.75rem 1.1rem; display:flex; align-items:center; gap:.7rem; max-width:230px;
  box-shadow:0 16px 32px -12px rgba(20,0,10,.4);
}
.slide-float-card .ph-tile{ width:42px; height:42px; border-radius:10px; flex:none; }
.slide-float-card .ph-tile i{ font-size:1.1rem; }
.slide-float-card strong{ display:block; font-size:.78rem; color:var(--dark); }
.slide-float-card span{ font-size:.71rem; color:var(--muted); }

.hero-slider .carousel-indicators{ bottom: 22px; right: 6%; left: auto; justify-content:flex-end; margin:0; width:auto; z-index:5; }
.hero-slider .carousel-indicators [data-bs-target]{
  width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.55); border:none; margin-inline: 5px; opacity:1;
}
.hero-slider .carousel-indicators .active{ background: #fff; width:26px; border-radius:6px; }
.hero-slider .carousel-control-prev, .hero-slider .carousel-control-next{ width: 52px; opacity:0; transition: var(--transition); z-index:5; }
.hero-slider:hover .carousel-control-prev, .hero-slider:hover .carousel-control-next{ opacity:1; }
.hero-slider .carousel-control-prev-icon, .hero-slider .carousel-control-next-icon{
  background-color: rgba(255,255,255,.2); border-radius:50%; padding: 16px; backdrop-filter: blur(4px);
}
@media (max-width: 991.98px){
  .hero-slide{ min-height: 0; }
  .hero-slide .slide-media{ position:relative; inset:auto; left:auto; width:100%; height:230px; }
  .hero-slide .slide-media::after{ display:none; }
  .slide-float-card{ display:none; }
  .hero-slide .slide-panel{ position:relative; inset:auto; width:100%; min-width:0; clip-path:none; box-shadow:none; }
  .hero-slide .slide-content{ padding: 1.8rem 1.4rem; text-align:center; }
  .hero-slide .slide-content p{ max-width:none; margin-inline:auto; }
  .hero-slider .carousel-indicators{ right:0; left:0; justify-content:center; bottom:10px; }
}

/* ==========================================================================
   Smart skin advisor
   ========================================================================== */
.advisor-wrap{ position: relative; z-index: 5; padding-inline: 1rem; }
.advisor-card{
  position: relative; max-width: 1180px; margin-inline: auto;
  background: linear-gradient(120deg, #fff 0%, var(--pink-50) 55%, var(--pink-100) 100%);
  border: 1px solid var(--pink-200); border-radius: 28px; padding: 2.6rem 2.8rem 2.2rem;
  box-shadow: 0 30px 60px -25px rgba(155,0,80,.28);
  overflow: hidden;
}
.advisor-card::before{
  content:""; position:absolute; top:-70px; left:-70px; width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle, rgba(var(--pink-rgb),.14) 0%, transparent 70%); pointer-events:none;
}
.advisor-ribbon{
  position:absolute; top:0; right:38px; background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%);
  color:#fff; font-size:.72rem; font-weight:700; padding:.4rem 1.1rem; border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 16px -8px rgba(var(--pink-rgb),.5);
}
.advisor-head{ text-align:center; margin-bottom: 2.2rem; position:relative; z-index:1; }
.advisor-head .eyebrow{ justify-content:center; }
.advisor-head h2{ font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin-bottom:.5rem; }
.advisor-head p{ color: var(--muted); font-size:.92rem; max-width:520px; margin-inline:auto; }

.advisor-field{ position:relative; z-index:1; }
.advisor-field .field-label{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.advisor-field .field-label .name{ display:flex; align-items:center; gap:.5rem; font-size:.86rem; font-weight:700; color: var(--dark); }
.advisor-field .step-num{
  width:22px; height:22px; border-radius:50%; border:1.5px solid var(--pink); color: var(--pink);
  font-size:.72rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.advisor-field .optional-tag{ font-size:.72rem; color: var(--muted); }
.advisor-select-wrap{ position:relative; }
.advisor-select-wrap select{
  width:100%; appearance:none; background: #fff; border:1.5px solid var(--border-soft); border-radius:14px;
  padding: .85rem 1.1rem .85rem 2.4rem; font-size:.88rem; font-weight:600; color: var(--dark);
  transition: var(--transition);
}
.advisor-select-wrap select:focus{ outline:none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(var(--pink-rgb),.12); }
.advisor-select-wrap i{
  position:absolute; top:50%; left:1rem; transform: translateY(-50%); color: var(--pink); font-size:.85rem; pointer-events:none;
}
.advisor-actions{ text-align:center; margin-top: 2rem; position:relative; z-index:1; }
.advisor-hint{ font-size:.82rem; color: var(--muted); margin-top:.9rem; margin-bottom:0; }
.advisor-hint i{ color: var(--pink); margin-inline-end:.3rem; }
@media (max-width: 991.98px){
  .advisor-card{ padding: 2.2rem 1.4rem 1.8rem; border-radius: 22px; }
}

/* ---------- Trust badges ---------- */
.trust-strip{ border-bottom: 1px solid var(--border-soft); }
.trust-item{ display:flex; align-items:center; gap:.8rem; padding-block: 1.3rem; }
.trust-item i{ font-size: 1.7rem; color: var(--pink); }
.trust-item strong{ display:block; font-size: .9rem; }
.trust-item span{ font-size: .78rem; color: var(--muted); }

/* ==========================================================================
   Category cards
   ========================================================================== */
.cat-card{
  display:block; text-align:center; padding: 1.8rem 1rem; border-radius: var(--radius-md);
  background: var(--pink-50); border: 1px solid var(--border-soft); transition: var(--transition); height:100%;
}
.cat-card .cat-icon{
  width: 68px; height:68px; border-radius:50%; margin:0 auto 1rem; display:flex; align-items:center; justify-content:center;
  background: #fff; color: var(--pink); font-size: 1.7rem; box-shadow: var(--shadow-card); transition: var(--transition);
}
.cat-card strong{ display:block; font-size: .92rem; margin-bottom:.2rem; color: var(--dark); }
.cat-card span{ font-size: .76rem; color: var(--muted); }
.cat-card:hover{ background: var(--pink); transform: translateY(-6px); border-color: var(--pink); }
.cat-card:hover .cat-icon{ background: #fff; color: var(--pink); transform: scale(1.08) rotate(-6deg); }
.cat-card:hover strong, .cat-card:hover span{ color:#fff; }

/* ==========================================================================
   Product placeholder tile (used where a real photo will later go)
   ========================================================================== */
.ph-tile{
  position: relative; width:100%; aspect-ratio: 1/1; border-radius: var(--radius-md) var(--radius-md) 0 0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background: linear-gradient(150deg, var(--pink-100) 0%, var(--pink-50) 55%, #fff 100%);
}
.ph-tile::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(var(--pink-rgb),.09) 1.6px, transparent 1.6px);
  background-size: 16px 16px;
}
.ph-tile i{ font-size: 3.1rem; color: var(--pink); opacity:.55; position:relative; z-index:1; transition: var(--transition); }
.ph-tile.ph-lg i{ font-size: 4.4rem; }
.ph-tile.ph-sm{ aspect-ratio: 1/1; border-radius: var(--radius-sm); }
.ph-tile.ph-sm i{ font-size: 1.6rem; }
.ph-tile.tone-gold{ background: linear-gradient(150deg, #faf2e2 0%, #fffaf0 55%, #fff 100%); }
.ph-tile.tone-gold i{ color: var(--gold); }

/* ==========================================================================
   Product card
   ========================================================================== */
.product-card{
  border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow:hidden; height:100%;
  background:#fff; transition: var(--transition); position:relative;
}
.product-card:hover{ box-shadow: var(--shadow-soft); transform: translateY(-5px); border-color: transparent; }
.product-card .ph-tile{ border-radius: 0; }
.product-card:hover .ph-tile i{ transform: scale(1.12); }
.product-card .badges{ position:absolute; top:12px; inset-inline-start:12px; z-index:2; display:flex; flex-direction:column; gap:.35rem; }
.product-card .badge-sale{ background: var(--pink); color:#fff; font-size:.7rem; padding:.3rem .6rem; border-radius:50px; font-weight:700; }
.product-card .badge-new{ background: var(--dark); color:#fff; font-size:.7rem; padding:.3rem .6rem; border-radius:50px; font-weight:700; }
.product-card .quick-actions{
  position:absolute; top:12px; inset-inline-end:12px; z-index:2; display:flex; flex-direction:column; gap:.5rem;
  opacity:0; transform: translateX(0); transition: var(--transition);
}
.product-card:hover .quick-actions{ opacity:1; }
.product-card .quick-actions .btn-icon{ width:36px; height:36px; font-size:.9rem; box-shadow: var(--shadow-card); }
.product-card .card-body{ padding: 1.1rem 1.1rem 1.3rem; }
.product-card .cat-tag{ font-size:.72rem; color: var(--pink); font-weight:700; letter-spacing:.3px; }
.product-card .p-title{ font-size:.95rem; font-weight:700; color: var(--dark); margin-block: .3rem .5rem; display:block; }
.product-card .p-title:hover{ color: var(--pink); }
.product-card .rating{ color: var(--gold); font-size: .78rem; margin-bottom: .5rem; }
.product-card .rating span{ color: var(--muted); margin-inline-start:.3rem; }
.product-card .price-row{ display:flex; align-items:center; gap:.6rem; }
.product-card .price-new{ font-weight:800; color: var(--pink); font-size:1.05rem; }
.product-card .price-old{ text-decoration: line-through; color: var(--muted); font-size:.85rem; }
.product-card .add-cart-btn{
  position:absolute; inset-inline:0; bottom:-46px; background: var(--dark); color:#fff; border:none; padding:.7rem;
  font-size:.85rem; font-weight:700; transition: var(--transition); display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.product-card:hover .add-cart-btn{ bottom:0; }
.product-card .add-cart-btn:hover{ background: var(--pink); }
.product-thumb-wrap{ position:relative; overflow:hidden; }

/* Star colors */
.stars-static i{ color: var(--gold); }

/* ==========================================================================
   Tabs (best sellers etc.)
   ========================================================================== */
.shop-tabs .nav-pills{ gap:.5rem; justify-content:center; }
.shop-tabs .nav-pills .nav-link{
  border-radius: 50px; padding:.5rem 1.4rem; font-weight:700; font-size:.88rem; color: var(--dark); background: var(--pink-50);
  border: 1px solid transparent;
}
.shop-tabs .nav-pills .nav-link.active{ background: var(--pink); color:#fff; }

/* ==========================================================================
   Promo banner (mid-page)
   ========================================================================== */
.promo-banner{
  background: linear-gradient(120deg, var(--dark) 0%, var(--pink-darker) 100%);
  border-radius: var(--radius-lg); overflow:hidden; position:relative;
}
.promo-banner .deco-ring{
  position:absolute; border-radius:50%; border: 40px solid rgba(255,255,255,.05);
  width: 320px; height: 320px; top:-90px; inset-inline-end:-90px;
}
.promo-banner .content{ position:relative; z-index:1; color:#fff; padding: 3.2rem 2.5rem; }
.promo-banner .content .eyebrow{ color: var(--gold-light); font-weight:700; letter-spacing:1px; font-size:.85rem; }
.promo-banner .content h3{ color:#fff; font-size: clamp(1.5rem,3vw,2.3rem); margin-block:.6rem 1rem; }
.promo-banner .content p{ color: rgba(255,255,255,.78); margin-bottom:1.6rem; max-width:460px; }
.promo-banner .ph-tile{ background: rgba(255,255,255,.06); }
.promo-banner .ph-tile i{ color:#fff; opacity:.35; }

/* ==========================================================================
   Blog cards
   ========================================================================== */
.blog-card{ border:1px solid var(--border-soft); border-radius: var(--radius-md); overflow:hidden; height:100%; background:#fff; transition: var(--transition); }
.blog-card:hover{ box-shadow: var(--shadow-soft); transform: translateY(-5px); }
.blog-card .ph-tile{ border-radius:0; aspect-ratio: 16/10; }
.blog-card .cat-pill{
  position:absolute; top:14px; inset-inline-start:14px; background: var(--pink); color:#fff; font-size:.7rem;
  padding:.3rem .7rem; border-radius:50px; z-index:1; font-weight:700;
}
.blog-card .card-body{ padding: 1.2rem; }
.blog-card .meta{ font-size:.75rem; color: var(--muted); display:flex; gap:.9rem; margin-bottom:.6rem; }
.blog-card .meta i{ color: var(--pink); margin-inline-end:.25rem; }
.blog-card h3{ font-size:1.02rem; margin-bottom:.5rem; }
.blog-card h3 a:hover{ color: var(--pink); }
.blog-card p{ font-size:.86rem; color: var(--muted); margin-bottom:.7rem; }
.read-more{ font-size:.83rem; font-weight:700; color: var(--pink); display:inline-flex; align-items:center; gap:.3rem; }
.read-more i{ transition: var(--transition); }
.read-more:hover i{ transform: translateX(-4px); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial-card{
  background: var(--pink-50); border-radius: var(--radius-md); padding: 2rem; height:100%; position:relative;
}
.testimonial-card i.bi-quote{ font-size:2.2rem; color: var(--pink-200); position:absolute; top:1.2rem; inset-inline-end:1.4rem; }
.testimonial-card p{ font-size:.92rem; color: var(--text); margin-bottom:1.3rem; }
.testimonial-card .avatar{
  width:46px; height:46px; border-radius:50%; background: var(--pink); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700;
}
.testimonial-card strong{ font-size:.9rem; display:block; }
.testimonial-card small{ color: var(--muted); font-size:.76rem; }

/* ==========================================================================
   Newsletter
   ========================================================================== */
.newsletter-band{ background: var(--pink-100); border-radius: var(--radius-lg); }
.newsletter-band .form-control{ border-radius:50px; border:1.5px solid var(--border-soft); padding:.8rem 1.3rem; }
.newsletter-band .btn{ white-space:nowrap; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--dark); color: rgba(255,255,255,.7); }
.site-footer h5{ color:#fff; font-size:1rem; margin-bottom:1.3rem; position:relative; padding-bottom:.7rem; }
.site-footer h5::after{ content:""; position:absolute; bottom:0; inset-inline-start:0; width:34px; height:3px; background: var(--pink); border-radius:3px; }
.site-footer p{ font-size:.86rem; line-height:2; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer ul li{ margin-bottom:.7rem; font-size:.86rem; }
.site-footer ul li a{ color: rgba(255,255,255,.68); }
.site-footer ul li a:hover{ color: var(--pink-light); padding-inline-start:3px; }
.site-footer ul li i{ color: var(--pink-light); margin-inline-end:.4rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; color:#fff;
}
.footer-social a:hover{ background: var(--pink); }
.footer-bottom{ background: var(--dark-2); font-size:.82rem; border-top: 1px solid rgba(255,255,255,.08); }
.footer-bottom a{ color: rgba(255,255,255,.8); }
.payment-icons i{ font-size:1.5rem; color: rgba(255,255,255,.55); margin-inline-start:.6rem; }

/* ==========================================================================
   Mobile menu (offcanvas)
   ========================================================================== */
.offcanvas{ max-width: 88vw; }
.mobile-menu{ width: 340px; }
.mobile-menu .offcanvas-header{
  background: linear-gradient(120deg, var(--pink) 0%, var(--pink-dark) 100%);
  padding: 1.1rem 1.3rem;
}
.mobile-menu .offcanvas-header img{ filter: brightness(0) invert(1); }
.mobile-menu .offcanvas-body{ padding: 0; display: flex; flex-direction: column; }

.mobile-search-wrap{ padding: 1.1rem 1.2rem .9rem; }
.mobile-search-wrap .header-search{ max-width: none; }

.mobile-quick-actions{ display:flex; border-bottom: 1px solid var(--border-soft); }
.mobile-quick-actions a{
  flex:1; text-align:center; padding: .85rem .4rem; font-size: .74rem; font-weight:600; color: var(--dark);
  border-inline-end: 1px solid var(--border-soft); position: relative;
}
.mobile-quick-actions a:last-child{ border-inline-end: none; }
.mobile-quick-actions a i{ display:block; font-size: 1.25rem; margin-bottom: .3rem; color: var(--pink); }
.mobile-quick-actions a .badge-count{ top: 2px; inset-inline-end: 24%; left: auto; }

.mobile-nav{ padding-block: .3rem; }
.mobile-nav .nav-link{
  display:flex; align-items:center; gap: .8rem; padding: .85rem 1.3rem; font-weight: 700; font-size: .92rem;
  color: var(--dark); border-bottom: 1px solid var(--border-soft);
}
.mobile-nav .nav-link i:first-child{ font-size: 1.05rem; color: var(--pink); width: 20px; text-align:center; flex:none; }
.mobile-nav .nav-link .bi-chevron-down{ margin-inline-start: auto; font-size: .8rem; color: var(--muted); transition: var(--transition); }
.mobile-nav .nav-link[aria-expanded="true"] .bi-chevron-down{ transform: rotate(180deg); color: var(--pink); }
.mobile-nav .nav-link:hover, .mobile-nav .nav-link.active{ background: var(--pink-50); color: var(--pink); }
.mobile-submenu{ background: var(--pink-50); border-bottom: 1px solid var(--border-soft); }
.mobile-submenu a{ display:block; padding: .68rem 1.3rem .68rem 3.3rem; font-size: .85rem; color: var(--text); }
.mobile-submenu a:not(:last-child){ border-bottom: 1px dashed var(--border-soft); }
.mobile-submenu a:hover{ color: var(--pink); }
.mobile-submenu a.view-all{ color: var(--pink); font-weight:700; }

.mobile-menu-footer{ margin-top: auto; padding: 1.2rem 1.3rem; border-top: 1px solid var(--border-soft); background: var(--pink-50); }
.mobile-menu-footer .call-btn{
  display:flex; align-items:center; justify-content:center; gap: .5rem; background: var(--pink); color:#fff;
  border-radius: 50px; padding: .75rem; font-weight: 700; font-size: .85rem;
}
.mobile-menu-footer .call-btn:hover{ background: var(--pink-dark); color:#fff; }
.mobile-menu-footer .social-row{ display:flex; justify-content:center; gap: .6rem; margin-top: 1rem; }
.mobile-menu-footer .social-row a{
  width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; color: var(--pink);
}
.mobile-menu-footer .social-row a:hover{ background: var(--pink); color:#fff; border-color: var(--pink); }

/* Floating buttons */
.floating-btns{ position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 1040; display:flex; flex-direction:column; gap:.7rem; }
.floating-btns .fb{
  width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  box-shadow: var(--shadow-soft); color:#fff;
}
.fb-whatsapp{ background:#25D366; }
.fb-top{ background: var(--pink); opacity:0; visibility:hidden; transform: translateY(10px); transition: var(--transition); }
.fb-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ==========================================================================
   Shop page (category listing)
   ========================================================================== */
.shop-sidebar .widget{ border:1px solid var(--border-soft); border-radius: var(--radius-md); padding:1.4rem; margin-bottom:1.4rem; }
.shop-sidebar .widget-title{ font-size:1rem; margin-bottom:1.1rem; padding-bottom:.7rem; border-bottom:1px dashed var(--border-soft); }
.shop-sidebar .form-check{ margin-bottom:.65rem; }
.shop-sidebar .form-check-label{ font-size:.87rem; color: var(--text); display:flex; justify-content:space-between; width:100%; }
.shop-sidebar .form-check-label span.count{ color: var(--muted); font-size:.78rem; }
.shop-sidebar .form-check-input:checked{ background-color: var(--pink); border-color: var(--pink); }
.color-swatches{ display:flex; flex-wrap:wrap; gap:.55rem; }
.color-swatches .swatch{ width:26px; height:26px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--border-soft); cursor:pointer; }
.color-swatches .swatch.active{ box-shadow:0 0 0 2px var(--pink); }
.range-price input[type="range"]{ accent-color: var(--pink); width:100%; }
.toolbar-shop{ border:1px solid var(--border-soft); border-radius: var(--radius-sm); padding:.8rem 1.1rem; }
.view-toggle .btn{ border-radius: var(--radius-sm); padding:.4rem .6rem; }
.sort-select{ border-radius: 50px; border:1.5px solid var(--border-soft); padding:.5rem 1rem; font-size:.85rem; }

.pagination .page-link{ border:none; color: var(--dark); border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; margin-inline:3px; font-weight:600; }
.pagination .page-item.active .page-link{ background: var(--pink); color:#fff; }
.pagination .page-link:hover{ background: var(--pink-100); color: var(--pink); }

/* ==========================================================================
   Single product page
   ========================================================================== */
.gallery-main{
  border:1px solid var(--border-soft); border-radius: var(--radius-md); overflow:hidden; position:relative; cursor: zoom-in;
  aspect-ratio: 1/1;
}
.gallery-main .ph-tile{ border-radius:0; transition: transform .35s ease; }
.gallery-main:hover .ph-tile{ transform: scale(1.15); }
.gallery-main .zoom-hint{
  position:absolute; bottom:14px; inset-inline-end:14px; z-index:3; background: rgba(255,255,255,.92); color: var(--pink);
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  box-shadow: var(--shadow-card); transition: var(--transition); pointer-events:none;
}
.gallery-main:hover .zoom-hint{ background: var(--pink); color:#fff; transform: scale(1.08); }
/* Lightbox modal for full product image zoom */
.zoom-modal .modal-content{ background: transparent; border:none; }
.zoom-modal .modal-body{ padding:0; }
.zoom-modal .zoom-stage{
  position:relative; width:100%; aspect-ratio: 1/1; max-height:82vh; border-radius: var(--radius-md); overflow:hidden;
  background: linear-gradient(150deg, var(--pink-100) 0%, var(--pink-50) 55%, #fff 100%);
}
.zoom-modal .zoom-stage i{ font-size:9rem; color: var(--pink); opacity:.5; }
.zoom-modal .btn-close{ position:absolute; top:-46px; inset-inline-end:0; background-color:#fff; border-radius:50%; opacity:1; padding:.6rem; z-index:5; }
.gallery-thumbs{ display:flex; gap:.7rem; margin-top:.9rem; }
.gallery-thumbs .thumb{
  width:78px; height:78px; border-radius: var(--radius-sm); border:2px solid var(--border-soft); cursor:pointer; overflow:hidden;
}
.gallery-thumbs .thumb.active{ border-color: var(--pink); }
.gallery-thumbs .thumb .ph-tile{ border-radius:0; }
.gallery-thumbs .thumb .ph-tile i{ font-size:1.4rem; }

.product-info .p-title{ font-size:1.5rem; font-weight:800; margin-bottom:.6rem; }
.product-info .rating-row{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; font-size:.85rem; color: var(--muted); }
.product-info .price-box{ display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.product-info .price-new{ font-size:1.7rem; font-weight:800; color: var(--pink); }
.product-info .price-old{ font-size:1.05rem; text-decoration: line-through; color: var(--muted); }
.product-info .discount-tag{ background: var(--pink-100); color: var(--pink); font-weight:700; font-size:.78rem; padding:.3rem .7rem; border-radius:50px; }
.product-info .desc-short{ color: var(--text); font-size:.92rem; margin-bottom:1.3rem; }
.shade-options{ display:flex; gap:.6rem; margin-bottom:1.3rem; }
.shade-options .shade{ width:32px; height:32px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--border-soft); cursor:pointer; }
.shade-options .shade.active{ box-shadow:0 0 0 2px var(--pink); }
.qty-stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--border-soft); border-radius:50px; overflow:hidden; }
.qty-stepper button{ width:40px; height:44px; border:none; background:#fff; font-size:1.1rem; }
.qty-stepper button:hover{ background: var(--pink-50); color: var(--pink); }
.qty-stepper input{ width:44px; text-align:center; border:none; font-weight:700; }
.qty-stepper input:focus{ outline:none; }
.product-info .meta-list{ font-size:.85rem; color: var(--muted); margin-top:1.4rem; }
.product-info .meta-list li{ margin-bottom:.5rem; }
.product-info .meta-list strong{ color: var(--dark); }
.product-info .share-links a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border-soft); display:inline-flex; align-items:center; justify-content:center; margin-inline-end:.4rem;
}
.product-info .share-links a:hover{ background: var(--pink); color:#fff; border-color: var(--pink); }

.product-tabs .nav-tabs{ border-bottom:1px solid var(--border-soft); gap:.5rem; }
.product-tabs .nav-tabs .nav-link{
  border:none; font-weight:700; color: var(--muted); padding:.9rem 1.5rem; border-bottom:3px solid transparent;
}
.product-tabs .nav-tabs .nav-link.active{ color: var(--pink); border-bottom-color: var(--pink); background:transparent; }
.product-tabs .tab-content{ padding-top:2rem; font-size:.93rem; }
.spec-table th{ width:220px; background: var(--pink-50); font-weight:700; color: var(--dark); }
.spec-table td, .spec-table th{ padding:.8rem 1rem; font-size:.88rem; }

.review-item{ border-bottom:1px solid var(--border-soft); padding-block:1.4rem; }
.review-item:first-child{ padding-top:0; }
.review-item .avatar{
  width:44px; height:44px; border-radius:50%; background: var(--pink-100); color: var(--pink); display:flex; align-items:center; justify-content:center; font-weight:700;
}
.review-item strong{ font-size:.92rem; }
.review-item .rating{ color: var(--gold); font-size:.78rem; }
.review-item small{ color: var(--muted); font-size:.76rem; }
.review-item p{ font-size:.89rem; margin-top:.5rem; }

/* ==========================================================================
   Cart & Checkout
   ========================================================================== */
.table-cart{ border-collapse: separate; border-spacing: 0 12px; }
.table-cart thead th{ border:none; color: var(--muted); font-size:.82rem; font-weight:700; padding-bottom:.6rem; }
.table-cart tbody tr{ background: var(--pink-50); }
.table-cart tbody td{ border:none; padding: 1rem; vertical-align:middle; }
.table-cart tbody tr td:first-child{ border-radius: 12px 0 0 12px; }
.table-cart tbody tr td:last-child{ border-radius: 0 12px 12px 0; }
.cart-thumb{ width:70px; height:70px; border-radius: var(--radius-sm); overflow:hidden; }
.cart-thumb .ph-tile{ border-radius: var(--radius-sm); }
.cart-thumb .ph-tile i{ font-size:1.5rem; }
.remove-item{ width:32px; height:32px; border-radius:50%; border:1px solid var(--border-soft); display:inline-flex; align-items:center; justify-content:center; color: var(--muted); }
.remove-item:hover{ background:#fdeaea; color:#d63636; border-color:#f6c9c9; }

.summary-card{ border:1px solid var(--border-soft); border-radius: var(--radius-md); padding:1.6rem; }
.summary-card .row-line{ display:flex; justify-content:space-between; font-size:.92rem; padding-block:.6rem; border-bottom:1px dashed var(--border-soft); }
.summary-card .row-line.total{ border-bottom:none; font-size:1.1rem; font-weight:800; color: var(--pink); padding-top:1rem; }
.coupon-box{ display:flex; gap:.6rem; }
.coupon-box .form-control{ border-radius:50px; border:1.5px solid var(--border-soft); }

.checkout-form label{ font-size:.87rem; font-weight:600; margin-bottom:.4rem; }
.checkout-form .form-control, .checkout-form .form-select{
  border-radius: var(--radius-sm); border:1.5px solid var(--border-soft); padding:.7rem 1rem; font-size:.9rem;
}
.checkout-form .form-control:focus, .checkout-form .form-select:focus{ border-color: var(--pink); box-shadow: 0 0 0 3px rgba(var(--pink-rgb),.12); }
.pay-option{ border:1.5px solid var(--border-soft); border-radius: var(--radius-sm); padding:1rem 1.2rem; cursor:pointer; }
.pay-option.active, .pay-option:has(input:checked){ border-color: var(--pink); background: var(--pink-50); }
.mini-order-item{ display:flex; gap:.8rem; align-items:center; padding-block:.8rem; border-bottom:1px dashed var(--border-soft); }
.mini-order-item .ph-tile{ width:54px; height:54px; border-radius: var(--radius-sm); flex:none; }
.mini-order-item .ph-tile i{ font-size:1.3rem; }
.mini-order-item .name{ font-size:.85rem; font-weight:600; }
.mini-order-item .qty{ font-size:.76rem; color: var(--muted); }

/* ==========================================================================
   About page
   ========================================================================== */
.about-hero-img{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft); }
.about-hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.stat-box{ text-align:center; }
.stat-box strong{ display:block; font-size:2.1rem; font-weight:800; color: var(--pink); }
.stat-box span{ font-size:.85rem; color: var(--muted); }
.why-card{ display:flex; gap:1rem; padding:1.4rem; border:1px solid var(--border-soft); border-radius: var(--radius-md); height:100%; }
.why-card i{ font-size:1.7rem; color: var(--pink); flex:none; }
.why-card h4{ font-size:1rem; margin-bottom:.4rem; }
.why-card p{ font-size:.86rem; color: var(--muted); margin:0; }
.gallery-frame{ border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 4/3; }
.gallery-frame img{ width:100%; height:100%; object-fit:cover; transition: var(--transition); }
.gallery-frame:hover img{ transform: scale(1.1); }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-info-card{ border:1px solid var(--border-soft); border-radius: var(--radius-md); padding:1.6rem; text-align:center; height:100%; transition: var(--transition); }
.contact-info-card:hover{ box-shadow: var(--shadow-soft); transform: translateY(-4px); }
.contact-info-card i{ font-size:1.8rem; color: var(--pink); margin-bottom:.9rem; }
.contact-info-card h4{ font-size:.98rem; margin-bottom:.4rem; }
.contact-info-card p{ font-size:.85rem; color: var(--muted); margin:0; }
.map-wrap{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--border-soft); }
.map-wrap iframe{ width:100%; height:380px; border:0; display:block; filter: grayscale(.15); }
.contact-form .form-control, .contact-form .form-select{
  border-radius: var(--radius-sm); border:1.5px solid var(--border-soft); padding:.75rem 1rem;
}
.contact-form .form-control:focus{ border-color: var(--pink); box-shadow: 0 0 0 3px rgba(var(--pink-rgb),.12); }

/* ==========================================================================
   Blog listing / single
   ========================================================================== */
.blog-sidebar .widget{ border:1px solid var(--border-soft); border-radius: var(--radius-md); padding:1.4rem; margin-bottom:1.4rem; }
.blog-sidebar .widget-title{ font-size:1rem; margin-bottom:1.1rem; padding-bottom:.7rem; border-bottom:1px dashed var(--border-soft); }
.mini-post{ display:flex; gap:.8rem; align-items:center; margin-bottom:1rem; }
.mini-post .ph-tile{ width:60px; height:60px; border-radius: var(--radius-sm); flex:none; }
.mini-post .ph-tile i{ font-size:1.3rem; }
.mini-post .t{ font-size:.83rem; font-weight:600; line-height:1.6; }
.mini-post .t:hover{ color: var(--pink); }
.mini-post small{ color: var(--muted); font-size:.74rem; }
.tag-cloud a{ display:inline-block; background: var(--pink-50); border:1px solid var(--border-soft); border-radius:50px; padding:.35rem .9rem; font-size:.78rem; margin:0 .3rem .5rem 0; }
.tag-cloud a:hover{ background: var(--pink); color:#fff; border-color: var(--pink); }

.article-body{ font-size:1rem; line-height:2.1; }
.article-body h2, .article-body h3{ margin-top:2rem; margin-bottom:1rem; }
.article-body p{ margin-bottom:1.3rem; color: var(--text); }
.article-body blockquote{
  border-inline-start: 4px solid var(--pink); background: var(--pink-50); padding:1.3rem 1.6rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size:1rem; color: var(--dark); margin: 1.6rem 0;
}
.article-figure{ border-radius: var(--radius-md); overflow:hidden; margin: 1.6rem 0; }
.article-tags a{ display:inline-block; background: var(--pink-50); border-radius:50px; padding:.4rem 1rem; font-size:.8rem; margin:0 .3rem .4rem 0; }
.article-tags a:hover{ background: var(--pink); color:#fff; }
.author-box{ display:flex; gap:1.2rem; background: var(--pink-50); border-radius: var(--radius-md); padding:1.5rem; align-items:center; }
.author-box .avatar{ width:70px; height:70px; border-radius:50%; background: var(--pink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; flex:none; }
.comment-item{ display:flex; gap:1rem; margin-bottom:1.6rem; }
.comment-item .avatar{ width:48px; height:48px; border-radius:50%; background: var(--pink-100); color: var(--pink); display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; }
.comment-item .bubble{ background: var(--pink-50); border-radius: var(--radius-sm); padding:1rem 1.2rem; flex:1; }
.comment-item strong{ font-size:.9rem; }
.comment-item small{ color: var(--muted); font-size:.75rem; }
.comment-item p{ font-size:.87rem; margin:.4rem 0 0; }
.comment-item.reply{ margin-inline-start: 3.5rem; }

/* ==========================================================================
   Misc / utilities
   ========================================================================== */
.divider-dot{ width:5px; height:5px; border-radius:50%; background: var(--pink); display:inline-block; }
.no-scrollbar::-webkit-scrollbar{ display:none; }
.offcanvas-cart .cart-line{ display:flex; gap:.9rem; padding-block:1rem; border-bottom:1px solid var(--border-soft); }
.offcanvas-cart .ph-tile{ width:64px; height:64px; border-radius: var(--radius-sm); flex:none; }
.offcanvas-cart .ph-tile i{ font-size:1.4rem; }
.back-to-shop-link{ font-weight:700; color: var(--pink); display:inline-flex; align-items:center; gap:.4rem; }

/* ==========================================================================
   User account / dashboard
   ========================================================================== */
.account-wrap{ align-items:flex-start; }
.account-sidebar{
  border:1px solid var(--border-soft); border-radius: var(--radius-md); overflow:hidden; background:#fff;
}
.account-sidebar .user-box{
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); color:#fff; padding:1.8rem 1.4rem; text-align:center;
}
.account-sidebar .user-box .avatar{
  width:72px; height:72px; border-radius:50%; background: rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; font-size:1.7rem; font-weight:800; margin:0 auto .8rem;
}
.account-sidebar .user-box strong{ display:block; font-size:1rem; }
.account-sidebar .user-box small{ opacity:.85; font-size:.78rem; }
.account-nav{ padding: .8rem; }
.account-nav .nav-link{
  display:flex; align-items:center; gap:.7rem; color: var(--text); font-weight:600; font-size:.9rem;
  padding:.8rem 1rem; border-radius: var(--radius-sm); margin-bottom:.3rem;
}
.account-nav .nav-link i{ font-size:1.05rem; color: var(--pink); width:20px; text-align:center; }
.account-nav .nav-link:hover{ background: var(--pink-50); }
.account-nav .nav-link.active{ background: var(--pink); color:#fff; }
.account-nav .nav-link.active i{ color:#fff; }
.account-nav .nav-link.text-danger i{ color:#d63636; }

.stat-tile{
  border:1px solid var(--border-soft); border-radius: var(--radius-md); padding:1.4rem; display:flex; align-items:center; gap:1rem; height:100%;
  background:#fff; transition: var(--transition);
}
.stat-tile:hover{ box-shadow: var(--shadow-card); transform: translateY(-3px); }
.stat-tile .icon{
  width:52px; height:52px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex:none;
  background: var(--pink-100); color: var(--pink);
}
.stat-tile strong{ display:block; font-size:1.4rem; font-weight:800; color: var(--dark); }
.stat-tile span{ font-size:.8rem; color: var(--muted); }

.table-orders{ border-collapse: separate; border-spacing:0 10px; }
.table-orders thead th{ border:none; color: var(--muted); font-size:.8rem; font-weight:700; padding-bottom:.5rem; }
.table-orders tbody tr{ background: var(--pink-50); }
.table-orders tbody td{ border:none; padding:.9rem 1rem; vertical-align:middle; font-size:.86rem; }
.table-orders tbody tr td:first-child{ border-radius:12px 0 0 12px; }
.table-orders tbody tr td:last-child{ border-radius:0 12px 12px 0; }
.order-status{ font-size:.74rem; font-weight:700; padding:.35rem .8rem; border-radius:50px; display:inline-block; }
.order-status.delivered{ background:#e4f7ea; color:#1f9d55; }
.order-status.processing{ background:#fff4de; color:#c98a1b; }
.order-status.cancelled{ background:#fdeaea; color:#d63636; }
.order-status.shipping{ background: var(--pink-100); color: var(--pink); }

.address-card{ border:1px solid var(--border-soft); border-radius: var(--radius-md); padding:1.3rem; height:100%; position:relative; }
.address-card.default{ border-color: var(--pink); background: var(--pink-50); }
.address-card .tag{ position:absolute; top:1.1rem; inset-inline-end:1.1rem; background: var(--pink); color:#fff; font-size:.68rem; padding:.25rem .6rem; border-radius:50px; }
.add-address-card{
  border:2px dashed var(--border-soft); border-radius: var(--radius-md); display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; min-height:150px; color: var(--pink); font-weight:700; gap:.5rem; cursor:pointer;
}
.add-address-card:hover{ border-color: var(--pink); background: var(--pink-50); }

@media (max-width: 991.98px){
  .hero-slide{ min-height: 420px; }
  .section-pad{ padding-block: 3rem; }
  .site-header .header-search{ display:none !important; }
}
@media (max-width: 575.98px){
  .hero-slide{ min-height: 380px; }
  .promo-banner .content{ padding: 2.2rem 1.4rem; }
}