/**
 * Allbirds — banner height + sticky header nav.
 * Theme already owns colors / type; only fix ShopForge chrome clamps.
 */

/*
 * Page canvas: www.allbirds.com uses warm natural-white-60 (#ece9e2).
 * ShopForge leaves body unpainted → cool grey/white; force the brand canvas.
 */
html.sf-allbirds-fix,
body.sf-shopify-package.sf-allbirds-fix,
body.sf-allbirds-fix.template-product,
body.sf-allbirds-fix.sf-template-product,
body.sf-allbirds-fix.template-collection,
body.sf-allbirds-fix.sf-template-collection {
	background-color: var(--color-natural-white-60, #ece9e2) !important;
	background: var(--color-natural-white-60, #ece9e2) !important;
}

body.sf-shopify-package.sf-allbirds-fix #MainContent,
body.sf-shopify-package.sf-allbirds-fix main,
body.sf-shopify-package.sf-allbirds-fix .shopforge-liquid-section {
	background-color: transparent;
}

/* Product media / cards stay pure white against the warm canvas */
body.sf-allbirds-fix.template-product [data-testid^="product-card"],
body.sf-allbirds-fix.sf-template-product [class*="rounded"][class*="bg-white"],
body.sf-allbirds-fix.template-product .bg-white {
	background-color: #fff;
}

/*
 * Cart drawer: closed by default. Theme/Vue sometimes mounts the panel open
 * when the session already has items — keep it off-screen until user opens.
 */
html.sf-allbirds-fix:not(.sf-ab-cart-open) .vue-cart-drawer-section .z-takeover.fixed.top-0.right-0,
html.sf-allbirds-fix:not(.sf-ab-cart-open) [data-section-type="cart-drawer-section"] .z-takeover.fixed.top-0.right-0,
body.sf-allbirds-fix:not(.sf-ab-cart-open) .vue-cart-drawer-section .z-takeover.fixed.top-0.right-0,
body.sf-allbirds-fix:not(.sf-ab-cart-open) [data-section-type="cart-drawer-section"] .z-takeover.fixed.top-0.right-0 {
	transform: translate3d(100%, 0, 0) !important;
	pointer-events: none !important;
}

html.sf-allbirds-fix:not(.sf-ab-cart-open) .vue-cart-drawer-section .z-takeover.fixed.inset-0,
html.sf-allbirds-fix:not(.sf-ab-cart-open) [data-section-type="cart-drawer-section"] .z-takeover.fixed.inset-0,
body.sf-allbirds-fix:not(.sf-ab-cart-open) .vue-cart-drawer-section .fixed.inset-0[class*="bg-black"],
body.sf-allbirds-fix:not(.sf-ab-cart-open) [data-section-type="cart-drawer-section"] .fixed.inset-0[class*="bg-black"] {
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

/* Black announcement: flush to viewport top, sticky like www.allbirds.com */
body.sf-shopify-package.sf-allbirds-fix .shopify-section-group-header-group[id*="__global-banner"] {
	position: sticky !important;
	top: 0 !important;
	margin: 0 !important;
	z-index: 60;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	overflow: hidden;
}

body.sf-shopify-package.sf-allbirds-fix .shopify-section-group-header-group[id*="__global-banner"] > .relative,
body.sf-shopify-package.sf-allbirds-fix .shopify-section-group-header-group[id*="__global-banner"] > div {
	position: relative !important;
	inset: auto !important;
	top: auto !important;
	margin: 0 !important;
	height: auto !important;
	max-height: none !important;
}

body.sf-shopify-package.sf-allbirds-fix [data-section-type="global-banner"] .swiper-slide {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

/* Keep header section collapsed in flow; pill is fixed by JS/CSS below */
body.sf-shopify-package.sf-allbirds-fix .shopify-section-group-header-group[id*="__header"] {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 70;
	height: 0 !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
	pointer-events: none;
}

body.sf-shopify-package.sf-allbirds-fix .shopify-section-group-header-group[id*="__header"] > div {
	height: 0 !important;
	overflow: visible !important;
	pointer-events: none;
}

/* White nav pill — below banner by ~top-5 (20px), same as original absolute top-5 */
body.sf-shopify-package.sf-allbirds-fix .sf-ab-header-bar,
body.sf-shopify-package.sf-allbirds-fix .shopify-section-group-header-group[id*="__header"] .absolute.top-5.right-5.left-5 {
	position: fixed !important;
	top: var(--sf-ab-nav-top, 52px) !important;
	right: 1.25rem !important;
	left: 1.25rem !important;
	width: auto !important;
	z-index: 70 !important;
	pointer-events: auto !important;
}

body.sf-shopify-package.sf-allbirds-fix .shopify-section-group-header-group[id*="__header"] nav,
body.sf-shopify-package.sf-allbirds-fix .shopify-section-group-header-group[id*="__header"] a,
body.sf-shopify-package.sf-allbirds-fix .shopify-section-group-header-group[id*="__header"] button {
	pointer-events: auto;
}

/*
 * Collection / search PLP: header section is height:0 in flow (pill is fixed),
 * so the sand filter bar was painting under the white nav (new-arrivals-26).
 * Push content below nav bottom + small gap. www.allbirds.com clears ~64px after banner.
 */
body.sf-shopify-package.sf-allbirds-fix.template-collection .shopforge-liquid-section[data-section-type*="collection"],
body.sf-shopify-package.sf-allbirds-fix.sf-template-collection .shopforge-liquid-section[data-section-type*="collection"],
body.sf-shopify-package.sf-allbirds-fix.template-search .shopforge-liquid-section,
body.sf-shopify-package.sf-allbirds-fix.sf-template-search .shopforge-liquid-section {
	padding-top: var(--sf-ab-plp-pad, 5rem) !important;
}

/* Filter widget: stay below fixed pill when sticky */
body.sf-shopify-package.sf-allbirds-fix.template-collection .z-widget.bg-natural-white,
body.sf-shopify-package.sf-allbirds-fix.sf-template-collection .z-widget.bg-natural-white,
body.sf-shopify-package.sf-allbirds-fix.template-collection [class*="bg-natural-white"].rounded-full.h-16,
body.sf-shopify-package.sf-allbirds-fix.sf-template-collection [class*="bg-natural-white"].rounded-full.h-16 {
	position: relative;
	z-index: 40;
}

/*
 * After an explicit close we stamp sf-ab-cart-closed so leftover Vue scrims
 * cannot keep eating clicks. Cleared again on open.
 */
body.sf-allbirds-fix.sf-ab-cart-closed .vue-cart-drawer-section .z-takeover.fixed.inset-0,
body.sf-allbirds-fix.sf-ab-cart-closed [data-section-type="cart-drawer-section"] .z-takeover.fixed.inset-0,
body.sf-allbirds-fix.sf-ab-cart-closed .vue-cart-drawer-section .fixed.inset-0[class*="bg-black"],
body.sf-allbirds-fix.sf-ab-cart-closed [data-section-type="cart-drawer-section"] .fixed.inset-0[class*="bg-black"] {
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

/*
 * PLP: hide captured/fallback product cards until products.json paints once.
 * Skeleton placeholders keep layout stable — no wrong titles/prices flash.
 */
html.sf-ab-plp-pending [data-product-card],
html.sf-ab-plp-pending [data-testid^="product-card"],
body.sf-ab-plp-pending [data-product-card],
body.sf-ab-plp-pending [data-testid^="product-card"],
html.sf-ab-plp-pending [data-sf-allbirds-plp-shell] > *:not([data-sf-ab-plp-skeleton]),
body.sf-ab-plp-pending [data-sf-allbirds-plp-shell] > *:not([data-sf-ab-plp-skeleton]) {
	visibility: hidden !important;
}

html.sf-ab-plp-pending [data-sf-ab-plp-skeleton],
body.sf-ab-plp-pending [data-sf-ab-plp-skeleton] {
	display: grid !important;
}

html.sf-ab-plp-ready [data-sf-ab-plp-skeleton],
body.sf-ab-plp-ready [data-sf-ab-plp-skeleton] {
	display: none !important;
}

.sf-ab-plp-skeleton,
.sf-ab-plp-skel-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

@media (min-width: 768px) {
	.sf-ab-plp-skeleton,
	.sf-ab-plp-skel-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

html.sf-ab-plp-ready [data-sf-ab-stale-grid],
body.sf-ab-plp-ready [data-sf-ab-stale-grid] {
	display: none !important;
}

.sf-ab-plp-skel-card {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	border-radius: 1rem;
	background: #fff;
	overflow: hidden;
}

.sf-ab-plp-skel-img {
	aspect-ratio: 1 / 1;
	border-radius: 1rem 1rem 0 0;
	background: linear-gradient(90deg, #f0eeea 25%, #e6e3dc 37%, #f0eeea 63%);
	background-size: 400% 100%;
	animation: sf-ab-skel 1.2s ease-in-out infinite;
}

.sf-ab-plp-skel-line {
	height: 0.7rem;
	margin: 0 0.65rem;
	border-radius: 999px;
	background: #ebe8e2;
}

.sf-ab-plp-skel-line--short {
	width: 40%;
	margin-bottom: 0.85rem;
}

@keyframes sf-ab-skel {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

/*
 * PDP: each mirror product is already one colorway — sibling color swatches
 * are capture noise (wrong handles / Dusty Pink on White PDPs). Hide them.
 * Size pills marked .disabled from capture → treat as in-stock.
 */
html.sf-allbirds-fix.sf-template-product .swatch-groups,
body.sf-allbirds-fix.template-product .swatch-groups,
body.sf-allbirds-fix.sf-template-product .swatch-groups,
html.sf-allbirds-fix.sf-template-product [data-color-swatch],
body.sf-allbirds-fix.template-product [data-color-swatch],
body.sf-allbirds-fix.sf-template-product [data-color-swatch] {
	display: none !important;
}

/* PLP / cards: hide bottom-left color swatch dots */
html.sf-allbirds-fix [data-sf-ab-swatch-host],
body.sf-allbirds-fix [data-sf-ab-swatch-host],
html.sf-allbirds-fix [data-sf-ab-card-swatch],
body.sf-allbirds-fix [data-sf-ab-card-swatch],
html.sf-allbirds-fix [data-sf-ab-hide-card-swatches],
body.sf-allbirds-fix [data-sf-ab-hide-card-swatches],
html.sf-allbirds-fix [data-product-card] input[name^="swatch-group-"],
body.sf-allbirds-fix [data-product-card] input[name^="swatch-group-"],
html.sf-allbirds-fix [data-testid^="product-card"] input[name^="swatch-group-"],
body.sf-allbirds-fix [data-testid^="product-card"] input[name^="swatch-group-"],
html.sf-allbirds-fix [data-product-card] label.rounded-full.size-5,
body.sf-allbirds-fix [data-product-card] label.rounded-full.size-5,
html.sf-allbirds-fix [data-product-card] label.rounded-full.lg\:size-6,
body.sf-allbirds-fix [data-product-card] label.rounded-full.lg\:size-6 {
	display: none !important;
	visibility: hidden !important;
}

/* Card / PLP now-price: bold black when coupon active */
html.sf-allbirds-fix.sf-coupon-prices [data-product-card] .sf-theme-price-now,
body.sf-allbirds-fix.sf-coupon-prices [data-product-card] .sf-theme-price-now,
html.sf-allbirds-fix.sf-coupon-prices [data-testid^="product-card"] .sf-theme-price-now,
body.sf-allbirds-fix.sf-coupon-prices [data-testid^="product-card"] .sf-theme-price-now,
html.sf-allbirds-fix [data-product-card] span[data-sf-price-now="1"],
body.sf-allbirds-fix [data-product-card] span[data-sf-price-now="1"] {
	color: #111 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

/* Default: all sizes in stock — kill OOS strike SVG + disabled look */
html.sf-allbirds-fix.sf-template-product .btn-size,
body.sf-allbirds-fix.template-product .btn-size,
body.sf-allbirds-fix.sf-template-product .btn-size,
html.sf-allbirds-fix.sf-template-product [data-testid^="pdp-size-selector-button"],
body.sf-allbirds-fix.template-product [data-testid^="pdp-size-selector-button"],
body.sf-allbirds-fix.sf-template-product [data-testid^="pdp-size-selector-button"] {
	opacity: 1 !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	text-decoration: none !important;
	position: relative;
}

html.sf-allbirds-fix.sf-template-product .btn-size.disabled,
body.sf-allbirds-fix.template-product .btn-size.disabled,
body.sf-allbirds-fix.sf-template-product .btn-size.disabled,
html.sf-allbirds-fix.sf-template-product [data-testid*="oos"],
body.sf-allbirds-fix.template-product [data-testid*="oos"],
body.sf-allbirds-fix.sf-template-product [data-testid*="oos"] {
	opacity: 1 !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	text-decoration: none !important;
}

/* Diagonal OOS strike overlay inside size pills */
html.sf-allbirds-fix.sf-template-product .btn-size > svg.absolute,
html.sf-allbirds-fix.sf-template-product .btn-size > svg.pointer-events-none,
html.sf-allbirds-fix.sf-template-product [data-testid^="pdp-size-selector-button"] > svg.absolute,
html.sf-allbirds-fix.sf-template-product [data-testid^="pdp-size-selector-button"] > svg.pointer-events-none,
body.sf-allbirds-fix.template-product .btn-size > svg.absolute,
body.sf-allbirds-fix.sf-template-product .btn-size > svg.absolute,
body.sf-allbirds-fix.template-product [data-testid^="pdp-size-selector-button"] > svg,
body.sf-allbirds-fix.sf-template-product [data-testid^="pdp-size-selector-button"] > svg {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Force in-stock: hide leftover OOS / Notify Me chrome */
html.sf-allbirds-fix [data-sf-ab-hide-oos],
body.sf-allbirds-fix [data-sf-ab-hide-oos],
html.sf-allbirds-fix.sf-template-product p.text-red.text-center.text-xs,
body.sf-allbirds-fix.template-product p.text-red.text-center.text-xs {
	display: none !important;
}

/* Coupon: bold now-price + grey strikethrough was-price */
html.sf-allbirds-fix.sf-coupon-prices .text-light-charcoal.line-through,
body.sf-allbirds-fix.sf-coupon-prices .text-light-charcoal.line-through,
html.sf-allbirds-fix.sf-coupon-prices span.line-through,
body.sf-allbirds-fix.sf-coupon-prices span.line-through,
html.sf-allbirds-fix.sf-coupon-prices .sf-theme-price-was,
body.sf-allbirds-fix.sf-coupon-prices .sf-theme-price-was,
html.sf-allbirds-fix.sf-coupon-prices [data-sf-price-was="1"],
body.sf-allbirds-fix.sf-coupon-prices [data-sf-price-was="1"],
html.sf-allbirds-fix.sf-coupon-prices .sf-price-compare-hide,
body.sf-allbirds-fix.sf-coupon-prices .sf-price-compare-hide {
	display: inline !important;
	visibility: visible !important;
	color: #878787 !important;
	font-weight: 400 !important;
	text-decoration: line-through !important;
	opacity: 1 !important;
	margin-left: 0.35em;
}

html.sf-allbirds-fix.sf-coupon-prices span.text-red[data-sf-price-now="1"],
body.sf-allbirds-fix.sf-coupon-prices span.text-red[data-sf-price-now="1"],
html.sf-allbirds-fix.sf-coupon-prices .sf-theme-price-now:not(button):not(.btn),
body.sf-allbirds-fix.sf-coupon-prices .sf-theme-price-now:not(button):not(.btn) {
	color: #111 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

/* Cart drawer: coupon now/was + discount row */
html.sf-allbirds-fix .vue-cart-drawer-section .sf-theme-price-now,
html.sf-allbirds-fix [data-section-type="cart-drawer-section"] .sf-theme-price-now,
html.sf-allbirds-fix .vue-cart-drawer-section [data-sf-price-now],
html.sf-allbirds-fix [data-section-type="cart-drawer-section"] [data-sf-price-now] {
	color: #111 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
html.sf-allbirds-fix .vue-cart-drawer-section .sf-theme-price-was,
html.sf-allbirds-fix [data-section-type="cart-drawer-section"] .sf-theme-price-was,
html.sf-allbirds-fix .vue-cart-drawer-section [data-sf-price-was],
html.sf-allbirds-fix [data-section-type="cart-drawer-section"] [data-sf-price-was] {
	color: #878787 !important;
	font-weight: 400 !important;
	text-decoration: line-through !important;
	margin-left: 0.35em;
}
html.sf-allbirds-fix .sf-ab-cart-discount {
	display: flex !important;
	justify-content: space-between;
	gap: 12px;
	font: 600 13px/1.3 system-ui, sans-serif;
	color: #c62828;
	margin: 6px 0;
}

/* ATC must stay visible + solid — Vue/capture OOS + coupon must not hide/flatten it */
html.sf-allbirds-fix [data-testid="pdp-atc-button"],
body.sf-allbirds-fix [data-testid="pdp-atc-button"],
html.sf-allbirds-fix [data-testid="pdp-atc-button"][data-sf-ab-atc-forced],
body.sf-allbirds-fix [data-testid="pdp-atc-button"][data-sf-ab-atc-forced] {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	visibility: visible !important;
	background-color: #212121 !important;
	color: #fff !important;
	font-weight: 500 !important;
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
	border: 1px solid #212121 !important;
	min-height: 3.25rem !important;
	width: 100% !important;
	opacity: 1 !important;
}

html.sf-allbirds-fix [data-testid="pdp-add-to-cart-button"][data-sf-ab-atc-forced],
body.sf-allbirds-fix [data-testid="pdp-add-to-cart-button"][data-sf-ab-atc-forced] {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	visibility: visible !important;
	background-color: #212121 !important;
	color: #fff !important;
	font-weight: 500 !important;
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
	border: 1px solid #212121 !important;
	min-height: 3.25rem !important;
	width: 100% !important;
	opacity: 1 !important;
}