/* =========================================
   TTT OUTFIT — CLEAN MASTER STYLESHEET
========================================= */

:root {
  --ink: #111111;
  --muted: #6f6f6f;
  --bg: #f6f4ef;
  --card: #ffffff;
  --line: #e7e3da;

  --gold: #c7a646;
  --gold-light: #ead99c;
  --deep-black: #0b0b0b;
  --soft-black: #191919;

  --success: #e8f7ec;
  --error: #fff0f0;

  --container: 1440px;
  --radius: 12px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.09);
}


/* =========================================
   RESET AND BASE
========================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;

  color: var(--ink);
  background: var(--bg);

  font-family: Inter, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

body.menu-open {
  overflow: hidden;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3 {
  font-family: "Playfair Display", Georgia, serif;
}

.container {
  width: min(var(--container), 92%);
  margin-inline: auto;
}


/* =========================================
   BUTTONS
========================================= */

.btn {
  min-height: 44px;
  padding: 11px 19px;

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

  color: #ffffff;
  background: var(--deep-black);

  border: 1px solid var(--deep-black);
  border-radius: 5px;

  font-weight: 750;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

.btn.secondary {
  color: var(--ink);
  background: #ffffff;
}

.btn.danger {
  color: #ffffff;
  background: #8f1d1d;
  border-color: #8f1d1d;
}

.gold-btn {
  color: var(--deep-black);
  background: var(--gold);
  border-color: var(--gold);
}

.gold-btn:hover {
  background: #ddbf61;
  box-shadow: 0 12px 30px rgba(199, 166, 70, 0.32);
}

.outline-btn {
  color: #ffffff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.72);
}

.outline-btn:hover {
  color: var(--deep-black);
  background: #ffffff;
}


/* =========================================
   ANNOUNCEMENT BAR
========================================= */

.announcement-bar {
  position: relative;
  z-index: 1300;

  overflow: hidden;
  white-space: nowrap;

  color: var(--gold-light);
  background: var(--deep-black);
}

.announcement-track {
  width: max-content;
  min-width: max-content;

  display: flex;
  gap: 70px;

  padding: 9px 0;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;

  animation: announcementScroll 28s linear infinite;
}

.announcement-track:hover {
  animation-play-state: paused;
}

@keyframes announcementScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* =========================================
   HEADER AND DESKTOP NAVIGATION
========================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1200;

  width: 100%;

  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 9px 28px rgba(0, 0, 0, 0.08);
}

.nav {
  min-height: 64px;

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

  gap: 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  flex-shrink: 0;

  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: 2px;
}

.brand strong {
  color: var(--gold);
}

.brand-logo {
  width: 42px;
  height: 42px;

  object-fit: cover;

  border: 1.5px solid var(--gold);
  border-radius: 50%;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.brand:hover .brand-logo {
  transform: rotate(-4deg) scale(1.04);
  box-shadow: 0 7px 20px rgba(199, 166, 70, 0.26);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-links form {
  margin: 0;
}

.nav-links > a,
.logout-btn {
  position: relative;

  min-height: 36px;

  display: inline-flex;
  align-items: center;

  color: #222222;

  font-size: 13px;
  font-weight: 650;
}

.nav-links > a:not(.nav-register)::after,
.logout-btn::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: 1px;

  width: 0;
  height: 2px;

  background: var(--gold);

  transition: width 0.25s ease;
}

.nav-links > a:hover::after,
.nav-links > a.active-nav::after,
.logout-btn:hover::after {
  width: 100%;
}

.nav-links > a:hover,
.active-nav {
  color: var(--gold) !important;
}

.admin-link {
  color: var(--gold) !important;
}

.cart-link {
  gap: 6px;
}

.cart-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;

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

  color: var(--deep-black);
  background: var(--gold);

  border-radius: 999px;

  font-size: 10px;
  font-weight: 850;
}

.nav-register {
  padding: 8px 14px;

  color: #ffffff !important;
  background: var(--deep-black);

  border-radius: 999px;
}

.nav-register:hover {
  color: var(--deep-black) !important;
  background: var(--gold);
}

.link-btn {
  padding: 0;

  color: inherit;
  background: transparent;
  border: 0;
}

.logout-btn {
  color: #861e1e;
}

.mobile-menu-button {
  width: 38px;
  height: 38px;
  padding: 0;

  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 5px;

  background: #ffffff;
  border: 1.5px solid var(--gold);
  border-radius: 9px;
}

.mobile-menu-button span {
  width: 21px;
  height: 2px;

  display: block;

  background: var(--deep-black);
  border-radius: 999px;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.mobile-menu-button.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-button.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-button.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* Mobile-only menu content */

.mobile-menu-brand,
.mobile-welcome,
.mobile-menu-social,
.nav-icon,
.nav-arrow {
  display: none;
}


/* =========================================
   HERO SLIDER
========================================= */

.hero-slider {
  position: relative;

  min-height: 590px;

  overflow: hidden;
  background: var(--deep-black);
}

.hero-slide {
  position: absolute;
  inset: 0;

  opacity: 0;
  visibility: hidden;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  transform: scale(1.035);

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease,
    transform 3.5s ease;
}

.hero-slide.active {
  z-index: 2;

  opacity: 1;
  visibility: visible;

  transform: scale(1);
}

.hero-slide-one {
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.50) 38%,
      rgba(0, 0, 0, 0.08) 76%
    ),
    url("/hero-1.jpg");
}

.hero-slide-two {
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.50) 38%,
      rgba(0, 0, 0, 0.08) 76%
    ),
    url("/hero-2.jpg");
}

.hero-slide-three {
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.50) 38%,
      rgba(0, 0, 0, 0.08) 76%
    ),
    url("/hero-3.jpg");
}

.hero-slide-four {
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.50) 38%,
      rgba(0, 0, 0, 0.08) 76%
    ),
    url("/hero-4.jpg");
}

.hero-slide-five {
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.50) 38%,
      rgba(0, 0, 0, 0.08) 76%
    ),
    url("/hero-5.jpg");
}

.hero-content-wrap {
  position: absolute;
  inset: 0;
  z-index: 4;

  display: flex;
  align-items: center;

  padding-top: 22px;
}

.hero-text {
  width: 100%;
  max-width: 580px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  color: #ffffff;
}

.hero-kicker,
.section-kicker {
  display: block;

  margin-bottom: 11px;

  color: var(--gold);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 2.3px;
}

.hero-text h1 {
  margin: 0 0 17px;

  color: #ffffff;

  font-size: clamp(48px, 6vw, 78px);
  line-height: 0.94;
  letter-spacing: -1.7px;
}

.hero-text h1 em {
  display: block;

  color: var(--gold);
  font-weight: inherit;
}

.hero-text p {
  max-width: 480px;
  margin: 0;

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

  font-size: 16px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;

  margin-top: 22px;
}

.hero-actions .btn {
  min-height: 44px;
  padding: 11px 18px;

  font-size: 13px;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 6;

  width: 46px;
  height: 46px;

  color: #ffffff;
  background: rgba(0, 0, 0, 0.24);

  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;

  font-size: 20px;

  transform: translateY(-50%);

  transition:
    color 0.25s ease,
    background 0.25s ease;
}

.hero-arrow:hover {
  color: var(--deep-black);
  background: var(--gold);
  border-color: var(--gold);
}

.hero-prev {
  left: 25px;
}

.hero-next {
  right: 25px;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 19px;
  z-index: 7;

  display: flex;
  gap: 7px;

  transform: translateX(-50%);
}

.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;

  background: rgba(255, 255, 255, 0.56);
  border: 0;
  border-radius: 999px;

  transition:
    width 0.25s ease,
    background 0.25s ease;
}

.hero-dot.active {
  width: 25px;
  background: var(--gold);
}


/* =========================================
   SECTIONS
========================================= */

.section {
  padding: 52px 0;
}

.section-title {
  max-width: 680px;
  margin: 0 auto 32px;

  text-align: center;
}

.section-title h2,
.section-head h2 {
  margin: 0;

  font-size: clamp(32px, 4vw, 46px);
  line-height: 1;
}

.section-title p {
  margin: 14px auto 0;

  color: var(--muted);

  font-size: 15px;
  line-height: 1.65;
}

.section-head {
  margin-bottom: 23px;

  display: flex;
  align-items: end;
  justify-content: space-between;

  gap: 20px;
}

.view-all-link {
  font-weight: 750;
}

.view-all-link:hover {
  color: var(--gold);
}


/* =========================================
   BENEFITS
========================================= */

.benefits-strip {
  color: #ffffff;
  background: var(--deep-black);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.benefit-item {
  min-height: 92px;
  padding: 19px;

  display: flex;
  align-items: center;
  gap: 13px;

  border-right: 1px solid rgba(255, 255, 255, 0.10);
}

.benefit-item:last-child {
  border-right: 0;
}

.benefit-icon {
  color: var(--gold);
  font-size: 22px;
}

.benefit-item strong,
.benefit-item small {
  display: block;
}

.benefit-item strong {
  font-size: 14px;
}

.benefit-item small {
  margin-top: 3px;

  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
}


/* =========================================
   CATEGORY COLLECTION
========================================= */

.category-section {
  background:
    radial-gradient(
      circle at top left,
      rgba(199, 166, 70, 0.08),
      transparent 32%
    ),
    var(--bg);
}

.premium-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.premium-category-card {
  position: relative;

  min-height: 490px;

  display: block;
  overflow: hidden;

  background: var(--deep-black);
  border-radius: 14px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.10);

  isolation: isolate;

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.premium-category-card::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 2;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.86) 0%,
      rgba(0, 0, 0, 0.24) 53%,
      transparent 78%
    );
}

.premium-category-card::after {
  content: "";

  position: absolute;
  top: -130%;
  left: -65%;
  z-index: 3;

  width: 45%;
  height: 320%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.18),
      transparent
    );

  transform: rotate(18deg);

  transition: left 0.7s ease;
}

.premium-category-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 25px 58px rgba(0, 0, 0, 0.17);
}

.premium-category-card:hover::after {
  left: 135%;
}

.premium-category-card img {
  position: absolute;
  inset: 0;
  z-index: 1;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.7s ease,
    filter 0.4s ease;
}

.premium-category-card:hover img {
  transform: scale(1.06);
  filter: saturate(1.07);
}

.premium-category-overlay {
  position: absolute;
  left: 29px;
  right: 29px;
  bottom: 29px;
  z-index: 4;

  color: #ffffff;
}

.category-label {
  display: inline-flex;

  margin-bottom: 10px;
  padding: 6px 10px;

  color: var(--deep-black);
  background: var(--gold);

  border-radius: 999px;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.7px;
}

.premium-category-overlay h3 {
  margin: 0 0 14px;

  color: #ffffff;

  font-size: clamp(31px, 4vw, 50px);
  line-height: 0.96;
}

.category-shop-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding-bottom: 5px;

  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.62);

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

.category-shop-link strong {
  color: var(--gold);
  font-size: 18px;

  transition: transform 0.25s ease;
}

.premium-category-card:hover
.category-shop-link strong {
  transform: translateX(5px);
}


/* =========================================
   PRODUCT GRID AND CARDS
========================================= */

.products-section {
  background: #fffdf8;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.product-card {
  position: relative;

  overflow: hidden;

  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.product-card > a {
  display: block;
  overflow: hidden;
}

.product-card img {
  width: 100%;
  aspect-ratio: 4 / 5;

  display: block;
  object-fit: cover;

  background: #eeeeee;

  transition: transform 0.55s ease;
}

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

.product-info {
  padding: 14px;

  background: #ffffff;
}

.product-info h3 {
  margin: 8px 0 6px;

  font-family: Inter, Arial, sans-serif;
  font-size: 15px;
}

.price {
  font-size: 16px;
  font-weight: 850;
}

.old-price {
  margin-left: 7px;

  color: var(--muted);

  font-size: 12px;
  text-decoration: line-through;
}

.badge {
  display: inline-flex;

  padding: 4px 8px;

  color: #4b4b4b;
  background: #efede7;

  border-radius: 999px;

  font-size: 10px;
}

.small {
  color: var(--muted);
  font-size: 12px;
}

.empty-products {
  padding: 55px 22px;

  text-align: center;

  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.empty-products h3 {
  margin-top: 0;
}


/* =========================================
   PROMO BANNER
========================================= */

.promo-banner {
  min-height: 390px;

  display: flex;
  align-items: center;

  color: #ffffff;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.86),
      rgba(0, 0, 0, 0.38)
    ),
    url("/promo-banner.jpg") center / cover no-repeat;
}

.promo-content {
  display: flex;
  align-items: end;
  justify-content: space-between;

  gap: 36px;
}

.promo-content > div {
  max-width: 650px;
}

.promo-content h2 {
  margin: 0 0 15px;

  font-size: clamp(38px, 5vw, 62px);
  line-height: 1;
}

.promo-content h2 em,
.gold-text {
  color: var(--gold);
}

.promo-content p {
  color: rgba(255, 255, 255, 0.72);

  font-size: 15px;
  line-height: 1.65;
}


/* =========================================
   WHY CHOOSE US
========================================= */

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px;
}

.why-card {
  min-height: 230px;
  padding: 29px;

  background: #ffffff;
  border: 1px solid var(--line);

  transition:
    color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}

.why-card:hover {
  color: #ffffff;
  background: var(--deep-black);

  transform: translateY(-6px);
}

.why-card > span {
  color: var(--gold);

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

.why-card h3 {
  margin: 37px 0 10px;

  font-size: 25px;
}

.why-card p {
  margin-bottom: 0;

  color: var(--muted);

  font-size: 14px;
  line-height: 1.65;
}

.why-card:hover p {
  color: rgba(255, 255, 255, 0.65);
}


/* =========================================
   NEWSLETTER
========================================= */

.newsletter-section {
  padding: 67px 0;

  color: #ffffff;
  background: var(--deep-black);
}

.newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;

  gap: 52px;
}

.newsletter h2 {
  margin: 0 0 10px;

  font-size: 40px;
}

.newsletter p {
  margin-bottom: 0;

  color: rgba(255, 255, 255, 0.58);
}

.newsletter-form {
  display: flex;
}

.newsletter-form input {
  min-width: 0;
  flex: 1;

  padding: 14px 16px;

  color: #ffffff;
  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.27);
  outline: none;
}

.newsletter-form input:focus {
  border-color: var(--gold);
}


/* =========================================
   FORMS, FILTERS AND PANELS
========================================= */

.field {
  margin-bottom: 15px;
}

.field label {
  display: block;

  margin-bottom: 6px;

  font-weight: 750;
}

.field input,
.field select,
.field textarea,
.filters input,
.filters select {
  width: 100%;
  padding: 11px 12px;

  background: #ffffff;

  border: 1px solid #cccccc;
  border-radius: 7px;
}

.filters {
  margin-bottom: 22px;

  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filters input {
  max-width: 340px;
}

.filters select {
  width: auto;
}

.panel {
  padding: 24px;

  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.auth-wrap {
  max-width: 560px;
  margin: 46px auto;
}

.flash {
  margin: 17px auto;
  padding: 12px 15px;

  border-radius: 7px;
}

.flash.success {
  background: var(--success);
}

.flash.error {
  background: var(--error);
}


/* =========================================
   PRODUCT DETAILS
========================================= */

.product-page {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;

  gap: 43px;
}

.product-page .main-image {
  width: 100%;
  aspect-ratio: 4 / 5;

  object-fit: cover;

  background: #eeeeee;
  border-radius: 12px;
}

.product-page h1 {
  margin: 0 0 11px;

  font-size: 39px;
}


/* =========================================
   CART AND CHECKOUT
========================================= */

.cart-row {
  padding: 15px 0;

  display: grid;
  grid-template-columns: 82px 1fr 100px 100px auto;
  align-items: center;

  gap: 16px;

  border-bottom: 1px solid var(--line);
}

.cart-row img {
  width: 82px;
  height: 100px;

  object-fit: cover;

  border-radius: 7px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 360px;

  gap: 25px;
}


/* =========================================
   ORDERS
========================================= */

.order-card {
  margin-bottom: 13px;
  padding: 17px;

  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.status {
  font-weight: 850;
}


/* =========================================
   ADMIN
========================================= */

.admin-layout {
  padding: 26px 0;

  display: grid;
  grid-template-columns: 210px 1fr;

  gap: 25px;
}

.admin-nav {
  position: sticky;
  top: 84px;

  height: max-content;
  padding: 18px;

  color: #ffffff;
  background: var(--deep-black);

  border-radius: 11px;
}

.admin-nav a {
  display: block;

  padding: 10px;

  border-radius: 6px;
}

.admin-nav a:hover {
  background: #292929;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 14px;
}

.stat {
  padding: 18px;

  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.stat strong {
  display: block;

  margin-top: 6px;

  font-size: 25px;
}

table {
  width: 100%;

  overflow: hidden;

  background: #ffffff;
  border-collapse: collapse;
  border-radius: 10px;
}

th,
td {
  padding: 12px;

  text-align: left;
  vertical-align: top;

  border-bottom: 1px solid var(--line);
}

th {
  background: #f0eee8;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}


/* =========================================
   FOOTER
========================================= */

.site-footer {
  margin-top: 0;
  padding: 60px 0 18px;

  color: #ffffff;
  background: #070707;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);

  gap: 43px;
}

.footer-brand p {
  max-width: 330px;

  color: rgba(255, 255, 255, 0.54);
  line-height: 1.65;
}

.footer-logo {
  margin-bottom: 18px;

  color: #ffffff;
}

.footer-column {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.footer-column h3 {
  color: var(--gold);

  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.footer-column a,
.footer-column span {
  color: rgba(255, 255, 255, 0.61);

  font-size: 13px;
}

.footer-column a:hover {
  color: #ffffff;
}

.footer-bottom {
  margin-top: 45px;
  padding-top: 17px;

  display: flex;
  justify-content: space-between;

  color: rgba(255, 255, 255, 0.42);
  border-top: 1px solid rgba(255, 255, 255, 0.10);

  font-size: 11px;
}

.developer-credit a {
  color: var(--gold);
  font-weight: 750;
}


/* =========================================
   SCROLL REVEAL
========================================= */

.reveal {
  opacity: 1;
  transform: translateY(0);
}

.reveal.reveal-ready {
  opacity: 0;
  transform: translateY(25px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal.reveal-ready.visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {
  .mobile-menu-button {
    display: flex;
  }

  body.menu-open::before {
    content: "";

    position: fixed;
    inset: 0;
    z-index: 900;

    background: rgba(5, 5, 5, 0.50);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .nav-links {
    position: fixed;
    top: 84px;
    right: -350px;
    z-index: 1150;

    width: min(88vw, 320px);
    max-height: calc(100dvh - 102px);
    padding: 15px;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 2px;

    background:
      linear-gradient(
        145deg,
        #ffffff,
        #fffdf8
      );

    border: 1px solid rgba(199, 166, 70, 0.36);
    border-radius: 17px;

    box-shadow: 0 22px 65px rgba(0, 0, 0, 0.30);

    opacity: 1;
    visibility: visible;
    pointer-events: none;

    overflow-y: auto;

    transition: right 0.34s ease;
  }

  .nav-links.active {
    right: 11px;

    pointer-events: auto;
  }

  .mobile-menu-brand {
    margin-bottom: 7px;
    padding: 1px 1px 9px;

    display: flex;
    align-items: center;
    gap: 9px;

    border-bottom: 1px solid rgba(199, 166, 70, 0.35);
  }

  .mobile-menu-brand img {
    width: 35px;
    height: 35px;

    object-fit: cover;

    border: 1.5px solid var(--gold);
    border-radius: 50%;
  }

  .mobile-menu-brand div {
    display: flex;
    flex-direction: column;
  }

  .mobile-menu-brand strong {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 15px;
    letter-spacing: 1.2px;
  }

  .mobile-menu-brand small {
    color: #8d8d8d;

    font-size: 8px;
  }

  .mobile-welcome {
    margin-bottom: 6px;
    padding: 6px 9px;

    display: block;

    color: #777777;
    background: #f7f3e9;

    border-radius: 8px;

    font-size: 10px;
  }

  .mobile-welcome strong {
    color: var(--gold);
  }

  .mobile-nav-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-nav-items > a {
    width: 100%;
    min-height: 43px;
    padding: 6px 8px;

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

    color: #181818;

    border-radius: 9px;

    font-size: 14px;
    font-weight: 720;
  }

  .mobile-nav-items > a::after {
    display: none !important;
  }

  .mobile-nav-items > a:hover,
  .mobile-nav-items > a.active-nav {
    color: #111111 !important;

    background:
      linear-gradient(
        90deg,
        rgba(199, 166, 70, 0.21),
        rgba(199, 166, 70, 0.04)
      );
  }

  .nav-item-left {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .nav-icon {
    width: 29px;
    height: 29px;

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

    background: #f2eddf;

    border-radius: 8px;

    font-size: 14px;
  }

  .active-nav .nav-icon {
    background: var(--gold);
  }

  .nav-arrow {
    display: inline;

    color: #aaaaaa;

    font-size: 21px;
  }

  .nav-register {
    min-height: 44px;
    margin-top: 5px;

    justify-content: center !important;

    color: #ffffff !important;
    background: var(--deep-black);

    border-radius: 11px;
  }

  .nav-links form {
    width: 100%;
  }

  .logout-btn {
    width: 100%;
    min-height: 41px;
    margin-top: 6px;
    padding: 9px 13px;

    justify-content: center;

    color: #ffffff;
    background: #8f1d1d;

    border: 0;
    border-radius: 9px;
  }

  .mobile-menu-social {
    margin-top: 8px;
    padding: 8px 2px 0;

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

    border-top: 1px solid var(--line);
  }

  .mobile-menu-social > span {
    color: #999999;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .social-links {
    display: flex;
    gap: 6px;
  }

  .social-links a {
    width: 27px;
    height: 27px;

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

    background: #f1ecdf;
    border-radius: 50%;

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

  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-page,
  .two-col,
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-nav {
    position: static;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .premium-category-card {
    min-height: 420px;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .promo-content {
    align-items: flex-start;
    flex-direction: column;
  }

  .newsletter {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {
  body {
    font-size: 13px;
  }

  .announcement-track {
    gap: 45px;
    padding: 7px 0;

    font-size: 8px;
    letter-spacing: 1.3px;
  }

  .nav {
    min-height: 58px;
  }

  .brand {
    gap: 7px;

    font-size: 15px;
    letter-spacing: 1.3px;
  }

  .brand-logo {
    width: 34px;
    height: 34px;
  }

  .mobile-menu-button {
    width: 36px;
    height: 36px;
  }

  .nav-links {
    top: 74px;

    width: min(88vw, 300px);
    padding: 13px;
  }

  .nav-links.active {
    right: 8px;
  }

  /* Compact cinematic hero */

  .hero-slider {
    min-height: 0;
    height: 470px;
  }

  .hero-slide {
    height: 470px;

    background-position: center center;
    background-size: cover;

    transform: scale(1.02);

    transition:
      opacity 0.7s ease,
      visibility 0.7s ease,
      transform 2.8s ease;
  }

  .hero-slide.active {
    transform: scale(1);
  }

  .hero-slide-one {
    background-image:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.12) 0%,
        rgba(0, 0, 0, 0.24) 43%,
        rgba(0, 0, 0, 0.82) 100%
      ),
      url("/hero-1-mobile.jpg");
  }

  .hero-slide-two {
    background-image:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.12) 0%,
        rgba(0, 0, 0, 0.24) 43%,
        rgba(0, 0, 0, 0.82) 100%
      ),
      url("/hero-2-mobile.jpg");
  }

  .hero-slide-three {
    background-image:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.12) 0%,
        rgba(0, 0, 0, 0.24) 43%,
        rgba(0, 0, 0, 0.82) 100%
      ),
      url("/hero-3-mobile.jpg");
  }

  .hero-slide-four {
    background-image:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.12) 0%,
        rgba(0, 0, 0, 0.24) 43%,
        rgba(0, 0, 0, 0.82) 100%
      ),
      url("/hero-4-mobile.jpg");
  }

  .hero-slide-five {
    background-image:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.12) 0%,
        rgba(0, 0, 0, 0.24) 43%,
        rgba(0, 0, 0, 0.82) 100%
      ),
      url("/hero-5-mobile.jpg");
  }

  .hero-content-wrap {
    align-items: flex-end;

    padding: 0 0 48px;
  }

  .hero-text {
    max-width: 310px;
  }

  .hero-kicker {
    margin-bottom: 7px;

    font-size: 8px;
    letter-spacing: 1.7px;
  }

  .hero-text h1 {
    margin-bottom: 9px;

    font-size: 37px;
    line-height: 0.95;
    letter-spacing: -0.6px;
  }

  .hero-text h1 em {
    display: inline;
  }

  .hero-text p {
    max-width: 290px;

    font-size: 12px;
    line-height: 1.45;
  }

  .hero-actions {
    margin-top: 13px;
    gap: 7px;
  }

  .hero-actions .btn {
    width: auto;
    min-height: 37px;
    padding: 8px 13px;

    font-size: 10px;
  }

  .hero-arrow {
    display: none;
  }

  .hero-dots {
    bottom: 12px;
    gap: 5px;
  }

  .hero-dot {
    width: 6px;
    height: 6px;
  }

  .hero-dot.active {
    width: 19px;
  }

  .section {
    padding: 38px 0;
  }

  .section-title {
    margin-bottom: 24px;
  }

  .section-title h2,
  .section-head h2 {
    font-size: 29px;
  }

  .section-title p {
    font-size: 13px;
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column;

    gap: 9px;
  }

  .benefits-grid {
    grid-template-columns: 1fr 1fr;
  }

  .benefit-item {
    min-height: 82px;
    padding: 14px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }

  .benefit-item:nth-child(2) {
    border-right: 0;
  }

  .premium-category-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .premium-category-card {
    min-height: 370px;

    border-radius: 11px;
  }

  .premium-category-overlay {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .premium-category-overlay h3 {
    font-size: 34px;
  }

  .grid {
    gap: 13px;
  }

  .product-info {
    padding: 11px;
  }

  .product-info h3 {
    font-size: 13px;
  }

  .price {
    font-size: 14px;
  }

  .promo-banner {
    min-height: 340px;
  }

  .promo-content h2 {
    font-size: 38px;
  }

  .newsletter-section {
    padding: 50px 0;
  }

  .newsletter h2 {
    font-size: 31px;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .footer-grid {
    grid-template-columns: 1fr;

    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;

    gap: 4px;
  }

  .cart-row {
    grid-template-columns: 68px 1fr;
  }

  .cart-row img {
    width: 68px;
    height: 84px;
  }

  .cart-row > *:nth-child(n + 3) {
    grid-column: 2;
  }

  table {
    display: block;
    overflow-x: auto;
  }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 430px) {
  .container {
    width: 91%;
  }

  .brand span {
    max-width: 125px;
  }

  .hero-slider,
  .hero-slide {
    height: 445px;
  }

  .hero-content-wrap {
    padding-bottom: 44px;
  }

  .hero-text {
    max-width: 285px;
  }

  .hero-text h1 {
    font-size: 34px;
  }

  .hero-text p {
    max-width: 270px;
    font-size: 11px;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .benefit-item {
    border-right: 0;
  }

  .grid,
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .premium-category-card {
    min-height: 350px;
  }
}
/* =========================================
   FINAL COMPACT MOBILE NAVIGATION
========================================= */

/* Mobile-only elements desktop-এ hide */
@media (min-width: 951px) {
  .mobile-menu-brand,
  .mobile-menu-social,
  .mobile-social-links,
  .mobile-menu-title,
  .mobile-menu-footer,
  .mobile-welcome,
  .nav-icon,
  .nav-arrow {
    display: none !important;
  }
}

/* Mobile menu */
@media (max-width: 950px) {
  .nav-links {
    top: 78px !important;
    right: -330px !important;

width: min(75vw, 250px) !important;
    height: auto !important;
    max-height: calc(100dvh - 95px) !important;

    padding: 14px !important;
    gap: 2px !important;

    background: #fffdf8 !important;

    border: 1px solid rgba(199, 166, 70, 0.45) !important;
    border-radius: 18px !important;

    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.28) !important;

    overflow-y: auto;
  }

  .nav-links.active {
    right: 10px !important;
  }

  /* Logo + brand inside menu */

  .mobile-menu-brand {
    display: flex !important;
    align-items: center;
    gap: 9px;

    margin-bottom: 7px;
    padding: 2px 3px 10px;

    border-bottom: 1px solid rgba(199, 166, 70, 0.4);
  }

  .mobile-menu-brand img {
    width: 35px;
    height: 35px;

    flex-shrink: 0;
    object-fit: cover;

    border: 1.5px solid var(--gold);
    border-radius: 50%;
  }

  .mobile-menu-brand span {
    color: #111;

    font-family: "Playfair Display", Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.3px;
  }

  .mobile-menu-brand strong {
    color: var(--gold);
  }

  /* Navigation links smaller */

  .nav-links > a {
    min-height: 42px !important;
    padding: 6px 8px !important;

    font-size: 14px !important;
    border-radius: 9px !important;
  }

  .nav-item-left {
    gap: 8px !important;
  }

  .nav-icon {
    width: 29px !important;
    height: 29px !important;

    font-size: 14px !important;
    border-radius: 8px !important;
  }

  .nav-arrow {
    font-size: 20px !important;
  }

  .cart-count {
    width: 27px !important;
    min-width: 27px !important;
    height: 27px !important;

    font-size: 11px !important;
  }

  /* Logout smaller */

  .logout-btn {
    min-height: 42px !important;
    margin-top: 6px !important;
    padding: 9px 12px !important;

    font-size: 14px !important;
    border-radius: 10px !important;
  }

  /* Social icons */

  .mobile-menu-social {
    display: flex !important;
    align-items: center;
    justify-content: space-between;

    margin-top: 9px;
    padding: 10px 3px 1px;

    border-top: 1px solid #e9e4da;
  }

  .mobile-menu-social > span {
    color: #8d8d8d;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .mobile-social-links {
    display: flex !important;
    align-items: center;
    gap: 7px;
  }

  .mobile-social-links a {
    width: 31px;
    height: 31px;

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

    color: #111;
    background: #f2eddf;

    border: 1px solid rgba(199, 166, 70, 0.35);
    border-radius: 50%;

    font-size: 15px;

    transition:
      transform 0.25s ease,
      background 0.25s ease,
      color 0.25s ease;
  }

  .mobile-social-links a:hover {
    color: #111;
    background: var(--gold);

    transform: translateY(-2px);
  }
}

@media (max-width: 560px) {
  .nav-links {
    top: 72px !important;
width: min(75vw, 250px) !important;
    padding: 13px !important;
  }

  .nav-links.active {
    right: 8px !important;
  }

  .mobile-menu-brand img {
    width: 32px;
    height: 32px;
  }

  .mobile-menu-brand span {
    font-size: 15px;
  }

  .nav-links > a {
    min-height: 40px !important;
    font-size: 13px !important;
  }
}

/* Product variant admin */

.variant-section {
  margin: 30px 0;
}

.variant-section-heading {
  margin-bottom: 18px;

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

  gap: 20px;
}

.variant-section-heading h2 {
  margin: 0 0 5px;
}

.variant-admin-card {
  margin-bottom: 18px;
  padding: 20px;

  background: #faf8f2;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.variant-card-heading {
  margin-bottom: 16px;

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

.remove-variant-button {
  padding: 6px 10px;

  color: #8d1e1e;
  background: transparent;

  border: 1px solid #d8aaaa;
  border-radius: 6px;
}

.color-picker-field {
  min-height: 46px;

  display: flex;
  align-items: center;
  gap: 12px;
}

.color-picker-field input {
  width: 55px;
  height: 40px;
  padding: 2px;
}

.existing-image-grid {
  margin: 12px 0;

  display: grid;
  grid-template-columns: repeat(6, 1fr);

  gap: 10px;
}

.existing-image-item img {
  width: 100%;
  aspect-ratio: 4 / 5;

  object-fit: cover;
  border-radius: 6px;
}

.existing-image-item small {
  display: block;
  margin-top: 4px;

  text-align: center;
}

.replace-images-check {
  display: flex;
  gap: 7px;
  align-items: center;

  margin-bottom: 15px;
}

/* Product details */

.product-detail-layout {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;

  gap: 50px;
}

.product-gallery {
  display: grid;
  grid-template-columns: 85px 1fr;

  gap: 14px;
}

.product-thumbnail-list {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.product-thumbnail {
  padding: 0;

  overflow: hidden;

  background: #eee;
  border: 2px solid transparent;
}

.product-thumbnail.active {
  border-color: var(--gold);
}

.product-thumbnail img {
  width: 100%;
  aspect-ratio: 4 / 5;

  display: block;
  object-fit: cover;
}

.product-main-image-wrap {
  position: relative;

  overflow: hidden;

  background: #eee;
}

.product-main-image-wrap .main-image {
  width: 100%;
  aspect-ratio: 4 / 5;

  display: block;
  object-fit: cover;

  transition:
    opacity 0.2s ease,
    transform 0.4s ease;
}

.product-main-image-wrap .main-image.changing {
  opacity: 0.3;
  transform: scale(0.99);
}

.product-detail-info h1 {
  margin: 0 0 15px;

  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
}

.product-detail-price {
  margin-bottom: 22px;

  display: flex;
  align-items: center;
  gap: 12px;
}

.product-detail-price strong {
  font-size: 24px;
}

.product-detail-price del {
  color: var(--muted);
}

.product-description {
  color: var(--muted);
  line-height: 1.7;
}

.product-meta {
  margin: 22px 0;
  padding: 15px 0;

  display: flex;
  flex-direction: column;
  gap: 5px;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  font-size: 12px;
}

.product-option-group {
  margin-bottom: 22px;
}

.product-option-heading {
  margin-bottom: 10px;

  display: flex;
  justify-content: space-between;
}

.product-color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-color-option {
  padding: 5px 9px 5px 5px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.product-color-option.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

.product-color-option > span {
  width: 25px;
  height: 25px;

  border: 1px solid #aaa;
  border-radius: 50%;
}

.product-color-option small {
  font-size: 11px;
}

.product-size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-size-option {
  min-width: 44px;
  height: 40px;

  background: #fff;
  border: 1px solid var(--line);
}

.product-size-option.active {
  color: #fff;
  background: #111;
  border-color: #111;
}

.product-stock-message {
  margin-bottom: 16px;

  display: flex;
  align-items: center;
  gap: 7px;

  font-size: 12px;
}

#variantStockDot {
  width: 8px;
  height: 8px;

  background: #24983d;
  border-radius: 50%;
}

#variantStockDot.out-of-stock {
  background: #a82929;
}

.product-buy-row {
  display: grid;
  grid-template-columns: 135px 1fr;

  gap: 12px;
}

.quantity-control {
  display: grid;
  grid-template-columns: 38px 1fr 38px;

  border: 1px solid var(--line);
}

.quantity-control button,
.quantity-control input {
  width: 100%;
  border: 0;
  background: #fff;
  text-align: center;
}

.product-add-button {
  width: 100%;
}

.product-service-grid {
  margin-top: 28px;
  padding-top: 20px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  border-top: 1px solid var(--line);
}

.product-service-grid strong,
.product-service-grid small {
  display: block;
}

.product-service-grid strong {
  font-size: 11px;
}

.product-service-grid small {
  color: var(--muted);
  font-size: 9px;
}

@media (max-width: 800px) {
  .product-detail-layout {
    grid-template-columns: 1fr;
  }

  .product-gallery {
    grid-template-columns: 1fr;
  }

  .product-thumbnail-list {
    order: 2;

    flex-direction: row;
    overflow-x: auto;
  }

  .product-thumbnail {
    width: 65px;
    flex: 0 0 65px;
  }

  .existing-image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ==================================================
   TTT OUTFIT — PROFESSIONAL SHOP UI V3
   Existing code remains unchanged
================================================== */

/* Shop background */

.shop-page {
  position: relative;
  padding: 24px 0 72px;
  background:
    radial-gradient(
      circle at 10% 5%,
      rgba(199, 166, 70, 0.08),
      transparent 28%
    ),
    #f8f7f3;
}


/* Breadcrumb */

.shop-breadcrumb {
  min-height: 40px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;

  color: #8a8a8a;
  font-size: 12px;
}

.shop-breadcrumb a {
  transition: color 0.25s ease;
}

.shop-breadcrumb a:hover {
  color: var(--gold);
}

.shop-breadcrumb strong {
  color: #1b1b1b;
  font-weight: 700;
}


/* Shop heading */

.shop-header {
  padding: 34px 0 30px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;

  border-bottom: 1px solid var(--line);
}

.shop-heading-content {
  max-width: 650px;
}

.shop-heading-content h1 {
  margin: 0;

  font-size: clamp(40px, 5vw, 62px);
  line-height: 0.95;
  letter-spacing: -1px;
}

.shop-heading-content p {
  max-width: 560px;
  margin: 14px 0 0;

  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.shop-result-count {
  min-width: 90px;
  text-align: right;
}

.shop-result-count strong,
.shop-result-count span {
  display: block;
}

.shop-result-count strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 31px;
  line-height: 1;
}

.shop-result-count span {
  margin-top: 4px;

  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}


/* Main shop layout */

.shop-layout {
  padding-top: 30px;

  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 32px;
}


/* Sidebar */

.shop-sidebar {
  position: sticky;
  top: 84px;

  height: max-content;
  padding: 20px;

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

  border: 1px solid var(--line);
  border-radius: 12px;

  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.055);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.shop-sidebar-header {
  margin-bottom: 18px;
  padding-bottom: 15px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;

  border-bottom: 1px solid var(--line);
}

.shop-sidebar-header span,
.shop-sidebar-header strong {
  display: block;
}

.shop-sidebar-header span {
  color: var(--gold);

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.8px;
}

.shop-sidebar-header strong {
  margin-top: 4px;

  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
}

.shop-filter-close {
  display: none;

  padding: 0;

  color: #111;
  background: transparent;

  border: 0;

  font-size: 27px;
  line-height: 1;
}


/* Search box */

.shop-search-form label {
  display: block;

  margin-bottom: 7px;

  color: #2f2f2f;
  font-size: 11px;
  font-weight: 750;
}

.shop-search-box {
  display: flex;
  overflow: hidden;

  background: #ffffff;

  border: 1px solid #d8d4ca;
  border-radius: 7px;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.shop-search-box:focus-within {
  border-color: var(--gold);

  box-shadow:
    0 0 0 3px rgba(199, 166, 70, 0.12);
}

.shop-search-box input {
  min-width: 0;
  width: 100%;
  padding: 10px 11px;

  background: transparent;
  border: 0;
  outline: 0;

  font-size: 12px;
}

.shop-search-box button {
  width: 42px;

  color: #ffffff;
  background: var(--deep-black);

  border: 0;

  font-size: 19px;

  transition:
    color 0.25s ease,
    background 0.25s ease;
}

.shop-search-box button:hover {
  color: var(--deep-black);
  background: var(--gold);
}


/* Sidebar groups */

.shop-filter-group {
  margin-top: 24px;
}

.shop-filter-heading {
  padding-bottom: 9px;

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

  border-bottom: 1px solid var(--line);
}

.shop-filter-heading strong {
  font-size: 13px;
}

.shop-filter-heading span {
  color: var(--gold);
  font-size: 15px;
}

.shop-category-list {
  padding-top: 7px;
}

.shop-category-list a {
  min-height: 38px;
  padding: 7px 8px;

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

  color: #5d5d5d;

  border-radius: 6px;

  font-size: 12px;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.shop-category-list a:hover {
  color: #111;
  background: #f5f0e4;

  transform: translateX(3px);
}

.shop-category-list a.active {
  color: #111;
  background:
    linear-gradient(
      90deg,
      rgba(199, 166, 70, 0.24),
      rgba(199, 166, 70, 0.06)
    );

  font-weight: 800;
}


/* Size preview */

.shop-size-preview {
  padding-top: 12px;

  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shop-size-preview span {
  min-width: 34px;
  height: 31px;
  padding: 0 7px;

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

  color: #333;
  background: #ffffff;

  border: 1px solid #d8d4ca;
  border-radius: 4px;

  font-size: 10px;
  font-weight: 750;
}

.shop-filter-note {
  margin: 9px 0 0;

  color: #999;
  font-size: 9px;
  line-height: 1.5;
}


/* Info card */

.shop-info-card {
  margin-top: 23px;
  padding: 15px;

  display: flex;
  gap: 11px;

  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #101010,
      #242424
    );

  border-radius: 9px;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.16);
}

.shop-info-icon {
  color: var(--gold);
  font-size: 18px;
}

.shop-info-card strong {
  font-size: 11px;
}

.shop-info-card p {
  margin: 5px 0 0;

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

  font-size: 9px;
  line-height: 1.5;
}

.shop-sidebar-links {
  margin-top: 13px;
}

.shop-sidebar-links a {
  min-height: 38px;

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

  border-bottom: 1px solid var(--line);

  font-size: 11px;
  font-weight: 700;
}

.shop-sidebar-links strong {
  color: var(--gold);
}


/* Shop toolbar */

.shop-toolbar {
  min-height: 54px;
  margin-bottom: 20px;
  padding: 0 4px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  border-bottom: 1px solid var(--line);
}

.shop-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shop-active-filters span {
  padding: 5px 9px;

  color: #2c2c2c;
  background: #eee8d9;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 650;
}

.shop-active-filters a {
  color: #8d1e1e;

  font-size: 10px;
  font-weight: 800;
}

.shop-sort-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-sort-form label {
  color: var(--muted);
  font-size: 10px;
}

.shop-sort-form select {
  min-height: 38px;
  padding: 7px 29px 7px 10px;

  color: #222;
  background: #ffffff;

  border: 1px solid var(--line);
  border-radius: 6px;

  outline: 0;

  font-size: 11px;
  font-weight: 700;
}


/* Product grid */

.shop-product-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 27px 18px;
}

.shop-product-item {
  min-width: 0;
}


/* Improve existing professional product card */

.professional-product-card {
  position: relative;
  min-width: 0;
}

.product-image-wrap {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #f1f1ef,
      #e9e8e4
    );

  border-radius: 10px;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.055);

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

.professional-product-card:hover
.product-image-wrap {
  transform: translateY(-5px);

  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.13);
}

.product-image-link {
  position: relative;
  display: block;
  overflow: hidden;
}

.product-image-link img {
  width: 100%;
  aspect-ratio: 4 / 5;

  display: block;

  object-fit: cover;

  transition:
    opacity 0.45s ease,
    transform 0.65s
      cubic-bezier(0.22, 1, 0.36, 1);
}

.product-primary-image {
  opacity: 1;
}

.product-secondary-image {
  position: absolute;
  inset: 0;

  opacity: 0;
}

.product-image-wrap:hover
.product-primary-image {
  opacity: 0;
  transform: scale(1.055);
}

.product-image-wrap:hover
.product-secondary-image {
  opacity: 1;
  transform: scale(1.055);
}


/* Badges */

.product-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;

  display: flex;
  flex-direction: column;
  gap: 5px;
}

.product-badges span {
  width: max-content;
  padding: 5px 8px;

  color: #ffffff;
  background: #111;

  border-radius: 3px;

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sale-badge {
  color: #111 !important;
  background: var(--gold) !important;
}

.sold-out-badge {
  background: #8c1f1f !important;
}

.low-stock-badge {
  background: #333 !important;
}


/* Hover actions */

.product-hover-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;

  display: flex;
  flex-direction: column;
  gap: 7px;

  opacity: 0;
  transform: translateX(10px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.product-image-wrap:hover
.product-hover-actions {
  opacity: 1;
  transform: translateX(0);
}

.product-hover-actions a {
  width: 34px;
  height: 34px;

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

  color: #111;
  background: rgba(255, 255, 255, 0.96);

  border-radius: 50%;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.14);

  font-size: 17px;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.product-hover-actions a:hover {
  color: #111;
  background: var(--gold);

  transform: translateY(-2px);
}


/* Quick add */

.quick-cart-form {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 6;

  opacity: 0;
  transform: translateY(12px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.product-image-wrap:hover
.quick-cart-form {
  opacity: 1;
  transform: translateY(0);
}

.quick-cart-form button {
  width: 100%;
  min-height: 39px;

  color: #ffffff;
  background: rgba(10, 10, 10, 0.92);

  border: 0;
  border-radius: 5px;

  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.5px;

  transition:
    color 0.25s ease,
    background 0.25s ease;
}

.quick-cart-form button:hover {
  color: #111;
  background: var(--gold);
}


/* Product information */

.professional-product-info {
  padding: 13px 3px 3px;
}

.product-meta-row {
  min-height: 17px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  color: #8a8a8a;

  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.professional-product-info h3 {
  margin: 5px 0 7px;

  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 680;
  line-height: 1.4;
}

.professional-product-info h3 a {
  transition: color 0.25s ease;
}

.professional-product-info h3 a:hover {
  color: var(--gold);
}

.product-price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.product-current-price {
  font-size: 15px;
  font-weight: 850;
}

.product-compare-price {
  color: #999;

  font-size: 10px;
  text-decoration: line-through;
}


/* Color preview */

.product-color-preview {
  min-height: 24px;
  margin-top: 9px;

  display: flex;
  align-items: center;
  gap: 6px;
}

.product-color-dot {
  width: 14px;
  height: 14px;

  background:
    var(--swatch-color, #cccccc);

  border: 2px solid #ffffff;
  border-radius: 50%;

  box-shadow:
    0 0 0 1px #aaa;
}

.product-color-preview small {
  color: var(--muted);
  font-size: 8px;
}


/* Size preview */

.product-size-list {
  min-height: 29px;
  margin-top: 8px;

  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.product-size-list span {
  min-width: 27px;
  height: 25px;
  padding: 0 6px;

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

  color: #333;
  background: #ffffff;

  border: 1px solid #d7d3ca;
  border-radius: 3px;

  font-size: 8px;
  font-weight: 750;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.product-size-list span:hover {
  color: #ffffff;
  background: #111;
  border-color: #111;
}


/* Card footer */

.product-card-footer {
  min-height: 34px;
  margin-top: 8px;
  padding-top: 8px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  border-top: 1px solid var(--line);

  font-size: 8px;
}

.product-stock-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  color: var(--muted);
}

.product-stock-status i {
  width: 6px;
  height: 6px;

  border-radius: 50%;
}

.product-stock-status.available i {
  background: #24983d;
}

.product-stock-status.unavailable i {
  background: #a82929;
}

.product-card-footer > a {
  font-weight: 800;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.product-card-footer > a:hover {
  color: var(--gold);
  transform: translateX(2px);
}


/* Empty state */

.shop-empty-state {
  padding: 75px 20px;

  text-align: center;

  background: #ffffff;

  border: 1px solid var(--line);
  border-radius: 10px;
}

.shop-empty-state > span {
  font-size: 40px;
}

.shop-empty-state h2 {
  margin: 8px 0 7px;
  font-size: 29px;
}

.shop-empty-state p {
  max-width: 420px;
  margin: 0 auto 20px;

  color: var(--muted);
}


/* Mobile controls hidden on desktop */

.shop-mobile-controls {
  display: none;
}

.shop-filter-overlay {
  display: none;
}


/* Large desktop */

@media (min-width: 1350px) {
  .shop-product-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }
}


/* Tablet and mobile filter drawer */

@media (max-width: 950px) {
  .shop-header {
    padding-top: 24px;
  }

  .shop-mobile-controls {
    margin-top: 18px;

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

  .shop-filter-button {
    min-height: 40px;
    padding: 9px 14px;

    color: #ffffff;
    background: #111;

    border: 0;
    border-radius: 5px;

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

  .shop-filter-button span {
    margin-right: 5px;
  }

  .mobile-sort-form select {
    min-height: 40px;
    padding: 8px 9px;

    background: #ffffff;

    border: 1px solid var(--line);
    border-radius: 5px;

    font-size: 11px;
  }

  .shop-layout {
    grid-template-columns: 1fr;
    padding-top: 20px;
  }

  .shop-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -330px;
    z-index: 1600;

    width: min(86vw, 310px);
    height: 100dvh;

    padding: 20px;

    border-radius: 0;

    overflow-y: auto;

    transition: left 0.35s ease;
  }

  .shop-sidebar.active {
    left: 0;
  }

  .shop-filter-close {
    display: block;
  }

  .shop-filter-overlay {
    position: fixed;
    inset: 0;
    z-index: 1550;

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

  .shop-filter-overlay.active {
    display: block;
  }

  .shop-toolbar {
    display: none;
  }

  .shop-product-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}


/* Mobile */

@media (max-width: 700px) {
  .shop-page {
    padding-top: 14px;
  }

  .shop-breadcrumb {
    min-height: 32px;
    font-size: 10px;
  }

  .shop-header {
    padding: 20px 0 17px;

    align-items: flex-start;
  }

  .shop-heading-content h1 {
    font-size: 36px;
  }

  .shop-heading-content p {
    max-width: 260px;
    font-size: 10px;
  }

  .shop-result-count strong {
    font-size: 22px;
  }

  .shop-result-count span {
    font-size: 7px;
  }

  .shop-product-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 22px 10px;
  }

  .product-hover-actions {
    display: none;
  }

  .quick-cart-form {
    position: static;

    margin: 8px 8px 0;

    opacity: 1;
    transform: none;
  }

  .quick-cart-form button {
    min-height: 34px;
    font-size: 8px;
  }

  .product-image-wrap {
    border-radius: 7px;
  }

  .professional-product-info {
    padding: 9px 1px 2px;
  }

  .professional-product-info h3 {
    font-size: 11px;
  }

  .product-current-price {
    font-size: 13px;
  }

  .product-compare-price {
    font-size: 9px;
  }

  .product-size-list span {
    min-width: 24px;
    height: 22px;

    font-size: 7px;
  }

  .product-card-footer {
    font-size: 7px;
  }
}


/* Very small phone */

@media (max-width: 390px) {
  .shop-heading-content p {
    display: none;
  }

  .shop-product-grid {
    gap-inline: 8px;
  }

  .product-color-preview {
    display: none;
  }
}
/* ==================================================
   PRODUCT CARD V3 — ADDITIVE FEATURES
================================================== */

.product-wishlist-button {
  width: 34px;
  height: 34px;
  padding: 0;

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

  color: #111;
  background: rgba(255, 255, 255, 0.96);

  border: 0;
  border-radius: 50%;

  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.14);

  font-size: 19px;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.product-wishlist-button:hover,
.product-wishlist-button.active {
  color: #111;
  background: var(--gold);
  transform: translateY(-2px);
}

.product-wishlist-button.active span {
  font-size: 0;
}

.product-wishlist-button.active span::before {
  content: "♥";
  font-size: 19px;
}

.product-rating-row {
  min-height: 22px;
  margin-bottom: 6px;

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

.product-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.product-rating span {
  color: #d5a928;
  font-size: 12px;
}

.product-rating strong {
  color: #555;
  font-size: 10px;
}

.product-sold-count {
  color: #8b8b8b;
  font-size: 9px;
}

.product-service-badges {
  min-height: 24px;
  margin-top: 8px;

  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.product-service-badges span {
  padding: 4px 7px;

  color: #57503d;
  background: #f4efdf;

  border: 1px solid rgba(199, 166, 70, 0.25);
  border-radius: 999px;

  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .product-wishlist-button {
    width: 31px;
    height: 31px;
  }

  .product-rating-row {
    min-height: 19px;
  }

  .product-rating span {
    font-size: 10px;
  }

  .product-rating strong,
  .product-sold-count {
    font-size: 7px;
  }

  .product-service-badges span {
    padding: 3px 5px;
    font-size: 6px;
  }
}
/* ==================================================
   TTT OUTFIT — COMPLETE PRODUCT PAGE V4
================================================== */

.professional-product-page {
  background:
    radial-gradient(
      circle at 8% 4%,
      rgba(199, 166, 70, 0.07),
      transparent 26%
    ),
    var(--bg);
}

.product-breadcrumb {
  min-height: 38px;
  margin-bottom: 25px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  color: var(--muted);
  font-size: 11px;
}

.product-breadcrumb a:hover {
  color: var(--gold);
}

.product-breadcrumb strong {
  color: var(--ink);
}

.product-detail-layout {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: start;
  gap: 48px;
}

.product-gallery {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 13px;
}

.product-thumbnail-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.product-thumbnail {
  width: 100%;
  padding: 0;

  overflow: hidden;

  background: #ecebe7;

  border: 2px solid transparent;
  border-radius: 7px;

  transition:
    border-color 0.25s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

.product-thumbnail:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.product-thumbnail.active {
  border-color: var(--gold);
}

.product-thumbnail img {
  width: 100%;
  aspect-ratio: 4 / 5;

  display: block;
  object-fit: cover;
}

.product-main-image-wrap {
  position: relative;

  overflow: hidden;

  background: #ecebe7;
  border-radius: 12px;

  cursor: zoom-in;
}

.product-main-image-wrap .main-image {
  width: 100%;
  aspect-ratio: 4 / 5;

  display: block;
  object-fit: cover;

  transition:
    opacity 0.22s ease,
    transform 0.6s
      cubic-bezier(0.22, 1, 0.36, 1);
}

.product-main-image-wrap:hover .main-image {
  transform: scale(1.035);
}

.product-main-image-wrap .main-image.changing {
  opacity: 0.35;
}

.product-gallery-badges {
  position: absolute;
  top: 13px;
  left: 13px;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-gallery-badges span {
  width: max-content;
  padding: 6px 9px;

  border-radius: 4px;

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.product-detail-sale {
  color: #111;
  background: var(--gold);
}

.product-detail-low-stock {
  color: #fff;
  background: #8f1d1d;
}

.product-zoom-button {
  position: absolute;
  right: 14px;
  bottom: 14px;

  width: 40px;
  height: 40px;

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

  color: #111;
  background: rgba(255, 255, 255, 0.95);

  border: 0;
  border-radius: 50%;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.18);

  font-size: 18px;
}

.product-zoom-button:hover {
  background: var(--gold);
}

.product-detail-info {
  position: sticky;
  top: 90px;
}

.product-title-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.product-detail-info h1 {
  margin: 0 0 11px;

  font-size: clamp(38px, 5vw, 58px);
  line-height: 0.98;
  letter-spacing: -1px;
}

.product-page-wishlist {
  width: 42px;
  height: 42px;
  padding: 0;

  flex: 0 0 42px;

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

  color: #111;
  background: #fff;

  border: 1px solid var(--line);
  border-radius: 50%;

  font-size: 23px;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.product-page-wishlist:hover,
.product-page-wishlist.active {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.product-social-proof {
  margin-bottom: 16px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;

  font-size: 10px;
}

.product-detail-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rating-star {
  color: #d5a928;
  font-size: 16px;
}

.product-detail-rating strong {
  font-size: 12px;
}

.product-detail-rating small,
.product-sold-proof {
  color: var(--muted);
}

.product-viewing-proof {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: #4e4e4e;
}

.product-viewing-proof i {
  width: 7px;
  height: 7px;

  background: #27943f;
  border-radius: 50%;

  box-shadow:
    0 0 0 4px rgba(39, 148, 63, 0.12);

  animation:
    productViewingPulse 1.8s infinite;
}

@keyframes productViewingPulse {
  50% {
    box-shadow:
      0 0 0 7px rgba(39, 148, 63, 0);
  }
}

.product-detail-price {
  margin-bottom: 20px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.product-detail-price > strong {
  font-size: 26px;
}

.product-detail-price del {
  color: #999;
  font-size: 14px;
}

.product-price-saving {
  padding: 5px 8px;

  color: #6f5510;
  background: #f4edda;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 800;
}

.product-description {
  color: var(--muted);
  line-height: 1.75;
}

.product-meta {
  margin: 21px 0;
  padding: 14px 0;

  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  font-size: 11px;
}

.product-option-group {
  margin-bottom: 22px;
}

.product-option-heading {
  margin-bottom: 11px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  font-size: 12px;
}

.product-option-heading > span {
  color: var(--gold);
  font-weight: 800;
}

.product-color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.product-color-option {
  padding: 5px 10px 5px 5px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  color: #333;
  background: #fff;

  border: 1px solid var(--line);
  border-radius: 999px;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.product-color-option:hover {
  transform: translateY(-2px);
}

.product-color-option.active {
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px var(--gold);
}

.product-color-option > span {
  width: 27px;
  height: 27px;

  border: 1px solid #aaa;
  border-radius: 50%;
}

.product-color-option small {
  font-size: 10px;
  font-weight: 700;
}

.size-guide-open {
  padding: 0;

  color: #69561d;
  background: transparent;

  border: 0;

  font-size: 10px;
  font-weight: 800;
}

.size-guide-open:hover {
  color: var(--gold);
}

.product-size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-size-option {
  min-width: 46px;
  height: 41px;
  padding: 0 9px;

  color: #222;
  background: #fff;

  border: 1px solid #cbc7bd;
  border-radius: 4px;

  font-size: 11px;
  font-weight: 750;

  transition:
    color 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease;
}

.product-size-option:hover,
.product-size-option.active {
  color: #fff;
  background: #111;
  border-color: #111;
}

.product-stock-panel {
  margin-bottom: 18px;
  padding: 13px;

  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.product-stock-message {
  display: flex;
  align-items: center;
  gap: 7px;

  font-size: 11px;
  font-weight: 750;
}

#variantStockDot {
  width: 8px;
  height: 8px;

  background: #27943f;
  border-radius: 50%;
}

#variantStockDot.out-of-stock {
  background: #a82929;
}

.product-stock-track {
  height: 5px;
  margin: 10px 0 7px;

  overflow: hidden;

  background: #e9e6de;
  border-radius: 999px;
}

.product-stock-track span {
  height: 100%;

  display: block;

  background:
    linear-gradient(
      90deg,
      #b28b26,
      var(--gold)
    );

  border-radius: inherit;

  transition: width 0.35s ease;
}

.product-stock-panel > small {
  color: var(--muted);
  font-size: 9px;
}

.product-buy-row {
  display: grid;
  grid-template-columns: 135px minmax(0, 1fr);
  gap: 11px;
}

.quantity-control {
  display: grid;
  grid-template-columns: 38px 1fr 38px;

  overflow: hidden;

  background: #fff;

  border: 1px solid var(--line);
  border-radius: 5px;
}

.quantity-control button,
.quantity-control input {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: center;
}

.quantity-control button:hover {
  background: #eee9dc;
}

.quantity-control input {
  min-width: 0;
  outline: 0;
  appearance: textfield;
}

.product-add-button {
  width: 100%;
}

.product-buy-now-button {
  width: 100%;
  min-height: 45px;
  margin-top: 10px;

  color: #fff;
  background: #111;

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

  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.6px;
  text-transform: uppercase;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.product-buy-now-button:hover {
  color: #111;
  background: var(--gold);
  border-color: var(--gold);

  transform: translateY(-2px);
}

.product-buy-now-button:disabled,
.product-add-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.product-delivery-panel {
  margin-top: 25px;

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

  border: 1px solid var(--line);
  border-radius: 9px;
}

.product-delivery-item {
  min-height: 82px;
  padding: 13px;

  display: flex;
  align-items: flex-start;
  gap: 9px;

  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.product-delivery-item:nth-child(2n) {
  border-right: 0;
}

.product-delivery-item:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.product-delivery-item > span {
  color: var(--gold);
  font-size: 17px;
}

.product-delivery-item strong,
.product-delivery-item small {
  display: block;
}

.product-delivery-item strong {
  font-size: 10px;
}

.product-delivery-item small {
  margin-top: 4px;

  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
}

.product-trust-grid {
  margin-top: 12px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.product-trust-grid span {
  min-height: 38px;
  padding: 7px;

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

  color: #655727;
  background: #f4efdf;

  border-radius: 5px;

  text-align: center;
  font-size: 7px;
  font-weight: 850;
  text-transform: uppercase;
}

.product-share-section {
  margin-top: 23px;
  padding-top: 18px;

  border-top: 1px solid var(--line);
}

.product-share-section > strong {
  display: block;
  margin-bottom: 9px;

  font-size: 11px;
}

.product-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.product-share-buttons a,
.product-share-buttons button {
  min-height: 34px;
  padding: 7px 11px;

  color: #222;
  background: #fff;

  border: 1px solid var(--line);
  border-radius: 999px;

  font-size: 9px;
  font-weight: 750;
}

.product-share-buttons a:hover,
.product-share-buttons button:hover {
  background: #eee9dc;
}

#copyLinkMessage {
  display: block;
  min-height: 17px;
  margin-top: 7px;

  color: #27833d;
  font-size: 9px;
}

.product-accordion {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}

.product-accordion-item {
  border-bottom: 1px solid var(--line);
}

.product-accordion-item > button {
  width: 100%;
  min-height: 48px;
  padding: 11px 1px;

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

  color: #222;
  background: transparent;

  border: 0;

  text-align: left;
  font-size: 11px;
  font-weight: 800;
}

.product-accordion-item > button strong {
  color: var(--gold);
  font-size: 18px;
}

.product-accordion-content {
  max-height: 0;

  overflow: hidden;

  color: var(--muted);

  font-size: 11px;
  line-height: 1.65;

  transition:
    max-height 0.35s ease,
    padding 0.35s ease;
}

.product-accordion-item.active
.product-accordion-content {
  max-height: 400px;
  padding-bottom: 15px;
}

.product-accordion-content p {
  margin: 0 0 7px;
}


/* Image modal */

.product-image-modal,
.size-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;

  padding: 28px;

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

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

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.28s ease,
    visibility 0.28s ease;
}

.product-image-modal.active,
.size-guide-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.product-image-modal > img {
  width: auto;
  max-width: min(850px, 87vw);
  max-height: 90vh;

  object-fit: contain;

  border-radius: 7px;

  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.5);
}

.product-modal-close,
.size-guide-close {
  position: absolute;
  top: 18px;
  right: 22px;

  width: 43px;
  height: 43px;

  color: #fff;
  background: rgba(255, 255, 255, 0.13);

  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;

  font-size: 27px;
}

.product-modal-arrow {
  position: fixed;
  top: 50%;

  width: 46px;
  height: 46px;

  color: #fff;
  background: rgba(255, 255, 255, 0.12);

  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;

  font-size: 30px;

  transform: translateY(-50%);
}

.product-modal-arrow.previous {
  left: 22px;
}

.product-modal-arrow.next {
  right: 22px;
}

.product-modal-arrow:hover,
.product-modal-close:hover {
  color: #111;
  background: var(--gold);
  border-color: var(--gold);
}


/* Size guide */

.size-guide-modal {
  background: rgba(0, 0, 0, 0.72);
}

.size-guide-dialog {
  position: relative;

  width: min(720px, 94vw);
  max-height: 90vh;
  padding: 29px;

  overflow-y: auto;

  background: #fff;
  border-radius: 12px;
}

.size-guide-dialog .size-guide-close {
  position: absolute;
  top: 12px;
  right: 12px;

  color: #111;
  background: #f0ede5;

  border-color: var(--line);
}

.size-guide-dialog h2 {
  margin: 0 0 19px;
  font-size: 34px;
}

.size-guide-table-wrap {
  overflow-x: auto;
}

.size-guide-table {
  min-width: 570px;
}

.size-guide-dialog > p {
  margin: 15px 0 0;

  color: var(--muted);
  font-size: 10px;
}


/* Related and recently viewed */

.related-products-section,
.recently-viewed-section {
  margin-top: 72px;
}

.related-products-section .shop-product-grid {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

.recently-viewed-grid {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 13px;
}

.recent-product-card {
  overflow: hidden;

  background: #fff;

  border: 1px solid var(--line);
  border-radius: 7px;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.recent-product-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.09);
}

.recent-product-card img {
  width: 100%;
  aspect-ratio: 4 / 5;

  display: block;
  object-fit: cover;
}

.recent-product-card div {
  padding: 10px;
}

.recent-product-card strong,
.recent-product-card span {
  display: block;
}

.recent-product-card strong {
  overflow: hidden;

  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recent-product-card span {
  margin-top: 4px;

  font-size: 11px;
  font-weight: 850;
}


/* Tablet */

@media (max-width: 950px) {
  .product-detail-layout {
    grid-template-columns: 1fr;
  }

  .product-detail-info {
    position: static;
  }

  .related-products-section
  .shop-product-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .recently-viewed-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}


/* Mobile */

@media (max-width: 700px) {
  .professional-product-page {
    padding-top: 24px;
  }

  .product-breadcrumb {
    margin-bottom: 15px;
    font-size: 9px;
  }

  .product-gallery {
    grid-template-columns: 1fr;
  }

  .product-main-image-wrap {
    order: 1;
    border-radius: 8px;
  }

  .product-thumbnail-list {
    order: 2;

    flex-direction: row;
    overflow-x: auto;

    padding-bottom: 4px;
  }

  .product-thumbnail {
    width: 63px;
    flex: 0 0 63px;
  }

  .product-detail-layout {
    gap: 27px;
  }

  .product-detail-info h1 {
    font-size: 35px;
  }

  .product-social-proof {
    gap: 7px 11px;
  }

  .product-buy-row {
    grid-template-columns: 112px 1fr;
  }

  .product-delivery-panel {
    grid-template-columns: 1fr;
  }

  .product-delivery-item {
    min-height: 70px;

    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .product-delivery-item:last-child {
    border-bottom: 0;
  }

  .product-trust-grid {
    grid-template-columns: 1fr 1fr;
  }

  .product-image-modal,
  .size-guide-modal {
    padding: 11px;
  }

  .product-image-modal > img {
    max-width: 96vw;
    max-height: 83vh;
  }

  .product-modal-arrow {
    width: 38px;
    height: 38px;

    font-size: 25px;
  }

  .product-modal-arrow.previous {
    left: 7px;
  }

  .product-modal-arrow.next {
    right: 7px;
  }

  .product-modal-close {
    top: 9px;
    right: 9px;

    width: 38px;
    height: 38px;
  }

  .size-guide-dialog {
    padding: 24px 16px 19px;
  }

  .size-guide-dialog h2 {
    font-size: 27px;
  }

  .related-products-section,
  .recently-viewed-section {
    margin-top: 49px;
  }

  .related-products-section
  .shop-product-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .recently-viewed-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}
.product-extra-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.extra-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;

    padding:5px 10px;

    font-size:11px;
    font-weight:600;

    color:#555;

    background:#f8f8f8;

    border:1px solid #e5e5e5;

    border-radius:30px;

    transition:.25s;
}

.extra-badge:hover{
    background:#111;
    color:#fff;
    border-color:#111;
}
/* =========================================
   HOME PAGE PRODUCT GRID SIZE FIX
========================================= */

.products-section .grid,
.home-products-grid,
.featured-products-grid {
  display: grid !important;
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.products-section .professional-product-card,
.home-products-grid .professional-product-card,
.featured-products-grid .professional-product-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.products-section .product-image-wrap,
.home-products-grid .product-image-wrap,
.featured-products-grid .product-image-wrap {
  width: 100% !important;
}

.products-section .product-image-link img,
.home-products-grid .product-image-link img,
.featured-products-grid .product-image-link img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
}


/* Tablet */

@media (max-width: 950px) {
  .products-section .grid,
  .home-products-grid,
  .featured-products-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }
}


/* Mobile */

@media (max-width: 700px) {
  .products-section .grid,
  .home-products-grid,
  .featured-products-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 16px 10px !important;
  }
}


/* Very small phone */

@media (max-width: 380px) {
  .products-section .grid,
  .home-products-grid,
  .featured-products-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}
/* =========================================
   PROFESSIONAL MY ORDERS PAGE
========================================= */

.orders-page-section {
  background:
    radial-gradient(
      circle at top right,
      rgba(199, 166, 70, 0.09),
      transparent 30%
    ),
    #f7f5f0;
}

.orders-page-header {
  margin-bottom: 30px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;
}

.orders-page-header h1 {
  margin: 0;

  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
}

.orders-page-header p {
  max-width: 590px;
  margin: 13px 0 0;

  color: var(--muted);

  font-size: 15px;
}

.orders-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* EMPTY STATE */

.orders-empty-state {
  max-width: 680px;
  margin: 20px auto;
  padding: 65px 30px;

  text-align: center;

  background: #ffffff;

  border: 1px solid var(--line);
  border-radius: 18px;

  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.07);
}

.orders-empty-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 19px;

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

  background:
    linear-gradient(
      145deg,
      #f7edcc,
      #d7b858
    );

  border-radius: 50%;

  font-size: 33px;
}

.orders-empty-state h2 {
  margin: 0 0 10px;

  font-size: 32px;
}

.orders-empty-state p {
  margin: 0 auto 23px;

  color: var(--muted);
}


/* ORDER LIST */

.professional-orders-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}


/* ORDER CARD */

.professional-order-card {
  overflow: hidden;

  background: #ffffff;

  border: 1px solid #e5dfd2;
  border-radius: 18px;

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

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.professional-order-card:hover {
  border-color: rgba(199, 166, 70, 0.68);

  transform: translateY(-4px);

  box-shadow:
    0 25px 58px rgba(0, 0, 0, 0.11);
}


/* ORDER HEADER */

.professional-order-header {
  padding: 18px 21px;

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

  gap: 15px;

  color: #ffffff;

  background:
    linear-gradient(
      120deg,
      #0a0a0a,
      #201b10
    );

  border-bottom:
    2px solid var(--gold);
}

.order-label {
  display: block;

  margin-bottom: 3px;

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

  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.order-number-link {
  color: #ffffff;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: 20px;
  font-weight: 750;
}

.order-number-link:hover {
  color: var(--gold);
}


/* STATUS */

.professional-order-status {
  min-height: 32px;
  padding: 7px 12px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;
}

.professional-order-status i {
  width: 7px;
  height: 7px;

  background: currentColor;

  border-radius: 50%;
}

.order-status-pending {
  color: #7d5900;
  background: #fff1bd;
}

.order-status-confirmed {
  color: #0b5a31;
  background: #dff8ea;
}

.order-status-processing {
  color: #084d8b;
  background: #ddecff;
}

.order-status-shipped {
  color: #4d3786;
  background: #ece5ff;
}

.order-status-delivered {
  color: #12613a;
  background: #d8f7e7;
}

.order-status-cancelled,
.order-status-returned {
  color: #922a2a;
  background: #ffe2e2;
}


/* BODY */

.professional-order-body {
  padding: 21px;
}

.order-information-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 20px;
}

.order-info-item {
  min-width: 0;
  padding: 13px;

  display: flex;
  align-items: center;
  gap: 10px;

  background: #faf8f3;

  border: 1px solid #eee9de;
  border-radius: 11px;
}

.order-info-icon {
  width: 34px;
  height: 34px;

  flex-shrink: 0;

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

  background: #f0e5c2;

  border-radius: 9px;

  font-size: 15px;
}

.order-info-item small,
.order-info-item strong {
  display: block;
}

.order-info-item small {
  color: #8a8a8a;

  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.order-info-item strong {
  margin-top: 2px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 12px;
}


/* PRODUCT PREVIEW */

.order-products-preview {
  padding: 14px;

  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  background: #fffdf8;

  border: 1px solid #ede7dc;
  border-radius: 12px;
}

.order-preview-item {
  min-width: 220px;
  flex: 1;

  display: flex;
  align-items: center;
  gap: 10px;
}

.order-preview-item img {
  width: 55px;
  height: 68px;

  flex-shrink: 0;

  object-fit: cover;

  background: #eeeeee;

  border-radius: 8px;
}

.order-preview-item strong,
.order-preview-item small {
  display: block;
}

.order-preview-item strong {
  font-size: 12px;
  line-height: 1.35;
}

.order-preview-item small {
  margin-top: 4px;

  color: var(--muted);

  font-size: 10px;
}

.order-more-items {
  min-height: 68px;
  padding: 10px 15px;

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

  color: #6c5415;
  background: #f4ead0;

  border-radius: 9px;

  font-size: 11px;
  font-weight: 750;
}


/* PAYMENT SUMMARY */

.order-payment-summary {
  margin-top: 17px;
  padding-top: 17px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  border-top: 1px dashed #ddd6c8;
}

.professional-payment-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 10px;
}

.payment-status-pending {
  color: #785a0c;
  background: #fff3c9;
}

.payment-status-submitted {
  color: #174b7a;
  background: #e3f1ff;
}

.payment-status-paid {
  color: #0c6438;
  background: #ddf8e9;
}

.payment-status-rejected,
.payment-status-refunded {
  color: #8e2727;
  background: #ffe3e3;
}

.order-date-time {
  display: block;

  margin-top: 7px;

  color: #999999;

  font-size: 10px;
}

.order-total-area {
  text-align: right;
}

.order-total-area small,
.order-total-area strong {
  display: block;
}

.order-total-area small {
  color: var(--muted);

  font-size: 10px;
  font-weight: 700;
}

.order-total-area strong {
  margin-top: 3px;

  font-size: 25px;
  font-weight: 900;
}


/* FOOTER */

.professional-order-footer {
  padding: 15px 21px;

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

  gap: 20px;

  background: #faf8f2;

  border-top: 1px solid #eae4d9;
}

.order-footer-message {
  color: #686868;

  font-size: 11px;
}

.order-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-track-button {
  padding-bottom: 3px;

  color: #222222;

  border-bottom:
    1px solid var(--gold);

  font-size: 11px;
  font-weight: 750;
}

.order-track-button:hover {
  color: var(--gold);
}

.order-details-button {
  min-height: 37px;
  padding: 8px 14px;

  font-size: 11px;
}


/* TABLET */

@media (max-width: 950px) {
  .order-information-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* MOBILE */

@media (max-width: 700px) {
  .orders-page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .orders-header-actions {
    width: 100%;
  }

  .orders-header-actions .btn {
    flex: 1;
  }

  .professional-order-header {
    align-items: flex-start;
  }

  .order-number-link {
    font-size: 16px;
  }

  .professional-order-body {
    padding: 15px;
  }

  .order-information-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .order-info-item {
    padding: 10px;
  }

  .order-info-icon {
    display: none;
  }

  .order-products-preview {
    flex-direction: column;
  }

  .order-preview-item {
    min-width: 0;
    width: 100%;
  }

  .order-payment-summary {
    align-items: flex-start;
  }

  .professional-order-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-card-actions {
    width: 100%;
    justify-content: space-between;
  }

  .order-details-button {
    flex: 1;
  }
}


/* SMALL MOBILE */

@media (max-width: 430px) {
  .order-information-grid {
    grid-template-columns: 1fr;
  }

  .professional-order-header {
    flex-direction: column;
  }

  .order-payment-summary {
    flex-direction: column;
  }

  .order-total-area {
    text-align: left;
  }
}
.track-form{

display:grid;

gap:18px;

max-width:520px;

margin:40px auto;

}

.track-form input{

padding:15px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

}

.track-form button{

height:52px;

}
/* =========================================
   PROFESSIONAL WISHLIST
========================================= */

.wishlist-nav-count {
  min-width: 23px;
  height: 23px;
  padding: 0 6px;

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

  color: #111111;
  background: var(--gold);

  border-radius: 999px;

  font-size: 10px;
  font-weight: 850;
}

.product-wishlist-button {
  width: 38px;
  height: 38px;
  padding: 0;

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

  color: #111111;
  background: rgba(255, 255, 255, 0.94);

  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;

  font-size: 22px;
  line-height: 1;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.11);

  transition:
    color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}

.product-wishlist-button:hover {
  color: #ffffff;
  background: #111111;

  transform: translateY(-2px);
}

.product-wishlist-button.active {
  color: #ffffff;
  background: #c43838;
  border-color: #c43838;
}

.product-wishlist-button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.wishlist-page-section {
  min-height: 65vh;

  background:
    radial-gradient(
      circle at top right,
      rgba(199, 166, 70, 0.1),
      transparent 30%
    ),
    #f7f5f0;
}

.wishlist-page-header {
  margin-bottom: 30px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 25px;
}

.wishlist-page-header h1 {
  margin: 0;

  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
}

.wishlist-page-header p {
  max-width: 590px;
  margin: 13px 0 0;

  color: var(--muted);
}

.wishlist-product-grid {
  align-items: start;
}

.wishlist-card-wrapper {
  min-width: 0;
}

.guest-wishlist-notice {
  margin-bottom: 25px;
  padding: 17px 20px;

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

  gap: 20px;

  background: #fff8df;

  border: 1px solid #e8d59a;
  border-radius: 13px;
}

.guest-wishlist-notice strong,
.guest-wishlist-notice p {
  display: block;
}

.guest-wishlist-notice p {
  margin: 5px 0 0;

  color: #716642;
  font-size: 12px;
}

.wishlist-empty-state {
  grid-column: 1 / -1;

  max-width: 680px;
  width: 100%;
  margin: 20px auto;
  padding: 65px 30px;

  text-align: center;

  background: #ffffff;

  border: 1px solid var(--line);
  border-radius: 18px;

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

.wishlist-empty-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;

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

  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      #111111,
      #3a2f13
    );

  border: 2px solid var(--gold);
  border-radius: 50%;

  font-size: 37px;
}

.wishlist-empty-state h2 {
  margin: 0 0 10px;

  font-size: 31px;
}

.wishlist-empty-state p {
  margin: 0 0 23px;

  color: var(--muted);
}

@media (max-width: 700px) {
  .wishlist-page-header,
  .guest-wishlist-notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .wishlist-page-header .btn,
  .guest-wishlist-notice .btn {
    width: 100%;
  }

  .product-wishlist-button {
    width: 34px;
    height: 34px;

    font-size: 19px;
  }
}
/* =========================================
   PREMIUM NAV ICONS WITH TOP BADGES
========================================= */

.mobile-icon-box {
  position: relative;

  width: 36px;
  height: 36px;
  flex: 0 0 36px;

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

  color: #202020;
  background: #f8f4e8;

  border: 1px solid rgba(199, 166, 70, 0.35);
  border-radius: 11px;

  font-size: 18px;
  line-height: 1;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.mobile-icon-box i {
  display: block;
  line-height: 1;
}


/* Badge positioned over icon */

.mobile-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 3;

  min-width: 20px;
  height: 20px;
  padding: 0 5px;

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

  border: 2px solid #ffffff;
  border-radius: 999px;

  font-family: Inter, Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}


/* Wishlist badge */

.wishlist-badge {
  color: #ffffff;
  background: #e23b45;
}


/* Cart badge */

.cart-badge {
  color: #111111;
  background: #d9b84e;
}


/* Nav item alignment */

.nav-item-left {
  min-width: 0;

  display: inline-flex;
  align-items: center;
  gap: 10px;
}


/* Hover and active state */

.nav-links > a:hover .mobile-icon-box,
.nav-links > a.active-nav .mobile-icon-box {
  color: #111111;
  background: var(--gold);

  border-color: var(--gold);

  transform: translateY(-2px);

  box-shadow:
    0 8px 18px rgba(199, 166, 70, 0.3);
}


/* Desktop: compact premium icons */

@media (min-width: 951px) {
  .mobile-icon-box {
    width: 31px;
    height: 31px;
    flex-basis: 31px;

    border-radius: 9px;
    font-size: 15px;
  }

  .mobile-badge {
    top: -8px;
    right: -8px;

    min-width: 18px;
    height: 18px;
    padding: 0 4px;

    font-size: 9px;
  }

  .nav-item-left {
    gap: 7px;
  }
}


/* Mobile drawer premium style */

@media (max-width: 950px) {
  .nav-links {
    color: #ffffff;

    background:
      radial-gradient(
        circle at top right,
        rgba(199, 166, 70, 0.2),
        transparent 32%
      ),
      linear-gradient(
        155deg,
        #151515 0%,
        #211c0f 52%,
        #090909 100%
      );
  }

  .nav-links > a {
    min-height: 62px;
    padding: 10px 14px;

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

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;

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

    transition:
      background 0.25s ease,
      border-color 0.25s ease,
      transform 0.25s ease;
  }

  .nav-links > a:hover,
  .nav-links > a.active-nav {
    color: #ffffff;

    background: rgba(199, 166, 70, 0.13);
    border-color: rgba(199, 166, 70, 0.5);

    transform: translateX(4px);
  }

  .mobile-icon-box {
    width: 44px;
    height: 44px;
    flex-basis: 44px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(199, 166, 70, 0.38);
    border-radius: 13px;

    font-size: 20px;
  }

  .nav-links > a:hover .mobile-icon-box,
  .nav-links > a.active-nav .mobile-icon-box {
    color: #111111;
    background: var(--gold);

    transform: scale(1.04);
  }

  .mobile-badge {
    border-color: #17150f;
  }

  .nav-arrow {
    margin-left: auto;

    color: rgba(255, 255, 255, 0.45);
    font-size: 22px;
  }
}
/* =========================================
   PREMIUM AUTHENTICATION PAGE
========================================= */

.auth-page-section {
  min-height: calc(100vh - 100px);
  padding: 65px 0;

  display: flex;
  align-items: center;

  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(199, 166, 70, 0.13),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(0, 0, 0, 0.08),
      transparent 30%
    ),
    #f5f2eb;
}

.auth-page-container {
  width: min(1220px, 92%);
}

.auth-premium-card {
  min-height: 720px;

  display: grid;
  grid-template-columns:
    minmax(350px, 0.9fr)
    minmax(500px, 1.25fr);

  overflow: hidden;

  background: #ffffff;

  border: 1px solid #e2ddd1;
  border-radius: 24px;

  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.14);
}


/* BRAND PANEL */

.auth-brand-panel {
  position: relative;
  min-width: 0;
  padding: 55px 48px;

  overflow: hidden;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      rgba(0, 0, 0, 0.15),
      rgba(199, 166, 70, 0.08)
    ),
    linear-gradient(
      145deg,
      #090909 0%,
      #211c0e 58%,
      #0b0b0b 100%
    );
}

.auth-brand-content {
  position: relative;
  z-index: 2;

  height: 100%;

  display: flex;
  flex-direction: column;
}

.auth-logo-link {
  width: fit-content;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: #ffffff;

  font-size: 21px;
  font-weight: 800;
  letter-spacing: 1px;
}

.auth-logo-link img {
  width: 50px;
  height: 50px;

  object-fit: cover;

  border: 2px solid var(--gold);
  border-radius: 50%;
}

.auth-logo-link strong {
  color: var(--gold);
}

.auth-kicker {
  margin-top: auto;
  margin-bottom: 16px;

  color: var(--gold);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.2px;
}

.auth-brand-panel h1 {
  max-width: 440px;
  margin: 0;

  color: #ffffff;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: clamp(46px, 5vw, 72px);
  line-height: 0.98;
}

.auth-brand-panel h1 em {
  display: block;

  color: var(--gold);

  font-style: normal;
}

.auth-brand-panel > div > p,
.auth-brand-content > p {
  max-width: 450px;
  margin: 22px 0 30px;

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

  font-size: 14px;
  line-height: 1.75;
}

.auth-benefit-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-benefit-list > div {
  padding: 13px;

  display: flex;
  align-items: center;
  gap: 12px;

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

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

  border-radius: 13px;

  backdrop-filter: blur(10px);
}

.auth-benefit-list > div > span {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;

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

  color: #111111;
  background: var(--gold);

  border-radius: 11px;

  font-size: 18px;
}

.auth-benefit-list strong,
.auth-benefit-list small {
  display: block;
}

.auth-benefit-list strong {
  color: #ffffff;
  font-size: 12px;
}

.auth-benefit-list small {
  margin-top: 3px;

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

  font-size: 10px;
}

.auth-decoration {
  position: absolute;

  border: 1px solid rgba(199, 166, 70, 0.18);
  border-radius: 50%;
}

.auth-decoration-one {
  width: 330px;
  height: 330px;

  top: -160px;
  right: -180px;
}

.auth-decoration-two {
  width: 210px;
  height: 210px;

  right: -80px;
  bottom: -100px;
}


/* FORM PANEL */

.auth-form-panel {
  padding: 50px 58px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fdfbf7
    );
}

.auth-form-header {
  margin-bottom: 28px;
}

.auth-form-header h2 {
  margin: 7px 0 8px;

  font-size: clamp(32px, 4vw, 46px);
}

.auth-form-header p {
  margin: 0;

  color: var(--muted);
  font-size: 13px;
}


/* TABS */

.auth-tabs {
  margin-bottom: 26px;
  padding: 5px;

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

  background: #f0ede6;

  border: 1px solid #e4dfd4;
  border-radius: 13px;
}

.auth-tab-button {
  min-height: 45px;

  color: #777777;
  background: transparent;

  border: 0;
  border-radius: 9px;

  font-size: 13px;
  font-weight: 800;

  cursor: pointer;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.auth-tab-button.active {
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #111111,
      #2e260e
    );

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.16);
}

.auth-tab-panel {
  display: none;
}

.auth-tab-panel.active {
  display: block;

  animation:
    authPanelFade 0.3s ease;
}

@keyframes authPanelFade {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

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


/* FORM */

.premium-auth-form {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.auth-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.premium-auth-form .field {
  margin: 0;
}

.premium-auth-form label {
  display: block;
  margin-bottom: 7px;

  color: #2b2b2b;

  font-size: 11px;
  font-weight: 750;
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.auth-label-row a {
  color: #8b6f22;

  font-size: 10px;
  font-weight: 750;
}

.auth-label-row a:hover {
  color: #111111;
}

.auth-input-wrap {
  position: relative;
}

.auth-input-wrap > i {
  position: absolute;

  left: 14px;
  top: 50%;

  color: #93886f;

  font-size: 15px;

  transform: translateY(-50%);
}

.auth-input-wrap input {
  width: 100%;
  min-height: 49px;
  padding:
    11px 45px
    11px 42px;

  color: #111111;
  background: #ffffff;

  border: 1px solid #dcd7cd;
  border-radius: 10px;

  outline: none;

  font-size: 13px;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.auth-input-wrap input:focus {
  background: #fffefb;
  border-color: var(--gold);

  box-shadow:
    0 0 0 4px
    rgba(199, 166, 70, 0.13);
}

.auth-password-toggle {
  position: absolute;

  right: 9px;
  top: 50%;

  width: 34px;
  height: 34px;
  padding: 0;

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

  color: #858585;
  background: transparent;

  border: 0;
  border-radius: 8px;

  transform: translateY(-50%);
  cursor: pointer;
}

.auth-password-toggle:hover {
  color: #111111;
  background: #f2eee5;
}

.auth-remember-row,
.auth-terms-row {
  margin: 0;

  display: flex !important;
  align-items: flex-start;
  gap: 8px;

  color: #666666 !important;

  font-size: 10px !important;
  line-height: 1.5;
}

.auth-remember-row input,
.auth-terms-row input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;

  accent-color: var(--gold);
}

.auth-submit-button {
  min-height: 50px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-size: 13px;
}

.auth-submit-button i {
  transition: transform 0.25s ease;
}

.auth-submit-button:hover i {
  transform: translateX(4px);
}


/* DIVIDER & GOOGLE */

.auth-divider {
  position: relative;

  margin: 25px 0;

  text-align: center;
}

.auth-divider::before {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;

  height: 1px;

  background: #e3ded4;
}

.auth-divider span {
  position: relative;

  padding: 0 12px;

  color: #999999;
  background: #fdfbf7;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.auth-google-button {
  min-height: 48px;
  padding: 10px 16px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  color: #222222;
  background: #ffffff;

  border: 1px solid #dcd7cd;
  border-radius: 10px;

  font-size: 12px;
  font-weight: 750;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.auth-google-button:hover {
  color: #111111;
  background: #faf7f0;
  border-color: var(--gold);

  transform: translateY(-2px);
}

.google-logo {
  width: 26px;
  height: 26px;

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

  color: #4285f4;
  background: #ffffff;

  border: 1px solid #e1e1e1;
  border-radius: 50%;

  font-size: 14px;
  font-weight: 900;
}

.auth-switch-message {
  margin: 20px 0 0;

  color: #777777;

  text-align: center;
  font-size: 11px;
}

.auth-switch-message button {
  padding: 0;

  color: #8b6f22;
  background: transparent;

  border: 0;

  font: inherit;
  font-weight: 800;

  cursor: pointer;
}

.auth-switch-message button:hover {
  color: #111111;
  text-decoration: underline;
}


/* OPTIONAL ADDRESS */

.auth-optional-details {
  overflow: hidden;

  background: #faf8f3;

  border: 1px solid #e4dfd4;
  border-radius: 10px;
}

.auth-optional-details summary {
  padding: 13px 15px;

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

  color: #444444;

  font-size: 11px;
  font-weight: 750;

  cursor: pointer;
}

.auth-optional-details summary span {
  padding: 3px 7px;

  color: #725b1c;
  background: #f2e7c3;

  border-radius: 999px;

  font-size: 8px;
}

.auth-optional-body {
  padding: 0 15px 15px;

  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 12px;
}

.auth-optional-body textarea,
.auth-optional-body input {
  width: 100%;
  min-height: 47px;
  padding: 11px 12px;

  background: #ffffff;

  border: 1px solid #dcd7cd;
  border-radius: 9px;

  outline: none;
}

.auth-optional-body textarea {
  min-height: 80px;
  resize: vertical;
}

.auth-security-note {
  margin-top: 25px;
  padding-top: 18px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  color: #8a8a8a;

  border-top: 1px solid #ebe6dc;

  text-align: center;
  font-size: 9px;
}

.auth-security-note i {
  color: #65966d;
  font-size: 14px;
}


/* TABLET */

@media (max-width: 1000px) {
  .auth-premium-card {
    grid-template-columns:
      minmax(300px, 0.75fr)
      minmax(450px, 1.25fr);
  }

  .auth-brand-panel {
    padding: 45px 30px;
  }

  .auth-form-panel {
    padding: 44px 36px;
  }
}


/* MOBILE */

@media (max-width: 780px) {
  .auth-page-section {
    padding: 25px 0;
  }

  .auth-page-container {
    width: min(600px, 94%);
  }

  .auth-premium-card {
    display: block;
    min-height: 0;

    border-radius: 18px;
  }

  .auth-brand-panel {
    min-height: 285px;
    padding: 27px 23px;
  }

  .auth-logo-link img {
    width: 42px;
    height: 42px;
  }

  .auth-kicker {
    margin-top: 40px;
  }

  .auth-brand-panel h1 {
    max-width: 300px;

    font-size: 43px;
  }

  .auth-brand-content > p {
    margin: 14px 0 0;
  }

  .auth-benefit-list {
    display: none;
  }

  .auth-form-panel {
    padding: 30px 20px;
  }

  .auth-form-grid,
  .auth-optional-body {
    grid-template-columns: 1fr;
  }

  .auth-form-header h2 {
    font-size: 34px;
  }
}

/* =========================================
   MOBILE NAVIGATION — FINAL STABLE FIX
   Desktop navigation remains unchanged.
========================================= */
@media (max-width: 950px) {
  body.menu-open::before {
    background: rgba(12, 12, 12, 0.32) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-links {
    top: 74px !important;
    right: -310px !important;
    left: auto !important;

    width: min(76vw, 276px) !important;
    height: auto !important;
    max-height: calc(100dvh - 88px) !important;

    padding: 12px !important;
    gap: 2px !important;

    color: #171717 !important;
    background: #ffffff !important;

    border: 1px solid rgba(199, 166, 70, 0.34) !important;
    border-radius: 16px !important;

    box-shadow:
      0 18px 48px rgba(0, 0, 0, 0.22),
      0 3px 12px rgba(199, 166, 70, 0.10) !important;

    overflow-y: auto !important;
    overscroll-behavior: contain;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;

    transform: translateX(0) !important;
    transition: right 0.28s ease !important;
  }

  .nav-links.active {
    right: 9px !important;
    pointer-events: auto !important;
  }

  .mobile-menu-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    margin: 0 0 6px !important;
    padding: 1px 2px 9px !important;

    border-bottom: 1px solid #ece5d7 !important;
  }

  .mobile-menu-brand img {
    width: 31px !important;
    height: 31px !important;
  }

  .mobile-menu-brand span {
    color: #111111 !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  .nav-links > a {
    width: 100% !important;
    min-height: 39px !important;
    margin: 1px 0 !important;
    padding: 5px 7px !important;

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

    color: #202020 !important;
    background: transparent !important;

    border: 1px solid transparent !important;
    border-radius: 9px !important;

    font-size: 12.5px !important;
    font-weight: 650 !important;

    transform: none !important;
  }

  .nav-links > a::after {
    display: none !important;
  }

  .nav-links > a:hover,
  .nav-links > a.active-nav {
    color: #111111 !important;
    background: #faf6eb !important;
    border-color: rgba(199, 166, 70, 0.24) !important;
    transform: none !important;
  }

  .nav-item-left {
    gap: 8px !important;
  }

  .mobile-icon-box {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;

    color: #222222 !important;
    background: #f8f4e9 !important;

    border: 1px solid rgba(199, 166, 70, 0.28) !important;
    border-radius: 8px !important;

    font-size: 14px !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .nav-links > a:hover .mobile-icon-box,
  .nav-links > a.active-nav .mobile-icon-box {
    color: #111111 !important;
    background: #ead58c !important;
    border-color: #d3b34f !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .nav-arrow {
    display: inline-flex !important;
    margin-left: auto !important;
    color: #aaa08f !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  .mobile-badge {
    top: -6px !important;
    right: -6px !important;

    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;

    border: 2px solid #ffffff !important;
    font-size: 9px !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18) !important;
  }

  .nav-register,
  .nav-links > a[href="/auth"] {
    min-height: 41px !important;
    margin-top: 5px !important;
    padding: 6px 8px !important;

    color: #111111 !important;
    background: linear-gradient(90deg, #d0aa3f, #efd77e) !important;
    border-color: #d0aa3f !important;
    border-radius: 10px !important;
  }

  .nav-links form {
    width: 100% !important;
    margin: 3px 0 0 !important;
  }

  .logout-btn {
    width: 100% !important;
    min-height: 39px !important;
    margin-top: 4px !important;
    padding: 7px 10px !important;

    color: #ffffff !important;
    background: #9a2020 !important;

    border-radius: 9px !important;
    font-size: 12.5px !important;
  }

  .mobile-menu-social {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin-top: 7px !important;
    padding: 9px 2px 0 !important;

    border-top: 1px solid #ece5d7 !important;
  }

  .mobile-menu-social > span {
    color: #8a8172 !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0.9px !important;
  }

  .mobile-social-links {
    display: flex !important;
    gap: 6px !important;
  }

  .mobile-social-links a {
    width: 28px !important;
    height: 28px !important;

    color: #222222 !important;
    background: #faf7ef !important;

    border: 1px solid rgba(199, 166, 70, 0.35) !important;
    border-radius: 50% !important;

    font-size: 13px !important;
  }
}

@media (max-width: 560px) {
  .nav-links {
    top: 70px !important;
    width: min(78vw, 268px) !important;
    max-height: calc(100dvh - 82px) !important;
    padding: 11px !important;
  }

  .nav-links.active {
    right: 7px !important;
  }
}
/* =========================================
   FINAL PRODUCT CARD MOBILE FIX
   Wishlist visible + compact Wholesale/Retail
========================================= */

.product-extra-badges {
  width: 100%;
  margin-top: 8px;

  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;

  color: #222222;
}

.product-extra-badges .extra-badge {
  min-width: 0;
  padding: 0;

  display: inline-flex;
  align-items: center;
  gap: 5px;

  color: #222222;
  background: transparent;
  border: 0;
  border-radius: 0;

  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.product-extra-badges .extra-badge i {
  flex: 0 0 auto;

  color: #111111;
  font-size: 14px;
  line-height: 1;
}

.product-extra-badges .extra-divider {
  flex: 0 0 auto;

  color: #aaa49a;
  font-size: 11px;
  line-height: 1;
}

@media (max-width: 700px) {
  /*
    Previous mobile CSS hides the whole hover-action area.
    Show it again so the wishlist heart remains visible.
  */
  .professional-product-card .product-hover-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 8;

    display: flex !important;
    flex-direction: column;
    gap: 5px;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /*
    On mobile only the wishlist heart is needed.
    Product image/title already open the details page.
  */
  .professional-product-card .product-quick-view-button {
    display: none !important;
  }

  .professional-product-card .product-wishlist-button {
    width: 31px !important;
    height: 31px !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    color: #111111;
    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.13);
    font-size: 18px !important;
    line-height: 1;
  }

  .professional-product-card .product-wishlist-button.active {
    color: #ffffff;
    background: #c43838;
    border-color: #c43838;
  }

  .professional-product-card .product-extra-badges {
    margin-top: 6px;
    gap: 4px;
    overflow: hidden;
  }

  .professional-product-card .product-extra-badges .extra-badge {
    gap: 3px;
    font-size: 8.5px;
    font-weight: 650;
  }

  .professional-product-card .product-extra-badges .extra-badge i {
    font-size: 10px;
  }

  .professional-product-card .product-extra-badges .extra-divider {
    font-size: 8px;
  }
}
/* =========================================
   PRODUCT CUSTOMER REVIEWS
========================================= */

.product-review-section {
  max-width: 1050px;
  margin: 65px auto 0;
  padding: 32px;

  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.review-section-header {
  margin-bottom: 24px;
}

.review-section-header h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
}

.review-form {
  margin-bottom: 34px;
  padding: 22px;

  background: #faf8f2;
  border: 1px solid #ebe5d8;
  border-radius: 12px;
}

.review-form textarea {
  resize: vertical;
}

.review-login-box,
.no-reviews-box {
  padding: 25px;

  text-align: center;

  background: #faf8f2;
  border: 1px solid #ebe5d8;
  border-radius: 12px;
}

.review-login-box p {
  margin-top: 0;
}

.customer-review-list {
  margin-top: 27px;

  display: grid;
  gap: 13px;
}

.customer-review-card {
  padding: 19px;

  background: #ffffff;
  border: 1px solid #e8e3d9;
  border-radius: 12px;
}

.customer-review-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.customer-review-top time {
  color: var(--muted);
  font-size: 11px;
}

.review-stars {
  margin-top: 4px;
}

.review-stars span {
  color: #d8d3c8;
}

.review-stars span.active {
  color: var(--gold);
}

.customer-review-card p {
  margin: 13px 0 0;

  color: #555555;
  line-height: 1.7;
}

.no-reviews-box i {
  display: block;

  margin-bottom: 8px;

  color: var(--gold);
  font-size: 25px;
}

@media (max-width: 700px) {
  .product-review-section {
    margin-top: 38px;
    padding: 18px;
    border-radius: 12px;
  }

  .review-form {
    padding: 15px;
  }

  .customer-review-top {
    flex-direction: column;
    gap: 5px;
  }
}
/* =========================================
   ANIMATED FLASH TOAST
========================================= */

.flash-toast {
  position: fixed;
  top: 92px;
  right: 22px;
  z-index: 3000;

  width: min(390px, calc(100vw - 30px));
  min-height: 74px;
  padding: 15px 48px 15px 16px;

  display: flex;
  align-items: center;
  gap: 12px;

  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 5px solid #2f9e59;
  border-radius: 14px;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);

  overflow: hidden;

  opacity: 0;
  transform: translateX(120%);
  animation:
    flashSlideIn 0.45s cubic-bezier(.22, 1, .36, 1) forwards,
    flashFadeOut 0.35s ease 4.7s forwards;
}

.flash-toast.success {
  border-left-color: #2f9e59;
}

.flash-toast.error {
  border-left-color: #d63c3c;
}

.flash-toast.info {
  border-left-color: var(--gold);
}

.flash-icon {
  width: 38px;
  height: 38px;

  flex: 0 0 auto;

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

  color: #2f9e59;
  background: #e8f7ec;
  border-radius: 50%;

  font-size: 19px;
}

.flash-toast.error .flash-icon {
  color: #d63c3c;
  background: #fff0f0;
}

.flash-toast.info .flash-icon {
  color: #9a781f;
  background: #f9f0d5;
}

.flash-content {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flash-content strong {
  font-size: 13px;
  font-weight: 800;
  color: #111111;
}

.flash-content span {
  color: #555555;
  font-size: 12px;
  line-height: 1.45;
}

.flash-close {
  position: absolute;
  top: 10px;
  right: 10px;

  width: 28px;
  height: 28px;
  padding: 0;

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

  color: #777777;
  background: transparent;
  border: 0;
  border-radius: 50%;
}

.flash-close:hover {
  color: #111111;
  background: #f1f1f1;
}

.flash-progress {
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 3px;

  background: #2f9e59;

  transform-origin: left center;
  animation: flashProgress 5s linear forwards;
}

.flash-toast.error .flash-progress {
  background: #d63c3c;
}

.flash-toast.info .flash-progress {
  background: var(--gold);
}

@keyframes flashSlideIn {
  from {
    opacity: 0;
    transform: translateX(120%);
  }

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

@keyframes flashFadeOut {
  to {
    opacity: 0;
    transform: translateX(35px);
    visibility: hidden;
  }
}

@keyframes flashProgress {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@media (max-width: 700px) {
  .flash-toast {
    top: 78px;
    right: 12px;
    left: 12px;

    width: auto;
    min-height: 66px;
    padding: 12px 42px 12px 12px;

    border-radius: 12px;
  }

  .flash-icon {
    width: 34px;
    height: 34px;

    font-size: 17px;
  }

  .flash-content strong {
    font-size: 12px;
  }

  .flash-content span {
    font-size: 11px;
  }
}

/* =========================================
   FINAL PRODUCT CARD COLOR & SIZE OVERRIDE
   Scoped to Home / Shop cards only
========================================= */

.professional-product-card .product-color-preview {
  width: 100%;
  min-height: 18px;
  margin: 8px 0 9px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.professional-product-card .product-color-option {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;

  display: inline-block !important;
  flex: 0 0 18px;

  color: transparent !important;
  background: var(--swatch-color, #cccccc) !important;

border: 1px solid rgba(0,0,0,.12) !important;
 border-radius: 3px !important;

  box-shadow: 0 0 0 1px #aaa59b !important;

  font-size: 0 !important;
  line-height: 0 !important;

  overflow: hidden;
  cursor: pointer;

  transform: none !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.professional-product-card .product-color-option:hover {
    transform: none !important;
}

.professional-product-card .product-color-option.active{
    transform: none !important;
    scale: 1 !important;

    border: 1px solid rgba(0,0,0,.12) !important;
    box-shadow: none !important;
}
.product-color-option{

    position: relative;

    overflow: visible !important;

    border-radius: 3px !important;
}
.product-color-option::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-5px;

    transform:translateX(-50%) scaleX(0);

    width:12px;
    height:2px;

    background:#C7A646;

    border-radius:999px;

    transition:transform .25s ease;
}

.product-color-option.active::after{

    transform:translateX(-50%) scaleX(1);

}
.professional-product-card .product-color-option span,
.professional-product-card .product-color-option small {
  display: none !important;
}

.professional-product-card .product-size-list {
  width: 100%;
  min-height: 29px;
  margin: 0 0 9px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.professional-product-card .product-size-option {
  min-width: 34px !important;
  height: 30px !important;
  padding: 0 8px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  color: #222222 !important;
  background: #ffffff !important;

  border: 1px solid #d7d2c8 !important;
  border-radius: 5px !important;

  box-shadow: none !important;

  font-size: 10px !important;
  font-weight: 750;
  line-height: 1;

  cursor: pointer;

  transform: none !important;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.professional-product-card .product-size-option:hover {
  color: #111111 !important;
  background: #faf8f2 !important;
  border-color: #99948a !important;
  transform: none !important;
}

.professional-product-card .product-size-option.active {
  color: #ffffff !important;
  background: #111111 !important;
  border-color: #111111 !important;
  box-shadow: none !important;
}

@media (max-width: 700px) {
  .professional-product-card .product-color-preview {
    min-height: 16px;
    margin: 7px 0 8px;
    gap: 6px;
  }

  .professional-product-card .product-color-option {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    flex-basis: 16px;
  }

  .professional-product-card .product-size-list {
    min-height: 27px;
    margin-bottom: 8px;
    gap: 4px;
  }

  .professional-product-card .product-size-option {
    min-width: 30px !important;
    height: 27px !important;
    padding: 0 6px !important;

    font-size: 9px !important;
  }
}
/* Product card spacing polish only */

.professional-product-card .product-extra-badges {
  margin-top: 7px;
  margin-bottom: 7px;
  gap: 5px;
}

.professional-product-card .product-extra-badges .extra-badge {
  gap: 4px;
  font-size: 10px;
  line-height: 1.15;
}

.professional-product-card .product-extra-badges .extra-badge i {
  font-size: 11px;
}

.professional-product-card .product-extra-badges .extra-divider {
  font-size: 9px;
}

/* Color exists: balanced space above and below swatches */
.professional-product-card .product-color-preview {
  margin-top: 3px;
  margin-bottom: 9px;
}

/* Size row starts neatly after badges or colors */
.professional-product-card .product-size-list {
  margin-top: 0;
  margin-bottom: 9px;
}

/* No color row: reduce the empty gap before sizes */
.professional-product-card
.product-extra-badges
+ .product-size-list {
  margin-top: 1px;
}

/* When color row exists, keep a small clean gap */
.professional-product-card
.product-extra-badges
+ .product-color-preview {
  margin-top: 3px;
}

@media (max-width: 700px) {
  .professional-product-card .product-extra-badges {
    margin-top: 5px;
    margin-bottom: 5px;
    gap: 4px;
  }

  .professional-product-card
  .product-extra-badges
  .extra-badge {
    gap: 3px;
    font-size: 8px;
  }

  .professional-product-card
  .product-extra-badges
  .extra-badge i {
    font-size: 9px;
  }

  .professional-product-card
  .product-extra-badges
  .extra-divider {
    font-size: 8px;
  }

  .professional-product-card .product-color-preview {
    margin-top: 2px;
    margin-bottom: 7px;
  }

  .professional-product-card
  .product-extra-badges
  + .product-size-list {
    margin-top: 0;
  }
}
/* =========================================
   PRODUCT CARD COMPACT TITLE / RATING / PRICE
========================================= */

.professional-product-card .professional-product-info h3 {
  margin-top: 4px;
  margin-bottom: 5px;

  font-size: 15px;
  line-height: 1.2;
}

.professional-product-card .product-rating-row {
  margin-top: 0;
  margin-bottom: 6px;

  min-height: 18px;

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

.professional-product-card .product-rating {
  gap: 4px;

  font-size: 10px;
  line-height: 1;
}

.professional-product-card .product-rating span {
  font-size: 11px;
}

.professional-product-card .product-rating strong {
  font-size: 10px;
}

.professional-product-card .product-sold-count {
  font-size: 9px;
  line-height: 1;
}

.professional-product-card .product-price-row {
  margin-top: 0;
  margin-bottom: 9px;

  display: flex;
  align-items: baseline;
  gap: 6px;
}

.professional-product-card .product-current-price {
  font-size: 17px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.2px;
}

.professional-product-card .product-compare-price {
  font-size: 9px;
  line-height: 1;
}

/* Price থেকে color-এর gap */
.professional-product-card .product-price-row
+ .product-color-preview {
  margin-top: 7px;
}

/* Color থেকে size-এর gap */
.professional-product-card .product-color-preview {
  margin-bottom: 12px;
}

.professional-product-card .product-size-list {
  margin-top: 0;
  margin-bottom: 9px;
}

.professional-product-card .product-size-option {
  min-width: 31px !important;
  height: 28px !important;
  padding: 0 7px !important;

  font-size: 9px !important;
}

/* Mobile compact version */
@media (max-width: 700px) {
  .professional-product-card .professional-product-info h3 {
    margin-top: 3px;
    margin-bottom: 4px;

    font-size: 13px;
  }

  .professional-product-card .product-rating-row {
    margin-bottom: 7px;
    min-height: 15px;
  }

  .professional-product-card .product-rating {
    gap: 3px;
    font-size: 8px;
  }

  .professional-product-card .product-rating span {
    font-size: 9px;
  }

  .professional-product-card .product-rating strong {
    font-size: 8px;
  }

  .professional-product-card .product-sold-count {
    font-size: 8px;
  }

  .professional-product-card .product-price-row {
    margin-bottom: 8px;
    gap: 5px;
  }

  .professional-product-card .product-current-price {
    font-size: 15px;
  }

  .professional-product-card .product-compare-price {
    font-size: 8px;
  }

  .professional-product-card .product-price-row
  + .product-color-preview {
    margin-top: 8px;
  }

  .professional-product-card .product-color-preview {
    margin-bottom: 12px;
  }

  .professional-product-card .product-size-list {
    margin-bottom: 8px;
  }

  .professional-product-card .product-size-option {
    min-width: 28px !important;
    height: 26px !important;
    padding: 0 6px !important;

    font-size: 8px !important;
  }
}
/* =========================================
   WHOLESALE OFFER MODAL CARD
========================================= */

body.offer-modal-open {
  overflow: hidden;
}

.wholesale-offer-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;

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

  padding: 20px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.wholesale-offer-modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wholesale-offer-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(5, 5, 5, 0.68);

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.wholesale-offer-card {
  position: relative;
  z-index: 1;

  width: min(430px, 100%);
  padding: 37px 32px 27px;

  overflow: hidden;
  text-align: center;

  color: #ffffff;
  background:
    radial-gradient(
      circle at top right,
      rgba(199, 166, 70, 0.24),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #0b0b0b,
      #201a0c
    );

  border:
    1px solid rgba(199, 166, 70, 0.72);
  border-radius: 22px;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.48);

  opacity: 0;
  transform:
    translateY(28px)
    scale(0.92);

  transition:
    opacity 0.35s ease,
    transform 0.45s
      cubic-bezier(.22, 1, .36, 1);
}

.wholesale-offer-modal.show
.wholesale-offer-card {
  opacity: 1;
  transform:
    translateY(0)
    scale(1);
}

.wholesale-offer-close {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 3;

  width: 34px;
  height: 34px;
  padding: 0;

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

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

  border:
    1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.wholesale-offer-close:hover {
  color: #111111;
  background: var(--gold);
  transform: rotate(6deg);
}

.offer-card-decoration {
  position: absolute;

  border:
    1px solid rgba(199, 166, 70, 0.20);
  border-radius: 50%;
}

.offer-decoration-one {
  top: -88px;
  left: -77px;

  width: 190px;
  height: 190px;
}

.offer-decoration-two {
  right: -48px;
  bottom: -63px;

  width: 145px;
  height: 145px;
}

.offer-card-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 17px;

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

  color: #111111;
  background:
    linear-gradient(
      135deg,
      #ead99c,
      var(--gold)
    );

  border:
    5px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;

  box-shadow:
    0 13px 32px rgba(199, 166, 70, 0.28);

  font-size: 27px;
}

.offer-card-kicker {
  display: block;

  margin-bottom: 10px;

  color: var(--gold-light);

  font-size: 9px;
  font-weight: 850;
  letter-spacing: 2px;
}

.wholesale-offer-card h2 {
  margin: 0;

  color: #ffffff;

  font-size: 42px;
  line-height: 0.96;
}

.wholesale-offer-card h2 span {
  display: block;
  color: var(--gold);
}

.offer-card-message {
  max-width: 330px;
  margin: 18px auto 0;

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

  font-size: 13px;
  line-height: 1.7;
}

.offer-card-message strong {
  color: #ffffff;
}

.offer-card-benefits {
  margin: 23px 0;

  display: grid;
  gap: 9px;

  text-align: left;
}

.offer-card-benefits span {
  padding: 9px 11px;

  display: flex;
  align-items: center;
  gap: 8px;

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

  border:
    1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;

  font-size: 11px;
}

.offer-card-benefits i {
  color: var(--gold);
  font-size: 13px;
}

.offer-shop-button {
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  color: #111111;
  background:
    linear-gradient(
      135deg,
      #ead99c,
      var(--gold)
    );

  border: 0;
  border-radius: 10px;

  box-shadow:
    0 13px 30px rgba(199, 166, 70, 0.23);

  font-size: 12px;
  font-weight: 850;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.offer-shop-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 17px 35px rgba(199, 166, 70, 0.34);
}

.offer-shop-button i {
  transition: transform 0.2s ease;
}

.offer-shop-button:hover i {
  transform: translateX(4px);
}

.wholesale-offer-card > small {
  display: block;
  margin-top: 12px;

  color: rgba(255, 255, 255, 0.40);
  font-size: 8px;
}

/* Mobile */

@media (max-width: 700px) {
  .wholesale-offer-modal {
    padding: 14px;
  }

  .wholesale-offer-card {
    width: min(390px, 100%);
    padding: 31px 20px 22px;

    border-radius: 18px;
  }

  .offer-card-icon {
    width: 57px;
    height: 57px;
    margin-bottom: 14px;

    font-size: 23px;
  }

  .offer-card-kicker {
    font-size: 8px;
    letter-spacing: 1.5px;
  }

  .wholesale-offer-card h2 {
    font-size: 34px;
  }

  .offer-card-message {
    margin-top: 14px;
    font-size: 11px;
  }

  .offer-card-benefits {
    margin: 18px 0;
    gap: 7px;
  }

  .offer-card-benefits span {
    padding: 8px 10px;
    font-size: 10px;
  }

  .offer-shop-button {
    min-height: 44px;
    font-size: 11px;
  }
}
/* =========================================
   PRODUCT CARD OFFER FOOTER
========================================= */

.professional-product-card .product-card-footer-offer {
  min-height: 48px;
  padding-top: 8px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.professional-product-card .product-footer-left,
.professional-product-card .product-footer-right {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.professional-product-card .product-footer-left{
    flex:1;
}

.professional-product-card .product-footer-right{
    flex:0 0 auto;
    align-items:flex-end;
}
.professional-product-card .product-footer-left {
  align-items: flex-start;
  gap: 5px;
}

.professional-product-card .product-footer-right {
  align-items: flex-end;
  gap: 5px;
}

.professional-product-card .product-sale-types {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  color: #777168;

  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.professional-product-card .product-sale-types span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.professional-product-card .product-sale-types i {
  color: #8b762f;
  font-size: 9px;
}

.professional-product-card .sale-type-separator {
  color: #bdb7ac;
  font-size: 7px;
}

/* =========================================
   PREMIUM GET 20% OFF BUTTON
========================================= */

.professional-product-card
.product-footer-right {
  align-self: stretch;

  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.professional-product-card
.product-offer-button {
  position: relative;

  min-width: 128px;
  min-height: 34px;
  padding: 6px 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  overflow: hidden;

  color: #6f5510;

  background:
    linear-gradient(
      135deg,
      rgba(255, 242, 190, 0.72),
      rgba(199, 166, 70, 0.18)
    );

  border:
    1px solid rgba(199, 166, 70, 0.78);

  border-radius: 9px;

  box-shadow:
    0 5px 15px rgba(199, 166, 70, 0.17);

  line-height: 1;

  transition:
    color 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.professional-product-card
.product-offer-button::before {
  content: "";

  position: absolute;
  top: 0;
  left: -140%;

  width: 60%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.82),
      transparent
    );

  transform: skewX(-22deg);

  transition: left 0.55s ease;
}

.professional-product-card
.product-offer-button:hover {
  color: #111111;

  background:
    linear-gradient(
      135deg,
      #f9e8a7,
      #c7a646
    );

  border-color: #c7a646;

  box-shadow:
    0 9px 23px rgba(199, 166, 70, 0.32);

  transform: translateY(-2px);
}

.professional-product-card
.product-offer-button:hover::before {
  left: 145%;
}

.professional-product-card
.offer-text {
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  white-space: nowrap;
}

.professional-product-card
.offer-word {
  color: #6e5514;

  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.55px;

  text-transform: uppercase;
}

.professional-product-card
.offer-percent {
  min-width: 36px;
  height: 20px;
  padding: 0 6px;

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

  color: #111111;

  background:
    linear-gradient(
      135deg,
      #fff1aa,
      #d4af37
    );

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

  border-radius: 999px;

  box-shadow:
    0 3px 10px rgba(212, 175, 55, 0.37);

  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.2px;

  transition:
    background 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.professional-product-card
.offer-tag-icon,
.professional-product-card
.offer-arrow-icon {
  position: relative;
  z-index: 1;

  color: #9b7411;

  font-size: 10px;
  line-height: 1;

  transition:
    color 0.22s ease,
    transform 0.22s ease;
}

.professional-product-card
.product-offer-button:hover
.offer-word {
  color: #111111;
}

.professional-product-card
.product-offer-button:hover
.offer-percent {
  background:
    linear-gradient(
      135deg,
      #fff7d2,
      #f0c94f
    );

  box-shadow:
    0 5px 13px rgba(212, 175, 55, 0.48);

  transform: scale(1.07);
}

.professional-product-card
.product-offer-button:hover
.offer-tag-icon {
  color: #111111;

  transform: rotate(-8deg);
}

.professional-product-card
.product-offer-button:hover
.offer-arrow-icon {
  color: #111111;

  transform: translate(2px, -2px);
}

.professional-product-card
.product-offer-button:active {
  transform: translateY(0);
}

/* Mobile */

@media (max-width:700px){

  .professional-product-card .product-footer-left{
      flex:1;
      min-width:0;
  }

  .professional-product-card .product-footer-right{
      flex:0 0 auto;
      margin-left:6px;
  }

  .professional-product-card .product-offer-button{
      min-width:86px;
      height:26px;
      padding:0 5px;
      gap:3px;
  }

  .professional-product-card .offer-word{
      font-size:6px;
  }

  .professional-product-card .offer-percent{
      min-width:24px;
      height:14px;
      font-size:7px;
      padding:0 4px;
  }

  .professional-product-card .offer-tag-icon,
  .professional-product-card .offer-arrow-icon{
      font-size:7px;
  }

}

/* =========================================
   MOBILE PRODUCT FOOTER OVERLAP FIX
========================================= */

@media (max-width: 700px) {

  .professional-product-card .product-card-footer-offer {
    width: 100% !important;
    min-height: auto !important;
    padding-top: 8px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    gap: 8px !important;
  }

  .professional-product-card .product-footer-left {
    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 6px !important;
  }

  .professional-product-card .product-footer-right {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;

    display: flex !important;
    align-items: stretch !important;
  }

  .professional-product-card .product-sale-types {
    min-width: 0 !important;
    gap: 3px !important;

    font-size: 7px !important;
    white-space: nowrap !important;
  }

  .professional-product-card .product-sale-types i {
    font-size: 7px !important;
  }

  .professional-product-card .sale-type-separator {
    font-size: 6px !important;
  }

  .professional-product-card .product-stock-status {
    flex-shrink: 0 !important;
    font-size: 7px !important;
    white-space: nowrap !important;
  }

  .professional-product-card .product-offer-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;

    padding: 0 7px !important;

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

    gap: 4px !important;
  }

  .professional-product-card .offer-word {
    font-size: 7px !important;
  }

  .professional-product-card .offer-percent {
    min-width: 28px !important;
    height: 16px !important;
    padding: 0 4px !important;

    font-size: 8px !important;
  }

  .professional-product-card .offer-tag-icon,
  .professional-product-card .offer-arrow-icon {
    font-size: 8px !important;
  }
}
/* =========================================
   PREMIUM MOBILE HEADER NAVIGATION
========================================= */

.mobile-header-actions,
.mobile-search-panel {
  display: none;
}


@media (max-width: 950px) {

  /* Header base */

  .site-header {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;

    transition:
      background 0.3s ease,
      box-shadow 0.3s ease,
      border-color 0.3s ease !important;
  }

  .site-header .nav {
    min-height: 66px !important;
    gap: 10px !important;
  }


  /* Scroll করলে screenshot-এর মতো dark header */

.site-header.scrolled{
    background: rgba(15,15,15,.44) !important;

    border-bottom: 1px solid rgba(255,255,255,.06);

    box-shadow: 0 3px 12px rgba(0,0,0,.12);

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    transition: background .3s ease;
}
  /* Logo */

  .site-header .brand {
    min-width: 0;
    margin-right: auto;

    flex-shrink: 1;
  }

  .site-header .brand-logo {
    width: 43px !important;
    height: 43px !important;

    flex-shrink: 0;

    background: #ffffff;
  }

  .site-header .brand span {
    color: #111111;

    transition: color 0.3s ease;
  }

  .site-header.scrolled .brand span {
    color: #ffffff;
  }

  .site-header .brand strong,
  .site-header.scrolled .brand strong {
    color: var(--gold);
  }


  /* Mobile icon group */

  .mobile-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 5px;
    flex-shrink: 0;
  }

  .mobile-header-icon {
    position: relative;

    width: 36px;
    height: 42px;
    padding: 0;

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

    color: #1a1a1a;
    background: transparent;

    border: 0;
    border-radius: 0;

    font-size: 21px;
    line-height: 1;

    transition:
      color 0.25s ease,
      transform 0.25s ease;
  }

  .mobile-header-icon:hover,
  .mobile-header-icon:active {
    color: var(--gold);
    transform: translateY(-1px);
  }

  .site-header.scrolled .mobile-header-icon {
    color: var(--gold);
  }


  /* Cart badge */

  .mobile-header-cart {
    overflow: visible;
  }

  .mobile-header-badge {
    position: absolute;
    top: 2px;
    right: 0;

    min-width: 17px;
    height: 17px;
    padding: 0 4px;

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

    color: #111111;
    background: var(--gold);

    border: 1.5px solid #ffffff;
    border-radius: 999px;

    font-size: 8px;
    font-weight: 900;
    line-height: 1;
  }

  .site-header.scrolled .mobile-header-badge {
    border-color: #171717;
  }


  /* Hamburger: আলাদা box থাকবে না */

  .mobile-menu-button {
    width: 39px !important;
    height: 42px !important;
    padding: 0 !important;

    display: flex !important;

    gap: 5px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .mobile-menu-button span {
    width: 24px !important;
    height: 2px !important;

    background: #1a1a1a !important;

    transition:
      transform 0.3s ease,
      opacity 0.3s ease,
      background 0.3s ease !important;
  }

  .site-header.scrolled .mobile-menu-button span {
    background: var(--gold) !important;
  }


  /* Search dropdown */

  .mobile-search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1250;

    padding: 0 4.5%;

    display: block;

    background: transparent;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);

    transition:
      opacity 0.25s ease,
      visibility 0.25s ease,
      transform 0.25s ease;
  }

  .mobile-search-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
  }

  .mobile-search-form {
    width: 100%;
    padding: 8px 8px 8px 14px;

    display: flex;
    align-items: center;
    gap: 9px;

    background: #ffffff;

    border: 1px solid rgba(199, 166, 70, 0.55);
    border-radius: 0 0 12px 12px;

    box-shadow:
      0 15px 35px rgba(0, 0, 0, 0.18);
  }

  .mobile-search-form > i {
    flex-shrink: 0;

    color: var(--gold);
    font-size: 17px;
  }

  .mobile-search-form input {
    min-width: 0;
    height: 38px;
    padding: 0;

    flex: 1;

    color: #111111;
    background: transparent;

    border: 0;
    outline: 0;

    font-size: 13px;
  }

  .mobile-search-form input::placeholder {
    color: #8c8c8c;
  }

  .mobile-search-form button {
    height: 36px;
    padding: 0 14px;

    flex-shrink: 0;

    color: #111111;
    background: var(--gold);

    border: 0;
    border-radius: 7px;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.3px;
  }


  /* Mobile drawer-এর ভিতরের Cart hide */

  .nav-links .cart-link {
    display: none !important;
  }
}


@media (max-width: 430px) {

  .site-header .nav {
    min-height: 62px !important;
  }

  .site-header .brand {
    gap: 6px !important;
  }

  .site-header .brand-logo {
    width: 39px !important;
    height: 39px !important;
  }

  .site-header .brand span {
    max-width: 100px;

    font-size: 14px !important;
    letter-spacing: 0.7px !important;
    white-space: nowrap;
  }

  .mobile-header-actions {
    gap: 1px;
  }

  .mobile-header-icon {
    width: 33px;
    height: 39px;

    font-size: 19px;
  }

  .mobile-menu-button {
    width: 35px !important;
    height: 39px !important;
  }

  .mobile-menu-button span {
    width: 22px !important;
  }
}


@media (max-width: 370px) {

  .site-header .brand span {
    display: none;
  }

  .mobile-header-actions {
    gap: 4px;
  }

}

/* =========================================
   CATEGORY FEATURE VIDEO
========================================= */

.category-video-feature {
  position: relative;

  width: 100%;
  min-height: 520px;
  margin-bottom: 20px;

  overflow: hidden;

  background: #111;
  border-radius: 14px;

  box-shadow: 0 18px 45px rgba(0,0,0,.14);
}

.category-feature-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.category-video-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.76) 0%,
      rgba(0,0,0,.38) 48%,
      rgba(0,0,0,.10) 100%
    );
}

.category-video-content {
  position: relative;
  z-index: 2;

  max-width: 540px;
  min-height: 520px;
  padding: 55px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;

  color: #fff;
}

.category-video-label {
  margin-bottom: 12px;
  padding: 6px 11px;

  color: #111;
  background: var(--gold);

  border-radius: 999px;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.category-video-content h2 {
  margin: 0 0 14px;

  color: #fff;

  font-size: clamp(42px, 6vw, 72px);
  line-height: .95;
}

.category-video-content p {
  max-width: 460px;
  margin: 0;

  color: rgba(255,255,255,.78);

  font-size: 14px;
  line-height: 1.6;
}

.category-video-button {
  margin-top: 22px;
  padding-bottom: 5px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: #fff;

  border-bottom: 1px solid rgba(255,255,255,.65);

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

.category-video-button i {
  color: var(--gold);

  transition: transform .25s ease;
}

.category-video-button:hover i {
  transform: translateX(5px);
}

@media (max-width: 700px) {
  .category-video-feature {
    min-height: 430px;
    margin-bottom: 14px;
    border-radius: 11px;
  }

  .category-video-content {
    min-height: 430px;
    padding: 28px 22px;
  }

  .category-video-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.08) 0%,
        rgba(0,0,0,.28) 45%,
        rgba(0,0,0,.86) 100%
      );
  }

  .category-video-content h2 {
    font-size: 40px;
  }

  .category-video-content p {
    max-width: 300px;
    font-size: 12px;
  }
}