/* Product cards, listing pages, product page, cart and checkout - styled to match the reference shop. */

.aura-card { position: relative; background: #FFFFFF; padding: 0 0 14px; }
.aura-card__pic { display: block; aspect-ratio: 1; overflow: hidden; background: #F7F5F1; border-radius: 4px; }
.aura-card__pic img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.aura-card__flag { position: absolute; left: 10px; top: 10px; background: var(--aura-sale); color: #FFFFFF; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }
.aura-card__heart { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--aura-ink); display: grid; place-items: center; cursor: pointer; }
.aura-card__heart:hover { color: var(--aura-sale); }
.aura-card__brand { margin: 12px 0 2px; font-size: 12px; font-weight: 600; color: var(--aura-muted); text-transform: uppercase; letter-spacing: .02em; }
.aura-card__title { font-size: 14px; font-weight: 400; line-height: 1.35; margin: 4px 0 6px; color: var(--aura-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aura-card__title a { color: inherit; }
.aura-card__price { margin: 0; font-size: 16px; font-weight: 700; color: var(--aura-ink); }
.aura-card__price.is-sale { color: var(--aura-sale); }
.aura-card__price del { color: var(--aura-muted); font-weight: 400; font-size: 13px; margin-left: 6px; }
.aura-card__price ins { text-decoration: none; }
.aura-card__stars { display: flex; align-items: center; gap: 1px; margin: 6px 0 0; color: #D6D2CB; }
.aura-card__stars .is-on { color: #F2B01E; }
.aura-card__stars small { margin-left: 5px; color: var(--aura-muted); font-size: 12px; }
.aura-card .aura-card__add, .woocommerce .aura-card a.aura-card__add, .woocommerce ul.products li.product .aura-card__add {
	display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; height: 38px; padding: 0 18px; border-radius: 8px;
	background: #FFFFFF; border: 2px solid var(--aura-navy); color: var(--aura-navy) !important; font-size: 14px; font-weight: 600; line-height: 1;
}
.aura-card .aura-card__add:hover, .woocommerce .aura-card a.aura-card__add:hover { background: var(--aura-navy); color: #FFFFFF !important; text-decoration: none; }
.woocommerce .aura-card a.aura-card__add.loading { opacity: .7; }
.aura-card__add.added { display: none; }
.aura-card .added_to_cart { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--aura-navy); text-decoration: underline; }

/* ---------------------------------------------------------------- listing page */
.aura-plp__head { padding: 18px 24px 6px; }
.aura-crumbs { font-size: 13px; color: var(--aura-muted); }
.aura-crumbs a { color: var(--aura-muted); }
.aura-crumbs span { color: var(--aura-ink); font-weight: 600; }
.aura-plp__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 12px 0 4px; }
.aura-plp__title { font-size: 28px; font-weight: 700; }
.aura-plp__title span { font-size: 17px; font-weight: 400; color: var(--aura-muted); }
.aura-plp__desc { font-size: 14px; color: var(--aura-body); max-width: 900px; margin-bottom: 8px; }

.woocommerce .woocommerce-ordering select, .aura-plp__bar select { height: 40px; border: 1px solid var(--aura-line); border-radius: 8px; padding: 0 12px; font: 400 14px var(--aura-sans); background: #FFFFFF; color: var(--aura-ink); }

.woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 24px; margin: 0 0 30px !important; padding: 0; list-style: none; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
/* The grid tracks are right (4 x 330px) but the item was only 82.5px - shrink-to-fit, because
   something upstream stops the grid item stretching. `width:auto` is not enough on its own: an
   auto-width grid item that is not stretched sizes to its content, and with our card's small image
   that came out a quarter of the track. Force the item and the card to fill the track. */
.woocommerce ul.products li.product {
	width: 100% !important; justify-self: stretch; align-self: start;
	margin: 0 !important; float: none !important; max-width: none !important; }
.woocommerce ul.products li.product > .aura-card { width: 100%; }
.woocommerce .woocommerce-result-count, .woocommerce .products .star-rating { display: none; }

.site-main, .woocommerce .site-main { max-width: var(--aura-shell); margin: 0 auto; padding: 0 var(--aura-pad) 40px; }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 6px; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { border: 1px solid var(--aura-line); border-radius: 6px; min-width: 40px; padding: 9px 12px; font-size: 14px; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--aura-navy); color: #FFFFFF; border-color: var(--aura-navy); }

/* ---------------------------------------------------------------- product page */
.aura-crumbs--pdp { display: block; padding: 16px var(--aura-pad) 0; }
.woocommerce span.onsale, .woocommerce ul.products li.product .onsale {
	background: var(--aura-sale); color: #FFFFFF; border-radius: 3px; min-height: 0; min-width: 0; line-height: 1;
	padding: 5px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; top: 12px; left: 12px; right: auto; margin: 0;
}
.woocommerce div.product { max-width: var(--aura-shell); margin: 0 auto; padding: 22px var(--aura-pad) 50px; }
.woocommerce div.product .product_title { font-size: 30px; font-weight: 700; line-height: 1.2; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--aura-ink); font-size: 28px; font-weight: 700; }
.woocommerce div.product p.price del { color: var(--aura-muted); font-size: 18px; font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--aura-sale); }
.woocommerce div.product form.cart .button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit.alt {
	background: var(--aura-navy); color: #FFFFFF; border-radius: 8px; height: 50px; padding: 0 34px; font-weight: 600; font-size: 16px; line-height: 50px;
}
.woocommerce div.product form.cart .button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--aura-navy-dk); color: #FFFFFF; }
.woocommerce .quantity .qty { height: 50px; border: 1px solid var(--aura-line); border-radius: 8px; width: 74px; font-size: 16px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; border-bottom: 1px solid var(--aura-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; margin: 0 18px 0 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-size: 16px; font-weight: 600; color: var(--aura-muted); padding: 12px 2px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--aura-navy); box-shadow: inset 0 -3px 0 var(--aura-navy); }

/* ---------------------------------------------------------------- cart, checkout, account */
.woocommerce-cart .entry-content, .woocommerce-checkout .entry-content, .woocommerce-account .entry-content { max-width: var(--aura-shell); margin: 0 auto; padding: 24px var(--aura-pad) 60px; }
.woocommerce table.shop_table { border-radius: 8px; border-color: var(--aura-line); }
.woocommerce .cart_totals h2, .woocommerce-checkout h3 { font-size: 20px; }
.woocommerce .button, .wc-block-components-button { border-radius: 8px !important; font-family: var(--aura-sans) !important; }
.wc-block-components-button:not(.is-link) { background: var(--aura-navy) !important; }
.woocommerce-info, .woocommerce-message { border-top-color: var(--aura-navy); }
.woocommerce-info::before, .woocommerce-message::before { color: var(--aura-navy); }

@media (max-width: 1100px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
	.aura-plp__title { font-size: 21px; }
	.aura-card__add { width: 100%; }
}