/* No reserved gutter. Just always show the scrollbar track. */
html {
  scrollbar-gutter: auto;  /* don't reserve extra space */
  overflow-y: scroll;      /* force scrollbar so width never changes */
}

/* (Optional) legacy IE/Edge hint — harmless elsewhere */
html { -ms-overflow-style: scrollbar; }






/* ========== NAV1: Top Notice Bar ========== */
.nav1-container {
  background: #FFD700;
  padding: 0.35rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav1-container h1 {
  font-size: 1.35rem;
  color: #111;
  margin: 0;
  font-family: 'Great Vibes', cursive;
  letter-spacing: 1.8px;
}

#nav2 {
	background-color: #fff;
}

/* ========== NAV2: Main Header ========== */
.nav2-container {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* ends left/right, center stays centered */
  background: #fff;
  position: relative;

  /* new: constrain width + center the whole bar */
  max-width: 1370px;
  margin: 0 auto;

  /* new: comfortable edge padding + tidy spacing between regions */
  padding: 0 16px;
  column-gap: 24px;
}


.nav-links-wrapper {
  display: flex;
  align-items: center;
  gap: 2.5rem; 
  justify-content: center;
}

/* FIX: Align "Shop" button with nav links */
.nav-links-wrapper .shop-products-link {
  display: flex;
  align-items: center;
  height: 85px;
}

/* --- LEFT: Logo --- */
.nav2-left {
  flex: 1 1 0;              /* takes equal share with right */
  display: flex;
  align-items: center;
  min-width: 0;             /* prevent overflow pushing center */
}

.site-logo {
  height: auto;
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

.nav2-left a {
  text-decoration: none;
}

/* --- CENTER: Navigation Links --- */
.nav2-center {
  flex: 0 0 auto;           /* size to content */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  position: relative;
  transform: none !important;   /* ensure old translate is gone */
  margin: 0 !important;         /* no nudges */
}


.shop-products-link {
  position: relative;
  display: inline-block;
  font-size: 1.1rem;
  color: transparent; /* hide default text */
  text-decoration: none;
  text-transform: uppercase;
  perspective: 800px;
  transform-style: preserve-3d;
  overflow: hidden;
  height: 65px;
  line-height: 1.2em;
}

.shop-products-link::before,
.shop-products-link::after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  transition: transform 0.3s ease;
  color: #111;
}

.shop-products-link::before {
  transform: rotateX(0deg) translateY(0);
}

.shop-products-link::after {
  transform: rotateX(-90deg) translateY(100%);
}

.shop-products-link:hover::before {
  transform: rotateX(90deg) translateY(-100%);
}

.shop-products-link:hover::after {
  transform: rotateX(0deg) translateY(0);
} 


/* --- RIGHT: Icons (Search, Login, Cart) --- */
.nav2-right {
  flex: 1 1 0;              /* mirrors left so center stays centered */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.2rem;
  min-width: 0;
}

.icon-svg {
  width: 1.4rem;
  height: 1.4rem;
  stroke: #111;
  cursor: pointer;
}






/*   Search   */
.search-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* full width so dropdown can size normally */
  height: 85px;
  background: #fff;
  
  z-index: 20;
  padding: 1.2rem 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.search-overlay.open {
  opacity: 1;
  visibility: visible;
  display: flex;
  justify-content: center;
}

/* Centered row, but NOT the positioning parent for the dropdown */
.search-overlay .search-content {
  width: 1100px;
  max-width: calc(100% - 2rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: static !important;
  padding: 0 20px;
  box-shadow: inset -1px 0 rgba(0,0,0,0.08), inset 1px 0 rgba(0,0,0,0.08); /* vertical lines */
  border-left: 1px solid rgba(0,0,0,0.08);
  border-right: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}

.search-content input {
  flex: 1;
  margin: 0 1rem;
  padding: 1rem 1rem;
  font-size: 1rem;
  border: none;
  outline: none;
}

.close-search {
  font-size: 1.5rem;
  cursor: pointer;
}




/* Wrapper (optional, no change) */
.nav-wrapper {
  position: relative;
  width: 100%;
  z-index: 9000; 
}
	

/*  Nav1 Styles    */
#nav1 {
  width: 100%;
  background-color: #000;
}

.top-deals-bar {
  display: flex;
  width: 100%;
  font-size: 0.80rem;
  font-weight: 500;
  background: #ffd700;
  overflow: hidden;
}

.top-deals-left {
  display: flex;
  align-items: center;
  background: #000;
  color: white;
  padding: 0.5rem 1rem;
  position: relative;
  z-index: 1;
}

.top-deals-label {
  font-weight: 600;
  white-space: nowrap;
  z-index: 2;
  position: relative;
}

.top-deals-arrow {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #000;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2; /* Boosted in case something’s overlapping */
}



.top-deals-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
  gap: 0.6rem;
  white-space: nowrap;
  font-weight: 600;
}
.top-deals-center strong {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.25px;
}

.top-deals-center a {
  color: black;
  text-decoration: none;
  font-size: .9rem;
}

.top-deals-center span {
  color: #333;
}

.top-deals-right {
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

.top-deals-right a {
  color: black;
  font-weight: 600;
  text-decoration: none;
}

.top-deals-right a::after {
  content: " ›";
  font-weight: bold;
}

.top-deals-right a:hover {
  color: #000;
  text-decoration: underline;
}

.nav-icon-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #111;
  font-size: 1.1rem;
  position: relative;
}

.nav-icon-link i {
  font-size: 1.4rem;
  margin-bottom: 5px;
  color: #111;
  transition: color 0.2s ease;
}

.nav-icon-link:hover i {
  color: #FFD700;
  cursor: pointer;
}

.icon-label {
  font-size: 0.75rem;
  color: #111;
  font-family: Poppins, sans-serif;
}


.gift-gradient-icon {
  background: linear-gradient(to bottom, #FFD700 0%, #FF0000 30%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 0.3s ease;
}
.preview-item {
  width: 220px;
  height: 260px; /* leave room for label */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
	#dynamicPreviewImg {
  width: 200px;   /* Match preview-item img width */
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.preview-item a {
  text-decoration: none;
  color: inherit;
}

.preview-item a:visited {
  text-decoration: none;
  color: inherit;
}



.nav-welcome {
  font-size: 0.85rem;
  color: #111;
  font-weight: 500;
  white-space: nowrap;
}










































/* ========== Mega Menu Styles ========== */
.mega-menu-container {
  position: absolute;
  top: 87px;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background: #fff; /* white background */

  display: none;
  z-index: 10001;
  padding: 2rem 1rem;
  box-sizing: border-box;
  /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);*/
  box-shadow: 0 6px 8px -2px rgba(0,0,0,0.35);
  transition: opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.mega-menu-container.show {
  display: block;
  opacity: 1;
  pointer-events: auto;
  animation: none !important;
}

.mega-menu-boxlunch {
  display: flex;
  justify-content: center;      /* center the entire flex children */
  align-items: flex-start;      /* top align */
  gap: 4rem;
  padding: 2rem;
  max-width: 1300px;            /* limits the width of both columns combined */
  margin: 0 auto;               /* centers it inside the mega-menu-container */
  color: #333;                  /* black text */
  width: 100%;
}

/* LEFT SIDE: Category Section */
.mega-menu-left {
  display: flex;
  flex-direction: column;
  color: #333; /* black text */
}

.mega-menu-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333; /* black text */
  margin-bottom: 1rem;
  border-bottom: 1px solid #333; /* black divider */
  padding-bottom: 0.5rem;
}

.category-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.menu-column {
  flex: 0 0 auto;
  min-width: 160px;
}

.menu-column a {
  display: block;
  color: #333; /* black text */
  font-size: 0.95rem;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.menu-column a:hover {
  color: #d70000; /* red hover */
}

/* RIGHT SIDE: Preview Section */
.menu-preview-column {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  padding: 2rem;
  align-items: flex-start;
  flex: 1;
}

.preview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 220px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.preview-item img {
  width: 200px;
  height: 200px;
  border-radius: 6px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.preview-item:hover img {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.preview-item p {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  color: #333; /* black text */
  margin-top: 0.75rem;
  transition: color 0.3s, text-shadow 0.3s;
}

.preview-item:hover p {
  color: #d70000; /* red hover */
  text-shadow: none; /* remove yellow glow */
}

/* ===== Mega Menu Overlay ===== */
#mega-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 8000;
  display: none;
}
#mega-menu-overlay.active {
  display: block;
}

.top-deals-mobile-message {
  display: none;
}















/* ====== SEARCH DROPDOWN CORE ====== */

/* Position dropdown relative to the search row */
.search-overlay .search-content { position: relative; }

/* The dropdown container */
.basic-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 80%;               /* match your input width */
  height: 760px;            /* fixed dropdown height */
  overflow: hidden;         /* each column scrolls internally */
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  z-index: 9999;
}


/* 3-column grid inside (now arranged as two cols on row 1, categories full-width on row 2) */
.tri-grid {
  display: grid;
  /* old: grid-template-columns: 185px 1fr 1.2fr; */
  grid-template-columns: 1fr 1.2fr;   /* Results | Preview */
  grid-template-areas:
    "middle right"
    "left   left";                    /* Categories underneath */
  gap: 12px;
  padding: 12px 12px 13px 12px;
  box-sizing: border-box;
  height: auto;
}

/* area assignments */
.col-left   { grid-area: left; }
.col-middle { grid-area: middle; }
.col-right  { grid-area: right; }

/* Each column: fixed 635px, scroll inside (top row).
   We'll override Categories so it doesn't stretch/scroll. */
.col {
  height: 635px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.col-body { flex: 1; min-height: 0; overflow: auto; }
.col-body.muted { color: #6b7280; font-size: .9rem; }

/* Categories row should size to content and not scroll internally */
.col-left {
  height: auto;                   /* override 635px for categories row */
}
.col-left .col-body {
  flex: initial;
  overflow: visible;
}


	
	
.col-title {
  font-weight: 700;
  font-size: .85rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 8px;
}

/* Middle column: results list */
.prod-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Result item with thumbnail left, text right */
.prod-item {
  display: block;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 0; /* padding on anchor for full-card click */
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.prod-item:hover,
.prod-item[aria-selected="true"] {
  border-color: #c7d2fe;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* The clickable area */
.prod-link {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.prod-thumb {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #eee;
}

/* text container in the right cell */
.text-wrap { min-width: 0; width: 100%; }

.prod-name {
  margin: 0 0 4px 0;
  font-weight: 700;
  font-size: .95rem;
  color: #111827;
}
.prod-desc {
  margin: 0;
  font-size: .85rem;
  color: #4b5563;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* long-word safety without forcing early wraps */
.prod-name, .prod-desc { overflow-wrap: anywhere; }

/* Mobile tweak from original */
@media (max-width: 720px) {
  .basic-dropdown { width: 95%; left: 50%; transform: translateX(-50%); }
  .tri-grid { grid-template-columns: 160px 0.9fr 1.1fr; }
}

/* ====== YOUR EXISTING STYLES KEPT ====== */
.gift-gradient-icon {
  background: linear-gradient(to bottom, #FFD700 0%, #FF0000 30%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 0.3s ease;
}
.preview-item { width: 220px; height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
#dynamicPreviewImg { width: 200px; height: 200px; object-fit: cover; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: all 0.3s ease; }
.preview-item a, .preview-item a:visited { text-decoration: none; color: inherit; }

.nav-welcome { font-size: 0.85rem; color: #111; font-weight: 500; white-space: nowrap; }


/* === Category pills === */
#basicCats {
  display: flex;
  flex-direction: row; /* default, could omit */
  gap: 8px;            /* spacing between pills */
  flex-wrap: wrap;     /* optional – if you ever have more than 2 it wraps */
  justify-content: flex-start;
}

.cat-pill {
  background: #FFD700; color: #111;
  border: 0; border-radius: 10px;
  width: 100px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.15;
  font-weight: 700; font-size: 0.85rem; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.cat-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.10); filter: brightness(.96); }
.cat-pill:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

.dym-bar {
  margin: 6px 0 10px 0;
  padding: 8px 10px;
  background: #fff9c2;
  border: 1px solid #f1e38a;
  border-radius: 8px;
  font-size: .9rem;
  color: #4b5563;
}
.dym-bar button {
  background: transparent;
  border: 0;
  color: #1d4ed8;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- Qty + Add to Cart ---------- */
.qty-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.qty-wrap { display: inline-flex; align-items: center; border-radius: 10px; overflow: hidden; border: 1px solid #e5e7eb; }
.qty-btn { background: #000; color: #fff; border: 0; width: 34px; height: 36px; font-size: 18px; line-height: 1; cursor: pointer; }
.qty-input { width: 56px; height: 36px; border: 0; text-align: center; font-weight: 700; outline: none; }
.add-cart-btn { background: #000; color: #fff; border: 0; height: 36px; padding: 0 14px; border-radius: 8px; cursor: pointer; font-weight: 700; }
.add-cart-btn:disabled { opacity: .6; cursor: not-allowed; }
.pv-msg { text-align: center; margin-top: 8px; font-size: .9rem; color: #065f46; }
.pv-msg.err { color: #b00020; }

.pv-frame {
  width: min(400px, 100%);
  height: 430px;
  margin: 0 auto 8px;
  border-radius: 14px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.pv-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transform: scale(1.0); transition: transform 180ms ease-out; }
.pv-frame:hover .pv-img { transform: scale(1.03); }







/* Hide hamburger on desktop */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}


/* Mobile Menu Left Slider - Panel Only */
#mobileMenu {
  position: fixed;
  top: 0;
  left: 0; /* slide from left */
  right: auto; /* reset right */
  height: 100vh;
  width: 100vw; /* full width on mobile */
  background: #fff;
  box-shadow: 2px 0 18px rgba(0, 0, 0, 0.12); /* shadow now on the right edge */
  transform: translateX(-100%); /* hide off-screen left */
  opacity: 0; /* start invisible */
  transition:
    transform 0.35s ease-in-out,
    opacity 0.35s ease-in-out;
  z-index: 10010;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
}


/* Open state */
#mobileMenu.open {
  transform: translateX(0);
  opacity: 1; /* fade in */
}

/* Hide on desktop */
@media (min-width: 769px) {
  #mobileMenu {
    display: none;
  }
}
	
/* Close button for mobile menu slider */
#mobileMenu .mm-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 2rem;
  font-weight: bold;
  color: #000; /* black by default */
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.2s ease;
}

#mobileMenu .mm-close:hover {
  color: #FFD700; /* your yellow brand color */
}



/* The new underline strip (25px tall + 1px bottom border) */
.nav3-container {
  position: relative;
  width: 100%;
  height: 25px;
  background: #f4f2f7; /* same gray as your old border */
  border-bottom: 1px solid #000;  /* <-- 1px underline */
  z-index: 12;                    /* below search overlay */
}

.nav3-inner {
  max-width: 1370px;  /* match your site width */
  margin: 0 auto;
  height: 25px;       /* strip height */
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left / center / right */
  align-items: center;
}

/* Center column holds the scroller, dead center */
.nav3-center { justify-self: center; }

/* Right column: PayPal badge sits aligned right */
.nav3-right {
  justify-self: end; display: flex; align-items: center; height: 25px;
  position: absolute;           /* pin within the strip */
  top: 50%;
  transform: translate(20px, -55%);  /* shift ~100px to the right & center vertically */
}

/* Scroller visuals (fit to 25px strip) */
:root {
  --gnome-red: #d70000;
  /* ▶ Controls the open panel’s total height so it’s consistent everywhere */
  --req-panel-h: 580px;
}
.gnome-bar {
  height: 25px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.gnome-scroll-trigger { display: flex; align-items: center; color: var(--gnome-red); font-size: 14px; }
.msgwrap { position: relative; min-width: 205px; text-align: center; margin-right: 21px; transition: margin-right .2s; }
.msgwrap.shiftPlus { margin-right: 60px; }
.msgwrap.shiftThird { margin-right: 60px; }
.message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; opacity: 0; }
.message strong { font-weight: 800; }
#msg2, #msg3 { top: calc(50% - 2px); }
.show { animation: fadeIn .45s ease forwards, blinkOnce .6s steps(1) .45s 1; }
.hide { animation: fadeOut .45s ease forwards; }
.gnome-arrow { width: 18px; height: 18px; stroke-width: 1.5; animation: bobSmall 1.6s ease-in-out infinite; }

@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@keyframes fadeOut { from {opacity:1} to {opacity:0} }
@keyframes blinkOnce { 0%,40%,100% {opacity:1} 50% {opacity:0} }
@keyframes bobSmall { 0%,100% {transform:translateY(0)} 50% {transform:translateY(4px)} }

/* PayPal badge fit + nudge image 100px right as well */
.paypal-badge { display: flex; align-items: center; gap: 1rem; position: static !important; }
.paypal-badge img { height: 20px; width: auto; display: block; transform: translateX(-5px); }
.nav-welcome { font-size: 0.85rem; color: #111; font-weight: 500; white-space: nowrap; }

/* Slide panel: overlays page below the strip (doesn’t push layout) */
.slide-page {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: #f4f2f7;
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s ease;
  z-index: 13; /* over the strip */
}

/* ▶ Fixed open height for consistency across pages */
.slide-page.open { max-height: var(--req-panel-h); }

/* Your existing inner widths/padding */
.form-wrapper { max-width: 560px; margin: 0 auto; padding: 20px; }
.slide-page input, .slide-page textarea, .slide-page button {
  width: 100%; padding: 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; box-sizing: border-box;
}
.slide-page button { background: var(--gnome-red); color: #fff; border: none; cursor: pointer; }
.slide-page button:hover { background: #b50000; }

/* ===================== */
/*  Equal-height columns */
/* ===================== */

/* stretch grid tracks instead of aligning to content */
.slide-page .request-grid { align-items: stretch; }

/* give the grid a real height while open:
   panel height minus wrapper vertical padding (20 top + 20 bottom) */
.slide-page.open .request-grid {
  height: calc(var(--req-panel-h) - 40px);
  min-height: 0; /* allow internal scrolling */
}

/* make both columns fill that height and scroll internally */
.slide-page .req-left,
.slide-page .req-right {
  height: 100%;
  min-height: 0;
  overflow: auto;
}

/* if somewhere else you set .req-left max-height, neutralize it here so both match */
.slide-page .req-left { max-height: none; }





/* ===== Custom Gnome request form (wider, even spacing) ===== */

/* wider wrapper */
.slide-page .form-wrapper {
  max-width: 1280px;   /* ⬅ wider overall */
}

/* 2-col: left wide, right slimmer; left scrolls */
.request-grid {
  display: grid;
  grid-template-columns: 3fr 1.1fr; /* ⬅ left dominates more */
  gap: 20px;
  align-items: start;
  max-height: 640px;
}

/* LEFT: scrollable card */
.req-left {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 28px;       /* ⬅ more padding left/right (was 16px) */
  overflow-y: auto;
  max-height: 510px;
}
	
.req-title {
  font-weight: 800;
  font-size: .95rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
}
.req-help {
  font-size: .8rem;
  color: #6b7280;
  margin: 4px 2px 10px;
}

/* table: checkbox | name | detail input */
.req-table {
  display: grid;
  /* tighten spacing: smaller name column, larger detail column */
  grid-template-columns: 28px minmax(110px, 0.5fr) minmax(0, 2.5fr);
  column-gap: 8px;   /* slightly smaller gap */
  row-gap: 10px;
  align-items: center;
}

.req-table .cell { min-width: 0; }
.req-table .chk input {
  width: 16px; height: 16px; vertical-align: middle;
}
.req-table .name {
  font-weight: 700; line-height: 1.15;
}
.req-table .detail {
  padding-right: 0;          /* was 8px; removes extra space on the right side */
}
.req-table .detail label {
  display: block; font-size: .8rem; color: #6b7280; margin-bottom: 2px;
}
.req-table .detail input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: .9rem;
}

/* RIGHT: compact card */
.req-right {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;    /* ⬅ match left */
  align-self: start;
}
.req-right .panel-title {
  font-weight: 800;
  font-size: .95rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
}
.req-right .field { margin-bottom: 10px; }
.req-right label {
  display: block; font-size: .85rem; font-weight: 700; margin-bottom: 4px;
}
.req-right input, .req-right textarea {
  width: 100%; padding: 8px 12px;
  border: 1px solid #e5e7eb; border-radius: 8px; font-size: .95rem;
}

/* actions */
.rf-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.rf-actions button {
  background: #000; color: #fff; border: 0; border-radius: 8px; padding: 10px 14px;
  font-weight: 800; cursor: pointer;
}
.rf-actions .small { font-size: .8rem; color: #6b7280; }

/* mobile */
@media (max-width: 768px) {
  .slide-page .form-wrapper { max-width: 95vw; }
  .request-grid { grid-template-columns: 1fr; max-height: none; }
  .req-left { max-height: none; overflow: visible; padding: 14px 16px; } /* reset back */
  
  /* On small screens we give the name less room so inputs stay close */
  .req-table {
    grid-template-columns: 28px minmax(120px, 0.8fr) minmax(0, 2.2fr);
    column-gap: 8px;
  }
}




/* ==== Request panel open state visuals (updated) ==== */

/* Hide the rotating messages & arrow when open */
.nav3-container.request-open .msgwrap { display: none; }
.nav3-container.request-open .gnome-arrow { display: none; }

/* Wrapper that holds: [Request Custom Gnome] [info] ......... [×] */
.request-header {
  display: none;            /* default hidden; shown when open */
  width: 100%;
  align-items: center;
  gap: 8px;                 /* tight space between label and info */
}

/* Show header only when the request panel is open */
.nav3-container.request-open .request-header { display: inline-flex !important; }

/* Static label style (tight, no margin hacks) */
.request-static {
  margin: 0;
  font-weight: 800;
  color: #111;
  font-size: 15px;          /* was 14px */
  white-space: nowrap;
}

/* Info button (unchanged visuals) */
.req-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;              /* smaller circle */
  height: 20px;
  border-radius: 50%;
  background: #cc0000;      /* red circle */
  border: none;
  cursor: pointer;
  padding: 0;
}
.req-info i {
  font-size: 12px;          /* smaller "i" */
  font-weight: 600;
  font-style: italic;       /* lean look */
  color: #fff;              /* white “i” */
  line-height: 1;
}

/* Real close button pinned far right within the same row */
.req-close {
  margin-left: auto;        /* pushes × to the far right */
  background: none;
  border: none;
  font-weight: 700;
  font-size: 28px;          /* tweak to taste */
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;         /* bigger hit area */
}
.req-close:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* Tooltip (shown on hover/focus) */
.req-tooltip[hidden] { display: none !important; }
.req-tooltip {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);

  /* width control */
  width: 640px;             /* force a wide tooltip */
  max-width: 90vw;          /* don’t overflow the viewport */
  white-space: normal;      /* normal wrapping */

  background: #111;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
  font-size: .95rem;
  line-height: 1.3;
  z-index: 10020;
  text-align: left;
}

/* Positioning context for tooltip */
.gnome-scroll-trigger { position: relative; }

/* Remove brittle spacing in open state (no giant gaps) */
.nav3-container.request-open .gnome-scroll-trigger {
  gap: 0;
  column-gap: 0;
}

/* Kill the pseudo “×” hack entirely */
.nav3-container.request-open .gnome-scroll-trigger::after { content: none; }

/* --- Visibility control (unchanged intent) --- */
/* Force hidden by default */
.request-static,
.req-info,
#reqTip { display: none; }

/* Show ONLY when the request panel is open */
.nav3-container.request-open .request-static { display: inline !important; }
.nav3-container.request-open .req-info       { display: inline-flex !important; }

/* Hover/focus-to-show tooltip */
.nav3-container.request-open .req-info:hover + .req-tooltip,
.nav3-container.request-open .req-info:focus + .req-tooltip {
  display: block !important;
}
	
.top-deals-label a {
	text-decoration: none;
	color: white;
	}




























                            /*                                MOBILE                                        */
                            /*                                MOBILE                                        */
                            /*                                MOBILE                                        */
/* Mobile: allow the strip to grow/wrap cleanly and turn off fixed heights */
@media (max-width: 768px) {
  .nav3-container { height: auto; }
  .nav3-inner { grid-template-columns: 1fr; height: auto; row-gap: 6px; padding: 3px 12px; }
  .nav3-right { position: static; transform: none; right: auto; justify-self: center; height: auto; }
  .gnome-bar  { height: 10px; }
  .paypal-badge { display: none; }

  /* on small screens, let content define height */
  .slide-page.open { max-height: none; }
  .slide-page.open .request-grid,
  .slide-page .req-left,
  .slide-page .req-right { height: auto; overflow: visible; }
	.nav3-center {
   transform: translateX(16px);
  }
}

@media (max-width: 768px) {
  .top-deals-center {
    display: none;
  }

  .top-deals-mobile-message {
    display: block;
    font-weight: bold;
    font-size: 0.95rem;
    text-align: center;
    padding: 0.5rem;
	padding-left: 2.5rem;
    background: #ffda00;
    color: #000;
  }
}






@media (max-width: 1600px) {
  .deal-4,
  .pipe-3 {
    display: none;
  }
}

@media (max-width: 1300px) {
  .deal-3,
  .pipe-2 {
    display: none;
  }
}

@media (max-width: 1000px) {
  .deal-2,
  .pipe-2,
  .pipe-1 {
    display: none;
  }
}
@media (max-width: 768px) {
  .top-deals-right {
    display: none;
  }
}



/* ≤1000px */

@media (max-width: 1300px) {
  .site-logo { max-width: 100%; height: auto; max-height: 52px; width: auto; margin-left: 0; }
}

/* ≤768px */
@media (max-width: 1000px) {
  .nav2-container { padding: .5rem 0; }  /* keep desktop space-between; just tighten padding */

  .nav2-center { display: none !important; }

  /* light left padding for the logo on mobile */
.nav2-left { padding-left: 8px; }   /* tweak: 6–12px feels right */

 

  .nav2-right { padding-right: 1rem; }
  .nav2-right .nav-icon-link { font-size: 0.9rem; }
  .nav2-right i { font-size: .9rem; }
  .icon-label { font-size: 0.7rem; }

  .nav2-right .gift-link,
  .nav-icon-link:has(.gift-gradient-icon) {
    display: none !important;
  }

  .hamburger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center; 
}
	.nav-welcome { display: none; }
	.close-search {
    margin-right: 10px !important; /* pushes it ~10px left */
  }
	/* shrink overlay side padding so the inner row can expand */
  .search-overlay {
    padding: 0.8rem 8px;   /* was 1.2rem 2rem */
  }

  .search-overlay .search-content {
    width: 100%;           /* take the full available width */
    max-width: 100%;       /* remove the calc() gutter limit */
    padding: 0 10px;       /* tiny inner gutter so borders/dots don’t hug edges */
  }

  .search-content input {
    margin: 0 8px;         /* tighten spacing so the input gets more width */
  }
	
}