body, #headerLAYOUT, #asideLAYOUT, #menuLAYOUT { background: var(--wowall-green); }

#headerLAYOUT { left: 0; width: 100%; }
#headerLAYOUT ul li.messages { color: var(--white); font-style: italic; /*font-size: 16px; line-height: 16px; font-weight: 200; text-transform: uppercase;*/ }
#headerLAYOUT ul li.messages .list { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 32px; align-items: center; }
#contentLAYOUT { margin-left: 0px; }




section.messages { border-top: 1px solid var(--white); background-color: var(--wowall-green); color: var(--white); font-size: 24px; }
section.messages > .row { padding: 0; overflow-x: auto; }
section.messages .section-list { overflow: hidden; white-space: nowrap; }
section.messages .section-list > .wrap { padding: 16px; }
section.messages .section-list .wrap { display: inline-flex; animation: marquee 40s linear infinite; }
section.messages .section-list .wrap > div { padding-right: 60px; }
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}




section.following { border-bottom: 1px solid var(--wowall-green); }
section.following > .row { padding: 0; }
section.following .section-list { border-radius: 0; font-size: 12px; line-height: normal;  }
section.following .section-list > .wrap { padding: 16px; display: flex; flex-wrap: nowrap; align-items: flex-start; text-transform: uppercase; line-height: normal; flex-direction: row; gap: 24px; overflow: auto; }
section.following .section-list .search { text-align: center; }
section.following .section-list .search .image { height: 64px; width: 64px; border-radius: 32px; }
section.following .section-list .search .image span.material-symbols-outlined { font-size: 32px; line-height: 64px; }
section.following .section-list .search .name { font-size: 10px; line-height: 10px; margin-top: 8px; font-weight: 300; text-transform: uppercase; }
section.following .section-list .friend { text-align: center; }
section.following .section-list .friend .image { height: 64px; width: 64px; border-radius: 32px; background-size: cover; background-repeat: no-repeat; background-position: center center; }
section.following .section-list .friend .name { font-size: 10px; line-height: 10px; margin-top: 8px; font-weight: 300; }


section.personal-navigation {  }
section.personal-navigation .section-personal-navigation > .wrap { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px; }
section.personal-navigation .section-personal-navigation .name { font-size: 22px !important; font-weight: 600; text-transform: initial; }
section.personal-navigation .section-personal-navigation .actions a,
section.personal-navigation .section-personal-navigation .actions button { text-transform: initial; }


section.bookmarks-user {  }
section.bookmarks-user .section-user > .wrap { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 16px; }
section.bookmarks-user .section-user .image { height: 80px; width: 80px; border-radius: 40px; background-size: cover; background-repeat: no-repeat; background-position: center center; }
section.bookmarks-user .section-user .actions { position: absolute; top: 0; right: 0; }
section.bookmarks-user .section-user .actions button { margin: 3px 0 3px 0px; text-align: center; width: 100%; }
section.bookmarks-user .section-user .user { font-size: 24px; color: var(--dark); font-weight: 600; }
section.bookmarks-user .section-user .description { line-height: 18px; text-transform: uppercase; }
section.bookmarks-user .section-user .counters { margin-top: 16px; display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 24px; font-size: 10px; line-height: 10px; text-transform: uppercase; }
section.bookmarks-user .section-user .counters span { font-weight: 500; color: var(--dark);  display: block; }




section.bookmarks-navigation {  }
section.bookmarks-navigation .section-categories { text-transform: uppercase; }
section.bookmarks-navigation .section-categories > .wrap { display: flex; flex-direction: row; align-items: center; gap: 20px; }
section.bookmarks-navigation .section-categories form.form-filter { display: none; }
section.bookmarks-navigation .section-categories button { text-transform: uppercase; }
section.bookmarks-navigation .section-categories button.categories { margin-right: 32px; }
section.bookmarks-navigation .section-categories span.material-symbols-outlined { }
section.bookmarks-navigation .section-categories span.current { color: var(--dark); font-weight: 600; }



section.bookmarks {  }
section.bookmarks > .row { justify-content: center; }

.section-product { }
.section-product .image { aspect-ratio: 9 / 16; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; padding: 24px; }
.section-product .image .over { display: flex;  flex-direction: column; flex-wrap: nowrap; justify-content: space-between; height: 100%; font-size: 12px; line-height: normal; text-transform: uppercase; flex-wrap: wrap; }
.section-product .image .over .top { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; }
.section-product .image .over .top .left { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 4px; }
.section-product .image .over .top .left .website { background-color: var(--white); padding: 4px 8px; }
.section-product .image .over .top .left .profile { background-color: var(--white); padding: 4px 8px; }
.section-product .image .over .top .left .favorite { background-color: var(--white); padding: 4px 8px; }
.section-product .image .over .top .right { display: flex; gap: 8px; flex-wrap: nowrap; flex-direction: column; align-items: flex-end; }
.section-product .image .over .top .right button { background-color: var(--white); color: #949494; height: 32px; width: 32px; border-radius: 16px; line-height: 32px; }
.section-product .image .over .bottom { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 8px; width: 100%; justify-content: center; }
.section-product .image .over .bottom button { background-color: var(--white); color: #949494; height: 32px; width: 32px; border-radius: 16px; line-height: 32px; }
.section-product .info { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; text-transform: uppercase; line-height: normal; color: var(--wowall-grey); }
.section-product .info .title { font-size: 12px !important; font-weight: 400 !important; }
.section-product .info .price { white-space: nowrap; }
.section-product .price-details { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.section-product .product-tag { display: inline-block; padding: 3px 6px; background: #111; color: #fff; font-size: 10px; white-space: nowrap; }
.section-product .product-tag--sale { background: #205547; }
.section-product .product-tag--sold-out { background: var(--wowall-card-grey); color: var(--dark); }
.section-product .product-tag--removed { background: #9b1c1c; color: #fff; }
.section-product .product-tag--extension { background: #fff; color: var(--dark); border: 1px solid currentColor; text-decoration: none; cursor: pointer; white-space: normal; text-align: right; }
.section-product .product-tag--extension:hover { background: var(--dark); color: #fff; }
.section-product .image--pending { position: relative; background-color: var(--wowall-card-grey); }
.section-product .image-pending { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; color: var(--dark); font-size: 11px; text-align: center; text-transform: uppercase; pointer-events: none; }

.section-product .image .source,
.section-product .image .action button.size,
.section-product .image .action button.delete { opacity: 0; }
.section-product:hover .image .source,
.section-product:hover .image .action button.size,
.section-product:hover .image .action button.delete { opacity: 1; }

.section-product .image .over .top button:hover,
.section-product .image .over .bottom button:hover { background-color: var(--wowall-green); color: var(--white); }


.section-category { width: 100%; }
.section-category .image { aspect-ratio: 9 / 16; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; padding: 24px; background-color: var(--dark); border-radius: 16px; }
.section-category .image .over { display: flex;  flex-direction: column; flex-wrap: nowrap; justify-content: space-between; height: 100%; font-size: 12px; line-height: normal; text-transform: uppercase; flex-wrap: wrap; }
.section-category .image .over .top { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; }
.section-category .image .over .top .left { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
.section-category .image .over .top .right { display: flex; gap: 8px; flex-wrap: nowrap; flex-direction: column; align-items: flex-end; }
.section-category .image .over .top .right button { background-color: var(--white); color: #949494; height: 32px; width: 32px; border-radius: 16px; line-height: 32px; }
.section-category .image .over .bottom button { font-size: 24px; font-weight: 600; line-height: 100%; color: var(--white); background-color: var(--dark); text-align: left; display: inline-flex; justify-content: flex-start; flex-wrap: nowrap; align-items: flex-end; word-break: break-all; text-transform: uppercase; }

.section-category .image .over .top button:hover,
.section-category .image .over .bottom button:hover { background-color: var(--wowall-green); color: var(--white); }








section.bookmark-new { position: sticky; bottom: 16px; max-width: 768px; margin-left: auto; margin-right: auto; }
section.bookmark-new .section-form { position: relative; background-color: var(--green-3); border-radius: 20px; }
section.bookmark-new .section-form > .wrap { padding: 0 !important; position: relative; }
section.bookmark-new .section-form input { background-color: transparent; border: none; height: 40px; padding: 0 56px 0 16px; width: 100%; }
section.bookmark-new .section-form .content button { position: absolute; bottom: 0px; right: 0px; line-height: 38px; display: inline-block; border: 0.5px solid #000000; border-radius: 20px; min-width: 38px; width: 40px; padding: 0px; text-align: center; background-color: #000000; color: #FFFFFF; font-size: 12px; font-weight: 300; vertical-align: middle; }
section.bookmark-new .section-form .content button span.material-symbols-outlined { vertical-align: middle; font-size: 24px; }
section.bookmark-new .section-form .content button:hover { background-color: var(--yellow); color: var(--dark); }




/* Full-height panel above the page (and above the add-product bar and the card layers). The page behind does not scroll
   while it is open (body.scroll-locked, set by the action-show/action-hide buttons): only this panel scrolls. */
section.bookmarks-categories { display: none; position: fixed; top: 0; left: 0; z-index: 1500; background-color: var(--white); height: 100vh; height: 100dvh; width: 100%; max-width: 400px;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; text-transform: uppercase; }

section.bookmarks-categories > .row { padding: 24px 0 24px 24px; }

section.bookmarks-categories .section-title > .wrap { display: flex;
    justify-content: space-between;
    align-items: center; padding: 8px 8px 16px 8px !important; }
section.bookmarks-categories .section-title .title { font-size: 14px !important; }

section.bookmarks-categories ul ul { padding: 0 0 0 24px; }


section.bookmarks-categories ul li { padding: 0; }
section.bookmarks-categories ul li button { text-transform: uppercase; }
section.bookmarks-categories ul li .view-mode,
section.bookmarks-categories ul li .edit-mode { display: flex; justify-content: space-between; align-items: center; }

section.bookmarks-categories ul li .view-mode .actions { opacity: 0; }



section.bookmarks-categories ul li .edit-mode { background-color: var(--green-2); }
section.bookmarks-categories ul li .edit-mode input { border: none;
    height: 40px;
    padding: 0 0 0 8px;
    background: transparent; }


section.bookmarks-categories ul li .view-mode:hover { background-color: var(--green-1); }
section.bookmarks-categories ul li .view-mode:hover .actions { opacity: 1; }

 
section.bookmarks-categories .section-info .info { line-height: normal; }





@media screen and (max-width: 767px) {
    section.bookmarks-user .section-user .actions { position: inherit; top: inherit; right: inherit; margin-top: 16px; }
    section.bookmarks .col-1 { width: calc(50% - 12px); }
}
/* Long titles (Zalando...) wrap inside the card, max 3 lines, and never push the price out of it. */
.section-product .info .title { flex: 1 1 0; min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.section-product .info .price-details { flex: 0 0 auto; }