/* ═══════════════════════════════════════════════════════════════
   commondesign.css — Oma's Whole Foods
   Central design control file. Connect all pages to this file
   to manage shared UI styles from one place.
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   SECTION 1 · DESIGN TOKENS
   Change any value here to update the whole site instantly.
─────────────────────────────────────────────────────────────── */

:root {

  /* — Brand Colours — */
  --color-black:        #111110;
  --color-dark:         #1E1D1B;
  --color-amber:        #C8811A;
  --color-amber-light:  #E8A83A;
  --color-green:        #2C5F2E;
  --color-cream:        #FAF7F2;
  --color-warm:         #F0EBE1;
  --color-mid:          #7A7468;
  --color-white:        #FFFFFF;

  /* — Typography — */
  --font-display:       'Playfair Display', serif;
  --font-body:          'Inter', sans-serif;

  /* — Layout — */
  --max-width:          1200px;
  --container-padding:  24px;
  --radius:             12px;


  /* ─────────────────────────────────────────────────────────────
     NAVBAR TOKENS  ← Edit these to restyle the nav everywhere
  ───────────────────────────────────────────────────────────── */

  /* Background & border */
  --nav-bg:                 rgba(250, 247, 242, 0.96);
  --nav-blur:               16px;
  --nav-border-color:       rgba(200, 129, 26, 0.12);
  --nav-border-width:       1px;

  /* Dimensions — floating pill */
--nav-sticky-top:         0;
--nav-radius:             0;
--nav-margin:             0;
--nav-shadow:             none;

  /* Logo */
  --nav-logo-font:          var(--font-display);
  --nav-logo-font-size:     15px;
  --nav-logo-font-weight:   700;
  --nav-logo-color:         var(--color-dark);
  --nav-logo-img-height:    36px;
  --nav-logo-gap:           8px;

  /* Nav links */
  --nav-link-font:          var(--font-body);
  --nav-link-font-size:     14px;
  --nav-link-font-weight:   500;
  --nav-link-color:         var(--color-mid);
  --nav-link-color-hover:   var(--color-amber);
  --nav-link-gap:           36px;

  /* CTA area */
  --nav-cta-gap:            10px;

  /* Hamburger (mobile) */
  --nav-hamburger-bar-width:   22px;
  --nav-hamburger-bar-height:  2px;
  --nav-hamburger-bar-gap:     4px;
  --nav-hamburger-bar-color:   var(--color-dark);
  --nav-hamburger-bar-radius:  2px;

  /* Mobile overlay menu — dark transparent */
  --nav-mobile-bg:              rgba(20, 20, 20, 0.88);
  --nav-mobile-blur:            12px;
  --nav-mobile-border-color:    rgba(255,255,255,0.08);
  --nav-mobile-radius:          20px;
  --nav-mobile-padding:         24px 20px;
  --nav-mobile-link-font-size:  15px;
  --nav-mobile-link-font-weight:500;
  --nav-mobile-link-color:      rgba(255,255,255,0.90);
  --nav-mobile-link-divider:    rgba(255,255,255,0.08);
  --nav-mobile-link-active:     #C8811A;
}


/* ───────────────────────────────────────────────────────────────
   SECTION 2 · FONT IMPORTS
   Loaded here so any connected page inherits them automatically.
─────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,500&family=Inter:wght@300;400;500;600&display=swap');


/* ───────────────────────────────────────────────────────────────
   SECTION 3 · NAVBAR STYLES
   All rules read from the tokens above — edit tokens, not here.
─────────────────────────────────────────────────────────────── */

/* ── Floating pill wrapper ── */
nav#navbar {
  position: sticky;
  top: var(--nav-sticky-top);
  z-index: var(--nav-z-index);
  background: transparent;
  pointer-events: none;
}

/* The actual pill */
nav#navbar .container {
  pointer-events: auto;
  background: var(--nav-bg);
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  border-radius: var(--nav-radius);
  box-shadow: var(--nav-shadow);
  margin: 0 auto;
  padding: 0 20px;
}

/* Inner row */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

/* ── Logo ── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--nav-logo-gap);
  text-decoration: none;
}

.nav-logo img {
  height: var(--nav-logo-img-height);
  width: auto;
  object-fit: contain;
  background-color: transparent;
}

.nav-logo-text {
  font-family: var(--nav-logo-font);
  font-size: var(--nav-logo-font-size);
  font-weight: var(--nav-logo-font-weight);
  color: var(--nav-logo-color);
}

/* ── Desktop links ── */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--nav-link-gap);
  list-style: none;
}

.nav-links a {
  font-family: var(--nav-link-font);
  font-size: var(--nav-link-font-size);
  font-weight: var(--nav-link-font-weight);
  color: var(--nav-link-color);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--nav-link-color-hover);
}

/* ── CTA area ── */
.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--nav-cta-gap);
}

/* ── Hamburger button (hidden on desktop) ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: var(--nav-hamburger-bar-gap);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: var(--nav-hamburger-bar-width);
  height: var(--nav-hamburger-bar-height);
  background: var(--nav-hamburger-bar-color);
  border-radius: var(--nav-hamburger-bar-radius);
  transition: all 0.3s;
}

/* ── Mobile overlay menu — floats over page content ── */
.mobile-menu {
  display: none;
  position: absolute;
  top: calc(var(--nav-height) + var(--nav-sticky-top) + 8px);
  left: 16px;
  right: 16px;
  background: var(--nav-mobile-bg);
  backdrop-filter: blur(var(--nav-mobile-blur));
  -webkit-backdrop-filter: blur(var(--nav-mobile-blur));
  border: 1px solid var(--nav-mobile-border-color);
  border-radius: var(--nav-mobile-radius);
  padding: var(--nav-mobile-padding);
  z-index: calc(var(--nav-z-index) + 1);
  pointer-events: auto;
  animation: menuFadeIn 0.2s ease;
}

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

.mobile-menu.open {
  display: block;
}

.mobile-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  font-family: var(--nav-link-font);
  font-size: var(--nav-mobile-link-font-size);
  font-weight: var(--nav-mobile-link-font-weight);
  color: var(--nav-mobile-link-color);
  text-decoration: none;
  border-bottom: 1px solid var(--nav-mobile-link-divider);
  transition: color 0.2s;
}

.mobile-menu a i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  opacity: 0.7;
}

.mobile-menu a:last-child {
  border-bottom: none;
}

.mobile-menu a:hover,
.mobile-menu a.active {
  color: var(--nav-mobile-link-active);
}

.mobile-menu a:hover i,
.mobile-menu a.active i {
  opacity: 1;
}

/* Login button inside mobile menu */
.mobile-menu .mobile-login-btn {
  display: block;
  text-align: center;
  margin-top: 16px;
  padding: 12px;
  background: var(--color-amber);
  color: white !important;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  border-bottom: none !important;
}

.mobile-menu .mobile-login-btn:hover {
  background: #a8681a;
  color: white !important;
}

/* Currency selector inside mobile menu */
.mobile-menu .mobile-currency {
  margin-top: 12px;
  width: 100%;
}

.mobile-menu .mobile-currency .usd-selector {
  width: 100%;
  background: rgba(255,255,255,0.08);
  color: rgba(196, 113, 13, 0.8);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
}

/* ── Responsive breakpoints ── */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .nav-cta .currency-selector,
  .nav-cta .login-link,
  .nav-cta .profile-dropdown {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }
  nav#navbar {
  --nav-sticky-top:   12px;
  --nav-radius:       50px;
  --nav-margin:       0 16px;
  --nav-shadow:       0 4px 24px rgba(0,0,0,0.10);
}
}


/* ───────────────────────────────────────────────────────────────
   SECTION 4 · GLOBAL RESET & OVERFLOW
   Prevents horizontal scroll on all pages.
─────────────────────────────────────────────────────────────── */

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

html, body {
  overflow-x: hidden;
  max-width: 100%;
}


/* ───────────────────────────────────────────────────────────────
   SECTION 5 · PROFILE DROPDOWN
   Avatar button + dropdown menu (login-state controlled by JS).
─────────────────────────────────────────────────────────────── */

.profile-dropdown {
  position: relative;
}

.profile-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ead2a8;
  color: rgb(16, 15, 15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--font-body);
}

.profile-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 44px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 180px;
  overflow: hidden;
  z-index: 999;
}

.profile-menu-header {
  padding: 12px 16px;
  font-weight: 600;
  font-size: 13px;
  color: #1a1a1a;
  border-bottom: 1px solid #f0f0f0;
}

.profile-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 13px;
  transition: background 0.2s;
}

.profile-menu a:hover {
  background: #f9f5f0;
}

.profile-menu a:last-child {
  color: #c0392b;
  border-top: 1px solid #f0f0f0;
}

.profile-menu.open {
  display: block;
}


/* ───────────────────────────────────────────────────────────────
   SECTION 6 · LOGIN LINK
   Pill button shown when user is logged out.
─────────────────────────────────────────────────────────────── */

.login-link {
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  background: #e8a020;
  padding: 8px 16px;
  border-radius: 50px;
  transition: background 0.2s;
}

.login-link:hover {
  background: #c07010;
}


/* ───────────────────────────────────────────────────────────────
   SECTION 7 · CURRENCY SELECTOR
   Frosted-glass dropdown in the nav CTA area.
─────────────────────────────────────────────────────────────── */

.currency-selector {
  position: relative;
}

.usd-selector {
  background: rgba(255, 255, 255, 0.1);
  color: #888;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.usd-selector:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.usd-selector option {
  background: rgb(20, 20, 20);
  color: white;
}


/* ───────────────────────────────────────────────────────────────
   SECTION 8 · CART BUTTON
   Circular white button with red item-count badge.
─────────────────────────────────────────────────────────────── */

.cart-btn {
  background: white;
  border: none;
  color: black;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.cart-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  background: #FF2626;
  color: white;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  text-align: center;
  line-height: 1;
  border: 1px solid transparent;
}


/* ───────────────────────────────────────────────────────────────
   SECTION 9 · CART SIDEBAR PANEL
   Slides in from the right. Blurred when logged out.
─────────────────────────────────────────────────────────────── */

.cart-tab {
  position: fixed;
  inset: 3% -500px 0 auto;
  width: 22rem;
  background-color: #141414;
  color: white;
  padding-block: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.1) -10px -10px 20px;
  transition: inset 0.5s ease-in-out;
}

.cart-tab-active {
  inset: 3% 0px 0 auto;
}

.cart-tab.logged-out .cart-list {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

.cart-tab h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 1rem 0;
  color: white;
  text-align: center;
  width: 100%;
  padding: 0 2rem;
}


/* ───────────────────────────────────────────────────────────────
   SECTION 10 · CART ITEM LIST
   Scrollable list of items inside the cart panel.
─────────────────────────────────────────────────────────────── */

.cart-list {
  flex: 1;
  width: 100%;
  margin-top: 0.5rem;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cart-list::-webkit-scrollbar {
  width: 0;
  display: none;
}

.cart-list:empty::before {
  content: "Your cart is empty";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #888;
  font-family: var(--font-body);
  font-size: 1.1rem;
  text-align: center;
  padding: 2rem;
}

.item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.8rem;
  border-bottom: 1px solid #333;
  transition: all 0.5s ease-in-out;
}

.item-slide-out {
  transform: translateX(50%);
}

.item:hover {
  background-color: #1a1a1a;
}

.cart-list .item:nth-child(even) {
  background-color: #1E1E1E;
}

.cart-list .item:nth-child(even):hover {
  background-color: #252525;
}

.item img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.item > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.item h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  margin: 0;
  line-height: 1.4;
}

.item .item-category {
  color: #FF007F;
  font-size: 0.85rem;
  font-weight: 400;
  margin: 0.2rem 0 0.5rem 0;
}

.item-cost {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.item .item-total {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  color: #4DFFA0;
  margin: 0;
}

.item .item-oldprice {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  color: #888;
  text-decoration: line-through;
  margin: 0;
}


/* ───────────────────────────────────────────────────────────────
   SECTION 11 · CART QUANTITY CONTROLS
   +/− buttons and item count per cart row.
─────────────────────────────────────────────────────────────── */

.quantity-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.item .quantity-btn {
  background-color: #D9D9D9;
  color: #141414;
  border: none;
  border-radius: 50%;
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.8rem;
}

.item .quantity-btn:hover {
  background-color: #FF007F;
  color: white;
  transform: scale(1.1);
}

.item .item-value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: white;
  min-width: 1.5rem;
  text-align: center;
}

.remove-btn {
  background: none;
  border: none;
  color: #ff6b6b;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.remove-btn:hover {
  color: #ff4757;
  background-color: rgba(255, 71, 87, 0.1);
}


/* ───────────────────────────────────────────────────────────────
   SECTION 12 · CART TOTAL & ACTION BUTTONS
   Total row and Close/Checkout buttons at the bottom of the panel.
─────────────────────────────────────────────────────────────── */

.total-container {
  width: 100%;
  padding: 1.5rem 2rem;
  border-top: 2px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1a1a1a;
}

.total-container h4 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.3rem;
  color: white;
}

.cart-total {
  color: #4DFFA0;
  font-size: 1.4rem;
}

.btn-container {
  width: 100%;
  padding: 0 2rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-top: 1rem;
}

.btn-container .btn-close,
.btn-container .btn-checkout {
  width: 100%;
  background-color: #D9D9D9;
  color: #141414;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  padding: 1rem 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-in-out;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-container .btn-close:hover {
  background-color: #ff6b6b;
  color: white;
  transform: translateY(-2px);
}

.btn-container .btn-checkout {
  background: linear-gradient(135deg, #FF007F, #D60088);
  color: white;
}

.btn-container .btn-checkout:hover {
  background: linear-gradient(135deg, #FF338F, #E6008E);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 0, 127, 0.4);
}


/* ───────────────────────────────────────────────────────────────
   SECTION 13 · FOOTER
   Peach-background footer with 5-column grid layout.
─────────────────────────────────────────────────────────────── */

.footer {
  background-color: #ffdab9;
  padding: 60px 40px 20px;
  color: #1a1a1a;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 40px;
}

.brand-name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #1a1a1a;
}

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

.social-links a {
  color: #1a1a1a;
  font-size: 18px;
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: #1a75ff;
}

.footer-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #1a1a1a;
}

.footer-section ul {
  list-style: none;
}

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

.footer-section ul li a {
  color: #1a1a1a;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.footer-section ul li a:hover {
  color: #1a75ff;
}

.work-time p {
  font-size: 14px;
  margin-bottom: 5px;
}

.work-time p strong {
  font-weight: 600;
}

.payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.payment-icons img {
  height: 24px;
  width: auto;
  object-fit: contain;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 14px;
}

.footer-bottom p {
  color: #1a1a1a;
}

.terms-link {
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.3s ease;
}

.terms-link:hover {
  color: #1a75ff;
}


/* ───────────────────────────────────────────────────────────────
   SECTION 14 · RESPONSIVE — LARGE TABLET (max-width: 1200px)
─────────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .cart-btn {
    width: 36px;
    height: 36px;
  }

  .cart-count {
    width: 14px;
    height: 14px;
    font-size: 11px;
    top: -4px;
    right: -4px;
  }

  .usd-selector {
    padding: 7px 8px;
    font-size: 0.85rem;
  }

  .cart-tab {
    width: 24rem;
  }

  .item {
    padding: 1rem;
  }

  .item img {
    width: 4.5rem;
    height: 4.5rem;
  }

  .btn-container .btn-close,
  .btn-container .btn-checkout {
    padding: 1.2rem 2rem;
    font-size: 1.1rem;
  }

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


/* ───────────────────────────────────────────────────────────────
   SECTION 15 · RESPONSIVE — MOBILE (max-width: 780px)
─────────────────────────────────────────────────────────────── */

@media screen and (max-width: 780px) {

  /* Hide currency selector and login link on mobile */
  .currency-selector {
    display: none;
  }

  #loginLink {
    display: none !important;
  }

  /* Mobile slide-in nav overlay */
  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    background-color: #141414ea;
    backdrop-filter: blur(3px);
    position: absolute;
    justify-content: center;
    align-items: center;
    left: -100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    font-family: var(--font-body);
    transform: translateX(-50%);
    color: white;
    text-decoration: none;
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.5s ease-in-out;
    gap: 1rem;
    padding: 1.8rem;
    width: 87%;
    border-radius: 16px;
    top: 0;
    bottom: 0;
    margin-top: 85px;
    height: calc(60vh - 70px);
    min-height: 300px;
  }

  .mobile-nav-links-active {
    left: 50%;
    transform: translateX(-50%);
  }

  .mobile-nav-links a {
    font-size: 1.1rem;
    transition: all 0.3s ease;
    color: white;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-start;
  }

  .mobile-nav-links a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
  }

  .mobile-nav-links a i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    opacity: 0.8;
  }

  .mobile-nav-links #loginLink {
    display: block !important;
  }

  /* Mobile currency selector (shown inside mobile menu) */
  .mobile-currency-selector {
    width: 100%;
    position: relative;
  }

  .mobile-currency-selector .usd-selector {
    width: 100%;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    background-color: transparent;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-align: left;
  }

  .mobile-currency-selector::after {
    content: "▾";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    pointer-events: none;
    font-size: 1.2rem;
    z-index: 3;
    transition: transform 0.3s ease;
  }

  .mobile-currency-selector .dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #141414;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
  }

  .mobile-currency-selector:focus-within .dropdown-options,
  .mobile-currency-selector.focused .dropdown-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .mobile-currency-selector:focus-within::after,
  .mobile-currency-selector.focused::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .dropdown-option {
    padding: 0.75rem 1.5rem;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 1rem;
  }

  .dropdown-option:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .mobile-currency-selector:focus-within,
  .mobile-currency-selector.focused {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px 8px 0 0;
  }

  /* Cart panel — narrower on mobile */
  .cart-tab {
    width: 20rem;
    padding-block: 1.5rem;
  }

  .item {
    padding: 0.7rem;
    gap: 0.8rem;
  }

  .item img {
    width: 3.5rem;
    height: 3.5rem;
  }

  .item h4 { font-size: 0.95rem; }
  .item .item-category { font-size: 0.8rem; }
  .item .item-total { font-size: 1rem; }
  .item .item-oldprice { font-size: 0.85rem; }

  .total-container {
    padding: 1.2rem 1.5rem;
  }

  .total-container h4 { font-size: 1.2rem; }
  .cart-total { font-size: 1.2rem; }

  .btn-container {
    padding: 0 1.5rem;
    gap: 0.8rem;
  }

  .btn-container .btn-close,
  .btn-container .btn-checkout {
    padding: 0.9rem 1.2rem;
    font-size: 0.95rem;
  }

  .cart-tab h3 {
    font-size: 1.3rem;
    padding: 0 1.5rem;
  }

  /* Footer — 2 columns on mobile */
  .footer {
    padding: 40px 20px 20px;
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .brand {
    grid-column: 1 / -1;
  }
}


/* ───────────────────────────────────────────────────────────────
   SECTION 16 · RESPONSIVE — SMALL PHONE (max-width: 480px)
─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .mobile-nav-links {
    width: 90%;
    padding: 1.5rem;
    gap: 0.6rem;
    border-radius: 14px;
    min-height: 280px;
    margin-top: 75px;
  }

  .mobile-nav-links a {
    font-size: 0.9rem;
    padding: 0.8rem 1.2rem;
  }

  /* Cart panel */
  .cart-tab {
    width: 20rem;
    padding-block: 1.5rem;
  }

  .item {
    padding: 0.7rem;
    gap: 0.8rem;
  }

  .item img { width: 3.5rem; height: 3.5rem; }
  .item h4 { font-size: 0.95rem; }
  .item .item-category { font-size: 0.8rem; }
  .item .item-total { font-size: 1rem; }
  .item .item-oldprice { font-size: 0.85rem; }

  .total-container { padding: 1.2rem 1.5rem; }
  .total-container h4 { font-size: 1.2rem; }
  .cart-total { font-size: 1.2rem; }

  .btn-container {
    padding: 0 1.5rem;
    gap: 0.8rem;
  }

  .btn-container .btn-close,
  .btn-container .btn-checkout {
    padding: 0.9rem 1.2rem;
    font-size: 0.95rem;
  }

  .cart-tab h3 {
    font-size: 1.3rem;
    padding: 0 1.5rem;
  }

  /* Footer — single column */
  .footer-content {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}