/* BookHaven Pro UI polish layer
   Shared visual system for static pages and a clean handoff to ASP.NET Core MVC partials. */
html, body { max-width: 100%; overflow-x: hidden; }
body {
  background: var(--bh-page, #f5f8fb) !important;
  color: var(--bh-ink, #142b3d) !important;
  font-family: 'Inter', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; }
.container-custom { width: min(100% - 2rem, 1320px) !important; }

/* One calm, premium header language across every page. */
.header-top-bar, .announcement-bar {
  min-height: 38px;
  padding: .55rem 0 !important;
  background: var(--bh-primary-strong, #0e5c55) !important;
  color: rgba(255,255,255,.78) !important;
  border: 0 !important;
  font-size: .75rem;
}
.header-top-bar a, .announcement-bar a { color: #fff !important; }
.main-navbar, .main-header {
  top: 0;
  z-index: 1020;
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid var(--bh-line, #e2e9ef) !important;
  box-shadow: 0 5px 24px rgba(20,43,61,.07) !important;
  backdrop-filter: blur(18px);
}
.main-navbar .container, .main-header .container { padding-top: .9rem !important; padding-bottom: .9rem !important; }
.main-navbar + .bg-dark, .nav-secondary {
  background: linear-gradient(100deg, var(--bh-primary-strong, #103e3a), var(--bh-primary, #0b7468) 58%, #1a4d5f) !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(10,73,69,.16) !important;
}
.main-navbar + .bg-dark a, .nav-secondary .nav-link {
  color: rgba(255,255,255,.82) !important;
  border-radius: 10px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.main-navbar + .bg-dark a:hover, .nav-secondary .nav-link:hover, .nav-secondary .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.14) !important;
}
.main-navbar + .bg-dark .container > div:first-child { min-width: 0; }
.brand-mark {
  display: block;
  width: clamp(132px, 14vw, 188px);
  height: 52px;
  object-fit: contain;
  object-position: left center;
  border-radius: 10px;
}
.main-navbar img[alt="CoreSmart"], .main-header img[alt="CoreSmart"] { width: clamp(132px, 14vw, 188px) !important; height: 52px !important; object-fit: contain; object-position: left center; }
.brand-title, .brand-logo-title { color: var(--bh-primary, #0b7468) !important; }
.search-wrapper {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: .32rem .4rem .32rem .9rem !important;
  background: var(--bh-surface-soft, #f0f6f7) !important;
  border: 1px solid var(--bh-line, #dce8eb) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.search-wrapper:focus-within { background: #fff !important; border-color: rgba(11,116,104,.5) !important; box-shadow: 0 0 0 4px rgba(11,116,104,.10) !important; }
.search-input { min-width: 0 !important; color: var(--bh-ink, #142b3d) !important; }
.btn-search { background: var(--bh-primary, #0b7468) !important; border: 0 !important; border-radius: 50% !important; box-shadow: 0 8px 18px rgba(11,116,104,.24); }
.action-btn { position: relative; color: var(--bh-ink, #142b3d) !important; border-radius: 13px !important; }
.action-btn:hover { color: var(--bh-primary, #0b7468) !important; background: var(--bh-primary-soft, #e8f7f3) !important; }
.badge-count { background: var(--bh-accent, #e2a632) !important; }

/* Sections breathe, cards line up, and controls remain usable on narrow screens. */
section.container-custom, .hero-section { position: relative; }
.hero-section { padding-top: 1.25rem !important; }
.hero-carousel-curved, .hero-slide-curved { border-radius: 28px !important; }
.hero-carousel-curved { box-shadow: 0 22px 55px rgba(20,43,61,.13) !important; }
.product-card, .beauty-product-card, .blog-card, .mini-product-card {
  min-width: 0;
  height: 100%;
  border-color: var(--bh-line, #e2e9ef) !important;
  box-shadow: 0 9px 28px rgba(20,43,61,.065) !important;
}
.product-card { display: flex; flex-direction: column; }
.product-card > .mt-3 { min-width: 0; padding: 0 1rem 1rem; }
.product-img-wrapper { min-height: 0 !important; aspect-ratio: 4 / 5; background: var(--bh-surface-soft, #edf4f3) !important; }
.product-img-wrapper img { width: 100%; height: 100% !important; object-fit: cover; }
.product-tag-sales, .product-badge { z-index: 3; top: 1rem !important; left: 1rem !important; border-radius: 10px !important; padding: .55rem .8rem !important; }
.product-card .product-title { min-height: 2.7em; }
.product-card .d-flex.align-items-center.gap-2 { min-width: 0; }
.product-card .btn-wishlist-toggle { flex: 0 0 48px; width: 48px; height: 48px; padding: 0 !important; }
.btn-add-cart, .btn-add-cart-sellzy, .btn-add-cart-main, .btn-bh-primary, .btn-mini-add {
  min-height: 46px;
  white-space: normal;
  line-height: 1.15;
  border-radius: 999px !important;
}
.btn-add-cart-sellzy, .btn-add-cart-main { padding: .72rem 1rem !important; }
.btn-wishlist-toggle:hover { color: #d85664 !important; border-color: #d85664 !important; background: #fff5f6 !important; }
.form-select, .form-control { max-width: 100%; }
.blog-card { overflow: hidden; }
.blog-card .p-3 { min-width: 0; }
.blog-img { width: 100%; height: 210px !important; object-fit: cover; }
.blog-card .d-flex.gap-3 { flex-wrap: wrap; gap: .5rem 1rem !important; }
.bh-blog-col { min-width: 0; }

/* Beauty page uses the same shell, with a quieter editorial product language. */
.page-beauty-category .hero-main-card { box-shadow: 0 24px 60px rgba(20,43,61,.10); }
.page-beauty-category .beauty-product-card { border-radius: 22px !important; padding: 1rem !important; }
.page-beauty-category .product-img-wrap { height: 220px !important; border-radius: 16px !important; }
.page-beauty-category .curved-box-yellow, .page-beauty-category .curved-box-blue { border-radius: 28px !important; box-shadow: 0 16px 45px rgba(20,43,61,.08); }
.page-beauty-category .section-header-title { letter-spacing: -.04em; }

/* Footer is a true full-width surface and never creates a second horizontal page. */
.footer { width: 100%; max-width: 100%; overflow: hidden; margin-top: 5rem !important; }
.footer .container, .footer .row, .footer [class*="col-"] { min-width: 0; max-width: 100%; }
.footer form { min-width: 0; }
.footer form .form-control { min-width: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer a { overflow-wrap: anywhere; }
.footer .border-top { margin-top: 1rem; }

/* Fixed controls stay inside the viewport and respect mobile safe areas. */
.back-to-top-btn {
  right: max(16px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  width: 48px !important;
  height: 48px !important;
  z-index: 1065 !important;
  background: var(--bh-primary, #0b7468) !important;
  border: 3px solid rgba(255,255,255,.9) !important;
}
.theme-customizer-trigger { right: max(16px, env(safe-area-inset-right)) !important; bottom: 78px !important; z-index: 1060 !important; }
.mobile-cart-bar {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 64px;
  padding: .7rem max(1rem, env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)) !important;
  background: color-mix(in srgb, var(--bh-primary-strong, #0e5c55) 97%, transparent) !important;
  box-shadow: 0 -10px 30px rgba(20,43,61,.16);
  overflow: hidden;
}
.mobile-cart-bar[hidden] { display: none !important; }
.mobile-cart-bar > * { min-width: 0; }
.mobile-cart-bar .btn { flex: 0 0 auto; white-space: nowrap; }

/* Modern sign-in/register experience. */
.auth-page-wrap { padding: clamp(2rem, 6vw, 5rem) 0; }
.auth-shell {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(420px, 1.1fr);
  max-width: 1040px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 30px;
  background: #fff;
  border: 1px solid #e1ebee;
  box-shadow: 0 28px 80px rgba(20,43,61,.14);
}
.auth-visual {
  position: relative;
  isolation: isolate;
  padding: clamp(2rem, 5vw, 4rem);
  color: #fff;
  background: linear-gradient(145deg, #0b7468, #123e4b);
  overflow: hidden;
}
.auth-visual::before, .auth-visual::after { content: ''; position: absolute; border-radius: 50%; z-index: -1; background: rgba(255,255,255,.10); }
.auth-visual::before { width: 310px; height: 310px; top: -135px; right: -110px; }
.auth-visual::after { width: 220px; height: 220px; bottom: -100px; left: -90px; }
.auth-visual h1, .auth-visual h2, .auth-visual p { color: #fff; }
.auth-visual h1 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.06em; line-height: 1.02; }
.auth-kicker { display: inline-flex; gap: .5rem; align-items: center; padding: .45rem .8rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.10); font-weight: 700; font-size: .78rem; }
.auth-benefits { display: grid; gap: .75rem; margin-top: 2rem; }
.auth-benefits div { display: flex; gap: .7rem; align-items: center; color: rgba(255,255,255,.86); font-size: .88rem; }
.auth-benefits i { color: #f2c15a; }
.auth-form-panel { padding: clamp(1.5rem, 5vw, 4rem); }
.auth-tabs { display: flex; gap: .35rem; padding: .3rem; margin-bottom: 2rem; background: #edf6f5; border-radius: 999px; }
.auth-tab { flex: 1; border: 0; border-radius: 999px; padding: .75rem 1rem; color: #6d7c8a; background: transparent; font-weight: 800; cursor: pointer; transition: .25s ease; }
.auth-tab.active { color: #fff; background: #0b7468; box-shadow: 0 8px 18px rgba(11,116,104,.22); }
.auth-form { animation: authIn .4s ease both; }
.auth-form .form-label { color: #142b3d; font-size: .82rem; font-weight: 800; }
.auth-form .form-control { min-height: 50px; padding: .8rem 1rem; border-radius: 13px; }
.auth-input-wrap { position: relative; }
.auth-input-wrap .form-control { padding-right: 3rem; }
.auth-input-wrap button { position: absolute; top: 50%; right: .65rem; transform: translateY(-50%); border: 0; background: transparent; color: #8a98a8; }
.auth-submit { min-height: 52px; width: 100%; border: 0; border-radius: 14px; color: #fff; background: #0b7468; font-weight: 800; box-shadow: 0 12px 25px rgba(11,116,104,.22); transition: transform .2s ease, box-shadow .2s ease; }
.auth-submit:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 30px rgba(11,116,104,.28); }
.auth-divider { display: flex; align-items: center; gap: .8rem; margin: 1.5rem 0; color: #8a98a8; font-size: .75rem; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: #e2e9ef; }
.auth-socials { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.auth-social { min-height: 44px; border: 1px solid #e2e9ef; border-radius: 12px; background: #fff; color: #142b3d; font-weight: 700; }
.auth-social:hover { border-color: #0b7468; background: #e8f7f3; }
@keyframes authIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 991.98px) {
  .container-custom { width: min(100% - 1.5rem, 1320px) !important; }
  .hero-slide-curved { min-height: 440px; }
  .auth-shell { grid-template-columns: 1fr; max-width: 680px; }
  .auth-visual { min-height: 300px; }
}
@media (max-width: 767.98px) {
  body { font-size: .93rem; }
  .container-custom { width: min(100% - 1.25rem, 1320px) !important; }
  .header-top-bar .container, .announcement-bar .container { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .header-top-bar .container::-webkit-scrollbar, .announcement-bar .container::-webkit-scrollbar { display: none; }
  .main-navbar .container > .row, .main-header .container > .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; }
  .main-navbar .row > .col-12, .main-header .row > .col-12 { grid-column: 1 / -1; width: 100%; }
  .main-navbar .row > .col-6, .main-header .row > .col-6 { width: auto; min-width: 0; }
  .main-navbar .row { margin-left: 0; margin-right: 0; }
  .main-navbar + .bg-dark .container > div:first-child, .nav-secondary .navbar-nav { overflow-x: auto; white-space: nowrap; flex-wrap: nowrap !important; scrollbar-width: none; }
  .main-navbar + .bg-dark .container > div:first-child::-webkit-scrollbar, .nav-secondary .navbar-nav::-webkit-scrollbar { display: none; }
  .main-navbar + .bg-dark a, .nav-secondary .nav-link { flex: 0 0 auto; }
  .product-card > .mt-3 { padding: 0 .75rem .8rem; }
  .product-card .product-title { font-size: .88rem !important; }
  .product-card .btn-wishlist-toggle { flex-basis: 42px; width: 42px; height: 42px; }
  .product-card .btn-add-cart-sellzy { min-height: 42px; padding: .55rem .55rem !important; font-size: .75rem !important; }
  .blog-img { height: 220px !important; }
  .bh-blog-col { width: 100% !important; flex: 0 0 100% !important; }
  .auth-page-wrap { padding: 1rem 0 2.5rem; }
  .auth-visual { padding: 2rem 1.5rem; min-height: 0; }
  .auth-visual h1 { font-size: 2.2rem; }
  .auth-form-panel { padding: 1.35rem; }
}
@media (max-width: 575.98px) {
  .main-navbar .container, .main-header .container { padding-top: .7rem !important; padding-bottom: .7rem !important; }
  .brand-mark, .main-navbar img[alt="CoreSmart"], .main-header img[alt="CoreSmart"] { width: 132px !important; height: 44px !important; }
  .action-btn { padding: .42rem .5rem !important; }
  .search-wrapper { min-height: 44px; }
  .hero-slide-curved { min-height: 480px; }
  .product-img-wrapper { aspect-ratio: 1 / 1.18; }
  .blog-img { height: 205px !important; }
  .auth-socials { grid-template-columns: 1fr; }
  .timer-pill-badge { font-size: .72rem; padding: .5rem .65rem; white-space: nowrap; }
}
@media (max-width: 430px) {
  .main-navbar .header-actions .action-btn, .main-header .header-actions .action-btn { padding-left: .38rem !important; padding-right: .38rem !important; }
  .main-navbar .search-input, .main-header .search-input { font-size: 14px !important; }
  .main-navbar + .bg-dark .container, .nav-secondary .container { padding-left: .65rem !important; padding-right: .65rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Homepage refinement pass: compact navigation, calmer section rhythm and
   product actions that stay close to the product image. */
.header-top-bar,
.announcement-bar {
  min-height: 34px !important;
  padding: .38rem 0 !important;
  font-size: .72rem !important;
}

.main-navbar,
.main-header {
  padding: 0 !important;
}

.main-navbar .container,
.main-header .container {
  padding-top: .48rem !important;
  padding-bottom: .48rem !important;
}

.main-navbar .row,
.main-header .row { --bs-gutter-y: .5rem; }

.main-navbar img[alt="CoreSmart"],
.main-header img[alt="CoreSmart"],
.brand-mark {
  width: clamp(124px, 13vw, 176px) !important;
  height: 42px !important;
}

.main-navbar .search-wrapper,
.main-header .search-wrapper {
  min-height: 42px !important;
  padding-top: .2rem !important;
  padding-bottom: .2rem !important;
}

.main-navbar .btn-search,
.main-header .btn-search {
  width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
}

.main-navbar .action-btn,
.main-header .action-btn { padding: .42rem .55rem !important; }

.main-navbar + .bg-dark,
.nav-secondary { padding-top: .12rem !important; padding-bottom: .12rem !important; }

.main-navbar + .bg-dark a,
.nav-secondary .nav-link {
  padding: .48rem .65rem !important;
  font-size: .84rem;
}

.featured-collections-section,
.best-deal-section,
.popular-products-section,
.premium-picks-section,
.top-selling-section {
  overflow: hidden;
}

.featured-collections-section {
  padding: 1.65rem clamp(1rem, 3vw, 2.4rem) !important;
  border: 1px solid rgba(11,116,104,.12);
  border-radius: 30px;
  background: linear-gradient(135deg, #ffffff 0%, #eff9f6 100%);
  box-shadow: 0 16px 38px rgba(20,43,61,.07);
}

.featured-collections-section > .container > .d-flex {
  justify-content: center !important;
  text-align: center;
}

.featured-collections-section h5 {
  font-size: clamp(1.12rem, 2vw, 1.35rem);
}

.featured-collections-section > .container > .d-flex > div {
  justify-content: center;
  align-items: center;
  gap: .6rem 1.4rem !important;
}

.featured-collections-section > .container > .d-flex > div a {
  padding: .32rem .6rem;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.featured-collections-section > .container > .d-flex > div a:hover {
  background: #dff3ee;
  color: var(--bh-primary-strong) !important;
  transform: translateY(-1px);
}

.best-deal-section {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2.2rem) !important;
  border: 1px solid rgba(11,116,104,.14);
  border-radius: 34px;
  background: linear-gradient(135deg, #eaf8f5 0%, #f8fbfc 58%, #fff8e9 100%);
  box-shadow: 0 20px 52px rgba(20,43,61,.09);
}

.best-deal-section::before,
.popular-products-section::before,
.top-selling-section::before {
  content: '';
  position: absolute;
  width: 210px;
  height: 210px;
  right: -96px;
  top: -102px;
  border-radius: 50%;
  background: rgba(11,116,104,.08);
  pointer-events: none;
}

.best-deal-section > * { position: relative; z-index: 1; }
.best-deal-section > .d-flex { border-bottom-color: rgba(20,43,61,.12) !important; }
.best-deal-section .swiper-slide { height: auto !important; }
.best-deal-section .product-card,
.popular-products-section .product-card { height: auto !important; min-height: 0 !important; }

.best-deal-section .product-card > .mt-3,
.popular-products-section .product-card > .mt-3 {
  flex-grow: 0 !important;
  padding-bottom: 1rem !important;
}

.best-deal-section .product-img-wrapper {
  height: 190px !important;
  aspect-ratio: auto !important;
}

.best-deal-section .product-img-wrapper img {
  height: 100% !important;
  object-fit: cover;
}

.best-deal-section .stock-progress { margin-top: .45rem !important; margin-bottom: .4rem !important; }

.popular-products-section,
.top-selling-section {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2.1rem) !important;
  border: 1px solid rgba(11,116,104,.12);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(20,43,61,.075);
}

.popular-products-section > *,
.top-selling-section > * { position: relative; z-index: 1; }

.popular-products-section > .d-flex {
  align-items: center !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 1rem !important;
  border-bottom-color: rgba(20,43,61,.12) !important;
}

.popular-products-section > .d-flex > div {
  display: inline-flex !important;
  align-items: center;
  gap: .25rem !important;
  padding: .3rem;
  border: 1px solid #dcebe8;
  border-radius: 999px;
  background: #eff8f6;
}

.popular-products-section > .d-flex > div a {
  padding: .45rem .78rem;
  border: 0 !important;
  border-radius: 999px;
  color: #58717b !important;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.popular-products-section > .d-flex > div a:first-child,
.popular-products-section > .d-flex > div a:hover {
  color: #fff !important;
  background: var(--bh-primary) !important;
  box-shadow: 0 5px 14px rgba(11,116,104,.2);
}

.popular-products-section .product-img-wrapper { height: 190px !important; aspect-ratio: auto !important; }
.popular-products-section .product-img-wrapper img { height: 100% !important; object-fit: cover; }

.premium-picks-section .section-header-controls {
  padding: 1rem 1.15rem;
  border: 1px solid #dcebe8;
  border-radius: 20px;
  background: linear-gradient(135deg, #f5fbfa, #fff);
}

.premium-picks-section .swiper-slide > .bg-white {
  border: 1px solid #dcebe8 !important;
  box-shadow: 0 12px 28px rgba(20,43,61,.07) !important;
}

.top-selling-section { background: linear-gradient(135deg, #ffffff 0%, #f1f8f7 100%); }
.top-selling-section > .mb-4 { border-bottom-color: rgba(20,43,61,.12) !important; }

.top-selling-section .col-lg-4 > .p-4 {
  border: 1px solid rgba(11,116,104,.10);
  border-radius: 26px !important;
  background: linear-gradient(145deg, #fff1a6 0%, #ffe775 100%) !important;
  box-shadow: 0 18px 38px rgba(164,126,15,.13) !important;
}

.top-selling-section .col-lg-4 img {
  height: 188px;
  width: 100%;
  object-fit: cover;
}

.top-selling-section .mini-product-card {
  min-height: 120px;
  padding: .9rem !important;
  border: 1px solid #dcebe8 !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 10px 24px rgba(20,43,61,.055) !important;
}

.top-selling-section .mini-product-card:hover {
  transform: translateY(-2px);
  border-color: rgba(11,116,104,.35) !important;
}

.top-selling-section .mini-product-img {
  width: 70px;
  height: 70px;
  border: 1px solid #e2eceb;
}

/* Image action rail generated by site-polish.js. It uses the existing
   delegated cart, wishlist and quick-view handlers, so all interactions stay live. */
.product-img-wrapper { position: relative !important; }
.product-overlay-actions {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  opacity: 0;
  transform: translateX(7px);
  transition: opacity .22s ease, transform .22s ease;
}

.product-card:hover .product-overlay-actions,
.product-card:focus-within .product-overlay-actions { opacity: 1; transform: none; }

.product-overlay-actions .btn {
  width: 38px;
  height: 38px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.9) !important;
  border-radius: 50% !important;
  color: var(--bh-ink) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 7px 16px rgba(20,43,61,.16);
  backdrop-filter: blur(8px);
}

.product-overlay-actions .btn:hover { color: var(--bh-primary) !important; transform: translateY(-1px); }
.product-overlay-actions .btn-icon-add { color: #fff !important; background: var(--bh-primary) !important; border-color: var(--bh-primary) !important; }
.product-overlay-actions .btn-icon-add:hover { color: #fff !important; background: var(--bh-primary-strong) !important; }
.product-overlay-actions .btn i { margin: 0 !important; }

.product-card .product-tag-sales,
.product-card .product-badge { z-index: 6; }

@media (hover: none) {
  .product-overlay-actions { opacity: 1; transform: none; }
}

@media (max-width: 767.98px) {
  .featured-collections-section,
  .best-deal-section,
  .popular-products-section,
  .premium-picks-section,
  .top-selling-section { border-radius: 24px; }
  .featured-collections-section > .container > .d-flex > div { gap: .35rem .55rem !important; }
  .featured-collections-section > .container > .d-flex > div a { font-size: .76rem; padding: .28rem .42rem; }
  .best-deal-section > .d-flex,
  .popular-products-section > .d-flex { align-items: flex-start !important; gap: .75rem; }
  .popular-products-section > .d-flex > div { overflow-x: auto; max-width: 100%; }
  .popular-products-section > .d-flex > div a { white-space: nowrap; padding: .4rem .62rem; font-size: .75rem; }
  .top-selling-section .col-lg-4 img { height: 160px; }
}

/* ==========================================================================
   VNEXT PREMIUM STOREFRONT SHELL
   Shared responsive shell, carved surfaces, cart drawer and customization UI.
   ========================================================================== */
:root {
  --premium-primary: #0b7468;
  --premium-accent: #d9a441;
  --premium-bg: #f4f7f7;
  --premium-surface: #ffffff;
  --premium-ink: #102a43;
  --premium-muted: #708090;
  --premium-line: rgba(16, 42, 67, .11);
  --premium-radius: 24px;
  --premium-shadow: 0 18px 55px rgba(16, 42, 67, .10);
}

body.premium-ready { background: var(--premium-bg) !important; color: var(--premium-ink); font-family: 'Inter', sans-serif; }
body.premium-ready::before { display: none; }
body.premium-ready main { position: relative; z-index: 1; }
body.premium-ready .premium-header a, body.premium-ready .premium-nav a, body.premium-ready .premium-footer a, body.premium-ready .premium-action, body.premium-ready .premium-brand { text-decoration: none; }
.premium-container { width: min(100% - 2rem, 1360px); margin-inline: auto; }
.premium-announcement { background: #103f3b; color: rgba(255,255,255,.78); font-size: .74rem; letter-spacing: .01em; }
.premium-announcement-inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.premium-announce-copy, .premium-utility-links { display: flex; align-items: center; gap: .7rem; }
.premium-announce-copy i { color: var(--premium-accent); }
.premium-announce-divider { opacity: .4; }
.premium-utility-links a { color: #fff; opacity: .78; }
.premium-utility-links a:hover { opacity: 1; color: #fff; }

.premium-header { position: sticky; top: 0; z-index: 1040; background: rgba(255,255,255,.90); border-bottom: 1px solid var(--premium-line); backdrop-filter: blur(20px); box-shadow: 0 12px 36px rgba(16,42,67,.07); }
.premium-header-grid { min-height: 86px; display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(300px, 2.2fr) minmax(240px, 1.2fr); align-items: center; gap: 1.5rem; }
.premium-brand { display: inline-flex; align-items: center; min-width: 0; }
.premium-brand-logo { display: block; width: clamp(140px, 15vw, 206px); height: 58px; object-fit: contain; object-position: left center; border-radius: 12px; mix-blend-mode: multiply; }
.premium-search-wrap { position: relative; display: flex; align-items: center; min-width: 0; min-height: 50px; padding: .3rem .35rem .3rem .9rem; background: #f1f6f6; border: 1px solid rgba(11,116,104,.13); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.95); }
.premium-search-wrap:focus-within { background: #fff; border-color: rgba(11,116,104,.50); box-shadow: 0 0 0 4px rgba(11,116,104,.10); }
.premium-search-icon { flex: 0 0 auto; color: var(--premium-primary); }
.premium-search-input { flex: 1 1 auto; min-width: 0; height: 40px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: .35rem .75rem; color: var(--premium-ink) !important; }
.premium-search-input::placeholder { color: #8a9aa6; }
.premium-search-select { flex: 0 0 auto; max-width: 78px; border: 0; border-left: 1px solid var(--premium-line); background: transparent; color: var(--premium-muted); font-size: .76rem; padding: .35rem .5rem; outline: 0; }
.premium-search-button { flex: 0 0 40px; width: 40px; height: 40px; border: 0 !important; color: #fff !important; background: var(--premium-primary) !important; border-radius: 50% !important; box-shadow: 0 8px 18px rgba(11,116,104,.25); }
.premium-header-actions { display: flex; justify-content: flex-end; align-items: center; gap: .55rem; }
.premium-action { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .23rem; min-width: 54px; padding: .45rem .4rem; border: 0; background: transparent; color: var(--premium-ink); border-radius: 14px; transition: .22s ease; }
.premium-action:hover { color: var(--premium-primary); background: rgba(11,116,104,.08); transform: translateY(-2px); }
.premium-action-icon { position: relative; font-size: 1.07rem; line-height: 1; }
.premium-action-label { font-size: .67rem; font-weight: 700; }
.premium-badge { position: absolute; top: -9px; right: -12px; min-width: 17px; height: 17px; padding: 0 .25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--premium-accent); color: #fff; border: 2px solid #fff; font-size: .62rem; line-height: 1; }
.premium-nav { position: sticky; top: 86px; z-index: 1030; background: linear-gradient(100deg, #103f3b, var(--premium-primary) 58%, #1a4d5f); color: #fff; box-shadow: 0 10px 24px rgba(10,73,69,.15); }
.premium-nav-inner { min-height: 50px; display: flex; align-items: center; gap: .8rem; }
.premium-nav-menu { display: inline-flex; align-items: center; gap: .55rem; min-height: 36px; padding: .45rem .85rem; border: 1px solid rgba(255,255,255,.20); border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: .78rem; font-weight: 800; }
.premium-nav-menu i:last-child { font-size: .66rem; opacity: .75; }
.premium-nav-links { display: flex; align-items: center; gap: .15rem; min-width: 0; }
.premium-nav-links a { display: inline-flex; align-items: center; min-height: 36px; padding: .45rem .72rem; border-radius: 10px; color: rgba(255,255,255,.78); font-size: .78rem; font-weight: 700; transition: .2s ease; white-space: nowrap; }
.premium-nav-links a:hover, .premium-nav-links a.is-active { color: #fff; background: rgba(255,255,255,.15); }
.premium-nav-service { display: flex; align-items: center; gap: .45rem; margin-left: auto; color: rgba(255,255,255,.72); font-size: .72rem; white-space: nowrap; }
.premium-nav-service i { color: var(--premium-accent); }

.premium-footer { position: relative; z-index: 1; margin-top: 5rem; padding: 4rem 0 1.25rem; background: #102f35; color: rgba(255,255,255,.72); overflow: hidden; }
.premium-footer::before { content: ''; position: absolute; width: 420px; height: 220px; right: -100px; top: -100px; border: 1px solid rgba(255,255,255,.10); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.03), 0 0 0 56px rgba(255,255,255,.025); pointer-events: none; }
.premium-footer-top { position: relative; display: grid; grid-template-columns: minmax(220px,1.35fr) repeat(2,minmax(130px,.75fr)) minmax(220px,1.25fr); gap: 2.2rem; padding-bottom: 3rem; }
.premium-footer-brand { max-width: 300px; }
.premium-footer-logo { width: 165px; height: 54px; object-fit: contain; object-position: left center; border-radius: 10px; mix-blend-mode: screen; filter: saturate(.85) brightness(1.08); }
.premium-footer p { margin: 1rem 0; color: rgba(255,255,255,.66); font-size: .78rem; line-height: 1.75; }
.premium-footer h6 { margin: .25rem 0 1rem; color: #fff; font-size: .76rem; text-transform: uppercase; letter-spacing: .11em; }
.premium-footer-top > div:not(.premium-footer-brand):not(.premium-footer-newsletter) a { display: block; width: fit-content; margin: .65rem 0; color: rgba(255,255,255,.68); font-size: .78rem; }
.premium-footer-top > div:not(.premium-footer-brand):not(.premium-footer-newsletter) a:hover { color: #fff; transform: translateX(3px); }
.premium-socials { display: flex; gap: .45rem; }
.premium-socials a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #fff; background: rgba(255,255,255,.10); border-radius: 50%; }
.premium-socials a:hover { background: var(--premium-primary); }
.premium-footer-newsletter p { max-width: 280px; }
.premium-newsletter-form > div { display: flex; max-width: 290px; padding: .3rem; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; }
.premium-newsletter-form input { min-width: 0; flex: 1; height: 36px; padding: .35rem .7rem; border: 0; outline: 0; color: #fff; background: transparent; font-size: .74rem; }
.premium-newsletter-form input::placeholder { color: rgba(255,255,255,.55); }
.premium-newsletter-form button { width: 36px; height: 36px; border: 0; border-radius: 50%; color: #fff; background: var(--premium-primary); }
.premium-footer-newsletter small { display: block; margin-top: .7rem; color: rgba(255,255,255,.46); font-size: .66rem; }
.premium-footer-newsletter small i { color: var(--premium-accent); margin-right: .3rem; }
.premium-footer-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.15rem; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.48); font-size: .68rem; }
.premium-payment-icons { display: inline-flex; align-items: center; gap: .55rem; }
.premium-payment-icons i { font-size: 1.1rem; color: rgba(255,255,255,.72); }

.premium-checkout-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.premium-checkout-heading h1 { margin: .35rem 0 .4rem; color: var(--premium-ink); font: 800 clamp(2rem,4vw,3.35rem)/1.05 'Plus Jakarta Sans', sans-serif; letter-spacing: -.06em; }
.premium-checkout-heading p { margin: 0; color: var(--premium-muted); }
.premium-checkout-back { display: inline-flex; align-items: center; gap: .4rem; color: var(--premium-primary); font-size: .78rem; font-weight: 800; text-decoration: none; }
.premium-checkout-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.75fr); align-items: start; gap: 1.4rem; }
.premium-checkout-form { display: grid; gap: 1rem; }
.premium-checkout-card, .premium-order-review { border: 1px solid var(--premium-line); border-radius: 26px 10px 26px 10px; background: var(--premium-surface); box-shadow: var(--premium-shadow); }
.premium-checkout-card { padding: clamp(1.1rem,3vw,1.65rem); }
.premium-checkout-card-head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.2rem; }
.premium-checkout-card-head > span { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 50%; color: #fff; background: var(--premium-primary); font-size: .7rem; font-weight: 800; }
.premium-checkout-card-head h2 { margin: 0 0 .2rem; color: var(--premium-ink); font: 800 1.02rem/1.2 'Plus Jakarta Sans',sans-serif; letter-spacing: -.035em; }
.premium-checkout-card-head p { margin: 0; color: var(--premium-muted); font-size: .72rem; }
.premium-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
.premium-form-grid label { display: flex; flex-direction: column; gap: .4rem; color: var(--premium-muted); font-size: .7rem; font-weight: 700; }
.premium-form-grid input, .premium-form-grid select { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--premium-line); border-radius: 13px 5px 13px 5px; outline: none; background: var(--premium-surface); color: var(--premium-ink); font: inherit; font-weight: 500; }
.premium-form-grid input:focus, .premium-form-grid select:focus { border-color: var(--premium-primary); box-shadow: 0 0 0 3px rgba(11,116,104,.10); }
.premium-span-2 { grid-column: span 2; }
.premium-payment-choice { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin-bottom: 1rem; }
.premium-payment-choice label { position: relative; cursor: pointer; }
.premium-payment-choice input { position: absolute; opacity: 0; }
.premium-payment-choice label > span { display: flex; flex-direction: column; gap: .25rem; min-height: 78px; padding: .85rem; border: 1px solid var(--premium-line); border-radius: 15px 6px 15px 6px; color: var(--premium-ink); }
.premium-payment-choice label > span i { color: var(--premium-primary); font-size: 1rem; }
.premium-payment-choice strong { font-size: .76rem; }
.premium-payment-choice small { color: var(--premium-muted); font-size: .66rem; }
.premium-payment-choice input:checked + span { border-color: var(--premium-primary); box-shadow: 0 0 0 3px rgba(11,116,104,.10); background: color-mix(in srgb, var(--premium-primary) 6%, var(--premium-surface)); }
.premium-terms-check { display: flex; align-items: flex-start; gap: .55rem; color: var(--premium-muted); font-size: .72rem; line-height: 1.6; }
.premium-terms-check input { margin-top: .18rem; accent-color: var(--premium-primary); }
.premium-terms-check a { color: var(--premium-primary); font-weight: 800; }
.premium-place-order { display: flex; align-items: center; justify-content: center; gap: .7rem; min-height: 52px; padding: .8rem 1rem; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(100deg, var(--premium-primary), #0f5a57); box-shadow: 0 14px 25px rgba(11,116,104,.20); font-size: .82rem; font-weight: 800; }
.premium-place-order strong { margin-left: auto; color: #fff; }
.premium-place-order i { margin-left: .1rem; }
.premium-place-order:hover { transform: translateY(-1px); box-shadow: 0 18px 30px rgba(11,116,104,.27); }
.premium-order-review { position: sticky; top: 155px; padding: 1.25rem; }
.premium-review-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--premium-line); }
.premium-review-head > strong { color: var(--premium-muted); font-size: .72rem; }
.premium-review-items { max-height: 330px; overflow: auto; }
.premium-review-item { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: .7rem; padding: .85rem 0; border-bottom: 1px solid var(--premium-line); }
.premium-review-item img { width: 44px; height: 57px; object-fit: cover; border-radius: 10px 4px 10px 4px; }
.premium-review-item strong { display: block; overflow: hidden; color: var(--premium-ink); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.premium-review-item small { display: block; margin-top: .3rem; color: var(--premium-muted); font-size: .65rem; }
.premium-review-item > b { color: var(--premium-ink); font-size: .72rem; }
.premium-review-totals { padding: .85rem 0 0; }
.premium-review-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; color: var(--premium-muted); font-size: .76rem; }
.premium-review-totals b { color: var(--premium-ink); }
.premium-review-totals em { color: var(--premium-primary); font-style: normal; font-weight: 800; }
.premium-review-total { margin-top: .5rem; padding-top: .9rem !important; border-top: 1px solid var(--premium-line); color: var(--premium-ink) !important; font-size: .95rem !important; }
.premium-review-total b { color: var(--premium-primary); font-size: 1.15rem; }
.premium-review-trust { display: grid; gap: .55rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--premium-line); }
.premium-review-trust div { display: flex; align-items: center; gap: .55rem; color: var(--premium-muted); font-size: .68rem; }
.premium-review-trust i { width: 18px; color: var(--premium-primary); text-align: center; }
.premium-checkout-empty { max-width: 620px; margin: 4rem auto; padding: 3rem 1.5rem; text-align: center; border: 1px solid var(--premium-line); border-radius: 30px 12px 30px 12px; background: var(--premium-surface); box-shadow: var(--premium-shadow); }
.premium-checkout-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 1rem; border-radius: 50%; color: var(--premium-primary); background: var(--premium-bg); font-size: 1.55rem; }
.premium-checkout-empty h1 { margin: .45rem 0; color: var(--premium-ink); font: 800 2rem 'Plus Jakarta Sans',sans-serif; letter-spacing: -.05em; }
.premium-checkout-empty p { max-width: 430px; margin: 0 auto 1.4rem; color: var(--premium-muted); }

@media (max-width: 991.98px) { .premium-checkout-layout { grid-template-columns: 1fr; } .premium-order-review { position: static; } }
@media (max-width: 575.98px) { .premium-checkout-heading { align-items: flex-start; flex-direction: column; gap: .7rem; } .premium-form-grid, .premium-payment-choice { grid-template-columns: 1fr; } .premium-span-2 { grid-column: auto; } .premium-place-order { flex-wrap: wrap; } .premium-place-order strong { margin-left: 0; } }

body.premium-ready main .product-card, body.premium-ready main .beauty-product-card, body.premium-ready main .blog-card, body.premium-ready main .commercial-panel, body.premium-ready main .card, body.premium-ready main .table-responsive, body.premium-ready main .bg-white.rounded-4, body.premium-ready main .bg-white.rounded-3, body.premium-ready main .bg-light.rounded-4 { border-radius: var(--premium-radius) 10px var(--premium-radius) 10px !important; border-color: var(--premium-line) !important; box-shadow: var(--premium-shadow) !important; }
body.premium-ready main .product-card, body.premium-ready main .beauty-product-card, body.premium-ready main .blog-card { overflow: hidden; }
body.premium-ready main .product-card::before, body.premium-ready main .beauty-product-card::before, body.premium-ready main .commercial-panel::before { content: ''; position: absolute; top: -42px; right: -34px; width: 96px; height: 96px; border: 1px solid rgba(11,116,104,.12); border-radius: 50%; pointer-events: none; }
body.premium-ready main .hero-carousel-curved, body.premium-ready main .hero-main-card, body.premium-ready main .curved-box-pink, body.premium-ready main .curved-box-yellow, body.premium-ready main .curved-box-blue { border-radius: 34px 12px 34px 12px !important; }
body.premium-ready main .btn, body.premium-ready main .btn-add-cart, body.premium-ready main .btn-add-cart-sellzy, body.premium-ready main .btn-add-cart-main, body.premium-ready main .btn-bh-primary { border-radius: 999px !important; }
body.premium-ready main .section-title, body.premium-ready main .section-header-title { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -.045em; }

.premium-drawer-backdrop, .premium-modal-backdrop { position: fixed; inset: 0; z-index: 1080; background: rgba(9,20,32,.42); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; backdrop-filter: blur(3px); }
.premium-drawer-backdrop.is-visible, .premium-modal-backdrop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.premium-cart-drawer { position: fixed; top: 0; bottom: 0; z-index: 1090; width: min(440px, 94vw); background: var(--premium-surface); color: var(--premium-ink); box-shadow: -16px 0 60px rgba(9,20,32,.20); transition: transform .35s cubic-bezier(.22,.8,.28,1); display: flex; flex-direction: column; }
.premium-cart-drawer { right: 0; transform: translateX(105%); }
.premium-cart-drawer.is-open { transform: translateX(0); }
.premium-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.35rem 1.1rem; border-bottom: 1px solid var(--premium-line); }
.premium-drawer-head h2 { margin: .25rem 0 0; font: 800 1.22rem/1.15 'Plus Jakarta Sans', sans-serif; letter-spacing: -.04em; color: var(--premium-ink); }
.premium-drawer-head h2 i { color: var(--premium-primary); font-size: .95em; }
.premium-eyebrow { display: block; color: var(--premium-primary); text-transform: uppercase; font-size: .64rem; font-weight: 800; letter-spacing: .15em; }
.premium-close-button { width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid var(--premium-line); border-radius: 50%; background: transparent; color: var(--premium-muted); }
.premium-close-button:hover { color: var(--premium-primary); border-color: var(--premium-primary); }
.premium-shipping-progress { margin: 1rem 1.35rem .5rem; padding: .8rem .9rem; border-radius: 16px 7px 16px 7px; background: var(--premium-bg); border: 1px solid var(--premium-line); }
.premium-progress-copy { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .48rem; color: var(--premium-muted); font-size: .7rem; }
.premium-progress-copy strong { color: var(--premium-ink); }
.premium-shipping-progress .progress { height: 6px; overflow: hidden; background: rgba(16,42,67,.10); border-radius: 999px; }
.premium-shipping-progress .progress-bar { width: 0; background: linear-gradient(90deg, var(--premium-primary), var(--premium-accent)); border-radius: 999px; transition: width .35s ease; }
.premium-cart-items { flex: 1 1 auto; overflow: auto; padding: .5rem 1.35rem; }
.premium-cart-items .mini-cart-item { display: grid; grid-template-columns: 52px minmax(0,1fr) 28px; gap: .75rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--premium-line); }
.premium-cart-items .mini-cart-item img { width: 52px; height: 68px; object-fit: cover; border-radius: 12px 5px 12px 5px; }
.premium-cart-items .mini-cart-item a { color: var(--premium-ink); }
.premium-drawer-foot { padding: 1.1rem 1.35rem max(1.1rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--premium-line); }
.premium-total-row { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; font-size: 1rem; }
.premium-total-row strong { color: var(--premium-primary); font-size: 1.2rem; }
.premium-drawer-buttons, .premium-quickview-actions { display: flex; gap: .65rem; }
.premium-primary-button, .premium-secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .7rem 1rem; border-radius: 999px; font-size: .78rem; font-weight: 800; border: 1px solid transparent; transition: .2s ease; }
.premium-primary-button { flex: 1 1 auto; color: #fff !important; background: var(--premium-primary); border-color: var(--premium-primary); }
.premium-primary-button:hover { color: #fff !important; background: var(--premium-ink); transform: translateY(-1px); }
.premium-secondary-button { flex: 1 1 auto; color: var(--premium-ink); background: var(--premium-surface); border-color: var(--premium-line); }
.premium-secondary-button:hover { color: var(--premium-primary); border-color: var(--premium-primary); }
.premium-quickview { position: fixed; top: 50%; left: 50%; z-index: 1100; width: min(800px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; padding: 1.2rem; border-radius: 30px 12px 30px 12px; background: var(--premium-surface); color: var(--premium-ink); box-shadow: 0 30px 90px rgba(9,20,32,.28); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -46%) scale(.96); transition: .25s ease; }
.premium-quickview.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.premium-quickview > .premium-close-button { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
.premium-quickview-grid { display: grid; grid-template-columns: minmax(180px,.75fr) minmax(0,1.25fr); gap: 2rem; align-items: center; padding: 1.5rem; }
.premium-quickview-image { padding: 1.2rem; text-align: center; border-radius: 24px 8px 24px 8px; background: var(--premium-bg); }
.premium-quickview-image img { width: 100%; max-height: 330px; object-fit: cover; border-radius: 16px 5px 16px 5px; }
.premium-quickview h2 { margin: .35rem 0 .45rem; font: 800 clamp(1.35rem,3vw,2rem)/1.15 'Plus Jakarta Sans',sans-serif; letter-spacing: -.05em; }
.premium-quickview-price { display: block; margin-bottom: .9rem; color: var(--premium-primary); font-size: 1.45rem; }
.premium-quickview-description { color: var(--premium-muted); font-size: .85rem; line-height: 1.7; }
.premium-quickview-actions .premium-primary-button { border: 0; cursor: pointer; }

.premium-flying-product { position: fixed; z-index: 1200; pointer-events: none; object-fit: cover; border-radius: 14px 5px 14px 5px; box-shadow: 0 16px 40px rgba(0,0,0,.25); opacity: .95; transition: transform .65s cubic-bezier(.18,.8,.22,1), opacity .65s ease; }
.premium-cart-pop { animation: premium-cart-pop .52s ease both; }
@keyframes premium-cart-pop { 0%,100% { transform: scale(1); } 35% { transform: scale(1.20) rotate(-6deg); } 70% { transform: scale(.95); } }
body.premium-drawer-open { overflow: hidden; }

@media (max-width: 991.98px) {
  .premium-header-grid { grid-template-columns: minmax(150px, .8fr) minmax(0, 1.6fr) auto; gap: .8rem; }
  .premium-brand-logo { width: 150px; height: 52px; }
  .premium-action-label { display: none; }
  .premium-action { min-width: 42px; }
  .premium-nav-service { display: none; }
  .premium-nav-inner { position: relative; flex-wrap: wrap; padding-block: .45rem; }
  .premium-nav-menu { cursor: pointer; }
  .premium-nav-links { display: none; position: absolute; top: calc(100% + .45rem); left: 0; right: 0; padding: .5rem; flex-direction: column; align-items: stretch; border: 1px solid rgba(255,255,255,.15); border-radius: 16px 6px 16px 6px; background: #103f3b; box-shadow: 0 18px 38px rgba(0,0,0,.20); }
  .premium-nav-links.is-open { display: flex; }
  .premium-nav-links a { padding: .7rem .8rem; }
}
@media (max-width: 767.98px) {
  .premium-announcement-inner { min-height: 34px; overflow: hidden; }
  .premium-announce-copy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .premium-announce-copy span:nth-of-type(n+2), .premium-utility-links { display: none; }
  .premium-header-grid { grid-template-columns: 1fr auto; min-height: 74px; padding-block: .55rem; }
  .premium-brand-logo { width: 132px; height: 44px; }
  .premium-search-wrap { grid-column: 1 / -1; grid-row: 2; min-height: 44px; }
  .premium-search-input { height: 34px; font-size: .78rem; }
  .premium-search-select { display: none; }
  .premium-search-button { width: 34px; height: 34px; flex-basis: 34px; }
  .premium-header-actions { grid-column: 2; grid-row: 1; }
  .premium-action { padding-inline: .2rem; }
  .premium-nav { top: 74px; }
  .premium-nav-inner { min-height: 46px; }
  .premium-nav-menu { width: 100%; justify-content: space-between; }
  .premium-quickview-grid { grid-template-columns: 1fr; gap: 1rem; padding: .75rem; }
  .premium-quickview-image img { max-height: 220px; }
  .premium-quickview { padding: .75rem; }
  .premium-footer-top { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 450px) {
  .premium-container { width: min(100% - 1.2rem, 1360px); }
  .premium-header-actions { gap: 0; }
  .premium-action-icon { font-size: .95rem; }
  .premium-badge { right: -8px; }
  .premium-drawer-buttons, .premium-quickview-actions { flex-direction: column; }
  .premium-footer-top { grid-template-columns: 1fr !important; }
  body.premium-ready main .product-card, body.premium-ready main .beauty-product-card { border-radius: 20px 8px 20px 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-card-animate, .premium-flying-product, .premium-cart-pop { animation: none !important; transition: none !important; }
}

/* ========================================================================== 
   FINAL UX PASS
   Rounded content surfaces, category tabs and collision-safe navigation.
   ========================================================================== */

/* Keep the primary navigation readable at laptop widths. The service note is
   secondary content, so it yields space before the actual navigation links do. */
.premium-nav-inner { gap: .55rem; }
.premium-nav-menu { flex: 0 1 218px; min-width: 198px; }
.premium-nav-links {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.premium-nav-links::-webkit-scrollbar { display: none; }
.premium-nav-service { flex: 0 0 auto; margin-left: .25rem; }

/* A shared carved surface for every top-level content section. Existing
   section-specific gradients remain intact; this layer supplies the common
   border, radius, shadow and clipped decorative arc. */
body.premium-ready > section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--premium-line);
  border-radius: clamp(24px, 3vw, 36px);
  box-shadow: 0 18px 48px rgba(16, 42, 67, .075);
}
body.premium-ready > section::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -132px;
  right: -112px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(11, 116, 104, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(11, 116, 104, .035), 0 0 0 44px rgba(11, 116, 104, .022);
  pointer-events: none;
}
body.premium-ready > section > * { position: relative; z-index: 1; }
body.premium-ready > section.hero-section {
  width: min(100% - 2rem, 1360px);
  margin-inline: auto;
  padding: clamp(1rem, 2.5vw, 1.5rem) !important;
  background: linear-gradient(145deg, #ffffff 0%, #f1f8f7 100%);
}
body.premium-ready > section.premium-picks-section {
  background: linear-gradient(145deg, #ffffff 0%, #f5faf9 100%);
}
body.premium-ready > section:not(.hero-section):not(.featured-collections-section):not(.best-deal-section):not(.popular-products-section):not(.premium-picks-section):not(.top-selling-section) {
  background: linear-gradient(145deg, #ffffff 0%, #f5faf9 100%);
}

/* Popular categories: a true segmented control with accessible buttons and a
   horizontal scroll fallback on smaller screens. */
.popular-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.35rem;
}
.popular-section-heading-copy { min-width: 0; }
.popular-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .35rem;
  color: var(--premium-primary);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.popular-section-kicker i { color: var(--premium-accent); }
.popular-section-heading h4 { color: var(--premium-ink); letter-spacing: -.045em; }
.popular-section-subtitle { color: var(--premium-muted); font-size: .76rem; }
.popular-category-tabs {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: 0 1 auto;
  max-width: 100%;
  padding: .34rem;
  overflow-x: auto;
  border: 1px solid rgba(11, 116, 104, .13);
  border-radius: 999px;
  background: linear-gradient(135deg, #f5fbfa, #edf6f5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(16,42,67,.045);
  scrollbar-width: none;
}
.popular-category-tabs::-webkit-scrollbar { display: none; }
.popular-category-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  flex: 0 0 auto;
  min-height: 40px;
  padding: .55rem .82rem;
  border: 0;
  border-radius: 999px;
  color: #58717b;
  background: transparent;
  font: 800 .76rem/1 'Inter', sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.popular-category-tab i { color: var(--premium-primary); font-size: .78rem; }
.popular-category-tab:hover { color: var(--premium-primary); background: rgba(255,255,255,.75); transform: translateY(-1px); }
.popular-category-tab.is-active,
.popular-category-tab[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--premium-primary), #0e5c55);
  box-shadow: 0 7px 16px rgba(11,116,104,.22);
}
.popular-category-tab.is-active i,
.popular-category-tab[aria-selected="true"] i { color: var(--premium-accent); }
[data-popular-grid].is-switching { animation: popularGridSwitch .26s ease both; }
@keyframes popularGridSwitch { 50% { opacity: .42; transform: translateY(3px); } }

/* The injected footer follows the same rounded language as the content. */
.premium-footer {
  border-radius: 40px 40px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

@media (max-width: 1320px) and (min-width: 992px) {
  .premium-nav-service { display: none; }
  .premium-nav-menu { flex-basis: 204px; min-width: 190px; }
  .premium-nav-links a { padding-inline: .56rem; font-size: .74rem; }
}

@media (max-width: 991.98px) {
  .premium-nav-service { display: none; }
}

@media (max-width: 767.98px) {
  /* The search row makes the mobile header taller than 74px. Keeping the
     nav in normal flow prevents it from covering the search field. */
  .premium-nav { position: relative; top: auto; }
  body.premium-ready > section { border-radius: 26px; }
  body.premium-ready > section.hero-section { width: min(100% - 1.25rem, 1360px); padding: .75rem !important; }
  .popular-section-heading { align-items: stretch; flex-direction: column; gap: .9rem; }
  .popular-section-heading h4 { font-size: 1.12rem; }
  .popular-category-tabs { width: 100%; justify-content: flex-start; }
  .popular-category-tab { min-height: 38px; padding-inline: .72rem; font-size: .72rem; }
}

@media (max-width: 450px) {
  .popular-section-subtitle { font-size: .7rem; }
  .popular-category-tab span { display: inline; }
  .popular-category-tab { gap: .3rem; padding-inline: .62rem; }
}

/* ========================================================================== 
   V7 CONSISTENCY PASS
   ========================================================================== */

/* The same compact action language is used by index, shop and category cards.
   The !important sizing also wins over Bootstrap's old 48px wishlist rule. */
.product-overlay-actions {
  width: 36px;
  gap: .34rem;
  top: .72rem;
  right: .72rem;
}
.product-overlay-actions .product-overlay-action,
.product-overlay-actions .btn,
.product-overlay-actions .btn-wishlist-toggle,
.product-overlay-actions .btn-icon-add,
.product-overlay-actions .btn-quickview {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: .78rem !important;
  line-height: 1 !important;
}
.product-overlay-actions .product-overlay-action i,
.product-overlay-actions .btn i { margin: 0 !important; font-size: .78rem; line-height: 1; }
.product-overlay-actions .btn-icon-add { color: #fff !important; background: var(--premium-primary) !important; border-color: var(--premium-primary) !important; box-shadow: 0 7px 16px rgba(11,116,104,.22); }
.product-overlay-actions .btn-icon-add:hover { color: #fff !important; background: var(--premium-ink) !important; border-color: var(--premium-ink) !important; }
.product-overlay-actions .btn-wishlist-toggle { color: var(--premium-ink) !important; background: rgba(255,255,255,.95) !important; border-color: rgba(255,255,255,.92) !important; }
.product-overlay-actions .btn-wishlist-toggle.active { color: #d85664 !important; background: #fff1f3 !important; border-color: #ffd0d7 !important; }

/* Desktop Browse departments menu. It is deliberately separate from the
   primary links so the desktop trigger opens the categories users expect. */
.premium-nav-departments { position: relative; flex: 0 0 218px; min-width: 198px; }
.premium-nav-departments .premium-nav-menu { width: 100%; justify-content: flex-start; }
.premium-nav-departments .premium-nav-menu[aria-expanded="true"] i:last-child { transform: rotate(180deg); }
.premium-departments-menu {
  position: absolute;
  top: calc(100% + .52rem);
  left: 0;
  z-index: 1060;
  display: grid;
  width: min(304px, calc(100vw - 2rem));
  gap: .2rem;
  padding: .52rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px 7px 18px 7px;
  background: #103f3b;
  box-shadow: 0 20px 42px rgba(0,0,0,.24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.premium-departments-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.premium-departments-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 42px;
  padding: .62rem .72rem;
  border-radius: 11px 4px 11px 4px;
  color: rgba(255,255,255,.82);
  font-size: .76rem;
  font-weight: 700;
}
.premium-departments-menu a:hover { color: #fff; background: rgba(255,255,255,.13); }
.premium-departments-menu a span { display: inline-flex; align-items: center; gap: .58rem; min-width: 0; }
.premium-departments-menu a span i { width: 1rem; color: var(--premium-accent); text-align: center; }
.premium-departments-menu a > i { color: rgba(255,255,255,.48); font-size: .68rem; }

/* On phones the hero owns the full viewport width and gets a shorter,
   content-safe slide. No desktop selector is changed by this block. */
@media (max-width: 767.98px) {
  .premium-nav-inner { align-items: stretch; flex-direction: row; }
  .premium-nav-departments { flex: 1 1 100%; min-width: 0; }
  .premium-nav-departments .premium-nav-menu { width: 100%; }
  .premium-departments-menu {
    position: static;
    width: 100%;
    margin-top: .42rem;
    border-radius: 14px 6px 14px 6px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    display: none;
  }
  .premium-departments-menu.is-open { display: grid; }
  .premium-nav-links {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    flex: 1 1 100%;
    max-height: 52vh;
    overflow-y: auto;
    border-radius: 14px 6px 14px 6px;
  }

  body.premium-ready > section.hero-section {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: .6rem 0 !important;
    border-radius: 0;
  }
  body.premium-ready > section.hero-section > .container-custom { width: 100%; padding-inline: 0 !important; }
  body.premium-ready > section.hero-section .hero-carousel-curved { width: 100%; border-radius: 24px !important; }
  body.premium-ready > section.hero-section .hero-slide-curved {
    height: auto !important;
    min-height: clamp(430px, 116vw, 540px) !important;
  }
  body.premium-ready > section.hero-section .hero-slide-curved > .row {
    height: auto !important;
    min-height: inherit;
    padding: 1rem !important;
    row-gap: .45rem;
  }
  body.premium-ready > section.hero-section .hero-slide-curved .display-5 { font-size: clamp(1.45rem, 6.2vw, 1.95rem); line-height: 1.08; margin-bottom: .6rem !important; }
  body.premium-ready > section.hero-section .hero-slide-curved .lead { margin-bottom: .75rem !important; font-size: .84rem; line-height: 1.45; }
  body.premium-ready > section.hero-section .hero-slide-curved .btn { font-size: .88rem; padding: .62rem 1rem !important; }
  body.premium-ready > section.hero-section .hero-product-img-curved { max-height: 170px; margin-top: .15rem; }

  .product-overlay-actions { width: 32px; gap: .28rem; top: .6rem; right: .6rem; }
  .product-overlay-actions .product-overlay-action,
  .product-overlay-actions .btn,
  .product-overlay-actions .btn-wishlist-toggle,
  .product-overlay-actions .btn-icon-add,
  .product-overlay-actions .btn-quickview {
    flex-basis: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    font-size: .7rem !important;
  }
  .product-overlay-actions .product-overlay-action i,
  .product-overlay-actions .btn i { font-size: .7rem; }
}

@media (max-width: 991.98px) and (min-width: 768px) {
  .premium-nav-departments { flex: 1 1 100%; min-width: 0; }
  .premium-nav-departments .premium-nav-menu { width: 100%; }
  .premium-departments-menu {
    position: static;
    width: 100%;
    margin-top: .42rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    display: none;
  }
  .premium-departments-menu.is-open { display: grid; }
  .premium-nav-links { position: static; flex: 1 1 100%; max-height: 48vh; overflow-y: auto; }
}