/* [xo_row] product rows */
.xo-row { --row-accent: var(--xof-accent, #1f1f1f); margin: 36px 0; font-family: var(--xo-font-body, inherit); box-sizing: border-box; --row-n: 5; }
/* Break out of the theme's narrow text column (100vw-32px keeps a 16px gutter on phones). */
.xo-row.is-wide, .xo-row.is-full { width: min(var(--row-max), calc(100vw - 32px)) !important; max-width: none !important; margin-left: calc(50% - min(var(--row-max), calc(100vw - 32px)) / 2) !important; margin-right: 0 !important; }
.xo-row.is-wide { --row-max: 1320px; }
.xo-row.is-full { --row-max: 100vw; }
@media (min-width: 1200px) { .xo-row.is-wide, .xo-row.is-full { --row-n: 6; } }
@media (min-width: 1700px) { .xo-row.is-full { --row-n: 7; } }
.xo-row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.xo-row-head > div:first-child { min-width: 0; flex: 1 1 200px; }
.xo-row-title { margin: 0; font-family: var(--xo-font-head, inherit); font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.15; }
.xo-row-title::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--row-accent); }
.xo-row-sub { margin: 8px 0 0; color: #5f6670; }
.xo-row-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.xo-row-all { font-weight: 700; color: var(--row-accent); text-decoration: none; margin-right: 6px; white-space: nowrap; }
.xo-row-all:hover { text-decoration: underline; }
.xo-row-arrow { appearance: none; width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid #dfe3e8; background: #fff; color: #1f2328; font-size: 1.5rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.xo-row-arrow:hover:not(:disabled) { border-color: #868e96; }
.xo-row-arrow:disabled { opacity: .35; cursor: default; }
.xo-row-track {
	list-style: none; margin: 0; padding: 4px 2px 14px; display: grid; grid-auto-flow: column; grid-auto-columns: max(190px, calc((100% - (var(--row-n) - 1) * 16px) / var(--row-n))); gap: 16px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.xo-row-track::-webkit-scrollbar { height: 6px; } .xo-row-track::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 6px; }
.xo-card { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0 !important; padding: 12px; border: 1px solid #e9ecef; border-radius: 14px; background: #fff; scroll-snap-align: start; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .15s, transform .15s; width: auto !important; float: none !important; }
.xo-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.09); transform: translateY(-2px); }
.xo-card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.xo-card-imgwrap { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; margin-bottom: 10px; border-radius: 10px; background: #fff; overflow: hidden; padding: 4px; box-sizing: border-box; }
.xo-card-imgwrap img, .xo-card-img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center; margin: 0 !important; border-radius: 0 !important; }
.xo-card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; font-weight: 600; font-size: .95rem; line-height: 1.3; color: #1f2328; }
.xo-card-price { display: block; margin: 6px 0 0; font-weight: 700; font-size: 1.05rem; color: #1f2328; }
.xo-card-price del { color: #8a929a; font-weight: 400; font-size: .9em; margin-right: 4px; }
.xo-card-price ins { text-decoration: none; color: #c92a2a; }
.xo-card-badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 9px; border-radius: 999px; background: #c92a2a; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.xo-card-badge.is-pick { background: var(--row-accent); }
.xo-card-buy { margin-top: 10px; }
.xo-card-buy .button, .xo-card-buy .xo-qty {
	display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; height: 44px; margin: 0 !important; padding: 0 12px !important;
	border-radius: 999px !important; border: 2px solid var(--row-accent) !important; background: var(--row-accent) !important; color: #fff !important;
	font-weight: 700 !important; font-size: .9rem !important; line-height: 1 !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap; box-sizing: border-box; overflow: hidden;
}
.xo-card { container-type: inline-size; }
.xo-card-buy .button:not(.add_to_cart_button) { background: #fff !important; color: var(--row-accent) !important; }
.xo-card-buy .button.add_to_cart_button::before { content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.22); font-weight: 800; }
.xo-card-buy .button.xo-adding::before { content: none; }
.xo-card-buy .button[hidden], .xo-card-buy [data-xo-for][hidden] { display: none !important; }
/* Narrow cards: smaller label, then drop the "+" circle (these come after the base rules so they win). */
@container (max-width: 190px) {
	.xo-card-buy .button { font-size: .8rem !important; padding: 0 6px !important; gap: 5px; letter-spacing: 0 !important; }
	.xo-card-buy .button.add_to_cart_button::before { width: 17px; height: 17px; font-size: .85rem; }
}
@container (max-width: 165px) {
	.xo-card-buy .button.add_to_cart_button::before { content: none; }
	.xo-card-buy .button { font-size: .78rem !important; padding: 0 4px !important; }
}
.xo-card-buy .xo-qty { padding: 3px !important; justify-content: space-between; }
.xo-card-buy .added_to_cart { display: none !important; }
.xo-card a:focus-visible, .xo-row-arrow:focus-visible, .xo-row-all:focus-visible { outline: 3px solid #4dabf7; outline-offset: 2px; }
.xo-row-empty { padding: 14px 16px; border: 1px dashed #ced4da; border-radius: 10px; color: #5f6670; }
@media (max-width: 1100px) { .xo-row-track { grid-auto-columns: max(180px, calc((100% - 3 * 14px) / 4)); gap: 14px; } }
@media (max-width: 800px) { .xo-row-track { grid-auto-columns: max(150px, calc((100% - 2 * 12px) / 2.6)); gap: 12px; } .xo-row-arrow { display: none; } }
@media (max-width: 480px) { .xo-row { margin: 28px 0; } .xo-row-track { grid-auto-columns: max(150px, 44%); } .xo-card { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { .xo-row-track { scroll-behavior: auto; } .xo-card { transition: none; } .xo-card:hover { transform: none; } }

/* Rows under the cart */
.xo-cart-rows { clear: both; margin-top: 40px; padding-top: 8px; border-top: 1px solid #e6eaee; }
.xo-cart-rows .xo-row { margin: 28px 0 36px; }
.xo-cart-toast { position: fixed; left: 50%; bottom: 24px; z-index: 99999; transform: translateX(-50%); padding: 12px 20px; border-radius: 999px; background: #1f2328; color: #fff; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: opacity .4s, transform .4s; }
.xo-cart-toast.is-out { opacity: 0; transform: translate(-50%, 10px); }
@media (prefers-reduced-motion: reduce) { .xo-cart-toast { transition: none; } }