/*
Theme Name: AV Supply
Description: The Nexmart template, imported verbatim. Markup in header.php, footer.php and parts/ is generated by _build-scripts/convert.py from the template HTML and must not be hand edited.
Version: 2.0
Text Domain: avsupply
*/

/* Deliberately empty. The template's own stylesheets are the design. */

/*
 * Woo renders the quantity as <div class="quantity"><input type="number">.
 * The template styles .item-quantity .quantity-spinner directly, so give the
 * wrapper no box of its own and let the input take the template's styling.
 */
.addto-cart-box .item-quantity .quantity{ display: inline-block; margin: 0; }
.addto-cart-box .item-quantity input.qty{ width: 100%; border: none; background: transparent; text-align: center; }

/* ===========================================================================
 * Sizing
 *
 * Every value below is measured from the template's own render, so our pages
 * match it. The template's demo content is uniform where real catalogue data
 * is not, so these constrain the variable parts to the boxes the design was
 * laid out for rather than inventing new proportions.
 *
 * Each image slot is a fixed box and the photograph is sized to fill it with
 * object-fit: contain, so it is never cropped and never stretched. The boxes
 * used to hold images at their own natural size, which left a 300px wide
 * thumbnail floating small in a 195x170 slot.
 *
 *   element              template
 *   banner image         738 x 416
 *   category tile image  160 x 160
 *   featured strip icon   38 x 38
 *   shop-block-two       235 x 416, image 195 x 170
 *   shop-block-one       450 x 325
 *   shop-block-five      288 x 209, image 117 x 117
 * ======================================================================== */

/* ---- the logo slot ----------------------------------------------------- */
/*
 * The template's logo is a 164x31 wordmark and the header rows are built round
 * that height. Ours is a placeholder of a different shape, and at its natural
 * 62px it pushed the upper row to 112px and doubled the sticky header. Capping
 * the height, not the width, keeps the header correct now and lets a proper
 * wordmark fill the slot later without being upscaled.
 */
.logo img,
.logo-box img,
.sticky-header .logo img{ max-height: 31px; width: auto; max-width: 100%; }

/* ---- banner ------------------------------------------------------------ */
.banner-carousel .slide-item .image-layer{
  width: 738px; max-width: 100%;
  height: 416px;
  overflow: hidden;
}
.banner-carousel .slide-item .image-layer a{ display: block; width: 100%; height: 100%; }
.banner-carousel .slide-item .image-layer img{
  display: block; width: 100%; height: 100%; object-fit: contain;
}

/*
 * Real category names run longer than the demo's "New Release", so the
 * headline has to be held to the template's two lines or the slide grows and
 * pushes the whole page down. Both the heading and its anchor carry the clamp:
 * where the template wraps the text in an inline-block anchor the heading
 * alone would see a single atomic line box and never truncate.
 */
.banner-carousel .slide-item .content-box h2{
  height: 120px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.banner-carousel .slide-item .content-box h2 a{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- category tiles ---------------------------------------------------- */
.category-block-one .inner-box .image-box{
  width: 160px; height: 160px; overflow: hidden;
}
.category-block-one .inner-box .image-box a{ display: block; width: 100%; height: 100%; }
.category-block-one .inner-box .image-box img{
  display: block; width: 100%; height: 100%; object-fit: contain;
}
/*
 * Two lines, fixed. The template's demo names are one word and fit on one
 * line; ours do not, and a tile that sizes to its own name leaves the row
 * ragged. This costs 19px against the template's 242px tile and buys a grid
 * where every tile lines up.
 */
.category-block-one .inner-box .lower-content h4{
  height: 56px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.category-block-one .inner-box .lower-content h4 a{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- the large promo block --------------------------------------------- */
/*
 * The template sets this headline on one 46px line because "Smart TV's" fits.
 * "AV Signal Distribution" does not, so the type comes down far enough for two
 * lines to sit in the same 46px and the block keeps its 325px height.
 */
.shop-block-one .inner-box h2{
  height: 46px; overflow: hidden;
  font-size: 22px; line-height: 23px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.shop-block-one .inner-box h2 a{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-block-one .inner-box .image{
  width: 314px; height: 294px; overflow: hidden;
}
.shop-block-one .inner-box .image a{ display: block; width: 100%; height: 100%; }
.shop-block-one .inner-box .image img{
  display: block; width: 100%; height: 100%; object-fit: contain;
}

/* ---- the featured strip across the top --------------------------------- */
.single-featured .image-box{
  width: 38px; height: 38px; overflow: hidden;
}
.single-featured .image-box img{
  display: block; width: 100%; height: 100%; object-fit: contain;
}

/* ---- the main product card --------------------------------------------- */
.shop-block-two .inner-box .image-box .image{
  width: 100%; height: 170px; overflow: hidden;
}
.shop-block-two .inner-box .image-box .image a{ display: block; width: 100%; height: 100%; }
.shop-block-two .inner-box .image-box .image img{
  display: block; width: 100%; height: 100%; object-fit: contain;
}
/*
 * Two lines, not three. The model number has its own line on our card, so the
 * title no longer has to carry it, and two lines keeps the card at the
 * template's 416px rather than stretching it to 563px.
 */
.shop-block-two .inner-box .lower-content h4{
  height: 48px; overflow: hidden;
}
/*
 * The clamp has to sit on the anchor, not on the heading. The template styles
 * `h4 a` as inline-block, which is an atomic box, so a long title wraps to
 * seven lines *inside* it and the heading still sees only one line box, with
 * nothing for the clamp to cut. Clamping the anchor gives us the template's
 * two lines. The fixed height keeps short and long titles on one baseline.
 */
.shop-block-two .inner-box .lower-content h4 a{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-block-two .inner-box .lower-content h5{ height: 26px; }
.shop-block-two .inner-box .lower-content .text{
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.avs-model{
  display: block; font-size: 12px; line-height: 16px;
  letter-spacing: .04em; opacity: .55; margin-bottom: 4px;
}
/* only the tall card reserves the full 35px the template gives its rating */
.shop-block-two .inner-box .lower-content .avs-model{ margin-bottom: 19px; }
.product-stock.avs-low{ color: #c47f00; }

/* ---- the shop archive grid --------------------------------------------- */
/*
 * shop-page.css floats .shop-block-two at width:20%. Floated boxes of unequal
 * height snag, and real titles vary where the demo ones do not. Clearing the
 * first item of each row is the fix, following the template's own breakpoints
 * of 5 / 3 / 2 / 1 across at 1200, 991 and 767.
 */
.shop-page-section .wrapper .inner-container .shop-block-two{ min-height: 416px; }
.shop-page-section .wrapper .inner-container .shop-block-two:nth-child(5n+1){ clear: left; }
@media only screen and (max-width: 1200px){
  .shop-page-section .wrapper .inner-container .shop-block-two:nth-child(5n+1){ clear: none; }
  .shop-page-section .wrapper .inner-container .shop-block-two:nth-child(3n+1){ clear: left; }
}
@media only screen and (max-width: 991px){
  .shop-page-section .wrapper .inner-container .shop-block-two:nth-child(3n+1){ clear: none; }
  .shop-page-section .wrapper .inner-container .shop-block-two:nth-child(2n+1){ clear: left; }
}
@media only screen and (max-width: 767px){
  .shop-page-section .wrapper .inner-container .shop-block-two:nth-child(n){ clear: none; }
}

/* ---- the list card in the three-column band ---------------------------- */
/*
 * The template's demo names take two lines here; ours take five and push the
 * whole band 164px past the design. Same clamp, same reason as the tall card:
 * it goes on the anchor, because the heading's inline-block child is a single
 * atomic line box.
 */
.shop-block-four .inner-box h4{
  height: 48px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.shop-block-four .inner-box h4 a{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* the list card's 100x100 thumbnail */
.shop-block-four .inner-box .image-box{ width: 100px; height: 100px; overflow: hidden; }
.shop-block-four .inner-box .image-box a{ display: block; width: 100%; height: 100%; }
.shop-block-four .inner-box .image-box img{ display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---- the rotating promo in the three-column band ----------------------- */
/*
 * Fixed at the template's two lines. The promo rotates through categories
 * whose names differ in length, and without this the column resizes as it
 * cycles.
 */
.shop-block-three .inner-box h2{
  height: 92px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.shop-block-three .inner-box h2 a{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- the compact horizontal card in the tabbed grids ------------------- */
/*
 * .shop-block-five is horizontal: shop-four.css absolutely positions the image
 * in a 140px gutter and pads .inner-box to match. shop-four.css also scopes the
 * 20% width to `.shop-four`, and the second tabbed section is not inside it,
 * so the width has to be restated here.
 */
.tabs-content .inner-container .shop-block-five{ float: left; width: 20%; min-height: 209px; }
.tabs-content .inner-container .shop-block-five:nth-child(5n+1){ clear: left; }
@media only screen and (max-width: 1200px){
  .tabs-content .inner-container .shop-block-five{ width: 33.333%; }
  .tabs-content .inner-container .shop-block-five:nth-child(5n+1){ clear: none; }
  .tabs-content .inner-container .shop-block-five:nth-child(3n+1){ clear: left; }
}
@media only screen and (max-width: 991px){
  .tabs-content .inner-container .shop-block-five{ width: 50%; }
  .tabs-content .inner-container .shop-block-five:nth-child(3n+1){ clear: none; }
  .tabs-content .inner-container .shop-block-five:nth-child(2n+1){ clear: left; }
}
@media only screen and (max-width: 767px){
  .tabs-content .inner-container .shop-block-five{ width: 100%; }
  .tabs-content .inner-container .shop-block-five:nth-child(n){ clear: none; }
}
.shop-block-five .inner-box .image-box{ width: 117px; }
.shop-block-five .inner-box .image-box .image{
  width: 117px; height: 117px; overflow: hidden;
}
.shop-block-five .inner-box .image-box .image a{ display: block; width: 100%; height: 100%; }
.shop-block-five .inner-box .image-box .image img{
  display: block; width: 100%; height: 100%; object-fit: contain;
}
.shop-block-five .inner-box .content-box h6{ height: 40px; overflow: hidden; }
.shop-block-five .inner-box .content-box .cart-btn{ height: 44px; }
/*
 * The stock line takes the slot the template gives its star rating, 15px and a
 * 10px gap, so the compact card keeps its 209px. The column is 93px wide and
 * "Out of Stock" wraps at the inherited size, hence the smaller type.
 */
.shop-block-five .inner-box .content-box .product-stock,
.shop-block-five .inner-box .content-box .product-stock-out{
  display: block; height: 15px; line-height: 15px; font-size: 12px;
  white-space: nowrap; overflow: hidden; margin-bottom: 10px;
}
/* the template's tick sits on that 15px line rather than overflowing it */
.shop-block-five .inner-box .content-box .product-stock img{
  max-height: 11px; width: auto; vertical-align: baseline;
}
.shop-block-five .inner-box .content-box h6 a{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- odds and ends ------------------------------------------------------ */
/* products with no photograph in the source: mute the fallback so it never
   reads as the real product image */
.avs-no-image{ opacity: .16; max-height: 80px; width: auto; }

/* "Price on request" sits where a price would, so it must not look like a gap */
.avs-poa{ font-size: 16px; font-weight: 600; }

/* Woo's paginate_links emits ul.page-numbers; map it onto the template's
   .pagination-wrapper rather than restyling the component */
.pagination-wrapper ul.page-numbers{
  display: flex; justify-content: center; align-items: center;
  gap: 8px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap;
}
.pagination-wrapper ul.page-numbers li{ display: inline-block; }

/*
 * shop-page.css absolutely positions the sidebar category count at top right
 * but never gives the li a positioning context, so every count stacked in the
 * corner. blog-sidebar.css sets position:relative on its equivalent li, so this
 * is the template's own pattern applied where it was missed.
 */
.shop-sidebar .category-list li{
  position: relative; display: block; margin-bottom: 6px;
}
/*
 * The count is absolutely positioned at right:0, and the template also sets
 * position:relative on the label so its custom checkbox can be drawn there.
 * That makes the label the count's containing block, and the label is only as
 * wide as its own words, so the count landed on top of the text: "Aten (172)"
 * came out as "(Ate72)". Giving the label the full row width puts the count
 * back on the row's right edge. The label keeps position:relative, so the
 * checkbox is untouched.
 */
.shop-sidebar .category-list li .check-box label{
  display: block; padding-right: 42px;
}

/* Woo renders quantity as <div class="quantity"><input type="number">; the
   template styles .item-quantity .quantity-spinner directly. */
.addto-cart-box .item-quantity .quantity{ display: inline-block; margin: 0; }
.addto-cart-box .item-quantity input.qty{
  width: 100%; border: none; background: transparent; text-align: center;
}

/* Brand chips: the template's strip expects logo images and we have none, so
   each brand shows as a named link with its product count. */
.clients-list .avs-brand-chip{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 78px; padding: 12px 16px; text-align: center;
}
/* the brand's representative product, standing in for a logo we do not have */
.clients-list .avs-brand-chip .image{
  width: 100%; height: 84px; margin-bottom: 8px; overflow: hidden;
}
.clients-list .avs-brand-chip .image img{
  display: block; width: 100%; height: 100%; object-fit: contain;
}
.clients-list .avs-brand-chip strong{ font-size: 16px; letter-spacing: .02em; }
.clients-list .avs-brand-chip span{ font-size: 12px; opacity: .6; }

/* The CTA band uses a product photograph as its background, so it needs
   containing and tinting or the text over it is unreadable. */
.cta-section .inner-container .bg-layer{
  background-size: contain; background-repeat: no-repeat;
  background-position: right center; opacity: .3;
}