/* ==========================================================================
   SAYSSY - compatibility layer
   Loaded last. Neutralises Astra and WooCommerce defaults that fight the
   Sayssy design system. High specificity is deliberate.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Icons
   Every Sayssy icon is a solid filled path, so it survives a parent theme
   declaring either fill or stroke on svg.
   -------------------------------------------------------------------------- */

.sy svg.sy-i,
svg.sy-i {
	fill: currentColor !important;
	stroke: none !important;
	display: block;
	flex: 0 0 auto;
	max-width: none !important;
	width: auto;
	height: auto;
	box-shadow: none !important;
	border-radius: 0 !important;
	vertical-align: middle;
	pointer-events: none;
}

.sy-i path, .sy-i rect, .sy-i circle {
	fill: currentColor !important;
	stroke: none !important;
}

/* --------------------------------------------------------------------------
   2. Buttons: kill every theme hover, focus and active background
   Astra paints buttons blue on :focus, which was flooding the filter headers.
   -------------------------------------------------------------------------- */

.sy-acc__head, .sy-acc__head:hover, .sy-acc__head:focus, .sy-acc__head:active,
.sy-tabs__tab, .sy-tabs__tab:hover, .sy-tabs__tab:focus, .sy-tabs__tab:active,
.sy-nav__toggle, .sy-nav__toggle:hover, .sy-nav__toggle:focus, .sy-nav__toggle:active,
.sy-clear, .sy-clear:hover, .sy-clear:focus, .sy-clear:active,
.sy-sheet__close, .sy-sheet__close:hover, .sy-sheet__close:focus,
.sy-drawer__close, .sy-drawer__close:hover, .sy-drawer__close:focus,
.sy-searchov__back, .sy-searchov__back:hover, .sy-searchov__back:focus,
.sy-searchov__clear, .sy-searchov__clear:hover, .sy-searchov__clear:focus,
.sy-ditem__x, .sy-ditem__x:hover, .sy-ditem__x:focus,
.sy-bnav__i, .sy-bnav__i:hover, .sy-bnav__i:focus,
.sy-tagchip button, .sy-tagchip button:hover, .sy-tagchip button:focus {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border-color: transparent;
	text-decoration: none !important;
	outline: 0;
}

.sy-acc__head:hover, .sy-acc__head:focus { color: var(--sy-orange) !important; }
.sy-tabs__tab.is-active { background: #fff !important; }
.sy-searchov__back { border: 1px solid var(--sy-line) !important; }

.sy-pill, .sy-pill:hover, .sy-pill:focus,
.sy-mhead__search, .sy-mhead__search:hover, .sy-mhead__search:focus {
	background-image: none !important;
	box-shadow: none !important;
	outline: 0;
}
.sy-pill:focus-visible,
.sy-acc__head:focus-visible,
.sy-tabs__tab:focus-visible,
.sy-nav__toggle:focus-visible { box-shadow: 0 0 0 3px rgba(242,101,34,.22) !important; }

.sy-wish, .sy-wish:hover, .sy-wish:focus {
	background: rgba(255,255,255,.94) !important;
	background-image: none !important;
	padding: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: 34px !important;
	height: 34px !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: 0 1px 5px rgba(20,20,26,.16) !important;
	line-height: 0 !important;
	outline: 0;
}

.sy-step__b, .sy-step__b:focus {
	padding: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: 27px !important;
	height: 27px !important;
	line-height: 0 !important;
	box-shadow: none !important;
	outline: 0;
}
.sy-dstep button, .sy-dstep button:focus {
	padding: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: 26px !important;
	height: 26px !important;
	line-height: 0 !important;
	box-shadow: none !important;
}
.sy-add__btn, .sy-add__btn:focus {
	padding: 8px 14px !important;
	min-height: 0 !important;
	line-height: 1.15 !important;
	box-shadow: 0 2px 10px rgba(20,20,26,.28) !important;
	outline: 0;
}

.sy-btn, .sy-btn:hover, .sy-btn:focus { background-image: none !important; box-shadow: none !important; outline: 0; }

/* --------------------------------------------------------------------------
   3. Product images
   WooCommerce ships li.product a img { height:auto; margin:0 0 1em }.
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product .sy-card__img,
ul.products li.product .sy-card__img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
	overflow: hidden;
}

.woocommerce ul.products li.product .sy-card__img img,
ul.products li.product .sy-card__img img,
.sy-card__media img,
.sy-ditem__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center top !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	border: 0 !important;
	max-width: none !important;
	min-height: 0 !important;
	opacity: 1 !important;
	aspect-ratio: auto !important;
	transition: transform .55s cubic-bezier(.2,.8,.3,1) !important;
}

.woocommerce ul.products li.product .sy-card__media,
ul.products li.product .sy-card__media {
	aspect-ratio: 3 / 4 !important;
	overflow: hidden;
	border-radius: var(--sy-r);
	background: var(--sy-bg-2);
	position: relative;
	display: block;
	line-height: 0;
	width: 100%;
}

/* --------------------------------------------------------------------------
   4. Product list reset
   -------------------------------------------------------------------------- */

.woocommerce ul.products.sy-grid,
.woocommerce-page ul.products.sy-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 38px 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	float: none !important;
	clear: both;
}
.woocommerce ul.products.sy-grid::before,
.woocommerce ul.products.sy-grid::after { content: none !important; display: none !important; }

.woocommerce ul.products.sy-grid li.product,
.woocommerce-page ul.products.sy-grid li.product {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	text-align: left !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	list-style: none !important;
}
.woocommerce ul.products.sy-grid li.product::before,
.woocommerce ul.products.sy-grid li.product::after,
.woocommerce ul.products.sy-grid li.product::marker { content: none !important; }

.sy-card > .woocommerce-loop-product__title,
.sy-card .woocommerce-loop-product__link,
.sy-card > .price,
.sy-card > .star-rating,
.sy-card > .onsale,
.sy-card > .button,
.sy-card > .added_to_cart,
.sy-card .ast-shop-product-out-of-stock,
.sy-card .astra-shop-summary-wrap { display: none !important; }

/* --------------------------------------------------------------------------
   5. Lists and typography inside our components
   -------------------------------------------------------------------------- */

.sy-checklist, .sy-checklist li,
.sy-radiolist, .sy-radiolist li,
.sy-foot__col ul, .sy-foot__col li,
.sy-dlist, .sy-dlist li,
.sy-nav, .sy-mega__grid {
	list-style: none !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}
.sy-checklist li::marker, .sy-foot__col li::marker, .sy-dlist li::marker { content: none !important; }

.sy-card__name a, .sy-card__img, .sy-nav a, .sy-icon, .sy-bnav__i,
.sy-cartbar, .sy-crumbs a, .sy-foot a, .sy-mega__grid a, .sy-ditem__name {
	text-decoration: none !important;
	box-shadow: none !important;
}

.sy-card__body, .sy-card__body p { text-align: left !important; }
.sy-card h3, .sy-shop h1, .sy-shop h2, .sy-sheet h2, .sy-foot h3, .sy-drawer h2 { margin-top: 0 !important; }
/* Do NOT blanket-reset paragraphs inside the card. The kicker, colour, size
   pill and set line are all <p>, and `.sy-card p` (0,1,1) outranks their own
   class rules (0,1,0), which silently flattened the card spacing. */
.sy-foot p, .sy-drawer p, .sy-rail p { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   6. Astra containers, header and footer
   -------------------------------------------------------------------------- */

body.sy-shop-page #content > .ast-container,
body.sy-shop-page .ast-container,
body.sy-shop-page .ast-woocommerce-container,
body.sy-shop-page #primary,
body.sy-shop-page .site-main,
body.sy-shop-page .site-content > .ast-container {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	display: block !important;
}

body.sy-shop-page .ast-separate-container .site-main,
body.sy-shop-page .ast-separate-container #primary {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

body.sy-shop-page #secondary,
body.sy-shop-page .widget-area,
body.sy-shop-page .ast-woocommerce-shop-page-title,
body.sy-shop-page .ast-archive-description,
body.sy-shop-page .woocommerce-products-header,
body.sy-shop-page .woocommerce-breadcrumb,
body.sy-shop-page .woocommerce-result-count,
body.sy-shop-page .woocommerce-ordering,
body.sy-shop-page .ast-shop-toolbar,
body.sy-shop-page .astra-shop-filter-button,
body.sy-shop-page nav.woocommerce-pagination { display: none !important; }

body.sy-shop-page .sy-pagination nav.woocommerce-pagination { display: block !important; }

/* Astra header and footer chrome */
.ast-primary-header-bar,
.ast-below-header-bar,
.ast-mobile-header-wrap,
#ast-mobile-header,
.ast-header-break-point .main-header-bar-wrap,
.site-header .main-header-bar,
.site-footer .ast-small-footer,
.site-footer .ast-footer-copyright,
footer.site-footer .ast-small-footer-wrap,
.ast-small-footer,
#colophon .ast-footer-overlay { display: none !important; }

#colophon, footer.site-footer {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Astra scroll to top button in brand colour */
#ast-scroll-top {
	background: var(--sy-ink) !important;
	color: #fff !important;
	border-radius: 8px !important;
}

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top-color: var(--sy-orange) !important;
	border-radius: var(--sy-r-sm);
	font-size: 14px;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--sy-orange) !important; }

/* --------------------------------------------------------------------------
   7. Form controls inside our panels
   -------------------------------------------------------------------------- */

.sy-fsearch, .sy-range__row input, .sy-hsearch input, .sy-searchov__field input {
	box-shadow: none !important;
	background-image: none !important;
	min-height: 0 !important;
}
.sy-fsearch:focus, .sy-range__row input:focus {
	border-color: var(--sy-orange) !important;
	box-shadow: 0 0 0 3px rgba(242,101,34,.14) !important;
}

/* --------------------------------------------------------------------------
   8. Responsive grid, repeated to beat Woo's own media queries
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
	.woocommerce ul.products.sy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
	.woocommerce ul.products.sy-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 26px 14px !important;
	}
	.sy-wish, .sy-wish:hover { width: 30px !important; height: 30px !important; }
}
@media (max-width: 380px) {
	.woocommerce ul.products.sy-grid { gap: 22px 10px !important; }
}

/* --------------------------------------------------------------------------
   9. Astra footer builder rows
   Astra 4 renders empty builder rows below the footer, which showed up as a
   blank white band under the Sayssy footer.
   -------------------------------------------------------------------------- */

.site-below-footer-wrap,
.site-above-footer-wrap,
.site-primary-footer-wrap,
.ast-builder-grid-row-container,
.site-footer-focus-item,
.ast-footer-row-stack,
.ast-footer-row-tablet-stack,
.ast-footer-row-mobile-stack,
.ast-builder-footer-grid-columns,
#astra-footer-menu,
.footer-widget-area,
.ast-footer-copyright,
.ast-small-footer { display: none !important; }

#colophon,
footer.site-footer,
.site-footer > * {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
}

/* Our own footer must stay visible inside that container. */
#colophon .sy-foot,
footer.site-footer .sy-foot,
.sy-foot { display: block !important; }

/* Astra scroll to top: keep it clear of the floating contact buttons. */
#ast-scroll-top {
	background: var(--sy-ink) !important;
	color: #fff !important;
	border-radius: 50% !important;
	right: 18px !important;
	bottom: calc(var(--sy-bnav-h) + 18px) !important;
	width: 42px !important;
	height: 42px !important;
	line-height: 42px !important;
	z-index: 590 !important;
}

/* Floating buttons and WhatsApp icon colour must survive theme link styles. */
.sy-fab__b, .sy-fab__b:hover, .sy-fab__b:focus,
.sy-wa, .sy-wa:hover, .sy-wa:focus {
	text-decoration: none !important;
	box-shadow: 0 4px 16px rgba(20,20,26,.24) !important;
}
.sy-wa { box-shadow: 0 2px 8px rgba(20,20,26,.22) !important; }

@media (max-width: 900px) {
	.sy-fab { right: 14px; bottom: calc(var(--sy-bnav-h) + 84px); }
	.sy-fab__b { width: 46px; height: 46px; }
	.sy-fab__b:hover { width: 46px; border-radius: 50%; }
	.sy-fab__b:hover span { max-width: 0; opacity: 0; margin-left: 0; }
	#ast-scroll-top { display: none !important; }
	.sy-wa { width: 30px !important; height: 30px !important; left: 8px; bottom: 8px; }
}

/* --------------------------------------------------------------------------
   10. Single product: add to cart row and the pack table
   WooCommerce floats .quantity and the add to cart button, and Astra applies
   its own table borders. Both are neutralised here.
   -------------------------------------------------------------------------- */

.woocommerce div.product form.cart,
.woocommerce-page div.product form.cart {
	display: flex !important;
	align-items: stretch !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after { content: none !important; display: none !important; }

.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .sy-wa-btn {
	float: none !important;
	margin: 0 !important;
	vertical-align: top;
}

.woocommerce div.product form.cart .sy-wa-btn {
	width: auto !important;
	max-width: none !important;
	height: 52px !important;
	padding: 0 20px !important;
	line-height: 1 !important;
	box-shadow: none !important;
}
.woocommerce div.product form.cart .sy-wa-btn .sy-i { width: 19px !important; height: 19px !important; }

.woocommerce div.product .sy-packnote table.sy-packtable,
.sy-packnote table.sy-packtable {
	border: 0 !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}
.woocommerce div.product .sy-packnote table.sy-packtable th,
.woocommerce div.product .sy-packnote table.sy-packtable td,
.sy-packnote table.sy-packtable th,
.sy-packnote table.sy-packtable td {
	border-left: 0 !important;
	border-right: 0 !important;
	border-top: 0 !important;
	background: transparent !important;
}
.sy-packnote table.sy-packtable tfoot th,
.sy-packnote table.sy-packtable tfoot td { border-top: 2px solid rgba(165,71,26,.28) !important; }

/* Product card body: no theme margins on the text stack. */
.sy-card__body > * { margin-left: 0 !important; margin-right: 0 !important; }
.sy-card__body > *:last-child { margin-bottom: 0 !important; }

/* Card text rhythm. Declared here so nothing earlier can flatten it. */
.sy-card .sy-card__kick   { margin: 0 0 5px !important;  line-height: 1.1; }
.sy-card .sy-card__name   { margin: 0 0 5px !important;  line-height: 1.3; }
.sy-card .sy-card__colour { margin: 0 0 7px !important;  line-height: 1.2; }
.sy-card .sy-card__sizes  { margin: 0 0 9px !important;  line-height: 1.1; }
.sy-card .sy-card__price  { margin: 0 !important;        line-height: 1.1; }
.sy-card .sy-card__set    { margin: 4px 0 0 !important;  line-height: 1.2; }
.sy-card .sy-card__body   { padding-top: 12px !important; }

@media (max-width: 900px) {
	.sy-card .sy-card__kick   { margin-bottom: 4px !important; }
	.sy-card .sy-card__name   { margin-bottom: 4px !important; }
	.sy-card .sy-card__colour { margin-bottom: 6px !important; }
	.sy-card .sy-card__sizes  { margin-bottom: 8px !important; }
	.sy-card .sy-card__set    { margin-top: 4px !important; }
	.sy-card .sy-card__body   { padding-top: 10px !important; }
}

@media (max-width: 600px) {
	.woocommerce div.product form.cart .sy-wa-btn { width: 100% !important; }
}

/* --------------------------------------------------------------------------
   11. Disabled clear buttons and the drawer empty state
   -------------------------------------------------------------------------- */

.sy-clear:disabled,
.sy-clear[disabled] {
	background: none !important;
	box-shadow: none !important;
	pointer-events: none;
}
.sy-btn.sy-clear:disabled { background: var(--sy-bg-2) !important; }

.sy-drawer__empty .sy-i {
	display: block !important;
	margin: 0 auto 16px !important;
	fill: currentColor !important;
}
.sy-drawer__empty .sy-btn { display: inline-flex !important; }

/* Search results use the same grid, so keep Astra out of the way there too. */
body.sy-shop-page.search .site-main,
body.sy-shop-page.search #primary { padding: 0 !important; background: transparent !important; }
body.sy-shop-page.search .page-title,
body.sy-shop-page.search .ast-archive-description { display: none !important; }

/* ==========================================================================
   12. Astra global colour variables
   Astra paints links, focus rings, checked inputs, pagination, the sale badge
   and every bare <button> with --ast-global-color-0, which defaults to the
   Astra blue #046bd2. Rather than chase each selector, point the variables at
   the Sayssy brand so nothing blue can leak through anywhere.
   ========================================================================== */

:root,
body.sy {
	--ast-global-color-0: #F26522;
	--ast-global-color-1: #D9531A;
	--ast-global-color-2: #16161A;
	--ast-global-color-3: #3D3D44;
	--ast-global-color-5: #FFFFFF;
	--ast-global-color-7: #E8E8EC;
	--ast-border-color:   #E8E8EC;
}

/* Page canvas stays white, not Astra's pale blue grey. */
body.sy,
body.sy.ast-separate-container,
body.sy #page,
body.sy .site-content { background-color: #fff !important; }

/* --------------------------------------------------------------------------
   13. Pagination
   Astra wins on specificity with
   `.woocommerce nav.woocommerce-pagination ul li span.current`.
   -------------------------------------------------------------------------- */

.sy-pagination .woocommerce-pagination ul,
.sy-pagination .woocommerce-pagination ul li,
.woocommerce .sy-pagination nav.woocommerce-pagination ul,
.woocommerce .sy-pagination nav.woocommerce-pagination ul li {
	border: 0 !important;
	margin: 0 !important;
	overflow: visible !important;
}

.woocommerce .sy-pagination nav.woocommerce-pagination ul li a,
.woocommerce .sy-pagination nav.woocommerce-pagination ul li span,
.sy-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	width: auto !important;
	height: 40px !important;
	padding: 0 12px !important;
	border: 1px solid var(--sy-line) !important;
	border-radius: var(--sy-r-sm) !important;
	background: #fff !important;
	color: var(--sy-ink) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
}

.woocommerce .sy-pagination nav.woocommerce-pagination ul li a:hover,
.woocommerce .sy-pagination nav.woocommerce-pagination ul li a:focus {
	border-color: var(--sy-orange) !important;
	background: #fff !important;
	color: var(--sy-orange) !important;
}

.woocommerce .sy-pagination nav.woocommerce-pagination ul li span.current,
.sy-pagination .page-numbers.current {
	background: var(--sy-ink) !important;
	border-color: var(--sy-ink) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   14. Form controls
   Astra forces height 40px and padding 12px 16px on every input and select,
   which broke the filter search box, the price boxes and the sort dropdown.
   -------------------------------------------------------------------------- */

.sy-fsearch,
input[type="search"].sy-fsearch {
	height: auto !important;
	padding: 9px 12px !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	border-radius: var(--sy-r-sm) !important;
	background-image: none !important;
}

.sy-range__row input,
.sy-range__row input[type="number"] {
	height: auto !important;
	padding: 10px 12px !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	border-radius: var(--sy-r-sm) !important;
}

.sy-hsearch input,
.sy-searchov__field input {
	height: auto !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
}

/* Sort dropdown: one arrow, ours. */
.sy-sortsel select,
select#sy-orderby {
	height: auto !important;
	padding: 0 22px 0 0 !important;
	border: 0 !important;
	background: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='%2316161A'%3E%3Cpath d='M12 15.6 5.5 9.1 7 7.7l5 5 5-5 1.5 1.4z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right center !important;
	background-size: 11px !important;
	box-shadow: none !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--sy-ink) !important;
	-webkit-appearance: none;
	appearance: none;
}

/* Checkbox and radio squares are ours, not Astra's. */
.sy-checklist input[type="checkbox"],
.sy-radiolist input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* --------------------------------------------------------------------------
   15. Sticky header must clear the admin bar
   -------------------------------------------------------------------------- */

body.admin-bar .sy-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .sy-header { top: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar .sy-header { top: 0; }
}

/* ==========================================================================
   16. Product name: WooCommerce owns the h3 inside a product list item
   `.woocommerce-js ul.products li.product h3` is (0,3,3) and applies
   `padding: .5em 0` plus `font-size: 1em`, which beat our (0,2,0) class rule.
   That padding was the extra space under the name, and the font-size reset
   was quietly undoing our type scale as well.
   ========================================================================== */

.woocommerce ul.products li.product h3.sy-card__name,
.woocommerce-js ul.products li.product h3.sy-card__name,
.woocommerce-page ul.products li.product h3.sy-card__name,
.sy-card h3.sy-card__name {
	padding: 0 !important;
	margin: 0 0 5px !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: -.005em !important;
}

@media (max-width: 900px) {
	.woocommerce ul.products li.product h3.sy-card__name,
	.woocommerce-js ul.products li.product h3.sy-card__name,
	.sy-card h3.sy-card__name {
		font-size: 12.5px !important;
		margin-bottom: 4px !important;
	}
}

/* ==========================================================================
   17. Button text colour on hover and focus
   Astra's `button:hover { color: #ffffff }` still applied because our earlier
   override only reset the background. On the mobile bottom bar that turned the
   icon and label white on a white background, so the tab looked blank.
   ========================================================================== */

.sy-bnav__i,
.sy-bnav__i:hover,
.sy-bnav__i:focus,
.sy-bnav__i:active,
.sy-bnav__i:visited { color: var(--sy-muted) !important; }

.sy-bnav__i.is-active,
.sy-bnav__i.is-active:hover,
.sy-bnav__i.is-active:focus { color: var(--sy-orange) !important; }

.sy-acc__head, .sy-acc__head:active { color: var(--sy-ink) !important; }
.sy-acc__head:hover, .sy-acc__head:focus { color: var(--sy-orange) !important; }

.sy-tabs__tab, .sy-tabs__tab:hover, .sy-tabs__tab:focus { color: var(--sy-ink-2) !important; }
.sy-tabs__tab.is-active { color: var(--sy-ink) !important; }

.sy-nav__toggle, .sy-nav__toggle:active { color: var(--sy-ink-2) !important; }
.sy-nav__toggle:hover, .sy-nav__toggle:focus,
.sy-nav__item.is-open .sy-nav__toggle { color: var(--sy-orange) !important; }

.sy-sheet__close, .sy-sheet__close:hover, .sy-sheet__close:focus,
.sy-drawer__close, .sy-drawer__close:hover, .sy-drawer__close:focus,
.sy-searchov__back, .sy-searchov__back:hover, .sy-searchov__back:focus { color: var(--sy-ink) !important; }

.sy-searchov__clear, .sy-searchov__clear:hover, .sy-searchov__clear:focus,
.sy-tagchip button, .sy-tagchip button:hover { color: var(--sy-muted) !important; }
.sy-ditem__x, .sy-ditem__x:focus { color: var(--sy-muted) !important; }
.sy-ditem__x:hover { color: var(--sy-red) !important; }

.sy-mhead__search, .sy-mhead__search:hover, .sy-mhead__search:focus { color: var(--sy-muted) !important; }

.sy-pill, .sy-pill:active { color: var(--sy-ink) !important; }
.sy-pill:hover, .sy-pill:focus { color: var(--sy-ink) !important; }
.sy-pill.is-on, .sy-pill.is-on:hover { color: var(--sy-orange) !important; }
.sy-pill--clear, .sy-pill--clear:hover { color: var(--sy-orange) !important; }

.sy-wish, .sy-wish:focus { color: #6A6A75 !important; }
.sy-wish:hover, .sy-wish.is-on, .sy-wish.is-on:hover { color: var(--sy-red) !important; }

.sy-step__b, .sy-step__b:hover, .sy-step__b:focus { color: #fff !important; }
.sy-dstep button, .sy-dstep button:focus { color: var(--sy-ink) !important; }
.sy-dstep button:hover { color: var(--sy-orange) !important; }

.sy-add__btn, .sy-add__btn:hover, .sy-add__btn:focus { color: #fff !important; }
.sy-btn--primary, .sy-btn--primary:hover, .sy-btn--primary:focus { color: #fff !important; }
.sy-btn--ghost, .sy-btn--ghost:hover, .sy-btn--ghost:focus { color: var(--sy-ink) !important; }

/* Mobile tap highlight should not flash a blue box either. */
.sy-bnav__i, .sy-pill, .sy-wish, .sy-add__btn, .sy-step__b,
.sy-sheet__close, .sy-drawer__close, .sy-tabs__tab, .sy-acc__head {
	-webkit-tap-highlight-color: rgba(242,101,34,.12);
}

/* ==========================================================================
   18. Related products carousel
   ========================================================================== */

.sy-rel { margin: 46px 0 20px; }

.sy-rel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.sy-rel__head h2 {
	margin: 0 !important;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: none;
}

.sy-rel__nav { display: flex; gap: 8px; flex: 0 0 auto; }
.sy-rel__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0 !important;
	border: 1px solid var(--sy-line) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--sy-ink) !important;
	cursor: pointer;
	box-shadow: none !important;
	transition: border-color .16s, color .16s, opacity .16s;
}
.sy-rel__btn:hover { border-color: var(--sy-orange) !important; color: var(--sy-orange) !important; }
.sy-rel__btn:disabled { opacity: .35; cursor: default; }

.sy-rel__track {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
}
.sy-rel__track::-webkit-scrollbar { display: none; }

/* The carousel list must beat every grid rule, including the ones inside
   media queries further up this file, so it is stated with its own class. */
ul.products.sy-rel__list,
.woocommerce ul.products.sy-rel__list,
.woocommerce-page ul.products.sy-rel__list,
.woocommerce div.product ul.products.sy-rel__list,
.sy-rel__track ul.products.sy-rel__list {
	display: flex !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	align-items: stretch !important;
	gap: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	width: max-content !important;
	max-width: none !important;
	min-width: 100%;
	list-style: none !important;
	float: none !important;
}

ul.products.sy-rel__list > li.product,
.woocommerce ul.products.sy-rel__list > li.product,
.woocommerce-page ul.products.sy-rel__list > li.product,
.woocommerce div.product ul.products.sy-rel__list > li.product,
.sy-rel__track ul.products.sy-rel__list > li.product {
	flex: 0 0 250px !important;
	width: 250px !important;
	max-width: 250px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	scroll-snap-align: start;
}

/* Hide anything WooCommerce or Astra still tries to print here. */
.woocommerce div.product section.related,
.woocommerce div.product section.up-sells,
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products { display: none !important; }

@media (max-width: 1024px) {
	ul.products.sy-rel__list > li.product,
	.woocommerce ul.products.sy-rel__list > li.product,
	.sy-rel__track ul.products.sy-rel__list > li.product {
		flex-basis: 220px !important;
		width: 220px !important;
		max-width: 220px !important;
	}
}

@media (max-width: 900px) {
	.sy-rel { margin: 32px 0 12px; }
	.sy-rel__head h2 { font-size: 17px; }
	.sy-rel__nav { display: none; }

	ul.products.sy-rel__list,
	.woocommerce ul.products.sy-rel__list,
	.sy-rel__track ul.products.sy-rel__list {
		display: flex !important;
		grid-template-columns: none !important;
		gap: 12px !important;
	}
	ul.products.sy-rel__list > li.product,
	.woocommerce ul.products.sy-rel__list > li.product,
	.sy-rel__track ul.products.sy-rel__list > li.product {
		flex-basis: 165px !important;
		width: 165px !important;
		max-width: 165px !important;
	}
}

@media (max-width: 380px) {
	ul.products.sy-rel__list,
	.woocommerce ul.products.sy-rel__list { gap: 10px !important; }
	ul.products.sy-rel__list > li.product,
	.woocommerce ul.products.sy-rel__list > li.product {
		flex-basis: 150px !important;
		width: 150px !important;
		max-width: 150px !important;
	}
}

/* --------------------------------------------------------------------------
   19. Footer contact strip
   -------------------------------------------------------------------------- */

.sy-foot .sy-cbox address { margin: 0 0 8px !important; }
.sy-foot .sy-cbox h4 { margin: 0 0 7px !important; text-transform: uppercase !important; }
.sy-foot .sy-foot__col h3 { margin: 0 0 15px !important; }

.sy-cbox__i .sy-i  { width: 15px !important; height: 15px !important; }
.sy-cbox__wa .sy-i { width: 13px !important; height: 13px !important; }
.sy-cbox__map .sy-i { width: 12px !important; height: 12px !important; }
.sy-foot__social .sy-i { width: 17px !important; height: 17px !important; }
.sy-foot__ssl .sy-i { width: 15px !important; height: 15px !important; }

.sy-foot a.sy-cbox__v,
.sy-foot a.sy-cbox__wa,
.sy-foot a.sy-cbox__map { text-decoration: none !important; }

/* The logo is a single colour mark, so inverting it gives a clean white
   version on the orange footer instead of orange on orange. */
.sy-foot__logo img { filter: brightness(0) invert(1) !important; }

/* --------------------------------------------------------------------------
   20. Mobile header: logo left, greeting and avatar right
   Astra styles `a img` inside the header wrap, so the logo height is pinned
   here where it loads last.
   -------------------------------------------------------------------------- */

.sy-mhead__logo img {
	height: 38px !important;
	width: auto !important;
	max-width: 168px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	object-fit: contain !important;
	object-position: left center !important;
}
.sy-mhead__hi { margin: 0 !important; }
.sy-mhead__hi span,
.sy-mhead__hi strong { margin: 0 !important; }
.sy-mhead__logo,
.sy-mhead__logo:hover,
.sy-mhead__logo:focus { background: none !important; text-decoration: none !important; }

.sy-mhead__wish,
.sy-mhead__wish:hover,
.sy-mhead__wish:focus {
	background: var(--sy-bg-2) !important;
	color: var(--sy-ink) !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
}
.sy-mhead__wish .sy-i { width: 19px !important; height: 19px !important; }

@media (max-width: 400px) {
	.sy-mhead__logo img { height: 34px !important; max-width: 132px !important; }
	.sy-mhead__hi strong { max-width: 82px !important; font-size: 12px !important; }
	.sy-mhead__hi span { font-size: 9.5px !important; }
	.sy-mhead__wish { width: 34px !important; height: 34px !important; }
	.sy-mhead__avatar { width: 34px !important; height: 34px !important; }
	.sy-mhead__right { gap: 6px !important; }
}

@media (max-width: 340px) {
	/* No room for both the greeting and two icons on the very smallest
	   phones, and the icons are the ones a shopper actually taps. */
	.sy-mhead__hi { display: none !important; }
}

/* --------------------------------------------------------------------------
   21. Cart and checkout page container

   Real cause, found in Astra's inline stylesheet:

       @media (max-width: 1200px) {
         .ast-separate-container .entry-content > .alignfull,
         .ast-separate-container .entry-content .alignfull { ... }
       }

   That rule pulls any full width block out of the container with a negative
   margin so it can bleed edge to edge. WooCommerce 8 and later ship the Cart
   and Checkout as blocks, and those blocks carry the alignfull class, so the
   whole cart was being dragged left by exactly the container padding. That is
   why switching those two declarations off in DevTools fixed the phone.

   Two further problems were sitting underneath it:

   1. The gutter was being applied twice, once on .ast-article-single and
      again on .entry-content, so desktop had 40px instead of 20px.
   2. Astra picks a different wrapper depending on the content layout, so
      padding set on one wrapper is ignored on another.

   The fix below gives the gutter to exactly one element, .ast-container,
   which is present in every Astra content layout, zeroes every other
   wrapper, and cancels the full bleed pull on these pages only. Posts and
   normal pages keep Astra's behaviour untouched.
   -------------------------------------------------------------------------- */

/* One container owns the width and the gutter. 1220 = 1180 content + 2 x 20. */
body.woocommerce-cart .ast-container,
body.woocommerce-checkout .ast-container,
body.woocommerce-account .ast-container,
body.woocommerce-order-received .ast-container {
	width: 100% !important;
	max-width: 1220px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	box-sizing: border-box !important;
}

/* Everything inside it is flush, so the gutter is never doubled. */
body.woocommerce-cart #primary,
body.woocommerce-checkout #primary,
body.woocommerce-account #primary,
body.woocommerce-order-received #primary,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account .site-main,
body.woocommerce-order-received .site-main,
body.woocommerce-cart .ast-article-single,
body.woocommerce-checkout .ast-article-single,
body.woocommerce-account .ast-article-single,
body.woocommerce-order-received .ast-article-single,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-account .entry-content,
body.woocommerce-order-received .entry-content,
body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header,
body.woocommerce-account .entry-header,
body.woocommerce-order-received .entry-header,
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce,
body.woocommerce-account .woocommerce {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	float: none !important;
}

/*
   Cancel Astra's full bleed pull. The negative margin is what pushed the
   cart against the left edge of the phone. Scoped to these four pages so
   full width blocks elsewhere on the site still bleed as intended.
*/
body.woocommerce-cart .entry-content > .alignfull,
body.woocommerce-cart .entry-content .alignfull,
body.woocommerce-cart .entry-content > .alignwide,
body.woocommerce-cart .entry-content .alignwide,
body.woocommerce-checkout .entry-content > .alignfull,
body.woocommerce-checkout .entry-content .alignfull,
body.woocommerce-checkout .entry-content > .alignwide,
body.woocommerce-checkout .entry-content .alignwide,
body.woocommerce-account .entry-content > .alignfull,
body.woocommerce-account .entry-content .alignfull,
body.woocommerce-account .entry-content > .alignwide,
body.woocommerce-account .entry-content .alignwide,
body.woocommerce-order-received .entry-content .alignfull,
body.woocommerce-order-received .entry-content .alignwide {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Astra's own vertical padding on the article wrapper is kept, but sane. */
body.woocommerce-cart .ast-article-single,
body.woocommerce-checkout .ast-article-single,
body.woocommerce-account .ast-article-single,
body.woocommerce-order-received .ast-article-single {
	padding-top: 0 !important;
	padding-bottom: 26px !important;
}

body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header,
body.woocommerce-account .entry-header,
body.woocommerce-order-received .entry-header {
	padding-top: 22px !important;
	padding-bottom: 4px !important;
	text-align: left !important;
	border: 0 !important;
}

/* Nothing on these pages needs a sidebar. */
body.woocommerce-cart #secondary,
body.woocommerce-checkout #secondary { display: none !important; }

/* Astra's own WooCommerce button rules are very specific, so restate ours. */
body.sy.woocommerce-cart .woocommerce a.button,
body.sy.woocommerce-cart .woocommerce button.button,
body.sy.woocommerce-cart .woocommerce input.button,
body.sy.woocommerce-checkout .woocommerce a.button,
body.sy.woocommerce-checkout .woocommerce button.button,
body.sy.woocommerce-checkout .woocommerce input.button,
body.sy.woocommerce-account .woocommerce a.button,
body.sy.woocommerce-account .woocommerce button.button,
body.sy.woocommerce-account .woocommerce input.button {
	border-radius: var(--sy-r-sm) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-transform: none !important;
}

body.sy .woocommerce a.button.alt,
body.sy .woocommerce button.button.alt,
body.sy .woocommerce input.button.alt,
body.sy .woocommerce a.checkout-button,
body.sy .woocommerce #place_order {
	background-color: var(--sy-orange) !important;
	border-color: var(--sy-orange) !important;
	color: #fff !important;
}
body.sy .woocommerce a.button.alt:hover,
body.sy .woocommerce button.button.alt:hover,
body.sy .woocommerce input.button.alt:hover,
body.sy .woocommerce a.checkout-button:hover,
body.sy .woocommerce #place_order:hover {
	background-color: var(--sy-orange-dark) !important;
	border-color: var(--sy-orange-dark) !important;
	color: #fff !important;
}

/* WooCommerce floats the totals block; the grid layout needs it unfloated. */
body.sy .woocommerce .cart-collaterals .cart_totals { float: none !important; }
body.sy .woocommerce-checkout #customer_details .col-1,
body.sy .woocommerce-checkout #customer_details .col-2 { float: none !important; width: 100% !important; }

/* --------------------------------------------------------------------------
   21b. Block based Cart and Checkout

   WooCommerce 8 and later create the Cart and Checkout pages from blocks, so
   the markup is wc-block-* and none of the shop_table rules above apply to
   it. Both versions are covered because a store can be switched back to the
   classic shortcode at any time from the page editor.
   -------------------------------------------------------------------------- */

body.sy .wp-block-woocommerce-cart,
body.sy .wp-block-woocommerce-checkout,
body.sy .wc-block-cart,
body.sy .wc-block-checkout {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
}

body.sy .wc-block-components-button,
body.sy .wc-block-cart__submit-button,
body.sy .wc-block-components-checkout-place-order-button {
	border-radius: var(--sy-r-sm) !important;
	background-color: var(--sy-orange) !important;
	color: #fff !important;
	font-weight: 700 !important;
	min-height: 50px !important;
}
body.sy .wc-block-components-button:hover,
body.sy .wc-block-cart__submit-button:hover,
body.sy .wc-block-components-checkout-place-order-button:hover {
	background-color: var(--sy-orange-dark) !important;
	color: #fff !important;
}

body.sy .wc-block-components-text-input input,
body.sy .wc-block-components-form .wc-block-components-text-input input {
	border-radius: var(--sy-r-sm) !important;
	border-color: var(--sy-line) !important;
}

body.sy .wc-block-cart-items__row .wc-block-cart-item__image img,
body.sy .wc-block-components-order-summary-item__image img {
	border-radius: var(--sy-r-sm) !important;
	border: 1px solid var(--sy-line) !important;
	object-fit: cover !important;
}

body.sy .wc-block-cart .wc-block-cart-items,
body.sy .wc-block-cart table.wc-block-cart-items { width: 100% !important; }

/* --------------------------------------------------------------------------
   21c. Phone
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {

	body.woocommerce-cart .ast-container,
	body.woocommerce-checkout .ast-container,
	body.woocommerce-account .ast-container,
	body.woocommerce-order-received .ast-container {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	/* Room for the fixed bottom nav and the cart bar. */
	body.woocommerce-cart .site-content,
	body.woocommerce-checkout .site-content,
	body.woocommerce-account .site-content { padding-bottom: 80px !important; }

	body.woocommerce-cart .entry-title,
	body.woocommerce-checkout .entry-title,
	body.woocommerce-account .entry-title { font-size: 19px !important; }
}

/* Very narrow phones. */
@media (max-width: 400px) {
	body.woocommerce-cart .ast-container,
	body.woocommerce-checkout .ast-container,
	body.woocommerce-account .ast-container,
	body.woocommerce-order-received .ast-container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* --------------------------------------------------------------------------
   22. Colour family strip

   WooCommerce ships `.woocommerce div.product ... img { height: auto }` and
   Astra adds list markers back to any ul inside the product summary, so both
   are restated here where the file loads last.
   -------------------------------------------------------------------------- */

.sy-colours ul.sy-colours__list,
.sy-colours ul.sy-colours__list li {
	list-style: none !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}
.sy-colours ul.sy-colours__list li::marker { content: none !important; }
.sy-colours ul.sy-colours__list li::before { display: none !important; }

.woocommerce div.product .sy-colours__link img,
.sy-colours__link img {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: cover !important;
	object-position: top center !important;
}

.sy-colours__link,
.sy-colours__link:hover,
.sy-colours__link:focus { text-decoration: none !important; box-sizing: border-box !important; }

.sy-colours__title { padding: 0 !important; }
.sy-colours p { margin: 0 !important; }

/* --------------------------------------------------------------------------
   23. Wishlist page

   The standalone /wishlist/ page is an ordinary WordPress page, so Astra
   applies its post content styling to it: a narrow measure, list markers on
   the product grid and its own article padding. The product grid needs the
   same treatment the shop grid already gets.
   -------------------------------------------------------------------------- */

body.page .sy-wishpage ul.products,
.sy-wishpage ul.products,
.sy-wishpage ul.sy-grid {
	list-style: none !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}
.sy-wishpage ul.products li.product { list-style: none !important; }
.sy-wishpage ul.products li.product::marker { content: none !important; }
.sy-wishpage ul.products li.product::before { display: none !important; }

/* Astra caps page content at its reading measure; the grid needs the page. */
body.page-template-default .entry-content .sy-wishpage,
.entry-content .sy-wishpage {
	max-width: 100% !important;
	width: 100% !important;
}

.sy-wishpage__icon .sy-i { width: 34px !important; height: 34px !important; }
.sy-wishpage p { margin-bottom: 0 !important; }
.sy-wishpage__count,
.sy-wishpage__note { margin: 0 !important; }

/* The wishlist page is a page, not the shop, so give it the shop gutter. */
body.page .sy-wishpage { padding-top: 6px; }

/* Heart badge sizing, kept next to the cart badge rules Astra fights over. */
.sy-icon--wish { position: relative !important; }