/* Mobile usability fixes for the Cocer Peptides clone.
   Desktop is untouched: everything is scoped to touch/coarse-pointer or narrow widths.

   Findings this addresses (from a 320/390/412px audit of the live site):
     1. breadcrumb and footer links render 17-24px tall - below the 44px comfort minimum
     2. category chips on the products page are 21px tall
     3. the fixed contact bar sits over the bottom of the content, clipping the last
        "Read More" link on article cards
     4. the COA list paginates 20 rows per page, i.e. a 12-screen scroll on a phone
        (page size is handled in download-pagination.js, not here) */

/* ------------------------------------------------------------------ 1 & 2 */
@media (pointer: coarse), (max-width: 820px) {
  /* Breadcrumb: it is a primary "get back up a level" control on a phone. */
  .sitewidget-position a,
  .sitewidget-position-innericon2 a,
  [class*="position-innericon"] a {
    display: inline-block !important;
    min-height: 40px !important;
    line-height: 40px !important;
    padding: 0 2px !important;
  }
  .sitewidget-position,
  [class*="position-innericon"] {
    line-height: 1.4 !important;
  }

  /* Category filter chips (products page) - 21px was far too small to tap. */
  .mobile-cat-pill {
    min-height: 42px !important;
    padding: 10px 16px !important;
    font-size: 15px !important;
  }

  /* Pager must be a comfortable target too. */
  .paging > li > a,
  .pagination > li > a,
  .page-number {
    display: inline-block !important;
    min-width: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
    text-align: center !important;
  }
  .paging > li,
  .pagination > li {
    margin: 2px 1px !important;
  }

  /* Footer / contact links stack tightly; give them room to be tapped. */
  .foot-wrap a,
  .sitewidget-footnav a,
  .bottom-power a,
  [class*="footer"] a[href] {
    display: inline-block !important;
    min-height: 36px !important;
    line-height: 36px !important;
  }

  /* Primary calls to action: "Inquire Price" is 29px and "Read More" 21px on a
     phone - the two things a visitor is most likely to tap. */
  .product-card-btn,
  .ArticlePicList_ItemContentInnerA,
  .ArticlePicList_Item .button,
  .ArticlePicList_ItemContent a.button,
  a[class*="ReadMore"],
  [class*="ReadMore"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
  }
  .ArticlePicList_ItemContentInnerA,
  .ArticlePicList_Item .button {
    padding: 10px 0 !important;
  }

  /* Headline links inside cards: enlarge the tappable row without changing type size. */
  .ArticlePicList_ItemContentInnerH5 a,
  .ArticlePicList_Item .title a {
    display: inline-block !important;
    min-height: 34px !important;
  }

  /* Social icons and the long "View Full COA List" link. */
  .follow-a,
  a.follow-a,
  [class*="follow-a"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
  }
  a[href*="docs.google.com"],
  a[href*="Google"] {
    display: inline-block !important;
    min-height: 38px !important;
    line-height: 38px !important;
  }
  /* Sidebar nav links (Peptides / Janoshik COA ...). */
  [class*="sidebar"] a[href],
  [class*="leftNav"] a[href] {
    display: inline-block !important;
    min-height: 34px !important;
    line-height: 34px !important;
  }

  /* Small utility links that were still 17-23px tall:
     - the notice bar at the very top (Peptides / Janoshik COA)
     - the footer "Sitemap | Privacy Policy" and contact address
     - the products page breadcrumb
     - the drawer's contact lines */
  .sitewidget-holidayNotice .sitewidget-bd a,
  .holidayNotice-top a[href],
  .sitewidget-text .sitewidget-bd a[href],
  .breadcrumb a,
  .breadcrumb li,
  #native-mobile-drawer a[href] {
    display: inline-block !important;
    min-height: 36px !important;
    line-height: 36px !important;
    padding: 0 2px !important;
  }
  .breadcrumb,
  .breadcrumb li {
    line-height: 1.3 !important;
  }

  /* ---------------------------------------------------------------- 3 */
  /* The fixed contact widget (official-sidebar-bar / onlineService) overlays the
     end of the page, which clipped the last article card's "Read More" link. */
  body {
    padding-bottom: 76px !important;
  }
  /* Keep the article-list cards clear of it as well. */
  .ArticlePicList_Item:last-child,
  .Article_Container {
    margin-bottom: 12px !important;
  }
}

/* Very small phones: drop the extra label padding so nothing wraps awkwardly. */
@media (max-width: 360px) {
  .mobile-cat-pill {
    padding: 9px 12px !important;
    font-size: 14px !important;
  }
}

/* ---------------------------------------------------------------------------
   Product cards whose thumbnail pointed at the original CDN
   (inrorwxhkpmnlm5m-static.micyjz.com). That host now answers 567/403 even for
   same-origin browser requests, so those images can never load and no local copy
   exists. The dead references are gone from the markup; these rules keep the card
   tidy instead of letting an empty image cell collapse and leak raw alt text.
   Not width-scoped: the defect is in the markup, not the viewport.
   --------------------------------------------------------------------------- */
.prodlist-picbox img[data-dead-thumb="1"],
.prodlist-cell img[data-dead-thumb="1"],
img[data-dead-thumb="1"] {
  display: none !important;
}

.prodlist-picbox:has(img[data-dead-thumb="1"]),
.prodlist-cell:has(img[data-dead-thumb="1"]) {
  min-height: 0 !important;
}

/* Give the card body a stable shape when its picture is absent. */
li.sitewidget-prodlist-noborder:has(img[data-dead-thumb="1"]) .prodlist-cell,
li[class*="prodlist"]:has(img[data-dead-thumb="1"]) .prodlist-cell {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
}

/* The substituted product images are real photos: make sure they fill the cell. */
.prodlist-picbox img[data-substituted="1"],
.prodlist-cell img[data-substituted="1"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ---------------------------------------------------------------------------
   B) Loading placeholders for product imagery.

   Server round-trip here is ~230 ms, and a page pulls dozens of 20-40 KB product
   images, so a card can sit image-less for several seconds. On a white card with a
   white image well the result is an apparently empty box, which reads as "broken"
   rather than "loading".

   Measured on a phone: the home product tile renders a 148x148 well and the grid
   card a 200x200 well, both with object-fit:contain and a transparent background.
   Painting a placeholder tone on the well makes the wait legible and reserves the
   box so nothing shifts when the image lands.

   Scoped to product/COA imagery only - logos, icons and decorative art are excluded.
   --------------------------------------------------------------------------- */
:root {
  --img-placeholder: #eef2f7;
}

/* The picture well itself. */
.sitewidget-prodTabList-cont .prodlist-picbox,
.prodlist-picbox,
.prodlist-cell,
.download-list8-item .item-img {
  background-color: var(--img-placeholder) !important;
}

/* The image box: reserve the square the product photos use, and keep the tone
   visible until the bitmap paints. */
.sitewidget-prodTabList-cont img,
.prodlist-picbox img,
.prodlist-cell img,
.prodlist-wrap img,
.sitewidget-prodlist img,
.download-list8-item .item-img img {
  background-color: var(--img-placeholder) !important;
  object-fit: contain !important;
}

/* Square wells get an explicit ratio so the box never collapses while loading. */
.sitewidget-prodTabList-cont .prodlist-picbox img,
.sitewidget-prodTabList-cont img,
.prodlist-picbox img,
.prodlist-cell img {
  aspect-ratio: 1 / 1 !important;
}

/* Do not give the placeholders to brand marks or decorative art. */
img[src*="logo"],
img[src*="Logo"],
img[class*="logo"],
img[src$=".svg"],
img[src*=".svg"],
.prodlist-picbox img[data-dead-thumb="1"] {
  background-color: transparent !important;
  aspect-ratio: auto !important;
}