/* The shop's list view: one product per row, scannable.
 *
 * What was there before, measured on /shop/?view_mode=list at 1440px:
 * XStore lays a list row out as a CSS table (archive.css, ">=993px:
 * .products-list .content-product{display:table}") with the photograph in a
 * 35% cell - 40% between 1200 and 1500. On this catalogue, whose product
 * files are 398x600, that produced image boxes of 443x668 and rows 699px,
 * 622px and 364px tall for the first three products. Barely one and a half
 * products fitted on a 1440x813 screen, every row was a different height, and
 * the whole point of a list - run your eye down many products quickly - was
 * gone. The add-to-cart control came out as a bare green disc, because every
 * rule that gives it its shape in ux.css is scoped to .products-grid and
 * .related-products and none of it reaches .products-list.
 *
 * So the row is rebuilt here: a fixed thumbnail, one text column, and the
 * price and the two controls in a rail of their own on the right. The
 * thumbnail sets the row height, which makes every row the same height, which
 * is what makes a list scannable at all.
 *
 * Scoped to .af-list-card - a class woocommerce/content-product.php puts on
 * the wrapper only in list mode - rather than to .products-list, so nothing
 * here can reach a grid card, a related-products shelf or a slider. Nothing
 * keys on .col-md-3 either: the grid card carries it and so does the sidebar.
 */

/* ==================================================================
   THE ROW

   A card edge rather than a rule between rows. HIG's layout guidance is
   to group related items with a background shape or a separator; a row
   here holds six separate things and a hairline between rows was not
   enough to say where one product ended and the next began.
   ================================================================== */
.af-list-card{
  width:100%;
  margin:0 0 14px;
  padding:0;
  float:none;
}

/* display:flex has to beat ".products-list .content-product{display:table}"
   (0,2,0) and the table-cell rules under it. Three classes here, so it wins
   on specificity rather than on which stylesheet the theme happens to print
   last. */
.af-list-card .content-product.af-list-row{
  position:relative;   /* the discount badge anchors to the row */
  display:flex!important;
  align-items:stretch;
  gap:20px;
  margin:0;
  padding:14px;
  border:1px solid #e6e6ea;
  border-radius:14px;
  background:#fff;
  transition:box-shadow .18s ease, border-color .18s ease;
}

.af-list-card .content-product.af-list-row:hover{
  border-color:#d8d8dd;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
}

/* The discount badge is printed on woocommerce_before_shop_loop_item, so it
   arrives as a sibling of the thumbnail and would otherwise take a column of
   the flex row to itself. ux.css only anchors it inside .products-grid. */
.af-list-card .af-list-row > .sale-wrapper{
  position:absolute;
  top:8px;
  left:8px;
  z-index:3;
  margin:0;
}

.af-list-card .af-list-row > .sale-wrapper .onsale{
  min-height:28px;
  padding:0 10px!important;
  font-size:13px!important;
}

/* ==================================================================
   THE THUMBNAIL

   150px square. The lower end of what still reads as a product photo,
   because the row height follows it: 150 + 28 of padding + the border
   is a 180px row, so four and a bit rows fit a laptop screen where
   before one and a half did.

   !important on the width because the parent's own sizing is
   ".main-products-loop .products-list .product .product-image-wrapper"
   (0,4,0) inside a media query, and matching that with more classes
   would only be a specificity race with the next XStore update.
   ================================================================== */
.af-list-card .af-list-row .product-image-wrapper.af-list-media{
  display:flex!important;
  align-items:center;
  justify-content:center;
  flex:0 0 150px!important;
  width:150px!important;
  min-width:0!important;
  height:150px;
  margin:0!important;
  padding:0;
  overflow:hidden;
  border-radius:10px;
  background:#fff;
}

.af-list-card .af-list-media .images-slider-wrapper,
.af-list-card .af-list-media .product-content-image{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

/* contain, not cover: these are objects photographed on a bench, and a
   crop cuts the legs off a feeder. */
.af-list-card .af-list-media img{
  width:auto!important;
  max-width:100%;
  max-height:150px;
  height:auto;
  object-fit:contain;
  margin:0;
}

/* The hover slider arrows are a mouse affordance on a 150px square. */
.af-list-card .af-list-media .et-slider-arrows,
.af-list-card .af-list-media .swiper-button-next,
.af-list-card .af-list-media .swiper-button-prev{
  display:none!important;
}

/* ==================================================================
   THE TEXT COLUMN
   ================================================================== */
.af-list-card .af-list-row .product-details.af-list-main{
  display:flex!important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:6px;
  flex:1 1 auto;
  width:auto!important;
  min-width:0;
  /* On a 1900px window the row is 1500px and the text column would run to
     just over 1000, which is about 140 characters a line - roughly twice
     what anyone reads comfortably, and this shop's readers are mostly over
     fifty. Capped, and the rail is pushed to the right edge below so that
     every price on the shelf still lines up in one column. */
  max-width:760px;
  margin:0;
  padding:0!important;
  text-align:start;
}

.af-list-card .af-list-main .product-title{
  margin:0;
  font-weight:600;
}

/* The size is not set here: ux.css gives every product title 18px, which is
   also this shop's body size, and a row has no reason to disagree with a
   card about that.
   
   What does change is the padding. ux.css grows the title into a 44px touch
   target because on a grid card it is the only text worth aiming at; on a
   row the 150px photograph two centimetres to its left is the same link, so
   the extra 12px of height is paid for nothing and it is what pushed a row
   carrying a rating to 200px against its neighbours' 180. */
.af-list-card .af-list-main .product-title a{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  padding:4px 0!important;
  color:#1d1d1f;
}

.af-list-card .af-list-main .product-title a:hover,
.af-list-card .af-list-main .product-title a:focus-visible{
  color:#1b5e20;
}

/* The rating is centred on a grid card because the whole card is. A row
   is read from its left edge down, so everything in this column starts
   on the same vertical line. */
.af-list-card .af-list-main .af-rating{
  justify-content:flex-start;
  margin:0!important;
}

/* 44px of link target inside a 24px line would push the row apart. The
   count keeps a real target through padding on its own line instead. */
.af-list-card .af-list-main .af-rating__count{
  min-height:30px;
}

.af-list-card .af-list-main .product-excerpt{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0!important;
  font-size:15px;
  /* XStore sets 1.8 here for list mode. At 15px that is 27px of leading and
     two lines of it are 54px, which is what tipped a row with a rating on it
     over the height its neighbours settle at. 1.55 is the leading the rest
     of this site's body copy uses. */
  line-height:1.55!important;
  color:#4a4a4f;
}

/* ==================================================================
   CAN I GET IT, AND WHEN

   The one question a buyer has before the price. Green tick and words,
   never colour alone - HIG accessibility: "Convey information with more
   than color alone." #1b5e20 on white is 8.9:1, #8a2c2c is 7.4:1.
   ================================================================== */
.af-list-stock{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  font-size:15px;
  line-height:1.3;
  color:#1b5e20;
}

.af-list-stock svg{
  flex:0 0 auto;
  width:17px;
  height:17px;
}

.af-list-stock--out{
  color:#8a2c2c;
}

.af-list-stock__note{
  color:#4a4a4f;
}

/* ==================================================================
   PRICE AND THE TWO CONTROLS

   The grid puts all three on one line because a 221px card has no room
   for anything else. A row has 240px of rail and no competition for
   vertical space, so the price goes above the controls at a size worth
   reading across a wide row, and the controls get a line to themselves.
   Same two controls, same proportions, same heights as the grid.
   ================================================================== */
.af-list-card .af-list-buy{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:12px;
  flex:0 0 240px;
  min-width:0;
  margin-left:auto;
  padding-left:20px;
  border-left:1px solid #ececef;
}

.af-list-card .af-list-buy .price{
  display:flex!important;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  margin:0!important;
  line-height:1.15;
}

/* The old price above the new one rather than beside it: "1.299,00 lei"
   next to "1.099,00 lei" does not fit 220px and wrapped mid-figure. */
.af-list-card .af-list-buy .price del{
  margin:0!important;
  font-size:14px!important;
  line-height:1.2;
  opacity:.75;
}

.af-list-card .af-list-buy .price ins,
.af-list-card .af-list-buy .price > .woocommerce-Price-amount{
  margin:0!important;
  font-size:24px!important;
  font-weight:700!important;
  line-height:1.15!important;
  white-space:nowrap;
  text-decoration:none;
}

.af-list-card .af-list-buy .af-card-actions--list{
  display:flex;
  align-items:stretch;
  gap:10px;
  width:100%;
  margin:0;
}

/* --- the view-details square ---
   Everything that gives this control its shape in ux.css is written as
   ".products-grid .content-product .show-quickly"; none of it reaches a
   list row, where it was still XStore's hover pill - measured 403x42,
   floating over the photograph. Restated here at the row's own sizes. */
.af-list-card .af-list-buy .show-quickly{
  display:flex!important;
  align-items:center;
  justify-content:center;
  position:static!important;
  flex:0 0 56px!important;
  width:56px!important;
  min-width:56px!important;
  max-width:56px!important;
  height:56px!important;
  min-height:56px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(0,0,0,.18)!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#1d1d1f!important;
  box-shadow:none!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
  font-size:0!important;
  cursor:pointer;
}

.af-list-card .af-list-buy .show-quickly:hover{
  background:#f5f5f7!important;
  border-color:rgba(0,0,0,.3)!important;
}

/* --- add to cart ---
   This is the bare green disc from the owner's screenshot. It had no
   icon and no label inside it because the SVG sizing and the font-size
   suppression in ux.css are both scoped to the grid, and XStore's own
   round .button styling was all that was left. */
.af-list-card .af-list-buy .af-cart-icon,
.af-list-card .af-list-buy .button{
  display:flex!important;
  align-items:center;
  justify-content:center;
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:56px!important;
  min-height:56px!important;
  margin:0!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:12px!important;
  background:#2e7d32!important;
  color:#fff!important;
  font-size:0!important;
  line-height:1;
  transition:background .18s ease, transform .12s ease;
}

.af-list-card .af-list-buy .af-cart-icon:hover,
.af-list-card .af-list-buy .button:hover{background:#1b5e20!important}

.af-list-card .af-list-buy .af-cart-icon:active,
.af-list-card .af-list-buy .button:active{transform:scale(.97)}

.af-list-card .af-list-buy .af-cart-icon.loading,
.af-list-card .af-list-buy .af-cart-icon.added{opacity:.75}

/* The details link is the control for anything that cannot be bought in
   one press - a variable product, or one that is out of stock - and it
   is a secondary action, so it does not wear the buy colour. */
.af-list-card .af-list-buy .af-details-icon{
  background:#f5f5f7!important;
  color:#1d1d1f!important;
  border:1px solid rgba(0,0,0,.18)!important;
}

.af-list-card .af-list-buy .af-details-icon:hover{
  background:#ececee!important;
}

/* Both parents carry font-size:0 to suppress their screen-reader label,
   and an SVG sized in em collapses to nothing against that - the same trap
   ux.css documents for the grid.
   
   display:block needs the !important as well, and this is the rest of why
   the control was a bare green disc: ux.css hides the chevron the theme
   hangs off a call to action with "a.button.add_to_cart_button svg{
   display:none!important}", and the rule that puts our own trolley back is
   written for ".products-grid .content-product .af-cart-icon svg". A list
   row matched the first and not the second, so the button kept its colour
   and lost its icon. Measured before this rule: the SVG was 0x0, display
   none; after it, 24x24, which is the grid's number. */
.af-list-card .af-list-buy .show-quickly svg,
.af-list-card .af-list-buy .af-cart-icon svg,
.af-list-card .af-list-buy .button svg{
  display:block!important;
  width:24px!important;
  height:24px!important;
  min-width:24px;
  min-height:24px;
  flex:0 0 auto;
}

/* XStore hangs an icon-font glyph off .show-quickly:before. ux.css turns
   it off for the grid only, so in a list row it drew a second eye beside
   ours. */
.af-list-card .af-list-buy .show-quickly::before,
.af-list-card .af-list-buy .show-quickly::after,
.af-list-card .af-list-buy .button::before,
.af-list-card .af-list-buy .button::after{
  content:none!important;
  display:none!important;
}

.af-list-card .af-list-buy .show-quickly:focus-visible,
.af-list-card .af-list-buy .af-cart-icon:focus-visible,
.af-list-card .af-list-buy .button:focus-visible{
  outline:2px solid var(--af-focus,#0b65c2);
  outline-offset:2px;
}

/* The quick-view eye used to live inside this footer as a hover overlay.
   It is a real control in the rail now and the footer has nothing left
   to hold, but XStore still positions it absolutely over the
   photograph. */
.af-list-card .af-list-row .footer-product{
  display:none!important;
}

/* ==================================================================
   NARROWER THAN A LAPTOP

   At 1100px the row has about 780px of content: the rail gives up 40px
   before the text column does, because a two-line title with nowhere to
   go is worse than a slightly tighter button.
   ================================================================== */
@media (max-width:1180px){
  .af-list-card .af-list-buy{
    flex:0 0 200px;
    padding-left:16px;
  }

  .af-list-card .af-list-buy .price ins,
  .af-list-card .af-list-buy .price > .woocommerce-Price-amount{font-size:22px!important}

  .af-list-card .af-list-row{gap:16px}
}

/* ==================================================================
   PHONE

   Under 768 the rail cannot stand beside the text - measured at a 390px
   viewport the text column would be 130px wide. So the row becomes two
   parts: thumbnail and text on top, then price and controls on a line
   of their own underneath, separated by a rule rather than by a gap so
   it still reads as one product.
   ================================================================== */
@media (max-width:767px){
  .af-list-card{margin-bottom:12px}

  .af-list-card .content-product.af-list-row{
    flex-wrap:wrap;
    gap:12px;
    padding:12px;
  }

  .af-list-card .af-list-row .product-image-wrapper.af-list-media{
    flex:0 0 104px!important;
    width:104px!important;
    height:104px;
  }

  .af-list-card .af-list-media img{max-height:104px}

  .af-list-card .af-list-row .product-details.af-list-main{
    flex:1 1 0;
    justify-content:flex-start;
    gap:4px;
  }

  .af-list-card .af-list-main .product-title{font-size:17px}

  /* The excerpt is not printed at all on a phone - see the is_mobile
     test in woocommerce/content-product.php. This is the safety net for
     a page cached for a desktop and served to a phone: at this width two
     clamped lines hold about six words, which is a fragment rather than
     a description. */
  .af-list-card .af-list-main .product-excerpt{display:none}

  .af-list-card .af-list-buy{
    flex:1 0 100%;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 0 0;
    border-left:0;
    border-top:1px solid #ececef;
  }

  /* The price gives way, the controls do not. Measured at 500px before
     this: the price box came out 262px wide against its own ~90px of
     text, which left the pair of controls 125px between them and the
     trolley 63px - the same width as the eye beside it, so the primary
     action no longer read as the primary one. */
  .af-list-card .af-list-buy .price{
    flex:1 1 auto;
    min-width:0;
    flex-direction:row;
    align-items:baseline;
    flex-wrap:wrap;
    gap:8px;
  }

  .af-list-card .af-list-buy .price del{order:2}

  .af-list-card .af-list-buy .price ins,
  .af-list-card .af-list-buy .price > .woocommerce-Price-amount{font-size:21px!important}

  .af-list-card .af-list-buy .af-card-actions--list{
    flex:0 0 176px;
    width:176px;
  }

  /* 52px rather than 56: the two controls and the price share one line
     now, and 52 is still well above the 44pt floor. */
  .af-list-card .af-list-buy .show-quickly{
    flex:0 0 52px!important;
    width:52px!important;
    min-width:52px!important;
    max-width:52px!important;
    height:52px!important;
    min-height:52px!important;
  }

  .af-list-card .af-list-buy .af-cart-icon,
  .af-list-card .af-list-buy .button{
    height:52px!important;
    min-height:52px!important;
  }
}

/* Under 420px the price and a 190px control block no longer share a line
   without the price ending in an ellipsis, and the price is the one
   thing on the row that must never be abbreviated. */
@media (max-width:420px){
  .af-list-card .af-list-buy{
    flex-wrap:wrap;
    align-items:stretch;
  }

  .af-list-card .af-list-buy .price{flex:1 0 100%}
  .af-list-card .af-list-buy .af-card-actions--list{flex:1 0 100%}
}