/* =============================================================
 * Cart revamp — Game Library design (Proposal B)
 * Theme: shiko-theme 3.5.12
 * Scoped under .shiko-cart-b to avoid colliding with legacy
 * .shiko-cart-* rules in main.css.
 * ============================================================= */

.shiko-cart-b{
	--cb-radius: 14px;
	--cb-gap: 18px;
	--cb-soft: var(--shiko-bg-tertiary, #F3F3F0);
	--cb-line: var(--shiko-border, rgba(16,17,20,.08));
	--cb-ink:  var(--shiko-ink, #1A1A1A);
	--cb-muted: var(--shiko-text-muted, #6B7280);
	--cb-surface: var(--shiko-bg-secondary, #FFFFFF);
	--cb-good: #0E7A36;
	--cb-good-bg: #E7F6EC;
	--cb-good-line: #BFE5C9;
	--cb-warn-bg: #FFF1E6;
	--cb-warn-fg: #B45309;
	--cb-wa: #25D366;
	--cb-wa-hover: #1FAE56;
	width: 100%;
	margin: 0;
	padding: 12px 0 60px;
	color: var(--cb-ink);
}
[data-theme="dark"] .shiko-cart-b{
	--cb-soft: rgba(255,255,255,.04);
	--cb-line: rgba(255,255,255,.08);
	--cb-surface: var(--shiko-bg-secondary, #13151C);
	--cb-ink:    var(--shiko-ink, #EDEDED);
	--cb-muted:  var(--shiko-text-muted, #9CA3AF);
	--cb-good-bg: #0F2517;
	--cb-good-line: #1F4A2C;
	--cb-good: #7FD498;
	--cb-warn-bg: #2A1A0E;
	--cb-warn-fg: #F2B373;
}

/* HERO ---------------------------------------------------------- */
.shiko-cart-b-hero{
	background: linear-gradient(135deg, #1a0203 0%, #3d050a 50%, #B7080A 100%);
	color: #fff;
	border-radius: 18px;
	padding: 24px 28px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	align-items: center;
	margin-bottom: var(--cb-gap);
	position: relative;
	overflow: hidden;
}
.shiko-cart-b-hero::after{
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), transparent 60%);
	pointer-events: none;
}
.shiko-cart-b-hero-title{
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #fff;
}
.shiko-cart-b-hero-sub{
	margin: 6px 0 0;
	font-size: 13px;
	color: rgba(255,255,255,.88) !important;
}
.shiko-cart-b-hero-stats{
	display: flex;
	flex-wrap: wrap;
	gap: 16px 22px;
	margin-top: 10px;
	font-size: 12px;
	color: rgba(255,255,255,.92) !important;
}
.shiko-cart-b-hero-stats span,
.shiko-cart-b-hero-stats svg{ color: #fff !important; }
.shiko-cart-b-hero-stats span{
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.shiko-cart-b-hero-total{
	text-align: end;
	font-size: 13px;
	opacity: .9;
}
.shiko-cart-b-hero-total .lbl{ display: block; }
.shiko-cart-b-hero-total .val{
	display: block;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #fff !important;
	margin-top: 2px;
}
.shiko-cart-b-hero-total .lbl,
.shiko-cart-b-hero-total .val,
.shiko-cart-b-hero-total .val *,
.shiko-cart-b-hero-total .val .woocommerce-Price-amount,
.shiko-cart-b-hero-total .val .woocommerce-Price-currencySymbol,
.shiko-cart-b-hero-total .val bdi{ color: #fff !important; }

/* GRID ---------------------------------------------------------- */
.shiko-cart-b-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cb-gap);
}
@media (min-width: 1024px){
	.shiko-cart-b-grid{
		grid-template-columns: 1fr .8fr;
		align-items: flex-start;
	}
}

.shiko-cart-b-items{
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* CARD ---------------------------------------------------------- */
.shiko-cart-b-card{
	background: var(--cb-surface);
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-radius);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 12px rgba(0,0,0,.04);
}
@media (min-width: 768px){
	.shiko-cart-b-card{ grid-template-columns: 140px 1fr; }
}
.shiko-cart-b-card-cover{
	position: relative;
	background: #000;
	min-height: 180px;
}
@media (min-width: 768px){
	.shiko-cart-b-card-cover{ min-height: 100%; }
}
.shiko-cart-b-card-cover a{ display: block; height: 100%; }
.shiko-cart-b-card-cover img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	min-height: 180px;
}
@media (min-width: 768px){
	.shiko-cart-b-card-cover img{ min-height: 100%; }
}
.shiko-cart-b-card-cover::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.6) 100%);
	pointer-events: none;
}
@media (min-width: 768px){
	.shiko-cart-b-card-cover::after{
		background: linear-gradient(90deg, transparent 60%, rgba(0,0,0,.55) 100%);
	}
}

/* PILLS --------------------------------------------------------- */
.shiko-cart-b-pill{
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	padding: 3px 8px;
	border-radius: 6px;
	line-height: 1.4;
}
.shiko-cart-b-pill-platform{
	position: absolute;
	inset-inline-start: 10px;
	inset-block-start: 10px;
	background: rgba(0,0,0,.85);
	color: #fff;
}
.shiko-cart-b-pill-edition{
	position: absolute;
	inset-inline-start: 10px;
	inset-block-end: 10px;
	background: linear-gradient(180deg, #FFB000, #E07900);
	color: #1a0c00;
	max-width: calc(100% - 20px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.shiko-cart-b-pill-warn{
	background: var(--cb-warn-bg);
	color: var(--cb-warn-fg);
	font-size: 11px;
	padding: 4px 10px;
}

/* CARD BODY ----------------------------------------------------- */
.shiko-cart-b-card-body{
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.shiko-cart-b-card-title{
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.005em;
}
.shiko-cart-b-card-title a{
	color: inherit;
	text-decoration: none;
}
.shiko-cart-b-card-title a:hover{ color: var(--shiko-primary, #B7080A); }
.shiko-cart-b-card-crumbs{
	font-size: 11.5px;
	color: var(--cb-muted);
}
.shiko-cart-b-card-crumbs b{
	color: var(--cb-ink);
	font-weight: 600;
}
.shiko-cart-b-card-actions{
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px dashed var(--cb-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	justify-content: space-between;
}
.shiko-cart-b-card-price{
	font-size: 16px;
	font-weight: 700;
	color: var(--cb-ink);
}
.shiko-cart-b-card-price .strike{
	color: var(--cb-muted);
	font-size: 11px;
	font-weight: 500;
	text-decoration: line-through;
	margin-inline-start: 6px;
}
.shiko-cart-b-card-links{
	display: flex;
	gap: 14px;
	font-size: 11.5px;
	color: var(--cb-muted);
	padding-top: 4px;
}
.shiko-cart-b-card-links a{
	color: var(--cb-muted);
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
}
.shiko-cart-b-card-links a:hover{ color: var(--shiko-primary, #B7080A); }

/* QTY STEPPER --------------------------------------------------- */
.shiko-cart-b-qty .quantity,
.shiko-cart-b-qty .qty,
.shiko-cart-b-qty input[type="number"]{
	display: inline-block;
}
.shiko-cart-b-qty .qty,
.shiko-cart-b-qty input[type="number"]{
	width: 56px;
	height: 32px;
	border: 1px solid var(--cb-line);
	border-radius: 999px;
	background: var(--cb-surface);
	text-align: center;
	color: var(--cb-ink);
	font-size: 13px;
	font-weight: 600;
	padding: 0 8px;
}
.shiko-cart-b-qty-static{
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--cb-soft);
	color: var(--cb-ink);
	font-size: 12px;
	font-weight: 600;
}

/* FORM CONTROLS (coupon, update) -------------------------------- */
.shiko-cart-b-form-controls{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 14px;
	background: var(--cb-surface);
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-radius);
}
.shiko-cart-b-coupon{
	display: flex;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 220px;
}
.shiko-cart-b-coupon input.input-text{
	flex: 1;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--cb-line);
	border-radius: 8px;
	background: var(--cb-soft);
	color: var(--cb-ink);
	font-size: 13px;
}
.shiko-cart-b-coupon button.button{
	height: 38px;
	padding: 0 14px;
	border-radius: 8px;
	background: var(--cb-ink);
	color: var(--cb-surface);
	border: none;
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
}
[data-theme="dark"] .shiko-cart-b-coupon button.button{
	background: #fff;
	color: #000;
}
.shiko-cart-b-update-btn{
	height: 38px;
	padding: 0 16px;
	border-radius: 8px;
	border: 1px solid var(--cb-line);
	background: var(--cb-surface);
	color: var(--cb-ink);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

/* TOTALS -------------------------------------------------------- */
.shiko-cart-b-totals{
	position: relative;
}
@media (min-width: 1024px){
	.shiko-cart-b-totals{
		position: sticky;
		top: 16px;
	}
}
.shiko-cart-b-total-card{
	background: var(--cb-surface);
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-radius);
	padding: 18px;
	box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 12px rgba(0,0,0,.04);
}
.shiko-cart-b-total-heading{
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
}
.shiko-cart-b-savings-card{
	background: var(--cb-good-bg);
	border: 1px solid var(--cb-good-line);
	color: var(--cb-good);
	font-size: 12px;
	font-weight: 600;
	padding: 10px 12px;
	border-radius: 10px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.shiko-cart-b-total-line{
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--cb-ink);
	padding: 6px 0;
}
.shiko-cart-b-total-line .lbl{ color: var(--cb-muted); }
.shiko-cart-b-total-line.is-savings .val,
.shiko-cart-b-total-line.is-coupon .val{
	color: var(--cb-good);
	font-weight: 700;
}
.shiko-cart-b-total-line.is-grand-total{
	border-top: 1px dashed var(--cb-line);
	margin-top: 8px;
	padding-top: 14px;
	font-size: 16px;
	font-weight: 800;
}
.shiko-cart-b-total-line.is-grand-total .lbl{ color: var(--cb-ink); }
.shiko-cart-b-total-line.is-grand-total .val{
	color: var(--cb-ink);
	font-weight: 800;
}

/* CHECKOUT CTA --------------------------------------------------
 * High-specificity, every-state white text + no underline.
 * Uses body.shiko-cart-page-body :where() prefix to outrank any
 * `.entry-content a:not(.shiko-btn)` rule that tries to underline links. */
body.shiko-cart-page-body a.shiko-cart-b-checkout-cta,
body.shiko-cart-page-body a.shiko-cart-b-checkout-cta:link,
body.shiko-cart-page-body a.shiko-cart-b-checkout-cta:visited,
body.shiko-cart-page-body a.shiko-cart-b-checkout-cta:hover,
body.shiko-cart-page-body a.shiko-cart-b-checkout-cta:focus,
body.shiko-cart-page-body a.shiko-cart-b-checkout-cta:focus-visible,
body.shiko-cart-page-body a.shiko-cart-b-checkout-cta:active{
	color: #fff !important;
	text-decoration: none !important;
	text-decoration-line: none !important;
	-webkit-text-fill-color: #fff !important;
	border: 0 !important;
	border-bottom: 0 !important;
	outline-offset: 2px;
}
.shiko-cart-b-checkout-cta{
	display: block;
	margin-top: 14px;
	padding: 14px;
	border-radius: 12px;
	background: linear-gradient(180deg, var(--shiko-accent, #E40303), var(--shiko-primary, #B7080A));
	font-weight: 800;
	font-size: 14px;
	text-align: center;
	box-shadow: 0 8px 18px rgba(228,3,3,.22);
	letter-spacing: .02em;
	transition: box-shadow .15s ease, transform .05s ease;
}
.shiko-cart-b-checkout-cta:hover,
.shiko-cart-b-checkout-cta:focus{
	box-shadow: 0 12px 22px rgba(228,3,3,.32), inset 0 0 0 2px rgba(255,255,255,.18);
}
.shiko-cart-b-checkout-cta:active{ transform: translateY(1px); }

/* PAYMENT ROW --------------------------------------------------- */
.shiko-cart-b-pay-row{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--cb-line);
}
.shiko-cart-b-pay-row img{
	height: 18px;
	width: auto;
	opacity: .85;
}
[data-theme="dark"] .shiko-cart-b-pay-row img{
	filter: brightness(.95) contrast(1.1);
}

/* CROSS-SELL ---------------------------------------------------- */
.shiko-cart-b-xsell{
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--cb-line);
}
.shiko-cart-b-xsell h3{
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.shiko-cart-b-xsell h3 a{
	color: var(--cb-muted);
	font-size: 11px;
	font-weight: 500;
	text-decoration: none;
}
.shiko-cart-b-xsell-item{
	display: grid;
	grid-template-columns: 48px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px;
	border-radius: 10px;
}
.shiko-cart-b-xsell-item:hover{ background: var(--cb-soft); }
.shiko-cart-b-xsell-thumb{
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	overflow: hidden;
	background: linear-gradient(135deg, #222, #444);
}
.shiko-cart-b-xsell-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.shiko-cart-b-xsell-meta .t{
	display: block;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cb-ink);
	text-decoration: none;
}
.shiko-cart-b-xsell-meta .p{
	display: block;
	font-size: 11px;
	color: var(--cb-muted);
	margin-top: 2px;
}
.shiko-cart-b-xsell-add{
	background: var(--cb-ink);
	color: var(--cb-surface);
	border: none;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}
[data-theme="dark"] .shiko-cart-b-xsell-add{
	background: #fff;
	color: #000;
}

/* MOBILE STICKY CHECKOUT BAR ------------------------------------
 * Now driven by IntersectionObserver on .shiko-cart-b-checkout-cta
 * (cart.js): visible when the main CTA scrolls out of view, hidden
 * when the main CTA is on screen. No more viewport-width gating —
 * the bar appears on desktop too if the user scrolls past the totals
 * panel (long carts), and never competes with the visible main CTA.
 */
.shiko-cart-b-mobile-cta{
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 40;
	padding: 10px 14px;
	background: var(--cb-surface);
	border-top: 1px solid var(--cb-line);
	box-shadow: 0 -8px 18px rgba(0,0,0,.08);
	gap: 12px;
	align-items: center;
	max-width: 1280px;
	margin: 0 auto;
	visibility: hidden;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
	pointer-events: none;
}
.shiko-cart-b-mobile-cta.is-visible{
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: auto;
}
.shiko-cart-b-mobile-cta-totalbox{
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.shiko-cart-b-mobile-cta-totalbox .lbl{
	font-size: 11px;
	color: var(--cb-muted);
}
.shiko-cart-b-mobile-cta-totalbox .val{
	font-size: 16px;
	font-weight: 800;
	color: var(--cb-ink);
	white-space: nowrap;
}
.shiko-cart-b-mobile-cta-btn{
	flex: 1;
	max-width: 60%;
	margin-inline-start: auto;
	padding: 12px 16px;
	border-radius: 12px;
	background: linear-gradient(180deg, var(--shiko-accent, #E40303), var(--shiko-primary, #B7080A));
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 8px 18px rgba(228,3,3,.22);
}
@media (max-width: 480px){
	.shiko-cart-b{ padding: 16px 12px 80px; }
	.shiko-cart-b-hero{
		grid-template-columns: 1fr;
		padding: 18px 18px 16px;
	}
	.shiko-cart-b-hero-title{ font-size: 18px; }
	.shiko-cart-b-hero-total{
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		text-align: start;
		background: rgba(0,0,0,.18);
		border-radius: 10px;
		padding: 8px 12px;
	}
	.shiko-cart-b-hero-total .lbl{ display: inline; }
	.shiko-cart-b-hero-total .val{ display: inline; font-size: 18px; margin-top: 0; }
}

/* EMPTY --------------------------------------------------------- */
.shiko-cart-b-empty{
	max-width: 520px;
	margin: 60px auto;
	padding: 40px 24px;
	background: var(--cb-surface);
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-radius);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.shiko-cart-b-empty-icon{ color: var(--cb-muted); }
.shiko-cart-b-empty-heading{
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.005em;
	color: var(--cb-ink);
}
.shiko-cart-b-empty-sub{
	margin: 0;
	color: var(--cb-muted);
	font-size: 13.5px;
	max-width: 340px;
}
.shiko-cart-b-empty-btn{
	background: linear-gradient(180deg, var(--shiko-accent, #E40303), var(--shiko-primary, #B7080A));
	color: #fff;
	border: none;
	padding: 11px 24px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	box-shadow: 0 6px 14px rgba(228,3,3,.22);
}
.shiko-cart-b-empty-btn:hover,
.shiko-cart-b-empty-btn:focus{
	color: #fff;
	filter: brightness(1.05);
}

/* CCR phone-capture form — REMOVED on cart page per UX decision (2026-05-02).
 * Redundant with the WhatsApp save button below it; the form was confusing
 * shoppers and adding friction. The AC T1 capture path is preserved via the
 * WA button (clicking it reveals the user's WA number to the bot on first
 * inbound). Hide via CSS — keeps the hook intact for any other surface that
 * might still want it. */
body.shiko-cart-page-body .shiko-ccr-prompt{ display: none !important; }

/* WhatsApp save-cart button — official WhatsApp brand
 * Override the existing .shiko-cart-save-wa-btn to use WA brand green
 * (#25D366) instead of Shiko red, and swap the 💬 emoji glyph for an
 * inline SVG (rendered via mask-image so the SVG inherits color). */
body.shiko-cart-page-body .shiko-cart-save-wa{
	max-width: 100%;
	margin-block: 8px 0;
}
body.shiko-cart-page-body .shiko-cart-save-wa-btn{
	background: var(--cb-wa, #25D366) !important;
	color: #fff !important;
	box-shadow: 0 8px 18px rgba(37,211,102,.22);
	gap: 12px;
	border: none;
	transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
body.shiko-cart-page-body .shiko-cart-save-wa-btn:hover,
body.shiko-cart-page-body .shiko-cart-save-wa-btn:focus,
body.shiko-cart-page-body .shiko-cart-save-wa-btn:active,
body.shiko-cart-page-body .shiko-cart-save-wa-btn:visited{
	background: var(--cb-wa-hover, #1FAE56) !important;
	color: #fff !important;
	box-shadow: 0 12px 22px rgba(37,211,102,.32);
}
body.shiko-cart-page-body .shiko-cart-save-wa-btn:active{ transform: translateY(1px); }
body.shiko-cart-page-body .shiko-cart-save-wa-icon{
	display: inline-block;
	width: 22px;
	height: 22px;
	font-size: 0;
	line-height: 0;
	background-color: #fff;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16.003 4C9.382 4 4 9.382 4 16.002c0 2.115.554 4.181 1.605 6L4 28l6.124-1.598a11.94 11.94 0 0 0 5.879 1.5h.005C22.625 27.902 28 22.52 28 15.9c0-3.18-1.235-6.166-3.484-8.414A11.83 11.83 0 0 0 16.003 4Zm0 21.86h-.004a9.94 9.94 0 0 1-5.063-1.385l-.363-.215-3.633.949.97-3.535-.236-.363a9.91 9.91 0 0 1-1.516-5.31C6.158 10.49 10.572 6.082 16 6.082c2.65 0 5.14 1.034 7.012 2.91 1.873 1.875 2.906 4.366 2.905 7.014 0 5.43-4.422 9.854-9.914 9.854Zm5.434-7.41c-.297-.149-1.764-.87-2.038-.97-.273-.1-.473-.149-.672.149-.198.298-.77.97-.943 1.169-.174.198-.347.223-.644.075-.297-.149-1.255-.462-2.39-1.474-.883-.788-1.479-1.762-1.652-2.06-.174-.298-.018-.458.13-.607.134-.133.297-.347.446-.521.149-.174.198-.298.298-.497.099-.198.05-.372-.025-.521-.075-.149-.672-1.62-.92-2.218-.243-.583-.49-.504-.672-.513l-.572-.01a1.1 1.1 0 0 0-.795.372c-.273.298-1.043 1.018-1.043 2.482 0 1.464 1.067 2.881 1.215 3.08.149.198 2.1 3.205 5.085 4.495.71.306 1.264.488 1.696.624.713.227 1.362.195 1.875.118.572-.085 1.764-.72 2.013-1.416.248-.696.248-1.292.173-1.416-.075-.124-.272-.198-.57-.347Z'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16.003 4C9.382 4 4 9.382 4 16.002c0 2.115.554 4.181 1.605 6L4 28l6.124-1.598a11.94 11.94 0 0 0 5.879 1.5h.005C22.625 27.902 28 22.52 28 15.9c0-3.18-1.235-6.166-3.484-8.414A11.83 11.83 0 0 0 16.003 4Zm0 21.86h-.004a9.94 9.94 0 0 1-5.063-1.385l-.363-.215-3.633.949.97-3.535-.236-.363a9.91 9.91 0 0 1-1.516-5.31C6.158 10.49 10.572 6.082 16 6.082c2.65 0 5.14 1.034 7.012 2.91 1.873 1.875 2.906 4.366 2.905 7.014 0 5.43-4.422 9.854-9.914 9.854Zm5.434-7.41c-.297-.149-1.764-.87-2.038-.97-.273-.1-.473-.149-.672.149-.198.298-.77.97-.943 1.169-.174.198-.347.223-.644.075-.297-.149-1.255-.462-2.39-1.474-.883-.788-1.479-1.762-1.652-2.06-.174-.298-.018-.458.13-.607.134-.133.297-.347.446-.521.149-.174.198-.298.298-.497.099-.198.05-.372-.025-.521-.075-.149-.672-1.62-.92-2.218-.243-.583-.49-.504-.672-.513l-.572-.01a1.1 1.1 0 0 0-.795.372c-.273.298-1.043 1.018-1.043 2.482 0 1.464 1.067 2.881 1.215 3.08.149.198 2.1 3.205 5.085 4.495.71.306 1.264.488 1.696.624.713.227 1.362.195 1.875.118.572-.085 1.764-.72 2.013-1.416.248-.696.248-1.292.173-1.416-.075-.124-.272-.198-.57-.347Z'/></svg>");
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}
body.shiko-cart-page-body .shiko-cart-save-wa-icon::before{ content: ""; }

/* 3.5.14: hide the legacy 1-2-3 stepper on cart page only.
 * It's JS-injected by functions.php for the checkout flow; the new
 * Game-Library cart doesn't use a stepper (spec assumption "no stepper"). */
body.shiko-cart-page-body .shiko-checkout-steps{ display: none !important; }

/* 3.5.14: strike-through original price tone in dark mode.
 * --cb-muted alone is too dim against --cb-surface dark; bump opacity. */
[data-theme="dark"] .shiko-cart-b-card-price .strike{ opacity: .8; }

/* 3.5.14: coupon row inside Order Total panel. */
.shiko-cart-b-coupon{
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
.shiko-cart-b-coupon .input-text{
	flex: 1;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--cb-line);
	border-radius: 8px;
	background: var(--cb-soft);
	color: var(--cb-ink);
	font-size: 13px;
}
.shiko-cart-b-coupon .button{
	height: 38px;
	padding: 0 16px;
	border-radius: 8px;
	background: var(--cb-ink);
	color: var(--cb-surface);
	border: none;
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
	transition: filter .15s ease;
}
.shiko-cart-b-coupon .button:hover{ filter: brightness(1.1); }
[data-theme="dark"] .shiko-cart-b-coupon .button{
	background: #fff;
	color: #000;
}
.shiko-cart-b-promo-error{
	display: none;
	margin-top: 8px;
	padding: 8px 12px;
	background: var(--cb-warn-bg);
	color: var(--cb-warn-fg);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
}
.shiko-cart-b-promo-error.is-visible{ display: block; }

/* RTL ----------------------------------------------------------- */
.shiko-cart-b[dir="rtl"] .shiko-cart-b-card-cover::after{
	background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.6) 100%);
}
@media (min-width: 768px){
	.shiko-cart-b[dir="rtl"] .shiko-cart-b-card-cover::after{
		background: linear-gradient(-90deg, transparent 60%, rgba(0,0,0,.55) 100%);
	}
}

/* ─────────────────────────────────────────────────────────────────
 * 3.14.8 (CART-1): empty-cart recovery — dual CTA + help tile
 * ───────────────────────────────────────────────────────────────── */

/* Widen the empty-state card so the dual-CTA row + help tile have
   room. (Was max-width: 520px which squeezed buttons onto two rows.) */
.shiko-cart-b-empty {
	max-width: 720px;
}

/* Dual-CTA row: filled "Browse games" + outline "Ask WhatsApp". */
.shiko-cart-b-empty-ctas {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	align-items: center;
	margin-block-start: 4px;
}

/* The base .shiko-cart-b-empty-btn rule (line 658) remains the filled
   default; we only need an outline variant. */
.shiko-cart-b-empty-btn--outline {
	background: transparent;
	color: var(--shiko-text);
	border: 1px solid var(--shiko-border);
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.shiko-cart-b-empty-btn--outline svg {
	color: #25D366;
	flex-shrink: 0;
}
.shiko-cart-b-empty-btn--outline:hover,
.shiko-cart-b-empty-btn--outline:focus-visible {
	background: var(--shiko-bg-secondary);
	color: var(--shiko-text);
	border-color: var(--shiko-accent);
	filter: none;
	outline: none;
}

/* "Need help choosing?" tile — appears below the popular-products grid. */
.shiko-cart-empty-help {
	margin-block-start: 24px;
	padding: 18px 20px;
	background: var(--shiko-bg-secondary);
	border: 1px solid var(--shiko-border);
	border-radius: var(--shiko-radius);
	display: flex;
	flex-direction: row;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	text-align: start;
}
.shiko-cart-empty-help-copy {
	flex: 1 1 220px;
	min-width: 0;
}
.shiko-cart-empty-help-heading {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--shiko-text);
}
.shiko-cart-empty-help-body {
	margin: 0;
	font-size: 13px;
	color: var(--shiko-text-secondary);
	line-height: 1.5;
}
.shiko-cart-empty-help-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: #25D366;
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	flex-shrink: 0;
	transition: background 0.15s, box-shadow 0.15s;
	box-shadow: 0 4px 10px rgba(37,211,102,0.22);
}
.shiko-cart-empty-help-btn:hover,
.shiko-cart-empty-help-btn:focus-visible {
	background: #1FAE56;
	color: #fff;
	box-shadow: 0 6px 14px rgba(37,211,102,0.35);
	outline: none;
}
.shiko-cart-empty-help-btn svg {
	flex-shrink: 0;
}

/* Mobile: stack help tile vertically. */
@media (max-width: 600px) {
	.shiko-cart-empty-help {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.shiko-cart-empty-help-btn {
		justify-content: center;
	}
}

/* Reduce popular-products grid to exactly 3 cards inline (matches
   3-card spec; CART-1 reduced from up-to-6 to exactly 3). */
.shiko-cart-empty-pop-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-block-start: 12px;
}
@media (max-width: 600px) {
	.shiko-cart-empty-pop-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 380px) {
	.shiko-cart-empty-pop-grid {
		grid-template-columns: 1fr;
	}
}

/* 3.14.9 (CHK-1): trust strip — passive reassurance band shown below
   the help tile on the empty-cart surface (which is also the empty-
   checkout surface, since /secure-checkout/ → /cart/ when empty). */
.shiko-cart-empty-trust {
	margin-block-start: 16px;
	padding: 12px 16px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	border-block-start: 1px solid var(--shiko-border);
}
.shiko-cart-empty-trust-logos {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.shiko-cart-empty-trust-logos .shiko-payment-logo {
	height: 20px;
	width: auto;
	opacity: 0.85;
}
.shiko-cart-empty-trust-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--shiko-text-secondary);
	letter-spacing: 0.02em;
}
.shiko-cart-empty-trust-label svg {
	flex-shrink: 0;
	color: var(--shiko-success, #8A6500);
}
@media (max-width: 600px) {
	.shiko-cart-empty-trust {
		flex-direction: column;
		gap: 10px;
	}
}