/* =========================================================
   Header + Nav + Search + Overlays + Toasts + Modals + Share + Abstract
   Structure:
   0) Third-party overrides
   1) Global helpers (fixed html, skip-link, overflow)
   2) Header layout, logo, quick actions
   3) Primary nav (mobile sheet + desktop)
   4) User menu (avatar dropdown)
   5) Search bar (icon, inline, suggestions)
   6) Overlay
   7) Toasts
   8) Modals: Add-to-list / Share / Generic
   9) Checkbox list (custom checks)
   10) “New list” input (floating label)
   11) Share options
   12) Abstract section
   13) Google Ads (homepage)
   14) Media queries (mobile-first)
   15) Comments UI
   ========================================================= */


/* ===================================
   0) THIRD-PARTY OVERRIDES
   =================================== */
[data-sectionname="Header"] {
   min-height: unset !important;
}

.site_message_chat_welcome {
   display: none !important;
}

.addeventatc {
   z-index: unset !important;
}


/* ===================================
   1) GLOBAL HELPERS
   =================================== */
html,
body {
   overflow-x: hidden;
}

html.fixed {
   /* was HTML.fixed */
   overflow: hidden;
   width: 100%;
   height: 100%;
}

/* Accessible skip link */
.skip-link {
   position: absolute;
   top: -42px;
   left: 0;
   z-index: 100;
   padding: 8px 16px;
   background: var(--primary);
   color: var(--primary-content);
   text-decoration: none;
}

.skip-link:focus {
   top: 0;
}


/* ===================================
   2) HEADER LAYOUT, LOGO, QUICK ACTIONS
   =================================== */
.header {
   position: relative;
   z-index: 3;
   height: 61px;
   color: var(--dark-content);
   background-color: var(--primary);
}

.header .wrapper {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: .5rem;
}

/* Logo */
.header .logo-container {
   flex-shrink: 0;
   flex-grow: 1;
}

.header .logo-container img {
   content: var(--logo);
   width: auto;
   height: 18px;
}

/* Quick action buttons */
.nav-button {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 40px;
   flex-shrink: 0;
   border: none;
   border-radius: 50%;
}

.search-bar>.search-button,
.wishlist-link,
.login-button {
   position: relative;
   text-decoration: none;
   font-size: var(--text-lg);
   font-weight: 600;
   background-color: var(--base-04);
   color: var(--primary-focus);
   transition: var(--three);
}

.search-bar>.search-button:is(:hover, :focus),
.wishlist-link:is(:hover, :focus),
.login-button:is(:hover, :focus),
.search-bar.active .search-button {
   color: var(--dark-content);
   background-color: var(--dark-focus);
}

.search-bar>.search-button i {
   font-size: 22px;
   text-shadow: -.25px -.25px 0 var(--dark-01), .25px -.25px 0 var(--dark-01),
      -.25px .25px 0 var(--dark-01), .25px .25px 0 var(--dark-01);
}

.search-bar.active>.search-button .fa-magnifying-glass::before {
   content: "\f00d";
   /* Font Awesome 'X' (times) icon */
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   /* solid weight */
}

.wishlist-link i {
   font-size: 24px;
}

/* tiny plus badge */
.wishlist-link::before {
   content: "\2b";
   position: absolute;
   transform: translate(-.25px, -2px);
   font: 900 13px "Font Awesome 6 Free";
   color: var(--base-05);
   text-shadow: -.25px -.25px 0 var(--base-05), .25px -.25px 0 var(--base-05),
      -.25px .25px 0 var(--base-05), .25px .25px 0 var(--base-05);
}

/* Site message bell */
.header .site_message_button {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 31.5px;
   height: 31.5px;
   padding: 7px;
   border-radius: 50%;
   text-decoration: none;
   background-color: var(--dark-01);
   color: var(--dark-content);
   transition: var(--three);
}

.header .site_message_button:hover {
   background-color: var(--dark-focus);
}

.header .site_message_button_icon {
   content: url("");
   filter: invert(93%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(106%) contrast(106%);
}

.header .site_message_count {
   position: absolute;
   top: -.25rem;
   right: -.25rem;
   display: none;
   z-index: 1;
   width: 1.25rem;
   height: 1.25rem;
   border-radius: 50%;
   font-size: var(--text-xs);
   background-color: #ff5861;
   justify-content: center;
   align-content: center;
   flex-wrap: wrap;
}

.site_message_count.active {
   display: flex;
   color: #fff;
}

/* Login button */
.header .login-button {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 40px;
   padding: 0 1rem;
   border: none;
   border-radius: 8px;
}

/* User avatar icons */
.user-avatar {
   color: var(--base-04);
   background-color: var(--dark-01);
   /* fixed stray colon */
   text-decoration: none;
}

.dropdown-menu-button {
   background-color: var(--base-04);
   color: var(--primary-focus);
   /* fixed stray colon */
   transition: var(--three);
}

.dropdown-menu-button:hover,
.dropdown-menu-button:focus {
   color: var(--dark-content);
   background-color: var(--dark-focus);
}

.dropdown-menu-button:hover .hamburger span,
.dropdown-menu-button:focus .hamburger span {
   background-color: var(--dark-content);
}

.dropdown-menu-button i {
   font-size: 20px;
}

/* Hamburger animation */
.hamburger {
   position: relative;
   width: 25px;
   height: 20px;
   cursor: pointer;
   transform: scale(0.9);
}

.hamburger span {
   position: absolute;
   left: 0;
   width: 100%;
   height: 3px;
   background: var(--primary-focus);
   border-radius: 3px;
   transition: .3s ease;
}

.hamburger span:nth-child(1) {
   top: 0;
}

.hamburger span:nth-child(2) {
   top: 8px;
}

.hamburger span:nth-child(3) {
   top: 16px;
}

.header-nav.active~.dropdown-menu-button .hamburger span:nth-child(1) {
   top: 8px;
   transform: rotate(45deg);
}

.header-nav.active~.dropdown-menu-button .hamburger span:nth-child(2) {
   opacity: 0;
}

.header-nav.active~.dropdown-menu-button .hamburger span:nth-child(3) {
   top: 8px;
   transform: rotate(-45deg);
}


/* ===================================
   3) PRIMARY NAV (MOBILE-FIRST)
   =================================== */
.header .header-nav .logo-container {
   padding: .75rem;
   flex-grow: 0;
   height: 61px;
}

.header .header-nav img {
   content: var(--logo);
   height: 18px;
}

.header-nav {
   position: fixed;
   top: 0;
   left: -100%;
   bottom: 0;
   z-index: 101;
   display: flex;
   flex-direction: column;
   width: calc(100vw - 4.5rem);
   height: 100vh;
   margin: 0;
   list-style: none;
   background-color: var(--dark-focus);
   transition: var(--three);
   overflow: auto;
}

.header-nav.active {
   left: 0;
}

/* Top-level links and dropdown toggles */
.header-nav .dropbtn,
.dropdown-menu-container>a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   padding: .75rem 1rem;
   border: none;
   outline: none;
   text-decoration: none;
   background: transparent;
   color: #fff;
   font-size: var(--text-xl);
   pointer-events: none;
   transition: var(--three);
}

/*.header-nav :is(.dropbtn, .dropdown-menu-container > a):is(:hover, :focus) {
   background-color: rgb(0 0 0 / 33%);
}*/

/* Mobile dropdown panels */
.dropdown-content {
   /*max-height: 0;*/
   overflow: hidden;
   transition: var(--three);
}

.dropdown.active .dropdown-content {
   max-height: 2000px;
}

/* Arrow rotation */
.header-nav .dropdown .dropbtn i {
   transform: rotate(0);
   transition: var(--three);
   display: none;
}

.header-nav .dropdown.active .dropbtn i {
   transform: rotate(180deg);
}

/* Nested list items (mobile) */
.header-nav .dropdown-content a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: .75rem 1rem .75rem 3rem;
   text-decoration: none;
   font-size: var(--text-xl);
   color: #fff;
   /*background-color: rgb(0 0 0 / 33%);*/
   transition: var(--three);
}

.header-nav .dropdown-content a:is(:hover, :focus) {
   background-color: rgb(0 0 0 / 20%);
}

/* List structure reset */
.header-nav>li {
   position: relative;
   margin: 0;
}

.header-nav ul li {
   margin: 0;
}

.header-nav ul a {
   padding: 10px 15px;
   white-space: nowrap;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
   background: var(--background-pri-hover);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
   display: block;
}


/* ===================================
   4) USER MENU (AVATAR DROPDOWN)
   =================================== */
.header .user-menu {
   position: relative;
   top: 1px;
}

.header .user-menu .user-avatar i {
   font-size: 40px;
}

.header :is(.user-menu:hover .user-avatar, .login-avatar:hover) {
   color: var(--dark-01);
   background-color: var(--dark-content);
    border: 1px solid var(--dark-01);
}

/* Dropdown */
.header .user-menu ul {
   position: absolute;
   top: calc(100% + .25rem);
   right: 0;
   z-index: 999;
   display: flex;
   flex-direction: column;
   min-width: 160px;
   width: max-content;
   padding: 0;
   border-radius: .5rem;
   border: .5px solid var(--dark-01);
   background-color: var(--base-01);
   box-shadow: 0 4px 16px -4px rgba(0, 0, 0, .2);
   transition: var(--three);
   visibility: hidden;
   opacity: 0;
   transform: scale(.99) translateY(1rem);
}

.header .user-menu:hover ul {
   visibility: visible;
   opacity: 1;
   transform: scale(1) translateY(0);
}

.header .avatar-profile-link {
   display: flex;
   align-items: center;
   gap: .75rem;
   padding: .75rem 1rem;
   text-decoration: none;
   color: var(--dark-content);
   background-color: var(--dark-01);
   border-radius: .25rem .25rem 0 0;
   font-size: var(--text-lg);
}

.header .avatar-profile-link:hover {
   background-color: var(--dark-focus);
}

/* Avatar in the profile row */
.header .user-menu .avatar-profile-link .user-avatar {
   background-color: var(--primary-content);
   color: var(--primary-focus);
    border: 1px solid transparant;
    box-sizing: border-box;
}
}

.header .user-menu:hover .avatar-profile-link .user-avatar {
   background-color: var(--primary-content);
   color: var(--dark-focus);
   font-weight: 600;
   text-decoration: none;
}

.header .user-menu ul li {
   margin: 0;
}

.header .user-menu ul .user-link {
   display: flex;
   align-items: center;
   gap: .5rem;
   padding: .75rem 1rem;
   text-decoration: none;
   white-space: nowrap;
   background: transparent;
   color: var(--dark-01);
   font-weight: 500;
   font-size: var(--text-base);
}

.header .user-menu ul .user-link:hover {
   background-color: var(--base-03);
}

.header .user-menu li:last-of-type {
   border-top: 1px solid var(--border-color);
}

.header .user-menu li:last-of-type .user-link {
   border-radius: 0 0 .5rem .5rem;
}


/* ===================================
   5) SEARCH (ICON, INLINE, SUGGESTIONS)
   =================================== */

.visually-hidden {
   position: absolute !important;
   height: 1px;
   width: 1px;
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
   white-space: nowrap;
}

.search-bar input {
   padding: 5px;
   font-size: 16px;
}

.header .dropdown-search-container {
   position: fixed;
   left: 0;
   right: 0;
   top: 61px;
   transition: var(--three);
   z-index: 3;
   visibility: hidden;
   opacity: 0;
   background-color: var(--primary-focus);
   display: flex;
   flex-direction: column;
   gap: .5rem;
}

.header .active .dropdown-search-container {
   visibility: visible;
   opacity: 1;
}

.header form[role="search"] {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   justify-content: end;
   border-radius: 8px;
   transition: var(--five);
   flex-grow: 0;
}

.header .active .dropdown-search-container form[role="search"] {
   flex-grow: 1;
}

.header .dropdown-search-container input {
   flex-grow: 0;
   width: 0;
   height: 40px;
   border: 0;
   border-radius: 8px;
   background-color: var(--base-04);
   color: var(--primary-focus);
   font-size: var(--text-sm);
   transition: var(--three);
   visibility: hidden;
   opacity: 0;
}

.header .active .dropdown-search-container input {
   flex-grow: 1;
   padding-left: 1rem;
   visibility: visible;
   opacity: 1;
}

.header .dropdown-search-container input::-webkit-input-placeholder {
   color: var(--primary);
}

/* Inline search button */
#header_search_form .search-button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   border: 0;
   border-radius: 0 8px 8px 0;
   background-color: var(--base-04);
   color: var(--primary);
   transition: var(--three);
}

#header_search_form .search-button:is(:hover, :focus) {
   background-color: var(--dark-focus);
   color: var(--base-01);
}

.advanced-search-link:is(:hover, :focus) {
   background-color: var(--primary-focus);
}

.advanced-search-link {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 40px;
   padding: 0 1rem;
   border: none;
   border-radius: 8px;
   color: var(--dark-content);
   font-size: var(--text-lg);
   font-weight: 600;
   text-decoration: none;
}

/* Cancel link */
.header .dropdown-search-container .cancel-link {
   width: 70px;
   border-radius: 4px;
   border: 1px solid var(--dark-01);
   background: transparent;
   color: var(--dark-01);
   font-weight: 700;
   transition: var(--three);
}

.header .dropdown-search-container .cancel-link i {
   display: none;
}

.header .dropdown-search-container .cancel-link:hover {
   color: var(--base-emphasis);
}

/* Suggestions */
.header .dropdown-search-container .search-suggestions-container {
   position: absolute;
   left: 0;
   right: 0;
   top: 3.75rem;
   z-index: 1;
   display: flex;
   flex-direction: column;
   margin: 0 .75rem;
   min-width: 160px;
   padding: 0;
   border: .5px solid var(--primary);
   border-radius: .5rem;
   background-color: var(--base-01);
   box-shadow: 0 4px 16px -4px rgba(0, 0, 0, .2);
   transition: var(--three);
   overflow: hidden;
   visibility: hidden;
   opacity: 0;
   transform: scale(.99) translateY(1rem);
}

/*.header .active .dropdown-search-container .search-suggestions-container {
   visibility: visible;
   opacity: 1;
   transform: scale(1) translateY(0);
}*/

.header .dropdown-search-container .search-suggestion-link {
   display: -webkit-box;
   overflow: hidden;
   padding: .75rem 1rem;
   text-decoration: none;
   color: var(--primary);
   font-weight: 500;
   font-size: var(--text-sm);
   background: transparent;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
}

.header .dropdown-search-container .search-suggestion-link:hover {
   background-color: var(--base-03);
}

.header .dropdown-search-container .view-all-results-link {
   display: flex;
   align-items: center;
   width: fit-content;
   height: 2.5rem;
   margin: .75rem 1rem;
   padding: 0 1rem;
   text-decoration: none;
   background-color: var(--dark-01);
   color: var(--dark-content);
   transition: var(--three);
}

.header .dropdown-search-container .view-all-results-link:hover {
   background-color: var(--dark-focus);
}


/* ===================================
   6) OVERLAY
   =================================== */
.overlay {
   position: fixed;
   inset: 0;
   z-index: 2;
   background-color: #000;
   transition: var(--three);
   visibility: hidden;
   opacity: 0;
}

.overlay.active {
   visibility: visible;
   opacity: .7;
}


/* ===================================
   7) TOASTS
   =================================== */
.toast {
   position: fixed;
   left: 1rem;
   right: 1rem;
   bottom: -20%;
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: .5rem 1rem;
   border-left: .5rem solid transparent;
   border-radius: .5rem;
   background-color: var(--base-01);
   box-shadow: 0 4px 12px rgba(0, 0, 0, .33);
   transition: var(--five);
   z-index: 2;
   width: unset;
   font-family: var(--paragraph-font);
}

.toast.active {
   bottom: 1rem;
}

.toast i.indicator {
   width: 28.84px;
   display: flex;
}

.toast h3 {
   font-size: var(--text-base);
   font-weight: 600;
   color: var(--base-content);
}

.toast p {
   font-size: var(--text-sm);
   line-height: 1.5;
   color: var(--base-content);
}

.toast .toast-link {
   font-weight: 600;
   color: var(--primary);
}

.toast.success {
   border-left-color: var(--success);
   background: var(--base-01) !important;
}

.toast i.indicator::before {
   transition: var(--three);
}

.toast.success i.indicator::before {
   content: "\f058";
   color: var(--success);
   font-size: var(--text-4xl);
}

.toast .close-toast-button {
   margin-left: auto;
   margin-bottom: auto;
   border: none;
   background: none;
   color: var(--base-mute);
}

.toast .close-toast-button:hover {
   color: var(--base-content);
}


/* ===================================
   8) MODALS (ADD-TO-LIST / SHARE / GENERIC)
   =================================== */
:is(.add-to-list-container, .share-container, .modal) {
   position: fixed;
   left: 0;
   right: 0;
   top: 4rem;
   bottom: -100%;
   z-index: 3;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: calc(100% - 4rem);
   padding: 0;
   border-radius: .5rem;
   border: .5px solid var(--dark-01);
   background-color: var(--base-01);
   box-shadow: 0 4px 16px -4px rgba(0, 0, 0, .2);
   transition: var(--three);
   overflow: auto;
   overflow-x: hidden;
   visibility: hidden;
   opacity: 0;
}

:is(.add-to-list-container, .share-container, .modal).active {
   bottom: 0;
   visibility: visible;
   opacity: 1;
}

:is(.add-to-list-container, .share-container, .modal) header {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   padding: .75rem 1rem;
   border-bottom: 1px solid var(--border-color);
   color: var(--base-content);
   font-weight: 500;
   font-size: var(--text-sm);
   background: transparent;
   text-decoration: none;
   white-space: nowrap;
}

:is(.add-to-list-container, .modal) footer {
   position: sticky;
   bottom: 0;
   width: 100%;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: .5rem;
   padding: 1.25rem 1rem 1.75rem;
   border-top: 1px solid var(--border-color);
   color: var(--base-content);
   font-weight: 500;
   font-size: var(--text-sm);
   background-color: var(--base-01);
}

.add-to-list-container header h3,
.share-container header h3,
.modal header h3 {
   font-weight: 500;
}

.add-to-list-container header .close-modal-button,
.share-container header .close-modal-button,
.modal header .close-modal-button {
   display: none;
}

/* Add-to-list internals */
.add-to-list-container .new-list-button,
.add-to-list-container .no-list-text {
   display: flex;
   align-items: center;
   gap: .5rem;
   width: 100%;
   padding: .75rem 1rem;
   border: none;
   text-decoration: none;
   color: var(--base-content);
   background: transparent;
   font-weight: 500;
   font-size: var(--text-sm);
   white-space: normal;
   overflow-wrap: anywhere;
}

.add-to-list-container .new-list-button:hover {
   background-color: var(--base-03);
}

.add-to-list-container .dropdown-new-list-container {
   max-height: 0;
   overflow: hidden;
   border-bottom: 1px solid transparent;
   font-size: var(--text-sm);
   transition: var(--three);
}

.add-to-list-container .dropdown-new-list-container.active {
   max-height: 20rem;
   border-bottom-color: var(--border-color);
}

.add-to-list-container .list-item {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: .5rem;
   width: 100%;
   padding: .75rem 1rem;
   border: none;
   color: var(--base-content);
   font-weight: 500;
   font-size: var(--text-sm);
   background: transparent;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
}

/* Modal buttons */
.add-to-list-container .create-new-list-button,
.add-to-list-container .create-list-button {
   height: 2.5rem;
   min-width: 2.5rem;
   padding: 0 1rem;
   border: none;
   border-radius: .25rem;
   cursor: pointer;
   background-color: var(--dark-01);
   color: var(--dark-content);
   transition: var(--three);
}

.add-to-list-container .create-new-list-button:hover,
.add-to-list-container .create-list-button:hover {
   background-color: var(--dark-focus);
}

.add-to-list-container .cancel-new-list-button,
.add-to-list-container .cancel-list-button {
   height: 2.5rem;
   min-width: 2.5rem;
   padding: 0 1rem;
   border: none;
   border-radius: .25rem;
   cursor: pointer;
   background: transparent;
   color: var(--primary);
   transition: var(--three);
}

.add-to-list-container :is(.cancel-new-list-button, .cancel-list-button):hover {
   background-color: var(--base-03);
}

.add-to-list-container .create-new-list-button:disabled {
   background-color: #ccc;
   color: #666;
   border: 1px solid #aaa;
   cursor: not-allowed;
}


/* ===================================
   9) CHECKBOX LIST (CUSTOM)
   =================================== */
.checkbox-container {
   position: relative;
   width: 100%;
   padding: .75rem 1rem;
   border: none;
   color: var(--base-content);
   font-weight: 500;
   font-size: var(--text-sm);
   background: transparent;
   user-select: none;
   transition: var(--three);
}

.checkbox-container:hover {
   background-color: var(--base-03);
}

.checkbox-container input[type="checkbox"] {
   display: none;
}

.checkbox-container label {
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
   text-shadow: 0 0 0 transparent;
}

.checkbox-label {
   flex-grow: 1;
   display: -webkit-box;
   overflow: hidden;
   white-space: normal;
   overflow-wrap: anywhere;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
}

.custom-checkbox {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 20px;
   height: 20px;
   flex-shrink: 0;
   border: 1px solid var(--primary);
   border-radius: 4px;
   background-color: #f0f0f0;
   text-shadow: .5px .5px #fff;
   transition: background-color .3s, border-color .3s;
}

.checkbox-container input[type="checkbox"]+label>.custom-checkbox i {
   display: none;
   color: #fff;
}

.checkbox-container input[type="checkbox"]:checked+label>.custom-checkbox {
   background-color: var(--dark-01);
   border-color: var(--dark-01);
}

.checkbox-container input[type="checkbox"]:checked+label>.custom-checkbox i {
   display: block;
}

.checkbox-container input[type="checkbox"]:checked+label {
   color: var(--primary-focus);
   text-shadow: .125px .125px 0 var(--primary-focus);
   background-color: var(--base-02);
   margin: -.75rem -1rem;
   padding: .75rem 1rem;
}


/* ===================================
   10) “NEW LIST” INPUT (FLOATING LABEL)
   =================================== */
.new-list-input {
   position: relative;
   margin: .75rem 1rem 1.5em;
}

.new-list-actions {
   position: relative;
   display: flex;
   justify-content: flex-end;
   gap: .5rem;
   margin: .75rem 1rem;
}

.new-list-input label {
   position: absolute;
   left: 16px;
   top: 15px;
   color: #999;
   font-size: var(--text-base);
   transition: all .2s ease-out;
   pointer-events: none;
}

.new-list-input input {
   width: 100%;
   padding: 20px 16px 6px;
   font-size: 16px;
   border: 1px solid #ccc;
   border-radius: 4px;
   outline: none;
}

.new-list-input input:focus {
   border-color: #007bff;
}

.new-list-input input:focus+label,
.new-list-input input:not(:placeholder-shown)+label {
   top: 5px;
   color: blue;
   font-size: var(--text-xs);
}


/* ===================================
   11) SHARE OPTIONS
   =================================== */
.share-container .share-options-container a {
   display: flex;
   align-items: center;
   gap: .75rem;
   width: 100%;
   padding: .75rem 1rem;
   border: none;
   text-decoration: none;
   color: var(--base-content);
   background: transparent;
   font-weight: 500;
   font-size: var(--text-sm);
}

.share-container .share-options-container a:hover {
   background-color: var(--base-03);
}

.share-container .share-options-container a .fa-stack {
   position: relative;
   width: 1.5em;
   height: 1.5em;
   line-height: 1.5em;
   vertical-align: middle;
}

.share-container .share-options-container a .fa-stack-2x {
   font-size: 1.5em;
}

.share-container .share-options-container a .fa-stack-1x {
   font-size: .9em;
}

.share-container .share-facebook i {
   color: #4267B2;
}

.share-container .share-x-twitter .fa-circle {
   color: #000;
}

.share-container .share-linkedin .fa-circle {
   color: #0a66c2;
}

.share-container .share-linkedin .fa-circle i {
   padding-left: 1px;
}

.share-container :is(.share-email .fa-circle, .share-link .fa-circle) {
   color: var(--base-content);
}

.share-container .copy-link-container {
   display: none;
}


/* ===================================
   12) ABSTRACT SECTION
   =================================== */
.abstract-container .presentation {
   padding: .75rem;
   white-space: normal;
   overflow-wrap: anywhere;
}

.abstract-container header {
   position: sticky;
   top: 0;
   background-color: var(--base-01);
}


/* ===================================
   13) GOOGLE ADS (HOMEPAGE)
   =================================== */
.homepage .google-ad-wrapper {
   padding-top: 0;
}

.google-ad-container {
   display: flex;
   margin-left: auto;
   margin-right: auto;
   border-radius: .5rem;
   overflow: hidden;
}

.google-ad-container.smaller-ad {
   border: 1px solid var(--border-color);
}

.google-ad-container.larger-ad {
   display: none !important;
}


/* ===================================
   14) MEDIA QUERIES
   =================================== */

/* ≥500px */
@media (min-width: 500px) {
   .toast {
      width: 26rem;
      margin: 0 auto;
   }
}

/* ≥640px */
@media (min-width: 640px) {
   .header .logo-container {
      flex-grow: 0;
   }

   .header,
   .header .dropdown-search-container {
      padding: .75rem 1.25rem;
   }

   /* Inline search replaces icon */
   .search-bar>.search-button {
      display: none;
   }

   .search-bar {
      flex-grow: 1;
      margin-left: 8px;
   }

   .header .dropdown-search-container {
      position: unset;
      visibility: visible;
      opacity: 1;
      padding: 0;
      background: unset;
      height: 40px;
      width: 100%;
      flex-direction: row;
   }

   .header form[role="search"] {
      height: 40px;
      width: 100%;
   }

   .header .dropdown-search-container input {
      flex-grow: 1;
      width: unset;
      padding: 0 1rem;
      background-color: var(--base-04);
      color: var(--dark-focus);
      visibility: visible;
      opacity: 1;
   }

   .header .dropdown-search-container input::-webkit-input-placeholder {
      color: var(--base-content);
   }

   #header_search_form .search-button {
      width: 40px;
      height: 40px;
      background-color: var(--base-04);
      color: var(--dark-01);
      text-shadow: -.25px -.25px 0 var(--dark-01), .25px -.25px 0 var(--dark-01),
         -.25px .25px 0 var(--dark-01), .25px .25px 0 var(--dark-01);
   }

   .advanced-search-link {
      text-wrap: nowrap;
   }

   .header .dropdown-search-container .cancel-link {
      display: none;
   }

   /* Modals center as dialogs */
   :is(.share-container, .add-to-list-container, .modal) {
      width: unset;
      top: unset;
      margin: 2rem;
      bottom: 50%;
      transform: translateY(calc(50% + 1.5rem));
   }

   :is(.share-container, .add-to-list-container, .modal).active {
      bottom: 50%;
      transform: translateY(50%);
   }

   :is(.add-to-list-container, .share-container, .modal) header {
      justify-content: space-between;
   }

   :is(.add-to-list-container, .share-container, .modal) header .close-modal-button {
      display: unset;
      border: none;
      border-radius: .25rem;
      background: transparent;
      color: var(--base-mute);
   }

   :is(.add-to-list-container, .share-container, .modal) header .close-modal-button:hover {
      color: var(--base-content);
      background-color: var(--base-02);
   }

   /* Share grid layout */
   .share-container .share-options-container {
      display: flex;
      padding: .75rem 1rem;
   }

   .share-container .share-options-container a {
      flex-direction: column;
      border-radius: .5rem;
   }

   .share-container .share-options-container a .fa-stack {
      font-size: 2rem;
   }

   .share-container .share-options-container a .fa-facebook {
      font-size: 3rem;
      height: 3rem;
      position: relative;
      top: 1.5rem;
   }

   .share-container .share-options-container .share-link {
      display: none;
   }

   .share-container .copy-link-container {
      display: unset;
      padding: .75rem 1rem;
      border-top: 1px solid var(--border-color);
   }

   .share-container .copy-link-form-container {
      display: flex;
   }

   .share-container .copy-link-input {
      flex-grow: 1;
      height: 2.5rem;
      padding: 0 1rem;
      color: var(--base-mute);
      border: 1px solid var(--border-color);
      border-radius: .75rem 0 0 .75rem;
   }

   .share-container .copy-link-button {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: .75rem;
      height: 2.5rem;
      padding: 0 1rem;
      border: none;
      border-radius: 0 .75rem .75rem 0;
      background-color: var(--dark-01);
      color: var(--dark-content);
   }

   .share-container .copy-link-button:hover {
      background-color: var(--dark-focus);
   }

   .add-to-list-container footer {
      padding: 1rem;
   }

   .abstract-container {
      margin: 0 2rem;
      width: fit-content;
   }

   .abstract-container .presentation {
      padding: 1.25rem;
   }
}

/* ≥768px */
@media (min-width: 768px) {

   .header .site_message_button {
      width: 2.25rem;
      height: 2.25rem;
   }

   /* Ads swap */
   .google-ad-container.smaller-ad {
      display: none !important;
   }

   .google-ad-container.larger-ad {
      display: flex !important;
   }
}

/* ≥1024px */
@media (min-width: 1024px) {
   .header {
      height: 64px;
      align-content: center;
   }

   /* Desktop nav */
   .header .dropdown-menu-button {
      display: none;
   }

   .header-nav,
   .header-nav.active {
      position: unset;
      top: .25rem;
      left: unset;
      bottom: unset;
      z-index: unset;
      height: unset;
      width: unset;
      overflow: unset;
      display: flex;
      flex-direction: row;
      flex-grow: 1;
      justify-content: space-around;
      margin: 0;
      list-style: none;
      background: unset;
      transition: var(--three);
   }

   .header-nav .logo-container,
   .header-nav.active .logo-container {
      display: none;
   }

   /* Desktop dropdowns */
   .dropdown {
      position: relative;
   }

   .header-nav .dropdown:is(:hover, :focus) .dropbtn i {
      transform: rotate(180deg);
   }

   .dropdown-content,
   .dropdown.active .dropdown-content {
      position: absolute;
      left: 0;
      top: calc(100% + .25rem);
      z-index: 999;
      display: flex;
      flex-direction: column;
      min-width: 160px;
      padding: 0;
      border-radius: .5rem;
      border: .5px solid var(--dark-01);
      background-color: var(--base-01);
      box-shadow: 0 4px 16px -4px rgba(0, 0, 0, .2);
      transition: var(--three);
      visibility: hidden;
      opacity: 0;
      transform: scale(.99) translateY(1rem);
      max-height: max-content;
   }

   .dropdown:hover .dropdown-content {
      visibility: visible;
      opacity: 1;
      transform: scale(1) translateY(0);
   }

   .header-nav .dropdown-content a {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .75rem 1rem;
      text-decoration: none;
      background: transparent;
      color: var(--dark-01);
      font-weight: 500;
      font-size: var(--text-sm);
   }

   .header-nav .dropdown-content a:is(:hover, :focus) {
      background-color: var(--base-03);
   }

   .header-nav .dropbtn,
   .dropdown-menu-container>a {
      display: flex;
      align-items: center;
      gap: .5rem;
      width: fit-content;
      padding: 0;
      text-decoration: none;
      color: var(--dark-content);
      background: transparent;
      font-size: var(--text-base);
      font-weight: 600;
      pointer-events: unset;
      transition: var(--three);
   }

   .header-nav .dropdown .dropbtn i {
      display: unset;
   }

   .header-nav :is(.dropbtn, .dropdown-menu-container > a):is(:hover, :focus) {
      background: transparent;
      color: var(--base-01);
   }

   .dropdown-menu-container .link-wishlist {
      display: none;
   }

   .dropdown-content {
      position: absolute;
   }

   .header .nav-title i {
      position: relative;
      top: 1px;
      padding-left: .125rem;
      color: var(--base-mute);
      font-size: var(--text-xs);
      transform: rotate(0);
   }

   .header .nav-sub-link a {
      padding: .75rem 1rem;
      text-decoration: none;
      background: transparent;
      color: var(--base-content);
      font-size: var(--text-sm);
      font-weight: 500;
   }

   .header .nav-sub-link a:hover {
      background-color: var(--base-03);
   }

   .header .user-menu ul .user-link {
      gap: 1rem;
   }

   .header .search-button {
      width: 3rem;
      height: 3rem;
      font-size: var(--text-lg);
   }

   .header .nav-title {
      font-size: var(--text-sm);
   }

   .header .dropdown-search-container .cancel-link span {
      display: none;
   }

   .header .dropdown-search-container .cancel-link {
      width: unset;
      padding: 0;
      font-size: 2.25rem;
   }

   .header .dropdown-search-container .cancel-link i {
      display: block;
      position: relative;
      top: 1px;
      font-size: 2.25rem;
      color: var(--primary);
   }

   .header .dropdown-search-container .cancel-link i {
      font-size: 2.75rem;
      padding: 0 .125rem;
   }

   .header .dropdown-search-container .search-suggestions-container {
      margin: 0 2rem;
   }

   /* Modal sizing */
   :is(.add-to-list-container, .share-container, .modal) {
      max-width: 48rem;
      max-height: calc(100% - 16rem);
      margin: auto;
   }

   .abstract-container .presentation {
      padding: 2rem;
   }

   .header .site_message_button {
      width: 3rem;
      height: 3rem;
      padding: 9px;
   }

   .homepage .google-ad-wrapper {
      padding-bottom: 0;
   }
}

/* ≥1280px */
@media (min-width: 1280px) {
   .header .logo-container img {
      content: var(--logo-lockup) !important;
      height: 32px;
   }
}

/* ≥1536px – input height tweak (from original stray rule) */
@media (min-width: 1536px) {
   .header .active .dropdown-search-container input {
      height: 3.5rem;
   }
}


/* ===================================
   15) COMMENTS UI
   =================================== */
.comment_message_container .site_message_message_reply_content {
   padding-top: .25rem;
}

.comment_message_container .site_messagebox_message_container .site_message_message_reply_box button {
   font-size: var(--text-xs);
}

.comment_message_container i.fas.fa-reply {
   margin-right: .325rem;
   font-size: 11px;
   color: var(--base-mute);
}