/* Base della pagina */
body.bg-backend, body.bg-backend #contentLAYOUT { background: #fff; }
body.bg-backend #headerLAYOUT, body.bg-backend #asideLAYOUT { background: #fff; color: #19251e; }
body.profile-view, body.profile-view #contentLAYOUT { background: #fff; }

/* section.messages */
section.messages { background: #24513b; border: 0; font-size: 24px; text-transform: uppercase; height: 64px; display: flex; align-items: center; overflow: hidden; }
section.messages .section-list > .wrap { padding: 0 16px; }
section.messages a { color: inherit; text-decoration: none; }
section.messages a:hover, section.messages a:focus-visible { text-decoration: underline; }
section.messages .section-list:hover .wrap, section.messages .section-list:focus-within .wrap { animation-play-state: paused; }

/* nav.main (logo e account) */
.profile-topbar { width: 100%; height: 64px; border-bottom: 1px solid #dfe3df; display: flex; justify-content: space-between; align-items: center; padding: 0 24px; background: #fff; }
.profile-topbar-left { display: flex; align-items: center; gap: 24px; }
.profile-topbar .profile-logo { display: inline-flex; align-items: center; }
.profile-topbar .profile-logo img { display: block; width: 105px; height: auto; filter: brightness(0); }
.profile-topbar-logout { display: inline-flex; align-items: center; min-height: 32px; padding: 0 18px; border: 1px solid #111; border-radius: 8px; background: #fff; color: #111; font-size: 11px; font-weight: 600; text-decoration: none; text-transform: uppercase; }
.profile-topbar-logout:hover { background: #f5f5f5; color: #111; }
.profile-topbar-login { font-size: 11px; text-transform: uppercase; font-weight: 600; }
.profile-topbar-account { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.profile-topbar-name { font-size: 11px; font-weight: 200; text-transform: uppercase; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-topbar-account img { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; object-fit: cover; }
.profile-install { margin-top: 12px; }
.profile-install[hidden], .profile-install-hint[hidden] { display: none; }
.profile-install-button, .profile-install-extension { padding: 0; border: 0; background: none; color: #245645; font-size: 11px; font-weight: 600; text-decoration: underline; text-transform: uppercase; cursor: pointer; }
.profile-install-hint { margin: 8px 0 0; color: #222; font-size: 12px; line-height: 1.5; }

/* section.following */
section.following { border-bottom: 1px solid #e5e8e5; }
section.following .section-list { font-size: 10px; color: var(--wowall-grey); }
section.following .section-list > .wrap { padding: 16px 24px; gap: 18px; }
section.following .section-list .friend .image, section.following .section-list .search .image { width: 48px; height: 48px; border-radius: 50%; }
section.following .section-list .friend { position: relative; }
section.following .section-list .friend.has-new::after { position: absolute; top: 0; right: -2px; width: 14px; height: 14px; border-radius: 50%; background: #24513b; content: ''; }
section.following .section-list .search .image span.material-symbols-outlined { line-height: 48px; }
section.following .section-list .name { font-size: 10px; line-height: 1.2; text-transform: uppercase; color: var(--wowall-grey); }
section.following .section-list > .wrap { scrollbar-width: thin; }

/* section.profile */
section.profile { width: 100%; padding-top: 16px; }
section.profile > .row { width: 100%; padding: 0 24px; }
section.profile .col-full > .wrap { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-direction: row-reverse; }
section.profile .section-actions { flex: 0 0 auto; align-self: flex-start; }
section.profile .section-actions .actions { display: flex; align-items: flex-start; gap: 8px; }
section.profile .profile-visibility-form { margin: 0; }
section.profile .profile-visibility-button { display: inline-flex; align-items: center; gap: 6px; }
section.profile .profile-visibility-button .material-symbols-outlined { font-size: 16px; line-height: 1; }
section.profile .section-actions .actions > a, section.profile .section-share button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 120px; min-height: 32px; padding: 0 18px; border: 1px solid #24513b; border-radius: 8px; background: #24513b; color: #fff; font-size: 11px; font-weight: 600; text-align: center; text-transform: uppercase; text-decoration: none; cursor: pointer; }
section.profile .section-actions .actions > a:hover, section.profile .section-share .share-button:hover { background: #193d2c; border-color: #193d2c; }
section.profile .section-share { display: grid; grid-template-columns: max-content; gap: 8px; }
section.profile .section-share::before { content: attr(data-reset-label); grid-area: 1 / 1; visibility: hidden; box-sizing: border-box; padding: 0 18px; border: 1px solid transparent; font-size: 11px; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
section.profile .section-share .share-button { grid-area: 1 / 1; width: 100%; }
section.profile .section-share .share-reset { grid-area: 2 / 1; width: 100%; }
section.profile .section-share button[hidden] { display: none; }
section.profile .section-share .share-reset { background: #fff; border: 1px solid #24513b; color: #24513b; }
section.profile .section-share .share-reset:hover { background: #eef3f0; }
section.profile .section-share button:disabled { opacity: .6; cursor: default; }
section.profile .section-user { min-width: 0; }
section.profile .section-user > .wrap { align-items: flex-start; gap: 18px; }
section.profile .section-user .left .image { width: 72px; height: 72px; border-radius: 50%; }
section.profile .section-user .right .user { font-size: 20px; letter-spacing: -.02em; }
section.profile .section-user .right .counters { margin-top: 7px; gap: 15px; }
section.profile .section-user .right .counters span { display: inline; }
section.profile .section-user .right .description { margin-top: 7px; font-size: 11px; max-width: 680px; }
section.profile .section-user.margin-top-1 { margin-top: 0; }
section.profile .section-user > .wrap { padding: 0 !important; }
body.profile-view section.profile .section-user .right .description { text-transform: uppercase; }
body.profile-view section.profile .section-user .right .counters { font-size: 11px; }
section.profile .section-user .right .counters { flex-wrap: wrap; line-height: 1.3; }
section.profile .section-user .right .counters > * { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 64px; padding: 0; color: var(--dark); font-size: 11px; line-height: 1.2; text-align: left; text-transform: uppercase; }
section.profile .section-user .right .counters > * > span:first-child { display: block; font-size: 18px; font-weight: 700; }
section.profile .section-user .right .counters button { border: 0; background: transparent; cursor: pointer; }
section.profile .section-user .right .counters button:hover > span:last-child { text-decoration: underline; }
section.profile .section-actions .actions button[action="follow"] { min-width: 108px; }
body.profile-view section.profile :not(.material-symbols-outlined) { font-size: 11px; }
body.profile-view section.profile .section-user .right .user { font-size: 20px; }

/* section.bookmarks-navigation */
section.bookmarks-navigation { width: 100%; height: 64px; margin-top: 64px; display: flex; align-items: center; }
section.bookmarks-navigation > .row { width: 100%; padding: 0 24px; }
section.bookmarks-navigation .section-categories.margin-top-1 { margin-top: 0; }
body.profile-view section.bookmarks-navigation :not(.material-symbols-outlined) { font-size: 11px; }
section.bookmarks-navigation .section-categories > .wrap { gap: 22px; overflow-x: auto; white-space: nowrap; padding-bottom: 10px; }
section.bookmarks-navigation .section-categories button, section.bookmarks-navigation .section-categories span.current { font-size: 11px; border: 0 !important; border-bottom: 0 !important; text-decoration: none; }
section.bookmarks-navigation .section-categories button.categories { margin-right: 16px; color: #8c8f8d; }
section.bookmarks-navigation .section-categories .category-separator { color: #8c8f8d; font-size: 16px; line-height: 1; }
section.bookmarks-navigation .section-categories button:not(.categories):hover { text-decoration: underline; }
section.bookmarks-navigation .section-categories { border-radius: 0 !important; }
section.bookmarks-navigation .section-categories > .wrap { padding: 0 !important; }

/* section.bookmarks */
section.bookmarks > .row.margin-top-1 { margin-top: 0; }
body.profile-view section.bookmarks :not(.material-symbols-outlined) { font-size: 11px; }
section.bookmarks > .row { padding: 0 24px; column-gap: 12px; row-gap: 64px; justify-content: center; }
section.bookmarks > .row > .col-1 { width: calc((100% - 36px) / 4); max-width: 360px; }
section.bookmarks > .row > .col-2.bookmark-large-single { width: calc((100% - 36px) / 2 + 12px); max-width: 732px; }
section.bookmarks > .row > .col-2.bookmark-large-paired { width: calc((75% - 15px) / 2); max-width: 546px; }
section.bookmarks > .row > .bookmark-row-break { flex: 0 0 100%; height: 0; margin-bottom: -64px; }
section.bookmarks .section-product { border-radius: 0 !important; }
section.bookmarks .section-product > .wrap, section.bookmarks .section-category > .wrap { padding: 0 !important; }
.section-product .image { aspect-ratio: 3 / 4; padding: 10px; background-color: var(--wowall-card-grey); }
section.bookmarks .section-product .image.pan-vertical { animation: bookmark-pan-vertical 12s ease-in-out infinite alternate; }
section.bookmarks .section-product .image.pan-horizontal { animation: bookmark-pan-horizontal 12s ease-in-out infinite alternate; }
@keyframes bookmark-pan-vertical { from { background-position: 50% 0; } to { background-position: 50% 100%; } }
@keyframes bookmark-pan-horizontal { from { background-position: 0 50%; } to { background-position: 100% 50%; } }
.section-product .info { padding-top: 5px; font-size: 11px; gap: 8px; text-transform: uppercase; }
.section-product .info .title { font-size: 11px !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; 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 .over .top .right button, .section-product .image .over .bottom button { border-radius: 50%; }
section.bookmarks .section-product .image .over { font-size: 11px; text-transform: uppercase; }
section.bookmarks .section-product .image .over .top .left > * { padding: 3px 5px; }
section.bookmarks .section-product .image .over .top .left .favorite { display: none; }
section.bookmarks .section-product .image .over .top .right .group { display: flex; gap: 4px; }
section.bookmarks .section-product .image .over .top .right button, section.bookmarks .section-product .image .over .bottom button { width: 30px; min-width: 30px; height: 30px; line-height: 30px; }
section.bookmarks .section-product .image .over .top .right button .material-symbols-outlined, section.bookmarks .section-product .image .over .bottom button .material-symbols-outlined { font-size: 18px; line-height: 30px; }
section.bookmarks .section-category .image { aspect-ratio: 3 / 4; border-radius: 16px; padding: 12px; overflow: hidden; background-color: var(--wowall-green); cursor: pointer; }
section.bookmarks .section-category .image .over { position: relative; z-index: 1; }
section.bookmarks .section-category .image .over .bottom button,
section.bookmarks .section-category .image .over .bottom button:hover { font-size: 40px; font-weight: 400; text-transform: lowercase; background: transparent !important; color: var(--white); max-width: 100%; white-space: normal; word-break: break-all; line-height: 1; }
section.bookmarks .category-product-photos { position: absolute; z-index: 0; inset: 0; overflow: hidden; background: var(--wowall-green); pointer-events: none; }
section.bookmarks .category-product-photos::after { content: ''; position: absolute; z-index: 1; inset: 0; background: rgba(36, 86, 69, .85); pointer-events: none; }
section.bookmarks .category-product-photos img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
section.bookmarks .category-product-photos img.is-active { opacity: .9; }
section.bookmarks .category-product-photos img.pan-vertical { animation: category-pan-vertical 12s ease-in-out infinite alternate; }
section.bookmarks .category-product-photos img.pan-horizontal { animation: category-pan-horizontal 12s ease-in-out infinite alternate; }
@keyframes category-pan-vertical { from { object-position: 50% 0; } to { object-position: 50% 100%; } }
@keyframes category-pan-horizontal { from { object-position: 0 50%; } to { object-position: 100% 50%; } }
section.bookmarks .section-product .image .over .top .left .profile { max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
section.bookmarks .section-product .image .over .top .left .profile:hover { text-decoration: underline; }
body.profile-view section.bookmarks .section-category .image .over .bottom button { font-size: 40px; font-weight: 400; }

/* Profilo privato */
.profile-private-message { margin-top: 64px; padding: 16px 24px 64px; color: #000; font-size: 11px; text-transform: lowercase; }

/* Responsive e accessibilita */
@media (max-width: 1023px) {
  section.profile .col-full > .wrap { align-items: flex-start; flex-direction: column; }
  section.bookmarks > .row > .col-2.bookmark-large-single { width: 100%; max-width: none; }
  section.bookmarks > .row > .col-2.bookmark-large-paired { width: calc((100% - 12px) / 2); max-width: none; }
}
@media (max-width: 767px) {
  body.profile-view > .wrap { height: 100dvh; }
  section.profile .col-full > .wrap { flex-direction: column-reverse; align-items: stretch; }
  section.profile .section-actions { align-self: stretch; }
  section.profile .section-actions .actions { flex-wrap: wrap; }
  section.bookmarks-navigation { margin-top: 0; }
  .profile-topbar { height: 64px; padding-inline: 24px; }
  .profile-topbar .profile-logo img { width: 86px; }
  .profile-topbar-left { flex: 0 0 auto; gap: 12px; }
  .profile-topbar-name { max-width: 70px; }
  section.bookmarks-navigation > .row { padding-left: 24px; padding-right: 24px; }
  section.profile > .row { padding-inline: 24px; }
  section.bookmarks > .row { padding: 0 16px; column-gap: 8px; }
  section.bookmarks > .row > .col-2.bookmark-large-single { width: 100%; }
  section.bookmarks > .row > .col-2.bookmark-large-paired { width: calc((100% - 8px) / 2); }
  section.profile .section-user .right .user { font-size: 18px; }
  section.profile .section-user .left .image { width: 56px; height: 56px; }
  body.profile-view section.profile .section-user .right .user { font-size: 18px; }
}
@media (max-width: 1010px) {
  section.bookmarks > .row > .col-1 { width: calc((100% - 24px) / 3); }
}
@media (max-width: 752px) {
  section.bookmarks > .row > .col-1 { width: calc((100% - 8px) / 2); }
}
@media(prefers-reduced-motion: reduce) {
  section.bookmarks .category-product-photos img { transition: none; }
  section.bookmarks .section-product .image, section.bookmarks .category-product-photos img { animation: none !important; }
}
section.bookmarks .section-product .image { position: relative; }
section.bookmarks .section-product .image .bookmark-layer-close { position: absolute; top: 10px; right: 10px; width: 30px; min-width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background-color: var(--white); color: #949494; }
section.bookmarks .section-product .image .bookmark-layer-close .material-symbols-outlined { font-size: 18px; line-height: 30px; }
section.bookmarks .section-product .image .over .bottom button.bookmark-copy { background-color: var(--wowall-green); color: var(--white); }
section.bookmarks .section-product .bookmark-copy-layer { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 10px; background-color: rgba(36, 86, 69, .85); color: var(--white); font-size: 11px; text-transform: uppercase; }
section.bookmarks .section-product .bookmark-copy-layer[hidden] { display: none; }
section.bookmarks .section-product .bookmark-copy-layer select { width: 100%; height: 32px; padding: 0 8px; border: none; background-color: var(--white); color: var(--dark); font-size: 11px; text-transform: uppercase; }

/* Transparency: affiliate / sponsored / gifted label, profile notice, edit-panel hint. */
.section-product .product-tag--disclosure { background: #E9FF70; color: #111; }
.section-product .product-tag--disclosure[hidden] { display: none; }
/* Referral code: "affiliate code" above, the code below, like a coupon. */
.section-product .product-tag--code { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; border: 1px dashed #111; background: #fff; color: #111; line-height: 1.2; }
.section-product .product-tag--code small { font-size: 8px; white-space: normal; text-align: right; overflow-wrap: anywhere; }
.section-product .product-tag--disclosure { white-space: normal; text-align: right; overflow-wrap: anywhere; }
.section-product .product-tag--code b { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: none; user-select: all; }
.section-product .product-tag--code[hidden] { display: none; }
.profile-notice { max-width: 560px; margin: 24px auto; padding: 0 16px; text-align: center; color: #666; font-size: 11px; line-height: 1.5; }
.profile-demo-legal { max-width: 560px; margin-top: 10px; font-size: 11px; line-height: 1.5; font-weight: 700; }
.profile-notice strong { color: var(--dark); font-weight: 400; }
.profile-notice a { color: inherit; text-decoration: underline; }
.bookmark-edit-disclosure { margin-top: 6px; }
.bookmark-edit-disclosure select { width: 100%; }
.bookmark-edit-hint { margin-top: 6px; font-size: 11px; line-height: 1.4; }
.bookmark-edit-hint[hidden] { display: none; }

/* Advertising card: same shape as a product, with a yellow border and label. */
section.bookmarks .section-product--ad .image { outline: 3px solid #E9FF70; outline-offset: -3px; }
.section-product .product-tag--ad { background: #E9FF70; color: #111; }

/* Admin link next to the account in the top bar (desktop only). */
.profile-topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 20px; min-width: 0; }
.profile-topbar-admin { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: #245645; }
@media (max-width: 1023px) {
  .profile-topbar-admin { display: none; }
}

/* Video uploaded for a bookmark: plays muted in place of the image */
.section-product .image .bookmark-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.section-product .image > .over { position: relative; z-index: 1; }

.profile-follow-panel { display: none; position: fixed; inset: 0 auto 0 0; z-index: 1500; width: min(100%, 400px); height: 100vh; height: 100dvh; overflow-y: auto; background: #fff; box-shadow: 8px 0 24px #0002; }
.profile-follow-panel-header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: #fff; border-bottom: 1px solid #dfe3df; }
.profile-follow-panel-header h2 { margin: 0; font-size: 14px; text-transform: uppercase; }
.profile-follow-panel-header button { border: 0; background: transparent; cursor: pointer; }
.profile-follow-requests { display: block; padding: 12px 24px; color: #24513b; font-size: 11px; font-weight: 600; text-decoration: underline; }
.profile-follow-featured, .profile-follow-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-bottom: 1px solid #eef0ee; }
.profile-follow-featured { background: #f5f8f6; font-size: 12px; font-weight: 600; }
.profile-follow-list { margin: 0; padding: 0; list-style: none; }
.profile-follow-person { display: flex; align-items: center; gap: 12px; min-width: 0; color: #19251e; font-size: 12px; font-weight: 600; text-decoration: none; }
.profile-follow-person img { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; object-fit: cover; }
.profile-follow-person span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-follow-action { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #24513b; border-radius: 8px; background: #24513b; color: #fff; font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer; }
.profile-follow-action[aria-pressed="true"] { background: #fff; color: #24513b; }
.profile-follow-action:disabled { opacity: .6; cursor: default; }
.profile-follow-empty { padding: 20px 24px; color: #66716a; font-size: 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; }