/* Printo primary navigation — Style 5 v3.
   Six equal coloured department tabs on one line, a grouped dropdown, and a
   "most ordered" strip. --po-c is the department fill colour, --po-d a darkened
   twin used for type, because #FEC006 and #00BBD3 are illegible as text on white.
   Filename is versioned: Sucuri edge-caches skin files by name, so any change
   here needs a new filename and a layout bump. */
.po-old-nav{display:none !important;}
#po-nav{font-family:Roboto,Arial,Helvetica,sans-serif;position:relative;z-index:900;background:#fff;}
#po-nav *{box-sizing:border-box;}
#po-nav a{text-decoration:none;}

/* ---- tab row ---- */
.po5{position:relative;}
.po5-top{display:flex;position:relative;z-index:20;}
.po5-item{flex:1 1 0;min-width:0;position:static;}
.po5-item > a{display:block;height:52px;line-height:52px;padding:0 10px;
  font-size:13.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fff;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--po-c,#00BBD3);transition:filter .15s ease;}
.po5-item > a i{font-style:normal;font-size:9px;margin-left:6px;opacity:.85;}
.po5-item:hover > a,.po5-item.po-open > a{filter:brightness(.92);}
.po5-item:hover .po-panel,.po5-item.po-open .po-panel{display:block;}

/* ---- dropdown ---- */
/* Anchored to the tab row, not the whole block, so it opens flush against the
   tabs. Below the strip it left a gap that dropped :hover on the way down. */
.po-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid #e3e6ea;
  border-top:3px solid var(--po-c,#00BBD3);box-shadow:0 14px 30px -14px rgba(0,0,0,.38);
  padding:24px 26px 22px;display:none;text-align:left;z-index:21;}
.po-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:6px 32px;}
.po-g h5{margin:0 0 13px;padding-bottom:9px;border-bottom:2px solid var(--po-c,#00BBD3);
  font:700 10.5px/1 Poppins,Roboto,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6b7280;}
.po-item{display:block;font:400 15.5px/1.35 Poppins,Roboto,Arial,sans-serif;color:#16191d;padding:8px 0;
  transition:color .12s ease,transform .12s ease;}
.po-item:hover{color:var(--po-d,#0197AB);transform:translateX(3px);}
.po-pop{display:inline-block;font:700 9px/1 Poppins,Roboto,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  font-style:normal;color:#fff;background:var(--po-d,#0197AB);padding:3px 6px;border-radius:3px;margin-left:9px;vertical-align:2px;}
.po-all{display:inline-block;margin-top:16px;padding-top:12px;border-top:1px solid #eceff2;
  font:700 13.5px/1 Poppins,Roboto,Arial,sans-serif;color:var(--po-d,#0197AB);}

/* ---- most ordered strip ---- */
.po5-strip{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;overflow-x:auto;
  background:#f4f6f8;border-bottom:1px solid #e6e6e6;padding:9px 16px;-webkit-overflow-scrolling:touch;}
.po5-strip::-webkit-scrollbar{height:5px;}
.po5-strip::-webkit-scrollbar-thumb{background:#cfd5dc;border-radius:4px;}
.po5-strip .po5-lab{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#8c939d;font-weight:700;margin-right:3px;white-space:nowrap;}
.po5-strip a{font-size:12.5px;color:#333;padding:5px 12px;border:1px solid #d8dde3;border-radius:20px;background:#fff;white-space:nowrap;}
.po5-strip a:hover{background:#00BBD3;border-color:#00BBD3;color:#fff;}

/* ---------------- search results: layered nav in black ----------------
   Only on the search results page (body.catalogsearch-result-index); the
   category pages keep the theme's teal links. */
body.catalogsearch-result-index .block-layered-nav #narrow-by-list dt,
body.catalogsearch-result-index .block-layered-nav #narrow-by-list dd a,
body.catalogsearch-result-index .block-layered-nav #narrow-by-list dd a .count,
body.catalogsearch-result-index .block-layered-nav .block-subtitle{color:#16191d;}
body.catalogsearch-result-index .block-layered-nav #narrow-by-list dd a:hover,
body.catalogsearch-result-index .block-layered-nav #narrow-by-list dd a:hover .count{color:#0197AB;}

/* ---------------- product photos: softened corners ----------------
   The photos themselves are square, so the container is rounded and clips them. */
.products-grid .product-image-container,
.products-grid a.product-image,
.products-grid a.product-image .ph-stage,
.products-list a.product-image,
.mini-products-list a.product-image{border-radius:8px;overflow:hidden;}
.products-grid a.product-image img,
.products-list a.product-image img,
.mini-products-list a.product-image img{border-radius:8px;}
.product-img-box .main-image,
.product-img-box .main-image img,
.product-img-box .more-views img{border-radius:8px;}
/* Product page gallery. The main image and thumbnails are built at runtime by
   Unite Gallery (ug-* classes), so the static .main-image selectors above never
   matched. Radius goes on the image itself rather than on a wrapper with
   overflow:hidden, which would clip the gallery's own controls. */
/* The main image is 650px, so it carries a larger radius than the small
   listing thumbnails. Unite Gallery paints its slider wrapper #f5f5f5 and makes
   it slightly taller than the photo, which showed as a grey band and grey
   corners behind the rounding — hence the white background below. */
/* !important because Unite Gallery writes the #f5f5f5 background as an inline
   style at runtime, which beats an ordinary stylesheet rule. */
.product-img-box .ug-slider-wrapper,
.product-img-box .ug-slide-wrapper,
.product-img-box .ug-item-wrapper,
.product-img-box .ug-gallery-wrapper,
.product-img-box .ug-strip-panel{background:#fff !important;}
.product-img-box .ug-item-wrapper img,
.product-img-box .ug-image-container img,
.product-img-box .MagicToolboxContainer img,
.product-img-box .MagicZoom img{border-radius:14px;}
.product-img-box img.ug-thumb-image{border-radius:8px;}
.product-img-box .ug-thumb-wrapper{border-radius:8px;overflow:hidden;background:#fff;}

@media (max-width:1023px){ #po-nav{display:none;} }

/* ================= LISTING PAGES (category + search) ================= */

/* --- product titles: darker and firmer, same size --- */
.products-grid .product-name a,
.products-list .product-name a{color:#16191d;font-weight:600;letter-spacing:-.005em;}
.products-grid .product-name a:hover,
.products-list .product-name a:hover{color:#0197AB;}

/* --- one clickable card, hover only swaps the photo --- */
/* the extra thumbnails, star block and add-to-cart that used to appear on hover */
.products-grid .product-thumbs,
.products-list .product-thumbs,
.products-grid .wrapper-hover-hiden,
.products-list .wrapper-hover-hiden{display:none !important;}
.po-card{position:relative;}
.po-card-link{position:absolute;left:0;top:0;right:0;bottom:0;z-index:4;
  background:transparent;border-radius:10px;}
.po-card-link:focus-visible{outline:2px solid #00BBD3;outline-offset:2px;}
.po-card .product-details{position:relative;z-index:1;}

/* --- description in the sidebar --- */
.po-side-desc{position:relative;background:#fff;border:1px solid #e6e9ed;border-radius:10px;
  padding:14px 16px 4px;margin:0 0 16px;}
.po-side-desc p{font-size:13px;line-height:1.55;color:#4b5563;margin:0 0 10px;}
.po-side-desc p:first-child{color:#16191d;}
.po-side-desc.is-clamped{max-height:210px;overflow:hidden;padding-bottom:0;}
.po-side-desc.is-clamped::after{content:"";position:absolute;left:1px;right:1px;bottom:36px;height:46px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none;}
.po-side-desc.is-clamped.is-open{max-height:none;padding-bottom:0;}
.po-side-desc.is-clamped.is-open::after{display:none;}
/* full-width white strip so the toggle never sits on top of clipped text */
.po-more{position:absolute;left:1px;right:1px;bottom:1px;z-index:2;background:#fff;border:0;
  padding:9px 16px 12px;cursor:pointer;text-align:left;border-radius:0 0 10px 10px;
  font:600 12.5px/1 Poppins,Roboto,Arial,sans-serif;color:#0197AB;}
.po-more:hover{text-decoration:underline;}
.po-side-desc.is-open .po-more{position:relative;left:auto;right:auto;bottom:auto;}

/* --- sort & display panel --- */
.po-refine{background:#fff;border:1px solid #e6e9ed;border-radius:10px;padding:14px 16px 16px;margin:0 0 20px;}
.po-refine-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding-bottom:10px;margin-bottom:12px;border-bottom:2px solid #00BBD3;}
.po-refine-title{font:700 11px/1 Poppins,Roboto,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b7280;}
.po-count{font-size:12px;color:#8c939d;white-space:nowrap;}
.po-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;}
.po-row:last-child{margin-bottom:0;}
.po-row > label{font-size:12.5px;color:#4b5563;white-space:nowrap;margin:0;font-weight:500;}
.po-field{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;justify-content:flex-end;}
.po-field select{flex:1 1 auto;min-width:0;max-width:150px;font-size:12.5px;color:#16191d;
  padding:6px 8px;border:1px solid #d8dde3;border-radius:6px;background:#fff;height:auto;}
.po-field select:focus{outline:2px solid #00BBD3;outline-offset:1px;}
.po-dir{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;
  border:1px solid #d8dde3;border-radius:6px;color:#0197AB;font-size:14px;line-height:1;text-decoration:none;}
.po-dir:hover{background:#00BBD3;border-color:#00BBD3;color:#fff;}
.po-seg{display:flex;gap:0;border:1px solid #d8dde3;border-radius:6px;overflow:hidden;}
.po-seg-btn{display:grid;place-items:center;width:32px;height:30px;color:#7b8494;
  text-decoration:none;font-size:13px;background:#fff;}
.po-seg-btn + .po-seg-btn{border-left:1px solid #d8dde3;}
.po-seg-btn.on{background:#00BBD3;color:#fff;}
.po-seg-btn:hover:not(.on){background:#f4f6f8;color:#16191d;}
.po-ico{font-style:normal;line-height:1;font-size:12px;}
.po-dir i{font-size:11px;}

@media (max-width:767px){
  .po-side-desc,.po-refine{margin-bottom:14px;}
}


/* --- Browse By: one collapsible row per department --- */
.col-left .block-layered-nav dl > dd > ol > li.po-acc{list-style:none;margin:0;padding:0;border-bottom:1px solid #eceff2;}
.col-left .block-layered-nav dl > dd > ol > li.po-acc:last-child{border-bottom:0;}
.po-acc-head{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;cursor:pointer;
  padding:11px 2px;text-align:left;font:600 13px/1.3 Poppins,Roboto,Arial,sans-serif;color:#16191d;}
.po-acc-head:hover{color:#0197AB;}
.po-acc-name{flex:1 1 auto;min-width:0;}
.po-acc-count{flex:0 0 auto;font-size:11px;font-weight:400;color:#9aa1ab;}
.po-acc-chev{flex:0 0 auto;font-size:13px;color:#9aa1ab;transition:transform .18s ease;}
.po-acc.is-open .po-acc-chev{transform:rotate(180deg);}
.po-acc.is-open .po-acc-head{color:#0197AB;}
.po-acc-body{display:none;margin:0 0 10px;padding:0;list-style:none;}
.po-acc.is-open .po-acc-body{display:block;}
.po-acc-body li{list-style:none;margin:0;padding:0;}
.po-acc-body a{display:block;padding:6px 2px 6px 12px;font-size:12.5px;line-height:1.35;color:#4b5563;
  border-left:2px solid #eceff2;}
.po-acc-body a:hover{color:#0197AB;border-left-color:#00BBD3;}
@media (prefers-reduced-motion:reduce){ .po-acc-chev{transition:none;} }