/* The product card (tg_product_card): rules it needs on every page it is printed on.
   The card's desktop design is in inline styles on the markup. Its tablet and phone layout is in site.css,
   keyed on the design's class names: .br-card (upright card), .ct-card (list row), .ca-xs (compact card).
   This file adds what the live card has that the static design did not: lists of cards, WooCommerce's
   price and button markup, plugin buttons, and the "Fits your <make>" badge. */

/* ---------- lists of cards (woocommerce/loop/loop-start.php) ---------- */
.tg-loop{list-style:none;margin:0;padding:0}
.tg-loop>li{list-style:none;margin:0;padding:0;min-width:0;float:none;width:auto}
.tg-cards>li{display:flex}
.tg-cards>li>.tg-card{flex:1 1 auto;min-width:0}
.ct-list>li+li>.ct-card{border-top:1px solid #E9EDF1}

/* ---------- pieces WooCommerce prints ---------- */
.tg-card img.tg-card-photo{max-width:100%;margin:0;box-shadow:none}
.tg-card .woocommerce-Price-amount{white-space:nowrap}
.tg-card del{margin-right:6px;font-size:.68em;font-weight:500;color:#566574}
.tg-card ins{text-decoration:none;background:none}
.tg-card .woocommerce-price-suffix{font-size:13px;font-weight:500;color:#566574}
.ct-amount,.tg-card-amount{line-height:1.2}
.tg-card--oos .tg-card-photo{opacity:.55}
@media (min-width:1080px){
  .ct-price{text-align:right}
  .ct-oos .ct-photo img{opacity:.55}
}

/* ---------- buttons ---------- */
.tg-card-add,.tg-card-view{transition:background-color .14s ease-out,opacity .14s ease-out}
.tg-card-add.loading{opacity:.6;pointer-events:none;cursor:progress}
.tg-card-add.added::after{content:"";flex:0 0 auto;width:11px;height:6px;margin:-3px 0 0 8px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg)}
/* "View cart", which WooCommerce adds beside the button after an add to cart */
.tg-theme .tg-card a.added_to_cart{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0;font-size:14px;font-weight:600;text-decoration:underline;color:#0F5C9A;background:none;border:0}
.ct-buy{flex-wrap:wrap}
.ct-buy .ct-add{flex-basis:96px!important}
.tg-theme .ct-buy a.added_to_cart{flex:1 0 100%;justify-content:flex-end}
.tg-theme .tg-card-btns a.added_to_cart{grid-column:1 / -1}
.tg-card-btns--one{grid-template-columns:minmax(0,1fr)!important}

/* Buttons that plugins print on woocommerce_after_shop_loop_item (Add to Quote: a.afrfqbt).
   Upright card: the design's secondary button. */
.tg-page .tg-card .tg-card-btns>a.afrfqbt,
.tg-page .tg-card .tg-card-btns>a.button,
.tg-page .tg-card .tg-card-btns>button.button{display:flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0 10px;border:2px solid #003050;border-radius:4px;background:#FFFFFF;color:#003050;font:inherit;font-weight:700;font-size:15px;line-height:1.2;text-align:center;text-decoration:none;white-space:normal;cursor:pointer;box-sizing:border-box;float:none;transition:background-color .14s ease-out}
.tg-page .tg-card .tg-card-btns>a.afrfqbt:hover,
.tg-page .tg-card .tg-card-btns>a.button:hover,
.tg-page .tg-card .tg-card-btns>button.button:hover{background:#EEF1F4;color:#003050}
/* List row and compact card: the design's text link */
.tg-page .tg-card .tg-card-extra.tg-card-extra a,
.tg-page .tg-card .tg-card-extra.tg-card-extra button{display:inline-flex;align-items:center;min-height:inherit;margin:0;padding:0;border:0;border-radius:0;background:none;color:#0F5C9A;font:inherit;font-weight:600;line-height:1.2;text-decoration:underline;cursor:pointer;float:none}
.tg-page .tg-card .tg-card-extra.tg-card-extra a:hover,
.tg-page .tg-card .tg-card-extra.tg-card-extra button:hover{background:none;color:#003050}

/* ---------- tablet and phone ---------- */
@media (max-width:1079px){
  .tg-page .tg-card .tg-card-btns>a.afrfqbt,
  .tg-page .tg-card .tg-card-btns>a.button,
  .tg-page .tg-card .tg-card-btns>button.button{min-height:48px;font-size:16px}
  .tg-theme .tg-card a.added_to_cart{min-height:44px}
  .ct-buy .ct-add{flex-basis:0!important}
  .ct-quote.tg-card-extra{flex-wrap:nowrap!important}
}
@media (min-width:700px) and (max-width:1079px){
  .tg-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
  .tg-cards--compact{gap:12px!important}
}
/* phone: a list of upright cards stacks, each with the photo beside the text (in a swipe row they stay upright) */
@media (max-width:699px){
  .tg-cards{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .tg-cards .br-card{display:grid!important;grid-template-columns:clamp(96px,30%,128px) minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;column-gap:14px;padding:14px;box-sizing:border-box}
  .tg-cards .br-card-body{display:contents!important}
  .tg-cards .br-card-media{grid-column:1;grid-row:1 / span 4;align-self:center}
  .tg-cards .br-card-img{height:auto!important;padding:0!important;aspect-ratio:1 / 1!important}
  .tg-cards .br-card-sku{grid-column:2;grid-row:1;justify-self:start;margin-bottom:6px}
  .tg-cards .br-card-title{grid-column:2;grid-row:2}
  .tg-cards .br-card-fit{grid-column:2;grid-row:3;margin-top:6px}
  .tg-cards .br-card-price{grid-column:2;grid-row:4}
  .tg-cards .br-card-btns{grid-column:1 / -1;grid-row:5;margin-top:12px}
  .ca-xs .ca-add{min-height:44px}
}