/* ============================================================ PRODUCT.CSS — product detail page (typical-section / index jaisi theme) ------------------------------------------------------------ Sky-blue background + glass cards/panels + white text. Background: typical-section.css ke BILKUL same (dark moving blobs + clouds + grain, laptop + mobile dono par same). Sirf header.css + footer.css ke saath chalta hai. 1. Colors / helpers 2. "More from this brand" heading + arrows 3. Product card (glass) + slider 4. Product card — mobile 5. Product page (gallery, title, price, qty, ADD TO COLLECTION, notes, specs, share, tabs) 6. Product page — mobile 7. Background (moving dark blobs + clouds + grain; product / hover card ke color me badalta hai) 8. Card touch + bag button (mobile) 9. Reduced motion CHANGES (latest): - Background ab typical-section.css jaisa (section 7). - Page ke upar header ke piche chhupne wali problem fix: --pdp-top (section 1). Abhi bhi chhupe to sirf .pdp-page{ --pdp-top } ka number badhao. - ADD TO COLLECTION button glass theme me (section 5: .btn-add). - Cards ke badge / buttons / kati hui price typical-section jaise. ============================================================ */ /* ============================================================ 1. COLORS / HELPERS ============================================================ */ :root{ --sale-red:#d62839; --badge-red:rgba(160,18,34,.72); /* DISCOUNT + OUT OF STOCK dono badge ka same color - yahin se badlo */ --bubbg: radial-gradient(circle at 28% 22%,rgba(255,255,255,.65) 0,rgba(255,255,255,.18) 14%,rgba(255,255,255,0) 38%), radial-gradient(circle at 75% 90%,rgba(130,220,255,.40) 0,rgba(130,220,255,0) 55%), linear-gradient(180deg,rgba(255,255,255,.14),rgba(110,200,255,.10)); --bubsh: inset 0 2px 3px rgba(255,255,255,.7), inset 0 -8px 14px rgba(0,130,210,.18), inset 3px 0 6px rgba(255,255,255,.18), 0 8px 18px rgba(0,120,200,.18), 0 0 14px rgba(120,220,255,.25); /* WISHLIST + ADD TO CART (card) button ka GLASS look - yahin se badlo */ --glass-btn-bg: radial-gradient(circle at 30% 22%, rgba(255,255,255,.60) 0%, rgba(255,255,255,0) 58%), linear-gradient(150deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.10) 55%, rgba(255,255,255,.24) 100%); --glass-btn-border:rgba(255,255,255,.75); --glass-btn-shadow: inset 0 1.5px 1px rgba(255,255,255,.9), inset 0 -6px 12px rgba(255,255,255,.12), 0 6px 16px rgba(0,40,90,.28); --glass-btn-blur:blur(10px) saturate(180%); } .container{ max-width:1440px; margin:0 auto; padding:0 15px; } .pdp-page{ --sky:#19c2ff; --red:#ff5d73; --green:#4ade80; --txt:#ffffff; --txt-soft:#e3f0fb; --glass-border:rgba(255,255,255,.38); --pdp-top:140px; /* HEADER KE PICHE CHHUPNE SE BACHANE KE LIYE upar ki jagah (desktop) - yahin se badlo */ color:var(--txt); } .pdp-page .container{ max-width:1200px; margin:0 auto; padding:0 15px; } .pdp-page .pdp-top{ padding-top:var(--pdp-top); } /* Glass panels: jahan bhi glass look chahiye wahan yeh ek jaisa lagta hai */ .pdp-page .main-viewer, .pdp-page .note-card, .pdp-page .spec-item, .pdp-page .faq-item, .pdp-page .ai-summary-block, .pdp-page .qty-box, .pdp-page .wishlist-btn-main, .pdp-page .share-toggle-btn{ background: radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 55%), linear-gradient(150deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.14) 100%); border:1px solid var(--glass-border); box-shadow:inset 0 1.5px 1px rgba(255,255,255,.7), inset 0 -10px 22px rgba(255,255,255,.05), 0 12px 30px -14px rgba(0,30,60,.4); -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%); } /* ============================================================ 2. "MORE FROM THIS BRAND" HEADING + ARROWS ============================================================ */ .trending-header{ position:relative; display:flex; align-items:center; justify-content:center; margin-top:50px; margin-bottom:25px; padding:0 20px; } .main-trending-title{ font-size:2rem; font-weight:700; text-transform:uppercase; text-align:center; margin:0; color:#fff; text-shadow:0 2px 14px rgba(0,50,120,.55); letter-spacing:3px; line-height:1.2; } .trending-header .slider-arrows{ position:absolute; right:30px; display:flex; gap:12px; } .pdp-page .arrow-btn{ width:42px; height:42px; border-radius:50%; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.55); box-shadow:inset 0 1px 1px rgba(255,255,255,.7), 0 6px 14px -6px rgba(0,30,60,.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .25s ease, transform .25s ease; } .pdp-page .arrow-btn:hover{ background:rgba(25,194,255,.55); transform:scale(1.08); } @media(max-width:768px){ .trending-header{ margin-top:40px; flex-direction:column; gap:20px; } .main-trending-title{ font-size:1.5rem; letter-spacing:2px; } .trending-header .slider-arrows{ position:static; } } /* ============================================================ 3. PRODUCT CARD (GLASS) + SLIDER (typical-section jaisa) ============================================================ */ .product-card{ position:relative; height:100%; overflow:hidden; isolation:isolate; background: radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 55%), linear-gradient(150deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.14) 100%); border:1px solid rgba(255,255,255,.38); border-radius:22px; padding:8px; box-shadow: inset 0 1.5px 1px rgba(255,255,255,.75), inset 1px 0 2px rgba(255,255,255,.25), inset 0 -14px 28px rgba(255,255,255,.06); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); transition:transform .35s cubic-bezier(.25,1.25,.4,1), box-shadow .35s ease, border-color .3s ease, background .3s ease; } /* glass ki tirchhi chamak (shine) - hover par guzarti hai */ .product-card::before{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit; background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.32) 47%, rgba(255,255,255,.08) 53%, transparent 66%); transform:translateX(-130%); transition:transform .9s cubic-bezier(.2,.7,.2,1); } .product-card:hover::before{ transform:translateX(130%); } /* HOVER LIFT: transform card par nahi, uske PARENT (.best-card-item) ke hover par lagta hai (card khud uthta tha to mouse kinare se bahar reh jata tha -> kaampna). Height badalni ho to translateY(-6px) badlo. */ @media (hover:hover){ .best-card-item:hover .product-card{ transform:translateY(-6px); } } .product-card:hover{ border-color:rgba(255,255,255,.65); background: radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 55%), linear-gradient(150deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.09) 45%, rgba(255,255,255,.20) 100%); box-shadow: inset 0 1.5px 1px rgba(255,255,255,.9), inset 1px 0 2px rgba(255,255,255,.35), inset 0 -14px 28px rgba(255,255,255,.10); } .main-link{ position:absolute; inset:0; z-index:5; } /* image ka tile: bilkul transparent */ .img-box{ position:relative; background:transparent; border-radius:12px; overflow:hidden; border:1px solid transparent; transition:.3s; } .lazy-fade-img{ opacity:0; } .lazy-fade-img.loaded{ opacity:1; } /* BADGE (DISCOUNT / OUT OF STOCK) - left side, gol glass (typical-section jaisa) Markup: 20%OFF OUT OFSTOCK */ .product-card .badge{ position:absolute; top:12px; left:12px; z-index:6; isolation:isolate; width:48px; height:48px; padding:0; border-radius:50%; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center; line-height:1.1; color:#fff; letter-spacing:.2px; background:var(--badge-red); border:1px solid rgba(255,255,255,.55); box-shadow:inset 0 1px 1px rgba(255,255,255,.7), 0 4px 10px rgba(130,0,20,.35); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); text-shadow:0 1px 3px rgba(90,0,10,.6); } .product-card .badge b, .product-card .badge small{ display:block !important; width:100%; margin:0; padding:0; text-align:center; font-size:8px; font-weight:800; letter-spacing:.1px; line-height:1.15; white-space:nowrap; } .product-card .badge.badge-oos b, .product-card .badge.badge-oos small{ font-size:8px; } .product-card .badge:not(.badge-oos) b{ font-size:13px; font-weight:900; line-height:1.05; letter-spacing:0; } .product-card .badge:not(.badge-oos) small{ font-size:8.5px; font-weight:800; line-height:1.1; letter-spacing:.3px; } /* Wishlist icon desktop par sirf card hover par dikhta hai */ .wishlist-btn{ position:absolute; top:12px; right:12px; width:35px; height:35px; z-index:6; isolation:isolate; background:var(--glass-btn-bg); border:1px solid var(--glass-btn-border); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; text-shadow:0 1px 4px rgba(0,30,60,.5); box-shadow:var(--glass-btn-shadow); -webkit-backdrop-filter:var(--glass-btn-blur); backdrop-filter:var(--glass-btn-blur); opacity:0; transition:opacity .3s, color .3s, transform .4s cubic-bezier(.25,1.25,.4,1); } .product-card:hover .wishlist-btn{ opacity:1; } .wishlist-btn:hover{ color:#ff5d73; transform:scale(1.1); } .wishlist-btn i.text-danger{ color:#d32f2f; } /* Dono images (main + hover) EXACT same tareeke se position hoti hain taaki framing match kare */ .product-img-container{ width:100%; height:340px; position:relative; overflow:hidden; } .product-img-container img{ position:absolute; top:0; left:0; width:100%; height:100%; padding:20px; box-sizing:border-box; object-fit:contain; filter:drop-shadow(0 16px 16px rgba(0,25,55,.35)); transition:opacity .5s ease, transform .6s ease; } .product-img-container img.hover-img{ opacity:0 !important; } .product-card:hover .product-img-container img.main-img{ opacity:0; transform:scale(1.05); } .product-card:hover .product-img-container img.hover-img.loaded{ opacity:1 !important; transform:scale(1.05); } .add-cart-btn{ position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); isolation:isolate; width:90%; opacity:0; visibility:hidden; transition:all .3s ease; z-index:7; background:var(--glass-btn-bg); border:1px solid var(--glass-btn-border); color:#fff; text-shadow:0 1px 4px rgba(0,30,60,.5); box-shadow:var(--glass-btn-shadow); -webkit-backdrop-filter:var(--glass-btn-blur); backdrop-filter:var(--glass-btn-blur); padding:10px; text-align:center; font-size:11px; font-weight:700; border-radius:25px; cursor:pointer; } .product-card:hover .add-cart-btn{ opacity:1; visibility:visible; bottom:15px; } .add-cart-btn.oos-btn{ background:#444 !important; color:#fff !important; border-color:#444 !important; cursor:not-allowed !important; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; } .add-cart-btn.oos-btn::before{ display:none; } /* hover par buttons me paani ka bubble */ .add-cart-btn::before, .wishlist-btn::before{ content:""; position:absolute; z-index:-1; pointer-events:none; opacity:0; transform:scale(.6); background:var(--bubbg); border:1px solid rgba(255,255,255,.5); box-shadow:var(--bubsh); transition:opacity .3s ease, transform .5s cubic-bezier(.25,1.25,.4,1); } .add-cart-btn::before{ inset:2px; border-radius:999px; } .wishlist-btn::before{ inset:0; border-radius:50%; } .add-cart-btn:not(.oos-btn):hover::before, .wishlist-btn:hover::before{ opacity:1; transform:scale(1); } /* naam / price ka glass patti */ .info{ padding:12px 8px; margin-top:5px; border-radius:16px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); box-shadow:inset 0 1px 1px rgba(255,255,255,.35); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:.3s; } .product-card:hover .info{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); } .info .brand{ font-size:10px; color:rgba(255,255,255,.80); font-weight:700; text-transform:uppercase; margin-bottom:2px; letter-spacing:.5px; } .info .title{ font-size:14px; font-weight:600; color:#fff; height:38px; overflow:hidden; margin-bottom:5px; line-height:1.3; } .price-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .curr-price{ color:#fff; font-weight:700; font-size:15px; } /* KATI HUI price (sirf card me): safed pill + red text */ .product-card .old-price{ color:#c8102e; font-size:13px; font-weight:400; line-height:1.2; text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:rgba(200,16,46,.75); background:rgba(255,255,255,.88); padding:2px 8px; border-radius:10px; box-shadow:0 2px 8px rgba(0,40,90,.25); text-shadow:none; } .info .brand, .info .title, .curr-price{ text-shadow:0 1px 6px rgba(0,30,60,.45); } /* ---------- "More from this brand": horizontal slider ---------- */ #bestWrapperBox{ overflow:hidden; position:relative; padding:14px 0; } #bestTrackBox{ display:flex; flex-wrap:nowrap; gap:20px; transition:transform .4s ease-out; } .best-card-item{ min-width:calc(25% - 15px); flex-shrink:0; position:relative; } /* ============================================================ 4. PRODUCT CARD — MOBILE (<=768px) ------------------------------------------------------------ Mobile card bigde to sabse pehle yahan height + padding check karo. ============================================================ */ @media(max-width:768px){ #bestTrackBox{ gap:10px; } .best-card-item{ min-width:calc(50vw - 15px); flex:0 0 calc(50vw - 15px); } .product-card{ padding:4px; border-radius:16px; -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%); } .product-img-container{ height:170px; } .product-img-container img{ padding:6px; } .info .title{ font-size:12px; height:32px; } .product-card .old-price{ font-size:11px; padding:1px 6px; } /* badge mobile par thoda chhota */ .product-card .badge{ width:40px; height:40px; } .product-card .badge.badge-oos b, .product-card .badge.badge-oos small{ font-size:5.5px; letter-spacing:.1px; } .product-card .badge:not(.badge-oos) b{ font-size:10.5px; letter-spacing:0; } .product-card .badge:not(.badge-oos) small{ font-size:6.5px; letter-spacing:.2px; } } @media(max-width:400px){ .product-img-container{ height:140px; } .product-img-container img{ padding:4px; } } /* ============================================================ 5. PRODUCT PAGE ============================================================ */ .pdp-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:50px; align-items:start; } /* ---------- Gallery ---------- */ .gallery-area{ display:flex; gap:15px; align-items:flex-start; position:sticky; top:110px; align-self:start; } .thumb-col{ display:flex; flex-direction:column; gap:8px; width:70px; } .thumb-col img{ width:70px; height:82px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid rgba(255,255,255,.35); background:rgba(255,255,255,.18); transition:.3s; } .thumb-col img:hover{ border-color:rgba(255,255,255,.8); } .thumb-col img.active{ border-color:var(--sky); transform:scale(1.03); box-shadow:0 0 14px rgba(25,194,255,.55); } .main-viewer{ flex-grow:1; border-radius:22px; height:550px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .main-viewer img{ max-width:90%; max-height:90%; object-fit:contain; filter:drop-shadow(0 20px 20px rgba(0,25,55,.35)); } /* ---------- Title / price / stock ---------- */ .breadcrumb-nav{ font-size:.8rem; color:rgba(255,255,255,.85); margin-bottom:12px; text-shadow:0 1px 6px rgba(0,30,60,.45); } .breadcrumb-nav a{ color:rgba(255,255,255,.85); text-decoration:none; } .breadcrumb-nav a:hover{ color:#fff; text-decoration:underline; } .brand-lbl{ display:block; font-size:.75rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:6px; text-shadow:0 1px 6px rgba(0,30,60,.45); } .titl{ font-size:2rem; font-weight:700; line-height:1.25; margin:0 0 8px; color:#fff; text-shadow:0 2px 14px rgba(0,50,120,.55); } .rating-row{ margin:8px 0; display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--txt-soft); } .rating-row .stars{ color:#ffd24d; letter-spacing:1px; } .price-box{ display:flex; align-items:center; gap:12px; margin:12px 0 16px; } .price-box .current-price{ font-size:2rem; font-weight:800; color:#fff; text-shadow:0 2px 12px rgba(0,50,120,.5); } .price-box .old-price{ font-size:1.1rem; color:rgba(255,255,255,.65); text-decoration:line-through; } .price-box .disc-tag{ background:linear-gradient(135deg,#e53946,var(--sale-red)); color:#fff; font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:20px; } .stock-badge{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.85rem; margin-bottom:15px; padding:6px 12px; border-radius:8px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .in-stock{ background:rgba(74,222,128,.20); color:#c6ffdb; border:1px solid rgba(74,222,128,.5); } .out-of-stock{ background:rgba(255,93,115,.22); color:#ffd0d6; border:1px solid rgba(255,93,115,.55); } .stock-qty{ font-size:.8rem; color:rgba(255,255,255,.8); margin-left:5px; font-weight:400; } .short-desc{ color:var(--txt-soft); line-height:1.6; margin-bottom:25px; font-size:.95rem; text-shadow:0 1px 8px rgba(0,30,60,.4); } .ai-summary-block{ border-radius:14px; padding:12px 15px; margin-bottom:20px; font-size:.9rem; color:#fff; line-height:1.5; } /* ---------- Qty + ADD TO COLLECTION + wishlist ---------- */ .action-container{ display:flex; align-items:center; gap:15px; margin:25px 0 30px; } .action-container .qty-box{ display:flex; align-items:center; border-radius:30px; height:54px; padding:0 6px; } .action-container .qty-btn{ background:none; border:none; padding:0 14px; cursor:pointer; font-size:1.1rem; color:#fff; transition:.2s; width:auto; height:auto; } .action-container .qty-btn:hover:not(:disabled){ color:var(--sky); } .qty-btn:disabled{ opacity:.35; cursor:not-allowed; } @keyframes qtyShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-3px); } 75%{ transform:translateX(3px); } } .qty-btn.shake{ animation:qtyShake .3s ease; } #qty-input{ width:35px; border:none; text-align:center; font-weight:700; outline:none; background:transparent; color:#fff; } /* ADD TO COLLECTION: neela glass pill (water-glass look) - upar-left se safed chamak, neeche gehra neela (ubhra hua / convex) - hover par: tirchhi chamak guzarti hai + andar paani ka bubble + halka upar uthta hai Neela rang badalna ho to neeche ke 3 rang (rgba(76,195,255) / (27,127,224) / (10,63,158)) badlo */ .btn-add{ position:relative; isolation:isolate; overflow:hidden; flex-grow:1; height:54px; border-radius:30px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font-weight:700; font-size:.95rem; letter-spacing:1px; text-transform:uppercase; text-shadow:0 1px 4px rgba(0,25,80,.6); background: radial-gradient(75% 55% at 30% 12%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%), radial-gradient(90% 80% at 50% 115%, rgba(0,20,90,.45) 0%, rgba(0,20,90,0) 65%), linear-gradient(160deg, rgba(76,195,255,.78) 0%, rgba(27,127,224,.72) 52%, rgba(10,63,158,.78) 100%); border:1px solid rgba(255,255,255,.7); box-shadow: inset 0 2px 3px rgba(255,255,255,.75), inset 0 -8px 14px rgba(0,25,100,.45), 0 12px 24px -10px rgba(0,30,90,.65), 0 2px 0 rgba(8,60,140,.45); -webkit-backdrop-filter:blur(10px) saturate(170%); backdrop-filter:blur(10px) saturate(170%); transition:transform .4s cubic-bezier(.25,1.25,.4,1), box-shadow .3s ease, border-color .3s ease; } .btn-add i, .btn-add span{ position:relative; z-index:2; } .btn-add i{ font-size:1rem; transition:transform .4s cubic-bezier(.25,1.25,.4,1); } /* tirchhi chamak (shine): hover par guzarti hai */ .btn-add::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 64%); transform:translateX(-130%); transition:transform .8s cubic-bezier(.2,.7,.2,1); } /* andar ka paani ka bubble: hover par ubharta hai */ .btn-add::after{ content:""; position:absolute; inset:3px; z-index:0; pointer-events:none; border-radius:999px; background:var(--bubbg); border:1px solid rgba(255,255,255,.45); box-shadow:var(--bubsh); opacity:0; transform:scale(.7); transition:opacity .3s ease, transform .5s cubic-bezier(.25,1.25,.4,1); } .btn-add:hover:not(:disabled){ transform:translateY(-2px); border-color:#fff; box-shadow: inset 0 2px 3px rgba(255,255,255,.85), inset 0 -8px 14px rgba(0,25,100,.5), 0 16px 28px -10px rgba(0,30,90,.7), 0 2px 0 rgba(8,60,140,.45), 0 0 20px rgba(25,194,255,.5); } .btn-add:hover:not(:disabled)::before{ transform:translateX(130%); } .btn-add:hover:not(:disabled)::after{ opacity:1; transform:scale(1); } .btn-add:hover:not(:disabled) i{ transform:translateY(-2px) scale(1.12); } .btn-add:active:not(:disabled){ transform:translateY(0) scale(.98); } /* cart me add hone par (agar JS .added class lagaye) */ .btn-add.added{ background:linear-gradient(160deg, rgba(74,222,128,.85), rgba(22,163,74,.8)); } /* NOT AVAILABLE (out of stock): dhundhla grey glass */ .btn-add:disabled{ cursor:not-allowed; color:rgba(255,255,255,.75); text-shadow:none; background: radial-gradient(75% 55% at 30% 12%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 70%), linear-gradient(160deg, rgba(120,130,145,.60), rgba(70,80,95,.62)); border-color:rgba(255,255,255,.35); box-shadow:inset 0 1px 2px rgba(255,255,255,.35), 0 6px 14px -8px rgba(0,0,0,.5); } .wishlist-btn-main{ width:54px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; transition:transform .4s cubic-bezier(.25,1.25,.4,1), border-color .3s; flex-shrink:0; } .wishlist-btn-main i{ font-size:22px; color:#fff; } .wishlist-btn-main i.text-danger{ color:var(--red) !important; } .wishlist-btn-main:hover{ border-color:#fff; transform:scale(1.07); } .qty-limit-note{ display:none; align-items:center; gap:6px; color:#ffd0d6; font-size:.78rem; font-weight:600; margin:-18px 0 18px 2px; text-shadow:0 1px 6px rgba(0,30,60,.5); } .qty-limit-note.show{ display:flex; } /* ---------- Notes + specs ---------- */ .notes-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:30px 0; } .note-card{ padding:16px; border-radius:16px; text-align:left; } .note-card span{ display:block; font-size:.65rem; font-weight:700; color:#fff; letter-spacing:.8px; margin-bottom:8px; opacity:.85; } .note-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; } .note-list li{ font-size:.85rem; color:#fff; line-height:1.3; padding-left:12px; position:relative; } .note-list li::before{ content:''; position:absolute; left:0; top:.5em; width:5px; height:5px; border-radius:50%; background:var(--sky); box-shadow:0 0 6px rgba(25,194,255,.8); } .specs{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .spec-item{ padding:12px; border-radius:14px; color:#fff; } .spec-item label{ display:block; font-size:.6rem; color:rgba(255,255,255,.75); text-transform:uppercase; font-weight:700; letter-spacing:.5px; } /* ---------- Share ---------- */ .share-section{ margin-top:22px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .share-toggle-btn{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:.85rem; padding:10px 18px; border-radius:30px; cursor:pointer; font-family:inherit; transition:.3s; flex-shrink:0; } .share-toggle-btn:hover{ border-color:#fff; color:var(--sky); } .share-toggle-btn.active{ background:linear-gradient(135deg, rgba(6,30,70,.82), rgba(0,100,170,.72)); color:#fff; border-color:rgba(255,255,255,.7); } .share-icons{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; max-width:0; height:0; opacity:0; overflow:hidden; transition:max-width .35s ease, height .35s ease, opacity .25s ease; } .share-icons.show{ max-width:400px; height:44px; opacity:1; } .share-icon{ width:44px; height:44px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; text-decoration:none; transition:transform .25s ease; position:relative; flex-shrink:0; border:1px solid rgba(255,255,255,.55); box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 6px 14px -6px rgba(0,20,50,.5); } .share-icon:hover{ transform:translateY(-3px) scale(1.05); } .share-icon.wa{ background:#25D366; } .share-icon.fb{ background:#1877F2; } .share-icon.x{ background:#000; } .share-icon.sc{ background:#FFFC00; color:#000; } .share-icon.ig{ background:radial-gradient(circle at 30% 107%,#fdf497,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%); } .share-icon.tt{ background:#000; } .share-icon.copied::after{ content:'Link copied!'; position:absolute; top:-34px; left:50%; transform:translateX(-50%); background:rgba(6,30,70,.9); color:#fff; font-size:.65rem; padding:4px 8px; border-radius:6px; white-space:nowrap; pointer-events:none; } /* ---------- Tabs: Story / FAQ / Reviews ---------- */ .tabs{ margin-top:60px; border-top:1px solid rgba(255,255,255,.35); padding-top:40px; } .tab-nav{ display:flex; gap:40px; border-bottom:1px solid rgba(255,255,255,.35); margin-bottom:30px; } .tab-link{ padding-bottom:15px; cursor:pointer; font-weight:700; color:rgba(255,255,255,.7); position:relative; text-shadow:0 1px 6px rgba(0,30,60,.4); transition:color .25s; } .tab-link:hover{ color:#fff; } .tab-link.active{ color:#fff; } .tab-link.active::after{ content:''; position:absolute; bottom:-1px; left:0; width:100%; height:3px; background:linear-gradient(90deg,#19c2ff,#7b3ff2); box-shadow:0 0 12px rgba(25,194,255,.6); } .tab-pane{ display:none; line-height:1.8; color:var(--txt-soft); text-shadow:0 1px 8px rgba(0,30,60,.4); } .tab-pane.active{ display:block; } .story-full{ margin-top:4px; } .read-more-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; color:#fff; font-weight:700; padding:8px 18px; border-radius:30px; cursor:pointer; font-size:.85rem; font-family:inherit; transition:.3s; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.55); box-shadow:inset 0 1px 1px rgba(255,255,255,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .read-more-btn:hover{ background:rgba(25,194,255,.55); } .read-more-btn i{ transition:transform .3s ease; } .read-more-btn.open i{ transform:rotate(180deg); } .faq-accordion{ display:flex; flex-direction:column; gap:10px; } .faq-item{ border-radius:14px; overflow:hidden; } .faq-question{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:15px; background:none; border:none; text-align:left; padding:16px 18px; font-size:.95rem; font-weight:700; color:#fff; cursor:pointer; font-family:inherit; } .faq-icon{ transition:transform .3s ease; color:#fff; flex-shrink:0; } .faq-item.open .faq-icon{ transform:rotate(45deg); } .faq-answer{ max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; padding:0 18px; } .faq-item.open .faq-answer{ max-height:500px; padding:0 18px 16px; } .faq-answer p{ margin:0; color:var(--txt-soft); line-height:1.7; } /* Delivery / location line (GEO) */ .geo-line{ font-size:.82rem; color:var(--txt-soft); margin:-12px 0 18px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; text-shadow:0 1px 6px rgba(0,30,60,.4); } .geo-line i{ color:#fff; } /* ============================================================ 6. PRODUCT PAGE — MOBILE ============================================================ */ @media (max-width:768px){ .pdp-page{ --pdp-top:115px; } /* HEADER KE PICHE CHHUPNE SE BACHANE KE LIYE upar ki jagah (mobile) */ .pdp-grid{ grid-template-columns:1fr; gap:25px; } .gallery-area{ flex-direction:column; position:static; } .main-viewer{ order:1; height:350px; width:100%; } .thumb-col{ order:2; flex-direction:row; width:100%; overflow-x:auto; padding:5px 0; gap:10px; justify-content:flex-start; } .thumb-col img{ width:60px; height:70px; flex-shrink:0; } .titl{ font-size:1.6rem; } .price-box{ flex-wrap:wrap; gap:10px; } .price-box .current-price{ font-size:1.8rem; } .action-container{ flex-wrap:wrap; } .action-container .qty-box{ width:30%; justify-content:center; } .btn-add{ flex-grow:1; height:52px; font-size:.88rem; } .wishlist-btn-main{ width:52px; height:52px; } .notes-wrap{ grid-template-columns:1fr; gap:10px; } .note-card{ padding:14px 16px; } .note-card span{ font-size:.7rem; } .note-list li{ font-size:.9rem; } .tab-nav{ gap:20px; font-size:.9rem; overflow-x:auto; white-space:nowrap; } .share-icon{ width:40px; height:40px; font-size:1rem; } .share-icons.show{ max-width:280px; height:40px; } .pdp-page #bestTrackBox{ gap:10px; padding:10px 5px; width:max-content; } .pdp-page .best-card-item{ min-width:calc(50vw - 15px); flex:0 0 calc(50vw - 15px); padding:0 5px; box-sizing:border-box; } .pdp-page .product-img-container{ height:170px; width:100%; } .pdp-page .info .title{ font-size:12px; height:32px; overflow:hidden; } } @media (max-width:400px){ .pdp-page .product-img-container{ height:140px; } } /* ============================================================ 7. BACKGROUND: light sky-blue + gehre dark blue moving blobs + safed clouds + halka grain (typical-section.css ke BILKUL same, LAPTOP + MOBILE DONO PAR SAME) ------------------------------------------------------------ 3 rang (variables): --bg1 = sky ka UPAR wala rang (neeche wala --bg1b isi se apne aap banta hai) --bg2 = gehre dark blobs (3) --bg3 = safed clouds (2) js/product.js page khulte hi ye rang PRODUCT ki main image ke color me kar deta hai; slider ke card par hover karte hi us card ke color me, mouse hatne par wapas product ke color me. Color na nikle to neeche wale default. Default badalna ho to sirf html{ --bg1 --bg2 --bg3 } badlo. MOBILE FIX: Blobs ka size ek variable --u se banta hai: laptop / desktop : --u = 1vmax mobile (<=768px) : --u = .75vmax (proportion laptop jaisa) Mobile par blobs bade / chhote karne ho to sirf mobile wala --u badlo. Mobile par grain + moving blobs BAND NAHI hain - laptop jaisa hi chalta hai. Layers: html::before -> sky gradient (upar --bg1, neeche --bg1b) html::after -> 3 dark blobs + 2 cloud blobs (poori screen me ghoomte hain) body::before -> grain (halka, overlay) Blobs ka size / position / speed: --bNx / --bNy = blob ka center, --bNr = blob ka radius (N = 1..5) 1,2,3 = dark blobs, 4,5 = clouds Speed = html::after ke animation me 10s / 12s / 11s / 13s / 15s (number badhao = dheere, ghatao = tez) Dark kitna: html::after ke background me 92% / 92% / 85% GRAIN: body::before ke SVG me baseFrequency='.5' (chhota number = bada dana) aur opacity .5 (halka: .35 | strong: .7). Agar background na dikhe to header.css / footer.css me body ya html par solid background / z-index check karo. ============================================================ */ @property --bg1 { syntax:''; inherits:true; initial-value:#bfe4fa; } @property --bg1b { syntax:''; inherits:true; initial-value:#4f8fc0; } @property --bg2 { syntax:''; inherits:true; initial-value:#03163b; } @property --bg3 { syntax:''; inherits:true; initial-value:#ffffff; } /* blobs ke center (x, y) aur radius (r) - animation inhe smooth badalta hai */ @property --b1x { syntax:''; inherits:false; initial-value:0px; } @property --b1y { syntax:''; inherits:false; initial-value:0px; } @property --b1r { syntax:''; inherits:false; initial-value:0px; } @property --b2x { syntax:''; inherits:false; initial-value:0px; } @property --b2y { syntax:''; inherits:false; initial-value:0px; } @property --b2r { syntax:''; inherits:false; initial-value:0px; } @property --b3x { syntax:''; inherits:false; initial-value:0px; } @property --b3y { syntax:''; inherits:false; initial-value:0px; } @property --b3r { syntax:''; inherits:false; initial-value:0px; } @property --b4x { syntax:''; inherits:false; initial-value:0px; } @property --b4y { syntax:''; inherits:false; initial-value:0px; } @property --b4r { syntax:''; inherits:false; initial-value:0px; } @property --b5x { syntax:''; inherits:false; initial-value:0px; } @property --b5y { syntax:''; inherits:false; initial-value:0px; } @property --b5r { syntax:''; inherits:false; initial-value:0px; } html{ --bg1:#bfe4fa; /* sky upar (light) */ --bg2:#03163b; /* gehra dark blue */ --bg3:#ffffff; /* safed clouds */ --bg1b:color-mix(in srgb, var(--bg1) 45%, #1a5a92); /* sky neeche: --bg1 se apne aap banta hai (hover par bhi saath badalta hai) */ --u:1vmax; /* blob size ki unit: laptop par 1vmax */ transition:--bg1 .3s ease, --bg1b .3s ease, --bg2 .3s ease, --bg3 .3s ease; /* fast: .3s -> aur kam = aur fast */ } @media(max-width:768px){ html{ --u:.75vmax; } /* mobile: blobs ka size laptop ke proportion me (bade = .9vmax, chhote = .6vmax) */ } html::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(to bottom, var(--bg1), var(--bg1b)); } html::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; /* shuruaati position (animation inhe chalaata hai) - dark blobs (1,2,3) ka radius bada */ --b1x:calc(15 * var(--u)); --b1y:calc(15 * var(--u)); --b1r:calc(42 * var(--u)); --b2x:calc(100vw - 12.5 * var(--u)); --b2y:calc(100vh - 12.5 * var(--u)); --b2r:calc(39 * var(--u)); --b3x:calc(12.5 * var(--u)); --b3y:calc(55vh + 22.5 * var(--u)); --b3r:calc(32 * var(--u)); --b4x:calc(40vw + 25 * var(--u)); --b4y:calc(10vh + 20 * var(--u)); --b4r:calc(22 * var(--u)); --b5x:calc(55vw + 22.5 * var(--u)); --b5y:calc(45vh + 17.5 * var(--u)); --b5r:calc(20 * var(--u)); /* upar wali layer pehle: clouds sabse upar, dark blobs unke neeche */ background: radial-gradient(circle var(--b3r) at var(--b3x) var(--b3y), color-mix(in srgb, var(--bg2) 85%, transparent) 0%, transparent 100%), radial-gradient(circle var(--b2r) at var(--b2x) var(--b2y), color-mix(in srgb, var(--bg2) 92%, transparent) 0%, transparent 100%), radial-gradient(circle var(--b1r) at var(--b1x) var(--b1y), color-mix(in srgb, var(--bg2) 92%, transparent) 0%, transparent 100%); animation: alifB1 10s ease-in-out infinite alternate, alifB2 12s ease-in-out infinite alternate, alifB3 11s ease-in-out infinite alternate, alifB4 13s ease-in-out infinite alternate, alifB5 15s ease-in-out infinite alternate; } @keyframes alifB1{ 0% { --b1x:calc(15 * var(--u)); --b1y:calc(15 * var(--u)); --b1r:calc(42 * var(--u)); } 50% { --b1x:calc(15 * var(--u) + 60vw); --b1y:calc(15 * var(--u) + 30vh); --b1r:calc(50 * var(--u)); } 100% { --b1x:calc(15 * var(--u) + 20vw); --b1y:calc(15 * var(--u) + 70vh); --b1r:calc(38 * var(--u)); } } @keyframes alifB2{ 0% { --b2x:calc(100vw - 12.5 * var(--u)); --b2y:calc(100vh - 12.5 * var(--u)); --b2r:calc(39 * var(--u)); } 50% { --b2x:calc(45vw - 12.5 * var(--u)); --b2y:calc(60vh - 12.5 * var(--u)); --b2r:calc(45 * var(--u)); } 100% { --b2x:calc(80vw - 12.5 * var(--u)); --b2y:calc(25vh - 12.5 * var(--u)); --b2r:calc(39 * var(--u)); } } @keyframes alifB3{ 0% { --b3x:calc(12.5 * var(--u)); --b3y:calc(55vh + 22.5 * var(--u)); --b3r:calc(32 * var(--u)); } 50% { --b3x:calc(12.5 * var(--u) + 70vw); --b3y:calc(25vh + 22.5 * var(--u)); --b3r:calc(38 * var(--u)); } 100% { --b3x:calc(12.5 * var(--u) + 90vw); --b3y:calc(75vh + 22.5 * var(--u)); --b3r:calc(29 * var(--u)); } } @keyframes alifB4{ 0% { --b4x:calc(40vw + 25 * var(--u)); --b4y:calc(10vh + 20 * var(--u)); --b4r:calc(22 * var(--u)); } 50% { --b4x:calc(-5vw + 25 * var(--u)); --b4y:calc(35vh + 20 * var(--u)); --b4r:calc(26.4 * var(--u)); } 100% { --b4x:calc(-30vw + 25 * var(--u)); --b4y:calc(60vh + 20 * var(--u)); --b4r:calc(20.9 * var(--u)); } } @keyframes alifB5{ 0% { --b5x:calc(55vw + 22.5 * var(--u)); --b5y:calc(45vh + 17.5 * var(--u)); --b5r:calc(20 * var(--u)); } 50% { --b5x:calc(5vw + 22.5 * var(--u)); --b5y:calc(15vh + 17.5 * var(--u)); --b5r:calc(23 * var(--u)); } 100% { --b5x:calc(35vw + 22.5 * var(--u)); --b5y:calc(-5vh + 17.5 * var(--u)); --b5r:calc(20 * var(--u)); } } /* grain: overlay wala grayscale dana (baseFrequency .5) - light aur dark dono jagah dikhe. Cards par grain nahi hai (clean glass), grain sirf background me hai. Mobile par bhi laptop jaisa hi (animation band nahi kiya). */ body::before{ content:""; position:fixed; inset:-80px; z-index:-1; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; opacity:.5; mix-blend-mode:overlay; /* halka: .35 | strong: .7 ; dana bada: baseFrequency .5 -> .4 */ animation:alifGrain .8s steps(1) infinite; } @keyframes alifGrain{ 0% { transform:translate(0,0); } 25% { transform:translate(-30px,20px); } 50% { transform:translate(25px,-30px); } 75% { transform:translate(-15px,-35px); } 100%{ transform:translate(0,0); } } body::after{ display:none; } /* ============================================================ 8. CARD TOUCH / BAG BUTTON (mobile) ------------------------------------------------------------ a) .touch-active = ungli se touch / slide karne par card ka "hover" look (js/product.js ye class lagata hai). b) Wishlist (heart) icon mobile / touch par hamesha dikhe. c) Mobile par ADD TO CART -> chhota gol BAG icon (neeche-right kone me). ============================================================ */ .product-card.touch-active::before{ transform:translateX(130%); } .product-card.touch-active{ transform:translateY(-4px); border-color:rgba(255,255,255,.65); background: radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 55%), linear-gradient(150deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.09) 45%, rgba(255,255,255,.20) 100%); box-shadow: inset 0 1.5px 1px rgba(255,255,255,.9), inset 1px 0 2px rgba(255,255,255,.35), inset 0 -14px 28px rgba(255,255,255,.10); } .product-card.touch-active .info{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); } .product-card.touch-active .product-img-container img.hover-img.loaded{ opacity:1 !important; transform:scale(1.05); } .product-card.touch-active .product-img-container:has(img.hover-img.loaded) img.main-img{ opacity:0; transform:scale(1.05); } @media (max-width:900px), (hover:none){ .product-card .wishlist-btn{ opacity:1 !important; visibility:visible !important; display:flex !important; z-index:9; width:34px; height:34px; top:8px; right:8px; background:var(--glass-btn-bg); color:#fff; border:1px solid var(--glass-btn-border); box-shadow:var(--glass-btn-shadow); -webkit-backdrop-filter:var(--glass-btn-blur); backdrop-filter:var(--glass-btn-blur); } .product-card .wishlist-btn i{ display:block; font-size:15px; line-height:1; color:inherit; text-shadow:0 1px 3px rgba(0,20,50,.6); } .product-card .wishlist-btn i.text-danger{ color:#ff5d73; } .product-card .badge{ top:8px; left:8px; } } @media (max-width:768px){ .product-card .add-cart-btn, .product-card:hover .add-cart-btn{ position:absolute; left:auto; top:auto; right:8px; bottom:8px; transform:none; width:38px; height:38px; margin:0; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0; line-height:1; /* "ADD TO CART" likha hua chhup jata hai, sirf icon */ opacity:1; visibility:visible; z-index:9; background:var(--glass-btn-bg); color:#fff; border:1px solid var(--glass-btn-border); box-shadow:var(--glass-btn-shadow); -webkit-backdrop-filter:var(--glass-btn-blur); backdrop-filter:var(--glass-btn-blur); text-shadow:0 1px 4px rgba(0,30,60,.5); transition:transform .2s ease, background .25s ease; } .product-card .add-cart-btn::before{ inset:0; border-radius:50%; } .product-card .add-cart-btn i{ font-size:16px; margin:0; display:block; line-height:1; text-shadow:0 1px 3px rgba(0,20,50,.6); } .product-card .add-cart-btn i::before{ content:"\f290"; } /* FontAwesome: bag-shopping */ .product-card .add-cart-btn:active{ transform:scale(.9); } .product-card .add-cart-btn.added{ background:linear-gradient(150deg, rgba(25,194,255,.85), rgba(25,194,255,.55)); } .product-card .add-cart-btn.added i::before{ content:"\f00c"; } .product-card .add-cart-btn.oos-btn{ display:none !important; } } @media (max-width:400px){ .product-card .add-cart-btn, .product-card:hover .add-cart-btn{ width:34px; height:34px; right:6px; bottom:6px; } .product-card .add-cart-btn i{ font-size:14px; } } /* ============================================================ 9. REDUCED MOTION (animation kam karne wale users ke liye) ============================================================ */ @media(prefers-reduced-motion:reduce){ html{ transition:none; } html::after, body::before{ animation:none; } .product-card{ transition:none; } .btn-add, .btn-add::before, .btn-add::after, .btn-add i{ transition:none; } }