/* styles.css */ /* version 2026-02-07 017 */ /* Uppdaterad med mobiltillägg 2025-12-31 kl 01:24 002*/ /* Uppdatering v003: Lagt till 4-kolumners produktgrid med tajt Tradera-style layout */ /* Uppdatering v008: FIXAT 3?4 kolumner! Ändrat #news-grid från auto-fit till repeat(4, 1fr) på rad 350 och 2105. Ökat .container max-width 1200?1400px. */ /* Uppdatering v009: FIXAT varje 4:e produkt blir stor! Lagt till #news-grid med 4 kolumner i tablet media query (769-1200px). Ökat max-width till 1600px på >1400px skärmar. */ /* Uppdatering v010: MOBIL FIXAT! Centrera paginering (flex + justify-center). Landscape mobil (<900px): 3 kolumner säkert. Tablet (901-1200px): 4 kolumner. */ /* Uppdatering v011: MOBIL OVERFLOW FIXAT! body overflow-x:hidden. #news-grid 2 kolumner !important på mobil (<768px). Paginering max-width:100%, mindre knappar mobil. get_products.php: 18?20 produkter. */ /* Uppdatering v012: Lagt till .nav-row-mobile CSS (display:flex, hamburgare + brödsmulor på samma rad mobil, dold desktop >801px). */ /* Uppdatering v013: FIXAT brödsmulor desktop! Desktop (>801px): Döljer BARA .hamburger (inte hela .nav-row-mobile) så breadcrumbs visas. */ /* Uppdatering v014: MOBIL GRID FIXAT MED CSS! Flyttade mobil media queries EFTER desktop-regel för korrekt cascade. Stående <768px: 2 kolumner. Liggande 769-900px: 3 kolumner. Desktop >900px: 4 kolumner. Högre specificitet (div#news-grid, body #news-grid) för override. */ /* Uppdatering v015: MOBIL GRID SUPER-OVERRIDE! Lagt till extra media query LÄNGST NER i filen med högsta specificitet (html body main div#news-grid). Använder 1fr 1fr istället för repeat() för klarhet. Detta garanterar LIKA kolumner mobil. */ /* Uppdatering v016: FIXAT globala .container! Återställt max-width till 1200px standard. Lagt till .index-page .container för 1400px/1600px BARA på index.php. Andra sidor påverkas inte längre. */ /* Uppdatering v017: EXTRA SÄKERHET för global container! Lagt till !important på .index-page .container, body:not(.index-page) .container för att GARANTERA att andra sidor alltid är 1200px. Tydliga kommentarer om att BARA index.php ska ha class="index-page". */ /* MOBIL: Flytta kundvagn längre NER */ @media (max-width: 768px) { #floating-cart, .floating-cart { bottom: 120px !important; top: auto !important; right: 10px !important; font-size: 11px !important; padding: 6px 10px !important; } } /* Grundstilar */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; min-height: 100vh; overflow-x: hidden; /* Förhindra horisontell scroll */ } .container { display: flex; max-width: 1200px; /* v017: Standard för ALLA sidor utom index.php */ margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: none; } /* v017: VIKTIGT - BARA index.php ska ha class="index-page" i tag! Alla andra sidor (t.ex. checkout.php, settings.php, about.php) ska INTE ha denna class. Detta ger index.php bredare layout för 4-kolumns produktgrid. */ /* v017: Bred container BARA på index.php för 4-kolumns layout */ .index-page .container { max-width: 1400px !important; } @media (min-width: 1400px) { .index-page .container { max-width: 1600px !important; } } /* v017: Säkerställ att ANDRA sidor (utan index-page class) alltid är 1200px */ body:not(.index-page) .container { max-width: 1200px !important; } /* FLEX LAYOUT FIX - Sidebar + Main side-by-side */ @media (min-width: 1000px) { .container { display: flex !important; flex-direction: row !important; align-items: flex-start !important; } #category-sidebar { flex-shrink: 0 !important; width: 220px !important; } main { flex: 1 !important; min-width: 0 !important; } } /* BRED CONTAINER på stora skärmar - Utnyttja hela bredden */ @media (min-width: 1400px) { .container { max-width: 1600px !important; } } h2, h3 { color: #333; font-family: 'Roboto', Arial, sans-serif; } a { color: #1A4C8C; text-decoration: none; } a:hover { text-decoration: underline; } /* Header-stilar */ header { background-color: #fff; padding: 0; position: relative; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .header-top { background-color: #1A4C8C; padding: 20px 0; position: relative; } header h1 { color: #fff; font-family: 'Roboto', Arial, sans-serif; font-weight: 700; font-size: 2.5em; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); margin: 0; padding: 10px 0; } .logo-link { text-decoration: none; } .wave { width: 100%; height: 40px; display: block; } .wave path { fill: #fff; } .search-account { display: flex; justify-content: center; margin-top: 10px; gap: 5px; z-index: 10; height: 40px; position: relative; } /* Justera för mobiler */ @media (max-width: 768px) { .search-account { display: flex; align-items: center; gap: 10px; } .search-form input[type="text"] { width: 120px; } } header { position: sticky; top: 0; z-index: 100; background-color: #1A4C8C; } .search-form { display: flex; align-items: center; background-color: #fff; border-radius: 4px; height: 32px; z-index: 11; position: relative; bottom: 0; } .search-form input { padding: 8px; border: none; outline: none; font-family: Arial, sans-serif; height: 100%; box-sizing: border-box; } .search-btn { display: flex; align-items: center; justify-content: center; background-color: #143C73; color: white; border: none; cursor: pointer; transition: background-color 0.3s; height: 100%; width: 32px; border-radius: 0 4px 4px 0; } .search-btn i { font-size: 0.9em; line-height: 1; } .search-btn:hover { background-color: #0F2A54; } .account-icon { display: flex; align-items: center; justify-content: center; background-color: #143C73; color: white; width: 32px; height: 32px; border-radius: 50% !important; transition: background-color 0.3s; z-index: 11; box-sizing: border-box; padding: 0; position: relative; bottom: 0; } .account-icon i { font-size: 0.8em; line-height: 1; } /* Firefox-specifik justering för andra sidor */ @-moz-document url-prefix() { .search-account .account-icon { bottom: -1px; } } .account-icon:hover { background-color: #0F2A54; } .account-icon.logged-in { border: 1px solid #fff; border-radius: 50% !important; } .cart-icon { color: #fff; font-size: 1.2em; margin-left: 5px; line-height: 1; display: inline-flex; align-items: center; text-decoration: none; position: relative; top: -3px; } .cart-icon:hover { color: #B0C4DE; } .cart-count { position: absolute; top: -8px; right: -8px; background-color: #ff4d4d; color: #fff; font-size: 0.7em; font-weight: bold; padding: 2px 5px; border-radius: 50%; min-width: 16px; text-align: center; line-height: 1; } /* Mobiljusteringar */ @media (max-width: 768px) { .cart-icon { font-size: 1.1em; margin-left: 0; top: -3px; } .cart-count { font-size: 0.6em; top: -6px; right: -6px; padding: 1px 4px; min-width: 14px; } } /* Sidopanel för kategorier */ #category-sidebar { width: 250px; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-right: 20px; } #category-sidebar h2 { font-size: 1.5em; margin-bottom: 20px; font-family: 'Roboto', Arial, sans-serif; } .sidebar-list { list-style: none; padding: 0; } .sidebar-list li { margin-bottom: 10px; } .sidebar-list a { display: block; padding: 10px; border-radius: 4px; color: #333; font-family: Arial, sans-serif; } .sidebar-list a:hover, .sidebar-list a.active { background-color: #1A4C8C; color: white; } /* Nav row för mobil - hamburgare + brödsmulor på samma rad */ .nav-row-mobile { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; } .nav-row-mobile #breadcrumbs { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Desktop: Dölj BARA hamburgaren (brödsmulor visas) */ @media (min-width: 801px) { .nav-row-mobile .hamburger { display: none !important; } } /* Hamburger-meny för mobiler */ .hamburger { display: none; flex-direction: column; cursor: pointer; margin-bottom: 20px; } .hamburger span { width: 25px; height: 3px; background-color: #333; margin: 2px 0; transition: all 0.3s; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } /* Huvudinnehåll */ main { flex: 1; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Filter */ #filters { margin-bottom: 20px; } .filter-container { display: flex; align-items: center; gap: 10px; } .filter-container label { font-weight: bold; font-family: Arial, sans-serif; } .filter-container select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: Arial, sans-serif; } /* Produktgrid */ #news-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 kolumner fast */ gap: 12px; /* Tajt som Tradera */ } .news-card { background-color: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 15px; text-align: center; box-shadow: none; } .news-card img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 10px; } .news-card h3 { font-size: 1.2em; margin: 10px 0; font-family: 'Roboto', Arial, sans-serif; } .news-card p { margin: 5px 0; color: #666; font-family: Arial, sans-serif; } .news-card .price { font-weight: bold; color: #1A4C8C; font-family: Arial, sans-serif; } /* Meddelanden från admin */ .closed-message { background-color: #f8d7da; color: #721c24; padding: 15px; border-radius: 4px; margin: 10px 0; text-align: center; width: 100%; box-sizing: border-box; } .general-message { background-color: #fff3cd; color: #856404; padding: 15px; margin: 10px 0; border: 1px solid #ffeeba; border-radius: 5px; text-align: center; } /* NYTT: Välkomstmeddelande */ .welcome-message { width: 100%; margin: 10px 0; padding: 10px; background-color: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 5px; text-align: center; } .welcome-message h3 { color: #2e7d32; font-family: 'Roboto', Arial, sans-serif; font-size: 1.5em; margin: 0; } /* NYTT: Knappgrupp för att placera knappar bredvid varandra */ .button-group { display: flex; justify-content: center; gap: 10px; margin-top: 10px; } /* NYTT: Stilar för Läs mer-knappen */ .read-more-btn { display: inline-flex; align-items: center; justify-content: center; background-color: #1A4C8C; color: white; text-decoration: none; font-family: Arial, sans-serif; font-size: 0.9em; padding: 8px 15px; border-radius: 5px; transition: background-color 0.3s ease, transform 0.1s ease; } .read-more-btn:hover { background-color: #143C73; transform: scale(1.05); } /* NYTT: Stilar för Lägg i kundvagn-knappen */ button.add-to-cart-btn { display: inline-flex; align-items: center; justify-content: center; background-color: #28A745 !important; color: white !important; text-decoration: none; font-family: Arial, sans-serif; font-size: 0.9em; padding: 8px 15px; border-radius: 5px; border: none; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; } button.add-to-cart-btn:hover { background-color: #218838 !important; transform: scale(1.05); } /* Paginering */ .pagination { margin-top: 20px; text-align: center; display: flex; justify-content: center; flex-wrap: wrap; padding: 0 10px; max-width: 100%; width: 100%; box-sizing: border-box; } .pagination a { display: inline-block; padding: 8px 12px; margin: 0 5px; border: 1px solid #ccc; border-radius: 4px; color: #333; font-family: Arial, sans-serif; } /* Mobil: Mindre pagination knappar */ @media (max-width: 768px) { .pagination a { padding: 6px 10px; margin: 0 3px; font-size: 14px; } } .pagination a.active, .pagination a:hover { background-color: #1A4C8C; color: white; border-color: #1A4C8C; } /* Formulärstilar */ .form-group { margin-bottom: 15px; } .form-group label { display: block; font-weight: bold; margin-bottom: 5px; font-family: Arial, sans-serif; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: Arial, sans-serif; } .form-group textarea { resize: vertical; min-height: 100px; } /* Generisk button-stil, men undvik att påverka .add-to-cart-btn */ button:not(.add-to-cart-btn) { background-color: #1A4C8C; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-family: Arial, sans-serif; } button:not(.add-to-cart-btn):hover { background-color: #143C73; } .error { color: #d32f2f; margin-bottom: 15px; font-family: Arial, sans-serif; } /* Responsiv design */ @media (max-width: 800px) { .container { flex-direction: column; } #category-sidebar { width: 100%; margin-right: 0; margin-bottom: 20px; } .hamburger { display: flex; } .sidebar-list { display: none; } .sidebar-list.active { display: block; } #news-grid { grid-template-columns: 1fr; } .sidebar-list a { padding: 8px; font-size: 0.9em; } } /* Bildkarusell */ .image-carousel { position: relative; width: 100%; max-height: 200px; overflow: hidden; border-radius: 0; } .image-carousel img { width: 100%; max-width: 100%; max-height: 200px; display: none; object-fit: contain; border-radius: 4px; } .carousel-prev, .carousel-next { position: absolute; top: 50%; transform: translateY(-50%); background: none; color: #ccc; border: none; padding: 10px; cursor: pointer; font-size: 1.2em; border-radius: 4px; font-family: Arial, sans-serif; opacity: 0.3; transition: opacity 0.3s ease; } .carousel-prev:hover, .carousel-next:hover { opacity: 0.6; } .carousel-prev { left: 10px; } .carousel-next { right: 10px; } .carousel-prev i, .carousel-next i { font-size: 1em; line-height: 1; } /* Knappar för Uppdatera och Radera */ .news-card .btn { display: inline-block !important; background-color: #1A4C8C !important; color: white !important; padding: 0.5em 1em !important; text-decoration: none !important; border-radius: 4px !important; margin-top: 0.5em !important; font-size: 0.9em !important; visibility: visible !important; font-family: Arial, sans-serif !important; } .news-card .btn:hover { background-color: #143C73 !important; } .news-card .btn-delete { display: inline-block !important; background-color: #d32f2f !important; color: white !important; padding: 0.5em 1em !important; text-decoration: none !important; border-radius: 4px !important; margin-top: 0.5em !important; margin-left: 0.5em !important; font-size: 0.9em !important; visibility: visible !important; font-family: Arial, sans-serif !important; } .news-card .btn-delete:hover { background-color: #b71c1c !important; } /* NYTT: Stilar för formulär och produktredigering */ .form-container { max-width: 600px; margin: 0 auto; padding: 20px; } .form-group img { display: block; max-width: 100px; max-height: 100px; object-fit: contain; margin: 5px 0; } .form-group div { margin-bottom: 10px; } /* Säkerställ att main inte kollapsar på produktsidor */ main { min-height: 400px; } /* Footer-stilar */ body footer { background-color: #1A4C8C; color: white; padding: 40px 20px; margin-top: 20px; } .footer-container { display: flex; flex-wrap: wrap; justify-content: space-around; max-width: 1200px; margin: 0 auto; } .footer-section { margin-bottom: 20px; min-width: 200px; } .footer-section h3 { font-family: 'Roboto', Arial, sans-serif; font-size: 1.2em; margin-bottom: 10px; color: #fff; } .footer-section p { margin: 5px 0; font-family: Arial, sans-serif; } .footer-section a { color: #fff; text-decoration: none; } .footer-section a:hover { text-decoration: underline; } .footer-bottom { background-color: #fff !important; text-align: center; padding: 10px 0; } .copyright { margin: 0; font-family: Arial, sans-serif; font-size: 0.8em; color: #000 !important; } .copyright-link { color: #000 !important; text-decoration: none; transition: color 0.3s ease, text-shadow 0.3s ease; } .copyright-link:hover { color: #B0C4DE; text-decoration: none !important; text-shadow: 0 0 5px rgba(176, 196, 222, 0.8); } /* NYTT: Stilar för kassan */ .checkout-container { max-width: 800px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .checkout-form { margin-top: 20px; } .cart-items { list-style: none; padding: 0; margin: 0 0 20px 0; } .cart-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #ddd; } .cart-item-title { flex: 1; font-weight: bold; color: #333; } .cart-item-actions { display: flex; align-items: center; gap: 10px; } .cart-item-price { font-weight: bold; color: #1A4C8C; } .update-quantity-form { display: flex; align-items: center; gap: 5px; } .quantity-input { width: 60px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; } .update-btn { background-color: #1A4C8C; color: white; padding: 5px 10px; font-size: 0.9em; } .update-btn:hover { background-color: #143C73; } .place-order-btn { display: block; width: 100%; padding: 12px; background-color: #1A4C8C; color: white; font-size: 1.1em; text-align: center; margin-top: 20px; } .place-order-btn:hover { background-color: #143C73; } @media (max-width: 600px) { .cart-item { flex-direction: column; align-items: flex-start; gap: 10px; } .cart-item-actions { flex-direction: column; align-items: flex-start; gap: 5px; } .update-quantity-form { width: 100%; } .quantity-input { width: 100%; } } .cart-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .cart-table th, .cart-table td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } .cart-table th { background-color: #f4f4f4; font-weight: bold; color: #333; } .cart-table td { vertical-align: middle; } .cart-table .quantity-input { width: 60px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; } .cart-table .update-btn, .cart-table .btn-delete { padding: 5px 10px; font-size: 0.9em; } @media (max-width: 600px) { .cart-table { font-size: 0.9em; } .cart-table th, .cart-table td { padding: 8px; } .cart-table .quantity-input { width: 50px; } } /* Ordrar visning */ .orders-container { max-width: 1200px; margin: 0 auto; padding: 20px; } .orders-table { width: 100%; border-collapse: collapse; margin-top: 20px; } .orders-table th, .orders-table td { padding: 10px; border: 1px solid #ddd; text-align: left; } .orders-table th { background-color: #f4f4f4; font-weight: bold; } .orders-table tr:nth-child(even) { background-color: #f9f9f9; } .orders-table tr:hover { background-color: #f1f1f1; } .btn { display: inline-block; padding: 8px 16px; background-color: #1A4C8C; color: white; text-decoration: none; border-radius: 4px; margin: 5px 0; transition: background-color 0.3s ease; } .btn:hover { background-color: #143C73; } .back-btn { background-color: #6c757d; } .back-btn:hover { background-color: #5a6268; } .error { color: red; margin-bottom: 15px; } .success { color: green; margin-bottom: 15px; } /* Admin-sidor */ .admin-container { max-width: 1000px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .orders-table, .order-items-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .orders-table th, .orders-table td, .order-items-table th, .order-items-table td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } .orders-table th, .order-items-table th { background-color: #f4f4f4; font-weight: bold; color: #333; } .orders-table td, .order-items-table td { vertical-align: middle; } .status-form { display: flex; align-items: center; gap: 10px; } .status-form select { padding: 5px; border: 1px solid #ccc; border-radius: 4px; } .order-info { margin-bottom: 20px; } .order-info p { margin: 5px 0; } .view-btn, .back-btn { background-color: #1A4C8C; color: white; padding: 8px 12px; text-decoration: none; border-radius: 4px; font-size: 0.9em; } .view-btn:hover, .back-btn:hover { background-color: #143C73; } .payment-btn { background-color: #4caf50; color: white; padding: 8px 12px; text-decoration: none; border-radius: 4px; font-size: 0.9em; margin-left: 5px; } .payment-btn:hover { background-color: #45a049; } .payment-form { margin: 20px 0; } .payment-form label { display: block; margin-bottom: 5px; font-weight: bold; } .payment-form input { width: 100%; max-width: 300px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; } .submit-btn { background-color: #4caf50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; } .submit-btn:hover { background-color: #45a049; } .success { color: #2e7d32; margin-bottom: 15px; font-family: Arial, sans-serif; } .error { color: #d32f2f; margin-bottom: 15px; font-family: Arial, sans-serif; } @media (max-width: 600px) { .orders-table, .order-items-table { font-size: 0.9em; } .orders-table th, .orders-table td, .order-items-table th, .order-items-table td { padding: 8px; } .status-form { flex-direction: column; align-items: flex-start; } .payment-form input { max-width: 100%; } } .print-btn { background-color: #666; color: white; margin-right: 10px; } .print-btn:hover { background-color: #555; } .profile-container { max-width: 600px; margin: 40px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .profile-form { display: flex; flex-direction: column; gap: 20px; } .form-group { display: flex; flex-direction: column; } .form-group label { font-weight: bold; margin-bottom: 5px; font-family: Arial, sans-serif; } .checkbox-group { display: flex; align-items: center; margin-bottom: 15px; width: 100%; text-align: left; } .form-group.checkbox-group { flex-direction: row; } .checkbox-group input[type="checkbox"], .checkbox-group .inline-label { display: inline-block; vertical-align: middle; } .checkbox-group input[type="checkbox"] { margin: 0; padding: 0; border: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 16px; height: 16px; background: #fff; border: 1px solid #ccc; vertical-align: middle; } .checkbox-group input[type="checkbox"]:checked { background: transparent; position: relative; } .checkbox-group input[type="checkbox"]:checked::after { content: '\2713'; position: absolute; top: 0; left: 3px; color: #000; font-size: 12px; } .checkbox-group .inline-label { margin-left: 20px; margin-top: 1mm; font-size: 16px; font-weight: bold; font-family: Arial, sans-serif; } /* Framgångsmeddelande när det gick som det skulle */ .success-message { background-color: #dff0d8; border: 1px solid #d6e9c6; padding: 15px; margin-bottom: 20px; color: #3c763d; border-radius: 4px; } .success-message div { margin-bottom: 5px; } .success-message div:last-child { margin-bottom: 0; } /* Har med bundle-erbjudanden att göra */ .offer-message { background-color: #e8f5e9; color: #2e7d32; padding: 10px; border-radius: 5px; margin: 10px 0; text-align: center; } /* Knappar för Uppdatera och Radera */ .btn { display: inline-block; background-color: #1A4C8C; color: white; padding: 0.5em 1em; text-decoration: none; border-radius: 4px; margin-top: 0.5em; font-size: 0.9em; font-family: Arial, sans-serif; transition: background-color 0.3s ease; } .btn:hover { background-color: #143C73; } .btn-delete { display: inline-block; background-color: #d32f2f; color: white; padding: 0.5em 1em; text-decoration: none; border-radius: 4px; margin-top: 0.5em; font-size: 0.9em; font-family: Arial, sans-serif; transition: background-color 0.3s ease; } .btn-delete:hover { background-color: #b71c1c; } /* Specifika justeringar för .news-card-kontexten */ .news-card .btn-delete { margin-left: 0.5em; } /* Förhindra horisontell skroll på hela sidan */ html, body { overflow-x: hidden; width: 100%; max-width: 100%; } /* Förbättra stabiliteten för checkout-container */ .checkout-container { max-width: 800px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); overflow-x: hidden; width: 100%; box-sizing: border-box; } /* Gör tabellen helt responsiv och undvik overflow */ .cart-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; table-layout: fixed; box-sizing: border-box; } .cart-table th, .cart-table td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; word-wrap: break-word; box-sizing: border-box; } /* Sätt specifika bredder för kolumner för att undvika overflow */ .cart-table th:nth-child(1), .cart-table td:nth-child(1) { width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cart-table th:nth-child(2), .cart-table td:nth-child(2) { width: 20%; } .cart-table th:nth-child(3), .cart-table td:nth-child(3) { width: 20%; } .cart-table th:nth-child(4), .cart-table td:nth-child(4) { width: 20%; } .cart-table th:nth-child(5), .cart-table td:nth-child(5) { width: 10%; } /* Gör tabellen staplad på små skärmar */ @media (max-width: 600px) { .cart-table { display: block; font-size: 0.9em; width: 100%; } .cart-table thead { display: none; } .cart-table tbody, .cart-table tr { display: block; } .cart-table tr { border-bottom: 2px solid #ddd; margin-bottom: 10px; display: block; } .cart-table td { display: flex; justify-content: space-between; align-items: center; padding: 8px; text-align: right; border-bottom: none; width: 100% !important; box-sizing: border-box; } .cart-table td:before { content: attr(data-label); font-weight: bold; text-align: left; flex: 1; } .cart-table td:nth-child(1) { font-weight: bold; } .cart-table .quantity-input { width: 100%; max-width: 60px; } .cart-table .update-btn, .cart-table .btn-delete { padding: 5px 10px; font-size: 0.9em; width: auto; } } /* Justera rabattkodsformuläret för att undvika overflow */ .form-group { margin-bottom: 15px; width: 100%; box-sizing: border-box; } .form-group label { display: block; font-weight: bold; margin-bottom: 5px; font-family: Arial, sans-serif; } .form-group input, .form-group textarea, .form-group select { width: 100%; max-width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: Arial, sans-serif; } .form-group div { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%; } @media (max-width: 600px) { .form-group div { flex-direction: column; align-items: stretch; } .form-group input#discount_code { width: 100%; } .form-group button { width: 100%; padding: 8px; } } /* Justera knapparna i button-group */ .button-group { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; width: 100%; box-sizing: border-box; } .place-order-btn, .back-btn { width: auto; padding: 12px 20px; font-size: 1em; text-align: center; border-radius: 4px; box-sizing: border-box; } @media (max-width: 600px) { .place-order-btn, .back-btn { width: 100%; padding: 10px; } } /* Förbättra order-summary för balanserad layout */ .order-summary { margin-top: 20px; padding: 15px; border-top: 1px solid #ddd; width: 100%; box-sizing: border-box; } .order-summary p { margin: 12px 0; line-height: 1.6; font-size: 1em; } .order-summary p strong { display: inline-block; width: 260px; /* Öka bredden något för att rymma långa etiketter */ white-space: normal; /* Tillåt radbrytning för att förhindra överlappning */ vertical-align: top; /* Justera vertikalt för att undvika konstiga hopp */ } .order-summary p span { display: inline-block; white-space: nowrap; vertical-align: top; } /* Justera för mobiler */ @media (max-width: 600px) { .order-summary p { margin: 10px 0; line-height: 1.5; } .order-summary p strong { width: 100%; /* Fyll hela bredden på mobilen */ margin-bottom: 5px; } .order-summary p span { width: 100%; } } /* Enhetlig stil för knappar i button-group */ .button-group button, .button-group a.btn { width: 150px; /* Fast bredd för enhetlighet */ padding: 10px; /* Matchar .place-order-btn */ font-size: 1em; /* Matchar .place-order-btn */ text-align: center; box-sizing: border-box; border-radius: 4px; /* Matchar .btn */ background-color: #1A4C8C; /* Primärfärg från .btn */ color: white; text-decoration: none; transition: background-color 0.3s ease; /* Matchar .btn */ } .button-group button:hover, .button-group a.btn:hover { background-color: #143C73; /* Hover från .btn */ } /* Fet stil för rubriker och mager stil för underpunkter */ .form-group > label { font-weight: bold; /* Redan definierat, bekräftar */ font-family: Arial, sans-serif; } .checkbox-group .inline-label { font-weight: normal; /* Magrare stil för underpunkter */ margin-left: 10px; /* Justera för layout */ font-size: 16px; /* Behåll från befintlig .checkbox-group .inline-label */ } /* Enhetlig stil för knappar i button-group */ .button-group button, .button-group a.btn { width: 150px; /* Fast bredd för enhetlighet */ padding: 10px; /* Matchar .place-order-btn */ font-size: 1em; /* Matchar .place-order-btn */ text-align: center; box-sizing: border-box; border-radius: 4px; /* Matchar .btn */ background-color: #1A4C8C; /* Primärfärg från .btn */ color: white; text-decoration: none; transition: background-color 0.3s ease; /* Matchar .btn */ } .button-group button:hover, .button-group a.btn:hover { background-color: #143C73; /* Hover från .btn */ } /* Fet stil för rubriker och mager stil för underpunkter */ .form-group > label { font-weight: bold; /* Redan definierat, bekräftar */ font-family: Arial, sans-serif; } .checkbox-group .inline-label { font-weight: normal; /* Magrare stil för underpunkter */ margin-left: 10px; /* Justera för layout */ font-size: 16px; /* Behåll från befintlig .checkbox-group .inline-label */ } /* Subtilt grått för placeholders */ .form-group input::placeholder, .form-group textarea::placeholder { color: #999; /* Subtilt grått */ opacity: 1; /* För Firefox-kompatibilitet */ } /* Admin-knappvarianter (2025-09-30-001) */ .admin-container .btn { background-color: #1A4C8C; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; margin: 3px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 500; transition: background-color 0.3s ease; height: 38px; line-height: 1; box-sizing: border-box; } .admin-container .btn:hover { background-color: #143C73; } .admin-container .top-buttons .btn { background-color: #1A4C8C !important; color: white !important; } .admin-container .top-buttons .btn:hover { background-color: #143C73 !important; } .admin-container .btn-success { background-color: #28A745 !important; color: white !important; } .admin-container .btn-success:hover { background-color: #218838 !important; } .admin-container .btn-danger { background-color: #d32f2f !important; color: white !important; } .admin-container .btn-warning { background-color: #ffc107 !important; color: #212529 !important; } .admin-container .btn-warning:hover { background-color: #e0a800 !important; } .admin-container .btn-small { background-color: #ffc107 !important; color: #212529 !important; padding: 6px 12px; font-size: 0.8em; border: none; border-radius: 4px; cursor: pointer; margin: 2px; font-weight: 500; transition: background-color 0.3s ease; } .admin-container .btn-small:hover { background-color: #e0a800 !important; } @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Open+Sans:wght@300;400&display=swap'); .seasonal-banner { position: relative; padding: 40px 20px; text-align: center; margin: 20px 0; border-radius: 20px; color: white; font-family: 'Open Sans', sans-serif; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); max-width: 100%; transition: transform 0.3s ease; } .seasonal-banner:hover { transform: scale(1.02); } .banner-content { position: relative; z-index: 2; } .icon { font-size: 4em; margin-bottom: 15px; opacity: 0.9; animation: fadeInUp 1s ease-out; } .banner-title { font-family: 'Playfair Display', serif; font-size: 1.8em; font-weight: 400; margin: 0; line-height: 1.4; letter-spacing: 1px; animation: fadeInUp 1s ease-out 0.2s both; } .decoration { position: absolute; font-size: 1.5em; opacity: 0.7; z-index: 1; animation: seasonalFloat 3s ease-in-out infinite; } .decoration:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; } .decoration:nth-child(2) { top: 20%; right: 15%; animation-delay: 1s; } .decoration:nth-child(3) { bottom: 15%; left: 20%; animation-delay: 2s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes seasonalFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(5deg); } } @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Open+Sans:wght@300;400&display=swap'); .seasonal-banner { position: relative; padding: 40px 20px; text-align: center; margin: 20px auto; /* Centrerar och ger luft runt om */ max-width: 800px; /* Begränsar bredden – ingen motorväg mer! */ border-radius: 20px; color: #333; /* Mörkare text för kontrast mot ljusa bakgrunder */ font-family: 'Open Sans', sans-serif; overflow: hidden; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Mjukare skugga */ transition: transform 0.3s ease; } .seasonal-banner:hover { transform: scale(1.02); } .banner-content { position: relative; z-index: 2; } .icon { font-size: 4em; margin-bottom: 15px; opacity: 0.95; animation: fadeInUp 1s ease-out; color: #333; /* Enhetlig ikonfärg för bättre läsbarhet */ } .banner-title { font-family: 'Playfair Display', serif; font-size: 1.8em; font-weight: 400; margin: 0; line-height: 1.4; letter-spacing: 1px; animation: fadeInUp 1s ease-out 0.2s both; color: #333; } .decoration { position: absolute; font-size: 1.5em; opacity: 0.8; z-index: 1; animation: seasonalFloat 3s ease-in-out infinite; color: #333; /* Basfärg, overrides per tema nedan */ } .decoration:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; } .decoration:nth-child(2) { top: 20%; right: 15%; animation-delay: 1s; } .decoration:nth-child(3) { bottom: 15%; left: 20%; animation-delay: 2s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes seasonalFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(5deg); } } @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Open+Sans:wght@300;400&display=swap'); .seasonal-banner { position: relative; padding: 15px 30px; /* Mindre vertikalt padding för slim känsla */ text-align: center; margin: 10px auto; /* Lite luft runt om */ max-width: 800px; border-radius: 15px; /* Lite rundare för mjukhet */ color: #333; font-family: 'Open Sans', sans-serif; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Lättare skugga, mindre dramatik */ transition: transform 0.3s ease; line-height: 1.2; /* Tätare radavstånd för kompakt höjd */ } .seasonal-banner:hover { transform: scale(1.01); /* Subtil hover, inget stort sväll */ } .banner-content { position: relative; z-index: 2; display: flex; align-items: center; /* Centrerar vertikalt för slimmad look */ justify-content: center; gap: 10px; /* Lite space mellan ikon och text */ } .icon { font-size: 2.5em; /* Mindre ikon, tar mindre plats */ margin: 0; /* Inget extra margin */ opacity: 0.95; animation: fadeInUp 0.8s ease-out; color: #333; flex-shrink: 0; /* Ikonen krymper inte */ } .banner-title { font-family: 'Playfair Display', serif; font-size: 1.2em; /* Mindre text för smalare profil */ font-weight: 400; margin: 0; letter-spacing: 0.5px; /* Mindre spacing */ animation: fadeInUp 0.8s ease-out 0.1s both; color: #333; white-space: nowrap; /* Förhindrar radbrytning för kompakt höjd */ } .decoration { position: absolute; font-size: 1em; /* Mindre dekorationer, mindre inverkan på höjd */ opacity: 0.6; z-index: 1; animation: seasonalFloat 3s ease-in-out infinite; color: #333; } .decoration:nth-child(1) { top: 5%; left: 5%; animation-delay: 0s; } .decoration:nth-child(2) { top: 10%; right: 10%; animation-delay: 1s; } .decoration:nth-child(3) { bottom: 5%; left: 15%; animation-delay: 2s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes seasonalFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-5px) rotate(3deg); } /* Mindre rörelse */ } /* Sommar – ljus och fräsch som en tropisk bris */ .sommar { background: linear-gradient(135deg, #87CEEB 0%, #98FB98 50%, #FFFACD 100%); color: #333; } .sommar .decoration { color: #FFEB3B; animation: seasonalFloat 4s ease-in-out infinite, sway 2s ease-in-out infinite alternate; } @keyframes sway { from { transform: translateX(-3px); } to { transform: translateX(3px); } /* Mindre svaj */ } /* Jul – mysig och ljus som snö i solljus */ .jul { background: linear-gradient(135deg, #E0F7FA 0%, #F8F4E6 50%, #FFCDD2 100%); position: relative; color: #333; } .jul::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml,') repeat; animation: snowFall 10s linear infinite; pointer-events: none; } .jul .decoration { color: #FF6B6B; } @keyframes snowFall { to { transform: translateY(100px); } } /* Nyår – gnistrande men ljus som midnattssol */ .nyar { background: linear-gradient(135deg, #E8EAF6 0%, #F3E5F5 50%, #FFF8E1 100%); position: relative; color: #333; } .nyar::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,215,0,0.4) 1px, transparent 1px); background-size: 20px 20px; animation: sparkle 2s linear infinite; } .nyar .decoration { color: #FFA726; animation: seasonalFloat 2s ease-in-out infinite, pulse 1.5s ease-in-out infinite; } @keyframes sparkle { 0% { background-position: 0 0; } 100% { background-position: 20px 20px; } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } /* Mindre puls */ } /* Responsiv – ännu smalare på mobil */ @media (max-width: 768px) { .seasonal-banner { padding: 12px 20px; /* Extra slim på liten skärm */ margin: 8px auto; max-width: 95%; } .banner-title { font-size: 1.1em; } .icon { font-size: 2em; } } /* ============================================================================ 4-KOLUMNS PRODUKTGRID + TAJT TRADERA-STYLE ============================================================================ Tillagd: 2026-02-07 v003 ============================================================================ */ /* Produktgrid - huvudcontainer */ #products-container, #product-grid, .products-grid, .product-list-container { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 kolumner desktop */ gap: 12px; /* Tajt gap som Tradera */ padding: 0; margin: 20px 0; } /* Produktkort - tajt design */ .product-card, .product-item { background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; /* Små rundade hörn som Tradera */ padding: 8px; /* Minimal padding */ transition: box-shadow 0.2s, transform 0.1s; cursor: pointer; } .product-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15); transform: translateY(-2px); } /* Produktbild - kvadratisk */ .product-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; /* Kvadratisk bild */ object-fit: cover; border-radius: 4px 4px 0 0; display: block; } /* Produkttitel - kompakt */ .product-card h3, .product-card .product-title { font-size: 13px !important; /* Mindre text som Tradera */ line-height: 1.3 !important; margin: 6px 0 4px 0 !important; font-weight: 500; color: #333; /* Max 2 rader */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 34px; /* Håll höjd konsistent */ } /* Pris - framträdande */ .product-card .price, .product-card .product-price { font-size: 16px !important; font-weight: 700; color: #000; margin: 4px 0; } /* Metadata (lager, betyg etc) - kompakt */ .product-card .product-meta, .product-card .stock-info, .product-card .rating { font-size: 11px; color: #666; margin: 2px 0; } /* Knappar - mindre */ .product-card .btn, .product-card button { font-size: 12px !important; padding: 6px 12px !important; margin-top: 6px; } /* ============================================================================ RESPONSIV LAYOUT ============================================================================ */ /* Mobil landscape: 3 kolumner (säkrast för små skärmar) */ @media (max-width: 900px) { #news-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; } } /* Tablet: 3 kolumner */ @media (min-width: 769px) and (max-width: 1200px) { #products-container, #product-grid, .products-grid, .product-list-container { grid-template-columns: repeat(3, 1fr); gap: 10px; } } /* Tablet/Desktop: 4 kolumner för #news-grid (901px och uppåt) */ @media (min-width: 901px) and (max-width: 1200px) { #news-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; } } /* Mobil: 2 kolumner */ @media (max-width: 768px) { #products-container, #product-grid, .products-grid, .product-list-container { grid-template-columns: repeat(2, 1fr); gap: 8px; } /* #news-grid MÅSTE ha 2 kolumner på mobil */ #news-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; max-width: 100vw !important; width: 100% !important; } .product-card { padding: 6px; } .product-card h3 { font-size: 12px !important; min-height: 30px; } .product-card .price { font-size: 14px !important; } } /* Mycket stora skärmar: 5 kolumner (valfritt) */ @media (min-width: 1600px) { #products-container, #product-grid, .products-grid, .product-list-container { grid-template-columns: repeat(5, 1fr); } } /* ============================================================================ BOOST-PRODUKTER (behåll markering) ============================================================================ */ /* .boost-border, .product-card.boosted { border: 2px solid #ffc107 !important; box-shadow: 0 0 8px rgba(255, 193, 7, 0.3); } */ /* ============================================================================ 4-KOLUMNERS GRID FÖR #NEWS-GRID (DESKTOP) ============================================================================ */ #news-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; /* 4 fasta kolumner desktop */ gap: 12px !important; } /* ============================================================================ MOBIL OVERRIDES - MÅSTE KOMMA EFTER DESKTOP! ============================================================================ */ /* Mobil liggande: 3 kolumner (769-900px) */ @media only screen and (min-width: 769px) and (max-width: 900px) { div#news-grid, #news-grid.news-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; max-width: 100vw !important; width: 100% !important; } .news-card { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } } /* Mobil stående: 2 kolumner (<768px) - HÖGSTA PRIORITET! */ @media only screen and (max-width: 768px) { div#news-grid, #news-grid.news-grid, body #news-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; max-width: 100vw !important; width: 100% !important; } .news-card { width: 100% !important; max-width: none !important; box-sizing: border-box !important; padding: 8px !important; } .news-card img { width: 100% !important; max-width: 100% !important; height: auto !important; } } /* END: 4-kolumns produktgrid 2026-02-07 v008 */ /* ============================================================================ MOBIL GRID SUPER-OVERRIDE - LÄNGST NER FÖR HÖGSTA PRIORITET! v015: Denna regel måste vinna över ALLA andra ============================================================================ */ /* Mobil stående: 2 LIKA kolumner */ @media only screen and (max-width: 768px) { html body main div#news-grid, html body div#news-grid, body main #news-grid, #news-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; /* 2 LIKA kolumner */ gap: 8px !important; max-width: 100vw !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } html body .news-card, body main .news-card, .news-card { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; padding: 8px !important; margin: 0 !important; } } /* Mobil liggande: 3 LIKA kolumner */ @media only screen and (min-width: 769px) and (max-width: 900px) { html body main div#news-grid, html body div#news-grid, body main #news-grid, #news-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; /* 3 LIKA kolumner */ gap: 10px !important; max-width: 100vw !important; width: 100% !important; } }