/* ===========================================================================
   THE SHOP ARCHIVE ON A TABLET AND ON A PHONE

   ux.css settled the four-column desktop grid and list-view.css settled the
   row. Neither was measured below 1024, and everything in this file comes
   from measuring it: Chrome with real device metrics at 390, 414, 768, 834,
   1024, 1440 and 1920, on /shop/, /shop/?view_mode=list and
   /product-category/gaini-si-pui/.

   Loaded after af-ux and af-list-view and only on product archives, so
   nothing here can reach the homepage, a product page or its related shelf.
   Where a rule has to outrank one of theirs the specificity is stated in the
   comment beside it rather than solved with a blind !important.

   The floor throughout is the one ux.css already set for this shop and for a
   reason worth repeating: the customers are smallholders, mostly over fifty,
   usually outdoors on a phone. 44px minimum for anything you press, 13px
   minimum for anything you read, and the price never abbreviated.
   ======================================================================== */


/* ===========================================================================
   1. HOW MANY CARDS ACROSS

   XStore gives every card "col-md-3 col-sm-6 col-xs-6": four across from
   992, two across from 768, two across below that. Measured, that produces
   two shapes nobody would choose.

   At 768 and 834 the card came out 384px and 417px wide with a 327x245
   photograph - two products on a tablet screen, and 3338px of scrolling for
   the twelve on the page. The card is not more legible for being that wide;
   it is the same 17px title and 22px price with more white around it.

   At 1024 it is the opposite and it is broken. Four cards inside the 80%
   main column leaves the card 201.8px and the action row 149px. The row
   needs 52px for the eye, 96px for the trolley at its narrowest (the
   601-1240 rule in ux.css) and 10px of gap - 158px. It does not fit, so the
   row wrapped twice: price on one line, eye alone on the next, trolley alone
   on the third. Measured height of that block: 178px, against 116px at 1440.
   The photograph at that width was 144x108.

   So three across between 768 and 1199. Measured results: 256px card at 768,
   278px at 834, 269px at 1024 - all of them wider than the 1440 card's
   content row of 224px, which is the width the desktop grid was signed off
   at. Four across returns at 1200, where the card is back to 240px and the
   action row to ~187px, comfortably past the 158px the controls need.

   Both halves of the width have to be set. .ajax-content is a flex row with
   wrap and the cards carry flex:0 1 auto, so the percentage has to land on
   width and on max-width or Bootstrap's col-* width wins on basis:auto.
   ======================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
	.main-products-loop .products-grid .ajax-content > .product,
	.main-products-loop .products-grid > .product,
	.main-products-loop .products.products-grid > .content-product {
		width: 33.3333% !important;
		max-width: 33.3333% !important;
		flex: 0 0 33.3333% !important;
	}
}


/* ===========================================================================
   2. THE PRICE, AND THE THING THAT WAS 10.8px

   The old struck-through price renders at 15px and ux.css gives the currency
   symbol beside it 0.72em. 15 x 0.72 = 10.8px, which is what the audit found
   at 768, 834, 1024, 1440 and 1920 - "lei" set smaller than anything else on
   the page, on the one line a shopper reads to decide whether the discount
   is real.

   A ratio is the right way to size a currency symbol against its figure, so
   the ratio stays; it just gets a floor. max() keeps the live price exactly
   where it was - 22px x 0.72 = 15.84px, which is already above the floor and
   is returned unchanged - and lifts only the cases that fell through it.

   Same four-class specificity as the rule in ux.css it corrects, and this
   file loads after ux.css, so source order settles it without !important.

   Measured after: the old price's symbol goes 10.8px -> 13px, the live
   price's stays 15.84px, and the price box does not change height.
   ======================================================================== */
.products-grid .content-product .price .woocommerce-Price-currencySymbol {
	font-size: max(13px, .72em);
}


/* ===========================================================================
   3. THE CARD TITLE AS SOMETHING YOU PRESS

   The title is how most people open a product - the photograph above it is
   an anchor too, but the title is what a thumb goes for. Measured, the
   anchor is display:flow-root with 2px of padding and a 28px line box, so a
   one-line title is a 32px target. Two-line titles were already 60px; only
   the short ones fail.

   min-height rather than padding, so a title that already clears 44px is
   left exactly as it was and only the short ones grow. Centred, because the
   grid card centres its text.

   Held to 1024 and below. The desktop grid at 1440 and 1920 is signed off
   and a 12px change in card height is not worth reopening it; the same
   titles are reported there as a known 32px.
   ======================================================================== */
@media (max-width: 1024px) {
	.products-grid .product-details .product-title a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}

	/* The row's title is read from its left edge, not centred. Measured at
	   35px on one line - 18px text in a 27px line box plus 4px of padding. */
	.af-list-card .af-list-main .product-title a {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		min-height: 44px;
	}

	/* "3 recenzii" under the row's title is a link to the reviews and came
	   out 60x30 and 82x30. It is inline-flex rather than flex so it keeps
	   its own width and does not become a full-width strip. */
	.af-list-card .af-list-main .af-rating__count {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}


/* ===========================================================================
   4. THE BAR ABOVE THE SHELF

   Three controls share one flex row: sort, the grid/list switch, and how
   many per page. Measured at 390 the row was wrong in three separate ways.

   a) The sort control overlapped the per-page control.

      ux.css asks the sort select for min-width:15.5em so its longest label,
      "Preț: de la mic la mare", can be read - correct on a desktop. Its own
      phone rule takes that back off, but writes it as ".woocommerce-ordering
      select", which is (0,1,1), while the rule it is trying to beat also
      carries ".woocommerce-ordering .orderby" at (0,2,0). The higher one
      wins and the phone rule never applied.

      Result at 390: the form was 117px wide, the select inside it 248px, and
      it ran from x=132 to x=380 straight across the per-page dropdown at
      x=264. The browser's own overlap test named all three pairs. Nobody
      could have set 24 per page on a phone.

   b) An empty <div class="woocommerce-notices-wrapper"> sits first in the
      row and grows: 117px of a 360px bar at 390, which is what pushed the
      sort control right in the first place. It is hidden only while it is
      empty, so a WooCommerce notice still appears where it always did.

   c) With those two fixed there is still not room for three controls on one
      line of a phone, so the bar becomes two. Sort takes the first line at
      its full width - it is the control with the long labels and the one
      most often used. "Afișează 12" and the grid/list switch share the
      second: measured at 390 that is a 67px label, a 167px dropdown and a
      116px pair of squares in 360px, which fits with the switch against the
      right margin. Measured bar height 118px, against 54px before.

   Specificity note: (0,3,0) here - .filter-wrap .woocommerce-ordering
   .orderby - so it clears the (0,2,0) rule described above.
   ======================================================================== */
@media (max-width: 600px) {
	.filter-wrap .filter-content {
		flex-wrap: wrap;
		align-items: stretch;
		gap: 10px;
	}

	.filter-wrap .filter-content > .woocommerce-notices-wrapper:empty {
		display: none !important;
	}

	/* Sort takes a line of its own - its longest label is 23 characters and
	   it is the control most often used. Per page and the grid/list switch
	   share the line under it. */
	.filter-wrap .filter-content > form.woocommerce-ordering {
		flex: 1 0 100%;
		margin: 0;
		order: 1;
	}

	.filter-wrap .filter-content > .products-per-page {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		order: 2;
	}

	.main-products-loop .filter-wrap .filter-content > .view-switcher {
		flex: 0 0 auto;
		margin: 0 0 0 auto;
		order: 3;
	}

	.filter-wrap .woocommerce-ordering .orderby,
	.filter-wrap .woocommerce-ordering select {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	/* The parent indents this form 15px to sit beside a label that is
	   hidden at this width; on its own line it starts at the margin. */
	.filter-wrap .products-per-page form {
		flex: 1 1 auto;
		margin-left: 0 !important;
	}

	.filter-wrap .products-per-page .et-per-page-select {
		width: 100% !important;
		min-width: 88px !important;
	}
}

/* "Afișează" in front of the number.

   The parent hides this label below 1024, which leaves a dropdown reading
   "12" with nothing anywhere near it to say what twelve is. On a desktop
   someone works it out; this shop's customers should not have to. Measured,
   the word costs 60px, and the narrowest bar it has to fit on - the second
   line of the stacked phone bar at 390 - has 360px to spend on 60px of
   label, an 88px minimum dropdown and the 116px switch, which is 264px
   plus gaps. */
.filter-wrap .products-per-page .mob-hide {
	display: inline-block !important;
}


/* ===========================================================================
   5. THE GRID/LIST SWITCH

   Measured at every width from 768 up, the two anchors inside it are 17px
   wide and 0px tall. The parent sets font-size:0 on them and draws the icon
   in a ::before, so the anchor's own line box collapses and the only thing
   you can hit is the glyph itself - and vertically, nothing. A control that
   changes the whole shelf is currently a 17x0 target.

   So each one becomes a real 48px square with the icon centred in it. 48px
   rather than 44 for the same reason ux.css chose 48 everywhere else on this
   shop.

   And it is restored on phones. The parent hides the switch below 480px,
   which leaves ?view_mode=list unreachable from a phone - the one view that
   gives a product a 104px photograph beside its name, its stock line and its
   price on a full-width row, instead of two 180px cards side by side. That
   is the layout this audience is better served by, and it was the layout
   they could not get to.
   ======================================================================== */
.filter-wrap .view-switcher > [class*="switch"] > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	box-sizing: border-box;
	border-radius: 10px;
}

/* The padding was sized for a 17px glyph; the square carries the space now. */
.filter-wrap .view-switcher > [class*="switch"] {
	padding: 0;
	display: flex;
	align-items: center;
}

/* The active view reads as chosen rather than only as darker text - at a
   glance, on a screen in daylight, weight alone was not enough. */
.filter-wrap .view-switcher > .switcher-active > a {
	background: #f0f0f2;
}

/* The parent's own rule is .filter-wrap .view-switcher{display:none!important}
   at (0,2,0), and it cannot be beaten on source order: XStore prints
   filter-area.min.css from inside the loop, in the body, after every
   stylesheet in the head. So this is written one class higher, at (0,3,0),
   where order stops mattering. */
@media (max-width: 480px) {
	.main-products-loop .filter-wrap .view-switcher {
		display: flex !important;
		align-items: center;
		margin-inline-start: 0;
	}
}


/* ===========================================================================
   6. THE ROW, AT THE WIDTH IT IS ACTUALLY READ AT

   list-view.css already collapses the row properly under 768 - thumbnail
   and text on top, price and controls on a rule underneath - and that was
   measured working at 390 and 414: 12 rows, one per line, price 21px and
   never clipped, controls 52px.

   What was left is the band between 768 and 1180, where the rail is still
   beside the text at its full 240px but the row has lost the width to pay
   for it. Measured at 768: the rail 183px of control against a text column
   that had already given up its excerpt. The rail gives way first here for
   the same reason it does at 1180 - a title with nowhere to go is worse than
   a slightly tighter button.
   ======================================================================== */
@media (min-width: 768px) and (max-width: 900px) {
	.af-list-card .af-list-buy {
		flex: 0 0 188px;
		padding-left: 14px;
	}

	.af-list-card .af-list-row {
		gap: 14px;
	}
}