as the root,
then .autocomplete-results-container should be the one positioned.
Let's assume the structure from your template:
So, .autocomplete-results.box does NOT need position: absolute again.
*/
background-color: white;
border: 1px solid #dbdbdb; /* Bulma's $grey-lighter */
border-top: none; /* If directly under input with bottom border */
/* If there's a slight gap, you might want a top border or adjust margin-top of container */
/* border-top: 1px solid #dbdbdb; */
max-height: 400px;
overflow-y: auto;
box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); /* Bulma's standard dropdown shadow */
border-radius: 0 0 4px 4px; /* Rounded bottom corners if input is rounded */
padding: 0; /* Remove padding from box, .suggestion-item will have its own */
}
/* Make this rule more specific than the general navbar link rule */
#main-navbar #nav-autocomplete-target .suggestion-item, /* More specific */
#main-navbar #nav-autocomplete-target .suggestion-item:visited { /* Also style visited links */
display: flex;
align-items: center;
padding: 0.65rem 1rem;
border-bottom: 1px solid hsl(0, 0%, 96%);
text-decoration: none;
color: var(--bulma-text, #4a4a4a) !important; /* Force dark text initially for testing */
cursor: pointer;
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
#nav-autocomplete-target .suggestion-item:last-child {
border-bottom: none;
}
#nav-autocomplete-target .suggestion-item:hover,
#nav-autocomplete-target .suggestion-item.is-active { /* .is-active for keyboard navigation */
background-color: var(--bulma-link-light, hsl(217, 71%, 96%)); /* Bulma $link-light */
color: var(--bulma-link-hover, hsl(217, 71%, 48%)); /* Bulma $link-hover or $link-dark */
}
/* The text SPAN inside the suggestion item link */
#main-navbar #nav-autocomplete-target .suggestion-item .suggestion-term {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: inherit !important; /* Inherit from the .suggestion-item (which should now be dark) */
}
/* Icons within suggestion items */
#main-navbar #nav-autocomplete-target .suggestion-item .icon {
color: var(--bulma-grey, #7a7a7a);
flex-shrink: 0;
}
#main-navbar #nav-autocomplete-target .suggestion-item .icon i {
color: inherit;
}
#main-navbar #nav-autocomplete-target .suggestion-item:hover .icon,
#main-navbar #nav-autocomplete-target .suggestion-item.is-active .icon {
color: var(--bulma-link-hover, hsl(217, 71%, 48%)) !important;
}
#main-navbar #nav-autocomplete-target .suggestion-item:hover .icon i,
#main-navbar #nav-autocomplete-target .suggestion-item.is-active .icon i {
color: inherit !important;
}
#nav-autocomplete-target .suggestion-item .icon { /* For non-image icons like book, user */
color: var(--bulma-grey-light, #b5b5b5); /* Lighter grey for icons */
flex-shrink: 0;
}
/* Suggestion Term within the item */
#nav-autocomplete-target .suggestion-item .suggestion-term {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: inherit; /* This should now inherit the dark color from .suggestion-item */
}
#nav-autocomplete-target .suggestion-item .icon {
color: var(--bulma-grey, #7a7a7a); /* A neutral grey */
}
#nav-autocomplete-target .suggestion-item .icon i { /* If icons are nested deeper */
color: inherit; /* Inherit from .suggestion-item .icon */
}
#nav-autocomplete-target .suggestion-item:hover .icon,
#nav-autocomplete-target .suggestion-item.is-active .icon,
#nav-autocomplete-target .suggestion-item:hover .icon i,
#nav-autocomplete-target .suggestion-item.is-active .icon i {
color: var(--bulma-link-hover, hsl(217, 71%, 48%)); /* Match link hover color */
}
.suggestion-image { /* This is likely fine as its content is an image, not text */
width: 32px;
height: 42px;
object-fit: cover;
margin-right: 0.75rem;
border-radius: 2px;
background-color: #f5f5f5;
flex-shrink: 0;
}
/* Tags within suggestion items */
#main-navbar #nav-autocomplete-target .suggestion-item .tag {
flex-shrink: 0;
margin-left: 0.75rem;
font-size: 0.65rem;
padding: 0.2em 0.5em;
/* Ensure text color for light tags has enough contrast */
}
#main-navbar #nav-autocomplete-target .suggestion-item .tag.is-light {
color: var(--bulma-text-strong, #363636) !important;
}
#main-navbar #nav-autocomplete-target .suggestion-item .tag.is-info.is-light {
background-color: hsl(204, 86%, 96%);
color: hsl(204, 86%, 53%) !important;
}
/* Add similar for .is-success.is-light, .is-warning.is-light if needed */
.suggestion-divider {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
background-color: hsl(0, 0%, 86%);
}
#nav-autocomplete-target:empty {
display: none;
}
/* 7. Basket Count Badge */
.basket-count-tag {
position: absolute;
top: -5px;
right: -8px;
font-size: 0.7rem !important;
height: 18px;
width: 18px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
#nav-basket-icon-wrapper {
position: relative; /* Needed for absolute positioning of the badge */
}
/* 8. Basket Overlay Basic Styles (Needs more specific styling based on content) */
#basket-overlay {
position: fixed;
top: 0;
right: -400px; /* Start off-screen */
width: 350px; /* Or desired width */
max-width: 90%;
height: 100%;
background-color: white;
box-shadow: -4px 0 15px rgba(0,0,0,0.1);
z-index: 1030; /* Above navbar */
transition: right 0.3s ease-in-out;
overflow-y: auto;
padding: 20px;
/* Add display: flex; flex-direction: column; if needed for layout */
}
#basket-overlay.is-active { /* Class to toggle visibility */
right: 0;
}
/* Add styles for close button inside the overlay */
.basket-overlay-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
/* Style the button/icon */
}
/* Logo Styles */
.logo-text-brand {
font-family: var(--brand-family-headings); /* Use heading font */
font-weight: 700;
font-size: 1.6rem; /* Adjust size */
letter-spacing: -8px; /* Negative spacing */
color: var(--bulma-text-strong); /* Default color */
margin-right: 1rem; /* Space after logo */
padding-left: 0; /* Align left */
}
.logo-b {
color: var(--bulma-primary); /* Color for 'B' */
}
.logo-w {
color: var(--bulma-text-strong); /* Different color for 'W' */
}
.logo-and {
font-size: 1.1rem; /* Smaller ampersand */
color: var(--bulma-text-light);
margin: 0 -4px; /* Adjust spacing around & */
vertical-align: middle; /* Align better */
}
#main-navbar {
background-color: var(--bulma-primary-dark);
border-bottom: 1px solid var(--bulma-primary);
}
/* Logo Spacing */
.navbar-brand .navbar-item.logo-text-brand {
padding-left: 1rem; /* Or your preferred padding */
}
/* Make sure the navbar items (start, expanded, end) are properly aligned */
#main-navbar .navbar-menu {
align-items: stretch; /* Bulma default, but good to be aware of */
}
/* Search Bar Expansion & Styling */
.navbar-item.is-expanded {
flex-grow: 1; /* This is correctly making the navbar-item expand */
/* margin: 0 1rem; /* You have this, which adds space around the search item */
/* Ensure the search-container and form within it also expand */
display: flex; /* Make the navbar-item a flex container */
align-items: center; /* Vertically center its content (the search-container) */
}
.navbar-item.is-expanded > .search-container {
width: 100%; /* Make search-container take full width of navbar-item */
max-width: 600px; /* Optional: Set a max-width for the search bar itself if you don't want it too wide on very large screens */
margin-left: auto; /* Optional: If you want to center it within the expanded item */
margin-right: auto; /* Optional: If you want to center it within the expanded item */
}
.navbar-item.is-expanded > .search-container > form {
width: 100%; /* Make form take full width of search-container */
}
#navbar-search-form .field.has-addons {
width: 100%; /* Make the entire addons group take full width of the form */
}
/* .control.is-expanded within has-addons should make the input take remaining space */
/* Your existing #nav-search-input styling should work with this */
#nav-search-input {
border-radius: 20px 0 0 20px; /* Round left corners */
border-right-width: 0; /* Remove right border to join with button */
box-shadow: none; /* Remove default input shadow if any */
}
#nav-search-input:focus {
border-color: var(--bulma-primary);
box-shadow: 0 0 0 0.125em rgba(0, 128, 128, 0.25); /* Teal focus */
}
#navbar-search-form .field.has-addons .control:last-child .button {
border-radius: 0 20px 20px 0; /* Round right corners, flat left */
/* border-left: none; /* Add this if there's still a visible line */
}
/* --- Other Navbar Styles (Colors, Dropdowns, etc. from your previous CSS) --- */
/* (Keep your existing styles for .logo-text-brand, .navbar-item colors, dropdowns, basket, etc.) */
.logo-text-brand {
font-family: 'Merriweather', serif; /* Use heading font */
font-weight: 700;
font-size: 1.6rem; /* Adjust size */
letter-spacing: -2px; /* Negative spacing */
color: var(--bulma-primary-invert); /* Default color */
margin-right: 1rem; /* Space after logo */
/* padding-left: 0; /* Align left - covered by .navbar-brand .navbar-item.logo-text-brand */
}
.logo-b {
color: var(--bulma-primary); /* Color for 'B' */
}
.logo-w {
color: var(--bulma-primary-invert); /* Different color for 'W' */
}
.logo-and {
font-size: 1.1rem; /* Smaller ampersand */
color: var(--bulma-primary-invert);
margin: 0 -4px; /* Adjust spacing around & */
vertical-align: middle; /* Align better */
}
/* Ensure Navbar items, links, text, and icons are light/white */
#main-navbar .navbar-item,
#main-navbar .navbar-link,
#main-navbar .navbar-item a:not(.button), /* Target links directly if needed */
#main-navbar .icon, /* Target icons */
#main-navbar .logo-text-brand span /* Target logo parts if needed */
{
color: var(--bulma-primary-invert); /* White */
}
/* Specific override for navbar link hover/focus */
#main-navbar .navbar-item a:not(.button):hover,
#main-navbar .navbar-link:hover,
#main-navbar a.navbar-item:hover {
background-color: var(--bulma-primary); /* Lighter primary on hover */
color: var(--bulma-primary-invert); /* Keep text white */
}
/* Style the burger on mobile */
#main-navbar .navbar-burger span {
background-color: var(--bulma-primary-invert); /* White burger lines */
}
/* Override basket count tag color if needed for contrast */
#main-navbar #basket-count.tag {
background-color: var(--brand-accent); /* Example: Use accent color */
color: white; /* Ensure text is visible */
}
/* Remove hover background from account dropdown link */
#account-dropdown > .navbar-link:hover {
background-color: transparent !important;
}
#main-navbar .navbar-dropdown .navbar-item {
color: var(--bulma-text); /* Base dark text color */
}
#main-navbar .navbar-dropdown > .navbar-item,
#main-navbar .navbar-dropdown > a.navbar-item,
#main-navbar .navbar-dropdown .navbar-item a
{
color: var(--bulma-text) !important;
}
#main-navbar .navbar-dropdown .navbar-item span:not(.icon) {
color: var(--bulma-text);
}
#main-navbar .navbar-dropdown .navbar-item .icon {
color: var(--bulma-text-light);
}
#main-navbar .navbar-dropdown > .navbar-item:hover,
#main-navbar .navbar-dropdown > a.navbar-item:hover,
#main-navbar .navbar-dropdown .navbar-item a:hover {
background-color: var(--bulma-background);
color: var(--bulma-link);
}
#main-navbar .navbar-dropdown .navbar-item:hover span:not(.icon) {
color: var(--bulma-link);
}
#main-navbar .navbar-dropdown .navbar-item:hover .icon {
color: var(--bulma-link);
}
/* custom.css */
.genre-card {
position: relative;
overflow: hidden;
border-radius: var(--bulma-card-radius);
box-shadow: var(--bulma-card-shadow);
transition: transform 0.3s ease;
}
.genre-card:hover {
transform: scale(1.03);
}
.genre-card:hover .card-overlay {
/* Optional: Slightly darker gradient on hover */
background: linear-gradient(to top,
hsla(180, 100%, 25%, 0.9) 0%,
hsla(180, 100%, 25%, 0.1) 100%);
}
.genre-card .card-image img {
display: block;
object-fit: cover;
transition: filter 0.3s ease;
}
.genre-card:hover .card-image img {
filter: brightness(0.8); /* Darken image slightly on hover */
}
.genre-card .card-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
/* --- CHANGE GRADIENT --- */
/* Use primary color with transparency */
background: linear-gradient(to top,
hsla(180, 100%, 25%, 0.8) 0%, /* hsl(180, 100%, 25%) is Teal #008080 */
hsla(180, 100%, 25%, 0) 100%);
/* --- End CHANGE GRADIENT --- */
padding: 1.5rem 1rem 1rem 1rem;
text-align: center;
transition: background 0.3s ease; /* Smooth transition */
}
.genre-card .card-overlay .title {
margin-bottom: 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Lighter shadow */
}
a.genre-card-link:hover {
/* Optional: remove default link underline */
text-decoration: none;
}
/* footer */
.footer { /* Target the footer element */
background-color: var(--bulma-primary-dark); /* Dark Teal Background */
color: #e0e0e0; /* Light grey text for less important footer text */
border-top: 1px solid var(--bulma-primary); /* Optional: Subtle border */
padding-top: 2rem; /* Adjust padding if needed */
padding-bottom: 2rem;
}
/* Remove default list styling (bullets) from ul elements in the footer */
.footer ul {
list-style: none; /* Remove bullets/numbers */
margin-left: 0; /* Remove default browser indentation */
margin-top: 0.5em; /* Add some space below the heading */
}
/* Optional: Add spacing between list items */
.footer ul li {
margin-bottom: 0.3em;
}
/* Specific styling for the Newsletter button in the footer */
.footer button#footer-newsletter-trigger {
/* Make it stand out like the navbar one */
background-color: var(--brand-accent); /* Coral Accent */
border-color: transparent;
color: white; /* White text for contrast */
/* Ensure size is appropriate (remove is-small effect if needed) */
font-size: var(--bulma-button-font-size, 1rem);
height: var(--bulma-control-height, 2.5em);
padding-left: 1.2em;
padding-right: 1.2em;
font-weight: 600;
}
/* Footer newsletter button hover state */
.footer button#footer-newsletter-trigger:hover {
background-color: var(--brand-accent-light); /* Lighter Coral */
border-color: transparent;
color: white;
}
.footer button#footer-newsletter-trigger .icon i {
color: white;
}
/* Make titles and links in footer white */
.footer .title {
color: var(--bulma-primary-invert); /* White titles */
}
.footer a {
color: var(--bulma-primary-invert); /* White links */
}
.footer a:hover {
color: var(--bulma-primary-light); /* Lighter primary on hover */
text-decoration: underline;
}
#main-navbar .navbar-item button#newsletter-modal-trigger,
#main-navbar .navbar-item button#footer-newsletter-trigger /* Target footer one too if it's same ID/class */
{
/* Make it stand out! */
background-color: var(--brand-accent); /* Use Coral Accent */
border-color: transparent; /* Remove default border if not needed */
color: white; /* White text for contrast */
/* Remove 'is-small' class effect if present and use default size */
/* Alternatively, add 'is-normal' or 'is-medium' class in HTML */
font-size: var(--bulma-button-font-size, 1rem); /* Reset font size if is-small overrides */
height: var(--bulma-control-height, 2.5em); /* Reset height */
padding-left: 1.2em; /* Adjust padding if needed */
padding-right: 1.2em;
font-weight: 600; /* Make text slightly bolder */
/* Remove box-shadow inherited from general buttons if desired */
/* box-shadow: none; */
}
/* newsletter */
.newsletter-box {
position: relative;
max-width: 480px; /* Control modal width */
margin: auto;
padding: 2rem;
}
.newsletter-box .delete {
/* Position the close 'X' inside the box */
position: absolute;
top: 10px;
right: 10px;
}
#newsletter-messages .notification {
font-size: 0.9rem;
margin-bottom: 1rem;
}
/* Hide indicator initially */
#newsletter-spinner {
display: none;
}
/* Show indicator during HTMX request */
#newsletter-form.htmx-request #newsletter-spinner {
display: inline-block;
}
#newsletter-form.htmx-request button span:first-child {
margin-right: 0.5em; /* Add space when spinner shows */
}
/* Social Login Button Styling */
.social-buttons .button.socialaccount_provider {
text-decoration: none !important; /* Remove underline from link */
border: 1px solid #dbdbdb;
padding-left: 1em;
padding-right: 1em;
margin-bottom: 0.5rem; /* Spacing between buttons */
transition: all 0.2s ease-in-out;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.social-buttons .button.socialaccount_provider:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Specific Provider Styles */
.social-buttons .button.google {
background-color: #ffffff;
border-color: #dbdbdb;
color: #757575; /* Google grey */
}
.social-buttons .button.google:hover {
background-color: #f5f5f5;
border-color: #c0c0c0;
}
.social-buttons .button.google .icon {
color: #db4437; /* Google Red */
}
.social-buttons .button.facebook {
background-color: #4267B2; /* Facebook Blue */
border-color: #4267B2;
color: white;
}
.social-buttons .button.facebook:hover {
background-color: #365899;
border-color: #365899;
}
.social-buttons .button.facebook .icon {
color: white; /* Icon color matches text */
}
/* General Icon Styling within buttons */
.social-buttons .button .icon:first-child {
margin-right: 0.5em;
margin-left: -0.25em; /* Adjust spacing */
}
/* custom.css */
/* ... (keep existing styles) ... */
/* Login Form Specific Font Adjustments (if needed) */
.box form.login .label {
font-size: 1rem; /* Slightly larger labels */
font-weight: 600; /* Bolder labels */
/* color: var(--bulma-text-strong); */
}
.box form.login .input {
font-size: 1rem; /* Ensure input font size is adequate */
/* height: 2.75em; */ /* Adjust height if needed */
}
.box form.login .button.is-primary {
font-size: 1.1rem; /* Larger login button text */
/* padding: 0.75em 1.5em; */ /* Adjust padding */
}
.box form.login .help {
font-size: 0.9rem; /* Adjust help text size */
}
.box form.login .checkbox {
font-size: 0.95rem; /* Adjust checkbox text size */
}
/* Bestseller */
/* Ensure text inside bestseller section is readable */
.bestsellers-section.box,
.bestsellers-section.box .title,
.bestsellers-section.box p,
.bestsellers-section.box .card-content p { /* Target text within simplified card example */
color: var(--bulma-text-strong); /* Use dark text for readability on light teal */
}
.bestsellers-section.box .card-content a { /* Target link within simplified card example */
color: var(--bulma-link); /* Use dark teal link */
}
/* Optional: Style the compact cards used in bestsellers differently */
.bestsellers-section .card-bestseller {
background-color: white; /* Give cards inside a white background */
border-radius: 4px;
}
/* General adjustments */
.title {
/* Your existing styles might be here */
/* Let's make it a bit bolder and add some letter spacing */
font-weight: 700; /* '700' is the standard 'bold' for most fonts */
letter-spacing: -0.02em; /* Slightly tighten the letters for a more solid look */
}
.subtitle {
/* Your existing styles */
font-weight: 400; /* Ensure subtitles are regular weight to contrast with the bold title */
}
/* --- General Body Background --- */
/* Ensure body background is set (already done via variable but explicit is fine) */
body {
background-color: var(--bulma-background);
}
/* === Category Sidebar Tree === */
.category-sidebar .menu-list {
/* Basic Bulma menu list styling */
line-height: 1.25;
}
/* Remove ALL default list styling from ULand LI within the tree */
.category-sidebar ul.category-tree,
.category-sidebar ul.nested {
list-style: none !important; /* Force remove bullets/numbers */
margin-left: 0 !important; /* Force remove browser indentation */
padding-left: 0 !important;
}
.category-sidebar ul.category-tree li,
.category-sidebar ul.nested li {
padding-left: 0; /* Ensure LI itself has no padding causing misalignment */
margin-bottom: 0.1em;
}
.category-sidebar .menu-list a {
border-radius: 2px;
color: var(--bulma-text); /* Standard text color */
display: block;
padding: 0.5em 0.75em;
transition: background-color 0.1s ease-out, color 0.1s ease-out; /* Smooth hover */
position: relative; /* Needed for absolute positioning if ::before used complex alignment */
/* Add padding left to make space for the +/- */
padding-left: 1.75em;
}
.category-sidebar .menu-list a:hover {
background-color: var(--bulma-background);
color: var(--bulma-link-hover);
}
/* Style for the currently active category link */
.category-sidebar .menu-list a.is-active {
background-color: var(--bulma-primary); /* Primary background */
color: var(--bulma-primary-invert); /* White text */
font-weight: 600; /* Make active item bold */
}
/* Style for ancestor links (optional, subtle emphasis) */
.category-sidebar li.is-ancestor-category > a {
color: var(--bulma-link); /* Use link color for ancestors */
/* font-weight: 500; /* Slightly bolder */
}
.category-sidebar .menu-list a.is-active {
background-color: var(--bulma-primary);
color: var(--bulma-primary-invert);
font-weight: 600;
/* When active link is hovered, maybe keep it the same or slightly darken */
.category-sidebar .menu-list a.is-active:hover {
background-color: var(--bulma-primary-dark); /* Example: Darken on hover */
}
}
.category-sidebar li.is-ancestor-category > a {
color: var(--bulma-link);
}
.category-sidebar li.is-ancestor-category > a {
color: var(--bulma-link);
}
/* --- Add +/- Signs using ::before --- */
/* Target the link INSIDE list items that HAVE children */
.category-sidebar li.has-children > a::before {
content: '+';
display: inline-block;
position: absolute;
left: 0.75em;
top: 0.5em; /* Adjust for vertical center */
line-height: 1.25; /* Match link line-height */
font-weight: bold;
color: var(--bulma-text-light);
width: 1em;
text-align: center;
transition: transform 0.2s ease-in-out; /* Add transition for rotation */
}
/* Change sign when the PARENT LI is expanded */
.category-sidebar li.has-children.is-expanded > a::before {
content: '−'; /* Minus sign */
}
/* --- Expansion & Indentation --- */
.category-sidebar ul ul.menu-list.nested {
display: none;
/* Remove left padding/margin/border here, apply to children LI or A */
padding-left: 0;
border-left: none;
margin-top: 0; /* Remove top/bottom margin on the UL */
margin-bottom: 0;
/* Add overflow hidden? Might clip oddly. */
/* overflow: hidden; */
}
/* Apply indentation to the LINKS inside nested lists */
.category-sidebar ul ul.menu-list.nested a {
padding-left: 2.75em; /* Increase padding for nested level (1.75em base + 1em indent) */
}
/* Apply further indentation for deeper levels */
.category-sidebar ul ul ul.menu-list.nested a {
padding-left: 3.75em; /* Base + 2em */
}
/* Add more levels if needed */
.category-sidebar ul ul ul ul.menu-list.nested a {
padding-left: 4.75em; /* Base + 3em */
}
/* Adjust position of +/- sign for nested items if needed */
.category-sidebar ul ul.menu-list.nested li.has-children > a::before {
left: 1.75em; /* Align with the increased padding */
}
.category-sidebar ul ul ul.menu-list.nested li.has-children > a::before {
left: 2.75em;
}
.category-sidebar ul ul ul ul.menu-list.nested li.has-children > a::before {
left: 3.75em;
}
.category-sidebar li.is-expanded > ul.menu-list.nested {
display: block;
}
/* Ensure the password toggle icon span receives mouse events */
.password-toggle {
pointer-events: auto !important; /* Override pointer-events: none; */
/* You can also put other styles like cursor and z-index here */
cursor: pointer;
z-index: 10; /* Ensure it's above other potential elements */
}
/* --- Basket Count Animation --- */
.basket-count-change {
animation: flashBasketCount 0.4s ease-out;
}
@keyframes flashBasketCount {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.7; }
}
/* --- Category Tree Menu --- */
.main-category-tree li a.category-node-link {
display: flex;
align-items: center;
padding: 0.5em 0.75em;
color: var(--bulma-text); /* Standard text color for links */
border-radius: var(--bulma-button-radius); /* Consistent with button radius */
}
.main-category-tree li a.category-node-link:hover {
background-color: var(--bulma-background); /* Subtle hover */
color: var(--bulma-link-hover);
}
/* Highlighting for the active category and its ancestors */
.main-category-tree li a.category-node-link.is-active.primary-highlight {
background-color: var(--bulma-primary);
color: var(--bulma-primary-invert);
font-weight: 600; /* Bulma's default is-active weight is often bold */
}
.main-category-tree li a.category-node-link.is-active.primary-highlight:hover {
background-color: var(--bulma-primary-dark);
}
/* Ensure nested active links also get highlight if needed */
.main-category-tree ul.submenu-list li a.category-node-link.is-active.primary-highlight {
background-color: var(--bulma-primary);
color: var(--bulma-primary-invert);
}
.main-category-tree .category-toggle-icon {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--bulma-text-light); /* Subtle color for icon */
transition: transform 0.2s ease-in-out; /* Smooth rotation if you use rotating icons */
}
.main-category-tree a.category-node-link:hover .category-toggle-icon {
color: var(--bulma-link-hover); /* Icon color changes with link hover */
}
.main-category-tree a.category-node-link.is-active.primary-highlight .category-toggle-icon {
color: var(--bulma-primary-invert); /* Icon color on active primary background */
}
.main-category-tree .submenu-list {
margin-left: 1.5em;
/* Bulma's 'is-hidden' class (display: none !important;) handles visibility */
}
.product-list-item.is-flex > .product-card {
height: 100%;
display: flex;
flex-direction: column;
width: 100%; /* Ensure it takes full width of the column */
}
/* Make the card fill the height of its column container */
.product-list-item > .card.product-card {
height: 100%;
/* The is-flex is-flex-direction-column on the card itself will then manage its internal content */
}
/* Styling for the product title link to handle multiple lines with ellipsis */
.product-card-title-link {
display: -webkit-box;
-webkit-line-clamp: 2; /* Still allow up to 2 lines for longer titles */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3; /* Or your preferred line height */
min-height: 1.3em; /* Set min-height to accommodate AT LEAST ONE line */
/* If a title becomes 2 lines, this element will expand up to the -webkit-line-clamp limit */
/* OR remove min-height altogether if you don't need to reserve a fixed space */
}
/* Style for the author line to handle multiple lines with ellipsis */
.product-author {
display: -webkit-box;
-webkit-line-clamp: 1; /* Show max 1 line for authors, or 2 if desired */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 1.2em; /* Approx height for 1 line of text */
line-height: 1.2em; /* Adjust line-height */
}
/* Increase size of icons within the action buttons */
.product-card-actions .button .icon {
font-size: 1.1rem; /* Increase this for larger icons */
/* The span.icon container might need adjustment if icons overflow */
vertical-align: middle; /* Helps with alignment if icon and text are different sizes */
}
/* Spacing for wrapped buttons in the multiline group */
.product-card-actions.is-grouped.is-grouped-multiline > .control {
margin-bottom: 0.5rem; /* Add some space when they wrap onto a new line */
}
/* Ensure product images don't distort and cover their area */
.product-card .card-image figure.image img {
object-fit: cover; /* 'contain' might be better if you don't want cropping */
width: 100%;
height: 100%;
}
/* Ensure the product card itself doesn't have weird min-widths from its content */
.product-card {
overflow: hidden; /* Helps if content tries to break out due to weird sizing */
}
/* Ensure columns in the product grid distribute space and align items by default */
.products-grid.columns.is-multiline {
align-items: stretch; /* This makes columns in a row stretch to the height of the tallest column */
}
/* --- 7. SPICY ANIMATIONS --- */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.6s ease-out forwards;
}
.fade-in-delay {
animation: fadeIn 0.6s ease-out 0.2s forwards;
opacity: 0; /* Start as invisible until animation begins */
}
/* A subtle lift effect for cards in the recommendation section */
.message .card:hover {
transform: translateY(-4px);
transition: transform 0.2s ease-in-out;
}
/* --- 8. FIX FOR COMPACT CARD ALIGNMENT --- */
/* This targets the column in the recommendation partial */
.message-body .column.is-flex {
/* This rule already exists in your main grid, we just ensure it applies here too */
padding: 0.75rem;
}
/* Ensure the compact card inside a flex column grows */
.message-body .is-flex .card-product-compact {
height: 100%;
display: flex;
flex-direction: column;
}
/* Make the content area grow and push the price to the bottom */
.card-product-compact .card-content {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-product-compact .card-content p.is-size-7 {
margin-top: auto; /* This pushes the price to the bottom */
}
/* HTMX indicators related styles*/
/* By default, the htmx-indicator inside a button is hidden */
.button .htmx-indicator {
display: none;
}
/* When a request is in flight, the 'htmx-request' class is added to the button */
.button.htmx-request .htmx-indicator {
display: flex; /* Show the spinner span */
}
.button.htmx-request .is-flex:not(.htmx-indicator) {
display: none !important; /* Hide the default content span */
}
/* ==========================================================================
Side Cart Overlay Styles (Responsive)
========================================================================== */
/* 1. THE BACKDROP (Covers the whole screen) */
.side-cart.is-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease;
}
.side-cart.is-overlay.is-active {
visibility: visible;
opacity: 1;
}
/* 2. THE CONTENT PANEL (Slides in from the right) */
.side-cart-content {
position: fixed;
top: 0;
right: 0;
height: 100%;
background-color: #ffffff;
box-shadow: -5px 0 15px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
/* --- RESPONSIVE WIDTH --- */
/* On desktop, it will be 400px wide. */
width: 400px;
/* But it can never be wider than 100% of the screen. */
max-width: 100%;
}
/* When the overlay is active, slide the panel into view. */
.side-cart.is-active .side-cart-content {
transform: translateX(0);
}
/* --- MEDIA QUERY FOR MOBILE DEVICES --- */
/* For screens smaller than 769px (Bulma's tablet breakpoint) */
@media screen and (max-width: 768px) {
.side-cart-content {
/* On mobile, we force the width to be a percentage of the screen */
width: 90%;
}
}
/* 3. INTERNAL STRUCTURE & ALIGNMENT FIX */
/* (This is the flexbox logic that prevents the title/image overlap) */
.side-cart-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid #dbdbdb;
display: flex;
justify-content: space-between;
align-items: center;
}
.side-cart-header .close-button {
cursor: pointer;
}
.side-cart-items {
flex-grow: 1;
overflow-y: auto;
padding: 1rem;
}
.side-cart-footer {
padding: 1.5rem;
border-top: 1px solid #dbdbdb;
background-color: #f7f7f7;
}
.cart-item {
display: flex;
align-items: center;
gap: 1rem;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid #f0f0f0;
}
.cart-item:last-child { border-bottom: none; }
.cart-item-image { flex-shrink: 0; }
.cart-item-details { flex-grow: 1; min-width: 0; }
.cart-item-details .title {
margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cart-item-remove { flex-shrink: 0; }
/* ==========================================================================
Chekout
========================================================================== */
.order-item {
display: flex;
align-items: center;
gap: 1.5rem; /* Space between elements */
padding: 1rem 0;
border-bottom: 1px solid #eee;
}
.order-item:last-child {
border-bottom: none;
}
.order-item-image {
flex-shrink: 0;
}
.order-item-details {
flex-grow: 1; /* Title and author take up available space */
}
.order-item-price {
flex-shrink: 0;
text-align: right;
min-width: 120px; /* Ensures prices align vertically */
}
fieldset.is-disabled {
opacity: 0.5;
pointer-events: none; /* Prevents clicks on the disabled fields */
}
/* ==========================================================================
Country selector dropdown
========================================================================== */
/* Country Selector Dropdown Styles */
#country-selector-wrapper {
position: relative;
}
#country-selector-wrapper input[name="country"] {
padding-right: 2.5rem; /* Make space for the icon */
}
#country-selector-wrapper .dropdown-icon {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none; /* Allow clicks to pass through to input */
color: #b5b5b5;
transition: transform 0.2s ease;
}
#country-selector-wrapper .dropdown-icon.is-active {
transform: translateY(-50%) rotate(180deg);
}
#country-selector-wrapper .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 300px;
overflow-y: auto;
z-index: 100;
display: none;
background: white;
border: 1px solid #dbdbdb;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-top: 2px;
}
#country-selector-wrapper .dropdown-menu.is-active {
display: block;
}
#country-selector-wrapper .dropdown-content {
padding: 0;
}
#country-selector-wrapper .dropdown-item {
cursor: pointer;
padding: 0.5rem 1rem;
border: none;
background: none;
width: 100%;
text-align: left;
display: block;
color: #4a4a4a;
text-decoration: none;
}
#country-selector-wrapper .dropdown-item:hover {
background-color: #f5f5f5;
}
#country-selector-wrapper .dropdown-item.is-active {
background-color: #3273dc;
color: white;
}
#country-selector-wrapper .dropdown-item[style*="color: #999"] {
cursor: default;
}
#country-selector-wrapper .dropdown-item[style*="color: #999"]:hover {
background-color: transparent;
}
/* ===================================================================== */
/* == Professional CSS for MPTT Category Tree (Corrected Indentation) == */
/* ===================================================================== */
/* --- 1. Structure & Alignment --- */
.menu-list a {
display: flex;
align-items: center;
}
.menu-list a .icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 1.2em; /* Fixed width for icon container */
}
/* Target ANY
that is inside another within the menu-list.
This rule is recursive and will apply to all levels of the tree. */
.menu-list ul ul {
/* 'em' is a relative unit, so each level will be indented relative to its parent */
padding-left: 1em;
margin-left: 0.75em;
border-left: 1px solid #dbdbdb; /* Subtle vertical guide line */
}
/* --- 2. Active State Styling (Using CSS Variables) --- */
.menu-list a.is-active {
background-color: #e0f2f1; /* Light teal background */
font-weight: 600;
border-right: 3px solid var(--bulma-primary);
}
.menu-list a.is-active span,
.menu-list a.is-active .icon i {
color: var(--bulma-primary-dark) !important;
}
.menu-list a.is-active:hover {
background-color: #cce9e7;
}
/* --- 3. Default (Non-Active) State --- */
.menu-list a {
color: var(--bulma-link);
}
.menu-list a:hover {
background-color: #f5f5f5;
color: var(--bulma-link-hover);
}
/* Slider styles */
/* ============================================
HERO SLIDER STYLES
Add this to your custom.css file
============================================ */
/* Slider Container */
#hero-slider-wrapper {
position: relative;
overflow: hidden;
}
#hero-slider-wrapper .slider-carousel {
position: relative;
width: 100%;
}
#hero-slider-wrapper .slider-item {
display: none;
position: relative;
width: 100%;
min-height: 500px;
}
#hero-slider-wrapper .slider-item.is-active {
display: block;
}
/* Background Styles */
#hero-slider-wrapper .hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
}
#hero-slider-wrapper .hero-video video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Content Wrapper */
#hero-slider-wrapper .slider-content-wrapper {
position: relative;
z-index: 2;
padding: 2rem;
border-radius: 8px;
max-width: 800px;
margin: 0 auto;
}
#hero-slider-wrapper .slider-content-wrapper.has-background-overlay {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
/* Vertical Alignment */
#hero-slider-wrapper .hero-body {
display: flex;
align-items: center;
}
#hero-slider-wrapper .vertical-align-fent {
align-self: flex-start;
margin-top: 3rem;
}
#hero-slider-wrapper .vertical-align-középen {
align-self: center;
}
#hero-slider-wrapper .vertical-align-alul {
align-self: flex-end;
margin-bottom: 3rem;
}
/* Horizontal Alignment */
#hero-slider-wrapper .horizontal-align-bal {
text-align: left;
margin-right: auto;
}
#hero-slider-wrapper .horizontal-align-középen {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#hero-slider-wrapper .horizontal-align-jobb {
text-align: right;
margin-left: auto;
}
/* Animation Classes */
#hero-slider-wrapper .animate-fade_in {
animation: sliderFadeIn 1s ease-in;
}
#hero-slider-wrapper .animate-slide_in_left {
animation: sliderSlideInLeft 0.8s ease-out;
}
#hero-slider-wrapper .animate-slide_in_right {
animation: sliderSlideInRight 0.8s ease-out;
}
#hero-slider-wrapper .animate-slide_in_up {
animation: sliderSlideInUp 0.8s ease-out;
}
#hero-slider-wrapper .animate-slide_in_down {
animation: sliderSlideInDown 0.8s ease-out;
}
/* Animation Keyframes */
@keyframes sliderFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes sliderSlideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes sliderSlideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes sliderSlideInUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes sliderSlideInDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Text Effects - Applied via JavaScript */
#hero-slider-wrapper .text-effects {
position: relative;
}
/* Product Image Positioning */
#hero-slider-wrapper .product-image-wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
max-width: 300px;
z-index: 1;
}
#hero-slider-wrapper .product-image-wrapper.position-bal {
left: 2rem;
}
#hero-slider-wrapper .product-image-wrapper.position-jobb {
right: 2rem;
}
#hero-slider-wrapper .product-image {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
/* Slider Navigation */
#hero-slider-wrapper .slider-navigation button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
cursor: pointer;
z-index: 10;
transition: background 0.3s;
}
#hero-slider-wrapper .slider-navigation button:hover {
background: rgba(255, 255, 255, 1);
}
#hero-slider-wrapper .slider-prev {
left: 1rem;
}
#hero-slider-wrapper .slider-next {
right: 1rem;
}
/* Slider Indicators */
#hero-slider-wrapper .slider-indicators {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
z-index: 10;
}
#hero-slider-wrapper .slider-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
transition: background 0.3s;
}
#hero-slider-wrapper .slider-indicator.is-active,
#hero-slider-wrapper .slider-indicator:hover {
background: rgba(255, 255, 255, 1);
}
/* Responsive */
@media screen and (max-width: 768px) {
#hero-slider-wrapper .slider-item {
min-height: 400px;
}
#hero-slider-wrapper .product-image-wrapper {
position: static;
transform: none;
margin: 2rem auto;
max-width: 200px;
}
#hero-slider-wrapper .slider-content-wrapper {
padding: 1rem;
}
#hero-slider-wrapper .slider-navigation button {
width: 40px;
height: 40px;
}
#hero-slider-wrapper .slider-prev {
left: 0.5rem;
}
#hero-slider-wrapper .slider-next {
right: 0.5rem;
}
}