/* ============================================================ mahsooly-products.css Patch styles for the dynamic products section. Add this AFTER style.css in your HTML . ============================================================ */ /* ── Product photo (replaces emoji when uploaded) ────────── */ .product-photo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); } .product-card:hover .product-photo { transform: scale(1.04); } /* When photo is present, hide the gradient background */ .product-img:has(.product-photo) { background: #f5f5f0 !important; overflow: hidden; } /* ── Product emoji display ───────────────────────────────── */ .product-emoji { font-size: 58px; line-height: 1; display: block; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.15)); } /* ── Product pricing block ───────────────────────────────── */ .product-pricing { display: flex; flex-direction: column; gap: 2px; } /* ── Badge: coming soon ──────────────────────────────────── */ .badge-soon { background: var(--gold); color: var(--green-dark); } /* ── Add button: coming soon variant ─────────────────────── */ .btn-add--soon { background: transparent; color: var(--green-dark); border: 1.5px solid var(--green-dark); font-weight: 700; } .btn-add--soon:hover { background: var(--green-dark); color: #fff; } /* ── Outline green button (View All Products) ─────────────── */ .btn-outline-green { display: inline-block; padding: 0.75rem 2rem; border: 2px solid var(--green-dark); color: var(--green-dark); border-radius: 8px; font-size: 0.9rem; font-weight: 700; font-family: 'Cairo', sans-serif; letter-spacing: 0.03em; transition: background 0.2s, color 0.2s; margin-top: 2rem; } .btn-outline-green:hover { background: var(--green-dark); color: #fff; } /* ── Error state ─────────────────────────────────────────── */ .products-error { grid-column: 1 / -1; text-align: center; padding: 48px 20px; color: var(--text-muted); font-size: 15px; line-height: 2; } .products-error a { color: var(--green-dark); font-weight: 700; text-decoration: underline; } /* ── Skeleton loading cards ──────────────────────────────── */ @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .product-skeleton .skel-img { height: 180px; background: linear-gradient(90deg,#e8ede8 25%,#f4f7f4 50%,#e8ede8 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; } .skel-line { height: 13px; background: linear-gradient(90deg,#e8ede8 25%,#f4f7f4 50%,#e8ede8 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; margin-bottom: 10px; width: 75%; } .skel-wide { width: 95%; } .skel-short { width: 50%; } .skel-price { width: 35%; height: 18px; } .skel-btn { width: 70px; height: 34px; background: linear-gradient(90deg,#e8ede8 25%,#f4f7f4 50%,#e8ede8 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; } /* ── Gift banner ─────────────────────────────────────────── */ .gift-banner { background: var(--crimson); border-radius: 20px; padding: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; overflow: hidden; position: relative; } .gift-banner::before { content: ''; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,0.05); } .gift-banner-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .gift-banner-text .section-label { color: rgba(255,255,255,0.65); } .gift-banner-text h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; color: #fff; margin: 0; } .gift-banner-text p { font-size: 0.92rem; color: rgba(255,255,255,0.78); margin: 0; } .gift-bulk { font-size: 0.82rem !important; color: rgba(255,255,255,0.55) !important; } .btn-gift { display: inline-block; margin-top: 0.75rem; background: var(--gold); color: var(--crimson); padding: 0.75rem 1.75rem; border-radius: 8px; font-size: 0.9rem; font-weight: 700; font-family: 'Cairo', sans-serif; transition: opacity 0.2s, transform 0.2s; } .btn-gift:hover { opacity: 0.88; transform: translateY(-1px); } .gift-banner-visual { font-size: 3rem; display: flex; flex-direction: column; gap: 0.4rem; flex-shrink: 0; opacity: 0.9; line-height: 1.2; } /* RTL adjustments */ [dir="rtl"] .gift-banner { flex-direction: row-reverse; } [dir="rtl"] .gift-banner-text { align-items: flex-end; text-align: right; } [dir="rtl"] .gift-banner::before { right: auto; left: -40px; } /* ── Section CTA (View All Products) ─────────────────────── */ .section-cta { text-align: center; margin-top: 2.5rem; }