/* =========================================================
   SHARED SITE UI ENHANCEMENTS
   Applied after every page stylesheet so the common sidebar
   and button styles are not overridden by page-specific CSS.
   ========================================================= */

/* Search icon: keep it visibly inside the far-right side of the field. */
.search-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

.search-wrapper::before {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    background: #ffffff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.5 4a6.5 6.5 0 1 0 4.04 11.59l4.43 4.43 1.41-1.41-4.43-4.43A6.5 6.5 0 0 0 10.5 4m0 2a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.5 4a6.5 6.5 0 1 0 4.04 11.59l4.43 4.43 1.41-1.41-4.43-4.43A6.5 6.5 0 0 0 10.5 4m0 2a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
    z-index: 20;
}

.search-wrapper .search-box {
    padding-left: 1rem !important;
    padding-right: 42px !important;
}

/* Header logo: page-specific legacy rules used to force these pages back to 50px. */
.logo img {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    object-fit: contain !important;
}

/* =========================================================
   SHARED SIDEBAR
   Matches the Support page's interactive sidebar behavior.
   ========================================================= */

.herosection > .sidebar,
.sidebar {
    width: var(--dimension-size);
    min-width: var(--dimension-size);
    max-width: var(--dimension-size);
    background-color: var(--theme-teal);
    color: var(--text-white);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0.75rem;
    gap: 0.75rem;
    overflow-y: auto;
    overflow-x: hidden;
    position: sticky;
    top: 0;
    align-self: start;
    z-index: 10;
}

.sidebar a {
    display: block;
    width: 100%;
    color: var(--text-white);
    text-decoration: none;
    padding: 0.7rem 0.6rem;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Keep the Categories label centered as requested. */
.sidebar a:first-child {
    text-align: center;
}

.sidebar a:hover,
.sidebar a:focus-visible {
    background-color: var(--theme-teal-hover);
    color: #ffffff;
    transform: translateX(3px);
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.85);
    outline: none;
}

.sidebar a:active {
    transform: translateX(2px) scale(0.99);
}

/* =========================================================
   SHARED BUTTON STYLING
   Fixes inconsistent/default browser button appearance while
   preserving the existing tab/mobile button behavior.
   ========================================================= */

button:not(.mobile-toggle-btn):not(.info-buttons button):not(.tab-button) {
    font: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    min-height: 42px;
    padding: 0.7rem 1.15rem;
    background: var(--theme-teal, #008080);
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

button:not(.mobile-toggle-btn):not(.info-buttons button):not(.tab-button):hover:not(:disabled) {
    background: var(--theme-teal-hover, #006666);
    border-color: var(--theme-teal-hover, #006666);
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.14);
}

button:not(.mobile-toggle-btn):not(.info-buttons button):not(.tab-button):active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
}

button:not(.mobile-toggle-btn):not(.info-buttons button):not(.tab-button):focus-visible {
    outline: 3px solid rgba(0, 128, 128, 0.25);
    outline-offset: 2px;
}

button:not(.mobile-toggle-btn):not(.info-buttons button):not(.tab-button):disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

/* Existing product-information tabs: improve interaction without
   removing their active underline behavior. */
.info-buttons button:hover {
    color: var(--theme-teal, #008080);
    background: rgba(0, 128, 128, 0.06);
}

.info-buttons button:active {
    transform: translateY(1px);
}

/* About Us tabs use the same clean interaction treatment. */
.tab-button:hover {
    color: var(--theme-teal, #008080);
    background: #ffffff;
}

.tab-button:focus-visible {
    outline: 3px solid rgba(0, 128, 128, 0.25);
    outline-offset: 2px;
}

/* Existing download/action controls retain their semantic classes. */
.map-btn,
.submit-button button,
.formbutton button,
.resources-downloadable button,
.btn,
#downloadBrochure {
    appearance: none;
    -webkit-appearance: none;
}

@media (max-width: 760px) {
    .sidebar a {
        padding: 0.65rem 0.55rem;
    }

    .search-wrapper::before {
        right: 0.8rem;
    }

    .search-wrapper .search-box {
        padding-left: 1rem;
        padding-right: 2.3rem;
    }
}


/* =========================================================
   PRODUCT CARD ORDER — IMAGE FIRST, NAME BELOW
   Works for BOTH card structures used by the site:
   1) .card > .product-card-link > image + name
   2) .card > image + name
   The card itself is the layout owner so legacy page CSS cannot
   move the product name above, beside, or over the image.
   ========================================================= */
.product-category > .card,
.product-category > .dynamic-product-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
}

/* Full-card clickable variant (used by dynamic/category cards). */
.product-category > .card > .product-card-link,
.product-category > .dynamic-product-card > .product-card-link {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-decoration: none !important;
    grid-template-rows: none !important;
}

/* IMAGE IS ALWAYS THE FIRST 150px. */
.product-category > .card > .product-image,
.product-category > .dynamic-product-card > .product-image,
.product-category > .card > .product-card-link > .product-image,
.product-category > .dynamic-product-card > .product-card-link > .product-image {
    order: 1 !important;
    flex: 0 0 150px !important;
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

.product-category > .card > .product-image img,
.product-category > .dynamic-product-card > .product-image img,
.product-category > .card > .product-card-link > .product-image img,
.product-category > .dynamic-product-card > .product-card-link > .product-image img {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
}

/* NAME IS ALWAYS A SEPARATE 50px AREA BELOW THE IMAGE. */
.product-category > .card > .product-name,
.product-category > .dynamic-product-card > .product-name,
.product-category > .card > .product-card-link > .product-name,
.product-category > .dynamic-product-card > .product-card-link > .product-name {
    order: 2 !important;
    flex: 0 0 50px !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
    position: static !important;
    border-top: 1px solid #d9e2e8 !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    line-height: 1.2 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.product-category > .card > .product-name a,
.product-category > .card > .product-name span,
.product-category > .dynamic-product-card > .product-name a,
.product-category > .dynamic-product-card > .product-name span,
.product-category > .card > .product-card-link > .product-name a,
.product-category > .card > .product-card-link > .product-name span,
.product-category > .dynamic-product-card > .product-card-link > .product-name a,
.product-category > .dynamic-product-card > .product-card-link > .product-name span {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
}

@media (max-width: 600px) {
    .product-category > .card,
    .product-category > .dynamic-product-card,
    .product-category > .card > .product-card-link,
    .product-category > .dynamic-product-card > .product-card-link {
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
    }

    .product-category > .card > .product-image,
    .product-category > .dynamic-product-card > .product-image,
    .product-category > .card > .product-card-link > .product-image,
    .product-category > .dynamic-product-card > .product-card-link > .product-image {
        flex-basis: 150px !important;
        height: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
    }

    .product-category > .card > .product-name,
    .product-category > .dynamic-product-card > .product-name,
    .product-category > .card > .product-card-link > .product-name,
    .product-category > .dynamic-product-card > .product-card-link > .product-name {
        flex-basis: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }
}


/* FINAL GLOBAL PRODUCT CARD ORDER LOCK
   Never overlay or place product names above/inside product images. */
.product-category > .card,
.product-category > .dynamic-product-card {
  display:flex !important; flex-direction:column !important;
  height:200px !important; min-height:200px !important; max-height:200px !important;
  overflow:hidden !important; box-sizing:border-box !important;
}
.product-category > .card > .product-card-link,
.product-category > .dynamic-product-card > .product-card-link {
  display:flex !important; flex-direction:column !important;
  height:200px !important; min-height:200px !important; max-height:200px !important;
  padding:0 !important; margin:0 !important; width:100% !important;
  overflow:hidden !important; box-sizing:border-box !important;
}
.product-category > .card .product-image,
.product-category > .dynamic-product-card .product-image {
  order:1 !important; flex:0 0 150px !important;
  height:150px !important; min-height:150px !important; max-height:150px !important;
  width:100% !important; position:static !important; inset:auto !important;
  overflow:hidden !important; box-sizing:border-box !important;
}
.product-category > .card .product-name,
.product-category > .dynamic-product-card .product-name {
  order:2 !important; flex:0 0 50px !important;
  height:50px !important; min-height:50px !important; max-height:50px !important;
  width:100% !important; position:static !important; inset:auto !important;
  margin:0 !important; padding:4px !important; box-sizing:border-box !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  overflow:hidden !important; transform:none !important;
}
.product-category > .card .product-name a,
.product-category > .card .product-name span,
.product-category > .dynamic-product-card .product-name a,
.product-category > .dynamic-product-card .product-name span {
  position:static !important; inset:auto !important; transform:none !important;
  display:block !important; width:100% !important; margin:0 !important; padding:0 !important;
}

/* =========================================================
   RESPONSIVE LAYOUT SAFETY
   Targeted mobile/tablet overrides only. Desktop layout remains
   unchanged. The page itself becomes the scroll container on
   small screens so content cannot disappear behind header/footer.
   ========================================================= */
/* =========================================================
   PAGE-SPECIFIC VERTICAL FLOW
   Index + Career: sidebar follows the actual .herosection height.
   Dealer: keep the hero area viewport-bounded and scroll its contents.
   ========================================================= */
.index-page .herosection > .sidebar,
.index-page .sidebar,
.career-page .herosection > .sidebar,
.career-page .sidebar {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    position: sticky !important;
    top: 0 !important;
}

.dealer-page .herosection {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: calc(100vh - (var(--dimension-size) * 1.5)) !important;
    max-height: calc(100vh - (var(--dimension-size) * 1.5)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: stretch !important;
}

.dealer-page .herosection > .sidebar,
.dealer-page .sidebar {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    align-self: stretch !important;
}

@media (max-width: 768px) {
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        display: flex !important;
        flex-direction: column !important;
    }

    .navbar {
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    /* Sidebar is always directly below the header and stays on one
       horizontal line on small screens. */
    .herosection {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    .herosection > .sidebar,
    .sidebar {
        position: static !important;
        top: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        padding: 0.55rem 0.75rem !important;
        gap: 0.45rem !important;
        scrollbar-width: none !important;
    }

    .herosection > .sidebar::-webkit-scrollbar,
    .sidebar::-webkit-scrollbar {
        display: none !important;
    }

    .sidebar a {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        padding: 0.5rem 0.8rem !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        transform: none;
    }

    .sidebar a:hover,
    .sidebar a:focus-visible {
        transform: none !important;
    }

    .content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Prevent common grids, forms, tables and media from creating
       horizontal overflow on narrow devices. */
    .main,
    .main-content,
    .form-container,
    .category,
    .product-category,
    .dealer-panel,
    .dealer-card,
    .support,
    .support-form,
    .support-form form {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    img,
    video,
    iframe,
    canvas {
        max-width: 100% !important;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
    }

    .footer {
        position: static !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        min-height: var(--dimension-size) !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }
}

@media (max-width: 480px) {
    .navbar {
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
    }

    .sidebar {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    .sidebar a {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
        font-size: 0.76rem !important;
    }
}

/* Page scrolling: keep a standard vertical scrollbar available on every viewport.
   Individual carousels/sidebars may still manage their own overflow. */
html {
    overflow-y: scroll !important;
}

body:not(.buy-modal-open):not(.career-modal-open) {
    overflow-y: auto !important;
}

/* =========================================================
   PRODUCT CARD CONSISTENCY
   Category, Sports Optics and Binocular cards intentionally use
   the same visual card treatment as Roof/Porro. !important is
   deliberate because several legacy page styles are loaded before
   this shared stylesheet.
   ========================================================= */
.product-category > .card,
.product-category > .dynamic-product-card {
    height: 35vh !important;
    min-height: 35vh !important;
    max-height: 35vh !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 8px !important;
    display: grid !important;
    grid-template-rows: 3fr 1fr !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden !important;
    background-color: var(--bg-page) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.product-category > .card:hover,
.product-category > .dynamic-product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important;
    border-color: var(--theme-teal) !important;
}

.product-category > .card > .product-card-link,
.product-category > .dynamic-product-card > .product-card-link {
    display: grid !important;
    grid-template-rows: 3fr 1fr !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.product-category > .card > .product-image,
.product-category > .dynamic-product-card > .product-image,
.product-category > .card > .product-card-link > .product-image,
.product-category > .dynamic-product-card > .product-card-link > .product-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.5rem !important;
    margin: 0 !important;
    background-color: #f8fafc !important;
    border: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    order: initial !important;
}

.product-category > .card > .product-card-link > .product-image img,
.product-category > .dynamic-product-card > .product-card-link > .product-image img,
.product-category > .card > .product-image img,
.product-category > .dynamic-product-card > .product-image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
}

.product-category > .card > .product-card-link > .product-name,
.product-category > .dynamic-product-card > .product-card-link > .product-name,
.product-category > .card > .product-name,
.product-category > .dynamic-product-card > .product-name {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    border-top: 1px solid var(--border-light) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    background-color: var(--bg-page) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: static !important;
    order: initial !important;
}

.product-category > .card > .product-card-link > .product-name a,
.product-category > .card > .product-card-link > .product-name span,
.product-category > .dynamic-product-card > .product-card-link > .product-name a,
.product-category > .dynamic-product-card > .product-card-link > .product-name span,
.product-category > .card > .product-name a,
.product-category > .card > .product-name span,
.product-category > .dynamic-product-card > .product-name a,
.product-category > .dynamic-product-card > .product-name span {
    width: 100% !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
}

@media (max-width: 900px) {
    .product-category {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .product-category {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .product-category > .card,
    .product-category > .dynamic-product-card {
        height: 280px !important;
        min-height: 280px !important;
        max-height: 280px !important;
    }
}

/* --------------------------------------------------------------------------
   GLOBAL WISHLIST ICON
   common.js injects this immediately before the profile icon.
   -------------------------------------------------------------------------- */
.wishlist-icon-link {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  margin-left: 10px !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.wishlist-icon-link:hover {
  background: #ffffff !important;
}

.wishlist-icon-link img {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

/* --------------------------------------------------------------------------
   GLOBAL USER PROFILE ICON
   common.js injects this beside the search control on every page.
   -------------------------------------------------------------------------- */
.profile-icon-link {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  margin-left: 10px !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.profile-icon-link:hover {
  background: #ffffff !important;
  color: #008080 !important;
}

.profile-icon-link svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  fill: currentColor !important;
}

/* --------------------------------------------------------------------------
   TRIPOD DATA-DRIVEN SUB-CATEGORIES
   -------------------------------------------------------------------------- */
.tripod-category-sections,
.tripod-subcategory-section {
  width: 100% !important;
}

.tripod-subcategory-section {
  margin: 0 0 3rem 0 !important;
  scroll-margin-top: 2rem !important;
}

.tripod-subcategory-section > h2 {
  margin: 0 0 1.25rem 0 !important;
  text-align: center !important;
  color: var(--theme-teal) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
}

.tripod-product-grid {
  width: 100% !important;
  margin-top: 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
}

.tripod-product-grid .dynamic-product-card {
  width: 100% !important;
  min-width: 0 !important;
}

.tripod-product-grid .product-card-link {
  width: 100% !important;
}

.tripod-product-grid .product-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.tripod-product-grid .product-name {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

.dynamic-empty-state {
  width: 100% !important;
  padding: 1.5rem !important;
  text-align: center !important;
  color: #64748b !important;
}

@media (max-width: 1024px) {
  .tripod-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   PAGE-SPECIFIC VERTICAL FLOW
   Index + Career: sidebar follows the actual .herosection height.
   Dealer: keep the hero area viewport-bounded and scroll its contents.
   ========================================================= */
.index-page .herosection > .sidebar,
.index-page .sidebar,
.career-page .herosection > .sidebar,
.career-page .sidebar {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    align-self: stretch !important;
    position: sticky !important;
    top: 0 !important;
}

.dealer-page .herosection {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: calc(100vh - (var(--dimension-size) * 1.5)) !important;
    max-height: calc(100vh - (var(--dimension-size) * 1.5)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: stretch !important;
}

.dealer-page .herosection > .sidebar,
.dealer-page .sidebar {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    align-self: stretch !important;
}

@media (max-width: 768px) {
  .tripod-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

@media (max-width: 480px) {
  .tripod-product-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Consistent brand typography across every page. */
.logo .companyname,
.companyname {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
}


/* =========================================================
   GLOBAL HEADER / SIDEBAR / FOOTER DIMENSIONS
   Header is half its previous 20vh height. Sidebar is 20px
   narrower while preserving the existing layout relationship.
   ========================================================= */
.navbar {
    height: calc(var(--dimension-size) / 2) !important;
    min-height: calc(var(--dimension-size) / 2) !important;
    max-height: calc(var(--dimension-size) / 2) !important;
    flex: 0 0 calc(var(--dimension-size) / 2) !important;
}

.herosection {
    grid-template-columns: calc(var(--dimension-size) - 20px) minmax(0, 1fr) !important;
}

.herosection > .sidebar,
.sidebar {
    width: calc(var(--dimension-size) - 20px) !important;
    min-width: calc(var(--dimension-size) - 20px) !important;
    max-width: calc(var(--dimension-size) - 20px) !important;
    height: calc(100vh - (var(--dimension-size) * 1.5)) !important;
    max-height: calc(100vh - (var(--dimension-size) * 1.5)) !important;
}

/* Keep the footer directly after the main layout with no artificial gap. */
.herosection + .footer,
.footer {
    margin-top: 0 !important;
}

/* =========================================================
   INDEX ONLY — natural document scrolling
   Do not create an internal scrollbar inside the hero/content area.
   The document becomes long enough for the hero image + categories,
   while the footer remains directly after the content.
   ========================================================= */
.index-page {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.index-page .herosection {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    align-items: stretch !important;
}

.index-page .content {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.index-page .heroimage {
    min-height: 50vh !important;
    max-height: 50vh !important;
    height: 50vh !important;
}

/* =========================================================
   PAGE-SPECIFIC VERTICAL FLOW
   Index + Career: sidebar follows the actual .herosection height.
   Dealer: keep the hero area viewport-bounded and scroll its contents.
   ========================================================= */
.index-page .herosection > .sidebar,
.index-page .sidebar,
.career-page .herosection > .sidebar,
.career-page .sidebar {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    align-self: stretch !important;
    position: sticky !important;
    top: 0 !important;
}

.dealer-page .herosection {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: calc(100vh - (var(--dimension-size) * 1.5)) !important;
    max-height: calc(100vh - (var(--dimension-size) * 1.5)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: stretch !important;
}

.dealer-page .herosection > .sidebar,
.dealer-page .sidebar {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    align-self: stretch !important;
}

@media (max-width: 768px) {
    .navbar {
        height: auto !important;
        min-height: var(--dimension-size) !important;
        max-height: none !important;
        flex: 0 0 auto !important;
    }

    .herosection {
        grid-template-columns: 1fr !important;
    }

    .herosection > .sidebar,
    .sidebar {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    .index-page .herosection {
        display: flex !important;
    }
}


/* =========================================================
   FINAL SITE-WIDE TYPOGRAPHY + RESPONSIVE OVERRIDES
   ========================================================= */
h1 { color: #000000 !important; }
h2 { color: #6b7280 !important; }

/* Strict 1.4rem header navigation and sidebar links. */
.navbar a,
.navbar .nav-links a,
.sidebar a { font-size: 1.4rem !important; }

/* Product name and Buy Now on one line on larger screens. */
.product-heading-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    min-width: 0 !important;
}
.product-heading-row h1 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}
.product-heading-row .buy-now-container {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}
.product-heading-row .buy-now-btn { white-space: nowrap !important; }

/* Remove the legacy large-screen h1 margin from page headings and keep them usable. */
.profile-page h1,
.profile-card h1,
.content > h1 {
    text-align: center !important;
    color: #000000 !important;
    font-size: clamp(1.45rem, 4vw, 2.35rem) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 1100px) and (min-width: 769px) {
    .navbar {
        gap: 0.75rem !important;
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }
    .navbar .logo img {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
    }
    .navbar .logo {
        gap: 0.55rem !important;
        font-size: 1rem !important;
    }
    .navbar .companyname {
        font-size: 2rem !important;
    }
    .navbar .nav-links {
        gap: 0.55rem !important;
        flex-wrap: nowrap !important;
    }
    .navbar .nav-links a {
        font-size: 0.9rem !important;
        white-space: nowrap !important;
    }
    .navbar .search-box {
        width: 200px !important;
        min-width: 170px !important;
        max-width: 200px !important;
    }
}

@media (max-width: 768px) {
    html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
    .navbar {
        width: 100% !important; height: auto !important; min-height: 65px !important;
        padding: 0.65rem 0.8rem !important; display: flex !important;
        flex-wrap: wrap !important; align-items: center !important; gap: 0.5rem !important;
    }
    .navbar > a, .navbar .logo-link { flex: 1 1 auto !important; min-width: 0 !important; max-width: calc(100% - 58px) !important; }
    .navbar .logo { max-width: 100% !important; gap: 0.55rem !important; white-space: nowrap !important; overflow: hidden !important; }
    .navbar .companyname { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .navbar .mobile-toggle-btn { display: block !important; flex: 0 0 auto !important; order: 2 !important; margin-left: auto !important; }
    .navbar .nav-links {
        order: 3 !important; width: 100% !important; flex: 0 0 100% !important;
        display: none !important; flex-direction: column !important; align-items: stretch !important;
        gap: 0 !important; overflow: hidden !important;
    }
    .navbar .nav-links.open { display: flex !important; }
    .navbar .nav-links a {
        width: 100% !important; min-width: 0 !important; font-size: 1.4rem !important;
        line-height: 1.25 !important; padding: 0.65rem 0.85rem !important;
        white-space: normal !important; overflow-wrap: anywhere !important;
    }
    .navbar .search-wrapper { order: 4 !important; width: 100% !important; flex: 0 0 100% !important; }
    .navbar .search-box { order: 4 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; }

    .herosection > .sidebar, .sidebar {
        width: 100% !important; min-width: 100% !important; max-width: 100% !important;
        height: auto !important; max-height: none !important; flex-direction: row !important;
        overflow-x: auto !important; overflow-y: hidden !important; position: static !important;
        padding: 0.55rem 0.65rem !important; gap: 0.45rem !important;
        white-space: nowrap !important; scrollbar-width: none !important;
    }
    .sidebar::-webkit-scrollbar { display: none !important; }
    .sidebar a {
        flex: 0 0 auto !important; width: auto !important; min-width: max-content !important;
        font-size: 1.4rem !important; padding: 0.5rem 0.7rem !important;
        text-align: center !important; white-space: nowrap !important;
    }

    .heroimage {
        width: 100% !important; height: auto !important;
        min-height: 0 !important; max-height: none !important; margin: 0 !important;
    }
    .heroimage img {
        width: 100% !important; height: auto !important; max-width: 100% !important;
        max-height: none !important; object-fit: fill !important;
    }

    .content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; }
    .category, .product-category, .tripod-product-grid, .main, .profile-grid, .form-container { min-width: 0 !important; max-width: 100% !important; }

    .product-heading-row { align-items: flex-start !important; gap: 0.75rem !important; }
    .product-heading-row h1 { font-size: clamp(1.3rem, 6vw, 1.8rem) !important; text-align: left !important; }
    .product-heading-row .buy-now-btn { min-width: 110px !important; padding: 0.65rem 0.8rem !important; font-size: 0.9rem !important; }

    .profile-page h1, .profile-card h1, .content > h1 {
        width: 100% !important; max-width: 100% !important; font-size: clamp(1.35rem, 7vw, 2rem) !important;
        text-align: center !important; margin: 0 auto 1rem !important; padding: 0 0.5rem !important;
    }
    .profile-page { width: 100% !important; padding: 1.5rem 0.75rem !important; }
    .profile-card { width: 100% !important; max-width: 650px !important; padding: 1.25rem !important; }

    .dealer-page .main {
        grid-template-columns: 1fr !important;
        grid-template-areas: "location" "list" "map" !important;
        gap: 1rem !important;
    }
    .dealer-page .content { padding: 0 0.8rem 2rem !important; }
    .dealer-page .dealer-panel { width: 100% !important; min-width: 0 !important; }
    .dealer-page .dealer-list-panel, .dealer-page .dealer-map-panel, .dealer-page .dealer-location-panel { min-height: 0 !important; }

    img, video, iframe { max-width: 100% !important; }
}

@media (max-width: 480px) {
    .navbar .logo img { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; }
    .navbar .companyname { font-size: 2rem !important; }
    .product-heading-row .buy-now-container { width: auto !important; margin-left: auto !important; }
}

/* =========================================================
   FINAL REQUESTED FIXES
   ========================================================= */

/* Home hero: full width on desktop, with the complete image visible. */
/* Buy Now stays visibly on the same line as the product name. */
.product-title .product-heading-row,
.product-heading-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    width: 100% !important;
    min-width: 0 !important;
}

.product-title .product-heading-row h1,
.product-heading-row h1 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
}

.product-title .product-heading-row .buy-now-container,
.product-heading-row .buy-now-container {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    margin: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-title .product-heading-row .buy-now-btn,
.product-heading-row .buy-now-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

/* Dealer mobile header must remain in normal document flow so its expanded menu cannot cover content. */
@media (max-width: 768px) {
    .dealer-page .navbar {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        height: auto !important;
        min-height: 65px !important;
        max-height: none !important;
        overflow: visible !important;
        z-index: 1000 !important;
    }

    .dealer-page .herosection {
        position: relative !important;
        top: auto !important;
        margin-top: 0 !important;
        clear: both !important;
    }
}

/* Dealer mobile flow: the expanded mobile header must never overlap page content. */
@media (max-width: 768px) {
    .index-page .heroimage {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .index-page .heroimage img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    .dealer-page .herosection {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: grid !important;
    }

    .dealer-page .sidebar,
    .dealer-page .herosection > .sidebar {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        z-index: 1 !important;
    }

    .dealer-page .content {
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding-top: 1rem !important;
    }

    .dealer-page .content > h1 {
        position: relative !important;
        z-index: 1 !important;
        margin-top: 0 !important;
    }

    .dealer-page .main {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Keep product title and Buy Now together on narrow screens. */
    .product-title .product-heading-row,
    .product-heading-row {
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }

    .product-title .product-heading-row h1,
    .product-heading-row h1 {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: clamp(1.05rem, 5vw, 1.65rem) !important;
        line-height: 1.2 !important;
    }

    .product-title .product-heading-row .buy-now-btn,
    .product-heading-row .buy-now-btn {
        min-width: 92px !important;
        padding: 0.55rem 0.65rem !important;
        font-size: 0.82rem !important;
    }
}

/* =========================================================
   FINAL REQUESTED FIXES
   ========================================================= */

/* Desktop hero: preserve the desktop 50vh presentation and crop behavior. */
@media (min-width: 769px) {
    .index-page .heroimage {
        width: 100% !important;
        height: 50vh !important;
        min-height: 50vh !important;
        max-height: 50vh !important;
        overflow: hidden !important;
    }

    .index-page .heroimage img {
        width: 100% !important;
        height: 50vh !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* Product name + Buy Now: always remain visibly on the same horizontal row. */
.product-title .product-heading-row,
.product-heading-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 1rem !important;
    overflow: visible !important;
}

.product-title .product-heading-row h1,
.product-heading-row h1 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}

.product-title .product-heading-row .buy-now-container,
.product-heading-row .buy-now-container {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-title .product-heading-row .buy-now-btn,
.product-heading-row .buy-now-btn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
}

/* Dealer: header stays in normal flow so it can never cover dealer content. */
.dealer-page .navbar {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1000 !important;
}

.dealer-page .herosection {
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
    clear: both !important;
}

.dealer-page .content {
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 768px) {
    .dealer-page .navbar {
        height: auto !important;
        min-height: 65px !important;
        max-height: none !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
    }

    .dealer-page .herosection {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .dealer-page .sidebar,
    .dealer-page .herosection > .sidebar {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        z-index: 1 !important;
    }

    .dealer-page .content {
        width: 100% !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding-top: 1rem !important;
    }

    .dealer-page .content > h1 {
        margin-top: 0 !important;
    }
}


/* =========================================================
   PRODUCT / CONTENT DATA READABILITY — +3px
   Keep navigation and sidebar sizing unchanged.
   ========================================================= */
main p,
main li,
main td,
main th,
main label,
main dt,
main dd,
main .product-name,
main .dynamic-empty-state,
main .product-title h2,
main .feature-list li,
main .section-content,
main .technicalinfo-content p,
main .technicalinfo-content h4,
main .dealer-card,
main .dealer-card p,
main .dealer-card li,
main .dealer-card a,
main .faq-list summary,
main .faq-list p,
main .faq-list li,
main .category-description,
main .seo-content p,
main .seo-content li {
    font-size: calc(1em + 3px) !important;
}

/* The requested header/sidebar size remains exactly 1.4rem. */
.nav-links a,
.sidebar a {
    font-size: 1.4rem !important;
}


/* FINAL: wider spacing between desktop header navigation links. */
.navbar .nav-links {
    gap: 2.25rem !important;
}

 /* Support navlink: keep the link but remove its hover underline effect. */
 .navbar .nav-links > a[href="/support"]::after,
 .navbar .nav-links > a[href="/support"]:hover::after,
 .navbar .nav-links > a[href="/support"]:focus-visible::after {
     width: 0 !important;
     transition: none !important;
 }
@media (max-width: 900px) {
    .navbar .nav-links {
        gap: 1rem !important;
    }
}

/* Footer copyright */
.footer-copyright {
    margin: 0 !important;
    padding-top: 0.1rem;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}


/* =========================================================
   V8 SHARED SITE UPDATES
   ========================================================= */

/* Sidebar content: requested 1.3rem sizing across breakpoints. */
.sidebar a,
.herosection > .sidebar a {
    font-size: 1.3rem !important;
}

/* Search field: 100px wider than the previous 200px desktop maximum. */
.navbar .search-box {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
}

/* Footer text: +2px while preserving the existing relative hierarchy. */
.footer h4 {
    font-size: calc(0.85rem + 2px) !important;
}
.footer a {
    font-size: calc(0.8rem + 2px) !important;
}
.footer p {
    font-size: calc(0.76rem + 2px) !important;
}
.footer-copyright {
    font-size: calc(0.68rem + 2px) !important;
}

/* Footer social links with compact brand icons. */
.footer .social-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    width: fit-content !important;
}
.footer .social-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    display: inline-block !important;
    color: currentColor !important;
}

/* Footer QR block sits before Categories. */
.footer .footer-qr {
    align-items: left !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    text-align: center !important;
}
.footer .footer-qr img {
    display: block !important;
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    object-fit: contain !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    padding: 5px !important;
    box-sizing: border-box !important;
}
.footer .footer-qr span {
    color: rgba(255,255,255,0.9) !important;
    font-size: calc(0.76rem + 2px) !important;
    line-height: 1.25 !important;
}

/* Footer links must never gain an underline on hover/focus. */
.footer a,
.footer a:hover,
.footer a:focus,
.footer a:focus-visible,
.footer a:active {
    text-decoration: none !important;
}

/* Desktop/tablet search width follows the requested +100px increase. */
@media (max-width: 1100px) and (min-width: 769px) {
    .navbar .search-box {
        width: 270px !important;
        min-width: 270px !important;
        max-width: 270px !important;
    }
    .navbar .nav-links {
        gap: 0.6rem !important;
    }
}

@media (max-width: 768px) {
    .navbar .search-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    .sidebar a,
    .herosection > .sidebar a {
        font-size: 1.3rem !important;
    }
}

@media (max-width: 480px) {
    .sidebar a,
    .herosection > .sidebar a {
        font-size: 1.3rem !important;
    }
}

/* Six-column footer on wide screens; responsive layouts remain stacked. */
.footer {
    grid-template-columns: minmax(120px, 0.9fr) repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 1024px) {
    .footer {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 768px) {
    .footer {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   SUPPORT NAV DROPDOWN + ACTION BUTTONS
   ========================================================= */
.nav-links .nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-links .nav-dropdown > .nav-dropdown-toggle {
  position: relative; display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem 0; border:0; background:transparent; color:inherit; font:inherit;
  font-size:1.4rem !important; font-weight:600; cursor:pointer;
}
.nav-links .nav-dropdown > .nav-dropdown-toggle::after { content:"▾"; font-size:.7em; transition:transform .18s ease; }
.nav-links .nav-dropdown:hover > .nav-dropdown-toggle::after,
.nav-links .nav-dropdown:focus-within > .nav-dropdown-toggle::after { transform:rotate(180deg); }
.nav-links .nav-dropdown-menu {
  position:absolute; top:calc(100% + .45rem); right:0; min-width:220px; z-index:1000;
  display:none; flex-direction:column; gap:0; padding:.35rem; margin:0;
  background:#fff; color:#1e293b; border:1px solid #dbe4e8; border-radius:9px;
  box-shadow:0 12px 30px rgba(15,23,42,.18);
}
.nav-links .nav-dropdown:hover .nav-dropdown-menu,
.nav-links .nav-dropdown:focus-within .nav-dropdown-menu,
.nav-links .nav-dropdown.open .nav-dropdown-menu { display:flex; }
.nav-links .nav-dropdown-menu a { display:block; width:100%; padding:.65rem .8rem; color:#1e293b !important; font-size:1rem !important; border-radius:6px; white-space:nowrap; }
.nav-links .nav-dropdown-menu a::after { display:none; }
.nav-links .nav-dropdown-menu a:hover,
.nav-links .nav-dropdown-menu a:focus-visible { background:#eef8f8; color:#006666 !important; outline:none; }

.page-action-row { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:1rem; margin:2rem 0 1rem; }
.page-action-btn {
  display:inline-flex; align-items:center; justify-content:center; min-width:180px; padding:.8rem 1.2rem;
  border:1px solid #008080; border-radius:8px; background:#008080; color:#fff !important;
  font-weight:700; text-decoration:none !important; transition:background .18s ease, transform .18s ease;
}
.page-action-btn:hover { background:#006666; transform:translateY(-1px); }

@media (max-width:768px) {
  .nav-links .nav-dropdown { width:100%; }
  .nav-links .nav-dropdown > .nav-dropdown-toggle { width:100%; justify-content:space-between; padding:.6rem 0; }
  .nav-links .nav-dropdown-menu { position:static; width:100%; margin:.2rem 0 .35rem; box-shadow:none; }
  .nav-links .nav-dropdown-menu a { padding:.65rem .8rem; }
}


/* =========================================================
   PRODUCT CARD ACTIONS + WISHLIST — V9
   ========================================================= */
.product-category > .dynamic-product-card {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    position: relative !important;
    overflow: hidden !important;
}
.product-category > .dynamic-product-card > .product-card-link {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    flex: 0 0 200px !important;
}
.product-category > .dynamic-product-card > .product-card-link > .product-image {
    flex-basis: 150px !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
}
.product-category > .dynamic-product-card > .product-card-link > .product-name {
    flex-basis: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
}
.product-category > .dynamic-product-card .product-wishlist-btn {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 8 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 7px !important;
    border: 1px solid #d9e2e7 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.96) !important;
    color: #008080 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.12) !important;
}
.product-category > .dynamic-product-card .product-wishlist-btn img {
    width: 22px !important; height: 22px !important; max-width: none !important;
}
.product-category > .dynamic-product-card .product-wishlist-btn:hover,
.product-category > .dynamic-product-card .product-wishlist-btn.is-saved {
    background: #008080 !important; color: #fff !important; transform: scale(1.04) !important;
}
.product-category > .dynamic-product-card .product-wishlist-btn.is-saved img { filter: brightness(0) invert(1) !important; }
.product-category > .dynamic-product-card .product-card-buy-btn {
    flex: 0 0 50px !important;
    width: calc(100% - 20px) !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 4px 10px !important;
    border: 1px solid #008080 !important;
    border-radius: 8px !important;
    background: #008080 !important;
    color: #fff !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}
.product-category > .dynamic-product-card .product-card-buy-btn:hover {
    background: #006666 !important;
    transform: translateY(-1px) !important;
}

/* Shared Buy Now dialog so category cards use the same presentation as Productpage. */
.buy-now-modal { position: fixed !important; inset: 0 !important; z-index: 99999 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:20px !important; }
.buy-now-modal-backdrop { position:absolute !important; inset:0 !important; background:rgba(0,0,0,.62) !important; backdrop-filter:blur(3px) !important; }
.buy-now-modal-dialog { position:relative !important; z-index:1 !important; width:min(100%,620px) !important; max-height:90vh !important; overflow:auto !important; padding:22px !important; border-radius:14px !important; background:#fff !important; box-shadow:0 25px 70px rgba(0,0,0,.28) !important; }
.buy-now-modal-header { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin-bottom:14px !important; }
.buy-now-modal-header h2 { margin:0 !important; color:#008080 !important; font-size:1.25rem !important; }
.buy-now-modal-close { width:38px !important; height:38px !important; padding:0 !important; border:1px solid #cbd5e1 !important; border-radius:50% !important; background:#fff !important; color:#475569 !important; font-size:24px !important; cursor:pointer !important; }
.buy-now-options { display:grid !important; gap:10px !important; }
.buy-now-option { display:grid !important; grid-template-columns:1fr auto auto !important; gap:12px !important; align-items:center !important; padding:12px !important; border:1px solid #d9e2e7 !important; border-radius:9px !important; }
.buy-now-platform { font-weight:700 !important; color:#1e293b !important; }
.buy-now-price { color:#475569 !important; font-weight:600 !important; }
.buy-now-platform-btn { min-width:78px !important; min-height:38px !important; padding:7px 14px !important; border:1px solid #008080 !important; border-radius:7px !important; background:#008080 !important; color:#fff !important; font-weight:700 !important; cursor:pointer !important; }
body.buy-modal-open { overflow:hidden !important; }

/* Profile page should finish directly at its footer without the old artificial vertical space. */
.profile-page { min-height:0 !important; flex:0 0 auto !important; padding:2rem 20px !important; }

@media (max-width: 600px) {
    .product-category > .dynamic-product-card { height:250px !important; min-height:250px !important; max-height:250px !important; }
    .buy-now-modal { padding:12px !important; }
    .buy-now-modal-dialog { padding:16px !important; max-height:92vh !important; }
    .buy-now-option { grid-template-columns:1fr !important; gap:7px !important; }
    .buy-now-platform-btn { width:100% !important; }
}


/* =========================================================
   RESPONSIVE BREAKPOINT OVERRIDES — webCS
   Base 1920×1080 CSS above remains unchanged.
   These rules only tune the intermediate viewport ranges.
   ========================================================= */

/* Common desktop/tablet stacking: keep the header and Support
   dropdown above the hero/content stacking context. */
@media (min-width: 769px) {
    .navbar {
        position: relative !important;
        z-index: 10000 !important;
        overflow: visible !important;
    }

    .navbar .nav-links {
        position: relative !important;
        z-index: 10001 !important;
    }

    .nav-links .nav-dropdown {
        position: relative !important;
        z-index: 10002 !important;
    }

    .nav-links .nav-dropdown-menu {
        z-index: 10005 !important;
    }

    .herosection {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Pages that previously had no visible scrollbar keep their
       scrolling inside .content rather than on the outer page. */
    .herosection > .content,
    .content {
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        scrollbar-gutter: stable !important;
    }
}

/* =========================================================
   769 × 866 — TABLET
   Width range: 769–1100px
   ========================================================= */
@media (min-width: 769px) and (max-width: 1100px) {
    .navbar {
        height: auto !important;
        min-height: 76px !important;
        padding: 0.55rem 0.8rem !important;
        gap: 0.65rem !important;
        flex-wrap: wrap !important;
    }

    .navbar .logo-link,
    .navbar > a {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    .navbar .logo {
        gap: 0.5rem !important;
    }

    .navbar .logo img {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
    }

    .navbar .companyname {
        font-size: 1.9rem !important;
        letter-spacing: 0.04em !important;
    }

    .navbar .search-wrapper {
        flex: 0 1 210px !important;
        min-width: 170px !important;
    }

    .navbar .search-box {
        width: 210px !important;
        min-width: 170px !important;
        max-width: 210px !important;
        box-sizing: border-box !important;
    }

    .navbar .nav-links {
        flex: 1 1 100% !important;
        order: 3 !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.55rem !important;
        row-gap: 0.25rem !important;
        min-width: 0 !important;
    }

    .navbar .nav-links > a,
    .nav-links .nav-dropdown > .nav-dropdown-toggle {
        font-size: 0.82rem !important;
        line-height: 1.15 !important;
    }

    .nav-links .nav-dropdown-menu {
        top: calc(100% + 0.35rem) !important;
        right: 0 !important;
        min-width: 205px !important;
    }

    /* The content column owns vertical scrolling. */
    .herosection {
        grid-template-columns: 155px minmax(0, 1fr) !important;
        grid-template-rows: 1fr !important;
        grid-template-areas: "sidebar content" !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }

    .herosection > .sidebar,
    .sidebar {
        width: 155px !important;
        min-width: 155px !important;
        max-width: 155px !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        position: sticky !important;
        top: 0 !important;
        align-self: stretch !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 20 !important;
    }

    .herosection > .content,
    .content {
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    .sidebar a {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        padding: 0.58rem 0.45rem !important;
    }
}

/* =========================================================
   1101 × 866 — SMALL LAPTOP / TABLET LANDSCAPE
   Width range: 1101–1668px
   ========================================================= */
@media (min-width: 1101px) and (max-width: 1668px) {
    .navbar {
        height: auto !important;
        min-height: 82px !important;
        padding: 0.6rem 1rem !important;
        gap: 0.85rem !important;
        flex-wrap: wrap !important;
    }

    .navbar .logo img {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        min-height: 62px !important;
        max-width: 62px !important;
        max-height: 62px !important;
    }

    .navbar .companyname {
        font-size: 2.05rem !important;
        letter-spacing: 0.06em !important;
    }

    .navbar .search-wrapper {
        flex: 0 1 245px !important;
        min-width: 200px !important;
    }

    .navbar .search-box {
        width: 245px !important;
        min-width: 200px !important;
        max-width: 245px !important;
        box-sizing: border-box !important;
    }

    .navbar .nav-links {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 0.8rem !important;
        row-gap: 0.3rem !important;
        justify-content: center !important;
    }

    .navbar .nav-links > a,
    .nav-links .nav-dropdown > .nav-dropdown-toggle {
        font-size: 0.98rem !important;
        line-height: 1.2 !important;
    }

    .nav-links .nav-dropdown-menu {
        top: calc(100% + 0.4rem) !important;
        right: 0 !important;
        min-width: 220px !important;
    }

    .herosection {
        grid-template-columns: 185px minmax(0, 1fr) !important;
        grid-template-rows: 1fr !important;
        grid-template-areas: "sidebar content" !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }

    .herosection > .sidebar,
    .sidebar {
        width: 185px !important;
        min-width: 185px !important;
        max-width: 185px !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        position: sticky !important;
        top: 0 !important;
        align-self: stretch !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 20 !important;
    }

    .herosection > .content,
    .content {
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    .sidebar a {
        font-size: 1.1rem !important;
        line-height: 1.22 !important;
        padding: 0.62rem 0.5rem !important;
    }
}

/* =========================================================
   1669 × 953 — LARGE DESKTOP
   Width range: 1669px and above.
   Keep the existing 1920×1080 sizing; only enable the
   requested stacking and .content scrollbar behavior.
   ========================================================= */
@media (min-width: 1669px) {
    .herosection {
        overflow: hidden !important;
    }

    .herosection > .content,
    .content {
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        scrollbar-gutter: stable !important;
    }

    .navbar,
    .navbar .nav-links,
    .nav-links .nav-dropdown {
        position: relative !important;
        overflow: visible !important;
    }

    .navbar {
        z-index: 10000 !important;
    }

    .navbar .nav-links {
        z-index: 10001 !important;
    }

    .nav-links .nav-dropdown {
        z-index: 10002 !important;
    }

    .nav-links .nav-dropdown-menu {
        z-index: 10005 !important;
    }
}


/* SUPPORT EQUIPMENT PRODUCT CARD CONSISTENCY */
.product-category > .dynamic-product-card,
.tripod-product-grid > .dynamic-product-card {
    display:flex !important; flex-direction:column !important; position:relative !important;
    width:100% !important; height:250px !important; min-height:250px !important; max-height:250px !important;
    overflow:hidden !important; box-sizing:border-box !important;
}
.product-category > .dynamic-product-card > .product-card-link,
.tripod-product-grid > .dynamic-product-card > .product-card-link {
    display:flex !important; flex:0 0 200px !important; flex-direction:column !important;
    width:100% !important; height:200px !important; min-height:200px !important; max-height:200px !important;
    margin:0 !important; padding:0 !important; overflow:hidden !important; box-sizing:border-box !important;
}
.product-category > .dynamic-product-card > .product-card-link > .product-image,
.tripod-product-grid > .dynamic-product-card > .product-card-link > .product-image {
    flex:0 0 150px !important; width:100% !important; height:150px !important; min-height:150px !important; max-height:150px !important;
    padding:0 !important; overflow:hidden !important; box-sizing:border-box !important;
}
.product-category > .dynamic-product-card > .product-card-link > .product-image img,
.tripod-product-grid > .dynamic-product-card > .product-card-link > .product-image img {
    width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important;
    object-fit:contain !important; object-position:center !important; display:block !important;
}
.product-category > .dynamic-product-card > .product-card-link > .product-name,
.tripod-product-grid > .dynamic-product-card > .product-card-link > .product-name {
    flex:0 0 50px !important; width:100% !important; height:50px !important; min-height:50px !important; max-height:50px !important;
    padding:4px !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important;
    box-sizing:border-box !important; overflow:hidden !important; text-align:center !important;
}
.product-category > .dynamic-product-card .product-card-buy-btn,
.tripod-product-grid > .dynamic-product-card .product-card-buy-btn {
    flex:0 0 42px !important; width:calc(100% - 20px) !important; height:42px !important; min-height:42px !important; margin:4px 10px !important;
}


/* =========================================================
   REQUESTED 769×866 → 1100×866 RESPONSIVE RANGE
   Keep the 1920×1080 base styling untouched. These rules only
   control the intermediate tablet viewport when the screen is
   at least 866px tall.
   ========================================================= */
@media (min-width: 769px) and (max-width: 1100px) and (min-height: 866px) {
    .navbar {
        min-height: 76px !important;
        height: auto !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
    }

    .navbar .nav-links {
        flex: 1 1 100% !important;
        order: 3 !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .nav-links .nav-dropdown,
    .nav-links .nav-dropdown-menu {
        z-index: 10005 !important;
    }

    .herosection {
        min-height: 0 !important;
        height: auto !important;
        grid-template-columns: 155px minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .herosection > .sidebar,
    .sidebar {
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        align-self: stretch !important;
        overflow-y: auto !important;
    }

    .herosection > .content,
    .content {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        scrollbar-gutter: stable !important;
    }
}

/* Keep the QR column aligned like every other footer column. */
.footer > .footer-qr {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.25rem !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
}
.footer > div:not(.footer-qr) {
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   FINAL 769–1100px / 866px-VIEWPORT NAVBAR TUNING
   Only applies to the requested intermediate viewport range.
   ========================================================= */
@media (min-width: 769px) and (max-width: 1100px) and (min-height: 866px) {
    .navbar {
        height: 92px !important;
        min-height: 92px !important;
        max-height: 92px !important;
        padding: 0 0.75rem !important;
        gap: 0.45rem !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .navbar .logo-link,
    .navbar > a {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 28% !important;
    }

    .navbar .logo {
        gap: 0.4rem !important;
        min-width: 0 !important;
    }

    .navbar .logo img {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }

    .navbar .companyname {
        font-size: 1.82rem !important;
        line-height: 1.1 !important;
        letter-spacing: 0.02em !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .navbar .nav-links {
        order: initial !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(0.35rem, 0.8vw, 0.75rem) !important;
        row-gap: 0 !important;
        min-width: 0 !important;
    }

    .navbar .nav-links > a,
    .nav-links .nav-dropdown > .nav-dropdown-toggle {
        font-size: clamp(0.68rem, 1vw, 0.82rem) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .nav-links .nav-dropdown > .nav-dropdown-toggle {
        gap: 0.15rem !important;
    }

    .nav-links .nav-dropdown-menu {
        top: calc(100% + 0.35rem) !important;
        right: 0 !important;
        min-width: 195px !important;
    }

    .navbar .search-wrapper {
        flex: 0 1 180px !important;
        min-width: 135px !important;
        max-width: 180px !important;
    }

    .navbar .search-box {
        width: 100% !important;
        min-width: 135px !important;
        max-width: 180px !important;
        padding: 0.45rem 0.75rem !important;
        font-size: 0.82rem !important;
        box-sizing: border-box !important;
    }
}


/* =========================================================
   TARGETED PAGE FLOW FIX
   Requested behavior:
   - Keep index.html layout untouched.
   - Other pages: .herosection must not be the vertical
     scroll container; the page grows naturally to its footer.
   - Sidebar follows the actual hero/content height.
   ========================================================= */

body:not(.index-page) {
    min-height: 100vh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body:not(.index-page) .herosection {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    grid-template-rows: auto !important;
    overflow: visible !important;
    align-items: stretch !important;
}

body:not(.index-page) .herosection > .sidebar,
body:not(.index-page) .sidebar {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: visible !important;
    position: relative !important;
    top: auto !important;
}

body:not(.index-page) .herosection > .content,
body:not(.index-page) .content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

body:not(.index-page) .footer {
    flex: 0 0 auto !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
}

/* =========================================================
   C SKY HEADER BRAND + AUTH CONTROLS
   ========================================================= */
.navbar .companyname {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    white-space: nowrap !important;
    line-height: 0.95 !important;
    letter-spacing: 0.02em !important;
    font-size: clamp(0.9rem, 2.2vw, 1.85rem) !important;
    max-width: 32vw !important;
}

.navbar .companyname span {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

.header-auth-button {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 0.45rem 0.75rem !important;
    border: 1px solid rgba(255,255,255,.65) !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: clamp(0.72rem, 1vw, 0.9rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin-left: 8px !important;
}

.header-auth-button:hover,
.header-auth-button:focus-visible {
    background: #ffffff !important;
    color: #008080 !important;
    outline: none !important;
}

.header-auth-button[hidden] {
    display: none !important;
}

/* The profile control is always a true circle at every viewport size. */
.navbar .profile-icon-link {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 38px !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.navbar .profile-icon-link svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    flex: 0 0 22px !important;
}

@media (max-width: 768px) {
    .navbar .companyname {
        font-size: clamp(0.78rem, 4vw, 1.35rem) !important;
        line-height: 0.95 !important;
        max-width: 28vw !important;
    }

    .navbar .header-auth-button {
        min-height: 32px !important;
        padding: 0.35rem 0.55rem !important;
        font-size: clamp(0.65rem, 2.2vw, 0.8rem) !important;
        margin-left: 4px !important;
    }

    .navbar .profile-icon-link {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        flex-basis: 38px !important;
    }
}

@media (max-width: 480px) {
    .navbar .companyname {
        font-size: clamp(0.72rem, 4.5vw, 1.05rem) !important;
        max-width: 25vw !important;
    }

    .navbar .header-auth-button {
        min-height: 30px !important;
        padding: 0.3rem 0.45rem !important;
        font-size: 0.68rem !important;
    }
}



/* =========================================================
   HEADER FIX (final cascade layer - header only)
   1) Auth buttons (Sign Up / Sign In) made compact so they no longer
      crowd or wrap the nav links.
   2) Support nav item is plain text + dropdown arrow (no button look).
   3) Header is responsive from large desktops down to small phones.
   Everything here is scoped to .navbar; page content is untouched.
   ========================================================= */

/* ---- 1) Compact auth buttons --------------------------------------
   ".navbar a { font-size: 1.4rem !important }" used to inflate these
   buttons; the extra a.header-auth-button specificity wins over it. */
.navbar a.header-auth-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 0.7rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

/* ---- 2) Support = simple text + dropdown -------------------------
   Cancels the global button styling (background, border, shadow,
   min-height, padding, hover lift) for this toggle only. */
.navbar .nav-links .nav-dropdown > .nav-dropdown-toggle,
.navbar .nav-links .nav-dropdown > .nav-dropdown-toggle:hover,
.navbar .nav-links .nav-dropdown > .nav-dropdown-toggle:active,
.navbar .nav-links .nav-dropdown > .nav-dropdown-toggle:focus {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font-weight: 600 !important;
    line-height: inherit !important;
    text-align: left !important;
}
.navbar .nav-links .nav-dropdown > .nav-dropdown-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8) !important;
    outline-offset: 3px !important;
}

/* ---- 3a) Desktop / laptop (>= 1300px): one scaling row -------------
   Nav links stay on one line (Support never drops below the others)
   and the logo, nav and search scale down smoothly on smaller laptops. */
@media (min-width: 1300px) {
    .navbar {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: clamp(0.4rem, 0.9vw, 1rem) !important;
        padding-left: clamp(0.75rem, 1.5vw, 2rem) !important;
        padding-right: clamp(0.75rem, 1.5vw, 2rem) !important;
    }
    .navbar > a:first-child {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    .navbar .logo {
        gap: clamp(0.4rem, 0.8vw, 1rem) !important;
        max-width: none !important;
        overflow: visible !important;
    }
    .navbar .logo img {
        width: clamp(44px, 3.6vw, 70px) !important;
        height: clamp(44px, 3.6vw, 70px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
    }
    .navbar .logo .companyname {
        font-size: clamp(1.05rem, 1.55vw, 1.85rem) !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    .navbar .nav-links {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: clamp(0.5rem, 1.2vw, 2.25rem) !important;
    }
    .navbar .nav-links > a,
    .navbar .nav-links .nav-dropdown > .nav-dropdown-toggle {
        font-size: clamp(0.88rem, 1.1vw, 1.4rem) !important;
        white-space: nowrap !important;
    }
    .navbar .search-wrapper {
        flex: 0 1 clamp(120px, 14vw, 300px) !important;
        min-width: 110px !important;
        max-width: 300px !important;
    }
    .navbar .search-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 300px !important;
        box-sizing: border-box !important;
    }
    .navbar .wishlist-icon-link,
    .navbar .profile-icon-link {
        flex: 0 0 38px !important;
    }
}

/* ---- 3b) Small laptop / tablet (769 - 1299px): two tidy rows ----------------------
   Row 1: logo | search | wishlist | profile | Sign Up | Sign In
   Row 2: nav links, centred, readable size (no cramped tiny text). */
@media (min-width: 769px) and (max-width: 1299px) {
    .navbar {
        flex: 0 0 auto !important;   /* releases the global 10vh flex-basis so both rows fit */
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.5rem 0.6rem !important;
        padding: 0.6rem 1rem !important;
        box-sizing: border-box !important;
    }
    .navbar > a:first-child {
        order: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    .navbar .logo {
        gap: 0.5rem !important;
        max-width: none !important;
        overflow: visible !important;
    }
    .navbar .logo img {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }
    .navbar .logo .companyname {
        font-size: clamp(1.15rem, 2.6vw, 1.6rem) !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    .navbar .search-wrapper {
        order: 2 !important;
        flex: 0 1 220px !important;
        min-width: 130px !important;
        max-width: 220px !important;
    }
    .navbar .search-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
    .navbar .wishlist-icon-link { order: 3 !important; flex: 0 0 38px !important; }
    .navbar .profile-icon-link  { order: 4 !important; flex: 0 0 38px !important; }
    .navbar a.header-signup-button { order: 5 !important; }
    .navbar a.header-signin-button { order: 6 !important; }
    .navbar .nav-links {
        order: 7 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.2rem clamp(1rem, 3vw, 2rem) !important;
    }
    .navbar .nav-links > a,
    .navbar .nav-links .nav-dropdown > .nav-dropdown-toggle {
        font-size: clamp(0.95rem, 1.7vw, 1.2rem) !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    .navbar .nav-links .nav-dropdown-menu {
        top: calc(100% + 0.35rem) !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        min-width: 205px !important;
    }
}

/* ---- 3c) Mobile (<= 768px): hamburger menu ------------------------- */
@media (max-width: 768px) {
    .navbar .wishlist-icon-link {
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
    }
    .navbar > a:first-child {
        flex: 1 1 auto !important;
        min-width: max-content !important;
    }
    .navbar .logo {
        overflow: visible !important;
        max-width: none !important;
    }
    .navbar .logo .companyname {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    /* Support row in the opened menu: same look/size as the other rows. */
    .navbar .nav-links .nav-dropdown {
        width: 100% !important;
        flex-direction: column !important;   /* dropdown opens below "Support", not beside it */
        align-items: stretch !important;
    }
    .navbar .nav-links .nav-dropdown-menu {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0.2rem 0 0.35rem !important;
        transform: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }
    .navbar .nav-links .nav-dropdown > .nav-dropdown-toggle,
    .navbar .nav-links .nav-dropdown > .nav-dropdown-toggle:hover,
    .navbar .nav-links .nav-dropdown > .nav-dropdown-toggle:active,
    .navbar .nav-links .nav-dropdown > .nav-dropdown-toggle:focus {
        width: 100% !important;
        justify-content: space-between !important;
        padding: 0.65rem 0.85rem !important;
        font-size: 1.4rem !important;
        line-height: 1.25 !important;
    }
    .navbar .nav-links .nav-dropdown-menu a {
        font-size: 1.1rem !important;
    }
}

/* ---- 3d) Phones (<= 560px): forced two rows ------------------------
   Row 1: logo | wishlist | profile | menu button
   (opened menu appears here, as before)
   Row 2: Sign Up | Sign In | search (takes the remaining width) */
@media (max-width: 560px) {
    .navbar {
        gap: 0.5rem !important;
        padding: 0.55rem 0.65rem !important;
    }
    .navbar::after {               /* forces the row break after the menu button */
        content: "";
        order: 5;
        flex: 0 0 100%;
        height: 0;
    }
    .navbar > a:first-child        { order: 1 !important; }
    .navbar .wishlist-icon-link    { order: 2 !important; }
    .navbar .profile-icon-link     { order: 3 !important; }
    .navbar .mobile-toggle-btn     { order: 4 !important; margin-left: 0 !important; }
    .navbar .nav-links             { order: 5 !important; }
    .navbar a.header-signup-button { order: 6 !important; }
    .navbar a.header-signin-button { order: 7 !important; }
    .navbar .search-wrapper {
        order: 8 !important;
        flex: 1 1 110px !important;
        width: auto !important;
        min-width: 100px !important;
        max-width: none !important;
    }
    .navbar .search-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
    .navbar .logo img {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    .navbar .logo .companyname {
        font-size: clamp(0.95rem, 4.6vw, 1.5rem) !important;
    }
    .navbar a.header-auth-button {
        padding: 0 0.6rem !important;
        font-size: 0.75rem !important;
    }
}

/* ---- 3e) Very narrow phones (<= 360px) ---------------------------- */
@media (max-width: 360px) {
    .navbar .logo img {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }
    .navbar a.header-auth-button {
        padding: 0 0.45rem !important;
        font-size: 0.7rem !important;
    }
}


/* =========================================================
   SEARCH SUGGESTIONS: ALWAYS ON THE TOP LAYER (all devices)
   Stacking order inside the header (low -> high):
     nav links (10001) < Support dropdown (10005) < search box (10010)
     < search suggestion panel (10020)
   The header itself sits above the hero, sidebar and page content.
   ========================================================= */
.navbar {
    position: relative !important;
    z-index: 10000 !important;
}
.navbar .search-wrapper {
    position: relative !important;
    z-index: 10010 !important;
}
.navbar .search-wrapper .search-suggestions {
    z-index: 10020 !important;
    max-width: calc(100vw - 20px) !important;
}

/* Tablet portrait / large phones (561-768px): search sits at the left, so
   open the panel to the right of the box and keep it inside the screen. */
@media (min-width: 561px) and (max-width: 768px) {
    .navbar .search-wrapper .search-suggestions {
        left: 0 !important;
        right: auto !important;
        width: min(360px, calc(100vw - 26px)) !important;
    }
}

/* Phones (<=560px): search sits at the right of row 2, so the panel opens
   leftwards from the box and stays inside the screen. */
@media (max-width: 560px) {
    .navbar .search-wrapper .search-suggestions {
        left: auto !important;
        right: 0 !important;
        width: min(360px, calc(100vw - 20px)) !important;
    }
}