/* ======================================== PARAMOUNT DIGITAL SERVICES — STORE CSS ======================================== */ /* Google Fonts loaded in with display=swap — no @import here */ :root { --black: #080808; --dark: #111111; --dark2: #1a1a1a; --dark3: #242424; --mid: #333333; --gray: #666666; --light-gray: #999999; --off-white: #e8e8e0; --white: #f5f5f0; --pure-white: #ffffff; --accent: #ffffff; --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Montserrat', sans-serif; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ================== ACCESSIBILITY ================== */ .skip-to-main { position: absolute; top: -100px; left: 16px; z-index: 99999; background: var(--white); color: var(--black); padding: 12px 24px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; border: 2px solid var(--black); transition: top 0.2s ease; } .skip-to-main:focus { top: 16px; outline: 2px solid var(--white); outline-offset: 2px; } /* Visible focus rings for keyboard nav */ *:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .marquee-track { animation: none !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { :root { --gray: #aaaaaa; --light-gray: #cccccc; --mid: #666666; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--black); color: var(--white); font-family: var(--font-body); font-size: 14px; line-height: 1.6; overflow-x: hidden; } /* GRAIN */ .grain { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: 0.025; pointer-events: none; z-index: 9999; } /* TOAST */ .toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--white); color: var(--black); padding: 14px 32px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; z-index: 9998; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .toast.show { transform: translateX(-50%) translateY(0); } /* ================== NAVIGATION ================== */ .nav { position: sticky; top: 0; z-index: 200; background: rgba(8, 8, 8, 0.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--dark2); display: flex; align-items: center; justify-content: space-between; padding: 0 48px; height: 76px; } .logo { cursor: default; display: flex; align-items: center; } .nav-logo-img { height: 44px; width: auto; max-width: 160px; object-fit: contain; display: block; filter: brightness(1); transition: opacity 0.2s; } .nav-logo-img:hover { opacity: 0.85; } .logo-main { display: block; font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0.35em; color: var(--white); } .logo-sub { display: block; font-size: 9px; letter-spacing: 0.3em; color: var(--gray); text-transform: uppercase; margin-top: 2px; } .nav-center { display: flex; gap: 40px; } .nav-link { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nav-link, var(--light-gray)); text-decoration: none; transition: color 0.25s ease; cursor: pointer; position: relative; background: none; border: none; padding: 0; font-family: var(--font-body); line-height: 1; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--nav-link-hover, var(--white)); transition: width 0.3s ease; } .nav-link:hover { color: var(--nav-link-hover, var(--white)); } .nav-link:hover::after { width: 100%; } .cart-btn { display: flex; align-items: center; gap: 10px; background: var(--white); color: var(--black); border: none; padding: 12px 28px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: var(--transition); /* Hidden until items in cart */ opacity: 0; pointer-events: none; transform: translateY(6px) scale(0.95); } .cart-btn.cart-btn-visible { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); } .cart-btn:hover { background: var(--off-white); } .cart-count { background: var(--black); color: var(--white); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; border-radius: 0; } .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .hamburger span { display: block; width: 24px; height: 1px; background: var(--white); transition: var(--transition); } .mobile-menu { display: none; flex-direction: column; position: fixed; top: 76px; left: 0; width: 100%; background: var(--dark); border-bottom: 1px solid var(--dark2); z-index: 199; padding: 24px 48px; gap: 20px; } .mobile-menu.open { display: flex; } .mobile-menu a { color: var(--light-gray); text-decoration: none; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; transition: color 0.2s; } .mobile-menu a:hover { color: var(--white); } /* ================== HERO ================== */ .hero { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 120px 48px; } .hero-bg-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: clamp(100px, 18vw, 260px); font-weight: 300; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.04); white-space: nowrap; pointer-events: none; user-select: none; letter-spacing: 0.1em; } .hero-content { position: relative; text-align: center; max-width: 820px; animation: fadeUp 1s ease both; } .hero-eyebrow { font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gray); margin-bottom: 28px; display: flex; align-items: center; justify-content: center; gap: 16px; } .hero-eyebrow::before, .hero-eyebrow::after { content: ''; width: 40px; height: 1px; background: var(--mid); } .hero-title { font-family: var(--font-display); font-size: clamp(52px, 8vw, 108px); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 28px; color: var(--white); } .hero-title em { font-style: italic; color: var(--white); } .hero-desc { font-size: 14px; color: var(--gray); letter-spacing: 0.06em; line-height: 1.8; margin-bottom: 52px; max-width: 480px; margin-left: auto; margin-right: auto; } .hero-cta { display: inline-flex; align-items: center; gap: 16px; background: var(--white); color: var(--black); border: none; padding: 18px 48px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .hero-cta:hover { background: var(--off-white); gap: 24px; } .cta-arrow { font-size: 16px; transition: var(--transition); } .hero-scroll { position: absolute; bottom: 40px; left: 48px; display: flex; align-items: center; gap: 16px; font-size: 10px; letter-spacing: 0.3em; color: var(--gray); text-transform: uppercase; } .scroll-line { width: 60px; height: 1px; background: var(--mid); position: relative; overflow: hidden; } .scroll-line::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--white); animation: scrollLine 2s ease infinite; } /* ================== MARQUEE ================== */ .marquee-wrap { overflow: hidden; border-top: 1px solid var(--dark2); border-bottom: 1px solid var(--dark2); background: var(--dark); padding: 16px 0; } .marquee-track { display: flex; gap: 40px; white-space: nowrap; animation: marquee 30s linear infinite; width: max-content; } .marquee-track span { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gray); } .marquee-track span:nth-child(even) { color: var(--mid); } /* ================== SECTIONS ================== */ .section-line { flex: 1; height: 1px; background: var(--dark2); max-width: 160px; } .section-title { font-family: var(--font-display); font-size: 38px; font-weight: 300; letter-spacing: 0.08em; white-space: nowrap; color: var(--white); } /* ================== FEATURED GRID ================== */ .featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px; } /* ================== CATEGORIES SECTION ================== */ .categories-section { background: var(--dark); border-top: 1px solid var(--dark2); border-bottom: 1px solid var(--dark2); padding: 100px 48px; } .container { max-width: 1400px; margin: 0 auto; } .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .cat-item { background: var(--black); border: 1px solid var(--dark2); padding: 40px 28px; cursor: pointer; transition: var(--transition); text-align: center; } .cat-item:hover { background: var(--dark2); border-color: var(--mid); transform: translateY(-4px); } .cat-item-icon { font-size: 36px; margin-bottom: 16px; display: block; } .cat-item-name { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); margin-bottom: 8px; } .cat-item-count { font-size: 11px; color: var(--gray); } /* ── See More category tile ─────────────────── */ .cat-see-more { border-style: dashed !important; } .cat-see-more:hover { border-style: solid !important; } .cat-see-more-icon { display: flex; align-items: center; justify-content: center; min-height: 64px; color: var(--gray); margin-bottom: 0; } .cat-see-more .cat-item-name { color: var(--gray); } .cat-see-more:hover .cat-item-name, .cat-see-more:hover .cat-see-more-icon, .cat-see-more:hover .cat-item-count { color: var(--white); } /* ── Age-restricted category strip ────────────────── */ .cat-age-restricted { cursor: pointer; border-color: rgba(231,76,60,0.3) !important; } .cat-age-restricted:hover { border-color: rgba(231,76,60,0.7) !important; background: rgba(231,76,60,0.06); } .cat-lock-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0,0,0,0.3); } .cat-lock-icon { font-size: 32px; line-height: 1; } .cat-age-restricted .cat-item-name { color: var(--white); } .cat-age-restricted .cat-item-count { color: #e74c3c; font-weight: 600; } /* ================== SHOP / FILTER BAR ================== */ .shop-header { max-width: 1400px; margin: 0 auto; padding: 0 0 40px; } .filter-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 32px; } .filter-btn { background: transparent; color: var(--light-gray); border: 1px solid var(--dark3); padding: 10px 28px; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .filter-btn:hover, .filter-btn.active { background: var(--white); color: var(--black); border-color: var(--white); } /* ================== PRODUCT GRID ================== */ .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px; } .product-card { background: var(--dark); border: 1px solid var(--dark2); padding: 32px 28px; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; animation: fadeUp 0.5s ease both; } .product-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .product-card:hover::before { transform: scaleX(1); } .product-card:hover { background: var(--dark2); border-color: var(--mid); transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,0.5); } .product-badge { position: absolute; top: 20px; right: 20px; background: var(--white); color: var(--black); font-size: 9px; font-weight: 700; letter-spacing: 0.2em; padding: 5px 12px; text-transform: uppercase; } /* ================== PRODUCT IMAGES ================== */ .product-img-wrap { width: 100%; aspect-ratio: 4/3; overflow: hidden; margin-bottom: 24px; background: var(--dark2); border: 1px solid var(--dark3); position: relative; } .product-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .product-card:hover .product-img { transform: scale(1.04); } /* Category strip images */ .cat-item-img-wrap { width: 64px; height: 64px; margin: 0 auto 16px; overflow: hidden; background: var(--dark2); border: 1px solid var(--dark3); } .cat-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .cat-item:hover .cat-img { transform: scale(1.08); } /* Cart drawer images */ .cart-item-img-wrap { width: 56px; height: 56px; flex-shrink: 0; overflow: hidden; background: var(--dark2); border: 1px solid var(--dark3); } .cart-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Product modal image */ .modal-product-img-wrap { width: 260px; min-width: 220px; aspect-ratio: 1; overflow: hidden; background: var(--dark2); border: 1px solid var(--dark3); flex-shrink: 0; } .modal-product-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Checkout summary images */ .checkout-summary-img-wrap { width: 48px; height: 48px; flex-shrink: 0; overflow: hidden; background: var(--dark2); border: 1px solid var(--dark3); } .checkout-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Modal badge */ .modal-badge { display: inline-block; background: var(--white); color: var(--black); font-size: 9px; font-weight: 700; letter-spacing: 0.2em; padding: 5px 12px; text-transform: uppercase; margin-bottom: 14px; } .product-category { font-size: 10px; color: var(--gray); letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 10px; } .product-name { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.3; margin-bottom: 16px; color: var(--white); } .product-desc { font-size: 12px; color: var(--gray); line-height: 1.7; margin-bottom: 28px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .product-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--dark3); } .product-price { font-family: var(--font-display); font-size: 28px; font-weight: 300; color: var(--white); } .product-stock { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; } .product-stock.in-stock { color: #5a9a5a; } .product-stock.limited { color: #c4a240; } .product-stock.out-of-stock { color: #9a4a4a; } .card-actions { display: flex; gap: 8px; margin-top: 20px; } .btn-add-cart { flex: 1; background: var(--white); color: var(--black); border: none; padding: 14px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .btn-add-cart:hover { background: var(--off-white); } .btn-add-cart:disabled { background: var(--mid); color: var(--gray); cursor: not-allowed; } .btn-view-more { background: transparent; color: var(--light-gray); border: 1px solid var(--dark3); padding: 14px 20px; font-family: var(--font-body); font-size: 11px; cursor: pointer; transition: var(--transition); } .btn-view-more:hover { border-color: var(--gray); color: var(--white); } /* ================== TRUST STRIP ================== */ .trust-strip { background: var(--dark); border-top: 1px solid var(--dark2); border-bottom: 1px solid var(--dark2); display: flex; align-items: center; justify-content: center; gap: 0; padding: 20px 48px; flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: 10px; padding: 8px 32px; } .trust-icon { font-size: 20px; } .trust-label { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--light-gray); white-space: nowrap; } .trust-divider { width: 1px; height: 28px; background: var(--dark3); } /* ================== FOOTER ================== */ .footer { background: var(--dark); border-top: 1px solid var(--dark2); padding: 80px 48px 0; } .footer-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 60px; border-bottom: 1px solid var(--dark2); } /* Brand column */ .footer-brand { } .footer-logo { font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0.35em; color: var(--white); display: block; margin-bottom: 4px; } .footer-tagline { font-size: 10px; letter-spacing: 0.3em; color: var(--gray); text-transform: uppercase; display: block; margin-bottom: 20px; } .footer-text { font-size: 12px; color: var(--gray); line-height: 1.9; max-width: 280px; margin-bottom: 28px; } /* Social Links */ .social-links { display: flex; gap: 10px; flex-wrap: wrap; } .social-btn { width: 38px; height: 38px; background: var(--dark2); border: 1px solid var(--dark3); color: var(--gray); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: var(--transition); flex-shrink: 0; } .social-btn:hover { background: var(--white); color: var(--black); border-color: var(--white); } /* Footer columns */ .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-col h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--white); margin-bottom: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--dark2); } .footer-col a { font-size: 12px; color: var(--gray); text-decoration: none; letter-spacing: 0.04em; transition: color 0.2s; cursor: pointer; line-height: 1.5; } .footer-col a:hover { color: var(--white); } /* Contact column */ .footer-contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--gray); line-height: 1.6; } .footer-contact-icon { flex-shrink: 0; font-style: normal; } .footer-contact-item a { color: var(--gray); text-decoration: none; transition: color 0.2s; } .footer-contact-item a:hover { color: var(--white); } .footer-payment-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--dark2); border: 1px solid var(--dark3); padding: 10px 16px; font-size: 11px; color: var(--gray); margin-top: 16px; } .footer-payment-badge strong { color: var(--white); } /* Footer bottom bar */ .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 24px 0 28px; font-size: 11px; color: var(--gray); letter-spacing: 0.05em; gap: 16px; flex-wrap: wrap; } .footer-bottom-links { display: flex; align-items: center; gap: 12px; } .footer-bottom-links a { color: var(--gray); text-decoration: none; transition: color 0.2s; } .footer-bottom-links a:hover { color: var(--white); } .footer-bottom-links span { color: var(--dark3); } /* HIDDEN ADMIN TRIGGER */ .admin-secret-trigger { font-size: 13px; color: var(--dark2); cursor: pointer; user-select: none; transition: color 0.3s; padding: 4px 6px; letter-spacing: 0; border: none; background: none; line-height: 1; } .admin-secret-trigger:hover { color: var(--dark3); } /* ================== CART DRAWER ================== */ .cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 500; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .cart-overlay.open { opacity: 1; pointer-events: all; } .cart-drawer { position: fixed; top: 0; right: 0; width: 420px; max-width: 100vw; height: 100vh; background: var(--dark); border-left: 1px solid var(--dark2); z-index: 501; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .cart-drawer.open { transform: translateX(0); } /* ── Cart header ─────────────────────────── */ .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; border-bottom: 1px solid var(--dark2); flex-shrink: 0; } .cart-head h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: 0.08em; } .cart-head-actions { display: flex; align-items: center; gap: 10px; } .cart-clear-all-btn { display: flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--dark3); color: var(--gray); font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; padding: 6px 12px; cursor: pointer; transition: all 0.2s; } .cart-clear-all-btn:hover { border-color: #c0392b; color: #e74c3c; } .cart-close { background: none; border: none; color: var(--gray); font-size: 18px; cursor: pointer; transition: color 0.2s; padding: 4px; line-height: 1; } .cart-close:hover { color: var(--white); } /* ── Cart items list ─────────────────────── */ .cart-items { flex: 1; overflow-y: auto; padding: 20px 28px; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; } .cart-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--dark2); animation: fadeUp 0.3s ease; } .cart-item-info { flex: 1; min-width: 0; } .cart-item-name { font-size: 13px; font-weight: 500; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cart-item-price { font-size: 12px; color: var(--gray); margin-bottom: 10px; } /* ── Qty controls ────────────────────────── */ .cart-item-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .qty-btn { width: 28px; height: 28px; background: var(--dark3); border: 1px solid var(--mid); color: var(--white); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; flex-shrink: 0; } .qty-btn:hover { background: var(--mid); } .qty-input { width: 48px; height: 28px; background: var(--dark2); border: 1px solid var(--mid); color: var(--white); font-family: var(--font-body); font-size: 13px; font-weight: 500; text-align: center; padding: 0 4px; outline: none; transition: border-color 0.2s; -moz-appearance: textfield; } .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-input:focus { border-color: var(--white); } /* ── Remove item button ──────────────────── */ .cart-item-remove { display: flex; align-items: center; gap: 4px; background: none; border: none; color: var(--gray); font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; margin-left: 4px; padding: 4px 6px; transition: color 0.2s; } .cart-item-remove:hover { color: #e74c3c; } /* ── Strikethrough original price ───────── */ .cart-total-original { text-decoration: line-through; color: var(--gray); font-size: 13px; font-family: var(--font-body); margin-right: 8px; } .cart-footer { padding: 24px 32px; border-top: 1px solid var(--dark2); } .cart-empty { text-align: center; padding: 40px 0; } .cart-empty p { font-size: 14px; color: var(--gray); margin-bottom: 20px; } .cart-empty button { background: var(--white); color: var(--black); border: none; padding: 14px 32px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; } .cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 14px; } .cart-total span:first-child { color: var(--gray); letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; } .cart-total span:last-child { font-family: var(--font-display); font-size: 26px; font-weight: 300; } .checkout-btn { width: 100%; background: var(--white); color: var(--black); border: none; padding: 18px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .checkout-btn:hover { background: var(--off-white); } /* ================== PRODUCT MODAL ================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 600; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .modal-overlay.open { opacity: 1; pointer-events: all; } .product-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); width: 90%; max-width: 760px; max-height: 90vh; background: var(--dark); border: 1px solid var(--mid); z-index: 601; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; } .product-modal.open { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); } .modal-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: var(--gray); font-size: 20px; cursor: pointer; z-index: 1; transition: color 0.2s; } .modal-close:hover { color: var(--white); } .modal-body { padding: 40px 48px; } .modal-product-top { display: flex; flex-direction: column; gap: 32px; margin-bottom: 40px; } .modal-product-info { width: 100%; } .modal-product-cat { font-size: 10px; color: var(--gray); letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 12px; } .modal-product-name { font-family: var(--font-display); font-size: 40px; font-weight: 300; line-height: 1.2; margin-bottom: 16px; } .modal-product-price { font-family: var(--font-display); font-size: 36px; font-weight: 300; margin-bottom: 20px; } .modal-product-stock { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; } .modal-divider { height: 1px; background: var(--dark2); margin: 32px 0; } .modal-product-desc { font-size: 14px; color: var(--light-gray); line-height: 1.9; margin-bottom: 40px; } .modal-actions { display: flex; gap: 12px; } .modal-add-btn { flex: 1; background: var(--white); color: var(--black); border: none; padding: 18px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .modal-add-btn:hover { background: var(--off-white); } .modal-add-btn:disabled { background: var(--mid); color: var(--gray); cursor: not-allowed; } /* ================== CHECKOUT MODAL ================== */ .checkout-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); width: 95%; max-width: 860px; max-height: 90vh; overflow-y: auto; background: var(--dark); border: 1px solid var(--mid); z-index: 601; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .checkout-modal.open { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); } .checkout-inner { padding: 56px; } .checkout-title { font-family: var(--font-display); font-size: 40px; font-weight: 300; margin-bottom: 8px; } .checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; } .checkout-form-side h4, .checkout-summary-side h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gray); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--dark2); } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; } .form-group input, .form-group select, .form-group textarea { width: 100%; background: var(--black); border: 1px solid var(--dark3); color: var(--white); padding: 14px 18px; font-family: var(--font-body); font-size: 13px; outline: none; transition: border-color 0.2s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--gray); } .form-group textarea { resize: vertical; } .form-group select option { background: var(--dark); } .form-note { font-size: 11px; color: var(--gray); background: var(--dark2); border: 1px solid var(--dark3); padding: 14px 18px; line-height: 1.7; margin-bottom: 24px; } .pay-btn { width: 100%; background: var(--white); color: var(--black); border: none; padding: 20px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .pay-btn:hover { background: var(--off-white); } .pay-btn:disabled { background: var(--mid); color: var(--gray); cursor: not-allowed; } .checkout-summary-item { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--dark2); } .checkout-summary-icon { font-size: 24px; } .checkout-summary-info { flex: 1; } .checkout-summary-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; } .checkout-summary-qty { font-size: 11px; color: var(--gray); } .checkout-summary-price { font-family: var(--font-display); font-size: 18px; font-weight: 300; } .summary-total { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; margin-top: 8px; border-top: 1px solid var(--mid); } .summary-total span:first-child { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); } .summary-total span:last-child { font-family: var(--font-display); font-size: 32px; font-weight: 300; } /* ================== ANIMATIONS ================== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes scrollLine { 0% { left: -100%; } 100% { left: 100%; } } /* ── Active nav link (current page) ── */ .nav-link-active { color: var(--nav-link-hover, var(--white)) !important; } .nav-link-active::after { width: 100% !important; } /* ── Nav search button ── */ .nav-search-btn { background: none; border: none; color: var(--white); cursor: pointer; padding: 8px; align-items: center; justify-content: center; transition: opacity 0.2s; } .nav-search-btn:hover { opacity: 0.7; } /* ── Hero secondary CTA ghost ── */ .hero-btns { display: flex; align-items: center; gap: 16px; justify-content: center; flex-wrap: wrap; } .hero-cta-ghost { display: inline-flex; align-items: center; gap: 10px; background: none; color: var(--white); border: 1px solid var(--mid); padding: 18px 40px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .hero-cta-ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.05); } /* ── Section CTA row ── */ .section-cta-row { text-align: center; margin-top: 48px; } .see-all-btn { background: none; border: 1px solid var(--mid); color: var(--light-gray); padding: 16px 48px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .see-all-btn:hover { background: var(--white); color: var(--black); border-color: var(--white); } /* ================== RESPONSIVE ================== */ @media (max-width: 900px) { .nav { padding: 0 24px; } .nav-center { display: none; } .hamburger { display: flex; } .hero { padding: 80px 24px; } .hero-bg-text { font-size: 80px; } .section { padding: 60px 24px; } .trust-strip { padding: 16px 24px; gap: 0; } .trust-item { padding: 8px 16px; } .trust-divider { display: none; } .footer { padding: 60px 24px 0; } .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; } .checkout-grid { grid-template-columns: 1fr; } .cart-drawer { width: 100vw; } .categories-section { padding: 60px 24px; } .modal-body { padding: 32px; } /* modal-product-top is already column */ .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; } } @media (max-width: 600px) { .hero-title { font-size: 44px; } .featured-grid, .products-grid { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; gap: 32px; } .checkout-inner { padding: 32px 24px; } .trust-strip { display: none; } } /* ══════════════════════════════════════ BULK / WHOLESALE DISCOUNT — CART ══════════════════════════════════════ */ .bulk-discount-banner { margin: 0 0 12px; padding: 12px 16px; background: #0a140a; border: 1px solid #1e3a1e; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .bulk-discount-banner.active { background: #0b1a0b; border-color: #2d5a2d; } .bulk-discount-label { font-size: 11px; color: #6fcf97; font-weight: 600; letter-spacing: 0.05em; } .bulk-discount-saving { font-size: 12px; color: #6fcf97; font-weight: 700; } .bulk-tiers-toggle { background: none; border: none; color: #6fcf97; font-size: 10px; font-family: var(--font-body, 'Montserrat', sans-serif); font-weight: 600; letter-spacing: 0.1em; cursor: pointer; text-decoration: underline; padding: 0; } .bulk-tiers-panel { background: #080f08; border: 1px solid #1e3a1e; border-top: none; padding: 12px 16px 16px; margin-bottom: 12px; } .bulk-tiers-title { font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: #555; margin-bottom: 10px; } .bulk-tier-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid #111; font-size: 11px; color: #666; } .bulk-tier-row.bulk-tier-active { color: #6fcf97; } .bulk-tier-name { font-weight: 600; } .bulk-tier-range { color: #444; font-size: 10px; } .bulk-tier-disc { font-weight: 700; } .bulk-tier-row.bulk-tier-active .bulk-tier-disc { color: #6fcf97; } .bulk-tiers-note { font-size: 10px; color: #444; margin-top: 10px; line-height: 1.6; } /* ═══════════════════════════════════════════════════════ MOBILE — index.html (≤900px and ≤480px) No desktop styles changed — additions only ═══════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* NAV */ .nav { height: 64px; padding: 0 20px; } /* HERO */ .hero { padding: 70px 20px 52px; } .hero-title { font-size: clamp(36px,10vw,72px); } .hero-btns { flex-direction: column; align-items: flex-start; gap: 10px; } .hero-cta, .hero-cta-ghost { width: 100%; justify-content: center; } .hero-desc { font-size: 13px; } /* HERO SEARCH */ .hero-search-bar-trigger { padding: 0 20px; } .search-trigger-tags { display: none; } .hero-search-inner { padding: 20px; } .hero-search-main { flex-direction: column; gap: 8px; } .hero-search-go-btn { width: 100%; } .hero-search-filters { gap: 6px; flex-wrap: wrap; } /* FEATURED / CATEGORY GRIDS */ .featured-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 2px; } .cat-grid { grid-template-columns: repeat(2, 1fr); } .section { padding: 52px 20px; } .categories-section { padding: 52px 20px; } .section-cta-row { padding: 0; } /* PRODUCT CARDS */ .product-card { padding: 16px; } .product-name { font-size: 14px; } /* CART DRAWER */ .cart-head { padding: 18px 20px; } .cart-items { padding: 16px 20px; } .cart-footer { padding: 16px 20px; } .cart-item { gap: 10px; padding: 14px 0; } .cart-item-img-wrap { width: 56px; height: 56px; flex-shrink: 0; } .qty-input { width: 40px; } /* PRODUCT MODAL */ .modal-body { padding: 24px 20px; } /* modal-product-top is already column */ .modal-product-name { font-size: 26px; } .modal-product-price { font-size: 24px; } /* CHECKOUT */ .checkout-inner { padding: 28px 20px; } .checkout-grid { grid-template-columns: 1fr; gap: 24px; } .checkout-title { font-size: 28px; } /* FOOTER */ .footer { padding: 48px 20px 0; } .footer-top { gap: 28px; } .footer-map-wrap { height: 200px; } .footer-bottom { flex-direction: column; gap: 10px; padding: 16px 20px; } .footer-bottom-links { flex-wrap: wrap; gap: 8px; } /* THEME TRIGGER */ .theme-trigger { bottom: 72px; right: 20px; width: 44px; height: 44px; } .theme-panel { right: 16px; width: calc(100vw - 32px); max-width: 320px; bottom: 128px; } } @media (max-width: 480px) { /* HERO */ .hero { padding: 56px 16px 44px; } .hero-title { font-size: 38px; line-height: 1.1; } .hero-eyebrow { font-size: 9px; letter-spacing: 0.3em; } .hero-desc { font-size: 12px; } .hero-btns { gap: 8px; } .hero-cta { font-size: 11px; padding: 14px 24px; } .hero-cta-ghost { font-size: 11px; padding: 12px 20px; } /* GRIDS */ .featured-grid { grid-template-columns: 1fr 1fr; } .cat-grid { grid-template-columns: 1fr 1fr; } /* MARQUEE */ .marquee-track { animation-duration: 20s; } /* NAV */ .nav { height: 56px; } .logo-main { font-size: 16px; } .logo-sub { font-size: 9px; } /* CART */ .cart-item-name { font-size: 12px; } .cart-item-price { font-size: 11px; } .cart-item-controls { gap: 4px; flex-wrap: wrap; } .cart-clear-all-btn { font-size: 9px; padding: 5px 10px; } .cart-total span:last-child { font-size: 22px; } /* MODAL */ .modal-body { padding: 20px 16px; } .modal-product-name { font-size: 22px; } .modal-actions { flex-direction: column; } .modal-add-btn, .modal-share-btn { width: 100%; } /* CHECKOUT */ .checkout-inner { padding: 20px 16px; } .checkout-title { font-size: 24px; } .summary-total { font-size: 13px; } /* FOOTER */ .footer-top { grid-template-columns: 1fr; } .footer-col { border-top: 1px solid var(--dark2); padding-top: 20px; } .admin-secret-trigger { opacity: 0.4; } } /* ═══════════════════════════════════════════════════════ FLOATING CART BUTTON ═══════════════════════════════════════════════════════ */ .floating-cart-btn { position: fixed; top: 192px; right: 32px; z-index: 550; width: 62px; height: 62px; border-radius: 50%; background: var(--white); color: var(--black); border: none; font-size: 26px; cursor: pointer; box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: scale(0.7) translateX(20px); transition: opacity 0.3s cubic-bezier(0.34,1.56,0.64,1), transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease; } .floating-cart-btn.floating-cart-visible { opacity: 1; pointer-events: all; transform: scale(1) translateX(0); } .floating-cart-btn:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35); transform: scale(1.08) translateX(0); } .floating-cart-count { position: absolute; top: -2px; right: -2px; background: #e53935; color: #fff; font-size: 10px; font-weight: 700; font-family: var(--font-body); min-width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid var(--black); line-height: 1; } /* ═══════════════════════════════════════════════════════ CART ADD NOTIFICATION CARD ═══════════════════════════════════════════════════════ */ .cart-add-toast { position: fixed; top: 268px; right: 32px; z-index: 551; width: 300px; background: var(--dark); border: 1px solid var(--dark2); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.55); display: flex; align-items: center; gap: 12px; padding: 14px 16px; opacity: 0; pointer-events: none; transform: translateY(24px) scale(0.95); transition: opacity 0.35s cubic-bezier(0.34,1.56,0.64,1), transform 0.35s cubic-bezier(0.34,1.56,0.64,1); } .cart-add-toast.cat-show { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); } .cat-icon { font-size: 28px; flex-shrink: 0; line-height: 1; } .cat-body { flex: 1; min-width: 0; } .cat-title { font-size: 12px; font-weight: 600; color: var(--white); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; } .cat-sub { font-size: 13px; font-family: var(--font-display); font-weight: 300; color: var(--light-gray); } .cat-view { background: var(--white); color: var(--black); border: none; border-radius: 999px; padding: 7px 14px; font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 0.2s; } .cat-view:hover { background: var(--off-white); } /* Search icon: hide on desktop, show on mobile only */ .nav-search-btn { display: none; } @media (max-width: 900px) { .nav-search-btn { display: flex; } .floating-cart-btn { top: 80px; right: 16px; width: 52px; height: 52px; font-size: 22px; } .cart-add-toast { top: 144px; right: 16px; left: 16px; width: auto; } } @media (max-width: 480px) { .floating-cart-btn { top: 72px; right: 12px; } .cart-add-toast { top: 136px; } } /* ── Share Catalogue button ─────────────────────────── */ .catalogue-share-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--dark3); color: var(--gray); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; padding: 14px 24px; cursor: pointer; transition: var(--transition); margin-left: 12px; } .catalogue-share-btn:hover { border-color: var(--mid); color: var(--white); } @media (max-width: 600px) { .catalogue-share-btn { margin-left: 0; width: 100%; justify-content: center; } .section-cta-row { flex-direction: column; align-items: stretch; gap: 8px; } } /* ═══════════════════════════════════════════════════════ PAYMENT METHOD SELECTOR ═══════════════════════════════════════════════════════ */ .payment-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; } .payment-method-btn { background: var(--dark2); border: 2px solid var(--dark3); color: var(--light-gray); padding: 12px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all 0.2s ease; text-align: center; font-family: var(--font-body); } .payment-method-btn:hover { border-color: var(--mid); color: var(--white); background: var(--dark3); } .payment-method-btn.active { border-color: var(--white); background: var(--dark3); color: var(--white); } .pm-icon { font-size: 20px; line-height: 1; } .pm-label { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .pm-sub { font-size: 9px; color: var(--gray); letter-spacing: 0.05em; line-height: 1.3; } .payment-method-btn.active .pm-sub { color: var(--light-gray); } @media (max-width: 480px) { .payment-method-grid { grid-template-columns: 1fr; gap: 4px; } .payment-method-btn { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 16px; } .pm-sub { display: none; } } /* ══════════════════════════════════════════════════════ PROMO BANNER ══════════════════════════════════════════════════════ */ .promo-banner { background: linear-gradient(90deg, #1a0a00, #2d1500, #1a0a00); border-bottom: 1px solid rgba(255,160,0,0.25); padding: 10px 20px; display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; z-index: 201; } .promo-banner-text { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; color: #ffb300; text-align: center; text-transform: uppercase; } .promo-banner-code { background: rgba(255,179,0,0.15); border: 1px solid rgba(255,179,0,0.4); color: #ffb300; font-family: monospace; font-size: 12px; font-weight: 700; padding: 3px 10px; letter-spacing: 0.2em; cursor: pointer; transition: background 0.2s; } .promo-banner-code:hover { background: rgba(255,179,0,0.25); } .promo-banner-close { position: absolute; right: 16px; background: none; border: none; color: rgba(255,179,0,0.5); font-size: 16px; cursor: pointer; padding: 4px 8px; transition: color 0.2s; } .promo-banner-close:hover { color: #ffb300; } /* ══════════════════════════════════════════════════════ SOCIAL PROOF ON PRODUCT CARDS ══════════════════════════════════════════════════════ */ .product-social-proof { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--gray); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--dark2); } .product-social-proof .proof-hot { color: #ff7043; } .product-social-proof .proof-eye { color: #7986cb; } .product-stars-mini { display: flex; align-items: center; gap: 2px; font-size: 10px; color: #ffb300; } .product-stars-mini .star-count { color: var(--gray); margin-left: 3px; } /* ══════════════════════════════════════════════════════ WHATSAPP ORDER BUTTON ══════════════════════════════════════════════════════ */ .whatsapp-order-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #1a3a1a; border: 1px solid #2d5a2d; color: #4caf50; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 15px 20px; cursor: pointer; transition: all 0.2s; margin-top: 10px; text-decoration: none; } .whatsapp-order-btn:hover { background: #22c55e22; border-color: #4caf50; color: #4caf50; } .whatsapp-order-btn svg { flex-shrink: 0; } /* ══════════════════════════════════════════════════════ PROMO CODE FIELD ══════════════════════════════════════════════════════ */ .promo-row { display: flex; gap: 8px; margin: 12px 0; } .promo-input { flex: 1; background: var(--black); border: 1px solid var(--dark3); color: var(--white); font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 14px; outline: none; transition: border-color 0.2s; } .promo-input:focus { border-color: var(--mid); } .promo-input::placeholder { text-transform: none; font-weight: 400; color: var(--gray); letter-spacing: 0; } .promo-apply-btn { background: none; border: 1px solid var(--mid); color: var(--light-gray); font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 12px 18px; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .promo-apply-btn:hover { background: var(--white); color: var(--black); border-color: var(--white); } .promo-feedback { font-size: 11px; margin-top: 4px; min-height: 16px; } .promo-feedback.success { color: #4caf50; } .promo-feedback.error { color: #ef5350; } /* Delivery fee selector */ .delivery-select { width: 100%; background: var(--black); border: 1px solid var(--dark3); color: var(--white); font-family: var(--font-body); font-size: 13px; padding: 12px 14px; outline: none; cursor: pointer; transition: border-color 0.2s; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .delivery-select:focus { border-color: var(--mid); } .delivery-fee-display { font-size: 12px; color: var(--gray); margin-top: 6px; } .delivery-fee-display strong { color: var(--white); } /* ══════════════════════════════════════════════════════ PRODUCT REVIEWS ══════════════════════════════════════════════════════ */ .reviews-section { margin-top: 32px; border-top: 1px solid var(--dark2); padding-top: 28px; } .reviews-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .reviews-title { font-family: var(--font-display); font-size: 22px; font-weight: 300; } .reviews-summary { display: flex; align-items: center; gap: 12px; } .reviews-avg { font-size: 36px; font-weight: 700; font-family: var(--font-body); line-height: 1; } .reviews-stars { display: flex; flex-direction: column; gap: 4px; } .stars-row { display: flex; gap: 3px; font-size: 18px; color: #ffb300; } .stars-row .empty { color: var(--dark3); } .reviews-count { font-size: 11px; color: var(--gray); letter-spacing: 0.1em; } /* Write review form */ .write-review-btn { background: none; border: 1px solid var(--mid); color: var(--light-gray); font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 10px 20px; cursor: pointer; transition: all 0.2s; } .write-review-btn:hover { background: var(--white); color: var(--black); } .review-form { background: var(--dark2); border: 1px solid var(--dark3); padding: 24px; margin-bottom: 20px; } .review-form h4 { font-family: var(--font-display); font-size: 18px; font-weight: 300; margin-bottom: 16px; } .star-picker { display: flex; gap: 6px; margin-bottom: 16px; font-size: 28px; cursor: pointer; } .star-picker .sp-star { color: var(--dark3); transition: color 0.1s, transform 0.1s; line-height: 1; } .star-picker .sp-star:hover, .star-picker .sp-star.selected { color: #ffb300; transform: scale(1.15); } .review-name-input, .review-text-input { width: 100%; background: var(--black); border: 1px solid var(--dark3); color: var(--white); font-family: var(--font-body); font-size: 13px; padding: 12px 14px; outline: none; margin-bottom: 10px; transition: border-color 0.2s; box-sizing: border-box; } .review-name-input:focus, .review-text-input:focus { border-color: var(--mid); } .review-text-input { resize: vertical; min-height: 80px; } .submit-review-btn { background: var(--white); color: var(--black); border: none; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; padding: 13px 28px; cursor: pointer; transition: background 0.2s; } .submit-review-btn:hover { background: var(--off-white); } /* Individual review cards */ .review-list { display: flex; flex-direction: column; gap: 16px; } .review-card { background: var(--dark); border: 1px solid var(--dark2); padding: 20px 24px; } .review-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; gap: 12px; } .review-author { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--white); } .review-date { font-size: 10px; color: var(--gray); margin-top: 3px; } .review-rating { display: flex; gap: 2px; font-size: 14px; color: #ffb300; flex-shrink: 0; } .review-body { font-size: 13px; color: var(--light-gray); line-height: 1.7; } .review-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #4caf50; margin-top: 8px; } .no-reviews { text-align: center; padding: 32px; color: var(--gray); font-size: 13px; border: 1px dashed var(--dark3); } /* ══════════════════════════════════════════════════════ CHECKOUT STEPS ══════════════════════════════════════════════════════ */ .checkout-steps { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 1px solid var(--dark2); padding-bottom: 16px; } .checkout-step { flex: 1; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); padding-bottom: 12px; border-bottom: 2px solid transparent; transition: all 0.2s; } .checkout-step.active { color: var(--white); border-bottom-color: var(--white); } .checkout-step.done { color: #4caf50; border-bottom-color: #4caf50; } .checkout-step-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--dark3); color: var(--gray); font-size: 10px; margin-bottom: 6px; display: block; margin: 0 auto 6px; } .checkout-step.active .checkout-step-num { background: var(--white); color: var(--black); } .checkout-step.done .checkout-step-num { background: #4caf50; color: #fff; } /* Order review panel */ .order-review-panel { display: none; } .order-review-panel.active { display: block; } .order-review-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--dark2); gap: 12px; } .order-review-item:last-child { border-bottom: none; } .order-review-name { font-size: 13px; color: var(--white); flex: 1; } .order-review-qty { font-size: 11px; color: var(--gray); } .order-review-price { font-size: 13px; font-weight: 600; } .order-review-total-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 0; font-family: var(--font-display); font-size: 20px; } .order-review-back { background: none; border: 1px solid var(--dark3); color: var(--gray); font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 14px 24px; cursor: pointer; transition: all 0.2s; margin-right: 10px; } .order-review-back:hover { border-color: var(--mid); color: var(--white); } .btn-proceed-pay { background: var(--white); color: var(--black); border: none; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; padding: 16px 32px; cursor: pointer; transition: background 0.2s; flex: 1; } .btn-proceed-pay:hover { background: var(--off-white); } @media (max-width: 600px) { .promo-banner-text { font-size: 9px; letter-spacing: 0.08em; } .checkout-steps { gap: 0; } .checkout-step { font-size: 8px; padding-bottom: 10px; } .review-card { padding: 14px 16px; } .review-form { padding: 16px; } .whatsapp-order-btn { font-size: 10px; padding: 13px 16px; } } /* ══════════════════════════════════════════════════════ PAYMENT METHOD DROPDOWN ══════════════════════════════════════════════════════ */ .pm-dropdown { position: relative; cursor: pointer; user-select: none; } .pm-dropdown-selected { display: flex; align-items: center; gap: 14px; background: var(--dark2); border: 1px solid var(--mid); padding: 14px 16px; transition: border-color 0.2s; } .pm-dropdown.open .pm-dropdown-selected { border-color: var(--white); } .pm-drop-logo { flex-shrink: 0; display: flex; align-items: center; } .pm-drop-info { flex: 1; display: flex; flex-direction: column; gap: 3px; } .pm-drop-name { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); } .pm-drop-sub { font-size: 10px; color: var(--gray); letter-spacing: 0.05em; } .pm-drop-chevron { color: var(--gray); display: flex; align-items: center; transition: transform 0.25s ease; flex-shrink: 0; } .pm-dropdown.open .pm-drop-chevron { transform: rotate(180deg); } /* Dropdown list */ .pm-dropdown-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: #111; border: 1px solid var(--mid); border-top: none; z-index: 200; display: none; flex-direction: column; box-shadow: 0 16px 40px rgba(0,0,0,0.6); } .pm-dropdown.open .pm-dropdown-list { display: flex; } .pm-drop-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; transition: background 0.15s; border-bottom: 1px solid var(--dark2); } .pm-drop-item:last-child { border-bottom: none; } .pm-drop-item:hover { background: var(--dark2); } .pm-drop-item.selected { background: var(--dark3); } .pm-drop-check { font-size: 14px; color: #4caf50; font-weight: 700; margin-left: auto; flex-shrink: 0; min-width: 16px; text-align: center; } /* ══════════════════════════════════════════════════════ ORDER HISTORY SECTION ══════════════════════════════════════════════════════ */ .order-history-section { background: var(--dark); border-top: 1px solid var(--dark2); padding: 80px 48px; } .order-history-inner { max-width: 680px; margin: 0 auto; text-align: center; } .order-history-title { font-family: var(--font-display); font-size: 36px; font-weight: 300; margin-bottom: 12px; } .order-history-sub { font-size: 13px; color: var(--gray); line-height: 1.8; margin-bottom: 32px; } .order-history-row { display: flex; gap: 0; border: 1px solid var(--mid); } .order-history-input { flex: 1; background: var(--black); border: none; color: var(--white); font-family: var(--font-body); font-size: 14px; padding: 16px 20px; outline: none; } .order-history-input::placeholder { color: var(--gray); } .order-history-btn { background: var(--white); color: var(--black); border: none; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 16px 28px; cursor: pointer; transition: background 0.2s; white-space: nowrap; flex-shrink: 0; } .order-history-btn:hover { background: var(--off-white); } .order-history-results { margin-top: 24px; text-align: left; } .oh-order-card { background: var(--black); border: 1px solid var(--dark2); padding: 20px 24px; margin-bottom: 8px; } .oh-order-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; } .oh-order-id { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; color: var(--white); } .oh-order-date { font-size: 11px; color: var(--gray); } .oh-order-status { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 4px 10px; background: rgba(76,175,80,0.12); color: #4caf50; border: 1px solid rgba(76,175,80,0.3); } .oh-order-items { font-size: 12px; color: var(--light-gray); line-height: 1.8; margin-bottom: 10px; } .oh-order-total { font-family: var(--font-display); font-size: 18px; font-weight: 300; display: flex; justify-content: space-between; align-items: center; } .oh-track-btn { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); background: none; border: 1px solid var(--dark3); padding: 8px 16px; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-block; } .oh-track-btn:hover { border-color: var(--mid); } .oh-no-orders { text-align: center; padding: 40px 20px; color: var(--gray); font-size: 13px; border: 1px dashed var(--dark3); } @media (max-width: 600px) { .order-history-section { padding: 52px 16px; } .order-history-title { font-size: 26px; } .order-history-row { flex-direction: column; border: none; gap: 8px; } .order-history-input { border: 1px solid var(--mid); } .order-history-btn { width: 100%; } .pm-dropdown-selected { padding: 12px 14px; gap: 10px; } .pm-drop-item { padding: 12px 14px; gap: 10px; } } /* ══════════════════════════════════════════════════════ CUSTOMERS ALSO BOUGHT ══════════════════════════════════════════════════════ */ .also-bought-section { margin-top: 32px; border-top: 1px solid var(--dark2); padding-top: 28px; } .also-bought-title { font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gray); margin-bottom: 16px; } .also-bought-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .also-bought-card { background: var(--dark2); border: 1px solid var(--dark3); cursor: pointer; transition: border-color 0.2s; overflow: hidden; } .also-bought-card:hover { border-color: var(--mid); } .also-bought-img { aspect-ratio: 1; overflow: hidden; background: var(--dark3); } .also-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; } .also-bought-card:hover .also-img { transform: scale(1.04); } .also-bought-info { padding: 10px; } .also-bought-name { font-size: 11px; font-weight: 500; color: var(--light-gray); line-height: 1.4; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .also-bought-price { font-family: var(--font-display); font-size: 14px; font-weight: 300; margin-bottom: 8px; } .also-bought-add { width: 100%; background: none; border: 1px solid var(--dark3); color: var(--gray); font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 7px; cursor: pointer; transition: all 0.2s; } .also-bought-add:hover { background: var(--white); color: var(--black); border-color: var(--white); } .also-bought-add:disabled { opacity: 0.4; cursor: not-allowed; } @media (max-width: 600px) { .also-bought-grid { grid-template-columns: repeat(2, 1fr); } } /* ══════════════════════════════════════════════════════════ MEDIA PROTECTION — block right-click save & drag download ══════════════════════════════════════════════════════════ */ /* All product images and videos — no pointer events for saves */ .product-img, .product-slideshow img, .modal-slide img, .modal-product-img, .ipe-gallery img, .media-thumb-img, .also-bought-img, .cat-img, .cart-img, .checkout-img, .modal-video, .modal-slide video { -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; pointer-events: none; /* kills right-click save AND drag */ } /* Overlay that intercepts clicks (passes through to buttons below via JS) */ .media-protect-overlay { position: absolute; inset: 0; z-index: 4; cursor: pointer; background: transparent; -webkit-user-drag: none; user-drag: none; } /* ══════════════════════════════════════════════════════════ FULLSCREEN LIGHTBOX ══════════════════════════════════════════════════════════ */ #pesLightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.97); align-items: center; justify-content: center; flex-direction: column; } #pesLightbox.open { display: flex; } .pes-lb-stage { position: relative; width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pes-lb-img { max-width: 92vw; max-height: 82vh; object-fit: contain; display: block; border: 1px solid rgba(255,255,255,0.08); -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; pointer-events: none; } .pes-lb-video { max-width: 92vw; max-height: 82vh; outline: none; pointer-events: all; /* video controls need pointer events */ } /* Nav arrows */ .pes-lb-prev, .pes-lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.18); color: #fff; width: 44px; height: 44px; font-size: 22px; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; transition: background 0.2s; -webkit-tap-highlight-color: transparent; } .pes-lb-prev { left: 16px; } .pes-lb-next { right: 16px; } .pes-lb-prev:hover, .pes-lb-next:hover { background: rgba(255,255,255,0.12); } /* Counter + close row */ .pes-lb-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; flex-shrink: 0; } .pes-lb-counter { font-family: var(--font-body, 'Montserrat', sans-serif); font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.15em; } .pes-lb-product-name { font-family: var(--font-body, 'Montserrat', sans-serif); font-size: 12px; color: rgba(255,255,255,0.75); letter-spacing: 0.1em; text-align: center; flex: 1; } .pes-lb-close { background: none; border: 1px solid rgba(255,255,255,0.25); color: #fff; width: 36px; height: 36px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; flex-shrink: 0; } .pes-lb-close:hover { background: rgba(255,255,255,0.1); } /* Thumbnail strip */ .pes-lb-thumbs { display: flex; gap: 6px; padding: 10px 20px 16px; overflow-x: auto; max-width: 100%; flex-shrink: 0; scrollbar-width: none; } .pes-lb-thumbs::-webkit-scrollbar { display: none; } .pes-lb-thumb { width: 52px; height: 52px; flex-shrink: 0; border: 2px solid transparent; cursor: pointer; overflow: hidden; transition: border-color 0.2s; -webkit-tap-highlight-color: transparent; } .pes-lb-thumb.active { border-color: #fff; } .pes-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; } /* Expand icon on product card slideshow + modal */ .pes-expand-btn { position: absolute; bottom: 44px; right: 10px; z-index: 5; background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; transition: background 0.2s; -webkit-tap-highlight-color: transparent; } .pes-expand-btn:hover { background: rgba(255,255,255,0.15); } /* Fullscreen button on modal slideshow */ .pes-modal-expand { position: absolute; top: 10px; right: 10px; z-index: 5; background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; border-radius: 2px; transition: background 0.2s; } .pes-modal-expand:hover { background: rgba(255,255,255,0.15); } /* Swipe hint on mobile */ @media (max-width: 600px) { .pes-lb-prev, .pes-lb-next { width: 36px; height: 36px; font-size: 18px; } .pes-lb-prev { left: 6px; } .pes-lb-next { right: 6px; } .pes-lb-img { max-width: 100vw; max-height: 72vh; } } /* ═══════════════════════════════════════════════════════════════ MOBILE CHECKOUT — BOTTOM SHEET On phones, the checkout modal becomes a native bottom sheet that slides up from the bottom. Before payment opens, it collapses to a slim bar so the payment popup has full viewport. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { /* ── Sheet base ──────────────────────────────────────── */ .checkout-modal { /* Override the centered dialog */ top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 100% !important; max-height: 92dvh !important; transform: translateY(100%) !important; border-radius: 20px 20px 0 0; border: none; border-top: 1px solid var(--dark3); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1) !important; /* Subtle top shadow to lift from page */ box-shadow: 0 -8px 40px rgba(0,0,0,0.6), 0 -1px 0 rgba(255,255,255,0.06); } .checkout-modal.open { transform: translateY(0) !important; opacity: 1 !important; pointer-events: all !important; } /* ── Drag handle ─────────────────────────────────────── */ .checkout-modal::before { content: ''; display: block; width: 40px; height: 4px; background: var(--mid); border-radius: 2px; margin: 14px auto 0; flex-shrink: 0; } /* ── Close button repositioned ───────────────────────── */ .checkout-modal .modal-close { position: sticky; top: 0; float: right; margin: -8px 16px 0 0; z-index: 10; background: var(--dark2); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 14px; } /* ── Inner padding ───────────────────────────────────── */ .checkout-inner { padding: 8px 20px 40px !important; /* extra bottom for home indicator */ padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important; } .checkout-title { font-size: 22px !important; margin-top: 4px; margin-bottom: 6px; } /* ── Pay button — always full-width prominent ─────────── */ .pay-btn { position: sticky; bottom: 0; bottom: env(safe-area-inset-bottom, 0); z-index: 5; margin-top: 20px; box-shadow: 0 -12px 24px rgba(8,8,8,0.9); } /* ── MINIMISED state: sheet collapses to pay-bar only ─── */ /* Applied by JS just before opening payment gateway */ .checkout-modal.minimised { transform: translateY(calc(100% - 80px)) !important; border-radius: 20px 20px 0 0; overflow: hidden; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important; } .checkout-modal.minimised .checkout-inner { /* Keep content in DOM but invisible — form values preserved */ opacity: 0; pointer-events: none; } /* ── Payment pending bar shown when minimised ─────────── */ .pes-payment-pending-bar { display: none; } .checkout-modal.minimised .pes-payment-pending-bar { display: flex; align-items: center; justify-content: center; gap: 10px; height: 80px; background: var(--dark); border-top: 1px solid var(--dark2); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray); padding: 0 20px; } /* ── Spinner for the pending bar ─────────────────────── */ /* ═══ POLISHED LOADING STATES ═══════════════════════════════ */ /* ══ Loading Overlay — mature minimal design ══ */ .pes-loading-overlay { position: fixed; inset: 0; z-index: 99998; background: rgba(0,0,0,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; animation: pesLoadFadeIn 0.25s ease; } @keyframes pesLoadFadeIn { from { opacity:0; } to { opacity:1; } } .pes-loading-card { background: #0e0e0e; border: 1px solid rgba(255,255,255,0.07); border-top: 1px solid rgba(255,255,255,0.14); padding: 44px 56px; display: flex; flex-direction: column; align-items: center; gap: 22px; min-width: 240px; box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.03); position: relative; overflow: hidden; } .pes-loading-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); } /* Elegant dual-ring spinner */ .pes-ring-spinner { width: 40px; height: 40px; position: relative; flex-shrink: 0; } .pes-ring-spinner::before, .pes-ring-spinner::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; } .pes-ring-spinner::before { border-top-color: rgba(255,255,255,0.9); border-right-color: rgba(255,255,255,0.2); animation: pesRingSpin 0.8s linear infinite; } .pes-ring-spinner::after { inset: 7px; border-top-color: rgba(255,255,255,0.4); animation: pesRingSpin 1.2s linear infinite reverse; } @keyframes pesRingSpin { to { transform: rotate(360deg); } } .pes-loading-text { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.55); } .pes-loading-sub { font-family: 'Montserrat', sans-serif; font-size: 9px; color: rgba(255,255,255,0.22); letter-spacing: 0.1em; margin-top: -10px; } g); } } /* ── Overlay is full-black on mobile for sheet feel ───── */ #checkoutOverlay { background: rgba(0,0,0,0.7) !important; } /* ── Summary side stacks below form on mobile ─────────── */ .checkout-summary-side { padding-top: 0; } /* ── Delivery select easier to tap ───────────────────── */ .delivery-select, #deliveryZoneSelect { font-size: 16px !important; /* prevents iOS zoom on focus */ } /* ── All inputs: prevent iOS zoom ────────────────────── */ .form-group input, .form-group select, .form-group textarea, .promo-input { font-size: 16px !important; } } /* ── Slightly larger phones (601–767px) get partial sheet ── */ @media (min-width: 601px) and (max-width: 767px) { .checkout-modal { top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 100% !important; max-height: 94dvh !important; transform: translateY(100%) !important; border-radius: 16px 16px 0 0; border-top: 1px solid var(--dark3); transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1) !important; } .checkout-modal.open { transform: translateY(0) !important; opacity: 1 !important; pointer-events: all !important; } .checkout-modal.minimised { transform: translateY(calc(100% - 80px)) !important; overflow: hidden; } .checkout-modal.minimised .checkout-inner { opacity: 0; pointer-events: none; } .pes-payment-pending-bar { display: none; } .checkout-modal.minimised .pes-payment-pending-bar { display: flex; align-items: center; justify-content: center; gap: 10px; height: 80px; background: var(--dark); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray); padding: 0 20px; } .form-group input, .form-group select, .form-group textarea { font-size: 16px !important; } } /* ═══════════════════════════════════════════════════════════════ MOBILE FIXES — All Pages Comprehensive mobile view improvements for index, tracking, receipt, and admin panel pages. ═══════════════════════════════════════════════════════════════ */ /* ── 1. Mobile nav drawer — iOS zoom & safe area fix ─────────── */ .mob-search-input { font-size: 16px !important; /* prevents iOS zoom on focus */ } .mob-drawer { padding-bottom: env(safe-area-inset-bottom, 0px); } .mob-drawer-foot { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } /* ── 2. Product price — prevent overflow on small cards ──────── */ @media (max-width: 480px) { .product-price { font-size: 20px; } .product-name { font-size: 13px; } .product-desc { font-size: 11px; -webkit-line-clamp: 2; } .product-card { padding: 12px; } .card-actions { gap: 6px; } .btn-add-cart { font-size: 10px; padding: 11px 8px; letter-spacing: 0.1em; } .btn-view-more { padding: 11px 12px; font-size: 10px; } } /* ── 3. Category cards — reduce height on mobile ─────────────── */ @media (max-width: 900px) { .cat-item { padding: 24px 16px; } .cat-item-icon { font-size: 28px; margin-bottom: 10px; } } @media (max-width: 480px) { .cat-item { padding: 16px 10px; } .cat-item-name { font-size: 11px; letter-spacing: 0.06em; } .cat-item-count { font-size: 10px; } .cat-grid { grid-template-columns: 1fr 1fr; } } /* ── 4. Product modal — bottom sheet on mobile ───────────────── */ @media (max-width: 600px) { .product-modal { top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 100% !important; max-height: 92dvh !important; transform: translateY(100%) !important; border-radius: 20px 20px 0 0; border: none; border-top: 1px solid var(--dark3); transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1) !important; box-shadow: 0 -8px 40px rgba(0,0,0,0.6); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .product-modal::before { content: ''; display: block; width: 40px; height: 4px; background: var(--mid); border-radius: 2px; margin: 14px auto 0; } .product-modal.open { transform: translateY(0) !important; opacity: 1 !important; pointer-events: all !important; } .modal-body { padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important; } .modal-close { position: sticky; top: 0; float: right; margin: -8px 16px 0 0; background: var(--dark2); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 14px; z-index: 10; } .modal-product-name { font-size: 20px !important; } .modal-product-price { font-size: 20px !important; } .modal-actions { flex-direction: column; gap: 8px; } .modal-add-btn, .modal-share-btn { width: 100%; } } /* ── 5. Floating cart — fix overlap with nav at 480px ────────── */ @media (max-width: 480px) { .floating-cart-btn { top: calc(56px + 12px) !important; /* nav height + gap */ right: 12px; } .cart-add-toast { top: calc(56px + 12px + 52px + 8px) !important; } } /* ── 6. Hero scroll indicator — fix left position on mobile ───── */ @media (max-width: 900px) { .hero-scroll { left: 20px; bottom: 24px; } } @media (max-width: 480px) { .hero-scroll { display: none; } /* too cramped at this size */ } /* ── 7. Section CTA row — stack on small screens ─────────────── */ @media (max-width: 480px) { .section-cta-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 32px; } .see-all-btn { width: 100%; } } /* ── 9. Receipt page — mobile padding ────────────────────────── */ @media (max-width: 600px) { .rcpt-wrap { padding: 24px 16px 60px; } .rcpt-header { padding-bottom: 20px; margin-bottom: 24px; } .rcpt-title { font-size: 32px; margin-bottom: 4px; } .rcpt-meta { margin-bottom: 20px; } .rcpt-meta-cell { padding: 12px 14px; } .rcpt-tracking { padding: 16px; } .rcpt-tracking-id { font-size: 16px; } .rcpt-totals { padding: 12px 14px; } .rcpt-total-row.grand { font-size: 18px; } .rcpt-footer { font-size: 10px; } } /* ── 11. Social proof on product cards — mobile ──────────────── */ @media (max-width: 480px) { .product-social-proof { font-size: 9px; gap: 4px; flex-wrap: wrap; } } /* ── Trust strip on medium mobile ────────────────────────────── */ @media (max-width: 900px) { .trust-strip { gap: 0; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .trust-strip::-webkit-scrollbar { display: none; } .trust-item { padding: 8px 20px; flex-shrink: 0; } } /* ── Cart drawer — iOS rubber-band fix ───────────────────────── */ .cart-drawer { -webkit-overflow-scrolling: touch; } .cart-items { overscroll-behavior: contain; } /* ── Cart footer safe-area padding ──────────────────────────── */ @media (max-width: 900px) { .cart-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } } /* ── Order history on mobile ─────────────────────────────────── */ @media (max-width: 480px) { .order-history-section { padding: 40px 16px; } .order-history-title { font-size: 24px; } .oh-order-card { padding: 14px; } .oh-order-total { font-size: 16px; } } /* ── Also-bought grid — mobile ───────────────────────────────── */ @media (max-width: 480px) { .also-bought-grid { grid-template-columns: 1fr 1fr; gap: 6px; } .also-bought-name { font-size: 10px; -webkit-line-clamp: 2; } .also-bought-price { font-size: 12px; } } /* ── Reviews on mobile ───────────────────────────────────────── */ @media (max-width: 480px) { .reviews-header { flex-direction: column; align-items: flex-start; } .reviews-avg { font-size: 28px; } .star-picker { font-size: 24px; gap: 4px; } .write-review-btn { width: 100%; text-align: center; } } /* ── Promo banner on very small screens ──────────────────────── */ @media (max-width: 360px) { .promo-banner-text { font-size: 8px; letter-spacing: 0.05em; } .promo-banner-code { font-size: 10px; padding: 2px 6px; } } /* ── Prevent horizontal scroll on all pages ─────────────────── */ html, body { overflow-x: hidden; max-width: 100%; } /* ── Tap highlight removal for better mobile feel ────────────── */ button, a, [role="button"] { -webkit-tap-highlight-color: transparent; } /* ═══════════════════════════════════════════════════════════════ MOBILE CART — FULL BOTTOM SHEET On mobile the cart becomes a full-height bottom sheet. Header is sticky. Items scroll freely. Footer with checkout button is always visible — never hidden behind the browser UI. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* ── Sheet slides up from bottom ─────────────────────────── */ .cart-drawer { top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 92dvh !important; /* leaves a sliver of page showing */ max-height: 92dvh !important; border-left: none !important; border-top: 1px solid var(--dark2) !important; border-radius: 20px 20px 0 0 !important; transform: translateY(100%) !important; transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1) !important; box-shadow: 0 -8px 40px rgba(0,0,0,0.6) !important; display: flex !important; flex-direction: column !important; /* Critical: prevent rubber-band propagating to page */ overscroll-behavior: contain; } .cart-drawer.open { transform: translateY(0) !important; } /* ── Drag handle ─────────────────────────────────────────── */ .cart-drawer::before { content: ''; display: block; width: 40px; height: 4px; background: var(--mid); border-radius: 2px; margin: 14px auto 0; flex-shrink: 0; } /* ── Header — sticky at top ──────────────────────────────── */ .cart-head { position: sticky !important; top: 0 !important; z-index: 10 !important; background: var(--dark) !important; padding: 12px 20px 14px !important; border-bottom: 1px solid var(--dark2) !important; flex-shrink: 0 !important; } .cart-head h3 { font-size: 18px !important; } /* Compact clear + close in header */ .cart-head-actions { gap: 8px !important; } .cart-clear-all-btn { font-size: 9px !important; padding: 5px 10px !important; } /* ── Scrollable item list — fills available space ────────── */ .cart-items { flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; padding: 12px 16px !important; /* Allow items to scroll fully without footer covering them */ padding-bottom: 8px !important; } /* ── Cart items — tighter layout ─────────────────────────── */ .cart-item { padding: 12px 0 !important; gap: 10px !important; align-items: flex-start !important; } .cart-item-img-wrap { width: 52px !important; height: 52px !important; flex-shrink: 0 !important; } .cart-item-name { font-size: 13px !important; white-space: normal !important; line-height: 1.35 !important; } .cart-item-price { font-size: 11px !important; margin-bottom: 8px !important; } .cart-item-controls { gap: 6px !important; flex-wrap: wrap !important; align-items: center !important; } .qty-btn { width: 32px !important; height: 32px !important; font-size: 16px !important; } .qty-input { width: 44px !important; height: 32px !important; font-size: 14px !important; } .cart-item-remove { font-size: 10px !important; padding: 4px 8px !important; margin-left: 0 !important; } /* ── Footer — ALWAYS visible, sticky to bottom ───────────── */ .cart-footer { flex-shrink: 0 !important; position: sticky !important; bottom: 0 !important; z-index: 10 !important; background: var(--dark) !important; border-top: 1px solid var(--dark2) !important; padding: 14px 16px !important; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; box-shadow: 0 -8px 20px rgba(8,8,8,0.8) !important; } /* ── Total display ───────────────────────────────────────── */ .cart-total { margin-bottom: 12px !important; } .cart-total span:last-child { font-size: 22px !important; } /* ── Checkout button — big and obvious ───────────────────── */ .checkout-btn { padding: 16px !important; font-size: 12px !important; letter-spacing: 0.2em !important; } /* ── Bulk discount banner — compact on mobile ────────────── */ .bulk-discount-banner { font-size: 10px !important; padding: 8px 12px !important; } .bulk-discount-label { font-size: 10px !important; } .bulk-discount-saving { font-size: 11px !important; } /* ── Overlay: dark backdrop ──────────────────────────────── */ .cart-overlay { background: rgba(0,0,0,0.7) !important; } /* ── Empty cart state ────────────────────────────────────── */ .cart-empty { padding: 48px 16px !important; } } /* ── Extra small phones (360px) ──────────────────────────────── */ @media (max-width: 380px) { .cart-drawer { height: 95dvh !important; max-height: 95dvh !important; } .cart-item-name { font-size: 12px !important; } .cart-item-controls { gap: 4px !important; } .qty-btn { width: 28px !important; height: 28px !important; } .qty-input { width: 36px !important; } } /* ═══════════════════════════════════════════════════════════════ INTERNATIONAL LOCATION SELECTOR — Checkout Form ═══════════════════════════════════════════════════════════════ */ /* Smooth appearance of state/city/street groups */ #chkStateGroup, #chkCityGroup, #chkStreetGroup, #chkPostalGroup, #deliveryFeeGroup { animation: fadeUp 0.25s ease both; } /* Delivery fee display box */ #deliveryFeeDisplay { line-height: 1.7; } /* Country/state/city selects — allow native picker on mobile */ #chkCountry, #chkState, #chkCity { font-size: 16px !important; /* prevent iOS zoom */ background: var(--black); border: 1px solid var(--dark3); color: var(--white); padding: 14px 36px 14px 14px; width: 100%; outline: none; transition: border-color 0.2s; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } #chkCountry:focus, #chkState:focus, #chkCity:focus { border-color: var(--gray); } #chkCountry option, #chkState option, #chkCity option { background: var(--dark); color: var(--white); } /* Street address autofill highlight */ #chkAddress:autofill, #chkAddress:-webkit-autofill { background-color: #1a1a2a !important; -webkit-text-fill-color: var(--white) !important; box-shadow: 0 0 0 1000px #1a1a2a inset !important; } /* ═══════════════════════════════════════════════════════════════ CHECKOUT MODAL — MOBILE SCROLL FIX Ensures the Pay button is always reachable by making the checkout inner scrollable with the pay button sticky at bottom. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* The modal is already a bottom sheet — make inner scrollable */ .checkout-modal { display: flex !important; flex-direction: column !important; } .checkout-modal.open { display: flex !important; } /* Inner scrolls, pay button stays at bottom */ .checkout-inner { flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; /* Room for sticky pay button */ padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; } /* Pay button — sticky inside inner scroll area */ .pay-btn { position: sticky !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 20 !important; margin-top: 16px !important; padding: 18px !important; font-size: 12px !important; box-shadow: 0 -16px 32px rgba(8,8,8,0.95) !important; } /* WhatsApp button stays below pay */ .whatsapp-order-btn { margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; } /* Summary side on mobile — no extra padding */ .checkout-summary-side { padding-bottom: 16px !important; } /* Checkout title spacing */ .checkout-title { padding-top: 8px !important; } /* Payment pending bar — always visible when minimised */ .pes-payment-pending-bar { flex-shrink: 0 !important; } } /* ═══════════════════════════════════════════════════════════════ LOCATION SELECTOR — ADDITIONAL MOBILE POLISH ═══════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { /* Tighten form groups on mobile for more breathing room */ .form-group { margin-bottom: 14px !important; } .form-group label { font-size: 10px !important; margin-bottom: 6px !important; } /* Delivery fee box */ #deliveryFeeDisplay { font-size: 12px !important; padding: 10px 12px !important; } /* Country/state/city select height */ #chkCountry, #chkState, #chkCity { padding: 12px 36px 12px 12px !important; } } /* ═══════════════════════════════════════════════════════════════ GLOBAL CENTRE ALIGNMENT — All Store Pages nav-inner, footer-inner constrain content to max-width 1400px. ═══════════════════════════════════════════════════════════════ */ /* ── Nav inner wrapper ───────────────────────────────────────── */ .nav-inner { width: 100%; max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 48px; } /* Nav itself no longer needs padding (inner handles it) */ .nav { padding: 0 !important; } /* ── Footer inner wrapper ────────────────────────────────────── */ .footer-inner { max-width: 1400px; margin: 0 auto; padding: 0; } /* Footer outer retains full-width bg, inner constrains content */ .footer { padding-left: 0 !important; padding-right: 0 !important; } .footer-inner .footer-top { padding: 80px 48px 60px; } .footer-inner .footer-bottom { padding: 24px 48px 28px; } .footer-map-section { /* Map stays full-width — no inner constraint needed */ } /* ── Marquee / Trust strip inner ─────────────────────────────── */ .marquee-inner-wrap, .trust-inner-wrap { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } /* ── Promo banner inner ──────────────────────────────────────── */ .promo-banner-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; position: relative; } /* ── Mobile: nav-inner tightens padding ─────────────────────── */ @media (max-width: 900px) { .nav-inner { padding: 0 20px; } .footer-inner .footer-top { padding: 48px 20px 40px; } .footer-inner .footer-bottom { padding: 16px 20px 20px; } } @media (max-width: 480px) { .nav-inner { padding: 0 16px; } .footer-inner .footer-top { padding: 36px 16px 32px; } .footer-inner .footer-bottom { padding: 14px 16px 16px; } } /* ── Footer map section — header text centred, map full-width ── */ .footer-map-header { max-width: 1400px; margin: 0 auto; padding-left: 48px; padding-right: 48px; } @media (max-width: 900px) { .footer-map-header { padding-left: 20px; padding-right: 20px; } } @media (max-width: 480px) { .footer-map-header { padding-left: 16px; padding-right: 16px; } } /* ── footer-bottom inside footer-inner already — remove double padding ── */ .footer-inner .footer-bottom { border-top: 1px solid var(--dark2); } /* ══════════════════════════════════════════════════════════ FORMS INTEGRATION — shared styles used across all 4 forms ══════════════════════════════════════════════════════════ */ /* ── Universal form message ── */ .pes-form-msg { padding: 12px 16px; font-size: 12px; line-height: 1.6; border: 1px solid transparent; margin-bottom: 14px; font-family: var(--font-body); } .pes-form-msg--success { background: rgba(76,175,80,0.08); border-color: #4caf5055; color: #4caf50; } .pes-form-msg--error { background: rgba(239,83,80,0.08); border-color: #ef535055; color: #ef5350; } .pes-form-msg--info { background: rgba(255,183,77,0.08); border-color: #ffb74d55; color: #ffb74d; } /* ── Footer newsletter strip ── */ .footer-newsletter-strip { background: var(--dark); border-top: 1px solid var(--dark2); border-bottom: 1px solid var(--dark2); } .footer-newsletter-inner { max-width: 1400px; margin: 0 auto; padding: 32px 48px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } .fns-heading { font-family: var(--font-display); font-size: 22px; font-weight: 300; color: var(--white); margin-bottom: 4px; } .fns-sub { font-size: 11px; color: var(--gray); letter-spacing: 0.05em; max-width: 260px; line-height: 1.6; } .fns-form { flex: 1; min-width: 280px; } .fns-fields { display: flex; gap: 0; margin-bottom: 10px; } .fns-input { flex: 1; background: var(--black); border: 1px solid var(--dark3); border-right: none; color: var(--white); font-family: var(--font-body); font-size: 12px; padding: 12px 14px; outline: none; min-width: 0; transition: border-color 0.2s; } .fns-input:first-child { max-width: 130px; border-right: none; } .fns-input:focus { border-color: var(--mid); } .fns-btn { background: var(--white); color: var(--black); border: 1px solid var(--white); font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 20px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 0.2s, color 0.2s; } .fns-btn:hover:not(:disabled) { background: var(--off-white); } .fns-btn:disabled { opacity: 0.55; cursor: not-allowed; } .fns-consent { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; } .fns-consent input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--white); } .fns-consent span { font-size: 10px; color: var(--gray); line-height: 1.5; } /* ── Contact popup — extra fields ── */ .contact-form-side .form-group label { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--light-gray); margin-bottom: 6px; display: block; } .contact-form-side .form-group input, .contact-form-side .form-group textarea { width: 100%; background: var(--black); border: 1px solid var(--dark3); color: var(--white); font-family: var(--font-body); font-size: 13px; padding: 10px 12px; outline: none; transition: border-color 0.2s; resize: vertical; } .contact-form-side .form-group input:focus, .contact-form-side .form-group textarea:focus { border-color: var(--mid); } /* ── Mobile responsive ── */ @media (max-width: 700px) { .footer-newsletter-inner { padding: 24px 20px; flex-direction: column; align-items: flex-start; gap: 20px; } .fns-text { display: none; } .fns-form { width: 100%; min-width: unset; } .fns-fields { flex-direction: column; } .fns-input { max-width: 100% !important; border-right: 1px solid var(--dark3) !important; margin-bottom: 2px; } .fns-btn { width: 100%; margin-top: 2px; } } /* ═══════════════════════════════════════════════════════════ MOBILE: 2-COLUMN PRODUCT GRID + COMPACT CARDS Info hidden on card, revealed in popup on click ═══════════════════════════════════════════════════════════ */ @media (max-width: 600px) { /* Force 2-column grid on homepage and all product grids */ .featured-grid, .products-grid, .popup-products-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 0 2px; } /* Compact product card for mobile */ .product-card { padding: 10px !important; border-radius: 10px; position: relative; } /* Hide extra info on mobile — shown in popup */ .product-card .product-desc, .product-card .product-footer, .product-card .product-stock-qty, .product-card .card-actions { display: none !important; } /* Show category + name only */ .product-card .product-category { font-size: 9px; letter-spacing: 0.08em; margin-bottom: 3px; } .product-card .product-name { font-size: 12px !important; line-height: 1.3; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; } /* Show price badge only */ .product-card .product-info::after { content: attr(data-price); display: block; font-size: 11px; font-weight: 700; color: var(--accent, #0288d1); margin-top: 3px; } /* Tap indicator overlay */ .product-card::after { content: '👆 Tap for details'; position: absolute; bottom: 6px; right: 8px; font-size: 8.5px; color: var(--gray, #888); pointer-events: none; opacity: 0.75; white-space: nowrap; } .product-card.ipe-active::after { display: none; } /* Product image fills card nicely */ .product-card .product-img-wrap, .product-card .product-slideshow { height: 120px; border-radius: 7px; overflow: hidden; margin-bottom: 7px; } .product-card .product-img { height: 120px; object-fit: cover; } .product-card .slide img { height: 120px; object-fit: cover; } /* Badge positioning */ .product-card .product-badge { font-size: 8px; padding: 2px 6px; top: 6px; left: 6px; border-radius: 3px; } /* Inline expand panel — full width below row */ .inline-product-expand { grid-column: 1 / -1; } } /* Category strip adult lock */ .cat-age-restricted .cat-item-count { color: #e74c3c; font-weight: 600; } /* ══════════════════════════════════════════════ RENDERING — Safe optimisations only ══════════════════════════════════════════════ */ /* Smooth font rendering */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Slideshow image transitions */ /* ── HOMEPAGE SLIDESHOW — opacity crossfade, never display:none ── */ .featured-grid .product-slideshow { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--dark2); border: 1px solid var(--dark3); margin-bottom: 24px; } .featured-grid .product-slideshow .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; display: block; pointer-events: none; } .featured-grid .product-slideshow .slide.active { opacity: 1; pointer-events: auto; z-index: 1; } .featured-grid .product-slideshow .slide img, .featured-grid .product-slideshow img { width: 100%; height: 100%; object-fit: cover; display: block !important; } /* ── HOMEPAGE SINGLE-IMAGE CARD ───────────────────────────── */ .featured-grid .product-img-wrap { width: 100%; aspect-ratio: 4/3; overflow: hidden; margin-bottom: 24px; background: var(--dark2); border: 1px solid var(--dark3); position: relative; } .featured-grid .product-img { width: 100%; height: 100%; object-fit: cover; display: block !important; visibility: visible !important; opacity: 1 !important; transition: transform 0.5s ease; } /* Scroll containment for scrollable panels only */ .popup-body, .checkout-inner, .pf-body, .pm-dropdown-list { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Category strip adult lock */ .cat-age-restricted .cat-item-count { color: #e74c3c; font-weight: 600; } /* ══════════════════════════════════════════════════════════ CRYPTO PAYMENT OVERLAY — Paramount Pre-order ══════════════════════════════════════════════════════════ */ .cpo-box { background: #12121f; border-radius: 20px; padding: 36px 32px; max-width: 480px; width: 100%; margin: auto; font-family: var(--font-body, 'Montserrat', sans-serif); box-shadow: 0 24px 80px rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.06); } .cpo-header { text-align: center; margin-bottom: 24px; } .cpo-icon { font-size: 48px; margin-bottom: 8px; display: block; } .cpo-title { color: #F7931A; font-size: 22px; font-weight: 700; margin: 0 0 8px; letter-spacing: 0.05em; } .cpo-sub { color: #aaa; font-size: 13px; line-height: 1.6; margin: 0; } .cpo-ref-box { background: #0f2040; border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cpo-ref-label { color: #7a9cc0; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; } .cpo-ref-val { color: #fff; font-size: 14px; font-weight: 700; font-family: monospace; } .cpo-amount-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; } .cpo-amount-card { background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 10px; padding: 14px 16px; } .cpo-amount-label { color: #888; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; } .cpo-amount-val { color: #fff; font-size: 18px; font-weight: 700; } .cpo-wallets { margin-bottom: 16px; } .cpo-wallet { margin-bottom: 14px; } .cpo-wallet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .cpo-coin { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .cpo-net { font-size: 10px; color: #666; letter-spacing: 0.08em; text-transform: uppercase; background: #1a1a1a; padding: 3px 8px; border-radius: 4px; } .cpo-addr-wrap { background: #0a0a18; border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: border-color 0.2s; } .cpo-addr-wrap:hover { border-color: rgba(255,255,255,0.2); } .cpo-addr { font-size: 11px; font-family: monospace; word-break: break-all; color: #ccc; flex: 1; } .cpo-copy-icon { font-size: 18px; color: #555; flex-shrink: 0; transition: color 0.2s; } .cpo-addr-wrap:hover .cpo-copy-icon { color: #fff; } .cpo-qr-hint { font-size: 10px; color: #555; margin-top: 4px; padding-left: 2px; } .cpo-no-wallet { background: #2a1a00; border: 1px solid #6a3a00; border-radius: 10px; padding: 16px; color: #F7931A; font-size: 13px; line-height: 1.5; margin-bottom: 16px; text-align: center; } .cpo-warning { background: #1a1000; border: 1px solid #444400; border-radius: 8px; padding: 14px; font-size: 12px; color: #ccc; line-height: 1.7; margin-bottom: 20px; } .cpo-actions { display: flex; flex-direction: column; gap: 10px; } .cpo-btn { width: 100%; padding: 15px; border-radius: 8px; font-family: var(--font-body, 'Montserrat', sans-serif); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: none; transition: opacity 0.2s, transform 0.1s; } .cpo-btn:active { transform: scale(0.98); } .cpo-btn-primary { background: #F7931A; color: #000; } .cpo-btn-primary:hover { opacity: 0.9; } .cpo-btn-ghost { background: transparent; color: #888; border: 1px solid #333; } .cpo-btn-ghost:hover { border-color: #666; color: #ccc; } .cpo-form-group { margin-bottom: 16px; } .cpo-label { display: block; font-size: 11px; color: #888; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; } .cpo-input { width: 100%; background: #0f0f1a; border: 1px solid #2a2a4a; color: #fff; font-family: var(--font-body, 'Montserrat', sans-serif); font-size: 13px; padding: 12px 14px; border-radius: 8px; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .cpo-input:focus { border-color: #F7931A; } .cpo-input::placeholder { color: #555; } .cpo-field-hint { font-size: 10px; color: #555; margin-top: 4px; padding-left: 2px; } .cpo-verify-msg { padding: 12px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; line-height: 1.5; } .cpo-wa-fallback { margin-top: 20px; padding-top: 16px; border-top: 1px solid #222; text-align: center; font-size: 12px; color: #666; } .cpo-wa-link { display: inline-block; margin-top: 6px; color: #25D366; text-decoration: none; font-weight: 600; } .cpo-wa-link:hover { text-decoration: underline; } /* Success screen */ .cpo-success-screen { text-align: center; padding: 20px 0; } .cpo-success-icon { width: 72px; height: 72px; background: linear-gradient(135deg, #26A17B, #1a7a5a); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #fff; margin: 0 auto 20px; animation: cpoPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; } @keyframes cpoPopIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .cpo-success-title { color: #fff; font-size: 22px; font-weight: 700; margin: 0 0 12px; } .cpo-success-sub { color: #aaa; font-size: 14px; line-height: 1.7; margin: 0 0 20px; } .cpo-success-ref { display: inline-block; background: #0f2040; color: #7ab4e0; font-family: monospace; font-size: 14px; padding: 10px 20px; border-radius: 8px; margin-bottom: 8px; } /* Responsive */ @media (max-width: 500px) { .cpo-box { padding: 24px 18px; border-radius: 16px 16px 0 0; } .cpo-amount-grid { grid-template-columns: 1fr; } .cpo-title { font-size: 18px; } } /* ============================================================ PARAMOUNT E-STORE — POPUPS, SEARCH & SLIDESHOW CSS (v6) ============================================================ */ /* ══════════════════════════════════════════════ POPUP OVERLAY + BASE ══════════════════════════════════════════════ */ .popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 400; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; backdrop-filter: blur(4px); } .popup-overlay.open { opacity: 1; pointer-events: all; } .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.97); background: var(--dark); border: 1px solid var(--dark3); z-index: 401; opacity: 0; pointer-events: none; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; max-height: 90vh; } .popup.open { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); } .full-popup { width: 96vw; max-width: 1280px; height: 88vh; } .popup-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 36px; border-bottom: 1px solid var(--dark2); flex-shrink: 0; position: sticky; top: 0; background: var(--dark); z-index: 2; } .popup-title { font-family: var(--font-display); font-size: 28px; font-weight: 400; letter-spacing: 0.04em; } .popup-close { background: none; border: 1px solid var(--dark3); color: var(--gray); width: 36px; height: 36px; font-size: 16px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .popup-close:hover { border-color: var(--white); color: var(--white); } .popup-body { flex: 1; overflow-y: auto; padding: 32px 36px; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; } /* ══════════════════════════════════════════════ SHOP POPUP CONTROLS ══════════════════════════════════════════════ */ .popup-shop-controls { display: flex; flex-direction: column; gap: 12px; padding: 16px 36px; border-bottom: 1px solid var(--dark2); flex-shrink: 0; background: var(--dark); } .popup-search-mini-wrap { position: relative; display: flex; align-items: center; } .popup-search-mini-wrap svg { position: absolute; left: 14px; color: var(--gray); pointer-events: none; } .popup-search-mini-wrap input { width: 100%; background: var(--dark2); border: 1px solid var(--dark3); color: var(--white); padding: 12px 16px 12px 44px; font-family: var(--font-body); font-size: 13px; outline: none; transition: border-color 0.2s; max-width: 400px; } .popup-search-mini-wrap input:focus { border-color: var(--gray); } .popup-search-mini-wrap input::placeholder { color: var(--gray); } .popup-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; } .filter-btn { background: transparent; border: 1px solid var(--dark3); color: var(--gray); padding: 7px 16px; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); white-space: nowrap; } .filter-btn:hover { border-color: var(--light-gray); color: var(--white); } .filter-btn.active { background: var(--white); color: var(--black); border-color: var(--white); } /* ══════════════════════════════════════════════ PRODUCTS GRIDS (in popups) ══════════════════════════════════════════════ */ .popup-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px; } .popup-empty { grid-column: 1 / -1; text-align: center; padding: 80px; color: var(--gray); font-size: 14px; } .popup-empty-link { background: none; border: none; color: var(--light-gray); text-decoration: underline; cursor: pointer; font-family: var(--font-body); font-size: 14px; } /* Product Card */ .product-card { background: var(--dark2); border: 1px solid var(--dark3); cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; animation: fadeUp 0.4s ease both; } .product-card:hover { background: var(--dark3); border-color: var(--mid); } .product-card:hover .product-img { transform: scale(1.04); } .product-badge { position: absolute; top: 14px; left: 14px; background: var(--white); color: var(--black); font-size: 9px; font-weight: 700; letter-spacing: 0.15em; padding: 4px 10px; text-transform: uppercase; z-index: 1; } .product-img-wrap { width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--dark3); border-bottom: 1px solid var(--dark3); } .product-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } /* Slideshow wrapper for product cards */ .product-slideshow { width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--dark3); border-bottom: 1px solid var(--dark3); position: relative; } .product-slideshow .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; } .product-slideshow .slide.active { opacity: 1; } .product-slideshow .slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-slideshow-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; } .product-slideshow-dots .dot { width: 5px; height: 5px; background: rgba(255,255,255,0.4); border-radius: 50%; cursor: pointer; transition: background 0.2s; } .product-slideshow-dots .dot.active { background: var(--white); } .product-info { padding: 20px; } .product-category { font-size: 9px; color: var(--gray); letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 6px; } .product-name { font-size: 14px; font-weight: 500; letter-spacing: 0.03em; margin-bottom: 8px; line-height: 1.35; } .product-desc { font-size: 11px; color: var(--gray); line-height: 1.7; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-footer { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .product-price { font-family: var(--font-display); font-size: 22px; font-weight: 300; } .product-stock { font-size: 9px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; } .product-stock.in-stock { color: #5a9a5a; } .product-stock.limited { color: #c4a240; } .product-stock.out-of-stock { color: #9a4a4a; } /* Stock quantity count */ .product-stock-qty { display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; padding: 3px 8px; border-radius: 2px; } .product-stock-qty.in-stock { background: rgba(90,154,90,0.12); color: #5a9a5a; border: 1px solid rgba(90,154,90,0.25); } .product-stock-qty.limited { background: rgba(196,162,64,0.12); color: #c4a240; border: 1px solid rgba(196,162,64,0.25); } .product-stock-qty.out-of-stock { background: rgba(154,74,74,0.12); color: #9a4a4a; border: 1px solid rgba(154,74,74,0.25); } .card-actions { display: flex; gap: 8px; padding: 0 20px 20px; } .btn-add-cart { flex: 1; background: var(--white); color: var(--black); border: none; padding: 12px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .btn-add-cart:hover { background: var(--off-white); } .btn-add-cart:disabled { background: var(--mid); color: var(--gray); cursor: not-allowed; } .btn-view-more { background: transparent; color: var(--gray); border: 1px solid var(--dark3); padding: 12px 16px; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn-view-more:hover { border-color: var(--gray); color: var(--white); } /* ══════════════════════════════════════════════ CATEGORIES POPUP GRID ══════════════════════════════════════════════ */ .popup-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px; } .popup-cat-card { background: var(--dark2); border: 1px solid var(--dark3); padding: 28px 24px; cursor: pointer; transition: var(--transition); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; animation: fadeUp 0.35s ease both; position: relative; overflow: hidden; } .popup-cat-card:hover { background: var(--dark3); border-color: var(--mid); } .popup-cat-card:hover .popup-cat-arrow { transform: translateX(6px); opacity: 1; } /* Age-restricted category card */ .popup-cat-age-restricted { border-color: rgba(231,76,60,0.35) !important; } .popup-cat-age-restricted:hover { border-color: rgba(231,76,60,0.75) !important; background: rgba(231,76,60,0.07); } .popup-cat-age-restricted .popup-cat-count { color: #e74c3c; font-weight: 600; } .popup-cat-lock { display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); font-size: 28px; line-height: 1; } .popup-cat-img-wrap { width: 64px; height: 64px; overflow: hidden; background: var(--dark3); border: 1px solid var(--dark2); flex-shrink: 0; } .popup-cat-img { width: 100%; height: 100%; object-fit: cover; display: block; } .popup-cat-name { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); line-height: 1.3; } .popup-cat-desc { font-size: 11px; color: var(--gray); line-height: 1.5; } .popup-cat-count { font-size: 10px; color: var(--gray); letter-spacing: 0.1em; } .popup-cat-arrow { position: absolute; bottom: 20px; right: 20px; font-size: 20px; color: var(--gray); opacity: 0.5; transition: transform 0.3s ease, opacity 0.3s ease; } /* ══════════════════════════════════════════════ SEARCH POPUP (Enhanced) ══════════════════════════════════════════════ */ .search-popup { width: 92vw; max-width: 900px; max-height: 88vh; } .search-bar-wrap { position: relative; display: flex; align-items: center; padding: 20px 36px; border-bottom: 1px solid var(--dark2); flex-shrink: 0; } .search-bar-icon { position: absolute; left: 52px; color: var(--gray); pointer-events: none; } .search-bar-input { width: 100%; background: transparent; border: none; color: var(--white); padding: 8px 40px 8px 44px; font-family: var(--font-body); font-size: 18px; outline: none; letter-spacing: 0.02em; } .search-bar-input::placeholder { color: var(--gray); font-size: 16px; } .search-bar-clear { background: none; border: none; color: var(--gray); font-size: 18px; cursor: pointer; padding: 4px; transition: color 0.2s; position: absolute; right: 36px; display: none; align-items: center; justify-content: center; } .search-bar-clear:hover { color: var(--white); } /* Search Filters Section */ .search-filters { padding: 16px 36px; border-bottom: 1px solid var(--dark2); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex-shrink: 0; background: var(--dark); } .search-filter-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); white-space: nowrap; flex-shrink: 0; } .search-cat-filters { display: flex; gap: 6px; flex-wrap: wrap; } .search-cat-btn { background: transparent; border: 1px solid var(--dark3); color: var(--gray); padding: 5px 14px; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: var(--transition); white-space: nowrap; } .search-cat-btn:hover { border-color: var(--light-gray); color: var(--white); } .search-cat-btn.active { background: var(--white); color: var(--black); border-color: var(--white); } /* Search Advanced Filters */ .search-advanced-row { padding: 12px 36px; border-bottom: 1px solid var(--dark2); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; flex-shrink: 0; background: rgba(24,24,24,0.8); } .search-adv-label { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); white-space: nowrap; } .search-adv-select { background: var(--dark2); border: 1px solid var(--dark3); color: var(--light-gray); padding: 6px 12px; font-family: var(--font-body); font-size: 11px; outline: none; cursor: pointer; min-width: 120px; } .search-adv-select option { background: var(--dark); } .search-price-range { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--gray); } .search-price-input { background: var(--dark2); border: 1px solid var(--dark3); color: var(--white); padding: 6px 10px; font-family: var(--font-body); font-size: 11px; outline: none; width: 110px; } .search-price-input::placeholder { color: var(--gray); } .search-apply-btn { background: var(--white); color: var(--black); border: none; padding: 7px 18px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .search-apply-btn:hover { background: var(--off-white); } .search-clear-all-btn { background: transparent; color: var(--gray); border: 1px solid var(--dark3); padding: 7px 14px; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .search-clear-all-btn:hover { color: var(--white); border-color: var(--gray); } /* Search Results */ .search-results-wrap { flex: 1; overflow-y: auto; padding: 24px 36px; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; } .search-placeholder { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 60px; color: var(--gray); text-align: center; } .search-placeholder svg { opacity: 0.2; } .search-placeholder p { font-size: 14px; letter-spacing: 0.05em; } .search-none { text-align: center; padding: 60px; } .search-none p { font-size: 15px; color: var(--light-gray); margin-bottom: 8px; } .search-none-sub { font-size: 12px; color: var(--gray); } .search-count { font-size: 12px; color: var(--gray); letter-spacing: 0.05em; margin-bottom: 20px; } .search-count strong { color: var(--white); } .search-results-grid { display: flex; flex-direction: column; gap: 2px; } .search-result-card { background: var(--dark2); border: 1px solid var(--dark3); display: flex; gap: 20px; align-items: center; padding: 16px 20px; cursor: pointer; transition: var(--transition); animation: fadeUp 0.3s ease both; } .search-result-card:hover { background: var(--dark3); border-color: var(--mid); } .src-img-wrap { width: 72px; height: 72px; overflow: hidden; background: var(--dark3); border: 1px solid var(--dark2); flex-shrink: 0; } .src-img { width: 100%; height: 100%; object-fit: cover; display: block; } .src-info { flex: 1; min-width: 0; } .src-badge { display: inline-block; background: var(--white); color: var(--black); font-size: 8px; font-weight: 700; letter-spacing: 0.15em; padding: 2px 8px; text-transform: uppercase; margin-bottom: 4px; } .src-cat { font-size: 9px; color: var(--gray); letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 4px; } .src-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .src-price { font-family: var(--font-display); font-size: 20px; font-weight: 300; } .src-stock { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 4px; } .src-stock.in-stock { color: #5a9a5a; } .src-stock.limited { color: #c4a240; } .src-stock.out-of-stock { color: #9a4a4a; } .src-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } /* ══════════════════════════════════════════════ HERO SEARCH SECTION (Let-down/Dropdown style) ══════════════════════════════════════════════ */ .hero-search-section { background: var(--dark); border-top: 1px solid var(--dark2); border-bottom: 1px solid var(--dark2); padding: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; max-height: 0; opacity: 0; } .hero-search-section.open { max-height: 600px; opacity: 1; } .hero-search-inner { padding: 36px 48px; } .hero-search-title { font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gray); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .hero-search-title::before, .hero-search-title::after { content: ''; flex: 1; height: 1px; background: var(--dark2); } .hero-search-main { display: flex; gap: 12px; margin-bottom: 20px; } .hero-search-input-wrap { position: relative; flex: 1; } .hero-search-input-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--gray); pointer-events: none; } .hero-search-input { width: 100%; background: var(--black); border: 1px solid var(--dark3); border-bottom: 2px solid var(--white); color: var(--white); padding: 16px 16px 16px 48px; font-family: var(--font-body); font-size: 16px; outline: none; transition: border-color 0.2s; } .hero-search-input::placeholder { color: var(--gray); } .hero-search-input:focus { border-bottom-color: var(--off-white); } .hero-search-go-btn { background: var(--white); color: var(--black); border: none; padding: 16px 32px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: var(--transition); white-space: nowrap; } .hero-search-go-btn:hover { background: var(--off-white); } /* Filter chips */ .hero-search-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .hero-filter-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .hero-filter-label { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); white-space: nowrap; } .hero-filter-chip { background: transparent; border: 1px solid var(--dark3); color: var(--gray); padding: 5px 14px; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .hero-filter-chip:hover { border-color: var(--gray); color: var(--light-gray); } .hero-filter-chip.active { background: var(--white); color: var(--black); border-color: var(--white); } .hero-search-quick-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px; max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; } .hero-search-quick-item { background: var(--dark2); border: 1px solid var(--dark3); display: flex; gap: 12px; align-items: center; padding: 12px; cursor: pointer; transition: var(--transition); animation: fadeUp 0.2s ease both; } .hero-search-quick-item:hover { background: var(--dark3); } .hsq-img-wrap { width: 44px; height: 44px; overflow: hidden; background: var(--dark3); flex-shrink: 0; } .hsq-img { width: 100%; height: 100%; object-fit: cover; display: block; } .hsq-info { flex: 1; min-width: 0; } .hsq-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .hsq-price { font-family: var(--font-display); font-size: 16px; font-weight: 300; } .hero-search-no-results { grid-column: 1/-1; text-align: center; padding: 32px; color: var(--gray); font-size: 13px; } /* Search trigger bar */ .search-trigger-bar { background: var(--dark2); border: none; border-bottom: 2px solid var(--dark2); width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 48px; cursor: text; transition: border-color 0.3s ease; text-align: left; } .search-trigger-bar:hover, .search-trigger-bar:focus { border-bottom-color: var(--gray); outline: none; } .search-trigger-bar svg { color: var(--gray); flex-shrink: 0; } .search-trigger-text { flex: 1; font-family: var(--font-body); font-size: 14px; color: var(--gray); letter-spacing: 0.04em; } .search-trigger-tags { display: flex; gap: 6px; flex-shrink: 0; } .search-trigger-tag { font-size: 9px; color: var(--gray); border: 1px solid var(--dark3); padding: 3px 10px; letter-spacing: 0.1em; text-transform: uppercase; } /* ══════════════════════════════════════════════ CONTACT POPUP ══════════════════════════════════════════════ */ .contact-popup { width: 92vw; max-width: 860px; } .contact-popup-body { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; padding: 40px 36px; } .contact-info-side { display: flex; flex-direction: column; gap: 20px; } .contact-block { display: flex; gap: 16px; align-items: flex-start; padding: 16px; background: var(--dark2); border: 1px solid var(--dark3); transition: var(--transition); } .contact-block:hover { background: var(--dark3); } .contact-block-icon { font-size: 20px; flex-shrink: 0; } .contact-block-label { font-size: 9px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gray); margin-bottom: 4px; } .contact-block-value { font-size: 13px; color: var(--white); } .contact-block-value a { color: var(--white); text-decoration: none; } .contact-block-value a:hover { color: var(--off-white); } .contact-social-row { display: flex; gap: 8px; flex-wrap: wrap; } .contact-form-side { } .contact-form-side h4 { font-family: var(--font-display); font-size: 24px; font-weight: 400; margin-bottom: 24px; } /* ══════════════════════════════════════════════ MOBILE NAV DRAWER ══════════════════════════════════════════════ */ .mob-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 290; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .mob-overlay.open { opacity: 1; pointer-events: all; } .mob-drawer { position: fixed; top: 0; left: 0; width: 88vw; max-width: 340px; height: 100vh; background: var(--dark); border-right: 1px solid var(--dark2); z-index: 300; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; } .mob-drawer.open { transform: translateX(0); } .mob-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 20px; border-bottom: 1px solid var(--dark2); flex-shrink: 0; } .mob-close { background: none; border: none; color: var(--gray); font-size: 18px; cursor: pointer; padding: 4px; transition: color 0.2s; } .mob-close:hover { color: var(--white); } .mob-search-wrap { padding: 16px 24px; border-bottom: 1px solid var(--dark2); } .mob-search-input { width: 100%; background: var(--dark2); border: 1px solid var(--dark3); color: var(--white); padding: 12px 16px; font-family: var(--font-body); font-size: 13px; outline: none; } .mob-search-input::placeholder { color: var(--gray); } .mob-search-results { margin-top: 8px; } .mob-search-item { display: flex; gap: 12px; align-items: center; padding: 10px; background: var(--dark2); border: 1px solid var(--dark3); cursor: pointer; transition: var(--transition); margin-bottom: 2px; } .mob-search-item:hover { background: var(--dark3); } .mob-search-img { width: 40px; height: 40px; overflow: hidden; background: var(--dark3); flex-shrink: 0; } .mob-sr-img { width: 100%; height: 100%; object-fit: cover; display: block; } .mob-search-name { font-size: 12px; font-weight: 500; margin-bottom: 2px; } .mob-search-price { font-family: var(--font-display); font-size: 14px; font-weight: 300; } .mob-search-none { padding: 12px; font-size: 12px; color: var(--gray); text-align: center; } .mob-nav-links { display: flex; flex-direction: column; padding: 16px 0; flex: 1; } .mob-nav-links button { background: none; border: none; border-bottom: 1px solid var(--dark2); color: var(--light-gray); font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; padding: 18px 24px; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 14px; transition: var(--transition); } .mob-nav-links button:hover { background: var(--dark2); color: var(--white); } .mob-nav-link-a { background: none; border: none; border-bottom: 1px solid var(--dark2); color: var(--light-gray); font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; padding: 18px 24px; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 14px; transition: var(--transition); text-decoration: none; } .mob-nav-link-a:hover { background: var(--dark2); color: var(--white); } .mob-nav-icon { font-size: 16px; opacity: 0.6; } .mob-cart-badge { background: var(--white); color: var(--black); font-size: 9px; font-weight: 700; padding: 2px 7px; margin-left: auto; } .mob-drawer-foot { padding: 20px 24px; border-top: 1px solid var(--dark2); font-size: 11px; color: var(--gray); letter-spacing: 0.1em; } /* ══════════════════════════════════════════════ NAV SEARCH BUTTON ══════════════════════════════════════════════ */ .nav-search-btn { background: none; border: 1px solid var(--dark3); color: var(--gray); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); } .nav-search-btn:hover { border-color: var(--gray); color: var(--white); } /* ══════════════════════════════════════════════ MODAL GALLERY (for product detail) ══════════════════════════════════════════════ */ .modal-gallery { width: 100%; } .modal-gallery-main { width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--dark3); margin-bottom: 8px; } .modal-gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; } .modal-gallery-thumbs { display: flex; gap: 6px; flex-wrap: wrap; } .gallery-thumb { width: 60px; height: 60px; overflow: hidden; background: var(--dark3); border: 1px solid var(--dark3); cursor: pointer; transition: border-color 0.2s; flex-shrink: 0; } .gallery-thumb.active { border-color: var(--white); } .gallery-thumb:hover { border-color: var(--gray); } .thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Slideshow in modal */ .modal-slideshow { width: 100%; position: relative; background: var(--dark3); overflow: hidden; aspect-ratio: 1; } .modal-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; } .modal-slide.active { opacity: 1; } .modal-slide img, .modal-slide video { width: 100%; height: 100%; object-fit: contain; display: block; } .modal-slideshow-nav { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; } .modal-slideshow-nav .sdot { width: 6px; height: 6px; background: rgba(255,255,255,0.35); border-radius: 50%; cursor: pointer; transition: background 0.2s; } .modal-slideshow-nav .sdot.active { background: var(--white); } .modal-slideshow-prev, .modal-slideshow-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2); color: var(--white); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; font-size: 16px; transition: background 0.2s; } .modal-slideshow-prev { left: 10px; } .modal-slideshow-next { right: 10px; } .modal-slideshow-prev:hover, .modal-slideshow-next:hover { background: rgba(0,0,0,0.8); } .modal-product-img-wrap { width: 100%; } .modal-product-img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; background: var(--dark3); } .modal-media-wrap { width: 100%; } .modal-video { width: 100%; display: block; background: var(--black); } .modal-badge { display: inline-block; background: var(--white); color: var(--black); font-size: 9px; font-weight: 700; letter-spacing: 0.2em; padding: 4px 12px; text-transform: uppercase; margin-bottom: 14px; } .modal-share-btn { background: transparent; color: var(--gray); border: 1px solid var(--dark3); padding: 18px 24px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .modal-share-btn:hover { border-color: var(--gray); color: var(--white); } /* ══════════════════════════════════════════════ CART IMAGE CLASSES ══════════════════════════════════════════════ */ .cart-item-img-wrap { width: 64px; height: 64px; overflow: hidden; background: var(--dark3); border: 1px solid var(--dark2); flex-shrink: 0; } .cart-img { width: 100%; height: 100%; object-fit: cover; display: block; } .checkout-summary-img-wrap { width: 52px; height: 52px; overflow: hidden; background: var(--dark3); border: 1px solid var(--dark2); flex-shrink: 0; } .checkout-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ══════════════════════════════════════════════ FEATURED SECTION (inline homepage) ══════════════════════════════════════════════ */ .section { padding: 80px 48px; } .section-header { display: flex; align-items: center; gap: 20px; margin-bottom: 48px; } .section-line { flex: 1; height: 1px; background: var(--dark2); } .section-title { font-family: var(--font-display); font-size: 36px; font-weight: 300; white-space: nowrap; letter-spacing: 0.06em; } .featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px; } .section-cta-row { text-align: center; margin-top: 40px; } .see-all-btn { background: transparent; color: var(--gray); border: 1px solid var(--dark3); padding: 16px 48px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .see-all-btn:hover { border-color: var(--white); color: var(--white); } /* ══════════════════════════════════════════════ CATEGORIES SECTION (inline homepage) ══════════════════════════════════════════════ */ .categories-section { padding: 80px 48px; } .container { max-width: 1400px; margin: 0 auto; } .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px; } .cat-item { background: var(--dark2); border: 1px solid var(--dark3); padding: 24px 20px; cursor: pointer; transition: var(--transition); text-align: center; animation: fadeUp 0.4s ease both; } .cat-item:hover { background: var(--dark3); border-color: var(--mid); } .cat-item-img-wrap { width: 60px; height: 60px; overflow: hidden; background: var(--dark3); border: 1px solid var(--dark2); margin: 0 auto 14px; } .cat-img { width: 100%; height: 100%; object-fit: cover; display: block; } .cat-item-name { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; } .cat-item-count { font-size: 11px; color: var(--gray); } /* ══════════════════════════════════════════════ ADMIN PRODUCT FORM MEDIA (MS-Word style) ══════════════════════════════════════════════ */ .product-form-modal { max-width: 1000px !important; width: 97vw !important; max-height: 94vh !important; } .pf-body { display: grid; grid-template-columns: 380px 1fr; gap: 0; padding: 0 !important; } .pf-media-col { padding: 32px; border-right: 1px solid var(--dark2); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; background: var(--black); } .pf-info-col { padding: 32px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; } .pf-media-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .pf-section-title { font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--white); } .pf-section-hint { font-size: 10px; color: var(--gray); letter-spacing: 0.08em; } .pf-divider-label { text-align: center; font-size: 10px; color: var(--gray); letter-spacing: 0.1em; margin: 14px 0 10px; position: relative; } .pf-url-row { display: flex; gap: 8px; } .pf-url-input { flex: 1; background: var(--dark2); border: 1px solid var(--dark3); color: var(--white); padding: 10px 14px; font-family: var(--font-body); font-size: 12px; outline: none; } .pf-url-input::placeholder { color: var(--gray); } .pf-url-add-btn { background: var(--dark3); color: var(--light-gray); border: 1px solid var(--mid); padding: 10px 16px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .pf-url-add-btn:hover { background: var(--mid); color: var(--white); } /* Dropzones */ .media-dropzone { border: 2px dashed var(--dark3); background: var(--dark2); transition: border-color 0.2s, background 0.2s; cursor: pointer; } .media-dropzone:hover, .media-dropzone.drag-over { border-color: var(--gray); background: var(--dark3); } .dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; text-align: center; } .dropzone-icon { color: var(--gray); opacity: 0.6; } .dropzone-text { font-size: 13px; color: var(--light-gray); letter-spacing: 0.04em; } .dropzone-sub { font-size: 11px; color: var(--gray); } .dropzone-btn { background: var(--dark3); color: var(--light-gray); border: 1px solid var(--mid); padding: 10px 24px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .dropzone-btn:hover { background: var(--mid); color: var(--white); } .dropzone-formats { font-size: 10px; color: var(--gray); letter-spacing: 0.08em; } .dropzone-preview-img { width: 100%; max-height: 160px; object-fit: contain; display: block; background: var(--black); } /* Media gallery grid */ .media-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; margin-bottom: 8px; } .media-thumb-wrap { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--dark3); border: 1px solid var(--dark2); } .media-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } .media-primary-badge { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.75); color: var(--white); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-align: center; padding: 3px; text-transform: uppercase; } .media-thumb-remove { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.7); border: none; color: var(--white); width: 20px; height: 20px; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .media-thumb-remove:hover { background: rgba(180,0,0,0.8); } .media-gallery-hint { font-size: 10px; color: var(--gray); letter-spacing: 0.05em; } /* Video preview */ .admin-video-preview { width: 100%; display: block; max-height: 180px; background: var(--black); } .remove-media-btn { background: transparent; color: #9a4a4a; border: 1px solid #3a1a1a; padding: 8px 16px; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: var(--transition); margin-top: 8px; width: 100%; } .remove-media-btn:hover { background: #3a1a1a; } /* MS-Word-style media upload toolbar */ .pf-media-toolbar { display: flex; gap: 4px; background: var(--dark3); border: 1px solid var(--mid); border-bottom: none; padding: 6px 8px; flex-wrap: wrap; } .pf-media-tool-btn { background: none; border: none; color: var(--gray); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; padding: 6px 12px; cursor: pointer; transition: var(--transition); text-transform: uppercase; white-space: nowrap; } .pf-media-tool-btn:hover { background: var(--mid); color: var(--white); } .pf-media-tool-sep { width: 1px; background: var(--mid); margin: 4px 2px; } /* Rich text editor */ .rte-toolbar { display: flex; gap: 2px; background: var(--dark3); border: 1px solid var(--mid); border-bottom: none; padding: 6px 8px; flex-wrap: wrap; } .rte-btn { background: none; border: 1px solid transparent; color: var(--gray); padding: 5px 10px; font-family: var(--font-body); font-size: 12px; cursor: pointer; transition: var(--transition); min-width: 32px; text-align: center; } .rte-btn:hover { background: var(--mid); color: var(--white); border-color: var(--mid); } .rte-sep { width: 1px; background: var(--mid); margin: 4px 2px; } .rte-editor { width: 100%; min-height: 120px; background: var(--black); border: 1px solid var(--dark3); color: var(--white); padding: 14px 18px; font-family: var(--font-body); font-size: 13px; line-height: 1.8; outline: none; } .rte-editor:focus { border-color: var(--gray); } .rte-editor:empty::before { content: attr(data-placeholder); color: var(--gray); } /* Slideshow admin tool */ .slideshow-order-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; } .slideshow-order-item { display: flex; align-items: center; gap: 10px; background: var(--dark2); border: 1px solid var(--dark3); padding: 8px 10px; cursor: grab; transition: var(--transition); } .slideshow-order-item:hover { background: var(--dark3); } .slideshow-order-item.dragging { opacity: 0.5; } .soi-handle { color: var(--gray); font-size: 14px; cursor: grab; user-select: none; } .soi-img { width: 40px; height: 40px; object-fit: cover; display: block; background: var(--dark3); } .soi-label { flex: 1; font-size: 11px; color: var(--light-gray); letter-spacing: 0.05em; } .soi-num { font-size: 10px; color: var(--gray); min-width: 20px; text-align: right; } /* Category form modal */ .cat-form-modal { max-width: 580px; } /* ══════════════════════════════════════════════ INLINE SEARCH SECTION (below hero / dropdown) ══════════════════════════════════════════════ */ .search-section { background: var(--dark); border-bottom: 1px solid var(--dark2); padding: 0 48px; overflow: hidden; } .search-section-inner { padding: 32px 0; } .search-section-grid { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; margin-bottom: 16px; } /* ══════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════ */ @media (max-width: 900px) { .full-popup { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; top: 0; left: 0; transform: none; } .full-popup.open { transform: none; } .popup-body { padding: 20px; } .popup-head { padding: 16px 20px; } .popup-shop-controls { padding: 12px 20px; } .popup-products-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .popup-cats-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .contact-popup-body { grid-template-columns: 1fr; gap: 24px; } .search-popup { width: 100vw; height: 100vh; max-height: 100vh; } .search-filters, .search-advanced-row { padding: 12px 20px; } .search-results-wrap { padding: 16px 20px; } .hero-search-inner { padding: 24px; } .hero-search-main { flex-direction: column; } .pf-body { grid-template-columns: 1fr; } .pf-media-col { border-right: none; border-bottom: 1px solid var(--dark2); } .search-section { padding: 0 24px; } .search-bar-wrap { padding: 16px 20px; } } @media (max-width: 600px) { .popup-products-grid { grid-template-columns: repeat(2, 1fr); } .popup-cats-grid { grid-template-columns: 1fr 1fr; } .hero-search-filters { gap: 4px; } .hero-filter-chip { padding: 4px 10px; font-size: 9px; } .search-section-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════ WHOLESALE POPUP STYLES (shared) ══════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ POPUP MOBILE IMPROVEMENTS ═══════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Full popups go edge-to-edge */ .full-popup { width: 100vw; height: 100dvh; max-height: 100dvh; top: 0; left: 0; transform: translateY(100%); border-radius: 0; } .full-popup.open { transform: translateY(0); } .search-popup { width: 100vw; height: 100dvh; max-height: 100dvh; top: 0; left: 0; transform: translateY(100%); border-radius: 0; } .search-popup.open { transform: translateY(0); } .contact-popup { width: 100vw; max-height: 100dvh; top: 0; left: 0; transform: translateY(100%); border-radius: 0; overflow-y: auto; } .contact-popup.open { transform: translateY(0); } /* Popup head */ .popup-head { padding: 16px 20px; } .popup-title { font-size: 20px; } .popup-body { padding: 16px 20px; } .popup-shop-controls { padding: 12px 20px; gap: 10px; } /* Filter bar wraps on small screens */ .popup-filter-bar { flex-wrap: wrap; gap: 4px; padding: 0 0 8px; } .filter-btn { font-size: 9px; padding: 6px 10px; } /* Product grid */ .popup-products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px; } /* Category grid */ .popup-cats-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; } .popup-cat-card { padding: 16px; } .popup-cat-img-wrap { height: 80px; } /* Search popup */ .search-bar-wrap { padding: 14px 20px; } .search-bar-input { font-size: 16px; } /* prevents iOS zoom */ .search-filters { padding: 10px 20px; } .search-cat-filters { gap: 4px; flex-wrap: wrap; } .search-cat-btn { font-size: 9px; padding: 5px 10px; } .search-results-grid { grid-template-columns: 1fr; } .search-result-card { grid-template-columns: 60px 1fr; gap: 12px; padding: 14px 0; } .src-img-wrap { width: 60px; height: 60px; } .src-actions { grid-column: 1 / -1; } /* Contact popup */ .contact-popup-body { grid-template-columns: 1fr; gap: 0; } .contact-form-side { padding-top: 20px; } /* Policy popups */ .policy-popup { width: 100vw; max-height: 100dvh; top: 0; left: 0; transform: translateY(100%) scale(1); border-radius: 0; } .policy-popup.open { transform: translateY(0) scale(1); } .policy-popup-body { padding: 20px; } .policy-popup-head { padding: 16px 20px; } .policy-popup-foot { padding: 16px 20px; } } @media (max-width: 480px) { .popup-products-grid { grid-template-columns: 1fr 1fr; } .popup-cats-grid { grid-template-columns: 1fr 1fr; } .popup-cat-name { font-size: 11px; } .filter-btn { font-size: 9px; padding: 5px 8px; letter-spacing: 0.08em; } /* Search */ .search-bar-input { font-size: 16px; padding: 8px 8px 8px 40px; } .search-result-card { gap: 10px; } /* Hero search */ .hero-search-section { padding: 0; } .hero-search-inner { padding: 16px; } .search-adv-select, .search-price-input { font-size: 12px; } } /* ═══════════════════════════════════════════════════════ NAV SEARCH DROPDOWN ═══════════════════════════════════════════════════════ */ .nav-search-overlay { position: fixed; inset: 0; z-index: 498; background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; backdrop-filter: blur(3px); } .nav-search-overlay.open { opacity: 1; pointer-events: all; } .nav-search-dropdown { position: fixed; top: var(--nav-h, 72px); left: 0; right: 0; z-index: 499; background: var(--dark); border-bottom: 1px solid var(--dark2); box-shadow: 0 24px 64px rgba(0,0,0,0.7); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease; max-height: calc(100vh - var(--nav-h, 72px)); overflow-y: auto; } .nav-search-dropdown.open { transform: translateY(0); opacity: 1; pointer-events: all; } .nav-search-drop-inner { max-width: 860px; margin: 0 auto; padding: 24px 32px 28px; } /* Search bar row */ .nav-search-drop-bar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--dark3); border-bottom: 2px solid var(--white); background: var(--black); padding: 0 16px; margin-bottom: 16px; } .nav-search-drop-bar svg { color: var(--gray); flex-shrink: 0; } .nav-search-drop-input { flex: 1; background: transparent; border: none; color: var(--white); font-family: var(--font-body); font-size: 16px; padding: 16px 0; outline: none; letter-spacing: 0.02em; } .nav-search-drop-input::placeholder { color: var(--gray); } .nav-search-drop-clear { background: none; border: none; color: var(--gray); font-size: 14px; cursor: pointer; padding: 4px; line-height: 1; transition: color 0.2s; flex-shrink: 0; } .nav-search-drop-clear:hover { color: var(--white); } .nav-search-drop-go { background: var(--white); color: var(--black); border: none; padding: 10px 20px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: var(--transition); white-space: nowrap; flex-shrink: 0; } .nav-search-drop-go:hover { background: var(--off-white); } /* Category filter chips */ .nav-search-drop-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } /* Results grid */ .nav-search-drop-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px; max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; } .nav-search-drop-hint { grid-column: 1 / -1; text-align: center; padding: 32px 20px; color: var(--gray); font-size: 13px; letter-spacing: 0.05em; } .nav-drop-item { background: var(--dark2); border: 1px solid var(--dark3); display: flex; gap: 12px; align-items: center; padding: 12px; cursor: pointer; transition: background 0.15s; animation: fadeUp 0.2s ease both; } .nav-drop-item:hover { background: var(--dark3); } .nav-drop-img-wrap { width: 48px; height: 48px; overflow: hidden; background: var(--dark3); flex-shrink: 0; } .nav-drop-img { width: 100%; height: 100%; object-fit: cover; display: block; } .nav-drop-info { flex: 1; min-width: 0; } .nav-drop-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .nav-drop-cat { font-size: 9px; color: var(--gray); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 3px; } .nav-drop-price { font-family: var(--font-display); font-size: 15px; font-weight: 300; } .nav-drop-no-results { grid-column: 1 / -1; text-align: center; padding: 28px 20px; color: var(--gray); font-size: 13px; } /* Active state on nav search icon */ .nav-search-btn.active { color: var(--white); opacity: 1; } .nav-search-btn.active svg { stroke: var(--white); } @media (max-width: 900px) { .nav-search-drop-inner { padding: 18px 20px 22px; } .nav-search-drop-results { grid-template-columns: 1fr 1fr; max-height: 260px; } .nav-search-drop-bar { padding: 0 12px; } .nav-search-drop-go { padding: 8px 14px; font-size: 9px; } } @media (max-width: 480px) { .nav-search-drop-inner { padding: 14px 16px 18px; } .nav-search-drop-input { font-size: 16px; padding: 14px 0; } .nav-search-drop-results { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════ PRODUCT SHARE PANEL ═══════════════════════════════════════════════════════ */ .modal-serial { font-size: 9px; color: var(--gray); letter-spacing: 0.2em; font-weight: 600; } .product-share-panel { margin-top: 16px; background: var(--dark2); border: 1px solid var(--dark3); padding: 16px; animation: fadeUp 0.2s ease both; } .psp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .psp-title { font-size: 9px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gray); } .psp-close { background: none; border: none; color: var(--gray); font-size: 14px; cursor: pointer; line-height: 1; padding: 2px 4px; transition: color 0.2s; } .psp-close:hover { color: var(--white); } .psp-serial-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .psp-serial-label { font-size: 9px; color: var(--gray); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; } .psp-serial { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--white); font-family: monospace; background: var(--dark3); padding: 3px 10px; } .psp-link-row { display: flex; gap: 6px; margin-bottom: 12px; } .psp-link-input { flex: 1; background: var(--black); border: 1px solid var(--dark3); color: var(--light-gray); font-family: monospace; font-size: 10px; padding: 8px 10px; outline: none; cursor: text; min-width: 0; } .psp-copy-btn { background: var(--white); color: var(--black); border: none; padding: 8px 16px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); white-space: nowrap; flex-shrink: 0; } .psp-copy-btn:hover { background: var(--off-white); } .psp-channels { display: flex; gap: 6px; flex-wrap: wrap; } .psp-channel { display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--dark3); text-decoration: none; transition: var(--transition); background: none; color: var(--light-gray); } .psp-channel:hover { color: var(--white); border-color: var(--mid); } .psp-wa { color: #4caf50; border-color: rgba(76,175,80,0.3); } .psp-wa:hover { background: rgba(76,175,80,0.1); border-color: #4caf50; color: #4caf50; } .psp-x { color: var(--light-gray); } .psp-x:hover { background: var(--dark3); color: var(--white); } .psp-copy2 { color: var(--gray); } .psp-copy2:hover { color: var(--white); border-color: var(--mid); } @media (max-width: 480px) { .psp-channels { flex-direction: column; } .psp-channel { justify-content: center; } } /* ═══════════════════════════════════════════════════════ INLINE PRODUCT EXPAND (homepage featured grid) ═══════════════════════════════════════════════════════ */ .inline-product-expand { grid-column: 1 / -1; background: var(--dark); border: 1px solid var(--mid); overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease; position: relative; margin: 4px 0; } .inline-product-expand.ipe-open { max-height: 700px; opacity: 1; } .product-card.ipe-active { border-color: var(--mid) !important; outline: 2px solid var(--white); outline-offset: -1px; } .ipe-close { position: absolute; top: 16px; right: 20px; background: none; border: 1px solid var(--dark3); color: var(--gray); width: 32px; height: 32px; font-size: 14px; cursor: pointer; z-index: 2; transition: color 0.2s, border-color 0.2s; display: flex; align-items: center; justify-content: center; } .ipe-close:hover { color: var(--white); border-color: var(--mid); } .ipe-inner { display: flex; gap: 48px; padding: 40px 48px; } .ipe-media { flex-shrink: 0; width: 280px; } .ipe-single-img-wrap { width: 100%; aspect-ratio: 1; overflow: hidden; } .ipe-img { width: 100%; height: 100%; object-fit: cover; display: block; } .ipe-gallery-main { width: 100%; aspect-ratio: 1; overflow: hidden; margin-bottom: 8px; } .ipe-gallery-thumbs { display: flex; gap: 6px; flex-wrap: wrap; } .ipe-thumb { width: 56px; height: 56px; overflow: hidden; border: 1px solid var(--dark3); cursor: pointer; opacity: 0.6; transition: opacity 0.2s, border-color 0.2s; } .ipe-thumb.active, .ipe-thumb:hover { opacity: 1; border-color: var(--white); } .ipe-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ipe-info { flex: 1; } .ipe-meta { font-size: 10px; color: var(--gray); letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 10px; } .ipe-name { font-family: var(--font-display); font-size: clamp(24px,3vw,36px); font-weight: 300; line-height: 1.2; margin-bottom: 14px; } .ipe-price { font-family: var(--font-display); font-size: clamp(22px,2.5vw,32px); font-weight: 300; margin-bottom: 16px; } .ipe-desc { font-size: 13px; color: var(--light-gray); line-height: 1.9; margin-bottom: 32px; } .ipe-actions { display: flex; gap: 12px; flex-wrap: wrap; } .ipe-actions .modal-add-btn { flex: 1; min-width: 140px; } @media (max-width: 900px) { .ipe-inner { flex-direction: column; gap: 24px; padding: 24px 20px; } .ipe-media { width: 100%; } .inline-product-expand.ipe-open { max-height: 1100px; } } @media (max-width: 480px) { .ipe-inner { padding: 18px 16px; } .ipe-name { font-size: 22px; } .ipe-price { font-size: 20px; } .ipe-actions { flex-direction: column; } } /* ═══════════════════════════════════════════════════════ PES DIALOG SYSTEM — replaces all browser confirm/alert ═══════════════════════════════════════════════════════ */ /* ══ PES Dialog System — premium minimal ══ */ .pes-dialog-overlay { position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .pes-dialog-overlay.open { opacity: 1; pointer-events: all; } .pes-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-44%) scale(0.95); z-index: 9991; width: min(460px, 94vw); background: #0a0a0a; border: 1px solid rgba(255,255,255,0.07); border-top: 1px solid rgba(255,255,255,0.13); box-shadow: 0 50px 120px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.02); opacity: 0; pointer-events: none; transition: all 0.28s cubic-bezier(0.22,1,0.36,1); overflow: hidden; } .pes-dialog::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%); } .pes-dialog.open { transform: translate(-50%,-50%) scale(1); opacity: 1; pointer-events: all; } /* Icon strip */ .pes-dialog-icon-strip { padding: 32px 0 4px; display: flex; justify-content: center; } .pes-dialog-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; position: relative; } .pes-dialog-icon.confirm { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 0 0 8px rgba(255,255,255,0.02); } .pes-dialog-icon.danger { background: rgba(239,83,80,0.08); border: 1px solid rgba(239,83,80,0.2); box-shadow: 0 0 0 8px rgba(239,83,80,0.04); } .pes-dialog-icon.success { background: rgba(76,175,80,0.08); border: 1px solid rgba(76,175,80,0.2); box-shadow: 0 0 0 8px rgba(76,175,80,0.04); } .pes-dialog-icon.info { background: rgba(100,130,200,0.08); border: 1px solid rgba(100,130,200,0.2); box-shadow: 0 0 0 8px rgba(100,130,200,0.04); } .pes-dialog-body { padding: 22px 36px 30px; text-align: center; } .pes-dialog-title { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 400; color: #f8f8f8; margin-bottom: 10px; line-height: 1.35; letter-spacing: 0.01em; } .pes-dialog-msg { font-family: 'Montserrat', sans-serif; font-size: 12px; color: rgba(255,255,255,0.42); line-height: 1.75; margin-bottom: 0; letter-spacing: 0.02em; } .pes-dialog-detail { font-family: 'Montserrat', sans-serif; font-size: 10px; color: rgba(255,255,255,0.28); margin-top: 8px; font-style: italic; letter-spacing: 0.03em; } .pes-dialog-foot { padding: 0 36px 32px; display: flex; gap: 10px; justify-content: center; } .pes-dialog-btn { flex: 1; max-width: 170px; border: none; padding: 14px 20px; font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: all 0.18s; position: relative; overflow: hidden; } .pes-dialog-btn-confirm, .pes-dialog-btn-ok { background: #f0f0f0; color: #080808; } .pes-dialog-btn-confirm:hover, .pes-dialog-btn-ok:hover { background: #ffffff; transform: translateY(-1px); } .pes-dialog-btn-danger { background: #ef5350; color: #fff; } .pes-dialog-btn-danger:hover { background: #e53935; transform: translateY(-1px); } .pes-dialog-btn-cancel { background: none; border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.38); } .pes-dialog-btn-cancel:hover { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.75); } /* Success auto-dismiss progress bar */ .pes-dialog-progress { height: 1px; background: rgba(255,255,255,0.05); overflow: hidden; } .pes-dialog-progress-fill { height: 100%; background: linear-gradient(90deg, rgba(76,175,80,0.6), rgba(76,175,80,1)); width: 100%; transform-origin: left; animation: pesProgressShrink 2.5s linear forwards; } @keyframes pesProgressShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ── Popup share button ────────────────────────────── */ .popup-share-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--dark3); color: var(--gray); font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 14px; cursor: pointer; transition: var(--transition); white-space: nowrap; } .popup-share-btn:hover { border-color: var(--mid); color: var(--white); } /* ══════════════════════════════════════════════ CATEGORIES POPUP v2 — Two-pane with Sub-categories ══════════════════════════════════════════════ */ /* Override full-popup for cats */ .cats-popup-v2 { display: flex; flex-direction: column; overflow: hidden; } .cats-popup-v2 .popup-head { flex-shrink: 0; } /* Two-pane body */ .cats-popup-body { flex: 1; display: flex; overflow: hidden; min-height: 0; } /* ── LEFT PANE — category list ── */ .cats-left-pane { width: 320px; flex-shrink: 0; border-right: 1px solid var(--dark2); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; transition: transform 0.38s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease; } .cats-list { display: flex; flex-direction: column; padding: 8px 0; } .cats-list-item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; cursor: pointer; transition: background 0.18s ease, border-left-color 0.18s ease; border-left: 3px solid transparent; position: relative; } .cats-list-item:hover { background: var(--dark2); border-left-color: var(--mid); } .cats-list-item-active { background: var(--dark2) !important; border-left-color: var(--white) !important; } .cats-list-item-restricted { border-left-color: rgba(231,76,60,0.0); } .cats-list-item-restricted:hover { background: rgba(231,76,60,0.05); border-left-color: rgba(231,76,60,0.5); } .cats-list-item-restricted.cats-list-item-active { border-left-color: rgba(231,76,60,0.8) !important; } .cats-list-img { width: 48px; height: 48px; flex-shrink: 0; overflow: hidden; background: var(--dark3); border: 1px solid rgba(255,255,255,0.06); } .cats-list-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .cats-list-lock { display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(0,0,0,0.35); } .cats-list-info { flex: 1; min-width: 0; } .cats-list-name { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .cats-list-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; } .cats-list-count { font-family: var(--font-body); font-size: 9px; color: var(--gray); letter-spacing: 0.08em; } .cats-list-subcount { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--light-gray); background: var(--dark3); padding: 1px 6px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.07); } .cats-list-chevron { flex-shrink: 0; color: var(--gray); opacity: 0.4; transition: opacity 0.18s, transform 0.18s; display: flex; align-items: center; } .cats-list-item:hover .cats-list-chevron, .cats-list-item-active .cats-list-chevron { opacity: 1; transform: translateX(2px); } .cats-list-item-active .cats-list-chevron { color: var(--white); } /* ── RIGHT PANE ── */ .cats-right-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } /* Sub-category chips row */ .cats-subcat-row { display: none; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 14px 24px; border-bottom: 1px solid var(--dark2); flex-shrink: 0; scrollbar-width: none; align-items: center; background: rgba(0,0,0,0.2); } .cats-subcat-row::-webkit-scrollbar { display: none; } .cats-sub-chip { display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0; background: var(--dark2); border: 1px solid rgba(255,255,255,0.1); color: var(--light-gray); font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 16px; cursor: pointer; transition: all 0.2s ease; border-radius: 0; } .cats-sub-chip:hover { background: var(--dark3); border-color: var(--mid); color: var(--white); } .cats-sub-chip-active { background: var(--white) !important; border-color: var(--white) !important; color: var(--black) !important; font-weight: 700; } /* Right body — scrollable product area */ .cats-right-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 28px 28px; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; } .cats-right-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; min-height: 300px; } .cats-right-ph-icon { font-size: 36px; color: var(--mid); font-family: var(--font-display); letter-spacing: -0.02em; } .cats-right-ph-text { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray); } /* Product cards grid inside right pane */ .cats-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px; animation: catsFadeIn 0.3s ease both; } @keyframes catsFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .cats-prod-card { background: var(--dark); border: 1px solid var(--dark2); display: flex; flex-direction: column; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; position: relative; overflow: hidden; } .cats-prod-card:hover { background: var(--dark2); border-color: var(--mid); } .cats-prod-img-wrap { width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--dark2); position: relative; flex-shrink: 0; } .cats-prod-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .cats-prod-card:hover .cats-prod-img { transform: scale(1.04); } .cats-prod-badge { position: absolute; top: 8px; left: 8px; background: var(--white); color: var(--black); font-family: var(--font-body); font-size: 8px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 7px; z-index: 2; } .cats-prod-info { padding: 12px 14px 8px; flex: 1; } .cats-prod-name { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--white); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cats-prod-price { font-family: var(--font-display); font-size: 15px; color: var(--white); margin-top: 6px; letter-spacing: 0.01em; } .cats-prod-stock { font-family: var(--font-body); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; } .cats-prod-stock.in-stock { color: #81c784; } .cats-prod-stock.limited { color: #ffc107; } .cats-prod-stock.out-of-stock { color: var(--gray); } .cats-prod-btn { margin: 0 14px 14px; padding: 9px; background: var(--white); color: var(--black); border: none; font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease; flex-shrink: 0; } .cats-prod-btn:hover { background: var(--off-white); } .cats-prod-btn:disabled { background: var(--dark3); color: var(--gray); cursor: not-allowed; } /* Back button */ .cat-back-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: none; border: 1px solid var(--dark3); color: var(--gray); cursor: pointer; transition: var(--transition); flex-shrink: 0; } .cat-back-btn:hover { border-color: var(--mid); color: var(--white); } /* ── RESPONSIVE ── */ @media (max-width: 900px) { .cats-left-pane { width: 260px; } .cats-prod-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } @media (max-width: 768px) { /* Mobile: full-screen single-pane with slide */ .cats-popup-body { position: relative; overflow: hidden; } .cats-left-pane { width: 100%; border-right: none; position: absolute; inset: 0; background: var(--dark); z-index: 2; transform: translateX(0); transition: transform 0.38s cubic-bezier(0.16,1,0.3,1); } .cats-left-pane.cats-pane-hidden { transform: translateX(-100%); pointer-events: none; } .cats-right-pane { width: 100%; position: absolute; inset: 0; background: var(--dark); z-index: 1; transform: translateX(100%); transition: transform 0.38s cubic-bezier(0.16,1,0.3,1); } .cats-right-pane.cats-pane-visible { transform: translateX(0); z-index: 3; } .cats-right-body { padding: 20px 16px; } .cats-prod-grid { grid-template-columns: repeat(2, 1fr); } .cats-sub-chip { padding: 6px 12px; font-size: 9px; } } @media (max-width: 480px) { .cats-prod-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; } .popup-products-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; } .cats-list-item { padding: 12px 16px; } .cats-list-img { width: 40px; height: 40px; } .cats-subcat-row { padding: 10px 16px; gap: 6px; -webkit-overflow-scrolling: touch; } .cats-sub-chip { padding: 5px 10px; font-size: 9px; } } /* ═══════════════════════════════════════════════════════════════ PARAMOUNT E-STORE — THEME SYSTEM 6 themes: Obsidian (default), Ivory, Slate, Emerald, Cognac, Midnight ═══════════════════════════════════════════════════════════════ */ /* ── DEFAULT / OBSIDIAN (original dark) ─────────────────────── */ :root, [data-theme="obsidian"] { --black: #080808; --dark: #111111; --dark2: #1a1a1a; --dark3: #242424; --mid: #333333; --gray: #666666; --light-gray: #999999; --off-white: #e8e8e0; --white: #f5f5f0; --pure-white: #ffffff; --accent: #f5f5f0; --accent2: #d4a843; --nav-bg: rgba(8,8,8,0.96); --nav-border: #1a1a1a; --nav-link: #999999; --nav-link-hover: #f5f5f0; --body-bg: #080808; --card-bg: #111111; --card-border: #1a1a1a; --card-hover-bg:#1a1a1a; --btn-primary-bg: #f5f5f0; --btn-primary-text: #080808; --btn-primary-hover: #e8e8e0; --popup-bg: #0e0e0e; --input-bg: #080808; --input-border: #242424; --logo-color: #f5f5f0; --logo-sub: #666666; --grain-opacity:0.025; --section-bg: #111111; --footer-bg: #111111; --hero-text-stroke: rgba(255,255,255,0.04); --scrollbar: #333333; --trust-bg: #111111; } /* ── IVORY (warm cream light) ───────────────────────────────── */ [data-theme="ivory"] { --black: #faf8f4; --dark: #f2ede4; --dark2: #e8e1d5; --dark3: #ddd4c4; --mid: #c8bba8; --gray: #8a7f72; --light-gray: #6b6059; --off-white: #3d342a; --white: #2a2018; --pure-white: #1a1410; --accent: #2a2018; --accent2: #9b6b2f; --nav-bg: rgba(250,248,244,0.97); --nav-border: #e0d8cc; --nav-link: #6b6059; --nav-link-hover: #2a2018; --body-bg: #faf8f4; --card-bg: #f2ede4; --card-border: #e8e1d5; --card-hover-bg:#ebe4d8; --btn-primary-bg: #2a2018; --btn-primary-text: #faf8f4; --btn-primary-hover: #3d342a; --popup-bg: #f7f3ed; --input-bg: #faf8f4; --input-border: #ddd4c4; --logo-color: #2a2018; --logo-sub: #8a7f72; --grain-opacity:0.015; --section-bg: #ece7de; --footer-bg: #e8e1d5; --hero-text-stroke: rgba(42,32,24,0.05); --scrollbar: #c8bba8; --trust-bg: #ece7de; } /* ── SLATE (blue-grey dark) ─────────────────────────────────── */ [data-theme="slate"] { --black: #0c0f14; --dark: #141820; --dark2: #1c2230; --dark3: #242c3d; --mid: #32405a; --gray: #5a6a82; --light-gray: #8a9ab5; --off-white: #dde4ef; --white: #e8edf7; --pure-white: #f0f4ff; --accent: #e8edf7; --accent2: #6b9bd2; --nav-bg: rgba(12,15,20,0.97); --nav-border: #1c2230; --nav-link: #8a9ab5; --nav-link-hover: #e8edf7; --body-bg: #0c0f14; --card-bg: #141820; --card-border: #1c2230; --card-hover-bg:#1c2230; --btn-primary-bg: #e8edf7; --btn-primary-text: #0c0f14; --btn-primary-hover: #dde4ef; --popup-bg: #111520; --input-bg: #0c0f14; --input-border: #242c3d; --logo-color: #e8edf7; --logo-sub: #5a6a82; --grain-opacity:0.02; --section-bg: #141820; --footer-bg: #141820; --hero-text-stroke: rgba(232,237,247,0.04); --scrollbar: #32405a; --trust-bg: #141820; } /* ── EMERALD (dark forest green) ───────────────────────────── */ [data-theme="emerald"] { --black: #060d09; --dark: #0d1a10; --dark2: #142318; --dark3: #1c2e20; --mid: #2a4030; --gray: #4d6b56; --light-gray: #7aa385; --off-white: #d8eedc; --white: #e6f4e9; --pure-white: #f0faf2; --accent: #e6f4e9; --accent2: #4daa6a; --nav-bg: rgba(6,13,9,0.97); --nav-border: #142318; --nav-link: #7aa385; --nav-link-hover: #e6f4e9; --body-bg: #060d09; --card-bg: #0d1a10; --card-border: #142318; --card-hover-bg:#142318; --btn-primary-bg: #e6f4e9; --btn-primary-text: #060d09; --btn-primary-hover: #d8eedc; --popup-bg: #0a150c; --input-bg: #060d09; --input-border: #1c2e20; --logo-color: #e6f4e9; --logo-sub: #4d6b56; --grain-opacity:0.02; --section-bg: #0d1a10; --footer-bg: #0d1a10; --hero-text-stroke: rgba(230,244,233,0.04); --scrollbar: #2a4030; --trust-bg: #0d1a10; } /* ── COGNAC (warm amber dark) ──────────────────────────────── */ [data-theme="cognac"] { --black: #0e0906; --dark: #1a1008; --dark2: #26190e; --dark3: #342214; --mid: #4a3020; --gray: #7a5840; --light-gray: #b08060; --off-white: #f0ddc8; --white: #f8ede0; --pure-white: #fff8f0; --accent: #f8ede0; --accent2: #c4832a; --nav-bg: rgba(14,9,6,0.97); --nav-border: #26190e; --nav-link: #b08060; --nav-link-hover: #f8ede0; --body-bg: #0e0906; --card-bg: #1a1008; --card-border: #26190e; --card-hover-bg:#26190e; --btn-primary-bg: #f8ede0; --btn-primary-text: #0e0906; --btn-primary-hover: #f0ddc8; --popup-bg: #160d07; --input-bg: #0e0906; --input-border: #342214; --logo-color: #f8ede0; --logo-sub: #7a5840; --grain-opacity:0.025; --section-bg: #1a1008; --footer-bg: #1a1008; --hero-text-stroke: rgba(248,237,224,0.04); --scrollbar: #4a3020; --trust-bg: #1a1008; } /* ── MIDNIGHT (deep purple-black) ──────────────────────────── */ [data-theme="midnight"] { --black: #08060f; --dark: #100e1c; --dark2: #181526; --dark3: #221e32; --mid: #322c4c; --gray: #5e5880; --light-gray: #9490b8; --off-white: #dddaf5; --white: #eae8fa; --pure-white: #f4f2ff; --accent: #eae8fa; --accent2: #8b7fd4; --nav-bg: rgba(8,6,15,0.97); --nav-border: #181526; --nav-link: #9490b8; --nav-link-hover: #eae8fa; --body-bg: #08060f; --card-bg: #100e1c; --card-border: #181526; --card-hover-bg:#181526; --btn-primary-bg: #eae8fa; --btn-primary-text: #08060f; --btn-primary-hover: #dddaf5; --popup-bg: #0d0b18; --input-bg: #08060f; --input-border: #221e32; --logo-color: #eae8fa; --logo-sub: #5e5880; --grain-opacity:0.02; --section-bg: #100e1c; --footer-bg: #100e1c; --hero-text-stroke: rgba(234,232,250,0.04); --scrollbar: #322c4c; --trust-bg: #100e1c; } /* ═══════════════════════════════════════════════════════════════ THEME-AWARE BASE OVERRIDES (all components use --variable tokens, these make it work) ═══════════════════════════════════════════════════════════════ */ body { background: var(--body-bg) !important; color: var(--white) !important; transition: background 0.4s ease, color 0.4s ease; } /* ── NAV ── */ .nav { background: var(--nav-bg) !important; border-bottom-color: var(--nav-border) !important; transition: background 0.4s ease; } .nav-link, button.nav-link, a.nav-link, .nav-center .nav-link, .nav-center a.nav-link { color: var(--nav-link) !important; } .nav-link:hover, button.nav-link:hover, a.nav-link:hover, .nav-center .nav-link:hover, .nav-center a.nav-link:hover { color: var(--nav-link-hover) !important; } .nav-link::after { background: var(--nav-link-hover) !important; } .logo-main { color: var(--logo-color) !important; } .logo-sub { color: var(--logo-sub) !important; } /* Hamburger */ .hamburger span { background: var(--white) !important; } .nav-search-btn { color: var(--white) !important; } .cart-btn { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .cart-btn:hover { background: var(--btn-primary-hover) !important; } .cart-count { background: var(--black) !important; color: var(--white) !important; } [data-theme="ivory"] .cart-count { background: var(--white) !important; color: var(--black) !important; } /* ── HERO ── */ .hero { background: var(--body-bg) !important; } .hero-title, .hero-title em { color: var(--white) !important; } .hero-desc { color: var(--gray) !important; } .hero-cta { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .hero-cta:hover { background: var(--btn-primary-hover) !important; } .hero-cta-ghost { border-color: var(--mid) !important; color: var(--white) !important; } .hero-cta-ghost:hover { border-color: var(--white) !important; } .hero-bg-text { -webkit-text-stroke: 1px var(--hero-text-stroke) !important; } .hero-eyebrow { color: var(--gray) !important; } .hero-eyebrow::before, .hero-eyebrow::after { background: var(--mid) !important; } .hero-scroll { color: var(--gray) !important; } .scroll-line { background: var(--mid) !important; } .scroll-line::after { background: var(--white) !important; } /* ── SEARCH TRIGGER ── */ .hero-search-bar-trigger { background: var(--dark) !important; border-color: var(--dark2) !important; } .search-trigger-bar { color: var(--light-gray) !important; } .hero-search-section { background: var(--dark2) !important; border-color: var(--dark3) !important; } .hero-search-input { background: var(--body-bg) !important; color: var(--white) !important; border-color: var(--dark3) !important; } .search-adv-select, .search-price-input { background: var(--body-bg) !important; color: var(--white) !important; border-color: var(--dark3) !important; } .hero-search-go-btn { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } /* ── MARQUEE ── */ .marquee-wrap { background: var(--dark) !important; border-color: var(--dark2) !important; } .marquee-track span { color: var(--gray) !important; } /* ── TRUST STRIP ── */ .trust-strip { background: var(--trust-bg) !important; border-color: var(--dark2) !important; } .trust-label { color: var(--light-gray) !important; } .trust-divider { background: var(--dark3) !important; } /* ── SECTIONS ── */ .section { background: var(--body-bg); } .section-title { color: var(--white) !important; } .section-line { background: var(--dark2) !important; } .see-all-btn { border-color: var(--mid) !important; color: var(--light-gray) !important; } .see-all-btn:hover { background: var(--white) !important; color: var(--black) !important; border-color: var(--white) !important; } /* ── CARDS ── */ .product-card { background: var(--card-bg) !important; border-color: var(--card-border) !important; } .product-card:hover { background: var(--card-hover-bg) !important; border-color: var(--mid) !important; } .product-card::before { background: var(--white) !important; } .product-name { color: var(--white) !important; } .product-category { color: var(--gray) !important; } .product-desc { color: var(--gray) !important; } .product-price { color: var(--white) !important; } .product-footer { border-color: var(--dark3) !important; } .product-img-wrap { background: var(--dark2) !important; border-color: var(--dark3) !important; } .product-badge { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .btn-add-cart { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .btn-add-cart:hover { background: var(--btn-primary-hover) !important; } .btn-add-cart:disabled { background: var(--mid) !important; color: var(--gray) !important; } .btn-view-more { color: var(--light-gray) !important; border-color: var(--dark3) !important; } .btn-view-more:hover { border-color: var(--gray) !important; color: var(--white) !important; } /* ── CATEGORIES ── */ .categories-section { background: var(--section-bg) !important; border-color: var(--dark2) !important; } .cat-item { background: var(--black) !important; border-color: var(--dark2) !important; } .cat-item:hover { background: var(--dark2) !important; border-color: var(--mid) !important; } .cat-item-name { color: var(--white) !important; } .cat-item-count { color: var(--gray) !important; } .cat-item-img-wrap { background: var(--dark2) !important; border-color: var(--dark3) !important; } /* ── FILTER BTNS ── */ .filter-btn { color: var(--light-gray) !important; border-color: var(--dark3) !important; background: transparent !important; } .filter-btn:hover, .filter-btn.active { background: var(--white) !important; color: var(--black) !important; border-color: var(--white) !important; } /* ── CART DRAWER ── */ .cart-overlay { background: rgba(0,0,0,0.7); } .cart-drawer { background: var(--dark) !important; border-color: var(--dark2) !important; } .cart-head { border-color: var(--dark2) !important; } .cart-head h3 { color: var(--white) !important; } .cart-close { color: var(--gray) !important; } .cart-close:hover { color: var(--white) !important; } .cart-item { border-color: var(--dark2) !important; } .cart-item-name { color: var(--white) !important; } .cart-item-price { color: var(--gray) !important; } .qty-btn { background: var(--dark3) !important; border-color: var(--mid) !important; color: var(--white) !important; } .qty-btn:hover { background: var(--mid) !important; } .qty-num { color: var(--white) !important; } .cart-item-remove { color: var(--gray) !important; } .cart-item-remove:hover { color: var(--white) !important; } .cart-footer { border-color: var(--dark2) !important; } .cart-empty p { color: var(--gray) !important; } .cart-empty button { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .cart-total span:first-child { color: var(--gray) !important; } .cart-total span:last-child { color: var(--white) !important; } .checkout-btn { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .checkout-btn:hover { background: var(--btn-primary-hover) !important; } .cart-item-img-wrap { background: var(--dark2) !important; border-color: var(--dark3) !important; } /* ── MODALS ── */ .product-modal, .checkout-modal { background: var(--dark) !important; border-color: var(--mid) !important; } .modal-close { color: var(--gray) !important; } .modal-close:hover { color: var(--white) !important; } .modal-product-cat { color: var(--gray) !important; } .modal-product-name { color: var(--white) !important; } .modal-product-price { color: var(--white) !important; } .modal-divider { background: var(--dark2) !important; } .modal-product-desc { color: var(--light-gray) !important; } .modal-add-btn { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .modal-add-btn:hover { background: var(--btn-primary-hover) !important; } .modal-product-img-wrap { background: var(--dark2) !important; border-color: var(--dark3) !important; } .modal-badge { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .checkout-modal { background: var(--dark) !important; } .checkout-inner .checkout-title { color: var(--white) !important; } .checkout-form-side h4, .checkout-summary-side h4 { color: var(--gray) !important; border-color: var(--dark2) !important; } .form-group label { color: var(--gray) !important; } .form-group input, .form-group select, .form-group textarea { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--white) !important; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--gray) !important; } .form-group select option { background: var(--dark) !important; } .form-note { background: var(--dark2) !important; border-color: var(--dark3) !important; color: var(--gray) !important; } .form-note strong { color: var(--white) !important; } .pay-btn { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .pay-btn:hover { background: var(--btn-primary-hover) !important; } .pay-btn:disabled { background: var(--mid) !important; color: var(--gray) !important; } .checkout-summary-item { border-color: var(--dark2) !important; } .checkout-summary-name { color: var(--white) !important; } .checkout-summary-qty { color: var(--gray) !important; } .checkout-summary-price { color: var(--white) !important; } .checkout-summary-img-wrap { background: var(--dark2) !important; border-color: var(--dark3) !important; } .summary-total { border-color: var(--mid) !important; } .summary-total span:first-child { color: var(--gray) !important; } .summary-total span:last-child { color: var(--white) !important; } /* ── POPUPS (full-screen) ── */ .popup-overlay { background: rgba(0,0,0,0.88); } .popup, .full-popup { background: var(--popup-bg) !important; border-color: var(--dark2) !important; } .popup-head { border-color: var(--dark2) !important; background: var(--popup-bg) !important; } .popup-title { color: var(--white) !important; } .popup-close { color: var(--gray) !important; border-color: var(--dark2) !important; } .popup-close:hover { color: var(--white) !important; border-color: var(--mid) !important; } .popup-shop-controls { background: var(--dark) !important; border-color: var(--dark2) !important; } .popup-search-mini-wrap { background: var(--black) !important; border-color: var(--dark3) !important; } .popup-search-mini-wrap input { color: var(--white) !important; } .popup-filter-bar .filter-btn { color: var(--light-gray) !important; border-color: var(--dark3) !important; } .popup-filter-bar .filter-btn.active { background: var(--white) !important; color: var(--black) !important; } .popup-cats-grid .popup-cat-card { background: var(--dark) !important; border-color: var(--dark2) !important; } .popup-cats-grid .popup-cat-card:hover { background: var(--dark2) !important; } .popup-cats-grid .popup-cat-name { color: var(--white) !important; } .popup-cats-grid .popup-cat-count { color: var(--gray) !important; } .search-bar-wrap { background: var(--dark2) !important; border-color: var(--dark3) !important; } .search-bar-input { color: var(--white) !important; } .search-bar-icon { color: var(--gray) !important; } .search-result-item { border-color: var(--dark3) !important; } .search-result-item:hover { background: var(--dark2) !important; } .search-result-name { color: var(--white) !important; } .search-result-cat { color: var(--gray) !important; } .search-result-price { color: var(--white) !important; } .search-placeholder { color: var(--gray) !important; } .contact-popup { background: var(--popup-bg) !important; } .contact-info-side { background: var(--dark) !important; border-color: var(--dark2) !important; } .contact-block-label { color: var(--gray) !important; } .contact-block-value { color: var(--white) !important; } .contact-form-side h4 { color: var(--white) !important; border-color: var(--dark2) !important; } /* ── MOBILE DRAWER ── */ .mob-drawer { background: var(--dark) !important; border-color: var(--dark2) !important; } .mob-drawer-head { border-color: var(--dark2) !important; } .mob-close { color: var(--gray) !important; } .mob-search-input { background: var(--black) !important; border-color: var(--dark3) !important; color: var(--white) !important; } .mob-nav-links button { color: var(--light-gray) !important; border-color: var(--dark2) !important; } .mob-nav-links button:hover { background: var(--dark2) !important; color: var(--white) !important; } .mob-cart-badge { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .mob-overlay { background: rgba(0,0,0,0.7); } .mob-drawer-foot { border-color: var(--dark2) !important; color: var(--gray) !important; } /* ── SLIDESHOW / PRODUCT SLIDESHOW ── */ .product-slideshow { background: var(--dark2) !important; } .sdot { background: var(--mid) !important; } .sdot.active { background: var(--white) !important; } .modal-slideshow-prev, .modal-slideshow-next { background: rgba(0,0,0,0.5) !important; color: var(--white) !important; } /* ── FOOTER ── */ .footer { background: var(--footer-bg) !important; border-color: var(--dark2) !important; } .footer-top { border-color: var(--dark2) !important; } .footer-logo { color: var(--white) !important; } .footer-tagline { color: var(--gray) !important; } .footer-text { color: var(--gray) !important; } .footer-col h4 { color: var(--white) !important; border-color: var(--dark2) !important; } .footer-col a { color: var(--gray) !important; } .footer-col a:hover { color: var(--white) !important; } .footer-contact-item { color: var(--gray) !important; } .footer-contact-item a { color: var(--gray) !important; } .footer-contact-item a:hover { color: var(--white) !important; } .footer-payment-badge { background: var(--dark2) !important; border-color: var(--dark3) !important; color: var(--gray) !important; } .footer-payment-badge strong { color: var(--white) !important; } .footer-bottom { color: var(--gray) !important; } .footer-bottom-links a { color: var(--gray) !important; } .footer-bottom-links a:hover { color: var(--white) !important; } .footer-bottom-links span { color: var(--dark3) !important; } .social-btn { background: var(--dark2) !important; border-color: var(--dark3) !important; color: var(--gray) !important; } .social-btn:hover { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; border-color: var(--btn-primary-bg) !important; } /* ── TOAST ── */ .toast { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } /* ── GRAIN ── */ .grain { opacity: var(--grain-opacity) !important; } /* ── SCROLLBAR ── */ * { scrollbar-color: var(--scrollbar) transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar) !important; } /* ───────────────────────────────────────────────────────────────── THEME SWITCHER PANEL ───────────────────────────────────────────────────────────────── */ /* ── SCROLL TO TOP BUTTON ── */ @keyframes pes-stt-in { from { opacity: 0; transform: translateY(18px) scale(0.82); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pes-stt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.12), 0 6px 28px rgba(0,0,0,0.45); } 50% { box-shadow: 0 0 0 8px rgba(255,255,255,0.04), 0 6px 28px rgba(0,0,0,0.45); } } @keyframes pes-arrow-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .pes-scroll-top { position: fixed; bottom: 144px; right: 32px; z-index: 801; width: 48px; height: 48px; background: var(--bg-card, #111); color: var(--text-primary, #fff); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 6px 28px rgba(0,0,0,0.45); transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1); opacity: 0; pointer-events: none; transform: translateY(18px) scale(0.82); } .pes-scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); animation: pes-stt-in 0.4s cubic-bezier(0.34,1.56,0.64,1) both, pes-stt-pulse 3s ease-in-out 0.8s infinite; } .pes-scroll-top::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%); border-radius: inherit; pointer-events: none; } .pes-scroll-top:hover { background: var(--btn-primary-bg, #fff); color: var(--btn-primary-text, #000); border-color: var(--btn-primary-bg, #fff); transform: translateY(-4px) scale(1.06); box-shadow: 0 12px 36px rgba(0,0,0,0.5); animation: none; } .pes-scroll-top:active { transform: translateY(-1px) scale(0.97); transition-duration: 0.1s; } .pes-scroll-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 1; } .pes-scroll-top.visible:not(:hover) svg { animation: pes-arrow-float 2.4s ease-in-out 1.2s infinite; } .pes-scroll-top:hover svg { animation: none; transform: translateY(-1px); transition: transform 0.2s ease; } /* Floating trigger button */ .theme-trigger { position: fixed; bottom: 80px; right: 32px; z-index: 800; width: 52px; height: 52px; background: var(--btn-primary-bg); color: var(--btn-primary-text); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 24px rgba(0,0,0,0.4); transition: all 0.3s ease; font-size: 20px; } .theme-trigger:hover { transform: scale(1.1) rotate(15deg); box-shadow: 0 8px 32px rgba(0,0,0,0.5); } .theme-trigger.open { transform: rotate(45deg); } /* Panel */ .theme-panel { position: fixed; bottom: 208px; right: 32px; z-index: 799; width: 280px; max-height: calc(100vh - 180px); background: var(--dark); border: 1px solid var(--dark2); box-shadow: 0 24px 80px rgba(0,0,0,0.6); transform: translateY(16px) scale(0.96); opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; overflow: hidden; } .theme-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; } /* Sticky header stays put, body scrolls */ .theme-panel-head { padding: 14px 18px 10px; border-bottom: 1px solid var(--dark2); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } /* Scrollable body */ .theme-panel-body { overflow-y: auto; overflow-x: hidden; flex: 1; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; } .theme-panel-title { font-size: 10px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--light-gray); } .theme-panel-close { background: none; border: none; color: var(--gray); font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 4px; transition: color 0.2s; } .theme-panel-close:hover { color: var(--white); } /* Section label */ .theme-section-label { font-size: 9px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gray); padding: 12px 18px 8px; } /* Theme swatches grid */ .theme-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0 18px 12px; } .theme-swatch { position: relative; border: 1px solid transparent; padding: 8px 6px 7px; cursor: pointer; background: var(--dark2); transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; gap: 6px; outline: none; } .theme-swatch:hover { border-color: var(--mid); background: var(--dark3); } .theme-swatch.active { border-color: var(--white); background: var(--dark3); } .theme-swatch.active::after { content: '✓'; position: absolute; top: 4px; right: 6px; font-size: 9px; color: var(--white); font-weight: 700; } .swatch-preview { width: 34px; height: 22px; border-radius: 2px; position: relative; overflow: hidden; flex-shrink: 0; } .swatch-preview-bg { position: absolute; inset: 0; } .swatch-preview-nav { position: absolute; top: 0; left: 0; right: 0; height: 8px; } .swatch-preview-dot { position: absolute; bottom: 4px; right: 4px; width: 10px; height: 6px; border-radius: 1px; } .swatch-label { font-size: 9px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--light-gray); text-align: center; line-height: 1.2; } .theme-swatch.active .swatch-label { color: var(--white); } /* Font selector */ .theme-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 0 18px 12px; } .theme-font-btn { background: var(--dark2); border: 1px solid transparent; color: var(--light-gray); padding: 8px 10px; cursor: pointer; transition: all 0.2s ease; text-align: left; display: flex; flex-direction: column; gap: 2px; } .theme-font-btn:hover { border-color: var(--mid); color: var(--white); } .theme-font-btn.active { border-color: var(--white); color: var(--white); } .theme-font-btn.active::after { content: ' ✓'; } .font-btn-name { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .font-btn-sample { font-size: 12px; line-height: 1.1; color: var(--light-gray); } .theme-font-btn.active .font-btn-sample { color: var(--white); } /* Radius / density row */ .theme-options-row { display: flex; gap: 2px; padding: 0 18px 14px; } .theme-opt-btn { flex: 1; background: var(--dark2); border: 1px solid transparent; color: var(--light-gray); padding: 8px 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: all 0.2s ease; text-align: center; font-family: var(--font-body); } .theme-opt-btn:hover { border-color: var(--mid); color: var(--white); } .theme-opt-btn.active { border-color: var(--white); color: var(--white); background: var(--dark3); } /* Divider */ .theme-panel-divider { height: 1px; background: var(--dark2); margin: 0 18px; } /* Reset link */ .theme-reset-row { padding: 10px 18px 14px; display: flex; justify-content: center; flex-shrink: 0; } .theme-reset-btn { background: none; border: none; color: var(--gray); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; font-family: var(--font-body); transition: color 0.2s; } .theme-reset-btn:hover { color: var(--white); } /* ── Compact / Spacious density ── */ [data-density="compact"] { --section-v-pad: 60px; --card-pad: 24px 20px; --nav-height: 62px; font-size: 13px; } [data-density="spacious"] { --section-v-pad: 140px; --card-pad: 56px 44px; --nav-height: 92px; font-size: 15px; } [data-density="compact"] .nav { height: 62px !important; } [data-density="spacious"] .nav { height: 92px !important; } [data-density="compact"] .section { padding: 60px 48px !important; } [data-density="spacious"] .section { padding: 140px 48px !important; } [data-density="compact"] .product-card { padding: 24px 20px !important; } [data-density="spacious"] .product-card { padding: 56px 44px !important; } /* ── Rounded card radius ── */ [data-radius="rounded"] .product-card, [data-radius="rounded"] .cat-item, [data-radius="rounded"] .cart-drawer, [data-radius="rounded"] .popup, [data-radius="rounded"] .full-popup, [data-radius="rounded"] .product-modal, [data-radius="rounded"] .checkout-modal, [data-radius="rounded"] .theme-panel, [data-radius="rounded"] .ws-product-card, [data-radius="rounded"] .tier-card { border-radius: 12px !important; } [data-radius="rounded"] .btn-add-cart, [data-radius="rounded"] .hero-cta, [data-radius="rounded"] .cart-btn, [data-radius="rounded"] .checkout-btn, [data-radius="rounded"] .pay-btn, [data-radius="rounded"] .filter-btn { border-radius: 999px !important; } [data-radius="rounded"] .product-img-wrap, [data-radius="rounded"] .modal-product-img-wrap, [data-radius="rounded"] .cat-item-img-wrap { border-radius: 8px !important; } /* Smooth all transitions when theme changes */ *, *::before, *::after { transition: background-color 0.35s ease, border-color 0.35s ease, color 0.2s ease !important; } /* But reset transition on things that shouldn't animate */ .marquee-track { transition: none !important; } .scroll-line::after { transition: none !important; } .hero-cta:hover { transition: all 0.3s ease !important; } /* ═══════════════════════════════════════════════════════════════ WHOLESALE PAGE THEME OVERRIDES ═══════════════════════════════════════════════════════════════ */ .ws-hero { background: var(--body-bg) !important; } .ws-hero-bg { color: transparent !important; -webkit-text-stroke: 1px var(--hero-text-stroke) !important; } .ws-eyebrow { color: var(--gray) !important; } .ws-title em { color: var(--white) !important; } .ws-desc { color: var(--gray) !important; } .ws-cta-primary { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .ws-cta-primary:hover { background: var(--btn-primary-hover) !important; } .ws-cta-ghost { border-color: var(--mid) !important; color: var(--white) !important; } .ws-cta-ghost:hover { border-color: var(--white) !important; } .ws-trust { border-color: var(--dark2) !important; } .ws-trust-item { border-color: var(--dark2) !important; } .ws-trust-icon { border-color: var(--dark3) !important; } .ws-trust-title { color: var(--white) !important; } .ws-trust-sub { color: var(--gray) !important; } .ws-section-title { color: var(--white) !important; } .ws-section-line { background: var(--dark2) !important; } .tier-card { background: var(--dark) !important; border-color: var(--dark2) !important; } .tier-card:hover { background: var(--dark2) !important; border-color: var(--mid) !important; } .tier-card.highlight { background: var(--btn-primary-bg) !important; border-color: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .tier-label { color: var(--gray) !important; } .tier-range, .tier-note { color: var(--gray) !important; } .tier-divider { background: var(--dark3) !important; } .tier-card.highlight .tier-disc, .tier-card.highlight .tier-range, .tier-card.highlight .tier-note { color: var(--btn-primary-text) !important; } .tier-card.highlight .tier-label { color: var(--btn-primary-text) !important; opacity: 0.7; } .tier-card.highlight .tier-divider { background: rgba(0,0,0,0.15) !important; } .ws-search-wrap { background: var(--dark) !important; border-color: var(--dark3) !important; } .ws-search-wrap input { color: var(--white) !important; } .ws-cat-filter { background: var(--dark) !important; border-color: var(--dark3) !important; color: var(--white) !important; } .ws-product-card { background: var(--dark) !important; border-color: var(--dark2) !important; } .ws-product-card:hover { background: var(--dark2) !important; border-color: var(--mid) !important; } .ws-card-img-wrap { background: var(--dark2) !important; border-color: var(--dark3) !important; } .ws-card-cat { color: var(--gray) !important; } .ws-card-name { color: var(--white) !important; } .ws-card-desc { color: var(--gray) !important; } .ws-card-retail { color: var(--gray) !important; } .ws-card-price-label { color: var(--gray) !important; } .ws-qty-btn { background: var(--dark3) !important; color: var(--white) !important; } .ws-qty-btn:hover { background: var(--mid) !important; } .ws-qty-input { color: var(--white) !important; } .ws-card-live-price { background: var(--dark3) !important; border-color: var(--mid) !important; } .ws-live-label { color: var(--gray) !important; } .ws-live-amount { color: var(--white) !important; } .ws-add-btn { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .ws-add-btn:hover { background: var(--btn-primary-hover) !important; } .ws-add-btn:disabled { background: var(--dark3) !important; color: var(--gray) !important; } .ws-quote-section { background: var(--dark) !important; border-color: var(--dark2) !important; } .ws-quote-eyebrow { color: var(--gray) !important; } .ws-quote-desc { color: var(--gray) !important; } .ws-quote-perks li { color: var(--light-gray) !important; border-color: var(--dark3) !important; } .ws-quote-perks li::before { color: var(--white) !important; } .ws-form-group label { color: var(--gray) !important; } .ws-form-group input, .ws-form-group select, .ws-form-group textarea { background: var(--black) !important; border-color: var(--dark3) !important; color: var(--white) !important; } .ws-form-group input:focus, .ws-form-group select:focus, .ws-form-group textarea:focus { border-color: var(--mid) !important; } .ws-submit-btn { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .ws-submit-btn:hover { background: var(--btn-primary-hover) !important; } .ws-faq-item { background: var(--dark) !important; border-color: var(--dark2) !important; } .ws-faq-item:hover { background: var(--dark2) !important; } .ws-faq-q { color: var(--white) !important; } .ws-faq-arrow { color: var(--gray) !important; } .ws-faq-item.open .ws-faq-arrow { color: var(--white) !important; } .ws-faq-a { color: var(--gray) !important; } .ws-cart-bar { background: var(--btn-primary-bg) !important; border-color: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .ws-cart-count, .ws-cart-savings, .ws-cart-total { color: var(--btn-primary-text) !important; } .ws-cart-checkout-btn { background: var(--black) !important; color: var(--white) !important; } .ws-checkout-modal { background: var(--dark) !important; border-color: var(--mid) !important; } .ws-checkout-head { border-color: var(--dark2) !important; background: var(--dark) !important; } .ws-checkout-head h3 { color: var(--white) !important; } .ws-order-summary { background: var(--black) !important; border-color: var(--dark3) !important; } .ws-order-summary-title { color: var(--gray) !important; } .ws-summary-line { border-color: var(--dark3) !important; color: var(--light-gray) !important; } .ws-summary-line.total { color: var(--white) !important; } .ws-cart-item { border-color: rgba(0,0,0,0.08) !important; } /* ═══════════════════════════════════════════════════════════════ TRACKING PAGE THEME OVERRIDES ═══════════════════════════════════════════════════════════════ */ .trk-hero, .trk-search-section { background: var(--body-bg) !important; } .trk-title { color: var(--white) !important; } .trk-desc { color: var(--gray) !important; } .trk-search-box { background: var(--dark) !important; border-color: var(--dark2) !important; } .trk-input-wrap input { background: var(--black) !important; border-color: var(--dark3) !important; color: var(--white) !important; } .trk-btn { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .trk-result-panel { background: var(--dark) !important; border-color: var(--dark2) !important; } .trk-status-bar { background: var(--dark2) !important; border-color: var(--dark3) !important; } .trk-status-label { color: var(--gray) !important; } .trk-status-val { color: var(--white) !important; } .trk-timeline-item { border-color: var(--dark3) !important; } .trk-timeline-item.done .trk-dot { background: var(--white) !important; border-color: var(--white) !important; } .trk-timeline-item .trk-dot { background: var(--dark3) !important; border-color: var(--mid) !important; } .trk-timeline-label { color: var(--white) !important; } .trk-timeline-time { color: var(--gray) !important; } .trk-info-grid .trk-info-item { background: var(--dark2) !important; border-color: var(--dark3) !important; } .trk-info-label { color: var(--gray) !important; } .trk-info-val { color: var(--white) !important; } .trk-map-panel { background: var(--dark) !important; border-color: var(--dark2) !important; } .trk-map-title { color: var(--gray) !important; } .trk-map-legend span { color: var(--gray) !important; } /* ═══════════════════════════════════════════════════════════════ POLICY POPUP STYLES + THEME SUPPORT (v9) ═══════════════════════════════════════════════════════════════ */ .policy-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 1200; backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .policy-overlay.open { opacity: 1; pointer-events: all; } .policy-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -40%) scale(0.96); z-index: 1201; width: min(780px, 94vw); max-height: 88vh; background: var(--dark); border: 1px solid var(--mid); display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: all 0.35s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 40px 120px rgba(0,0,0,0.7); } .policy-popup.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: all; } .policy-popup-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 28px 36px; border-bottom: 1px solid var(--dark2); flex-shrink: 0; background: var(--dark); } .policy-popup-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; } .policy-popup-title { font-family: var(--font-display); font-size: 32px; font-weight: 300; color: var(--white); margin: 0; } .policy-popup-close { background: none; border: 1px solid var(--dark3); color: var(--gray); width: 36px; height: 36px; cursor: pointer; font-size: 14px; transition: all 0.2s; flex-shrink: 0; } .policy-popup-close:hover { color: var(--white); border-color: var(--mid); } .policy-popup-body { flex: 1; overflow-y: auto; padding: 32px 36px; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; } .policy-effective { font-size: 11px; color: var(--gray); letter-spacing: 0.1em; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--dark2); } .policy-content h3 { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--white); margin: 28px 0 10px; } .policy-content h3:first-child { margin-top: 0; } .policy-content p { font-size: 13px; color: var(--light-gray); line-height: 1.8; margin-bottom: 12px; } .policy-content ul { list-style: none; margin: 0 0 12px; padding: 0; } .policy-content ul li { font-size: 13px; color: var(--light-gray); line-height: 1.8; padding: 4px 0 4px 20px; position: relative; } .policy-content ul li::before { content: '—'; position: absolute; left: 0; color: var(--gray); font-size: 11px; } .policy-content strong { color: var(--white); } .policy-popup-foot { padding: 20px 36px; border-top: 1px solid var(--dark2); display: flex; justify-content: flex-end; background: var(--dark); flex-shrink: 0; } .policy-accept-btn { background: var(--btn-primary-bg); color: var(--btn-primary-text); border: none; padding: 14px 40px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .policy-accept-btn:hover { background: var(--btn-primary-hover); } /* ── Cookie consent banner ── */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; background: var(--dark); border-top: 1px solid var(--dark2); padding: 20px 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 -8px 40px rgba(0,0,0,0.4); } .cookie-banner.visible { transform: translateY(0); } .cookie-banner-text { flex: 1; font-size: 12px; color: var(--light-gray); line-height: 1.7; min-width: 240px; } .cookie-banner-text a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; } .cookie-banner-btns { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; } .cookie-accept-btn { background: var(--btn-primary-bg); color: var(--btn-primary-text); border: none; padding: 12px 28px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .cookie-accept-btn:hover { background: var(--btn-primary-hover); } .cookie-decline-btn { background: none; border: 1px solid var(--dark3); color: var(--gray); padding: 12px 24px; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .cookie-decline-btn:hover { border-color: var(--mid); color: var(--white); } /* Theme overrides for policy popup */ .policy-popup { background: var(--popup-bg) !important; border-color: var(--mid) !important; } .policy-popup-head { background: var(--popup-bg) !important; border-color: var(--dark2) !important; } .policy-popup-foot { background: var(--popup-bg) !important; border-color: var(--dark2) !important; } /* ═══════════════════════════════════════════════════════════════ PARAMOUNT v11 — NEW FEATURE STYLES Trust badges · Homepage reviews · BNPL · Delivery preview ═══════════════════════════════════════════════════════════════ */ /* ── Product modal: trust strip ─────────────────────────────── */ .modal-trust-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 6px; } .modal-trust-item { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 5px 10px; font-size: 11px; color: #ccc; font-family: var(--font-body, 'Montserrat', sans-serif); white-space: nowrap; } .modal-return-policy { font-size: 11px; color: #666; margin: 4px 0 12px; line-height: 1.5; font-family: var(--font-body, 'Montserrat', sans-serif); } /* ── Homepage reviews ───────────────────────────────────────── */ .hrev-header { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 20px; } .hrev-avg-bar { text-align: center; margin-bottom: 32px; } .hrev-avg-stars { color: #c9a84c; font-size: 20px; letter-spacing: 3px; margin-right: 10px; } .hrev-avg-text { font-family: var(--font-body, 'Montserrat', sans-serif); font-size: 12px; color: #888; letter-spacing: 0.05em; } .hrev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; max-width: 1100px; margin: 0 auto; padding: 0 20px; } .hrev-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 20px; font-family: var(--font-body, 'Montserrat', sans-serif); transition: border-color 0.2s, transform 0.2s; } .hrev-card:hover { border-color: rgba(201,168,76,0.25); transform: translateY(-2px); } .hrev-stars { color: #c9a84c; font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; } .hrev-text { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.65; margin-bottom: 14px; font-style: italic; } .hrev-footer { display: flex; align-items: center; gap: 10px; } .hrev-author { font-size: 11px; color: #888; font-weight: 600; } .hrev-verified { font-size: 10px; color: #4fc878; font-weight: 700; } /* ── BNPL button in checkout ────────────────────────────────── */ .bnpl-checkout-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(201,168,76,0.07); color: #c9a84c; border: 1px solid rgba(201,168,76,0.3); border-radius: 8px; padding: 13px 20px; font-size: 13px; font-weight: 600; font-family: var(--font-body, 'Montserrat', sans-serif); cursor: pointer; margin-bottom: 10px; letter-spacing: 0.02em; transition: background 0.2s, border-color 0.2s; } .bnpl-checkout-btn:hover { background: rgba(201,168,76,0.13); border-color: rgba(201,168,76,0.5); } .bnpl-badge { font-size: 9px; font-weight: 700; background: #c9a84c; color: #0a0a0a; border-radius: 4px; padding: 2px 6px; letter-spacing: 0.06em; text-transform: uppercase; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 600px) { .hrev-grid { grid-template-columns: 1fr; gap: 12px; } .modal-trust-strip { gap: 5px; } .modal-trust-item { font-size: 10px; padding: 4px 8px; } } /* ── POPUPS (welcome popup, courses, course detail) ── */ /* ============================================================ PARAMOUNT E-STORE — POPUPS, SEARCH & SLIDESHOW CSS (v6) ============================================================ */ /* ══════════════════════════════════════════════ POPUP OVERLAY + BASE ══════════════════════════════════════════════ */ .popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 400; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; backdrop-filter: blur(4px); } .popup-overlay.open { opacity: 1; pointer-events: all; } .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.97); background: var(--dark); border: 1px solid var(--dark3); z-index: 401; opacity: 0; pointer-events: none; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; max-height: 90vh; } .popup.open { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); } .full-popup { width: 96vw; max-width: 1280px; height: 88vh; } .popup-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 36px; border-bottom: 1px solid var(--dark2); flex-shrink: 0; position: sticky; top: 0; background: var(--dark); z-index: 2; } .popup-title { font-family: var(--font-display); font-size: 28px; font-weight: 400; letter-spacing: 0.04em; } .popup-close { background: none; border: 1px solid var(--dark3); color: var(--gray); width: 36px; height: 36px; font-size: 16px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .popup-close:hover { border-color: var(--white); color: var(--white); } .popup-body { flex: 1; overflow-y: auto; padding: 32px 36px; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; } /* ══════════════════════════════════════════════ SHOP POPUP CONTROLS ══════════════════════════════════════════════ */ .popup-shop-controls { display: flex; flex-direction: column; gap: 12px; padding: 16px 36px; border-bottom: 1px solid var(--dark2); flex-shrink: 0; background: var(--dark); } .popup-search-mini-wrap { position: relative; display: flex; align-items: center; } .popup-search-mini-wrap svg { position: absolute; left: 14px; color: var(--gray); pointer-events: none; } .popup-search-mini-wrap input { width: 100%; background: var(--dark2); border: 1px solid var(--dark3); color: var(--white); padding: 12px 16px 12px 44px; font-family: var(--font-body); font-size: 13px; outline: none; transition: border-color 0.2s; max-width: 400px; } .popup-search-mini-wrap input:focus { border-color: var(--gray); } .popup-search-mini-wrap input::placeholder { color: var(--gray); } .popup-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; } .filter-btn { background: transparent; border: 1px solid var(--dark3); color: var(--gray); padding: 7px 16px; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); white-space: nowrap; } .filter-btn:hover { border-color: var(--light-gray); color: var(--white); } .filter-btn.active { background: var(--white); color: var(--black); border-color: var(--white); } /* ══════════════════════════════════════════════ PRODUCTS GRIDS (in popups) ══════════════════════════════════════════════ */ .popup-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px; } .popup-empty { grid-column: 1 / -1; text-align: center; padding: 80px; color: var(--gray); font-size: 14px; } .popup-empty-link { background: none; border: none; color: var(--light-gray); text-decoration: underline; cursor: pointer; font-family: var(--font-body); font-size: 14px; } /* Product Card */ .product-card { background: var(--dark2); border: 1px solid var(--dark3); cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; animation: fadeUp 0.4s ease both; } .product-card:hover { background: var(--dark3); border-color: var(--mid); } .product-card:hover .product-img { transform: scale(1.04); } .product-badge { position: absolute; top: 14px; left: 14px; background: var(--white); color: var(--black); font-size: 9px; font-weight: 700; letter-spacing: 0.15em; padding: 4px 10px; text-transform: uppercase; z-index: 1; } .product-img-wrap { width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--dark3); border-bottom: 1px solid var(--dark3); } .product-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } /* Slideshow wrapper for product cards */ .product-slideshow { width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--dark3); border-bottom: 1px solid var(--dark3); position: relative; } .product-slideshow .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; } .product-slideshow .slide.active { opacity: 1; } .product-slideshow .slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-slideshow-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; } .product-slideshow-dots .dot { width: 5px; height: 5px; background: rgba(255,255,255,0.4); border-radius: 50%; cursor: pointer; transition: background 0.2s; } .product-slideshow-dots .dot.active { background: var(--white); } .product-info { padding: 20px; } .product-category { font-size: 9px; color: var(--gray); letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 6px; } .product-name { font-size: 14px; font-weight: 500; letter-spacing: 0.03em; margin-bottom: 8px; line-height: 1.35; } .product-desc { font-size: 11px; color: var(--gray); line-height: 1.7; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-footer { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .product-price { font-family: var(--font-display); font-size: 22px; font-weight: 300; } .product-stock { font-size: 9px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; } .product-stock.in-stock { color: #5a9a5a; } .product-stock.limited { color: #c4a240; } .product-stock.out-of-stock { color: #9a4a4a; } /* Stock quantity count */ .product-stock-qty { display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; padding: 3px 8px; border-radius: 2px; } .product-stock-qty.in-stock { background: rgba(90,154,90,0.12); color: #5a9a5a; border: 1px solid rgba(90,154,90,0.25); } .product-stock-qty.limited { background: rgba(196,162,64,0.12); color: #c4a240; border: 1px solid rgba(196,162,64,0.25); } .product-stock-qty.out-of-stock { background: rgba(154,74,74,0.12); color: #9a4a4a; border: 1px solid rgba(154,74,74,0.25); } .card-actions { display: flex; gap: 8px; padding: 0 20px 20px; } .btn-add-cart { flex: 1; background: var(--white); color: var(--black); border: none; padding: 12px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .btn-add-cart:hover { background: var(--off-white); } .btn-add-cart:disabled { background: var(--mid); color: var(--gray); cursor: not-allowed; } .btn-view-more { background: transparent; color: var(--gray); border: 1px solid var(--dark3); padding: 12px 16px; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn-view-more:hover { border-color: var(--gray); color: var(--white); } /* ══════════════════════════════════════════════ CATEGORIES POPUP GRID ══════════════════════════════════════════════ */ .popup-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px; } .popup-cat-card { background: var(--dark2); border: 1px solid var(--dark3); padding: 28px 24px; cursor: pointer; transition: var(--transition); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; animation: fadeUp 0.35s ease both; position: relative; overflow: hidden; } .popup-cat-card:hover { background: var(--dark3); border-color: var(--mid); } .popup-cat-card:hover .popup-cat-arrow { transform: translateX(6px); opacity: 1; } /* Age-restricted category card */ .popup-cat-age-restricted { border-color: rgba(231,76,60,0.35) !important; } .popup-cat-age-restricted:hover { border-color: rgba(231,76,60,0.75) !important; background: rgba(231,76,60,0.07); } .popup-cat-age-restricted .popup-cat-count { color: #e74c3c; font-weight: 600; } .popup-cat-lock { display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); font-size: 28px; line-height: 1; } .popup-cat-img-wrap { width: 64px; height: 64px; overflow: hidden; background: var(--dark3); border: 1px solid var(--dark2); flex-shrink: 0; } .popup-cat-img { width: 100%; height: 100%; object-fit: cover; display: block; } .popup-cat-name { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); line-height: 1.3; } .popup-cat-desc { font-size: 11px; color: var(--gray); line-height: 1.5; } .popup-cat-count { font-size: 10px; color: var(--gray); letter-spacing: 0.1em; } .popup-cat-arrow { position: absolute; bottom: 20px; right: 20px; font-size: 20px; color: var(--gray); opacity: 0.5; transition: transform 0.3s ease, opacity 0.3s ease; } /* ══════════════════════════════════════════════ SEARCH POPUP (Enhanced) ══════════════════════════════════════════════ */ .search-popup { width: 92vw; max-width: 900px; max-height: 88vh; } .search-bar-wrap { position: relative; display: flex; align-items: center; padding: 20px 36px; border-bottom: 1px solid var(--dark2); flex-shrink: 0; } .search-bar-icon { position: absolute; left: 52px; color: var(--gray); pointer-events: none; } .search-bar-input { width: 100%; background: transparent; border: none; color: var(--white); padding: 8px 40px 8px 44px; font-family: var(--font-body); font-size: 18px; outline: none; letter-spacing: 0.02em; } .search-bar-input::placeholder { color: var(--gray); font-size: 16px; } .search-bar-clear { background: none; border: none; color: var(--gray); font-size: 18px; cursor: pointer; padding: 4px; transition: color 0.2s; position: absolute; right: 36px; display: none; align-items: center; justify-content: center; } .search-bar-clear:hover { color: var(--white); } /* Search Filters Section */ .search-filters { padding: 16px 36px; border-bottom: 1px solid var(--dark2); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex-shrink: 0; background: var(--dark); } .search-filter-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); white-space: nowrap; flex-shrink: 0; } .search-cat-filters { display: flex; gap: 6px; flex-wrap: wrap; } .search-cat-btn { background: transparent; border: 1px solid var(--dark3); color: var(--gray); padding: 5px 14px; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: var(--transition); white-space: nowrap; } .search-cat-btn:hover { border-color: var(--light-gray); color: var(--white); } .search-cat-btn.active { background: var(--white); color: var(--black); border-color: var(--white); } /* Search Advanced Filters */ .search-advanced-row { padding: 12px 36px; border-bottom: 1px solid var(--dark2); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; flex-shrink: 0; background: rgba(24,24,24,0.8); } .search-adv-label { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); white-space: nowrap; } .search-adv-select { background: var(--dark2); border: 1px solid var(--dark3); color: var(--light-gray); padding: 6px 12px; font-family: var(--font-body); font-size: 11px; outline: none; cursor: pointer; min-width: 120px; } .search-adv-select option { background: var(--dark); } .search-price-range { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--gray); } .search-price-input { background: var(--dark2); border: 1px solid var(--dark3); color: var(--white); padding: 6px 10px; font-family: var(--font-body); font-size: 11px; outline: none; width: 110px; } .search-price-input::placeholder { color: var(--gray); } .search-apply-btn { background: var(--white); color: var(--black); border: none; padding: 7px 18px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .search-apply-btn:hover { background: var(--off-white); } .search-clear-all-btn { background: transparent; color: var(--gray); border: 1px solid var(--dark3); padding: 7px 14px; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .search-clear-all-btn:hover { color: var(--white); border-color: var(--gray); } /* Search Results */ .search-results-wrap { flex: 1; overflow-y: auto; padding: 24px 36px; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; } .search-placeholder { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 60px; color: var(--gray); text-align: center; } .search-placeholder svg { opacity: 0.2; } .search-placeholder p { font-size: 14px; letter-spacing: 0.05em; } .search-none { text-align: center; padding: 60px; } .search-none p { font-size: 15px; color: var(--light-gray); margin-bottom: 8px; } .search-none-sub { font-size: 12px; color: var(--gray); } .search-count { font-size: 12px; color: var(--gray); letter-spacing: 0.05em; margin-bottom: 20px; } .search-count strong { color: var(--white); } .search-results-grid { display: flex; flex-direction: column; gap: 2px; } .search-result-card { background: var(--dark2); border: 1px solid var(--dark3); display: flex; gap: 20px; align-items: center; padding: 16px 20px; cursor: pointer; transition: var(--transition); animation: fadeUp 0.3s ease both; } .search-result-card:hover { background: var(--dark3); border-color: var(--mid); } .src-img-wrap { width: 72px; height: 72px; overflow: hidden; background: var(--dark3); border: 1px solid var(--dark2); flex-shrink: 0; } .src-img { width: 100%; height: 100%; object-fit: cover; display: block; } .src-info { flex: 1; min-width: 0; } .src-badge { display: inline-block; background: var(--white); color: var(--black); font-size: 8px; font-weight: 700; letter-spacing: 0.15em; padding: 2px 8px; text-transform: uppercase; margin-bottom: 4px; } .src-cat { font-size: 9px; color: var(--gray); letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 4px; } .src-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .src-price { font-family: var(--font-display); font-size: 20px; font-weight: 300; } .src-stock { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 4px; } .src-stock.in-stock { color: #5a9a5a; } .src-stock.limited { color: #c4a240; } .src-stock.out-of-stock { color: #9a4a4a; } .src-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } /* ══════════════════════════════════════════════ HERO SEARCH SECTION (Let-down/Dropdown style) ══════════════════════════════════════════════ */ .hero-search-section { background: var(--dark); border-top: 1px solid var(--dark2); border-bottom: 1px solid var(--dark2); padding: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; max-height: 0; opacity: 0; } .hero-search-section.open { max-height: 600px; opacity: 1; } .hero-search-inner { padding: 36px 48px; } .hero-search-title { font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gray); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .hero-search-title::before, .hero-search-title::after { content: ''; flex: 1; height: 1px; background: var(--dark2); } .hero-search-main { display: flex; gap: 12px; margin-bottom: 20px; } .hero-search-input-wrap { position: relative; flex: 1; } .hero-search-input-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--gray); pointer-events: none; } .hero-search-input { width: 100%; background: var(--black); border: 1px solid var(--dark3); border-bottom: 2px solid var(--white); color: var(--white); padding: 16px 16px 16px 48px; font-family: var(--font-body); font-size: 16px; outline: none; transition: border-color 0.2s; } .hero-search-input::placeholder { color: var(--gray); } .hero-search-input:focus { border-bottom-color: var(--off-white); } .hero-search-go-btn { background: var(--white); color: var(--black); border: none; padding: 16px 32px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: var(--transition); white-space: nowrap; } .hero-search-go-btn:hover { background: var(--off-white); } /* Filter chips */ .hero-search-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .hero-filter-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .hero-filter-label { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); white-space: nowrap; } .hero-filter-chip { background: transparent; border: 1px solid var(--dark3); color: var(--gray); padding: 5px 14px; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .hero-filter-chip:hover { border-color: var(--gray); color: var(--light-gray); } .hero-filter-chip.active { background: var(--white); color: var(--black); border-color: var(--white); } .hero-search-quick-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px; max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; } .hero-search-quick-item { background: var(--dark2); border: 1px solid var(--dark3); display: flex; gap: 12px; align-items: center; padding: 12px; cursor: pointer; transition: var(--transition); animation: fadeUp 0.2s ease both; } .hero-search-quick-item:hover { background: var(--dark3); } .hsq-img-wrap { width: 44px; height: 44px; overflow: hidden; background: var(--dark3); flex-shrink: 0; } .hsq-img { width: 100%; height: 100%; object-fit: cover; display: block; } .hsq-info { flex: 1; min-width: 0; } .hsq-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .hsq-price { font-family: var(--font-display); font-size: 16px; font-weight: 300; } .hero-search-no-results { grid-column: 1/-1; text-align: center; padding: 32px; color: var(--gray); font-size: 13px; } /* Search trigger bar */ .search-trigger-bar { background: var(--dark2); border: none; border-bottom: 2px solid var(--dark2); width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 48px; cursor: text; transition: border-color 0.3s ease; text-align: left; } .search-trigger-bar:hover, .search-trigger-bar:focus { border-bottom-color: var(--gray); outline: none; } .search-trigger-bar svg { color: var(--gray); flex-shrink: 0; } .search-trigger-text { flex: 1; font-family: var(--font-body); font-size: 14px; color: var(--gray); letter-spacing: 0.04em; } .search-trigger-tags { display: flex; gap: 6px; flex-shrink: 0; } .search-trigger-tag { font-size: 9px; color: var(--gray); border: 1px solid var(--dark3); padding: 3px 10px; letter-spacing: 0.1em; text-transform: uppercase; } /* ══════════════════════════════════════════════ CONTACT POPUP ══════════════════════════════════════════════ */ .contact-popup { width: 92vw; max-width: 860px; } .contact-popup-body { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; padding: 40px 36px; } .contact-info-side { display: flex; flex-direction: column; gap: 20px; } .contact-block { display: flex; gap: 16px; align-items: flex-start; padding: 16px; background: var(--dark2); border: 1px solid var(--dark3); transition: var(--transition); } .contact-block:hover { background: var(--dark3); } .contact-block-icon { font-size: 20px; flex-shrink: 0; } .contact-block-label { font-size: 9px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gray); margin-bottom: 4px; } .contact-block-value { font-size: 13px; color: var(--white); } .contact-block-value a { color: var(--white); text-decoration: none; } .contact-block-value a:hover { color: var(--off-white); } .contact-social-row { display: flex; gap: 8px; flex-wrap: wrap; } .contact-form-side { } .contact-form-side h4 { font-family: var(--font-display); font-size: 24px; font-weight: 400; margin-bottom: 24px; } /* ══════════════════════════════════════════════ MOBILE NAV DRAWER ══════════════════════════════════════════════ */ .mob-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 290; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .mob-overlay.open { opacity: 1; pointer-events: all; } .mob-drawer { position: fixed; top: 0; left: 0; width: 88vw; max-width: 340px; height: 100vh; height: 100dvh; background: var(--dark); border-right: 1px solid var(--dark2); z-index: 300; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; } .mob-drawer.open { transform: translateX(0); } .mob-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 20px; border-bottom: 1px solid var(--dark2); flex-shrink: 0; } .mob-close { background: none; border: none; color: var(--gray); font-size: 18px; cursor: pointer; padding: 4px; transition: color 0.2s; } .mob-close:hover { color: var(--white); } .mob-search-wrap { padding: 16px 24px; border-bottom: 1px solid var(--dark2); } .mob-search-input { width: 100%; background: var(--dark2); border: 1px solid var(--dark3); color: var(--white); padding: 12px 16px; font-family: var(--font-body); font-size: 13px; outline: none; } .mob-search-input::placeholder { color: var(--gray); } .mob-search-results { margin-top: 8px; } .mob-search-item { display: flex; gap: 12px; align-items: center; padding: 10px; background: var(--dark2); border: 1px solid var(--dark3); cursor: pointer; transition: var(--transition); margin-bottom: 2px; } .mob-search-item:hover { background: var(--dark3); } .mob-search-img { width: 40px; height: 40px; overflow: hidden; background: var(--dark3); flex-shrink: 0; } .mob-sr-img { width: 100%; height: 100%; object-fit: cover; display: block; } .mob-search-name { font-size: 12px; font-weight: 500; margin-bottom: 2px; } .mob-search-price { font-family: var(--font-display); font-size: 14px; font-weight: 300; } .mob-search-none { padding: 12px; font-size: 12px; color: var(--gray); text-align: center; } .mob-nav-links { display: flex; flex-direction: column; padding: 16px 0; flex: 1; } .mob-nav-links button { background: none; border: none; border-bottom: 1px solid var(--dark2); color: var(--light-gray); font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; padding: 18px 24px; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 14px; transition: var(--transition); } .mob-nav-links button:hover { background: var(--dark2); color: var(--white); } .mob-nav-link-a { background: none; border: none; border-bottom: 1px solid var(--dark2); color: var(--light-gray); font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; padding: 18px 24px; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 14px; transition: var(--transition); text-decoration: none; } .mob-nav-link-a:hover { background: var(--dark2); color: var(--white); } .mob-nav-icon { font-size: 16px; opacity: 0.6; } .mob-cart-badge { background: var(--white); color: var(--black); font-size: 9px; font-weight: 700; padding: 2px 7px; margin-left: auto; } .mob-drawer-foot { padding: 20px 24px; border-top: 1px solid var(--dark2); font-size: 11px; color: var(--gray); letter-spacing: 0.1em; } /* ══════════════════════════════════════════════ NAV SEARCH BUTTON ══════════════════════════════════════════════ */ .nav-search-btn { background: none; border: 1px solid var(--dark3); color: var(--gray); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); } .nav-search-btn:hover { border-color: var(--gray); color: var(--white); } /* ══════════════════════════════════════════════ MODAL GALLERY (for product detail) ══════════════════════════════════════════════ */ .modal-gallery { width: 100%; } .modal-gallery-main { width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--dark3); margin-bottom: 8px; } .modal-gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; } .modal-gallery-thumbs { display: flex; gap: 6px; flex-wrap: wrap; } .gallery-thumb { width: 60px; height: 60px; overflow: hidden; background: var(--dark3); border: 1px solid var(--dark3); cursor: pointer; transition: border-color 0.2s; flex-shrink: 0; } .gallery-thumb.active { border-color: var(--white); } .gallery-thumb:hover { border-color: var(--gray); } .thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Slideshow in modal */ .modal-slideshow { width: 100%; position: relative; background: var(--dark3); overflow: hidden; aspect-ratio: 1; } .modal-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; } .modal-slide.active { opacity: 1; } .modal-slide img, .modal-slide video { width: 100%; height: 100%; object-fit: contain; display: block; } .modal-slideshow-nav { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; } .modal-slideshow-nav .sdot { width: 6px; height: 6px; background: rgba(255,255,255,0.35); border-radius: 50%; cursor: pointer; transition: background 0.2s; } .modal-slideshow-nav .sdot.active { background: var(--white); } .modal-slideshow-prev, .modal-slideshow-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2); color: var(--white); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; font-size: 16px; transition: background 0.2s; } .modal-slideshow-prev { left: 10px; } .modal-slideshow-next { right: 10px; } .modal-slideshow-prev:hover, .modal-slideshow-next:hover { background: rgba(0,0,0,0.8); } .modal-product-img-wrap { width: 100%; } .modal-product-img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; background: var(--dark3); } .modal-media-wrap { width: 100%; } .modal-video { width: 100%; display: block; background: var(--black); } .modal-badge { display: inline-block; background: var(--white); color: var(--black); font-size: 9px; font-weight: 700; letter-spacing: 0.2em; padding: 4px 12px; text-transform: uppercase; margin-bottom: 14px; } .modal-share-btn { background: transparent; color: var(--gray); border: 1px solid var(--dark3); padding: 18px 24px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .modal-share-btn:hover { border-color: var(--gray); color: var(--white); } /* ══════════════════════════════════════════════ CART IMAGE CLASSES ══════════════════════════════════════════════ */ .cart-item-img-wrap { width: 64px; height: 64px; overflow: hidden; background: var(--dark3); border: 1px solid var(--dark2); flex-shrink: 0; } .cart-img { width: 100%; height: 100%; object-fit: cover; display: block; } .checkout-summary-img-wrap { width: 52px; height: 52px; overflow: hidden; background: var(--dark3); border: 1px solid var(--dark2); flex-shrink: 0; } .checkout-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ══════════════════════════════════════════════ FEATURED SECTION (inline homepage) ══════════════════════════════════════════════ */ .section { padding: 80px 48px; } .section-header { display: flex; align-items: center; gap: 20px; margin-bottom: 48px; } .section-line { flex: 1; height: 1px; background: var(--dark2); } .section-title { font-family: var(--font-display); font-size: 36px; font-weight: 300; white-space: nowrap; letter-spacing: 0.06em; } .featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px; } .section-cta-row { text-align: center; margin-top: 40px; } .see-all-btn { background: transparent; color: var(--gray); border: 1px solid var(--dark3); padding: 16px 48px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .see-all-btn:hover { border-color: var(--white); color: var(--white); } /* ══════════════════════════════════════════════ CATEGORIES SECTION (inline homepage) ══════════════════════════════════════════════ */ .categories-section { padding: 80px 48px; } .container { max-width: 1400px; margin: 0 auto; } .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px; } .cat-item { background: var(--dark2); border: 1px solid var(--dark3); padding: 24px 20px; cursor: pointer; transition: var(--transition); text-align: center; animation: fadeUp 0.4s ease both; } .cat-item:hover { background: var(--dark3); border-color: var(--mid); } .cat-item-img-wrap { width: 60px; height: 60px; overflow: hidden; background: var(--dark3); border: 1px solid var(--dark2); margin: 0 auto 14px; } .cat-img { width: 100%; height: 100%; object-fit: cover; display: block; } .cat-item-name { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; } .cat-item-count { font-size: 11px; color: var(--gray); } /* ══════════════════════════════════════════════ ADMIN PRODUCT FORM MEDIA (MS-Word style) ══════════════════════════════════════════════ */ .product-form-modal { max-width: 1000px !important; width: 97vw !important; max-height: 94vh !important; } .pf-body { display: grid; grid-template-columns: 380px 1fr; gap: 0; padding: 0 !important; } .pf-media-col { padding: 32px; border-right: 1px solid var(--dark2); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; background: var(--black); } .pf-info-col { padding: 32px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; } .pf-media-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .pf-section-title { font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--white); } .pf-section-hint { font-size: 10px; color: var(--gray); letter-spacing: 0.08em; } .pf-divider-label { text-align: center; font-size: 10px; color: var(--gray); letter-spacing: 0.1em; margin: 14px 0 10px; position: relative; } .pf-url-row { display: flex; gap: 8px; } .pf-url-input { flex: 1; background: var(--dark2); border: 1px solid var(--dark3); color: var(--white); padding: 10px 14px; font-family: var(--font-body); font-size: 12px; outline: none; } .pf-url-input::placeholder { color: var(--gray); } .pf-url-add-btn { background: var(--dark3); color: var(--light-gray); border: 1px solid var(--mid); padding: 10px 16px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .pf-url-add-btn:hover { background: var(--mid); color: var(--white); } /* Dropzones */ .media-dropzone { border: 2px dashed var(--dark3); background: var(--dark2); transition: border-color 0.2s, background 0.2s; cursor: pointer; } .media-dropzone:hover, .media-dropzone.drag-over { border-color: var(--gray); background: var(--dark3); } .dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; text-align: center; } .dropzone-icon { color: var(--gray); opacity: 0.6; } .dropzone-text { font-size: 13px; color: var(--light-gray); letter-spacing: 0.04em; } .dropzone-sub { font-size: 11px; color: var(--gray); } .dropzone-btn { background: var(--dark3); color: var(--light-gray); border: 1px solid var(--mid); padding: 10px 24px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); } .dropzone-btn:hover { background: var(--mid); color: var(--white); } .dropzone-formats { font-size: 10px; color: var(--gray); letter-spacing: 0.08em; } .dropzone-preview-img { width: 100%; max-height: 160px; object-fit: contain; display: block; background: var(--black); } /* Media gallery grid */ .media-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; margin-bottom: 8px; } .media-thumb-wrap { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--dark3); border: 1px solid var(--dark2); } .media-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } .media-primary-badge { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.75); color: var(--white); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-align: center; padding: 3px; text-transform: uppercase; } .media-thumb-remove { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.7); border: none; color: var(--white); width: 20px; height: 20px; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .media-thumb-remove:hover { background: rgba(180,0,0,0.8); } .media-gallery-hint { font-size: 10px; color: var(--gray); letter-spacing: 0.05em; } /* Video preview */ .admin-video-preview { width: 100%; display: block; max-height: 180px; background: var(--black); } .remove-media-btn { background: transparent; color: #9a4a4a; border: 1px solid #3a1a1a; padding: 8px 16px; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: var(--transition); margin-top: 8px; width: 100%; } .remove-media-btn:hover { background: #3a1a1a; } /* MS-Word-style media upload toolbar */ .pf-media-toolbar { display: flex; gap: 4px; background: var(--dark3); border: 1px solid var(--mid); border-bottom: none; padding: 6px 8px; flex-wrap: wrap; } .pf-media-tool-btn { background: none; border: none; color: var(--gray); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; padding: 6px 12px; cursor: pointer; transition: var(--transition); text-transform: uppercase; white-space: nowrap; } .pf-media-tool-btn:hover { background: var(--mid); color: var(--white); } .pf-media-tool-sep { width: 1px; background: var(--mid); margin: 4px 2px; } /* Rich text editor */ .rte-toolbar { display: flex; gap: 2px; background: var(--dark3); border: 1px solid var(--mid); border-bottom: none; padding: 6px 8px; flex-wrap: wrap; } .rte-btn { background: none; border: 1px solid transparent; color: var(--gray); padding: 5px 10px; font-family: var(--font-body); font-size: 12px; cursor: pointer; transition: var(--transition); min-width: 32px; text-align: center; } .rte-btn:hover { background: var(--mid); color: var(--white); border-color: var(--mid); } .rte-sep { width: 1px; background: var(--mid); margin: 4px 2px; } .rte-editor { width: 100%; min-height: 120px; background: var(--black); border: 1px solid var(--dark3); color: var(--white); padding: 14px 18px; font-family: var(--font-body); font-size: 13px; line-height: 1.8; outline: none; } .rte-editor:focus { border-color: var(--gray); } .rte-editor:empty::before { content: attr(data-placeholder); color: var(--gray); } /* Slideshow admin tool */ .slideshow-order-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; } .slideshow-order-item { display: flex; align-items: center; gap: 10px; background: var(--dark2); border: 1px solid var(--dark3); padding: 8px 10px; cursor: grab; transition: var(--transition); } .slideshow-order-item:hover { background: var(--dark3); } .slideshow-order-item.dragging { opacity: 0.5; } .soi-handle { color: var(--gray); font-size: 14px; cursor: grab; user-select: none; } .soi-img { width: 40px; height: 40px; object-fit: cover; display: block; background: var(--dark3); } .soi-label { flex: 1; font-size: 11px; color: var(--light-gray); letter-spacing: 0.05em; } .soi-num { font-size: 10px; color: var(--gray); min-width: 20px; text-align: right; } /* Category form modal */ .cat-form-modal { max-width: 580px; } /* ══════════════════════════════════════════════ INLINE SEARCH SECTION (below hero / dropdown) ══════════════════════════════════════════════ */ .search-section { background: var(--dark); border-bottom: 1px solid var(--dark2); padding: 0 48px; overflow: hidden; } .search-section-inner { padding: 32px 0; } .search-section-grid { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; margin-bottom: 16px; } /* ══════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════ */ @media (max-width: 900px) { .full-popup { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; top: 0; left: 0; transform: none; } .full-popup.open { transform: none; } .popup-body { padding: 20px; } .popup-head { padding: 16px 20px; } .popup-shop-controls { padding: 12px 20px; } .popup-products-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .popup-cats-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .contact-popup-body { grid-template-columns: 1fr; gap: 24px; } .search-popup { width: 100vw; height: 100dvh; max-height: 100dvh; } .search-filters, .search-advanced-row { padding: 12px 20px; } .search-results-wrap { padding: 16px 20px; } .hero-search-inner { padding: 24px; } .hero-search-main { flex-direction: column; } .pf-body { grid-template-columns: 1fr; } .pf-media-col { border-right: none; border-bottom: 1px solid var(--dark2); } .search-section { padding: 0 24px; } .search-bar-wrap { padding: 16px 20px; } } @media (max-width: 600px) { .popup-products-grid { grid-template-columns: repeat(2, 1fr); } .popup-cats-grid { grid-template-columns: 1fr 1fr; } .hero-search-filters { gap: 4px; } .hero-filter-chip { padding: 4px 10px; font-size: 9px; } .search-section-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════ WHOLESALE POPUP STYLES (shared) ══════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ POPUP MOBILE IMPROVEMENTS ═══════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Full popups go edge-to-edge */ .full-popup { width: 100vw; height: 100dvh; max-height: 100dvh; top: 0; left: 0; transform: translateY(100%); border-radius: 0; } .full-popup.open { transform: translateY(0); } .search-popup { width: 100vw; height: 100dvh; max-height: 100dvh; top: 0; left: 0; transform: translateY(100%); border-radius: 0; } .search-popup.open { transform: translateY(0); } .contact-popup { width: 100vw; max-height: 100dvh; top: 0; left: 0; transform: translateY(100%); border-radius: 0; overflow-y: auto; } .contact-popup.open { transform: translateY(0); } /* Popup head */ .popup-head { padding: 16px 20px; } .popup-title { font-size: 20px; } .popup-body { padding: 16px 20px; } .popup-shop-controls { padding: 12px 20px; gap: 10px; } /* Filter bar wraps on small screens */ .popup-filter-bar { flex-wrap: wrap; gap: 4px; padding: 0 0 8px; } .filter-btn { font-size: 9px; padding: 6px 10px; } /* Product grid */ .popup-products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px; } /* Category grid */ .popup-cats-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; } .popup-cat-card { padding: 16px; } .popup-cat-img-wrap { height: 80px; } /* Search popup */ .search-bar-wrap { padding: 14px 20px; } .search-bar-input { font-size: 16px; } /* prevents iOS zoom */ .search-filters { padding: 10px 20px; } .search-cat-filters { gap: 4px; flex-wrap: wrap; } .search-cat-btn { font-size: 9px; padding: 5px 10px; } .search-results-grid { grid-template-columns: 1fr; } .search-result-card { grid-template-columns: 60px 1fr; gap: 12px; padding: 14px 0; } .src-img-wrap { width: 60px; height: 60px; } .src-actions { grid-column: 1 / -1; } /* Contact popup */ .contact-popup-body { grid-template-columns: 1fr; gap: 0; } .contact-form-side { padding-top: 20px; } /* Policy popups */ .policy-popup { width: 100vw; max-height: 100dvh; top: 0; left: 0; transform: translateY(100%) scale(1); border-radius: 0; } .policy-popup.open { transform: translateY(0) scale(1); } .policy-popup-body { padding: 20px; } .policy-popup-head { padding: 16px 20px; } .policy-popup-foot { padding: 16px 20px; } } @media (max-width: 480px) { .popup-products-grid { grid-template-columns: 1fr 1fr; } .popup-cats-grid { grid-template-columns: 1fr 1fr; } .popup-cat-name { font-size: 11px; } .filter-btn { font-size: 9px; padding: 5px 8px; letter-spacing: 0.08em; } /* Search */ .search-bar-input { font-size: 16px; padding: 8px 8px 8px 40px; } .search-result-card { gap: 10px; } /* Hero search */ .hero-search-section { padding: 0; } .hero-search-inner { padding: 16px; } .search-adv-select, .search-price-input { font-size: 12px; } } /* ═══════════════════════════════════════════════════════ NAV SEARCH DROPDOWN ═══════════════════════════════════════════════════════ */ .nav-search-overlay { position: fixed; inset: 0; z-index: 498; background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; backdrop-filter: blur(3px); } .nav-search-overlay.open { opacity: 1; pointer-events: all; } .nav-search-dropdown { position: fixed; top: var(--nav-h, 72px); left: 0; right: 0; z-index: 499; background: var(--dark); border-bottom: 1px solid var(--dark2); box-shadow: 0 24px 64px rgba(0,0,0,0.7); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease; max-height: calc(100vh - var(--nav-h, 72px)); overflow-y: auto; } .nav-search-dropdown.open { transform: translateY(0); opacity: 1; pointer-events: all; } .nav-search-drop-inner { max-width: 860px; margin: 0 auto; padding: 24px 32px 28px; } /* Search bar row */ .nav-search-drop-bar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--dark3); border-bottom: 2px solid var(--white); background: var(--black); padding: 0 16px; margin-bottom: 16px; } .nav-search-drop-bar svg { color: var(--gray); flex-shrink: 0; } .nav-search-drop-input { flex: 1; background: transparent; border: none; color: var(--white); font-family: var(--font-body); font-size: 16px; padding: 16px 0; outline: none; letter-spacing: 0.02em; } .nav-search-drop-input::placeholder { color: var(--gray); } .nav-search-drop-clear { background: none; border: none; color: var(--gray); font-size: 14px; cursor: pointer; padding: 4px; line-height: 1; transition: color 0.2s; flex-shrink: 0; } .nav-search-drop-clear:hover { color: var(--white); } .nav-search-drop-go { background: var(--white); color: var(--black); border: none; padding: 10px 20px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: var(--transition); white-space: nowrap; flex-shrink: 0; } .nav-search-drop-go:hover { background: var(--off-white); } /* Category filter chips */ .nav-search-drop-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } /* Results grid */ .nav-search-drop-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px; max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; } .nav-search-drop-hint { grid-column: 1 / -1; text-align: center; padding: 32px 20px; color: var(--gray); font-size: 13px; letter-spacing: 0.05em; } .nav-drop-item { background: var(--dark2); border: 1px solid var(--dark3); display: flex; gap: 12px; align-items: center; padding: 12px; cursor: pointer; transition: background 0.15s; animation: fadeUp 0.2s ease both; } .nav-drop-item:hover { background: var(--dark3); } .nav-drop-img-wrap { width: 48px; height: 48px; overflow: hidden; background: var(--dark3); flex-shrink: 0; } .nav-drop-img { width: 100%; height: 100%; object-fit: cover; display: block; } .nav-drop-info { flex: 1; min-width: 0; } .nav-drop-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .nav-drop-cat { font-size: 9px; color: var(--gray); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 3px; } .nav-drop-price { font-family: var(--font-display); font-size: 15px; font-weight: 300; } .nav-drop-no-results { grid-column: 1 / -1; text-align: center; padding: 28px 20px; color: var(--gray); font-size: 13px; } /* Active state on nav search icon */ .nav-search-btn.active { color: var(--white); opacity: 1; } .nav-search-btn.active svg { stroke: var(--white); } @media (max-width: 900px) { .nav-search-drop-inner { padding: 18px 20px 22px; } .nav-search-drop-results { grid-template-columns: 1fr 1fr; max-height: 260px; } .nav-search-drop-bar { padding: 0 12px; } .nav-search-drop-go { padding: 8px 14px; font-size: 9px; } } @media (max-width: 480px) { .nav-search-drop-inner { padding: 14px 16px 18px; } .nav-search-drop-input { font-size: 16px; padding: 14px 0; } .nav-search-drop-results { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════ PRODUCT SHARE PANEL ═══════════════════════════════════════════════════════ */ .modal-serial { font-size: 9px; color: var(--gray); letter-spacing: 0.2em; font-weight: 600; } .product-share-panel { margin-top: 16px; background: var(--dark2); border: 1px solid var(--dark3); padding: 16px; animation: fadeUp 0.2s ease both; } .psp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .psp-title { font-size: 9px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gray); } .psp-close { background: none; border: none; color: var(--gray); font-size: 14px; cursor: pointer; line-height: 1; padding: 2px 4px; transition: color 0.2s; } .psp-close:hover { color: var(--white); } .psp-serial-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .psp-serial-label { font-size: 9px; color: var(--gray); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; } .psp-serial { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--white); font-family: monospace; background: var(--dark3); padding: 3px 10px; } .psp-link-row { display: flex; gap: 6px; margin-bottom: 12px; } .psp-link-input { flex: 1; background: var(--black); border: 1px solid var(--dark3); color: var(--light-gray); font-family: monospace; font-size: 10px; padding: 8px 10px; outline: none; cursor: text; min-width: 0; } .psp-copy-btn { background: var(--white); color: var(--black); border: none; padding: 8px 16px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: var(--transition); white-space: nowrap; flex-shrink: 0; } .psp-copy-btn:hover { background: var(--off-white); } .psp-channels { display: flex; gap: 6px; flex-wrap: wrap; } .psp-channel { display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--dark3); text-decoration: none; transition: var(--transition); background: none; color: var(--light-gray); } .psp-channel:hover { color: var(--white); border-color: var(--mid); } .psp-wa { color: #4caf50; border-color: rgba(76,175,80,0.3); } .psp-wa:hover { background: rgba(76,175,80,0.1); border-color: #4caf50; color: #4caf50; } .psp-x { color: var(--light-gray); } .psp-x:hover { background: var(--dark3); color: var(--white); } .psp-copy2 { color: var(--gray); } .psp-copy2:hover { color: var(--white); border-color: var(--mid); } @media (max-width: 480px) { .psp-channels { flex-direction: column; } .psp-channel { justify-content: center; } } /* ═══════════════════════════════════════════════════════ INLINE PRODUCT EXPAND (homepage featured grid) ═══════════════════════════════════════════════════════ */ .inline-product-expand { grid-column: 1 / -1; background: var(--dark); border: 1px solid var(--mid); overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease; position: relative; margin: 4px 0; } .inline-product-expand.ipe-open { max-height: 700px; opacity: 1; } .product-card.ipe-active { border-color: var(--mid) !important; outline: 2px solid var(--white); outline-offset: -1px; } .ipe-close { position: absolute; top: 16px; right: 20px; background: none; border: 1px solid var(--dark3); color: var(--gray); width: 32px; height: 32px; font-size: 14px; cursor: pointer; z-index: 2; transition: color 0.2s, border-color 0.2s; display: flex; align-items: center; justify-content: center; } .ipe-close:hover { color: var(--white); border-color: var(--mid); } .ipe-inner { display: flex; gap: 48px; padding: 40px 48px; } .ipe-media { flex-shrink: 0; width: 280px; } .ipe-single-img-wrap { width: 100%; aspect-ratio: 1; overflow: hidden; } .ipe-img { width: 100%; height: 100%; object-fit: cover; display: block; } .ipe-gallery-main { width: 100%; aspect-ratio: 1; overflow: hidden; margin-bottom: 8px; } .ipe-gallery-thumbs { display: flex; gap: 6px; flex-wrap: wrap; } .ipe-thumb { width: 56px; height: 56px; overflow: hidden; border: 1px solid var(--dark3); cursor: pointer; opacity: 0.6; transition: opacity 0.2s, border-color 0.2s; } .ipe-thumb.active, .ipe-thumb:hover { opacity: 1; border-color: var(--white); } .ipe-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ipe-info { flex: 1; } .ipe-meta { font-size: 10px; color: var(--gray); letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 10px; } .ipe-name { font-family: var(--font-display); font-size: clamp(24px,3vw,36px); font-weight: 300; line-height: 1.2; margin-bottom: 14px; } .ipe-price { font-family: var(--font-display); font-size: clamp(22px,2.5vw,32px); font-weight: 300; margin-bottom: 16px; } .ipe-desc { font-size: 13px; color: var(--light-gray); line-height: 1.9; margin-bottom: 32px; } .ipe-actions { display: flex; gap: 12px; flex-wrap: wrap; } .ipe-actions .modal-add-btn { flex: 1; min-width: 140px; } @media (max-width: 900px) { .ipe-inner { flex-direction: column; gap: 24px; padding: 24px 20px; } .ipe-media { width: 100%; } .inline-product-expand.ipe-open { max-height: 1100px; } } @media (max-width: 480px) { .ipe-inner { padding: 18px 16px; } .ipe-name { font-size: 22px; } .ipe-price { font-size: 20px; } .ipe-actions { flex-direction: column; } } /* ═══════════════════════════════════════════════════════ PES DIALOG SYSTEM — replaces all browser confirm/alert ═══════════════════════════════════════════════════════ */ /* ══ PES Dialog System — premium minimal ══ */ .pes-dialog-overlay { position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .pes-dialog-overlay.open { opacity: 1; pointer-events: all; } .pes-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-44%) scale(0.95); z-index: 9991; width: min(460px, 94vw); background: #0a0a0a; border: 1px solid rgba(255,255,255,0.07); border-top: 1px solid rgba(255,255,255,0.13); box-shadow: 0 50px 120px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.02); opacity: 0; pointer-events: none; transition: all 0.28s cubic-bezier(0.22,1,0.36,1); overflow: hidden; } .pes-dialog::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%); } .pes-dialog.open { transform: translate(-50%,-50%) scale(1); opacity: 1; pointer-events: all; } /* Icon strip */ .pes-dialog-icon-strip { padding: 32px 0 4px; display: flex; justify-content: center; } .pes-dialog-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; position: relative; } .pes-dialog-icon.confirm { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 0 0 8px rgba(255,255,255,0.02); } .pes-dialog-icon.danger { background: rgba(239,83,80,0.08); border: 1px solid rgba(239,83,80,0.2); box-shadow: 0 0 0 8px rgba(239,83,80,0.04); } .pes-dialog-icon.success { background: rgba(76,175,80,0.08); border: 1px solid rgba(76,175,80,0.2); box-shadow: 0 0 0 8px rgba(76,175,80,0.04); } .pes-dialog-icon.info { background: rgba(100,130,200,0.08); border: 1px solid rgba(100,130,200,0.2); box-shadow: 0 0 0 8px rgba(100,130,200,0.04); } .pes-dialog-body { padding: 22px 36px 30px; text-align: center; } .pes-dialog-title { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 400; color: #f8f8f8; margin-bottom: 10px; line-height: 1.35; letter-spacing: 0.01em; } .pes-dialog-msg { font-family: 'Montserrat', sans-serif; font-size: 12px; color: rgba(255,255,255,0.42); line-height: 1.75; margin-bottom: 0; letter-spacing: 0.02em; } .pes-dialog-detail { font-family: 'Montserrat', sans-serif; font-size: 10px; color: rgba(255,255,255,0.28); margin-top: 8px; font-style: italic; letter-spacing: 0.03em; } .pes-dialog-foot { padding: 0 36px 32px; display: flex; gap: 10px; justify-content: center; } .pes-dialog-btn { flex: 1; max-width: 170px; border: none; padding: 14px 20px; font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: all 0.18s; position: relative; overflow: hidden; } .pes-dialog-btn-confirm, .pes-dialog-btn-ok { background: #f0f0f0; color: #080808; } .pes-dialog-btn-confirm:hover, .pes-dialog-btn-ok:hover { background: #ffffff; transform: translateY(-1px); } .pes-dialog-btn-danger { background: #ef5350; color: #fff; } .pes-dialog-btn-danger:hover { background: #e53935; transform: translateY(-1px); } .pes-dialog-btn-cancel { background: none; border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.38); } .pes-dialog-btn-cancel:hover { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.75); } /* Success auto-dismiss progress bar */ .pes-dialog-progress { height: 1px; background: rgba(255,255,255,0.05); overflow: hidden; } .pes-dialog-progress-fill { height: 100%; background: linear-gradient(90deg, rgba(76,175,80,0.6), rgba(76,175,80,1)); width: 100%; transform-origin: left; animation: pesProgressShrink 2.5s linear forwards; } @keyframes pesProgressShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ── Popup share button ────────────────────────────── */ .popup-share-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--dark3); color: var(--gray); font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 14px; cursor: pointer; transition: var(--transition); white-space: nowrap; } .popup-share-btn:hover { border-color: var(--mid); color: var(--white); } /* ══════════════════════════════════════════════ CATEGORIES POPUP v2 — Two-pane with Sub-categories ══════════════════════════════════════════════ */ /* Override full-popup for cats */ .cats-popup-v2 { display: flex; flex-direction: column; overflow: hidden; } .cats-popup-v2 .popup-head { flex-shrink: 0; } /* Two-pane body */ .cats-popup-body { flex: 1; display: flex; overflow: hidden; min-height: 0; } /* ── LEFT PANE — category list ── */ .cats-left-pane { width: 320px; flex-shrink: 0; border-right: 1px solid var(--dark2); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; transition: transform 0.38s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease; } .cats-list { display: flex; flex-direction: column; padding: 8px 0; } .cats-list-item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; cursor: pointer; transition: background 0.18s ease, border-left-color 0.18s ease; border-left: 3px solid transparent; position: relative; } .cats-list-item:hover { background: var(--dark2); border-left-color: var(--mid); } .cats-list-item-active { background: var(--dark2) !important; border-left-color: var(--white) !important; } .cats-list-item-restricted { border-left-color: rgba(231,76,60,0.0); } .cats-list-item-restricted:hover { background: rgba(231,76,60,0.05); border-left-color: rgba(231,76,60,0.5); } .cats-list-item-restricted.cats-list-item-active { border-left-color: rgba(231,76,60,0.8) !important; } .cats-list-img { width: 48px; height: 48px; flex-shrink: 0; overflow: hidden; background: var(--dark3); border: 1px solid rgba(255,255,255,0.06); } .cats-list-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .cats-list-lock { display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(0,0,0,0.35); } .cats-list-info { flex: 1; min-width: 0; } .cats-list-name { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .cats-list-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; } .cats-list-count { font-family: var(--font-body); font-size: 9px; color: var(--gray); letter-spacing: 0.08em; } .cats-list-subcount { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--light-gray); background: var(--dark3); padding: 1px 6px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.07); } .cats-list-chevron { flex-shrink: 0; color: var(--gray); opacity: 0.4; transition: opacity 0.18s, transform 0.18s; display: flex; align-items: center; } .cats-list-item:hover .cats-list-chevron, .cats-list-item-active .cats-list-chevron { opacity: 1; transform: translateX(2px); } .cats-list-item-active .cats-list-chevron { color: var(--white); } /* ── RIGHT PANE ── */ .cats-right-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } /* Sub-category chips row */ .cats-subcat-row { display: none; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 14px 24px; border-bottom: 1px solid var(--dark2); flex-shrink: 0; scrollbar-width: none; align-items: center; background: rgba(0,0,0,0.2); } .cats-subcat-row::-webkit-scrollbar { display: none; } .cats-sub-chip { display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0; background: var(--dark2); border: 1px solid rgba(255,255,255,0.1); color: var(--light-gray); font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 16px; cursor: pointer; transition: all 0.2s ease; border-radius: 0; } .cats-sub-chip:hover { background: var(--dark3); border-color: var(--mid); color: var(--white); } .cats-sub-chip-active { background: var(--white) !important; border-color: var(--white) !important; color: var(--black) !important; font-weight: 700; } /* Right body — scrollable product area */ .cats-right-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 28px 28px; scrollbar-width: thin; scrollbar-color: var(--mid) transparent; } .cats-right-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; min-height: 300px; } .cats-right-ph-icon { font-size: 36px; color: var(--mid); font-family: var(--font-display); letter-spacing: -0.02em; } .cats-right-ph-text { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray); } /* Product cards grid inside right pane */ .cats-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px; animation: catsFadeIn 0.3s ease both; } @keyframes catsFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .cats-prod-card { background: var(--dark); border: 1px solid var(--dark2); display: flex; flex-direction: column; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; position: relative; overflow: hidden; } .cats-prod-card:hover { background: var(--dark2); border-color: var(--mid); } .cats-prod-img-wrap { width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--dark2); position: relative; flex-shrink: 0; } .cats-prod-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .cats-prod-card:hover .cats-prod-img { transform: scale(1.04); } .cats-prod-badge { position: absolute; top: 8px; left: 8px; background: var(--white); color: var(--black); font-family: var(--font-body); font-size: 8px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 7px; z-index: 2; } .cats-prod-info { padding: 12px 14px 8px; flex: 1; } .cats-prod-name { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--white); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cats-prod-price { font-family: var(--font-display); font-size: 15px; color: var(--white); margin-top: 6px; letter-spacing: 0.01em; } .cats-prod-stock { font-family: var(--font-body); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; } .cats-prod-stock.in-stock { color: #81c784; } .cats-prod-stock.limited { color: #ffc107; } .cats-prod-stock.out-of-stock { color: var(--gray); } .cats-prod-btn { margin: 0 14px 14px; padding: 9px; background: var(--white); color: var(--black); border: none; font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease; flex-shrink: 0; } .cats-prod-btn:hover { background: var(--off-white); } .cats-prod-btn:disabled { background: var(--dark3); color: var(--gray); cursor: not-allowed; } /* Back button */ .cat-back-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: none; border: 1px solid var(--dark3); color: var(--gray); cursor: pointer; transition: var(--transition); flex-shrink: 0; } .cat-back-btn:hover { border-color: var(--mid); color: var(--white); } /* ── RESPONSIVE ── */ @media (max-width: 900px) { .cats-left-pane { width: 260px; } .cats-prod-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } @media (max-width: 768px) { /* Mobile: full-screen single-pane with slide */ .cats-popup-body { position: relative; overflow: hidden; } .cats-left-pane { width: 100%; border-right: none; position: absolute; inset: 0; background: var(--dark); z-index: 2; transform: translateX(0); transition: transform 0.38s cubic-bezier(0.16,1,0.3,1); } .cats-left-pane.cats-pane-hidden { transform: translateX(-100%); pointer-events: none; } .cats-right-pane { width: 100%; position: absolute; inset: 0; background: var(--dark); z-index: 1; transform: translateX(100%); transition: transform 0.38s cubic-bezier(0.16,1,0.3,1); } .cats-right-pane.cats-pane-visible { transform: translateX(0); z-index: 3; } .cats-right-body { padding: 20px 16px; } .cats-prod-grid { grid-template-columns: repeat(2, 1fr); } .cats-sub-chip { padding: 6px 12px; font-size: 9px; } } @media (max-width: 480px) { .cats-prod-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; } .popup-products-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; } .cats-list-item { padding: 12px 16px; } .cats-list-img { width: 40px; height: 40px; } .cats-subcat-row { padding: 10px 16px; gap: 6px; -webkit-overflow-scrolling: touch; } .cats-sub-chip { padding: 5px 10px; font-size: 9px; } } /* ═══════════════════════════════════════════════════════════════ WELCOME POPUP — Extracted from index.php/index.html inline styles ═══════════════════════════════════════════════════════════════ */ .welcome-popup-overlay { z-index: 600; display: none; opacity: 0; transition: opacity 0.32s ease; } .welcome-popup-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.92); z-index: 601; width: min(480px, 92vw); border-radius: 6px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.7); transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.32s ease; opacity: 0; } .welcome-popup-inner { padding: 40px 36px 32px; background: #0a0a0a; position: relative; } .welcome-popup-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: rgba(255,255,255,0.35); font-size: 20px; cursor: pointer; line-height: 1; padding: 4px 8px; } .welcome-popup-emoji { font-size: 48px; text-align: center; margin-bottom: 16px; line-height: 1; min-height: 52px; display: flex; align-items: center; justify-content: center; } .welcome-popup-title { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 800; color: #ffffff; text-align: center; margin: 0 0 12px; letter-spacing: -0.02em; line-height: 1.25; } .welcome-popup-body { font-family: 'Montserrat', sans-serif; font-size: 13px; color: rgba(255,255,255,0.6); text-align: center; line-height: 1.75; margin: 0 0 28px; } .welcome-popup-cta { display: block; width: 100%; padding: 16px; background: #ffffff; color: #000000; border: none; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; border-radius: 2px; } .welcome-popup-skip { display: block; width: 100%; margin-top: 12px; padding: 10px; background: none; border: none; color: rgba(255,255,255,0.3); font-family: 'Montserrat', sans-serif; font-size: 11px; cursor: pointer; } /* ── WhatsApp button ─────────────────────────────────────────── */ .wa-contact-btn { display: flex; align-items: center; gap: 10px; background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.35); color: #25d366; text-decoration: none; padding: 13px 18px; border-radius: 3px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; margin-top: 6px; transition: all 0.2s; } .wa-contact-btn:hover { background: rgba(37,211,102,0.18); } /* ── Catalogue share popup ───────────────────────────────────── */ .cat-share-body { padding: 28px 32px; } .cat-share-label { font-size: 9px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gray); display: block; margin-bottom: 8px; } .cat-share-input-row { display: flex; gap: 8px; } .cat-share-link-input { flex: 1; background: var(--black); border: 1px solid var(--dark3); color: var(--light-gray); font-family: monospace; font-size: 11px; padding: 12px 14px; outline: none; min-width: 0; } /* ── Popup header/search rows ────────────────────────────────── */ .popup-header-row { display: flex; align-items: center; gap: 14px; } .popup-search-row { display: flex; align-items: center; gap: 8px; } .popup-inline-search-wrap { padding: 14px 20px 8px; border-bottom: 1px solid var(--dark2); flex-shrink: 0; } .popup-inline-search-inner { position: relative; display: flex; align-items: center; }