/* ==========================================================================
   Ziip Stick – block styles (loaded on the site AND in the editor)
   Colours/fonts come from theme.json presets, so changing them in
   Appearance → Editor → Styles updates everything below.
   ========================================================================== */

:root {
	--zs-radius: 12px;
	--zs-shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
	--zs-star: var(--wp--preset--color--star);
}

body { -webkit-font-smoothing: antialiased; }
img { height: auto; }

/* ---------- Buttons (block style variations) ---------- */
.wp-block-button.is-style-dark .wp-block-button__link {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.wp-block-button.is-style-dark .wp-block-button__link:hover { background: #333; }

.wp-block-button.is-style-pill .wp-block-button__link {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 0.45rem 1.1rem;
	font-size: 0.6875rem;
}
.wp-block-button.is-style-pill .wp-block-button__link:hover { background: var(--wp--preset--color--primary); }

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1.5px solid currentColor;
	border-radius: 2px;
	letter-spacing: 0.25em;
	font-size: 0.6875rem;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.15); }

/* ---------- Cards / headings / text styles ---------- */
.wp-block-group.is-style-card {
	border-radius: var(--zs-radius);
	box-shadow: var(--zs-shadow);
}
.wp-block-heading.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
p.is-style-stars {
	color: var(--zs-star);
	letter-spacing: 0.15em;
	font-size: 1.125rem;
	line-height: 1;
}
.wp-block-image.is-style-rounded img { border-radius: 18px; }

/* Teal "swoosh" underline used in the hero (a Separator block) */
.wp-block-separator.zs-swoosh {
	width: 170px;
	max-width: 60%;
	height: 14px !important;
	border: 0 !important;
	margin-left: 0 !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 14'%3E%3Cpath d='M2 10C40 2 90 1 168 7' stroke='black' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 14'%3E%3Cpath d='M2 10C40 2 90 1 168 7' stroke='black' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ---------- FAQ (Details block style) ---------- */
.wp-block-details.is-style-faq summary,
.wp-block-details.zs-ask summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-weight: 500;
}
.wp-block-details.is-style-faq summary::-webkit-details-marker,
.wp-block-details.zs-ask summary::-webkit-details-marker { display: none; }
.wp-block-details.is-style-faq summary::after {
	content: "+";
	font-size: 1.35rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	transition: transform 0.2s;
}
.wp-block-details.is-style-faq[open] summary::after { transform: rotate(45deg); }
.wp-block-details.is-style-faq > :not(summary) { margin-top: 0.75rem; }

.wp-block-details.zs-ask summary {
	justify-content: center;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.75rem;
	position: relative;
}
.wp-block-details.zs-ask summary::after {
	content: "";
	position: absolute;
	right: 0;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-3px);
}
.wp-block-details.zs-ask[open] summary::after { transform: rotate(-135deg); }

/* ---------- Product cards ---------- */
.wc-block-product-template .wc-block-components-product-image,
.wc-block-product-template .wp-block-woocommerce-product-image {
	background: var(--wp--preset--color--surface);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 0.6rem;
}
.wc-block-product-template .wc-block-components-product-image img { mix-blend-mode: multiply; }
.zs-card-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.zs-card-title a:hover { color: var(--wp--preset--color--primary); }
.wc-block-components-product-rating__stars,
.wc-block-components-product-rating .star-rating,
.woocommerce .star-rating,
.wc-block-components-review-list-item__rating__stars,
.wc-block-product-review-rating__stars { color: var(--zs-star) !important; }
.wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--contrast) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 3px !important;
	font-size: 0.625rem !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.wc-block-components-product-price { font-weight: 500; }

/* Horizontal swipe row ("Swipe row" style on Product Collection) */
.is-style-slider .wc-block-product-template {
	display: grid !important;
	grid-auto-flow: column;
	grid-template-columns: none !important;
	grid-auto-columns: calc((100% - 3 * 1.25rem) / 4);
	gap: 1.25rem !important;
	overflow-x: auto !important;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 0.25rem;
}
.wp-block-woocommerce-product-collection.is-style-slider { overflow-x: clip; overflow-clip-margin: 24px; }
.is-style-slider .wc-block-product-template::-webkit-scrollbar { display: none; }
.is-style-slider .wc-block-product-template > li { scroll-snap-align: start; width: auto !important; margin: 0 !important; }
@media (max-width: 900px) {
	.is-style-slider .wc-block-product-template { grid-auto-columns: calc((100% - 1.25rem) / 2.3); }
}

/* Category / flavor tiles */
.zs-tile { overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.zs-tile:hover { transform: translateY(-3px); box-shadow: var(--zs-shadow); }
.zs-tile .wp-block-image { margin: 0; }
.zs-tile .wp-block-image img { width: 100%; display: block; }
.zs-tile h3 a { color: inherit; text-decoration: none; }
.zs-arrow {
	width: 32px; height: 32px; border-radius: 50%;
	display: grid; place-items: center;
	border: 1px solid currentColor; margin: 0;
	font-size: 0.9rem;
}

/* Zig-zag image/text rows */
@media (min-width: 782px) {
	.wp-block-columns.zs-zigzag.is-flipped { flex-direction: row-reverse; }
}

/* ---------- Single product ---------- */
.zs-product-summary .wp-block-post-title { margin-top: 0.25rem; }
.zs-product-summary .wc-block-add-to-cart-form form.cart,
.zs-product-summary form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--contrast);
}
.zs-product-summary form.cart .quantity input.qty { height: 48px; width: 72px; border: 1px solid var(--wp--preset--color--line); border-radius: 4px; }
.zs-product-summary form.cart .single_add_to_cart_button,
.zs-product-summary form.cart button[type="submit"] {
	flex: 1 1 60%;
	min-height: 48px;
	background: var(--wp--preset--color--primary) !important;
	color: #fff !important;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}
.zs-bulk-tier { position: relative; padding-bottom: 0 !important; }
.zs-bulk-tier .wp-block-buttons { margin-bottom: -0.7rem; }
.zs-bulk-btn .wp-block-button__link {
	padding: 0.3rem 1.4rem !important;
	font-size: 0.625rem !important;
	border-radius: 3px;
}
.zs-review .wc-block-components-product-rating__stars { margin: 0; }

/* ---------- Footer ---------- */
.zs-footer .wp-block-navigation a:hover { text-decoration: underline; }
.zs-footer .zs-legal { opacity: 0.9; }
.zs-footer .wc-block-payment-method-icons { justify-content: flex-end; }

/* Shop sidebar */
.zs-shop-sidebar .wc-block-product-categories-list { list-style: none; padding: 0; }
.zs-shop-sidebar .wc-block-product-categories-list li { margin: 0.35rem 0; }
.zs-shop-sidebar a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.zs-shop-sidebar a:hover { color: var(--wp--preset--color--primary); }
@media (max-width: 781px) {
	.zs-shop-sidebar { display: none; }
}

/* Header icons */
.zs-header-icons .wp-block-search__button { background: transparent; color: var(--wp--preset--color--contrast); border: 0; padding: 0.25rem; }
.zs-header-icons svg { width: 26px; height: 26px; }
.zs-site-title { margin: 0; }
.zs-site-title a { text-decoration: none; }
.wp-block-site-logo + .zs-site-title { display: none; }

/* Sorting dropdown */
.wc-block-catalog-sorting select, .woocommerce-ordering select {
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	font: inherit;
	font-size: 0.875rem;
	background-color: var(--wp--preset--color--base);
}

/* Keep wide content inside full-width covers aligned with the rest of the page */
.wp-block-cover.alignfull > .wp-block-cover__inner-container > .alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
}
.wp-block-cover.alignfull { padding-left: var(--wp--style--root--padding-left); padding-right: var(--wp--style--root--padding-right); }

/* Announcement bar (single line; animation is added on the live site) */
.zs-announcement { overflow: hidden; }
.zs-announcement .zs-marquee > p { white-space: nowrap; margin: 0; }
.zs-tile { padding: 0 !important; }
.zs-tile > .wp-block-image { align-self: stretch; width: 100%; }
.zs-tile > .wp-block-image a { display: block; }