*/ main>*:last-child { margin-bottom: 0 !important; } /* Make sure only one footer can ever show (safety) */ footer.site-footer:not(:first-of-type), body footer:not(:first-of-type) { display: none !important; } /* Force page base to white so nothing shows below footer */ html, body { background: #fff !important; } /* Paint the gradient only behind the main content area */ main#page-content { position: relative; /* create a containing block */ z-index: 0; } /* The gradient layer */ main#page-content::before { content: ""; position: absolute; /* Start a little above main to blend under the navbar; end exactly at the bottom of main */ top: -32px; /* tweak if you want more/less under the navbar */ left: 0; right: 0; bottom: 0; z-index: -1; /* sit behind content */ pointer-events: none; /* Your previous gradient, unchanged */ background: radial-gradient(900px 380px at 140px 24px, rgba(58, 49, 123, .14) 0%, rgba(58, 49, 123, 0) 60%), radial-gradient(900px 420px at calc(100% - 140px) 40px, rgba(58, 49, 123, .12) 0%, rgba(58, 49, 123, 0) 55%), linear-gradient(180deg, #8576f8 100%, #8576f8 100%); } /* Keep the footer above the gradient layer */ footer.site-footer, footer { position: relative; z-index: 1; } /* Make the gradient layer span the viewport width */ main#page-content { position: relative; z-index: 0; } main#page-content::before { content: ""; position: absolute; top: 20px; /* how far it sits under the navbar */ left: 50%; width: 100vw; /* full viewport width */ transform: translateX(-50%); /* center the layer under the centered container */ bottom: 0; z-index: -1; pointer-events: none; /* replaces your current background on main#page-content::before */ background: /* NEW: soft center halo to balance the sides */ /* existing side halos (you can keep your exact sizes if you prefer) */ /* smoother top→bottom blend */ linear-gradient(180deg, #8576f8 10%, #ffffff 100%); } /* ===== FINAL PAGE BACKDROP (single source of truth) ===== */ html { /* full-page gradient (same one you liked) */ background: linear-gradient(180deg, #8576f8 100%, #8576f8 100%) !important; background-attachment: fixed; /* keeps it steady while scrolling */ min-height: 100%; } /* Body layout: content grows, footer sticks to bottom */ body { background: transparent !important; /* gradient only on html */ display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; /* kill tiny horizontal scroll */ } /* Main should take remaining height above footer */ main { flex: 1 0 auto; } /* Footer visual */ footer { position: relative; z-index: 1; /* keep your purple footer look */ background: linear-gradient(180deg, #7d68f4 0%, #7d68f4 100%); color: #fff; border-top: 1px solid rgba(255, 255, 255, .15); } /* The navbar pill has a brand positioned outside the pill. Prevent it from extending document width. */ /* Fallback for older browsers if needed: */ /* body { overflow-x: hidden; } -- already set above */ /* Keep the page from getting a horizontal scrollbar, but don't clip the navbar */ body { overflow-x: hidden; } .theme-nav, .theme-nav>.container-fluid { overflow: visible; /* allow rounded corners / shadow to render */ } /* Give the navbar just a hair of breathing room so nothing touches its edge */ /* adjust 0–4px to taste */ /* Hide Add to Cart button initially */ .add-to-cart-form { opacity: 0; transform: translateY(5px); transition: opacity 0.25s ease, transform 0.25s ease; } /* Show on hover */ .browse-card-container:hover .add-to-cart-form { opacity: 1; transform: translateY(0); } /* Keep layout stable even when hidden */ .add-to-cart-form { min-height: 40px; /* same height as button to prevent jump */ } /* Give the details area room so the absolute button doesn't overlap text */ .browse-card-details { padding-bottom: 52px; /* ~btn height + spacing */ } /* Position the Add-to-Cart button at the bottom of each card, hidden by default */ .add-to-cart-btn { position: absolute; /* relative to .browse-card-container (has Bootstrap's position-relative) */ left: 12px; right: 12px; bottom: 12px; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; /* prevent focus/click when hidden */ z-index: 2; /* sit above the content */ } /* Reveal the button when hovering the card */ .browse-card-container:hover .add-to-cart-btn { opacity: 1; transform: translateY(0); pointer-events: auto; } /* (Optional) a touch more polish for the card hover */ .browse-card-container { overflow: hidden; /* avoid any overflow during the slide-in */ } /* The text column becomes the positioning context */ .browse-card-details { position: relative; /* <- important */ padding-bottom: 52px; /* space for the hidden button */ } /* Hide the button by default and place it at the bottom of the text column */ .browse-card-details .add-to-cart-btn { position: absolute; /* now relative to .browse-card-details */ left: 0; /* span only the text column width */ right: 0; bottom: 0; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; /* avoid clicks when hidden */ z-index: 1; } /* Reveal on hover of the whole card */ .browse-card-container:hover .browse-card-details .add-to-cart-btn { opacity: 1; transform: translateY(0); pointer-events: auto; } /* keep this if you added it earlier for neatness */ .browse-card-container { overflow: hidden; } /* Ensure the card is a positioning context */ .browse-card-container { position: relative; } /* Make sure the absolute wishlist form sits above the image/content */ .browse-card-container>form.position-absolute { z-index: 30; /* higher than image/content */ pointer-events: auto; } /* Heart button styling (visible and clickable) */ .wishlist-btn { /* reset and layout */ appearance: none; display: inline-flex !important; align-items: center; justify-content: center; /* size/shape */ width: 34px; height: 34px; border-radius: 50%; /* visuals */ background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); /* icon */ font-size: 18px; line-height: 1; color: #7b5cf3; /* purple outline/filled heart */ /* behavior */ cursor: pointer; z-index: 31; /* higher than its parent just in case */ } .wishlist-btn:hover { background: #f5f0ff; box-shadow: 0 3px 10px rgba(123, 92, 243, 0.25); } .wishlist-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(123, 92, 243, 0.25); } /* If any global img overlay tries to cover it, keep clicks on the heart */ .browse-card-img, .browse-card-img img { position: relative; z-index: 1; } /* Make each card a positioning context (Bootstrap already adds position-relative in your HTML) */ .browse-card-container { position: relative; } /* Ensure the absolute wishlist form sits ABOVE image/content */ .browse-card-container>form.position-absolute { z-index: 50; /* higher than anything inside the card */ pointer-events: auto; } /* Image should NOT sit above the heart */ .browse-card-img, .browse-card-img img { position: relative; z-index: 1; } /* Heart button: visible, sized, styled */ .wishlist-btn { display: inline-flex !important; /* defeat any hidden/inline-block overrides */ align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); font-size: 18px; line-height: 1; color: #7b5cf3; cursor: pointer; z-index: 51; /* above its parent just in case */ } .wishlist-btn:hover { background: #f5f0ff; box-shadow: 0 3px 10px rgba(123, 92, 243, 0.25); } .wishlist-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(123, 92, 243, 0.25); } /* --- WISHLIST HEART: force it above everything --- */ /* The absolute form that wraps the heart has .z-3 (Bootstrap uses !important). We must beat it with a higher z-index AND !important. */ .browse-card-container>form.position-absolute.z-3 { z-index: 999 !important; /* sit above image, overlays, etc. */ pointer-events: auto; } /* Image stack should be below the heart */ .browse-card-img, .browse-card-img img { position: relative; z-index: 1; } /* Heart button styling (visible & clickable) */ .wishlist-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); font-size: 18px; line-height: 1; color: #7b5cf3; cursor: pointer; z-index: 1000; /* higher than its parent just in case */ } .wishlist-btn:hover { background: #f5f0ff; box-shadow: 0 3px 10px rgba(123, 92, 243, 0.25); } .wishlist-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(123, 92, 243, 0.25); } /* --- WISHLIST HEART: pin and stack above everything --- */ /* Target exactly the wishlist form in your HTML */ .browse-card-container>form.position-absolute.top-0.end-0.m-2.z-3 { position: absolute !important; /* make sure it is absolute */ top: 8px !important; /* don't rely on utility margins */ right: 8px !important; left: auto !important; bottom: auto !important; z-index: 2000 !important; /* beat Bootstrap's z-* and any overlays */ pointer-events: auto; } /* Ensure the image never sits over the heart */ .browse-card-img, .browse-card-img img { position: relative; z-index: 1; /* below the form above */ } /* Force the heart button to render visibly and be clickable */ .browse-card-container>form.position-absolute.top-0.end-0.m-2.z-3 .wishlist-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); font-size: 18px; line-height: 1; color: #7b5cf3; cursor: pointer; z-index: 2100; /* higher than its parent just in case */ } .browse-card-container>form.position-absolute.top-0.end-0.m-2.z-3 .wishlist-btn:hover { background: #f5f0ff; box-shadow: 0 3px 10px rgba(123, 92, 243, 0.25); } /* --- WISHLIST HEART: force visible, pinned top-right, above everything --- */ /* Make each card its own stacking context so z-index works predictably */ .browse-card-container { position: relative; /* you already have this in HTML */ isolation: isolate; /* NEW: creates a new stacking context */ } /* Target the exact wishlist form you have in HTML */ .browse-card-container>form.position-absolute.top-0.end-0.m-2.z-3 { position: absolute !important; inset: 8px 8px auto auto !important; /* top/right with !important */ z-index: 9999 !important; /* beat Bootstrap's z-* and overlays */ pointer-events: auto; } /* The image/content should sit below the heart */ .browse-card-img, .browse-card-img img { position: relative; z-index: 1; } /* Heart button: visible & clickable no matter what */ .browse-card-container>form.position-absolute.top-0.end-0.m-2.z-3 .wishlist-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); font-size: 18px; line-height: 1; color: #7b5cf3 !important; /* ensure the heart is visible */ cursor: pointer; z-index: 10000; /* above its parent just in case */ } /* Hover polish */ .browse-card-container>form.position-absolute.top-0.end-0.m-2.z-3 .wishlist-btn:hover { background: #f5f0ff; box-shadow: 0 3px 10px rgba(123, 92, 243, 0.25); } /* Page background */ .gs-hero { position: relative; overflow: hidden; border-radius: 22px; background: radial-gradient(1200px 600px at 10% 0%, #c6b7ff 0%, #a890ff 15%, #8f78ff 30%, #6e65f5 55%, #6a5ae7 100%); color: #fff; } /* Floating blobs */ .gs-blob { position: absolute; filter: blur(40px); opacity: .35; border-radius: 999px; } .gs-blob.one { width: 320px; height: 320px; top: -60px; right: -60px; background: #ffb1c1; } /* Glass cards */ .gs-card { backdrop-filter: blur(10px); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); } .gs-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .25); font-weight: 600; } .gs-check { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #3be17a; color: #0b3b22; font-weight: 800; font-size: 14px; } .gs-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: 22px; } .gs-list li+li { margin-top: .65rem; } .gs-muted { color: rgba(255, 255, 255, .85); } /* Light section below */ .gs-tip { border-radius: 16px; border: 1px solid rgba(0, 0, 0, .06); } .site-footer .footer-link { color: inherit; opacity: .85; } .site-footer .footer-link:hover { opacity: 1; text-decoration: underline; } /* sizing + colors */ .ig-img { width: 20px; height: 20px; display: inline-block; vertical-align: -2px; } /* choose colors per area */ .navbar .ig-link { color: #ffffff; } /* white icon on purple nav */ .site-footer .ig-link { color: #E4405F; } /* brand color in footer */ /* subtle hover */ .ig-link:hover { opacity: .85; transform: translateY(-1px); transition: .15s ease; } .browse-grid { align-items: start; } .browse-card-container { align-self: start; } .browse-card-container { padding-bottom: 0px; } /* Modern rounded inputs for the address form only */ .address-form .form-control, .address-form .form-select { height: 46px; padding: .6rem .95rem; border-radius: 14px; border: 1px solid rgba(0, 0, 0, .14); background: #fff; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .03); transition: border-color .15s ease, box-shadow .15s ease; } /* Placeholder style (your form already provides placeholder text) */ .address-form .form-control::placeholder { color: #8A94A6; /* soft gray */ opacity: 1; /* ensure visible on all browsers */ } /* Focus ring */ .address-form .form-control:focus, .address-form .form-select:focus { border-color: #7d5cff; box-shadow: 0 0 0 .2rem rgba(125, 92, 255, .16); outline: 0; } /* Make the select look consistent + nicer caret */ .address-form .form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 2.2rem; /* room for caret */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%2399A1B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: .9rem; } /* Labels (keep them, just refine look) */ .address-form .form-label { font-weight: 600; color: #334155; margin-bottom: .3rem; } /* Keep Country & "Make default" from colliding on small screens */ @media (max-width: 767.98px) { .address-form .country-col { margin-bottom: .5rem; } } /* Logo sizing (keeps it tidy on phones) */ .brand-logo { height: 28px; width: auto; display: block; } @media (min-width: 768px) { .brand-logo { height: 32px; } } @media (min-width: 992px) { .brand-logo { height: 40px; } } /* Compact navbar padding on mobile */ .theme-nav { padding-top: .4rem; padding-bottom: .4rem; } /* Mobile search that sits next to the hamburger */ .nav-search-sm .form-control { border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; } .nav-search-sm .form-control::placeholder { color: rgba(255, 255, 255, .75); } .nav-search-sm .btn.btn-search { margin-left: .5rem; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: #fff; padding: .375rem .75rem; } /* Optional: a little breathing room inside the collapsed menu on mobile */ @media (max-width: 991.98px) { #mainNav { padding-top: .5rem; } } /* =========================== New Arrivals (prefix-free) =========================== */ #newArrivalsCarousel { --na-radius: 16px; --na-shadow: 0 10px 30px rgba(25, 7, 65, .18); --na-glass: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .06)); position: relative; border-radius: var(--na-radius); padding: 1rem 0 1.25rem; background: var(--na-glass); backdrop-filter: blur(6px); /* progressive enhancement */ box-shadow: var(--na-shadow); border: 1px solid rgba(255, 255, 255, .18); } #newArrivalsCarousel .carousel-inner { padding-inline: .5rem; } /* Cards with gradient "ring" using background-clip (no masks) */ #newArrivalsCarousel .card { border: 1px solid transparent; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .94)) padding-box, linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(121, 99, 255, .40), rgba(255, 200, 0, .38)) border-box; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); transition: transform .22s ease, box-shadow .22s ease, background .22s ease; } #newArrivalsCarousel .card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0, 0, 0, .14), 0 0 0 3px rgba(121, 99, 255, .18); background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .96)) padding-box, linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(121, 99, 255, .55), rgba(255, 200, 0, .55)) border-box; } /* Images */ #newArrivalsCarousel .card-img-top { border-top-left-radius: 14px; border-top-right-radius: 14px; background: radial-gradient(120% 120% at 50% 0%, rgba(0, 0, 0, .05), transparent 60%); aspect-ratio: 3/4; /* keep all thumbnails consistent */ object-fit: cover; } /* Title: robust 2-line fallback without vendor prefixes */ #newArrivalsCarousel .card-body { padding: .6rem .75rem .8rem; } #newArrivalsCarousel .card-body .fw-semibold { color: #1b1635; font-weight: 600; line-height: 1.2; overflow: hidden; max-height: 2.4em; /* ~2 lines at 1rem line-height */ letter-spacing: .1px; } /* If the browser supports line-clamp, upgrade to true clamping */ @supports (line-clamp: 2) or (-webkit-line-clamp: 2) { #newArrivalsCarousel .card-body .fw-semibold { display: -webkit-box; /* works in WebKit/Blink; ignored elsewhere */ -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; /* unprefixed for newer engines */ max-height: none; } } /* Controls */ #newArrivalsCarousel .carousel-control-prev, #newArrivalsCarousel .carousel-control-next { width: 44px; height: 44px; top: 50%; transform: translateY(-50%); border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(6px); opacity: 1; } #newArrivalsCarousel .carousel-control-prev { left: -12px; } #newArrivalsCarousel .carousel-control-next { right: -12px; } #newArrivalsCarousel .carousel-control-prev:hover, #newArrivalsCarousel .carousel-control-next:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .38); } #newArrivalsCarousel .carousel-control-prev-icon, #newArrivalsCarousel .carousel-control-next-icon { filter: invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); } /* Small screens */ @media (max-width: 576px) { #newArrivalsCarousel { padding: .5rem 0 .75rem; border-radius: 12px; } #newArrivalsCarousel .carousel-inner { padding-inline: .35rem; } #newArrivalsCarousel .carousel-control-prev, #newArrivalsCarousel .carousel-control-next { width: 38px; height: 38px; } #newArrivalsCarousel .card { border-radius: 12px; } #newArrivalsCarousel .card-img-top { border-top-left-radius: 12px; border-top-right-radius: 12px; } } /*********************** * MOBILE-ONLY OVERRIDES * (desktop remains unchanged) ***********************/ /* NAVBAR: keep logo + search + burger on one line, inside purple area */ @media (max-width: 991.98px) { /* < lg */ .theme-nav { padding-block: .35rem; } .theme-nav .container-fluid { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; /* stay on one row */ min-height: 56px; } .theme-nav .brand-logo { height: 34px; width: auto; } /* Mobile search in purple bar */ .theme-nav .nav-search-sm { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; background: rgba(255, 255, 255, .08); border-radius: 999px; padding: .25rem; } .theme-nav .nav-search-sm input.form-control { height: 38px; border: 0; background: transparent; color: #fff; padding-left: .75rem; padding-right: .5rem; box-shadow: none; } .theme-nav .nav-search-sm input.form-control::placeholder { color: rgba(255, 255, 255, .7); } .theme-nav .nav-search-sm .btn.btn-search { border: 0; background: rgba(255, 255, 255, .15); border-radius: 999px; padding: .375rem .65rem; line-height: 1; } /* Burger sits to the right of search (no wrap) */ .theme-nav .navbar-toggler { flex: 0 0 auto; margin-left: .25rem; border: 0; outline: none !important; box-shadow: none !important; } /* Opened collapse: soft panel look */ #mainNav { background: rgba(0, 0, 0, .25); border-radius: .75rem; padding: .5rem .5rem 1rem; margin-top: .5rem; } #mainNav .nav-link { padding: .5rem .75rem; border-radius: .5rem; } #mainNav .nav-link:hover { background: rgba(255, 255, 255, .08); } } /* BROWSE GRID: tidy two-per-row and compact card body on phones */ @media (max-width: 575.98px) { /* phones */ /* force exactly 2 columns on phones; let your desktop CSS handle larger screens */ .browse-grid { display: grid; /* only set on phones so we don't override desktop */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .browse-card-container { background: #fff; border-radius: 14px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; } .browse-card-img { position: relative; overflow: hidden; } .browse-card-img img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; } .browse-card-details { padding: .6rem .6rem 0 .6rem; } .browse-card-details h5 { font-weight: 700; font-size: .98rem; /* compact, no desktop impact */ margin-bottom: .35rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .browse-card-details .fs-5 { font-size: 1.05rem !important; /* price slightly emphasized */ } /* Hide non-critical metadata to reduce clutter on phones */ .browse-card-details p.text-secondary { display: none; } .wishlist-btn { background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 999px; padding: .25rem .5rem; line-height: 1; } .add-to-cart-btn { margin-top: .25rem; } .browse-card-details form .btn { min-height: 36px; border-radius: 10px; } } /* FILTERS CARD: tighter spacing on phones */ @media (max-width: 575.98px) { .container .card .card-body .row.g-2>[class*="col-"] { margin-bottom: .25rem; } .container .card { border-radius: 14px; } .container .card .form-label { margin-bottom: .25rem !important; font-size: .85rem; } .container .card .form-control, .container .card .form-select { border-radius: 10px; } .container .card .d-grid.d-md-flex .btn { width: 100%; } } /* Toast safe areas (harmless on desktop, improves mobile) */ @supports (padding: max(0px)) { .toast { margin-top: max(.5rem, env(safe-area-inset-top)); margin-right: max(.5rem, env(safe-area-inset-right)); } } /* =========================== MOBILE NAVBAR TWEAKS ONLY =========================== */ @media (max-width: 991.98px) { /* Keep everything on one row inside the purple pill */ .theme-nav .container-fluid { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: nowrap; /* prevent wrap */ min-height: 56px; } /* Brand: move inside pill (override any desktop absolute/offset rules) */ .theme-nav .navbar-brand { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto; } .theme-nav .brand-logo { height: 32px; /* tidy size on phones */ width: auto; display: block; } /* Mobile search sits in the middle and flexes */ .theme-nav .nav-search-sm { display: flex !important; /* ensure visible on mobile */ align-items: center; flex: 1 1 60%; /* leaves room for logo + burger */ min-width: 0; /* allow shrink without wrapping */ margin: 0 .25rem; background: rgba(255, 255, 255, .08); border-radius: 999px; padding: .25rem; } .theme-nav .nav-search-sm input.form-control { border: 0; background: transparent; color: #fff; height: 38px; padding-left: .75rem; padding-right: .5rem; box-shadow: none; } .theme-nav .nav-search-sm input.form-control::placeholder { color: rgba(255, 255, 255, .7); } .theme-nav .nav-search-sm .btn.btn-search { border: 0; background: rgba(255, 255, 255, .16); border-radius: 999px; padding: .38rem .65rem; line-height: 1; } /* Burger aligned to the right, never drops below */ .theme-nav .navbar-toggler { flex: 0 0 auto; margin: 0; border: 0; box-shadow: none !important; align-self: center; } /* Opened menu panel styling (unchanged behavior) */ #mainNav { background: rgba(0, 0, 0, .25); border-radius: .75rem; padding: .5rem .5rem 1rem; margin-top: .5rem; } #mainNav .nav-link { padding: .5rem .75rem; border-radius: .5rem; } #mainNav .nav-link:hover { background: rgba(255, 255, 255, .08); } } /* === Mobile navbar layout (<= lg) === */ @media (max-width: 991.98px) { /* keep everything on one line and centered */ .theme-nav .container-fluid { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; /* prevent wrapping (burger dropping) */ } /* brand/logo */ .theme-nav .navbar-brand { order: 1; margin: 0 .25rem 0 0; padding: 0; } .theme-nav .brand-logo { height: 28px; /* compact logo */ width: auto; display: block; } /* mobile search (your .d-lg-none form) */ .theme-nav .nav-search-sm { order: 2; flex: 1 1 auto; /* take remaining width */ min-width: 0; /* allow shrinking (iOS fix) */ position: relative; /* for the inner button placement */ display: flex; align-items: center; } .theme-nav .nav-search-sm .form-control { width: 100%; height: 42px; border-radius: 16px; padding-right: 3rem; /* space for the search button inside */ } .theme-nav .nav-search-sm .btn-search { position: absolute; /* sit inside the input on the right */ right: .35rem; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0; } /* burger aligned to the right of the search */ .theme-nav .navbar-toggler { order: 3; flex: 0 0 42px; height: 42px; margin-left: .35rem; display: flex; align-items: center; justify-content: center; border-radius: 12px; } /* small visual tighten so the purple pill looks balanced */ .theme-nav { padding-top: .35rem; padding-bottom: .35rem; } } /* ───────── New Arrivals polish ───────── */ :root { --na-card-radius: 14px; --na-shadow: 0 6px 18px rgba(37, 0, 73, .10); --na-border: rgba(111, 66, 193, .16); /* theme purple-ish */ } /* Section spacing */ #newArrivalsCarousel .carousel-inner { padding: .25rem 2rem 1.25rem; } /* Card shell */ #newArrivalsCarousel .card { position: relative; border: 1px solid var(--na-border); border-radius: var(--na-card-radius); background: linear-gradient(180deg, rgba(111, 66, 193, .04), rgba(111, 66, 193, 0)); box-shadow: var(--na-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } /* Subtle “NEW” chip (only in this carousel) */ #newArrivalsCarousel .card::after { content: "NEW"; position: absolute; top: .5rem; left: .5rem; font-size: .65rem; font-weight: 600; color: #fff; background: #6f42c1; /* bootstrap purple */ padding: .18rem .45rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(111, 66, 193, .35); } /* Image wrapper look (no more over-magnify) */ #newArrivalsCarousel .card-img-top { width: 100%; aspect-ratio: 3 / 4 !important; /* keep card proportions */ object-fit: contain !important; /* show full image, no crop */ background: radial-gradient(60% 60% at 50% 20%, rgba(111, 66, 193, .10), transparent 60%), linear-gradient(180deg, rgba(111, 66, 193, .03), rgba(111, 66, 193, 0)); padding: 10px; border-top-left-radius: calc(var(--na-card-radius) - 1px); border-top-right-radius: calc(var(--na-card-radius) - 1px); transition: transform .2s ease; } /* Text area */ #newArrivalsCarousel .card-body { padding: .6rem .7rem .85rem !important; } #newArrivalsCarousel .card-body .fw-semibold { font-weight: 600; font-size: .95rem; line-height: 1.15; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Hover states */ #newArrivalsCarousel .card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(37, 0, 73, .14); border-color: rgba(111, 66, 193, .35); } #newArrivalsCarousel .card:hover .card-img-top { transform: scale(1.02); } /* Carousel controls: small, rounded, subtle */ #newArrivalsCarousel .carousel-control-prev, #newArrivalsCarousel .carousel-control-next { width: 2.25rem; height: 2.25rem; top: 42%; transform: translateY(-50%); background: rgba(111, 66, 193, .12); border: 1px solid rgba(111, 66, 193, .25); border-radius: 50%; } #newArrivalsCarousel .carousel-control-prev:hover, #newArrivalsCarousel .carousel-control-next:hover { background: rgba(111, 66, 193, .22); } #newArrivalsCarousel .carousel-control-prev { left: .35rem; } #newArrivalsCarousel .carousel-control-next { right: .35rem; } #newArrivalsCarousel .carousel-control-prev-icon, #newArrivalsCarousel .carousel-control-next-icon { filter: invert(1); } /* Mobile tweaks */ @media (max-width: 575.98px) { #newArrivalsCarousel .carousel-inner { padding: 0 .75rem 1rem; } #newArrivalsCarousel .row.g-3 { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; } #newArrivalsCarousel .card-body .fw-semibold { font-size: .9rem; } #newArrivalsCarousel .carousel-control-prev, #newArrivalsCarousel .carousel-control-next { top: 38%; } /* Hide the NEW chip on very tight screens if it overlaps */ @media (max-width: 380px) { #newArrivalsCarousel .card::after { display: none; } } } /* Accessibility: keyboard focus ring */ #newArrivalsCarousel a:focus-visible { outline: 2px solid rgba(111, 66, 193, .6); outline-offset: 2px; border-radius: var(--na-card-radius); } /* ===================================== SHINYVERSE MOBILE-ONLY STYLES (applies only to screens < 768 px) ===================================== */ @media (max-width: 767.98px) { /* ---------- GLOBAL ---------- */ :root { --sv-gap: 12px; --sv-radius: 14px; --sv-border: #ece8f6; --sv-soft: #f7f4ff; --sv-purple: #6f42c1; --sv-purple-2: #8a5cf1; } body { padding-bottom: 60px; } /* breathing space */ .container, .container-fluid { padding-left: 14px; padding-right: 14px; } .btn, .btn-sm, .btn-lg { border-radius: 12px; } .btn { padding: .65rem .9rem; } .card { border-radius: var(--sv-radius); border-color: var(--sv-border); } .card-header { padding: .65rem .9rem; } h1, h2, h3 { font-size: clamp(1.2rem, 4.5vw, 1.5rem); } .table-responsive { border-radius: var(--sv-radius); } /* Stacked table layout */ .table thead { display: none; } .table tbody tr { display: block; background: #fff; margin-bottom: 10px; border: 1px solid var(--sv-border); border-radius: 12px; padding: 10px; } .table tbody tr td { display: flex; justify-content: space-between; border: none !important; padding: .35rem 0; } .table tbody tr td::before { content: attr(data-label); font-weight: 600; color: #6b6790; margin-right: 16px; } .position-fixed.top-0.start-50 { top: .8rem !important; transform: translateX(-50%); } /* ---------- NAVBAR ---------- */ .navbar.theme-nav { padding-top: .4rem; padding-bottom: .4rem; } .navbar .container-fluid { gap: 8px; } .brand-logo { height: 32px; width: auto; } .nav-search-sm { border: 1px solid #e7e1fb; background: #fff; border-radius: 999px; padding: 4px 6px; } .nav-search-sm input.form-control { border: none; box-shadow: none; padding: .4rem .6rem; font-size: .95rem; background: transparent; } .nav-search-sm .btn.btn-search { background: linear-gradient(135deg, #6f42c1, #8a5cf1); color: #fff; border: none; border-radius: 999px; padding: .35rem .6rem; font-size: .95rem; } #mainNav { border-top: 1px solid #eee9ff; padding-top: .6rem; } .navbar-nav .nav-link { padding: .55rem 0; font-size: 1rem; } .navbar-toggler { padding: .25rem .5rem; border-radius: 10px; } /* ---------- HOME ---------- */ #homepageBannerCarousel img { height: 210px !important; object-fit: cover; } #homepageBannerCarousel .carousel-caption { display: block !important; background: rgba(22, 10, 46, .45); backdrop-filter: blur(2px); left: 6%; right: 6%; bottom: 10px; border-radius: 12px; padding: .5rem .7rem; } #homepageBannerCarousel h2 { font-size: 1rem; margin-bottom: .15rem; } #homepageBannerCarousel p { font-size: .85rem; margin-bottom: .25rem; } #homepageBannerCarousel .btn { padding: .35rem .6rem; font-size: .85rem; border-radius: 10px; } .section-title { font-size: 1.05rem; margin: .6rem 0 .4rem; } .carousel-wrapper { margin-bottom: 1.25rem !important; } .card-carousel { overflow-x: auto; -webkit-overflow-scrolling: touch; } .card-track { display: flex; gap: 10px; padding: 4px 2px; } .card-item { min-width: 135px; max-width: 135px; } .card-item img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; } .card-caption { font-size: .85rem; padding: .25rem .1rem; text-align: center; } #newArrivalsCarousel .col-6.col-md-3 { padding-left: 8px; padding-right: 8px; } #newArrivalsCarousel .card { border-radius: 14px; } #newArrivalsCarousel .card-img-top { aspect-ratio: 3/4; object-fit: cover; border-top-left-radius: 14px; border-top-right-radius: 14px; max-height: 220px; } #newArrivalsCarousel .card-body { padding: .45rem .55rem; } #newArrivalsCarousel .fw-semibold { font-size: .9rem; } .fade-left, .fade-right { width: 20px !important; } /* ---------- BROWSE ---------- */ form[method="GET"] .card-body { padding: 10px; } form[method="GET"] .row.g-2>[class*="col-"] { width: 50%; } form[method="GET"] .col-12 { width: 100% !important; } form[method="GET"] .form-label { font-size: .8rem; margin-bottom: .25rem; } form[method="GET"] input.form-control-sm, form[method="GET"] select.form-select-sm { padding: .35rem .5rem; font-size: .9rem; border-radius: 10px; } form[method="GET"] .btn { width: 100%; } .browse-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .browse-card-container { border-radius: 14px; overflow: hidden; } .browse-card-img img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; } .browse-card-details { padding: 10px !important; } .browse-card-details h5 { font-size: .98rem; } .browse-card-details p { margin-bottom: .25rem !important; font-size: .84rem; } .browse-card-details .fs-5 { font-size: 1rem !important; } .wishlist-btn { background: #fff; border: 1px solid #eee9ff; border-radius: 10px; padding: .25rem .5rem; } form[action*="reduce_stock"], form[action*="delete_card"] { margin-top: .35rem !important; } form[action*="reduce_stock"] .form-control { height: 34px; } #imageModal .modal-dialog { margin: 8px; } /* ---------- CART ---------- */ .table.align-middle tbody tr td:nth-child(1) { --label: "Card"; } .table.align-middle tbody tr td:nth-child(2) { --label: "Quantity"; } .table.align-middle tbody tr td:nth-child(3) { --label: "Unit Price"; } .table.align-middle tbody tr td:nth-child(4) { --label: "Line Total"; } .table.align-middle tbody tr td:nth-child(5) { --label: "Action"; } .btn-outline-secondary.btn-sm, .btn-outline-danger.btn-sm { padding: .4rem .6rem; border-radius: 10px; } .sv-totals { padding: 12px; border-radius: 12px; } .sv-totals .grand { padding: 8px 10px; } #btn-checkout { width: 100%; padding: .75rem 1rem; border-radius: 12px; } /* ---------- CHECKOUT ---------- */ .sv-steps { gap: 6px; } .sv-step { font-size: .85rem; padding: 6px 10px; } .sv-step .num { width: 20px; height: 20px; } .sv-summary-table thead { display: none; } .sv-summary-table tbody tr { display: block; background: #fff; margin-bottom: 10px; border: 1px solid #ece8f6; border-radius: 12px; padding: 10px; } .sv-summary-table td { display: flex; justify-content: space-between; border: none !important; padding: .35rem 0; } .sv-summary-table td:nth-child(1) { --label: "Item"; } .sv-summary-table td:nth-child(2) { --label: "Qty"; } .sv-summary-table td:nth-child(3) { --label: "Price"; } .sv-summary-table td::before { content: var(--label); font-weight: 600; color: #6b6790; margin-right: 10px; } .sv-row-soft, .sv-row-total { background: transparent !important; } .sv-row-total { border-top: 1px dashed #e5defc; padding-top: 6px; } .sv-sticky { position: static; } #pay-stripe { padding: .75rem 1rem; border-radius: 12px; } #paypal-button-container>div { transform: scale(.95); transform-origin: top center; } } @media (max-width: 991.98px) { .browse-card-details h5 { color: #6f42c1 !important; } .brand-logo { height: 28px !important; } } /*********************** * BROWSE CARDS — MOBILE FIX * make details readable + keep button in place ***********************/ @media (max-width: 575.98px) { /* 2-column grid (keeps what you already had) */ .browse-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; } /* Card shell */ .browse-card-container { background: #fff; border-radius: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, .08); overflow: hidden; display: flex; flex-direction: column; } /* Image */ .browse-card-img img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; } /* Details area becomes a column with space for the button */ .browse-card-details { display: flex; flex-direction: column; gap: .35rem; padding: .65rem .65rem .65rem; min-height: 152px; /* ensures room for text + button */ } /* Name: larger, 2-line clamp */ .browse-card-details h5 { font-size: 1rem; font-weight: 800; margin: 0 0 .15rem !important; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Show *some* metadata again (brand + condition) */ .browse-card-details p.text-secondary { display: none; /* start hidden… */ } .browse-card-details p.text-secondary:nth-of-type(1), .browse-card-details p.text-secondary:nth-of-type(3) { /* 1 = Brand, 3 = Condition in your markup order */ display: block; font-size: .82rem; margin: 0; color: #6b6b88; } /* Price & stock */ .browse-card-details .fs-5 { font-size: 1.05rem !important; margin: .2rem 0 0; } .browse-card-details .text-success { margin: 0 0 .2rem; font-size: .85rem; } /* Button: full width, never overlaps text */ .browse-card-details form { margin-top: auto; /* push button to bottom of the card */ } .browse-card-details .add-to-cart-btn { width: 100%; display: block; margin: .35rem 0 0 !important; border-radius: 12px; min-height: 40px; box-shadow: 0 10px 20px rgba(111, 66, 193, .18); } /* Kill the old margin that caused overlap in some cards */ .browse-card-details .add-to-cart-btn.mb-4 { margin-bottom: 0 !important; } /* Slightly tighter outer container so tiles breathe on small screens */ .container.mt-4, .container.mt-5 { padding-left: .6rem; padding-right: .6rem; } } /* ===== MOBILE NAVBAR: logo | search | burger ===== */ @media (max-width: 991.98px) { .theme-nav { padding: .35rem 0; } .theme-nav .container-fluid { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; } .theme-nav .navbar-brand { order: 1; margin: 0; padding: 0; flex: 0 0 auto; } .theme-nav .brand-logo { height: 28px; width: auto; display: block; } /* show the small search in the middle bar */ .theme-nav .nav-search-sm { order: 2; flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center; background: rgba(255, 255, 255, .12); border-radius: 999px; padding: .25rem; } .theme-nav .nav-search-sm .form-control { height: 38px; border: 0; background: transparent; color: #fff; padding-left: .65rem; padding-right: .4rem; box-shadow: none; } .theme-nav .nav-search-sm .form-control::placeholder { color: rgba(255, 255, 255, .75); } .theme-nav .nav-search-sm .btn.btn-search { border: 0; background: rgba(255, 255, 255, .18); border-radius: 999px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .theme-nav .navbar-toggler { order: 3; flex: 0 0 42px; height: 42px; margin-left: .35rem; display: flex; align-items: center; justify-content: center; border: 0; box-shadow: none !important; border-radius: 12px; } /* opened panel look */ #mainNav { background: rgba(0, 0, 0, .25); border-radius: .75rem; padding: .5rem .5rem 1rem; margin-top: .5rem; } #mainNav .nav-link { padding: .5rem .75rem; border-radius: .5rem; } #mainNav .nav-link:hover { background: rgba(255, 255, 255, .08); } } /* ===== MOBILE BROWSE CARDS ===== */ @media (max-width: 575.98px) { /* two columns grid (keeps desktop untouched) */ .browse-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .browse-card-container { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(25, 7, 65, .08); } /* smaller image so more text fits */ .browse-card-img img { width: 100%; height: auto; aspect-ratio: 3 / 4; /* keep card aspect */ object-fit: contain; /* no crop, whole card visible */ padding: 8px; /* shrink visual size further */ background: radial-gradient(60% 60% at 50% 15%, rgba(111, 66, 193, .06), transparent 60%); } /* body spacing */ .browse-card-details { padding: .55rem .6rem .65rem; } /* name: multi-line wrap (up to 2 lines), no overflow outside card */ .browse-card-details h5 { margin: .15rem 0 .25rem !important; font-size: .95rem; font-weight: 800; line-height: 1.15; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-word; } /* show key meta lines (don’t hide them on mobile) */ .browse-card-details p.text-secondary { display: block !important; margin: .15rem 0; font-size: .84rem; line-height: 1.2; color: #6b6785 !important; white-space: normal; word-break: break-word; } /* ensure we show Set as well if present */ .browse-card-details p[data-field="set"], .browse-card-details p:has(> strong:contains("Set")) { display: block !important; } /* price */ .browse-card-details .fs-5 { font-size: 1rem !important; margin: .2rem 0 .15rem; } /* stock line */ .browse-card-details .text-success { font-size: .9rem; margin-bottom: .35rem; } /* Add to cart button full width & compact */ .browse-card-details form .btn { width: 100%; min-height: 38px; border-radius: 10px; margin-top: .25rem; } /* wishlist heart stays top-right and clickable */ .browse-card-container>form.position-absolute { z-index: 30 !important; } .browse-card-container>form.position-absolute .wishlist-btn { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid rgba(0, 0, 0, .08); } } /* ============== SHINYVERSE • MOBILE NAVBAR POLISH (<= lg) ============== */ @media (max-width: 991.98px) { /* Keep everything on ONE row */ .theme-nav .container-fluid { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; /* prevent wrapping */ min-height: 56px; } /* Brand (left) */ .theme-nav .navbar-brand { order: 1; flex: 0 0 auto; margin: 0 !important; padding: 0 !important; } .theme-nav .brand-logo { height: 28px; width: auto; display: block; } /* Search (center, flexible) */ .theme-nav .nav-search-sm { order: 2; flex: 1 1 auto; /* take remaining space */ min-width: 0; /* allow shrinking */ display: flex !important; align-items: center; position: relative; margin: 0; /* remove odd offsets */ background: rgba(255, 255, 255, .12); border-radius: 999px; padding: .25rem .4rem; } .theme-nav .nav-search-sm input.form-control { height: 38px; border: 0; background: transparent; color: #fff; padding-left: .65rem; padding-right: 2.4rem; /* room for 🔍 */ box-shadow: none; } .theme-nav .nav-search-sm input.form-control::placeholder { color: rgba(255, 255, 255, .8); } .theme-nav .nav-search-sm .btn.btn-search { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 999px; padding: 0; border: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .18); color: #fff; } /* Burger (right) */ .theme-nav .navbar-toggler { order: 3; flex: 0 0 40px; height: 40px; margin-left: .25rem; display: flex; align-items: center; justify-content: center; border: 0; box-shadow: none !important; border-radius: 10px; background: rgba(255, 255, 255, .10); } /* Compact nav bar padding */ .theme-nav { padding: .35rem 0; } /* Collapsed panel styling */ #mainNav { background: rgba(20, 16, 40, .88); border: 1px solid rgba(255, 255, 255, .10); border-radius: 12px; padding: .25rem .5rem .75rem; margin-top: .5rem; backdrop-filter: saturate(120%) blur(6px); } #mainNav .navbar-nav .nav-link { padding: .55rem .6rem; border-radius: .5rem; font-size: 1.05rem; } #mainNav .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, .08); } /* Remove any stray decorative frames that made the drawer look box-inside-box */ .theme-nav .container-fluid>*:not(.navbar-brand):not(.nav-search-sm):not(.navbar-toggler) { box-shadow: none !important; border: none !important; background: none !important; } } /* ============================ END NAVBAR POLISH ============================ */ /* ===== iPhone/iOS Safari mobile navbar hard-fix (<= lg) ===== */ @media (max-width: 991.98px) { .theme-nav .container-fluid { display: flex; align-items: center; flex-wrap: nowrap; /* never wrap */ gap: .5rem; min-height: 56px; } /* Brand (fixed width, left) */ .theme-nav .navbar-brand { order: 1; flex: 0 0 auto; margin: 0 !important; padding: 0 !important; } .theme-nav .brand-logo { height: 28px; width: auto; display: block; } /* Search (center). The key bits are min-width:0 + max-width */ .theme-nav .nav-search-sm { order: 2; flex: 1 1 0; /* allow shrink */ min-width: 0; /* iOS: permit shrinking below content width */ max-width: 62vw; /* hard cap so the burger never drops */ display: flex !important; align-items: center; position: relative; margin: 0; background: rgba(255, 255, 255, .12); border-radius: 999px; padding: .25rem .4rem; } .theme-nav .nav-search-sm input.form-control { width: 100%; min-width: 0; /* iOS: let the input compress */ height: 38px; border: 0; background: transparent; color: #fff; padding-left: .65rem; padding-right: 2.2rem; box-shadow: none; } .theme-nav .nav-search-sm input.form-control::placeholder { color: rgba(255, 255, 255, .8); } .theme-nav .nav-search-sm .btn.btn-search { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 999px; padding: 0; border: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .18); color: #fff; flex: 0 0 auto; /* don’t let it grow */ } /* Burger (right, fixed) */ .theme-nav .navbar-toggler { order: 3; flex: 0 0 40px; height: 40px; margin-left: .25rem; display: flex; align-items: center; justify-content: center; border: 0; box-shadow: none !important; border-radius: 10px; background: rgba(255, 255, 255, .10); } /* Tidy the opened drawer */ #mainNav { background: rgba(20, 16, 40, .88); border: 1px solid rgba(255, 255, 255, .10); border-radius: 12px; padding: .25rem .5rem .75rem; margin-top: .5rem; backdrop-filter: saturate(120%) blur(6px); } #mainNav .nav-link { padding: .55rem .6rem; border-radius: .5rem; font-size: 1.05rem; } #mainNav .nav-link:hover { background: rgba(255, 255, 255, .08); } } /* this is new iOS fix */ /*************** * MOBILE NAVBAR ***************/ @media (max-width: 991.98px) { /* Make the purple pill’s inner layout a 3-column grid: logo | search | burger */ .theme-nav .container-fluid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: 8px 12px; /* symmetric, prevents drifting right */ } /* exact columns */ .theme-nav .navbar-brand { grid-column: 1; margin: 0 !important; } .theme-nav .nav-search-sm { grid-column: 2; min-width: 0; } .theme-nav .navbar-toggler { grid-column: 3; margin: 0 !important; } /* logo size balance */ .theme-nav .brand-logo { height: 26px; width: auto; display: block; } /* search input sits truly centered and fills the middle column */ .theme-nav .nav-search-sm { display: flex !important; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, .10); padding: .25rem .35rem; } .theme-nav .nav-search-sm .form-control { width: 100%; height: 40px; border: 0; background: transparent; color: #fff; padding-left: .7rem; padding-right: 2.4rem; /* room for button on the right */ box-shadow: none; } .theme-nav .nav-search-sm .btn.btn-search { position: relative; inset: 0; width: 34px; height: 34px; border-radius: 999px; margin-left: .35rem; display: inline-flex; align-items: center; justify-content: center; border: 0; background: rgba(255, 255, 255, .18); } /* burger square, same visual weight as search */ .theme-nav .navbar-toggler { width: 44px; height: 40px; border-radius: 12px; border: 0; box-shadow: none !important; display: grid; place-items: center; background: rgba(255, 255, 255, .12); } /* the opened menu: centered, full width under the pill */ .theme-nav { position: sticky; top: 0; z-index: 1030; } .theme-nav .navbar-collapse { position: absolute; left: 12px; right: 12px; /* aligns with pill padding */ top: calc(100% + .5rem); margin: 0; padding: .75rem .75rem 1rem; background: rgba(0, 0, 0, .28); border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px); } /* ensure it overlays content but stays below modals */ .theme-nav .navbar-collapse.show { z-index: 1029; } /* menu items look tidy and centered */ #mainNav .nav-link { padding: .6rem .9rem; border-radius: .5rem; } #mainNav .nav-link:hover { background: rgba(255, 255, 255, .08); } } /* ========================= MOBILE-ONLY FINAL FIXES ========================= */ @media (max-width: 991.98px) { /* Search pill + icon INSIDE on the RIGHT */ .theme-nav .nav-search-sm { position: relative !important; display: flex !important; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.10) !important; padding: 0 !important; } .theme-nav .nav-search-sm .form-control { width: 100% !important; height: 42px !important; border: 0 !important; background: transparent !important; color: #fff !important; border-radius: 999px !important; padding: 8px 44px 8px 14px !important; /* leave room for icon on RIGHT */ box-shadow: none !important; } .theme-nav .nav-search-sm .btn.btn-search { position: absolute !important; right: 6px !important; /* keep inside the input */ top: 50% !important; transform: translateY(-50%) !important; width: 36px !important; height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; display: inline-flex !important; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.25) !important; color: #fff !important; } /* Opaque dropdown so text is always readable */ #mainNav { background: rgba(30, 20, 60, 0.96) !important; /* opaque rich purple */ -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 14px !important; padding: .5rem .8rem 1rem !important; margin-top: .5rem !important; } #mainNav .nav-link { color: #fff !important; font-size: 1.1rem !important; padding: .65rem 1rem !important; border-radius: 10px !important; text-align: left !important; } #mainNav .nav-link:hover { background: rgba(255, 255, 255, 0.12) !important; } } @media (max-width: 991.98px) { /* ✅ FINAL FIX — move search icon inside on the right */ .theme-nav .nav-search-sm { position: relative; } .theme-nav .nav-search-sm .btn.btn-search { position: absolute; right: 8px; /* keeps it fully inside */ top: 50%; transform: translateY(-50%); z-index: 2; } .theme-nav .nav-search-sm .form-control { padding-right: 44px; /* space for the icon */ } } /* Move mobile search icon to the RIGHT inside the input */ @media (max-width: 991.98px) { .theme-nav .nav-search-sm { position: relative !important; } .theme-nav .nav-search-sm .form-control { padding-right: 52px !important; /* room for the icon on the right */ } .theme-nav .nav-search-sm .btn.btn-search { position: absolute !important; right: 10px !important; /* ⬅ anchor to the right */ left: auto !important; /* ⛔ cancel any left positioning */ top: 50% !important; transform: translateY(-50%) !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2 !important; } } /* Staff quick edit modal */ .qty-group .form-control { max-width: 90px; } .qty-group .btn { width: 40px; } .modal .form-label { font-weight: 600; } .modal .input-group-text { min-width: 42px; justify-content: center; } /* Keep the edit button above images/overlays */ .card .btn.position-absolute { z-index: 3; } /* --- Modal always above everything --- */ .modal { z-index: 2000 !important; } .modal-backdrop { z-index: 1990 !important; background: rgba(18, 12, 46, 0.65) !important; } /* If you have a nav blur/curtain/overlay on mobile, kill it while a modal is open */ body.modal-open .nav-blur, body.modal-open .nav-overlay, body.modal-open .theme-nav .backdrop-blur, body.modal-open .menu-backdrop, body.modal-open .navbar-backdrop { display: none !important; pointer-events: none !important; } /* Make sure the modal itself receives clicks */ .modal-dialog, .modal-content { pointer-events: auto; } /* Keep the navbar below the modal, but above page content */ .theme-nav { z-index: 1050; position: relative; } /* Modal must beat any nav overlay/blur/backdrop */ .modal { z-index: 5000 !important; } .modal-backdrop { z-index: 4990 !important; background: rgba(18, 12, 46, .65) !important; } /* When a Bootstrap modal is open, disable any site overlay/blur */ body.modal-open .nav-overlay, body.modal-open .nav-blur, body.modal-open .navbar-backdrop, body.modal-open .menu-backdrop, body.modal-open .menu-sheet, body.modal-open .theme-nav .backdrop-blur, body.modal-open .offcanvas-backdrop, body.modal-open .mobile-nav-curtain { pointer-events: none !important; opacity: 0 !important; display: none !important; } /* Keep navbar below modal but above content */ .theme-nav { position: relative; z-index: 1200; } /* Modal must be the absolute top layer */ .modal { z-index: 5000 !important; } .modal-backdrop { z-index: 4990 !important; background: rgba(18, 12, 46, .65) !important; } /* Navbar / hero / offcanvas / any blur layers must be below the modal */ .theme-nav, .hero, .offcanvas, .nav-overlay, .menu-sheet, .menu-backdrop, #mobileNavBackdrop { z-index: 1100 !important; } /* If any page shows a custom overlay, kill it while a modal is open */ body.modal-open .nav-overlay, body.modal-open .menu-backdrop, body.modal-open .menu-sheet, body.modal-open .mobile-nav-curtain { display: none !important; pointer-events: none !important; opacity: 0 !important; } /* ----- PRICE DISPLAY STYLES ----- */ .price-box { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; } .new-price { font-size: 1.05rem; font-weight: 700; color: #e53935; /* vivid red */ } .old-price { font-size: 0.9rem; color: #888; text-decoration: line-through; font-weight: 500; } .discount-badge { background: linear-gradient(90deg, #ff5252, #d32f2f); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* ========================= Browse cards — MOBILE ONLY Keep text inside the white box, no overflow ========================= */ @media (max-width: 576px) { /* Ensure the whole card clips anything overflowing */ .browse-card-container { overflow: hidden; /* clip child overflow */ border-radius: 14px; /* keeps nice rounded corners */ } /* Slightly more inner space and nudge content left */ .browse-card-details { padding: 10px 10px 12px 12px !important; /* a touch more left padding */ } /* Title: wrap safely, max 2 lines, never spill */ .browse-card-details h5 { margin: 4px 0 6px !important; font-size: 0.98rem; /* tiny downsize on mobile */ line-height: 1.18; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* clamp to 2 lines */ overflow: hidden; /* hide overrun */ text-overflow: ellipsis; white-space: normal; word-break: break-word; /* break long tokens */ overflow-wrap: anywhere; /* hard wrap very long strings */ hyphens: auto; /* graceful hyphenation */ } /* Meta lines (Brand/Type/Condition/Set): wrap & stay inside */ .browse-card-details p, .browse-card-details p.text-secondary { margin: 2px 0; font-size: 0.92rem; line-height: 1.25; white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; hyphens: auto; } /* Price row: prevent badges from pushing layout */ .price-box, .price-box * { max-width: 100%; white-space: nowrap; } .price-box { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; /* allow badge to wrap under if needed */ } /* Make sure strikethrough price can shrink */ .old-price { opacity: .6; text-decoration: line-through; } /* Keep “In stock” line from wrapping awkwardly */ .browse-card-details .text-success { font-size: 0.95rem; line-height: 1.2; white-space: normal; } /* Image can’t overflow horizontally */ .browse-card-img img { max-width: 100%; height: auto; display: block; } }