/* ═══════════════════════════════════════════════════════════ JAYAGURU SPICES — shop-image-fix.css v2 Full-width landscape hero photos for shop product cards. Perfect rendering for your 1200×900 product cover shots. Add this LAST in after all other stylesheets. ═══════════════════════════════════════════════════════════ */ /* ── SHOP CONTAINER ── */ .shop-container { padding: 32px clamp(12px, 4vw, 48px) 80px; max-width: 900px; margin: 0 auto; } /* ── SHOP PRODUCT BLOCK ── */ .shop-product-block { background: var(--c-card); border-radius: 20px; border: 1px solid var(--c-border); box-shadow: var(--sh); overflow: hidden; transition: box-shadow 0.35s ease, transform 0.35s ease; } .shop-product-block:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); } /* ── HERO IMAGE AREA ───────────────────────────────────────── Your photos are 1200×900 (4:3 landscape). We display them at 4:3 so they never get letterboxed. object-fit:cover with object-position:center center ensures the centred product is always fully visible on all screens. ──────────────────────────────────────────────────────────── */ .spb-hero-img { width: 100%; /* 4:3 aspect ratio — matches your 1200×900 photos exactly */ aspect-ratio: 4 / 3; position: relative; overflow: hidden; display: block; /* min/max guards for very large or very small screens */ max-height: 540px; min-height: 220px; } .spb-hero-img img { width: 100%; height: 100%; object-fit: cover; /* Center on both axes — product is centred in your shots */ object-position: center center; display: block; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .shop-product-block:hover .spb-hero-img img { transform: scale(1.04); } .spb-hero-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 6rem; } /* ── INFO BAR below image ── */ .spb-info-bar { padding: 20px 24px 4px; display: flex; flex-direction: column; gap: 6px; } .spb-info-bar .pc-tag { align-self: flex-start; margin-bottom: 2px; } .spb-info-bar .spb-name { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: 0.5px; color: var(--c-text); line-height: 1.1; margin: 0; } .spb-info-bar .spb-desc { color: var(--c-muted); font-size: 0.9rem; line-height: 1.6; margin: 0; max-width: 100%; } /* ── SIZE CARDS ── */ .spb-sizes { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--c-border); margin-top: 16px; } .size-card { padding: 20px 12px; text-align: center; cursor: pointer; border-right: 1px solid var(--c-border); transition: background 0.2s ease; position: relative; } .size-card:last-child { border-right: none; } .size-card:hover { background: var(--c-card2); } .size-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 100%; height: 3px; transition: right 0.3s ease; } .size-card:hover::after { right: 0; background: var(--c-saffron); } .size-weight { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; color: var(--c-text); letter-spacing: 0.5px; margin-bottom: 4px; } .size-price { font-size: 1.2rem; font-weight: 900; margin-bottom: 12px; } .size-buy-btn { width: 100%; border: none; border-radius: 50px; color: #fff; padding: 8px 0; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s, transform 0.2s; } .size-buy-btn:hover { opacity: 0.88; transform: scale(1.05); } /* ── VIEW DETAILS BUTTON ── */ .spb-view-btn { display: flex; align-items: center; gap: 6px; margin: 14px 24px 20px; background: none; border: 1.5px solid var(--c-border); border-radius: 50px; color: var(--c-muted); padding: 10px 24px; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s, color 0.2s; width: fit-content; } .spb-view-btn:hover { border-color: var(--c-saffron); color: var(--c-saffron); } /* ── HIDE legacy gallery elements (belt-and-suspenders) ── */ .spb-header, .spb-gallery, .spb-gallery-main, .spb-gallery-thumbs, .spb-thumb { display: none !important; } /* ══════════════════════ RESPONSIVE ══════════════════════ */ /* Large desktop — cap the image so it doesn't go huge */ @media (min-width: 1200px) { .spb-hero-img { max-height: 480px; } } /* Tablet (768px) */ @media (max-width: 768px) { .shop-container { padding: 20px 12px 60px; } /* Still 4:3 — just narrower, so naturally shorter */ .spb-hero-img { max-height: 400px; } .spb-info-bar { padding: 16px 16px 4px; } .size-card { padding: 16px 8px; } .size-weight { font-size: 1.15rem; } .size-price { font-size: 1rem; margin-bottom: 10px; } .size-buy-btn { font-size: 0.72rem; padding: 7px 0; } .spb-view-btn { margin: 12px 16px 16px; } } /* Mobile ≤ 480px — switch size grid to 2×2 */ @media (max-width: 480px) { .spb-hero-img { /* On a 375px phone this gives ~281px height — perfect */ max-height: 320px; } .spb-sizes { grid-template-columns: repeat(2, 1fr); } /* Fix borders for 2×2 layout */ .size-card:nth-child(2) { border-right: none; } .size-card:nth-child(1), .size-card:nth-child(2) { border-bottom: 1px solid var(--c-border); } .size-weight { font-size: 1.3rem; } .size-price { font-size: 1.1rem; } .spb-info-bar .spb-name { font-size: clamp(1.4rem, 7vw, 1.8rem); } } /* Very small phones */ @media (max-width: 360px) { .spb-hero-img { max-height: 270px; } }