/* JigjigaSale — the product card, and the cart bar it feeds.
 *
 * One card for every browse surface: home, shop, product taxonomies, search,
 * vendor storefronts and trends. It used to be three separate implementations
 * (.jjs-pcard on the home page, an inline copy of .jjs-acard in the shop
 * archive, and Porto's default WooCommerce content-product.php on vendor
 * storefronts), which is why the same product looked different depending on
 * where you found it. These rules moved out of shop-v2.css so there is a single
 * definition rather than one per page.
 *
 * On a phone the card carries only what a buyer decides with: picture, name,
 * price, discount, and one control to add it. Rating, units sold and the
 * delivery line stay on desktop, where there is room for them.
 */

.jjs-acard{
	position:relative;background:#fff;border:1px solid #EDF1F8;border-radius:var(--jjs-r-lg);
	overflow:hidden;display:flex;flex-direction:column;transition:.15s;min-width:0;
}
.jjs-acard:hover{ box-shadow:0 8px 24px rgba(10,27,61,.12);border-color:#DCE4F1;transform:translateY(-2px); }

/* A card holding something already in the cart is outlined, so a buyer
   scanning the grid can see what they have picked without opening the cart. */
.jjs-acard.is-incart{ border-color:#0A1B3D;border-width:2px;box-shadow:0 4px 14px rgba(10,27,61,.10); }

.jjs-acard__top{ position:relative; }
.jjs-acard__im{
	position:relative;display:block;aspect-ratio:1/1;background:#F7F9FC;overflow:hidden;
}
.jjs-acard__im img{ width:100%;height:100%;object-fit:contain;display:block;padding:6px;box-sizing:border-box; }
.jjs-acard__ph{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--jjs-fs-2xl);opacity:.45; }

.jjs-acard__disc{
	position:absolute;top:8px;left:8px;z-index:3;background:#E8462B;color:#fff;
	font-size:var(--jjs-fs-xs);font-weight:800;padding:3px 7px;border-radius:var(--jjs-r-sm);line-height:1.2;
}
.jjs-acard__rank{
	position:absolute;top:8px;left:8px;z-index:3;min-width:24px;height:24px;padding:0 6px;
	border-radius:var(--jjs-r-sm);background:rgba(10,27,61,.85);color:#fff;font-size:var(--jjs-fs-sm);font-weight:800;
	display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.28);
}
.jjs-acard__rank--top{ background:linear-gradient(180deg,#F5A524,#D98A0B);color:#2a1a02; }
.jjs-acard__oos{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	background:rgba(10,27,61,.55);color:#fff;font-size:var(--jjs-fs-sm);font-weight:800;
	text-transform:uppercase;letter-spacing:.04em;
}

.jjs-acard__body{ display:block;padding:10px 11px 12px;text-decoration:none;color:inherit;flex:1;min-width:0; }
.jjs-acard__nm{
	font-size:var(--jjs-fs-sm);line-height:1.35;color:#1B2942;font-weight:500;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	min-height:2.7em;margin-bottom:7px;
}

/* Price is ink, not red. Red is reserved for the discount badge and for the
   struck-through original, so the number a buyer actually pays is the calmest
   thing on the card rather than competing with the badge next to it. */
.jjs-acard__price{ line-height:1.15;margin-bottom:6px; }
.jjs-acard__price .amount{ color:#0A1B3D;font-size:var(--jjs-fs-md);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums; }
.jjs-acard__price del{ opacity:1;text-decoration:none; }
.jjs-acard__price del .amount{ color:#9AA6BC;font-size:var(--jjs-fs-xs);font-weight:500;margin-left:5px;text-decoration:line-through; }
.jjs-acard__price ins{ text-decoration:none; }

.jjs-acard__meta{ display:flex;align-items:center;gap:9px;font-size:var(--jjs-fs-xs);color:#7A879E;margin-bottom:6px; }
.jjs-acard__rate{ color:#D98A0B;font-weight:700; }
.jjs-acard__sold{ font-weight:500; }
.jjs-acard__ship{ font-size:var(--jjs-fs-xs);color:#16A34A;font-weight:600; }

/* ---- the one control: add, then quantity ---------------------- */

.jjs-acard__add{ /* sits on the picture, clear of the name and price */
	position:absolute;bottom:11px;right:11px;width:36px;height:36px;border-radius:50%;
	background:#fff;border:1px solid #D8E0EE;color:#0A1B3D;font-size:var(--jjs-fs-lg);font-weight:400;
	display:flex;align-items:center;justify-content:center;text-decoration:none;line-height:0;
	box-shadow:0 2px 6px rgba(10,27,61,.12);transition:.15s;z-index:2;cursor:pointer;padding:0;
}
.jjs-acard__add:hover{ border-color:#0A1B3D;box-shadow:0 4px 10px rgba(10,27,61,.18); }
.jjs-acard__add.is-busy{ opacity:.55;pointer-events:none; }
.jjs-acard__add--view{ background:#0A1B3D;border-color:#0A1B3D;color:#fff;font-size:var(--jjs-fs-md); }

/* Once it is in the cart the same corner becomes a stepper, so the control
   never moves and the card never changes height. */
.jjs-acard__qty{
	position:absolute;bottom:11px;right:11px;z-index:2;display:none;
	align-items:center;gap:2px;background:#fff;border:1px solid #D8E0EE;
	border-radius:var(--jjs-r-pill);box-shadow:0 2px 6px rgba(10,27,61,.12);padding:2px;
}
.jjs-acard.is-incart .jjs-acard__qty{ display:flex; }
.jjs-acard.is-incart .jjs-acard__add{ display:none; }
.jjs-acard__qb{
	width:30px;height:30px;border:0;background:none;border-radius:50%;cursor:pointer;
	display:flex;align-items:center;justify-content:center;color:#0A1B3D;font-size:var(--jjs-fs-lg);line-height:0;padding:0;
}
.jjs-acard__qb:hover{ background:#F1F5F9; }
.jjs-acard__qb svg{ width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; }
.jjs-acard__qn{ min-width:18px;text-align:center;font-size:var(--jjs-fs-sm);font-weight:800;color:#0A1B3D;font-variant-numeric:tabular-nums; }
.jjs-acard__qty.is-busy{ opacity:.55;pointer-events:none; }

/* WC's "View cart" link that ajax_add_to_cart injects — the card is compact. */
.jjs-acard a.added_to_cart{ display:none; }

/* ---- grids ---------------------------------------------------- */

.jjs-agrid{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px; }

/* ---- sticky cart bar ------------------------------------------ */

.jjs-cartbar{
	position:fixed;left:0;right:0;bottom:0;z-index:1200;
	display:flex;align-items:center;justify-content:space-between;gap:14px;
	padding:11px 16px calc(11px + env(safe-area-inset-bottom));
	background:#fff;border-top:1px solid #E3E9F4;box-shadow:0 -4px 18px rgba(10,27,61,.10);
	transform:translateY(110%);transition:transform .22s ease;
}
.jjs-cartbar.is-on{ transform:translateY(0); }
.jjs-cartbar__sum{ min-width:0;display:flex;flex-direction:column;gap:1px; }
.jjs-cartbar__tot{ font-size:var(--jjs-fs-md);font-weight:800;color:#0A1B3D;font-variant-numeric:tabular-nums;white-space:nowrap; }
.jjs-cartbar__tot del{ color:#9AA6BC;font-weight:500;font-size:var(--jjs-fs-sm);margin-left:6px;text-decoration:line-through; }
.jjs-cartbar__n{ font-size:var(--jjs-fs-xs);color:#7A879E;font-weight:600; }
.jjs-cartbar__go{
	display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#F5A524,#D98A0B);color:#2a1a02;
	border-radius:var(--jjs-r-pill);padding:12px 22px;font-size:var(--jjs-fs-sm);font-weight:800;text-decoration:none;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(245,165,36,.6);transition:box-shadow .15s;
}
.jjs-cartbar__go:hover{ box-shadow:0 10px 22px -8px rgba(245,165,36,.7);color:#2a1a02; }
.jjs-cartbar__go svg{ width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; }

/* The site's own bottom nav sits at the same edge; lift it out of the way
   rather than stacking two bars on top of each other. */
body.jjs-cartbar-on .jigji-mobile-footer{ transform:translateY(100%); }

@media (min-width:993px){
	.jjs-cartbar{ left:auto;right:24px;bottom:24px;border-radius:var(--jjs-r-lg);border:1px solid #E3E9F4;min-width:340px;padding:12px 16px; }
}

/* ---- phone: strip the card back ------------------------------- */

@media (max-width:992px){
	.jjs-agrid{ grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
	/* Rating, units sold and the delivery line are browsing detail, not
	   deciding detail — they cost two lines each on a 375px screen. */
	.jjs-acard__meta,
	.jjs-acard__ship{ display:none; }
	.jjs-acard__body{ padding:9px 10px 11px; }
	.jjs-acard__nm{ font-size:var(--jjs-fs-xs);margin-bottom:5px; }
	.jjs-acard__price .amount{ font-size:var(--jjs-fs-md); }
	.jjs-acard__price del .amount{ font-size:var(--jjs-fs-xs); }


}

@media (max-width:360px){
	.jjs-agrid{ gap:8px; }
	.jjs-acard__add,.jjs-acard__qty{ bottom:7px;right:7px; }
}