/* ========================================================= OHANNA — ndryshime custom Ngarko këtë file te: public_html/css/ohanna-custom.css Pastaj shto në të çdo faqeje (pas style.css): ========================================================= */ /* --------------------------------------------------------- 1) HIQ KATEGORITË NË MOBILE (ke hamburger menu gjithmonë) Sidebari me listën e kategorive fshihet nën 768px, që produktet të dalin menjëherë sipër pa u dashur scroll. --------------------------------------------------------- */ @media (max-width: 768px) { #shop-sidebar, .shop-sidebar { display: none !important; } .shop-layout { grid-template-columns: 1fr !important; gap: 0 !important; } } /* --------------------------------------------------------- 2) FIX I MODALIT — "X" gjithmonë i klikueshëm Problemi: te disa produkte modali bëhej më i lartë se ekrani, qendrohej në mes dhe pjesa e sipërme (X-ja) dilte jashtë ekranit pa mundësi scroll. Zgjidhja: modali kufizohet në 92vh, përmbajtja bëhet scroll brenda, X-ja rri ngjitur lart djathtas. --------------------------------------------------------- */ .product-modal { max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; } .product-modal .modal-inner { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; /* lejon scroll brenda flex */ } .product-modal .modal-close { position: absolute; top: 0.8rem; right: 0.8rem; z-index: 40; } /* siguri shtesë: overlay-i lejon scroll nëse ndonjë rast del i gjatë */ .product-modal-overlay { align-items: flex-start; } .product-modal-overlay .product-modal { margin: auto; /* qendrohet kur është më i shkurtër se ekrani */ } /* --------------------------------------------------------- 2b) FOTO E PLOTË (jo e prerë) + STACK I PASTËR NË MOBILE - Desktop: foto majtas, përshkrim djathtas (si më parë). - Mobile: foto SIPËR, përshkrim POSHTË (bllok të veçantë), e pamundur të mbivendosen; modali skrollohet nëse i gjatë. --------------------------------------------------------- */ .product-modal .modal-img-wrap { background: #fff; min-height: 0; } .product-modal .modal-img { object-fit: contain !important; width: 100% !important; height: auto !important; max-height: 60vh !important; min-height: 0 !important; } @media (max-width: 768px) { /* MODAL FULL-SCREEN në mobile -> nuk duken kartat pas tij */ .product-modal-overlay { padding: 0 !important; align-items: stretch !important; } .product-modal { max-width: 100% !important; width: 100% !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; } /* block stack -> foto dhe përshkrimi NUK mbivendosen kurrë */ .product-modal .modal-inner { display: block !important; padding-bottom: 24px; /* hapësirë që butonat të mos prerën */ } .product-modal .modal-img-wrap { width: 100%; min-height: 0 !important; max-height: 42vh !important; overflow: hidden !important; background: #fff !important; display: flex; align-items: center; justify-content: center; } .product-modal .modal-img { width: 100% !important; height: auto !important; max-height: 42vh !important; min-height: 0 !important; object-fit: contain !important; } .product-modal .modal-body { width: 100%; } } /* ========================================================= 3) STILET E SHPORTËS (cart) Përdoren nga ohanna-cart.js ========================================================= */ /* butoni notues i shportës (poshtë majtas, që të mos përplaset me butonin e WhatsApp-it që rri poshtë djathtas) */ .ohx-cart-fab { position: fixed; left: 20px; bottom: 20px; z-index: 9998; width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: #260026; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(38, 0, 38, 0.35); transition: transform 0.2s ease; } .ohx-cart-fab:hover { transform: scale(1.06); } .ohx-cart-fab svg { width: 24px; height: 24px; } .ohx-cart-fab .ohx-count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #d63384; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .ohx-cart-fab[data-empty="1"] .ohx-count { display: none; } /* butoni i vogël "+ Shportë" mbi çdo kartë produkti */ .ohx-add-grid { width: 100%; margin-top: 8px; padding: 9px 10px; border: 1px solid #260026; background: #fff; color: #260026; border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s ease, color 0.15s ease; } .ohx-add-grid:hover { background: #260026; color: #fff; } .ohx-add-grid.ohx-added { background: #2e7d32; border-color: #2e7d32; color: #fff; } /* butoni "Shto në shportë" brenda modalit */ .ohx-add-modal { width: 100%; margin-bottom: 10px; padding: 14px; border: 1px solid #260026; background: #fff; color: #260026; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .ohx-add-modal:hover { background: #260026; color: #fff; } .ohx-add-modal.ohx-added { background: #2e7d32; border-color: #2e7d32; color: #fff; } /* paneli (drawer) i shportës */ .ohx-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .ohx-overlay.ohx-open { opacity: 1; pointer-events: auto; } .ohx-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 380px; max-width: 90vw; background: #fff; z-index: 10001; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.28s ease; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2); } .ohx-drawer.ohx-open { transform: translateX(0); } .ohx-head { padding: 18px 20px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; } .ohx-head h3 { margin: 0; font-size: 18px; color: #260026; } .ohx-close-btn { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: #260026; } .ohx-items { flex: 1; overflow-y: auto; padding: 10px 16px; } .ohx-empty { text-align: center; color: #999; padding: 40px 10px; font-size: 14px; } .ohx-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1f1f1; } .ohx-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; background: #f5f5f5; flex-shrink: 0; } .ohx-item-info { flex: 1; min-width: 0; } .ohx-item-name { font-size: 13px; font-weight: 600; color: #260026; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ohx-item-price { font-size: 13px; color: #d63384; font-weight: 700; } .ohx-item-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .ohx-qty { display: flex; align-items: center; gap: 8px; } .ohx-qty button { width: 26px; height: 26px; border: 1px solid #ddd; background: #fff; border-radius: 5px; cursor: pointer; font-size: 15px; line-height: 1; color: #260026; } .ohx-qty span { min-width: 18px; text-align: center; font-size: 14px; } .ohx-remove { background: none; border: none; color: #c0392b; font-size: 12px; cursor: pointer; text-decoration: underline; } .ohx-foot { padding: 16px 20px; border-top: 1px solid #eee; } .ohx-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; color: #260026; margin-bottom: 12px; } .ohx-checkout { width: 100%; padding: 14px; border: none; border-radius: 8px; background: #25d366; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.04em; } .ohx-checkout:disabled { background: #bbb; cursor: not-allowed; } .ohx-checkout svg { width: 18px; height: 18px; }