/* [xo_products] */
.xo-shop { --xo-accent: var(--xof-accent, #1f1f1f); position: relative; }
.xo-shop.is-loading > *:not(.xo-shop-bar) { opacity: .45; transition: opacity .15s; pointer-events: none; }
.xo-shop-bar { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; }
.xo-tags { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.xo-tag {
	display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
	border: 1.5px solid #ced4da; background: #fff; color: #1f2328; font-weight: 600; font-size: .92rem; text-decoration: none !important; white-space: nowrap;
}
.xo-tag span { color: #6c757d; font-weight: 500; font-size: .82rem; }
.xo-tag:hover { border-color: #868e96; }
.xo-tag.is-on { background: var(--xo-accent); border-color: var(--xo-accent); color: #fff; }
.xo-tag.is-on span { color: rgba(255,255,255,.8); }
.xo-tag:focus-visible, .xo-pg:focus-visible, .xo-sort select:focus-visible { outline: 3px solid #4dabf7; outline-offset: 2px; }
.xo-sort { flex: none; margin: 0; }
.xo-sort label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: .9rem; }
.xo-sort select { min-height: 40px; border: 1.5px solid #ced4da; border-radius: 10px; padding: 0 10px; background: #fff; font: inherit; font-weight: 500; }
.xo-shop-count { margin: 0 0 12px; color: #6c757d; font-size: .9rem; outline: none; }
.xo-shop-empty { padding: 32px 0; text-align: center; color: #6c757d; }
.xo-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 28px 0 8px; }
.xo-pg {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px;
	border: 1.5px solid #ced4da; background: #fff; color: #1f2328; font-weight: 700; text-decoration: none !important;
}
.xo-pg:hover { border-color: #868e96; }
.xo-pg.is-on { background: var(--xo-accent); border-color: var(--xo-accent); color: #fff; }
.xo-pg.is-gap { border: 0; background: none; min-width: 20px; padding: 0; color: #6c757d; }
.xo-pg.is-off { opacity: .4; }
@media (max-width: 700px) {
	.xo-shop-bar { flex-direction: column; gap: 10px; }
	.xo-tags { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.xo-tags::-webkit-scrollbar { display: none; }
	.xo-sort, .xo-sort label, .xo-sort select { width: 100%; }
	.xo-pages { gap: 4px; }
	.xo-pg { min-width: 40px; height: 42px; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .xo-shop.is-loading > * { transition: none; } }

/* Type tiles: Tequila · Vodka · Whiskey… */
.xo-types { margin: 0 0 18px; }
.xo-types ul { list-style: none; margin: 0; padding: 4px 2px 8px; display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.xo-types li { margin: 0; scroll-snap-align: start; }
.xo-type { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 10px; border-radius: 14px; color: #1f2328; text-decoration: none !important; text-align: center; transition: background .15s; }
.xo-type:hover { background: #f4f5f7; }
.xo-type-img { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 999px; background: #f4f5f7; overflow: hidden; border: 2.5px solid transparent; box-sizing: border-box; transition: border-color .15s, transform .15s; }
.xo-type:hover .xo-type-img { transform: translateY(-2px); }
.xo-type-img img { width: 78%; height: 78%; object-fit: contain; margin: 0 !important; mix-blend-mode: multiply; }
.xo-type-ph { font-size: 1.8rem; font-weight: 800; color: #868e96; }
.xo-type-name { font-weight: 700; font-size: .9rem; line-height: 1.2; }
.xo-type-n { font-size: .78rem; color: #6c757d; margin-top: -4px; }
.xo-type.is-on .xo-type-img { border-color: var(--xo-accent); background: #fff; }
.xo-type.is-on .xo-type-name { color: var(--xo-accent); }
.xo-type:focus-visible { outline: 3px solid #4dabf7; outline-offset: 2px; }
@media (min-width: 1000px) { .xo-types ul { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); overflow: visible; } }
@media (max-width: 700px) { .xo-types ul { grid-auto-columns: 92px; gap: 6px; } .xo-type-img { width: 72px; height: 72px; } .xo-type-name { font-size: .82rem; } }

/* Product grid — our own columns, so it works with any theme (block themes don't always load WooCommerce's column styles). */
.xo-shop ul.products {
	display: grid !important; grid-template-columns: repeat(var(--xo-cols, 4), minmax(0, 1fr)); gap: 24px 18px;
	list-style: none !important; margin: 0 !important; padding: 0 !important; width: auto !important;
}
.xo-shop ul.products::before, .xo-shop ul.products::after { content: none !important; display: none !important; }
.xo-shop ul.products li.product {
	width: auto !important; max-width: none !important; float: none !important; clear: none !important; margin: 0 !important; padding: 0 !important;
	display: flex !important; flex-direction: column; min-width: 0; text-align: left;
}
.xo-shop ul.products li.product > a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.xo-shop ul.products li.product img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: contain !important; margin: 0 0 10px !important; background: #fff; }
.xo-shop ul.products li.product .woocommerce-loop-product__title { font-size: 1rem !important; line-height: 1.3; margin: 0 0 6px !important; padding: 0 !important; }
.xo-shop ul.products li.product .price { display: block; margin: 0 0 10px !important; font-weight: 700; }
.xo-shop ul.products li.product .button, .xo-shop ul.products li.product .xo-qty { margin-top: auto !important; }
@media (max-width: 1100px) { .xo-shop ul.products { grid-template-columns: repeat(min(var(--xo-cols, 4), 4), minmax(0, 1fr)); } }
@media (max-width: 860px)  { .xo-shop ul.products { grid-template-columns: repeat(min(var(--xo-cols, 4), 3), minmax(0, 1fr)); gap: 20px 14px; } }
@media (max-width: 600px)  { .xo-shop ul.products { grid-template-columns: repeat(min(var(--xo-cols, 4), 2), minmax(0, 1fr)); gap: 18px 12px; } }