/* 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. */
/* The rounded box is a SQUARE container with a white ground; the photo is
   centred inside it. Rounding the <img> itself followed the photo's own
   rectangle, so a landscape or portrait shot got lopsided corners. */
.products-grid a.product-image,
.products-list a.product-image{display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;background:#fff;border-radius:8px;overflow:hidden;}
.products-grid a.product-image .ph-stage{max-width:100%;max-height:100%;}
.products-grid a.product-image img,
.products-list a.product-image img{border-radius:8px;max-height:100%;object-fit:contain;}

/* Related, up-sell, cross-sell, minicart and cart-table thumbnails get the same
   8px, but no forced square: these sit inside a table row and a carousel that
   size themselves, and pinning an aspect ratio there shifts the layout. */
.mini-products-list a.product-image,
.block-related a.product-image,
.custom-carousel a.product-image,
.carousel-item a.product-image,
.checkout-cart-index a.product-image,
.up-sell-carousel a.product-image,
.crosssell a.product-image,
.cart a.product-image,
.cart-table a.product-image,
.block-cart a.product-image,
.mini-cart a.product-image,
.header-minicart a.product-image{display:inline-block;background:#fff;
  border-radius:8px;overflow:hidden;}
.mini-products-list a.product-image img,
.block-related a.product-image img,
.custom-carousel a.product-image img,
.carousel-item a.product-image img,
.checkout-cart-index a.product-image img,
.up-sell-carousel a.product-image img,
.crosssell a.product-image img,
.cart a.product-image img,
.cart-table a.product-image img,
.block-cart a.product-image img,
.mini-cart a.product-image img,
.header-minicart 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;}
/* same rule as the listing: the corners belong to the square gallery box */
.product-img-box .ug-slider-wrapper,
.product-img-box .ug-item-wrapper{border-radius:14px;overflow:hidden;}
.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;} }


/* --- narrow screens: the sidebar stacks below the grid, so the controls stay
       in the main column and lay out horizontally instead of as a tall card --- */
@media (max-width:767px){
  .po-refine--inline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 14px;}
  .po-refine--inline .po-refine-head{flex:1 0 100%;margin-bottom:2px;}
  .po-refine--inline .po-row{flex:0 1 auto;margin-bottom:0;}
  .po-refine--inline .po-field select{max-width:150px;}
  .col-main .category-description{margin-bottom:16px;}
}


/* ---------------- infinite scroll ---------------- */
/* the real pager stays in the DOM for crawlers, just out of view */
.po-pager-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.po-infinite{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:26px 0 34px;clear:both;}
.po-loadmore{display:inline-block;padding:11px 26px;border-radius:24px;
  background:#00BBD3;color:#fff;text-decoration:none;
  font:600 13.5px/1 Poppins,Roboto,Arial,sans-serif;letter-spacing:.02em;}
.po-loadmore:hover{background:#0197AB;color:#fff;}
.po-loadmore.is-loading{background:#cfd5dc;color:#4b5563;pointer-events:none;}
.po-loadmore:focus-visible{outline:2px solid #16191d;outline-offset:2px;}
.po-inf-status{margin:0;font-size:12.5px;color:#8c939d;text-align:center;}

/* ---------------- description collapsed on phones ---------------- */
/* description collapsed on phones: a clean three-line clamp with an ellipsis,
   and the toggle below the text. A bottom fade was tried first and read as a
   half-rendered line, so the clamp does the whole job. */
.po-desc-mobile.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;}
.po-desc-mobile.is-clamped.is-open{display:block;-webkit-line-clamp:unset;overflow:visible;}
.po-more--flow{position:static;display:inline-block;left:auto;right:auto;bottom:auto;
  margin:6px 0 16px;padding:0;background:none;text-align:left;}


/* ---------------- no flash of the pre-enhancement layout ----------------
   An inline flag in <head> stamps html.po-js before the body paints, so the
   pieces these scripts relocate or drop are never rendered in their old place.
   The scripts stamp po-ready when they are done, and the same inline flag sets
   po-ready on a timer, so a script that fails to load reveals the original
   layout instead of leaving the page half empty. */
html.po-js:not(.po-ready) .nav-container,
html.po-js:not(.po-ready) .category-description,
html.po-js:not(.po-ready) .col-main .toolbar,
html.po-js:not(.po-ready) .col-main .toolbar-bottom,
html.po-js:not(.po-ready) .col-main .pages,
html.po-js:not(.po-ready) .col-left .block-layered-nav dl > dd > ol{display:none !important;}
/* the grid itself never moves, so it keeps painting immediately */


/* ---------------- store logo ----------------
   The header logo is a Tm_CustomLogo image printed at its natural size, and the
   new asset is 1581px wide for retina. The theme only caps it at 100% of the
   header, so without a width it would render as a banner across the page.
   340px is the width Aman asked for (2026-09-04); it renders 83px tall. */
.logo img{width:340px;max-width:100%;height:auto;}
@media only screen and (max-width:767px){ .logo img{width:280px;} }


/* ---------------- fixes, 4 Sep 2026 ---------------- */

/* The whole-card click overlay sits on top of a.product-image, so
   `a.product-image:hover` in hoverimage.v2.css can never fire. Drive the same
   slide from the card instead — the transforms mirror that file exactly. */
.po-card:hover .ph-stage img.ph-base{
  -webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);}
.po-card:hover .ph-stage img.ph-alt{
  -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
@media (hover:none){
  .po-card:hover .ph-stage img.ph-base{-webkit-transform:none;transform:none;}
}

/* breadcrumbs sat on #f5f5f5 */
.breadcrumbs{background-color:#fff !important;}

/* the photo keeps square corners; the box around it carries the radius */
.product-img-box .ug-item-wrapper img,
.product-img-box .ug-image-container img,
.product-img-box .MagicZoom img{border-radius:0 !important;}

/* Category intro: exactly three lines in both columns. This is a pure CSS
   line clamp with no measurement, because measuring right after the move ran
   before the webfont settled and silently skipped the clamp. */
.po-clip.is-clamped{display:-webkit-box !important;-webkit-box-orient:vertical;
  -webkit-line-clamp:3;overflow:hidden;max-height:none;}
.po-clip.is-clamped.is-open{display:block !important;-webkit-line-clamp:unset;overflow:visible;}
.po-side-desc.is-clamped,.po-desc-mobile.is-clamped{max-height:none;padding-bottom:0;}
.po-side-desc.is-clamped::after,.po-desc-mobile.is-clamped::after{display:none;}
/* the toggle always sits outside the clamped box, or the clamp hides it */
.po-side-desc .po-more,.po-more--flow{position:static;display:inline-block;
  left:auto;right:auto;bottom:auto;padding:9px 0 2px;border-radius:0;background:none;
  text-align:left;cursor:pointer;}