/*
 * Theme Name:  StyleByShreya
 * Theme URI:   https://example.com
 * Author:      Sanjay
 * Author URI:  https://example.com
 * Description: Custom WooCommerce Theme for StyleByShreya
 * Version:     1.0
 * License:     GNU General Public License v2 or later
 * Text Domain: stylebyshreya
 */

/* ============================================================
   TABLE OF CONTENTS
   1.  CSS Variables & Reset
   2.  Announcement Bar
   3.  Header & Navigation
       3a. Header Top
       3b. Main Nav & Mega Menu (Desktop)
       3c. Hamburger
   4.  Hero Banner / Slider
   5.  Section Commons
   6.  Collections Grid
   7.  Recently Viewed
   8.  Categories
   9.  Trending Now
   10. World Grid (Lifestyle)
   11. New Arrivals
   12. Diamond Banner
   13. Assurance
   14. Exchange Program
   15. Curated For You
   16. Promo Duo
   17. Experience
   18. Digital Gold Banner
   19. Bestsellers
   20. WooCommerce — Cart Page
   21. WooCommerce — Shop / Category Page
   22. WooCommerce — My Account
   23. Footer
   24. Back to Top
   25. Utilities
   26. Media Queries
       26a. ≤ 1300px
       26b. ≤ 1100px
       26c. ≤ 1024px
       26d. ≤ 992px
       26e. ≤ 900px  (mobile nav)
       26f. ≤ 768px
       26g. ≤ 480px
       26h. ≤ 400px
============================================================ */


/* ============================================================
   1. CSS VARIABLES & RESET
   ============================================================ */

:root {
  --gold:        #b5882b;
  --gold-light:  #d4a843;
  --gold-pale:   #f7e9c6;
  --gold-dark:   #8a6520;
  --maroon:      #7b1c2e;
  --maroon-light:#9c2438;
  --teal:        #1a7272;
  --teal-dark:   #0f4e4e;
  --cream:       #fdf8f0;
  --white:       #ffffff;
  --black:       #111111;
  --grey:        #555555;
  --light-grey:  #e8e8e8;
  --bg:          #fafaf8;
  --footer-bg:   #1c1008;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Jost', sans-serif;
  --transition:  0.3s ease;
  --shadow:      0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-hover:0 8px 40px rgba(0, 0, 0, 0.15);
  --radius:      4px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--black);
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
}

img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-sans);
}


/* ============================================================
   2. ANNOUNCEMENT BAR
   ============================================================ */

.announcement-bar {
  background: var(--maroon);
  color: var(--white);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 7px 16px;
  font-weight: 400;
}

.announcement-bar a {
  color: var(--gold-pale);
  text-decoration: underline;
}


/* ============================================================
   3. HEADER & NAVIGATION
   ============================================================ */

/* ── 3a. Header Top ── */

.site-header {
  background: #000;
  border-bottom: 1px solid var(--light-grey);
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 97px;
  gap: 16px;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-text {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--maroon);
  letter-spacing: 0.04em;
}

.logo-text span { color: var(--gold); }

.header-search {
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  border-radius: 24px;
  overflow: hidden;
  padding: 0 14px;
  gap: 8px;
}

.header-search input {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
  font-size: 13px;
  width: 100%;
  padding: 8px 0;
  color: var(--black);
}

.header-search svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-actions a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #fff;
  gap: 3px;
  transition: color var(--transition);
}

.header-actions a:hover { color: #d4af37; }

.header-actions svg {
  width: 22px;
  height: 22px;
  color: #fff;
}

.cart-badge { position: relative; display: inline-block; }

.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--maroon);
  color: #fff;
  font-size: 9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


/* ── 3b. Main Nav & Mega Menu (Desktop) ── */
.main-nav {
  background: var(--white);
  border-top: 1px solid var(--light-grey);
  position: relative;
  z-index: 1000;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 4px;
  list-style: none;
  /*overflow: hidden;*/
  flex-wrap: nowrap;
  min-height: 48px;
}

.main-nav > ul > li { position: relative; }

.main-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 13px 5px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: capitalize;
  color: var(--black);
  transition: color var(--transition);
  position: relative;
  white-space: nowrap;
  text-decoration: none;
}

.main-nav > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--transition);
  transform-origin: center;
}

.main-nav > ul > li > a:hover,
.main-nav > ul > li.active > a         { color: var(--maroon); }
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li.active > a::after  { transform: scaleX(1); }

.nav-cat-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--gold);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 2px;
}

/* ── Mega menu ─────────────────────────────────────────── */
.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--white);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
  z-index: 999;
  animation: megaFadeIn 0.18s ease forwards;
}

@keyframes megaFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.main-nav > ul > li:hover .mega-menu,
.mega-menu:hover { display: block; }

.mega-menu-inner {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.mega-col {
  padding: 0;
  border-right: none;
  margin-right: 0;
}
.mega-col:last-child {
  border-right: none;
  margin-right: 0;
}

.mega-col-title {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--black);
  padding: 10px 20px;
  border-bottom: 1px solid var(--light-grey);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.mega-col-title:last-child { border-bottom: none; }
.mega-col-title:hover { background: #f7f3ea; color: var(--maroon); }

.col-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--gold);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.mega-col .col-children {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-col .col-children li a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--black);
  padding: 6px 20px 6px 28px;
  text-decoration: none;
  transition: color var(--transition), padding-left var(--transition);
}

.mega-col .col-children li a::before {
  content: '›';
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
  transition: transform var(--transition);
}

.mega-col .col-children li a:hover          { color: var(--maroon); padding-left: 32px; }
.mega-col .col-children li a:hover::before  { transform: translateX(2px); }

.mega-view-all {
  margin: 0;
  padding: 8px 20px 10px;
  border-top: 1px dashed var(--light-grey);
}

.mega-view-all a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: color var(--transition);
}
.mega-view-all a:hover { color: var(--maroon); }

/* ── Show More button ──────────────────────────────────── */
.nav-more-item {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-more-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 13px 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--black);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition);
}
.nav-more-btn:hover { color: var(--maroon); }

.nav-more-item.open .nav-more-btn .nav-arrow {
  transform: rotate(180deg);
}

/* ── Show More dropdown ────────────────────────────────── */
.nav-more-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background: var(--white);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
  z-index: 999;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}

.nav-more-item.open .nav-more-dropdown {
  display: block;
  max-height: 600px;
  opacity: 1;
}

.nav-more-dropdown ul {
  list-style: none;
  padding: 6px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.nav-more-dropdown ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--light-grey);
  transition: background var(--transition), color var(--transition);
}
.nav-more-dropdown ul li:last-child a { border-bottom: none; }
.nav-more-dropdown ul li a:hover {
  background: #f7f3ea;
  color: var(--maroon);
}

.nav-more-dropdown ul li a img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}


/* ── 3c. Hamburger ── */

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.hamburger span {
  display: block;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* X / close state */
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   4. HERO BANNER / SLIDER
   ============================================================ */

.hero-slider {
  position: relative;
  overflow: hidden;
  height: 520px;
  background: linear-gradient(120deg, #f5e6c8 0%, #e8d4a8 50%, #d4b896 100%);
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  display: flex;
  align-items: center;
}

.hero-slide.active { opacity: 1; }

.hero-slide-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.hero-content { max-width: 480px; }

.hero-tag {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 2px;
  margin-bottom: 20px;
  font-weight: 500;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 54px;
  font-weight: 300;
  line-height: 1.15;
  color: var(--maroon);
  margin-bottom: 16px;
}

.hero-title strong { font-weight: 600; display: block; }

.hero-subtitle {
  font-size: 15px;
  color: var(--grey);
  margin-bottom: 32px;
  font-weight: 300;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--maroon);
  color: var(--white);
  padding: 13px 32px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 2px;
  transition: background var(--transition), transform var(--transition);
}

.btn-primary:hover { background: var(--maroon-light); transform: translateY(-1px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  padding: 11px 28px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 2px;
  transition: all var(--transition);
}

.btn-outline:hover { background: var(--gold); color: #fff; }

.hero-image-wrap {
  width: 480px;
  height: 420px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-image-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 90px;
  color: rgba(181, 136, 43, 0.2);
  position: relative;
  overflow: hidden;
}

/* Decorative circles */
.hero-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(181, 136, 43, 0.15), transparent);
}

.hero-circle-1 { width: 320px; height: 320px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hero-circle-2 { width: 200px; height: 200px; top: 20%; right: 10%; }

.hero-jewel {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-pale) 0%, var(--gold-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 90px;
  box-shadow: 0 20px 60px rgba(181, 136, 43, 0.3);
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* Slider controls */
.slider-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(123, 28, 46, 0.3);
  transition: all var(--transition);
  cursor: pointer;
}

.slider-dot.active {
  background: var(--maroon);
  width: 24px;
  border-radius: 4px;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--light-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  backdrop-filter: blur(4px);
}

.slider-arrow:hover { background: var(--white); box-shadow: var(--shadow); }
.slider-prev { left: 20px; }
.slider-next { right: 20px; }


/* ============================================================
   5. SECTION COMMONS
   ============================================================ */

.section    { padding: 60px 0; }
.section-sm { padding: 40px 0; }

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-header { text-align: center; margin-bottom: 36px; }

.section-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--black);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.section-subtitle { font-size: 13px; color: var(--grey); font-weight: 300; }

.section-title-line {
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin: 12px auto 0;
}


/* ============================================================
   6. COLLECTIONS GRID
   ============================================================ */

.collections-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
}

.coll-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
}

.coll-card:first-child { grid-row: 1 / 3; }

.coll-card-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.coll-card:first-child .coll-card-img { height: 100%; min-height: 532px; }
.coll-card:hover .coll-card-img       { transform: scale(1.04); }

.coll-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.coll-card-label {
  color: #fff;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
}

.coll-card-sublabel { color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-top: 2px; }

/* Placeholder colored cards */
.coll-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.coll-placeholder.c1 { background: linear-gradient(135deg, #2a8080, #1a5050); min-height: 532px; }
.coll-placeholder.c2 { background: linear-gradient(135deg, #c8a86e, #8a6520); height: 260px; }
.coll-placeholder.c3 { background: linear-gradient(135deg, #8c3a4a, #5c1a28); height: 260px; }
.coll-placeholder.c4 { background: linear-gradient(135deg, #d4b08c, #9a7040); height: 260px; }
.coll-placeholder.c5 { background: linear-gradient(135deg, #4a8060, #1a4030); height: 260px; }

.badge-new {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 2px;
  text-transform: uppercase;
}


/* ============================================================
   7. RECENTLY VIEWED
   ============================================================ */

.recently-viewed { background: var(--white); }

.products-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--light-grey) transparent;
}

.products-row::-webkit-scrollbar       { height: 4px; }
.products-row::-webkit-scrollbar-thumb { background: var(--light-grey); border-radius: 2px; }

.product-card {
  flex: 0 0 220px;
  border-radius: var(--radius);
  background: var(--cream);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
}

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

.product-card-img {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  position: relative;
}

.product-card-img.p1 { background: linear-gradient(135deg, #f0e8d0, #d4c898); }
.product-card-img.p2 { background: linear-gradient(135deg, #e8f0f0, #b8d8d8); }
.product-card-img.p3 { background: linear-gradient(135deg, #f8e8e8, #e8c8c8); }
.product-card-img.p4 { background: linear-gradient(135deg, #f0f0e8, #d0d0b8); }
.product-card-img.p5 { background: linear-gradient(135deg, #e8e8f8, #c8c8e8); }
.product-card-img.p6 { background: linear-gradient(135deg, #f8f0e8, #e8d0b8); }

.product-card-body { padding: 12px 14px 16px; }

.product-card-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--black);
  margin-bottom: 4px;
  line-height: 1.4;
}

.product-card-price { font-size: 14px; font-weight: 600; color: var(--maroon); }

.product-card-price span {
  font-size: 12px;
  font-weight: 400;
  color: var(--grey);
  text-decoration: line-through;
  margin-left: 6px;
}

.wishlist-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all var(--transition);
}

.wishlist-btn:hover { background: var(--white); color: var(--maroon); transform: scale(1.1); }


/* ============================================================
   8. CATEGORIES
   ============================================================ */

.categories { background: var(--cream); }

.category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.category-item { text-align: center; cursor: pointer; }

.category-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin-bottom: 10px;
  transition: transform var(--transition), box-shadow var(--transition);
  border: 2px solid transparent;
}

.category-item:hover .category-img {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(181, 136, 43, 0.3);
  border-color: var(--gold);
}

.ci1 { background: linear-gradient(135deg, #f0e4c8, #d4b87a); }
.ci2 { background: linear-gradient(135deg, #c8d4e8, #8098c0); }
.ci3 { background: linear-gradient(135deg, #e8c8d0, #c07080); }
.ci4 { background: linear-gradient(135deg, #d8e8d0, #80a878); }
.ci5 { background: linear-gradient(135deg, #e8d8c8, #b09070); }

.category-name {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--black);
  text-transform: uppercase;
}

.category-grid-2 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  border-top: 1px solid var(--light-grey);
  padding-top: 24px;
  position: relative;
}

.category-count-badge {
  grid-column: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}

.category-count-badge .big-num {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 300;
  color: var(--gold);
}

.category-count-badge .big-label {
  font-size: 11px;
  color: var(--grey);
  letter-spacing: 0.04em;
  text-align: center;
}


/* ============================================================
   9. TRENDING NOW
   ============================================================ */

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

.trending-card {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  aspect-ratio: 4 / 3;
}

.trending-card-bg {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.trending-card:hover .trending-card-bg { transform: scale(1.04); }

.t1 { background: linear-gradient(135deg, #c8a060, #7a5018); }
.t2 { background: linear-gradient(135deg, #8a2030, #4a0810); }
.t3 { background: linear-gradient(135deg, #304878, #101828); }

.trending-card-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 52px;
  color: rgba(255, 255, 255, 0.3);
}

.trending-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 55%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
}

.trending-card-title { font-family: var(--font-serif); font-size: 20px; color: #fff; font-weight: 400; }
.trending-card-sub   { font-size: 12px; color: rgba(255, 255, 255, 0.75); margin-top: 3px; }


/* ============================================================
   10. WORLD GRID (LIFESTYLE)
   ============================================================ */

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

.world-card {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  aspect-ratio: 3 / 4;
}

.world-card-bg { width: 100%; height: 100%; transition: transform 0.5s ease; }
.world-card:hover .world-card-bg { transform: scale(1.05); }

.w1 { background: linear-gradient(160deg, #d4b880, #8a6028); }
.w2 { background: linear-gradient(160deg, #c090a0, #703050); }
.w3 { background: linear-gradient(160deg, #80b0c8, #304858); }
.w4 { background: linear-gradient(160deg, #b0c880, #507030); }

.world-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
  padding: 32px 16px 16px;
}

.world-label h3 { font-family: var(--font-serif); font-size: 20px; color: #fff; font-weight: 400; }

.world-icon       { position: absolute; top: 16px; right: 16px; font-size: 24px; }
.world-card-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; color: rgba(255, 255, 255, 0.25); }


/* ============================================================
   11. NEW ARRIVALS
   ============================================================ */

.arrivals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.arrival-card {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.arrival-bg {
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  color: rgba(255, 255, 255, 0.25);
  transition: transform 0.5s ease;
}

.arrival-card:hover .arrival-bg { transform: scale(1.03); }

.a1 { background: linear-gradient(135deg, #c8d8c0, #688060); }
.a2 { background: linear-gradient(135deg, #d8c8a0, #887040); }

.arrival-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  padding: 32px 20px 20px;
  color: #fff;
}

.arrival-label h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 400; }
.arrival-label p  { font-size: 12px; opacity: 0.8; margin-top: 4px; }

.new-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
}


/* ============================================================
   12. DIAMOND BANNER
   ============================================================ */

.diamond-banner {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 60px 0;
  color: #fff;
  overflow: hidden;
  position: relative;
}

.diamond-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(181, 136, 43, 0.15) 0%, transparent 60%);
}

.diamond-banner-inner {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
}

.diamond-content { flex: 1; }

.diamond-tag {
  display: inline-block;
  border: 1px solid rgba(181, 136, 43, 0.5);
  color: var(--gold-light);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 2px;
  margin-bottom: 20px;
}

.diamond-title {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 16px;
}

.diamond-title strong { font-weight: 600; color: var(--gold-light); }

.diamond-desc {
  font-size: 14px;
  opacity: 0.75;
  margin-bottom: 32px;
  line-height: 1.7;
  max-width: 420px;
}

.diamond-visual {
  flex: 0 0 400px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.diamond-ring {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #b5882b, #f0d060, #b5882b, #f0d060, #b5882b);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 60px rgba(181, 136, 43, 0.4), 0 0 120px rgba(181, 136, 43, 0.15);
  animation: spin-slow 20s linear infinite;
  font-size: 80px;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.diamond-center {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1a2e, #0f3460);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}

.slider-prev-dm,
.slider-next-dm {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  background: rgba(255, 255, 255, 0.05);
}

.slider-prev-dm:hover,
.slider-next-dm:hover { background: rgba(255, 255, 255, 0.1); }

.slider-prev-dm { left: 0; }
.slider-next-dm { right: 0; }


/* ============================================================
   13. ASSURANCE
   ============================================================ */

.assurance { background: var(--white); }

.assurance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border: 1px solid var(--light-grey);
  border-radius: 8px;
  padding: 32px;
}

.assurance-item { text-align: center; padding: 8px; }

.assurance-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--cream);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border: 2px solid var(--gold-pale);
}

.assurance-title { font-size: 13px; font-weight: 600; color: var(--black); margin-bottom: 4px; letter-spacing: 0.02em; }
.assurance-desc  { font-size: 12px; color: var(--grey); line-height: 1.5; }

.assurance-brand {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--maroon);
  text-align: center;
  margin-bottom: 8px;
}

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


/* ============================================================
   14. EXCHANGE PROGRAM
   ============================================================ */

.exchange { background: var(--cream); }

.exchange-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.exchange-visual {
  border-radius: 8px;
  overflow: hidden;
  height: 360px;
  background: linear-gradient(135deg, #1a5050, #0d3030);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.exchange-title { font-family: var(--font-serif); font-size: 36px; font-weight: 400; margin-bottom: 16px; color: var(--black); }
.exchange-title span { color: var(--gold); }

.exchange-desc { font-size: 14px; color: var(--grey); margin-bottom: 28px; line-height: 1.8; }

.exchange-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

.exchange-feature { display: flex; gap: 12px; align-items: flex-start; }

.ef-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.ef-text h4 { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.ef-text p  { font-size: 12px; color: var(--grey); line-height: 1.4; }


/* ============================================================
   15. CURATED FOR YOU
   ============================================================ */

.curated-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 32px;
}

.curated-tab {
  padding: 9px 24px;
  border-radius: 24px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--light-grey);
  color: var(--grey);
  transition: all var(--transition);
  background: var(--white);
}

.curated-tab.active,
.curated-tab:hover { background: var(--maroon); border-color: var(--maroon); color: #fff; }

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

.curated-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all var(--transition);
  cursor: pointer;
}

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

.curated-img {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}

.cu1 { background: linear-gradient(135deg, #f8e8d0, #e0c898); }
.cu2 { background: linear-gradient(135deg, #e8f0e8, #b8d8b0); }
.cu3 { background: linear-gradient(135deg, #f0e8f0, #c8a8c8); }
.cu4 { background: linear-gradient(135deg, #e8eef8, #a8b8d8); }

.curated-body { padding: 16px; }

.curated-cat  { font-size: 10px; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.curated-name { font-size: 14px; font-weight: 500; color: var(--black); margin-bottom: 8px; }

.curated-price  { font-size: 15px; font-weight: 600; color: var(--maroon); }
.curated-rating { font-size: 12px; color: var(--gold); margin-top: 4px; }

.add-cart-btn {
  margin-top: 10px;
  width: 100%;
  padding: 8px;
  background: var(--cream);
  border: 1px solid var(--light-grey);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--black);
  text-transform: uppercase;
  transition: all var(--transition);
  cursor: pointer;
}

.add-cart-btn:hover { background: var(--maroon); color: #fff; border-color: var(--maroon); }


/* ============================================================
   16. PROMO DUO
   ============================================================ */

.promo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.promo-card {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  min-height: 280px;
  display: flex;
}

.promo-bg       { position: absolute; inset: 0; }
.promo-gift     { background: linear-gradient(135deg, #c8a0a8 0%, #8a4858 100%); }
.promo-exchange { background: linear-gradient(135deg, #c8b870 0%, #7a6818 100%); }

.promo-content {
  position: relative;
  z-index: 1;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.promo-tag {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.8;
}

.promo-title { font-family: var(--font-serif); font-size: 30px; font-weight: 400; margin-bottom: 12px; line-height: 1.2; }
.promo-desc  { font-size: 13px; opacity: 0.85; margin-bottom: 24px; line-height: 1.7; }

.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--black);
  padding: 11px 24px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
  transition: all var(--transition);
  width: fit-content;
}

.btn-white:hover { background: #fff; }

.promo-deco {
  position: absolute;
  right: -30px;
  bottom: -30px;
  font-size: 160px;
  opacity: 0.08;
  pointer-events: none;
}


/* ============================================================
   17. EXPERIENCE
   ============================================================ */

.experience { background: var(--cream); }

.experience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.exp-card {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  height: 240px;
  cursor: pointer;
}

.exp-bg {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  color: rgba(255, 255, 255, 0.25);
}

.exp-card:hover .exp-bg { transform: scale(1.05); }

.e1 { background: linear-gradient(135deg, #b08040, #604010); }
.e2 { background: linear-gradient(135deg, #408080, #102020); }
.e3 { background: linear-gradient(135deg, #203060, #080c20); }

.exp-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  padding: 24px 20px 18px;
  color: #fff;
}

.exp-label h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 400; }
.exp-label p  { font-size: 12px; opacity: 0.75; margin-top: 3px; }


/* ============================================================
   18. DIGITAL GOLD BANNER
   ============================================================ */

.digital-gold {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1208 100%);
  padding: 48px 0;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.digital-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(181, 136, 43, 0.12) 0%, transparent 70%);
}

.digital-gold-inner { position: relative; z-index: 1; }

.digital-gold-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-family: var(--font-serif);
  font-weight: 300;
  margin-bottom: 12px;
}

.digital-gold-tag strong { color: var(--gold-light); font-weight: 500; }
.digital-gold-sub        { font-size: 13px; opacity: 0.6; letter-spacing: 0.06em; }


/* ============================================================
   19. BESTSELLERS
   ============================================================ */

.bs-section {
  padding: 72px 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.bs-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
}

.bs-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.bs-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--black);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.bs-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--maroon);
  text-decoration: none;
  white-space: nowrap;
  transition: gap 0.2s ease, color 0.2s ease;
}

.bs-view-all:hover { color: var(--gold); gap: 10px; }

/* Tabs */
.bs-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.bs-tab {
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bs-tab:hover  { border-color: var(--gold); color: var(--maroon); }
.bs-tab.active { background: var(--maroon); border-color: var(--maroon); color: #fff; }

/* Grid */
.bs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* Card */
.bs-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
}

.bs-card.bs-revealed { opacity: 1; transform: translateY(0); }
.bs-card:hover       { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10); transform: translateY(-4px); }
.bs-card.hidden      { display: none; }

/* Rank */
.bs-rank {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.bs-rank--1 { background: var(--gold); color: #fff; }
.bs-rank--2 { background: #a8a8a8;     color: #fff; }
.bs-rank--3 { background: #b87333;     color: #fff; }

/* Badges */
.bs-badges {
  position: absolute;
  top: 12px;
  right: 44px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.bs-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}

.bs-badge--sale { background: var(--maroon); color: #fff; }
.bs-badge--new  { background: #2a7a4e;       color: #fff; }
.bs-badge--out  { background: #888;           color: #fff; }

/* Wishlist */
.bs-wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--light-grey);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--black);
}

.bs-wishlist:hover,
.bs-wishlist.active { background: var(--maroon); border-color: var(--maroon); color: #fff; }

/* Image */
.bs-img-wrap {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f8f6f3;
}

.bs-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.bs-card:hover .bs-img { transform: scale(1.05); }

.bs-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
}

/* Info */
.bs-info {
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bs-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.bs-name { font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0; color: var(--black); }
.bs-name a { color: inherit; text-decoration: none; transition: color 0.2s; }
.bs-name a:hover { color: var(--maroon); }

/* Stars */
.bs-rating { display: flex; align-items: center; gap: 6px; }
.bs-stars   { display: flex; gap: 1px; }
.bs-star    { font-size: 13px; color: #ddd; line-height: 1; }
.bs-star.filled { color: var(--gold); }
.bs-rating-count { font-size: 11px; color: #888; }
.bs-sold         { font-size: 11px; color: #888; margin: 0; }

/* Footer */
.bs-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
}

.bs-price     { font-size: 15px; font-weight: 700; color: var(--maroon); line-height: 1.3; }
.bs-price del { font-weight: 400; color: #aaa; font-size: 12px; margin-right: 3px; }

.bs-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--black);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.bs-cart-btn:hover { background: var(--maroon); transform: scale(1.02); color: #fff; }
.bs-cart-btn.added { background: #2a7a4e; }

.bs-sold-out-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #aaa;
  letter-spacing: 0.04em;
  padding: 9px 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
}

/* Load More */
.bs-load-more-wrap { text-align: center; margin-top: 48px; }

.bs-load-more {
  display: inline-block;
  padding: 13px 40px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--maroon);
  border: 1.5px solid var(--maroon);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.bs-load-more:hover    { background: var(--maroon); color: #fff; }
.bs-load-more:disabled { opacity: 0.4; cursor: not-allowed; }


/* ============================================================
   20. WOOCOMMERCE — CART PAGE
   ============================================================ */

.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
  font-size: 15px;
}

.wc-block-components-formatted-money-amount { font-size: 17px; }

.wc-block-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-panel,
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-coupon,
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item {
  font-size: 15px;
}

a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 32px;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(232, 81, 122, 0.25);
  background: #d4af37;
}

a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:hover:not(:disabled) {
  background: #d4af37bf;
  box-shadow: 0 6px 24px rgba(232, 81, 122, 0.35);
  transform: translateY(-1px);
}

body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
  min-height: 3em;
  background: #d4af37;
  font-size: 17px;
  text-transform: uppercase;
  color: #fff;
  border-radius: 5px;
}

body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):hover {
  background: #d4af37bf;
}

/* ============================================================
   WOOCOMMERCE SHOP PAGE — MODERN RESPONSIVE DESIGN
============================================================ */

/* Main Layout */
.custom-shop-layout{
    /*display:grid;*/
    grid-template-columns:260px 1fr;
    gap:30px;
    max-width:1400px;
    margin:0 auto;
    padding:30px 20px;
    align-items:start;
}

/* =========================
   Sidebar
========================= */
.shop-sidebar{
    background:#fff;
    border:1px solid #ececec;
    border-radius:16px;
    padding:24px;
    position:sticky;
    top:20px;
    box-shadow:0 6px 18px rgba(0,0,0,0.05);
}

.shop-sidebar h3{
    font-size:22px;
    font-weight:700;
    margin-bottom:20px;
    color:#111;
}

.shop-sidebar ul{
    list-style:none;
    padding:0;
    margin:0;
}

.shop-sidebar ul li{
    border-bottom:1px solid #f3f3f3;
}

.shop-sidebar ul li:last-child{
    border-bottom:none;
}

.shop-sidebar ul li a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 0;
    color:#333;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    transition:0.3s ease;
}

.shop-sidebar ul li a:hover{
    color:#b8860b;
    padding-left:6px;
}

/* =========================
   Result Count + Sorting
========================= */
.woocommerce .woocommerce-result-count{
    margin:0;
    font-size:15px;
    font-weight:600;
    color:#555;
}

.woocommerce .woocommerce-ordering{
    margin:0 0 25px;
    float:right;
}

.woocommerce .woocommerce-ordering select{
    height:46px;
    padding:0 16px;
    border:1px solid #ddd;
    border-radius:10px;
    background:#fff;
    font-size:14px;
    font-weight:500;
    min-width:220px;
    cursor:pointer;
    transition:0.3s;
}

.woocommerce .woocommerce-ordering select:focus{
    border-color:#b8860b;
    outline:none;
}

/* =========================
   Product Grid
========================= */
.woocommerce ul.products{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:24px;
    margin:0 !important;
    padding:0 !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after{
    display:none !important;
}

/* =========================
   Product Card
========================= */
.woocommerce ul.products li.product{
    width:100% !important;
    margin:0 !important;
    float:none !important;
    clear:none !important;

    display:flex;
    flex-direction:column;

    background:#fff;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #eee;
    box-shadow:0 4px 14px rgba(0,0,0,0.04);

    transition:all 0.35s ease;
    position:relative;
}

.woocommerce ul.products li.product:hover{
    transform:translateY(-6px);
    box-shadow:0 14px 30px rgba(0,0,0,0.10);
}

/* =========================
   Product Image
========================= */
.woocommerce ul.products li.product a img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    margin:0 !important;
    transition:0.4s ease;
}

.woocommerce ul.products li.product:hover img{
    transform:scale(1.04);
}

/* =========================
   Product Content
========================= */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:15px;
    line-height:1.5;
    font-weight:600;
    color:#111;
    padding:16px 16px 8px;
    margin:0;
    min-height:70px;
}

/* Price */
.woocommerce ul.products li.product .price{
    padding:0 16px;
    margin-bottom:14px;
    color:#b8860b;
    font-size:20px;
    font-weight:700;
}

/* Rating */
.woocommerce ul.products li.product .star-rating{
    margin:0 16px 14px;
}

/* =========================
   Add To Cart Button
========================= */
.woocommerce ul.products li.product .button{
    margin:auto 16px 16px;
    width:calc(100% - 32px);

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

    min-height:46px;
    padding:12px;

    background:#111;
    color:#fff;
    border:none;
    border-radius:10px;

    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;

    transition:0.3s ease;
}

.woocommerce ul.products li.product .button:hover{
    background:#b8860b;
    color:#fff;
}

/* Sale Badge */
.woocommerce span.onsale{
    top:12px !important;
    left:12px !important;
    margin:0 !important;

    min-height:auto;
    min-width:auto;

    padding:6px 12px;
    border-radius:30px;

    background:#b8860b;
    color:#fff;

    font-size:12px;
    font-weight:700;
    line-height:1.4;
}

/* =========================
   Pagination
========================= */
.woocommerce nav.woocommerce-pagination{
    margin-top:40px;
    text-align:center;
}

.woocommerce nav.woocommerce-pagination ul{
    border:none;
}

.woocommerce nav.woocommerce-pagination ul li{
    border:none;
    margin:0 5px;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;
    background:#fff;
    border:1px solid #eee;

    color:#111;
    font-weight:600;

    transition:0.3s;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
    background:#111;
    color:#fff;
    border-color:#111;
}

/* =========================
   Tablet
========================= */
@media(max-width:991px){

    .custom-shop-layout{
        grid-template-columns:1fr;
    }

    .shop-sidebar{
        position:relative;
        top:0;
    }

    .woocommerce ul.products{
        grid-template-columns:repeat(3,1fr);
        gap:18px;
    }
}

/* =========================
   Mobile
========================= */
@media(max-width:767px){

    .custom-shop-layout{
        padding:20px 12px;
    }

    .woocommerce .woocommerce-ordering{
        float:none;
        width:100%;
        margin-top:15px;
    }

    .woocommerce .woocommerce-ordering select{
        width:100%;
        min-width:100%;
    }

    .woocommerce ul.products{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title{
        font-size:13px;
        min-height:58px;
        padding:12px 12px 6px;
    }

    .woocommerce ul.products li.product .price{
        font-size:16px;
        padding:0 12px;
    }

    .woocommerce ul.products li.product .button{
        margin:auto 12px 12px;
        width:calc(100% - 24px);
        min-height:42px;
        font-size:12px;
    }
}

/* =========================
   Small Mobile
========================= */
@media(max-width:480px){

    .woocommerce ul.products{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .woocommerce ul.products li.product{
        border-radius:12px;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title{
        font-size:12px;
        line-height:1.4;
    }

    .woocommerce ul.products li.product .price{
        font-size:15px;
    }

    .woocommerce ul.products li.product .button{
        font-size:11px;
        letter-spacing:0;
        padding:10px;
    }
}


/* ============================================================
   22. WOOCOMMERCE — MY ACCOUNT
   ============================================================ */

/*.woocommerce-account .woocommerce {
  display: flex;
  gap: 25px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 15px;
  align-items: flex-start;
}*/

.woocommerce-account .woocommerce {
    display: flex;
    gap: 5px;
    max-width: 1400px;
    margin: 40px auto;
    padding: 0px 0px;
    align-items: flex-start;
}

.main-title {
    font-size: 32px;
    font-weight: 700;
    color: #7b1c2e;
    text-align: center;
    position: relative;
    margin: 40px 0 30px;
    padding-bottom: 12px;
    letter-spacing: 0.5px;
    text-transform: capitalize;
}

.main-title::after {
    content: "";
    width: 80px;
    height: 3px;
    background: #7b1c2e;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 10px;
}

@media (max-width: 768px) {
    .main-title {
        font-size: 26px;
        margin: 30px 0 20px;
    }

    .main-title::after {
        width: 60px;
    }
}

/* Sidebar */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 260px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #f0e6e8;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul  { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { margin-bottom: 10px; }

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: 0.3s;
  border-left: 4px solid transparent;
  background: #fafafa;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  background: #7b1c2e;
  color: #fff;
  border-left: 4px solid #5a1422;
}

/* Content Area */
.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1;
  background: #fff;
  border: 1px solid #f0e6e8;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.woocommerce-account .woocommerce-MyAccount-content h2 { color: #7b1c2e; margin-bottom: 15px; }

/* Orders Table */
.woocommerce-account table.shop_table { width: 100%; border-collapse: collapse; border-radius: 10px; overflow: hidden; }

.woocommerce-account table.shop_table th {
  background: #7b1c2e;
  color: #fff;
  padding: 12px;
  text-align: left;
  font-weight: 500;
}

.woocommerce-account table.shop_table td { padding: 12px; border-bottom: 1px solid #eee; }

/* Buttons */
.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account a.button {
  background: #7b1c2e !important;
  color: #fff !important;
  border-radius: 6px;
  padding: 10px 16px;
  border: none;
  transition: 0.3s;
  font-weight: 500;
}

.woocommerce-account .button:hover { background: #5a1422 !important; }


/* ============================================================
   23. FOOTER
   ============================================================ */

.site-footer { 
  background: #000; 
  /*background: var(--footer-bg); */
  color: rgba(255, 255, 255, 0.75); padding: 60px 0 0; }

.footer-grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo { font-family: var(--font-serif); font-size: 24px; color: #fff; margin-bottom: 12px; }
.footer-logo span { color: var(--gold); }

.footer-tagline { font-size: 12px; color: rgba(255, 255, 255, 0.4); line-height: 1.6; margin-bottom: 20px; }

.footer-social { display: flex; gap: 10px; }

.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  transition: all var(--transition);
}

.footer-social a:hover { border-color: var(--gold); color: var(--gold); }

.footer-col h4 {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 16px;
}

.footer-col ul li { margin-bottom: 10px; }

.footer-col ul li a { font-size: 13px; color: rgba(255, 255, 255, 0.55); transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--gold-light); }

.footer-bottom {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.footer-bottom-links { display: flex; gap: 20px; }

.footer-bottom-links a { color: rgba(255, 255, 255, 0.4); transition: color var(--transition); }
.footer-bottom-links a:hover { color: rgba(255, 255, 255, 0.7); }

.payment-icons { display: flex; gap: 8px; }

.payment-icon {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}


/* ============================================================
   24. BACK TO TOP
   ============================================================ */

.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(123, 28, 46, 0.4);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  transition: all var(--transition);
}

.back-to-top.visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover   { background: var(--maroon-light); }


/* ============================================================
   25. UTILITIES
   ============================================================ */

.divider { width: 100%; height: 1px; background: var(--light-grey); margin: 0 auto; }

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

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

.view-all-wrap { text-align: center; margin-top: 28px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--maroon);
  border-bottom: 1px solid var(--maroon);
  padding-bottom: 2px;
  transition: gap var(--transition);
}

.link-arrow:hover { gap: 10px; }


/* ============================================================
   26. MEDIA QUERIES
   ============================================================ */

/* ── 26a. ≤ 1300px ── */
@media (max-width: 1300px) {
  .bs-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── 26b. ≤ 1100px ── */
@media (max-width: 1100px) {
  .bs-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 26c. ≤ 1024px ── */
@media (max-width: 1024px) {
  .collections-grid                   { grid-template-columns: 1fr 1fr; }
  .coll-card:first-child              { grid-row: auto; }
  .coll-placeholder.c1               { min-height: 260px; }
  .coll-card:first-child .coll-card-img { min-height: 260px; }
  .category-grid                      { grid-template-columns: repeat(4, 1fr); }
  .world-grid                         { grid-template-columns: repeat(2, 1fr); }
  .curated-grid                       { grid-template-columns: repeat(2, 1fr); }
  .diamond-banner-inner               { gap: 32px; padding: 0 32px; }
  .diamond-title                      { font-size: 34px; }
  .footer-grid                        { grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
}

/* ── 26d. ≤ 992px ── */
@media (max-width: 992px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* ── 26e. ≤ 900px (mobile nav) ── */
@media (max-width: 900px) {
  /* Show hamburger */
  .hamburger { display: flex; }

  /* Force nav wrapper visible */
  .main-nav { display: block !important; }

  /* Dropdown panel */
  .main-nav > ul {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 2px solid var(--gold);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav > ul.open { display: flex; }

  /* Level 1 <li> */
  .main-nav > ul > li {
    width: 100%;
    border-bottom: 1px solid var(--light-grey);
  }

  .main-nav > ul > li:last-child { border-bottom: none; }

  /* Level 1 link */
  .main-nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--black);
    white-space: normal;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
  }

  /* Arrow pushed to right edge */
  .main-nav > ul > li > a .nav-arrow { margin-left: auto; }

  /* Disable desktop underline */
  .main-nav > ul > li > a::after { display: none; }

  /* Active / open state */
  .main-nav > ul > li.open > a {
    color: var(--maroon);
    background: rgba(200, 169, 110, 0.08);
    border-left: 3px solid var(--gold);
    padding-left: 13px;
  }

  .main-nav > ul > li.active > a        { color: var(--maroon); }
  .main-nav > ul > li.open > a .nav-arrow { transform: rotate(180deg); }

  /* Mega panel (mobile, in-flow) */
  .mega-menu {
    display: none;
    position: static;
    box-shadow: none;
    border-top: none;
    border-left: 3px solid var(--gold);
    margin-left: 16px;
    animation: none;
    background: var(--white);
    overflow: hidden;
  }

  /* Fallback: CSS .open still opens the menu if JS fails */
  .main-nav > ul > li.open > .mega-menu { display: block; max-height: none; }

  .mega-menu-inner { flex-direction: column; padding: 0; gap: 0; max-width: 100%; }

  /* Level 2 column */
  .mega-col {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--light-grey);
    padding: 0;
    margin: 0;
  }

  .mega-col:last-child { border-bottom: none; }

  /* Level 2 title */
  .mega-col-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 0;
    border-bottom: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--maroon);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
  }

  /* Arrow pushed right */
  .mega-col-title .col-arrow { margin-left: auto; }

  /* Open state */
  .mega-col.open > .mega-col-title             { color: var(--gold); }
  .mega-col.open > .mega-col-title .col-arrow  { transform: rotate(180deg); }

  /* Level 3 list */
  .mega-col .col-children {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 0 0 8px;
    margin: 0;
    list-style: none;
  }

  .mega-col.open .col-children { display: flex; }

  /* Level 3 links */
  .mega-col .col-children li a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--black);
    padding: 10px 16px 10px 28px;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: color 0.2s, background 0.2s;
  }

  .mega-col .col-children li:last-child a { border-bottom: none; }

  .mega-col .col-children li a::before {
    content: '›';
    color: var(--gold);
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
  }

  .mega-col .col-children li a:hover {
    color: var(--maroon);
    background: rgba(200, 169, 110, 0.06);
  }

  /* View all */
  .mega-view-all { display: none; }

  .mega-col.open .mega-view-all {
    display: block;
    padding: 8px 16px 12px 28px;
    border-top: 1px dashed var(--light-grey);
  }

  .nav-cat-thumb { width: 26px; height: 26px; flex-shrink: 0; }
}

/* ── 26f. ≤ 768px ── */
@media (max-width: 768px) {
  /* Navigation */
  .main-nav { display: block !important; }

  .main-nav > ul > li > a { justify-content: flex-start; gap: 10px; }
  .main-nav > ul > li > a .nav-arrow { margin-left: auto; }

  .mega-col-title { justify-content: flex-start; gap: 8px; }
  .mega-col-title .col-arrow { margin-left: auto; }

  /* Header */
  /*.header-top        { height: 56px; }*/
  .header-top        { height: 97px; }
  .logo-text         { font-size: 22px; }
  .header-search     { display: none; }
  .header-search.show{ display: flex; }

  /* Hamburger (legacy fallback) */
  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
  }

  .hamburger span { display: block; width: 22px; height: 2px; background: #fff; position: relative; }

  .hamburger span::before,
  .hamburger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
  }

  .hamburger span::before { top: -6px; }
  .hamburger span::after  { top: 6px; }

  /* Hero */
  .hero-slider        { height: auto; min-height: 150px; }
  .hero-slide-inner   { flex-direction: column; padding: 32px 20px; gap: 24px; }
  .hero-title         { font-size: 38px; }
  .hero-image-wrap    { width: 100%; height: 200px; }
  .hero-jewel         { width: 140px; height: 140px; font-size: 60px; }

  /* Grids */
  .collections-grid                             { grid-template-columns: 1fr; gap: 10px; }
  .category-grid, .category-grid-2             { grid-template-columns: repeat(3, 1fr); }
  .trending-grid                                { grid-template-columns: 1fr; gap: 12px; }
  .world-grid                                   { grid-template-columns: 1fr 1fr; }
  .arrivals-grid                                { grid-template-columns: 1fr; }
  .diamond-banner-inner                         { flex-direction: column; padding: 0 24px; text-align: center; }
  .diamond-title                                { font-size: 28px; }
  .assurance-grid                               { grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px; }
  .exchange-inner                               { grid-template-columns: 1fr; }
  .curated-grid                                 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .promo-duo                                    { grid-template-columns: 1fr; }
  .experience-grid                              { grid-template-columns: 1fr; }
  .footer-grid                                  { grid-template-columns: 1fr 1fr; }
  .bs-grid                                      { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .custom-shop-layout                           { grid-template-columns: 1fr; }

  /* Bestsellers card info */
  .bs-info      { padding: 10px 10px 14px; gap: 4px; }
  .bs-name      { font-size: 13px; }
  .bs-price     { font-size: 13px; }
  .bs-cart-btn  { font-size: 11px; padding: 8px 6px; }
  .bs-cart-btn svg { display: none; }
  .bs-section   { padding: 40px 12px; }

  /* WooCommerce */
  .woocommerce ul.products                { grid-template-columns: 1fr; }
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering      { float: none; width: 100%; margin-bottom: 15px; }
  .woocommerce .woocommerce-ordering select { width: 100%; min-width: 100%; }

  /* My Account */
  .woocommerce-account .woocommerce       { flex-direction: column; }
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { width: 100%; }

  /* Footer */
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  /* Section spacing */
  .section { padding: 40px 0; }
}

/* ── 26g. ≤ 480px ── */
@media (max-width: 480px) {
  .category-grid  { grid-template-columns: repeat(3, 1fr); }
  .world-grid     { grid-template-columns: 1fr; }
  .curated-grid   { grid-template-columns: 1fr; }
  .assurance-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid    { grid-template-columns: 1fr; }
  .hero-title     { font-size: 30px; }
  .bs-grid        { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .bs-section     { padding: 32px 10px; }
  .section        { padding: 25px 0; }

  .section-title  { margin-bottom: 5px; font-size: 22px; }
  .section-header { margin-bottom: 24px; }
}

/* ── 26h. ≤ 400px ── */
@media (max-width: 400px) {
  .main-nav > ul > li > a         { font-size: 14px; padding: 13px 12px; }
  .mega-col-title                 { font-size: 11px; padding: 11px 12px; }
  .mega-col .col-children li a   { padding-left: 20px; }
}