<style>
/* Safety net, also present in the Custom CSS. Kept here so the snippet is
   self-protecting if the Custom CSS is ever out of sync. `clip` beats `hidden`
   because `hidden` makes a scroll container and breaks sticky headers;
   browsers without `clip` fall back to the `hidden` above it. */
html,
body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* Every selector below is namespaced `adr-sidebar-*`. Nothing here uses a
   generic class name, so the sidebar can no longer collide with the theme or
   with the custom category tiles on the home page. */

.adroit-sidebar-wrap {
    position: relative;
    width: 295px;
    max-width: 100%;
    margin: -40px 0 0 -20px;
    padding-bottom: 30px; /* padding, not margin: a margin would collapse with
                             whatever follows. 30px preserves the flow footprint
                             of the original markup (30px button + sidebar). */
    /* Deliberately NOT overflow:hidden - in a theme column narrower than 295px
       that would clip the toggle button in half. */
}

.adr-sidebar {
    width: 275px;
    background-color: #08338f; /* Dark blue */
    padding: 0;
    color: white;
    border-radius: 0 10px 10px 0;
    transition: transform 0.5s ease, width 0.5s ease;
    overflow: hidden;
}

.adr-sidebar.is-collapsed {
    width: 115px;
    transform: translateX(-10px);
}

.adr-sidebar a {
    display: flex;
    align-items: center;
    padding: 5px 25px;
    color: white;
    text-decoration: none;
    font-size: 12px;
    transition: background-color 0.3s;
    border-radius: 10px;
    margin-bottom: 0px;
    font-weight: normal;
}

.adr-sidebar a:hover {
    background-color: #009EFB; /* Light blue on hover */
    transform: scale(1.07);
}

.adr-sidebar-label {
    margin-right: 20px;
    white-space: nowrap; /* safe here - it can only ever affect the sidebar */
    opacity: 1;
    transition: 0.6s ease;
}

.adr-sidebar.is-collapsed .adr-sidebar-label {
    display: none;
}

.adr-sidebar-all {
    background-color: #009EFB; /* Light blue */
    color: #333;
    margin: 0px;
    padding: 0px 20px;
    font-weight: normal;
    transform: scale(1.07);
}

/* Absolute inside .adroit-sidebar-wrap, so its overflow is contained by the
   wrapper rather than by the document. The collapsed state travels by
   transform, not by animating `left`: same 235px -> 70px, on the compositor. */
#adr-toggle {
    position: absolute;
    top: 0;
    left: 255px; /* = 235px on screen, after the wrapper's -20px margin */
    cursor: pointer;
    z-index: 999;
    color: white;
    background-color: #08338f; /* Dark blue */
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease, background-color 0.3s ease;
}

#adr-toggle.is-collapsed {
    transform: translateX(-165px) rotate(180deg);
}

.adr-sidebar-icon,
.adr-sidebar-icon-home {
    height: 50px;
    width: 50px;
    padding: 7px;
    box-sizing: border-box;
    object-fit: contain;
    border-radius: 50%;
    margin-right: 20px;
}

.adr-sidebar-icon {
    margin-left: 10px;
}

.adr-sidebar-icon-home {
    margin-left: 15px;
}

.adr-sidebar.is-collapsed .adr-sidebar-icon,
.adr-sidebar.is-collapsed .adr-sidebar-icon-home {
    margin-bottom: 5px;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.837);
}

.adr-sidebar.is-collapsed .adr-sidebar-icon {
    margin-right: 30px;
    transform: translateX(5px);
}

@media (max-width: 768px) {
    /* Was translated off-screen but still reserving a 275px column. */
    .adroit-sidebar-wrap {
        display: none;
    }
}

 /* ============================================================
     Client request 2026-08-19: larger type + bold in-stock part numbers
     Appended below the adr-sidebar block. Do not reorder.
     ============================================================ */

  /* --- Overall type scale (client: "increase font size") --- */
  .theme-product-name > a          { font-size: 16px; }
  .theme-product-total-price-lable { font-size: 16px; }

  /* --- In-stock part numbers: bold + larger ---
     The stock script only renders [stock_available] when stock > 0, so a
     tile containing it is in stock. .theme-prod-box is the listing tile,
     so cart rows are excluded automatically.
     Targets `> a`, not .theme-product-name — the wishlist button is a
     sibling inside that div and must not scale with the text. */
  .theme-prod-box:has([stock_available]) .theme-product-name > a {
      font-weight: 700 !important;
      font-size: 19px !important;
      line-height: 1.3;
  }

  /* --- Row alignment ---
     A bold 19px part number wraps where a normal one does not, which
     pushes prices to different heights across a grid row. Reserve two
     lines. Tune against the longest SKUs (AD287-10-ADS-1133-550). */
  .theme-product-name { min-height: 3em; }


</style>