/** Shopify CDN: Minification failed

Line 4395:51 Expected ")" to end URL token

**/
.product {
	margin: 0;
}

body.gradient, .ettika--main--header--hold, .ettika--header--megamenu--hold {
	background-color: #ffffff;
}
.ettika--top--links--hold .ettika--header--link--icon:hover, .ettika--header--link--icon.link--active {
	background-color: #ffffff;
}
    .ettika--main--header--wrapper {
        background-color: #fff !important;
	}
.product-title {
    color: #43413E;
    font-size: 20px;
    line-height: 28px;
    font-family: 'Inter';
    font-weight: 600;
    letter-spacing: -0.40px;
}

.product--title--icons {
    display: flex;
    align-items: center;
    gap: 19px;
    margin: 4px 0 0;
}

.product.grid {
	gap: 0;
}

.product--no-media {
	max-width: 57rem;
	margin: 0 auto;
}

.product__media-wrapper {
	padding-left: 0;
	position: relative;
}
#Globo-Back-In-Stock .Polaris-Modal-Dialog__Container.active{
      width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
    margin: 0;
}
.add-to-cartBtn-price{
  display:inline-flex;
}
.full_width_image .product-main-slider .splide-main-slide {
	width: 100%;
    max-width: 100%;
}

.price--large .pdp_nplp_bundle_discount {
	color: #1F6B4E;
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 7px;
    display: inline-block;
    margin-top: 0;
    letter-spacing: 0.6px;
    border: 1px solid #1F6B4E;
    padding: 5.7px 6px 5.7px;
    text-transform: uppercase;
	width:auto;
	margin-left:2px;
}

.mobile-gallery-btn {
	display: none;
}
@media screen and (min-width: 750px) {
	.product-title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.56px;
}
	   .price--large .pdp_nplp_bundle_discount {
        font-size: 11px;
        line-height: 9px;
		letter-spacing: 0.66px;
		padding: 5px 6px;
		margin-left:2px;
    }
	.product__column-sticky {
		display: block;
		position: sticky;
		top: 7.6rem;
		z-index: 2;
	}

	.product--thumbnail .thumbnail-list {
		padding-right: var(--media-shadow-horizontal-offset);
	}

	.product__info-wrapper {
		padding: 2.4rem 0 0 4.3rem;
	}

	.product__info-wrapper--extra-padding {
		padding: 0 0 0 8rem;
	}

	.product--right .product__info-wrapper {
		padding: 0 5rem 0 0;
	}

	.product--right .product__info-wrapper--extra-padding {
		padding: 0 8rem 0 0;
	}

	.product--right .product__media-list {
		margin-bottom: 2rem;
	}

	.product__media-container .slider-buttons {
		display: none;
	}
}

@media screen and (min-width: 990px) {
	.product--large:not(.product--no-media) .product__media-wrapper {
		max-width: 65%;
		width: calc(65% - var(--grid-desktop-horizontal-spacing) / 2);
	}

	.product--large:not(.product--no-media) .product__info-wrapper {
		padding: 0 0 0 4rem;
		max-width: 35%;
		width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2);
	}

	.product--large:not(.product--no-media).product--right
		.product__info-wrapper {
		padding: 0 4rem 0 0;
	}

	.product--medium:not(.product--no-media) .product__media-wrapper,
	.product--small:not(.product--no-media) .product__info-wrapper {
		max-width: 54%;
		width: calc(54% - var(--grid-desktop-horizontal-spacing) / 2);
	}

	.product--medium:not(.product--no-media) .product__info-wrapper,
	.product--small:not(.product--no-media) .product__media-wrapper {
		max-width: 46%;
		width: calc(46% - var(--grid-desktop-horizontal-spacing) / 2);
	}
}

/* Dynamic checkout */

.shopify-payment-button__button {
	font-family: inherit;
	min-height: 4.6rem;
}

.shopify-payment-button__button [role="button"].focused,
.no-js .shopify-payment-button__button [role="button"]:focus {
	outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important;
	outline-offset: 0.3rem;
	box-shadow: 0 0 0 0.1rem
			rgba(var(--color-button), var(--alpha-button-border)),
		0 0 0 0.3rem rgb(var(--color-background)),
		0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3) !important;
}

.shopify-payment-button__button [role="button"]:focus:not(:focus-visible) {
	outline: 0;
	box-shadow: none !important;
}

.shopify-payment-button__button [role="button"]:focus-visible {
	outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important;
	box-shadow: 0 0 0 0.1rem
			rgba(var(--color-button), var(--alpha-button-border)),
		0 0 0 0.3rem rgb(var(--color-background)),
		0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3) !important;
}

.shopify-payment-button__button--unbranded {
	background-color: rgba(var(--color-button), var(--alpha-button-background));
	color: rgb(var(--color-button-text));
	font-size: 1.4rem;
	line-height: calc(1 + 0.2 / var(--font-body-scale));
	letter-spacing: 0.07rem;
}

.shopify-payment-button__button--unbranded::selection {
	background-color: rgba(var(--color-button-text), 0.3);
}

.shopify-payment-button__button--unbranded:hover,
.shopify-payment-button__button--unbranded:hover:not([disabled]) {
	background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.shopify-payment-button__more-options {
	margin: 1.6rem 0 1rem;
	font-size: 1.2rem;
	line-height: calc(1 + 0.5 / var(--font-body-scale));
	letter-spacing: 0.05rem;
	text-decoration: underline;
	text-underline-offset: 0.3rem;
}

.shopify-payment-button__button + .shopify-payment-button__button--hidden {
	display: none;
}

/* Product form */

.product-form {
	display: block;
}

.product-form__error-message-wrapper:not([hidden]) {
	display: flex;
	align-items: flex-start;
	font-size: 1.2rem;
	margin-bottom: 1.5rem;
}

.product-form__error-message-wrapper svg {
	flex-shrink: 0;
	width: 1.2rem;
	height: 1.2rem;
	margin-right: 0.7rem;
	margin-top: 0.5rem;
}

/* Form Elements */
.product-form__input {
	flex: 0 0 100%;
	padding: 0;
	margin: 0 0 1.2rem 0;
	max-width: 44rem;
	min-width: fit-content;
	border: none;
}

variant-radios,
variant-selects {
	display: block;
}

.product-form__input--dropdown {
	margin-bottom: 1.6rem;
}

.product-form__input .form__label {
	padding-left: 0;
}

fieldset.product-form__input .form__label {
	margin-bottom: 0.2rem;
}

/* The 2025 radio, .color-swatch and .size-style rules that lived here were
   removed with the 2026 variant picker: inside this template those classes
   were only ever reached through product-variant-picker-pdp2025 and
   bundle-product-variant-picker-pdp2025, which this section no longer
   renders for simple products. The 2026 controls are styled under the
   new--pdp--2026--css marker below. .product-form__input (quantity selector)
   and .product-form__submit (sticky ATC) are kept -- both are still used. */

.product-form__input .select {
	max-width: 25rem;
}

.product-form__submit {
	margin-bottom: 0rem;
}

.no-js .product-form__submit.button--secondary {
	--color-button: var(--color-base-accent-1);
	--color-button-text: var(--color-base-solid-button-labels);
	--alpha-button-background: 1;
}

.product-form__submit[aria-disabled="true"]
	+ .shopify-payment-button
	.shopify-payment-button__button[disabled],
.product-form__submit[disabled]
	+ .shopify-payment-button
	.shopify-payment-button__button[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

@media screen and (forced-colors: active) {
	.product-form__submit[aria-disabled="true"] {
		color: Window;
	}
}

/* Overrides */
.shopify-payment-button__more-options {
	color: rgb(var(--color-foreground));
}

.shopify-payment-button__button {
	font-size: 1.5rem;
	letter-spacing: 0.1rem;
}

/* Product info */

.product__info-container > * + * {
	margin: 1.2rem 0;
}

/***========== STAMPED REVIEWS BLOCK  ============***/
  .product__info-container #shopify-block-AckcrTW1FRFlONmd2V__a99e0b86-bfce-417e-9585-a6d20c8691f5{
    margin-top: 0 !important;
  }
.product__info-container > .promo-with-popup-wrapper {
	margin: 0;
}

.product__info-container iframe {
	max-width: 100%;
}

.product__info-container .product-form,
.product__info-container .product__description,
.product__info-container .icon-with-text {
	margin: 2.5rem 0;
}

.product__info-container .product-form {
	margin:0;
}

.product__text {
	margin-bottom: 0;
}

a.product__text {
	display: block;
	text-decoration: none;
	color: rgba(var(--color-foreground), 0.75);
}

.product__text.caption-with-letter-spacing {
	text-transform: uppercase;
}

.product__title {
	word-break: break-word;
	margin-bottom: 1.6rem;
	margin-top: 0;
}

@media screen and (min-width: 1024px) {
	.product__title {
		margin-bottom: 1.6rem;
	}
}

.product__title > a {
	display: none !important;
}

.product__title + .product__text.caption-with-letter-spacing {
	margin-top: -1.5rem;
}

.product__text.caption-with-letter-spacing + .product__title {
	margin-top: 0;
}

.product__accordion .accordion__content {
	padding: 0 1rem;
}

.product .price .badge {
	margin-bottom: 0.5rem;
}

.product .price__container {
	margin-bottom: 0.5rem;
}

.product .price dl {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.product .price--sold-out .price__badge-sold-out {
	background: transparent;
	color: rgb(var(--color-base-text));
	border-color: transparent;
}

.product .price--sold-out .price__badge-sale {
	display: none;
}

@media screen and (min-width: 750px) {
	.product__info-container {
		max-width: 56.5rem;
	}

	.product__info-container > *:first-child {
		margin-top: 0;
	}
}

.product__description-title {
	font-weight: 600;
}

.product--no-media .product__title,
.product--no-media .product__text,
.product--no-media noscript .product-form__input,
.product--no-media .product__tax,
.product--no-media .product__sku,
.product--no-media shopify-payment-terms {
	text-align: center;
}

.product--no-media .product__media-wrapper,
.product--no-media .product__info-wrapper {
	padding: 0;
}

.product__tax {
	display: none;
	margin-top: -1.4rem;
}

.product--no-media noscript .product-form__input,
.product--no-media .share-button {
	max-width: 100%;
}

.product--no-media fieldset.product-form__input,
.product--no-media .product-form__quantity,
.product--no-media .product-form__input--dropdown,
.product--no-media .share-button,
.product--no-media .product__view-details,
.product--no-media .product__pickup-availabilities,
.product--no-media .product-form {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.product--no-media .product-form {
	flex-direction: column;
}

.product--no-media .product-form > .form {
	max-width: 30rem;
	width: 100%;
}

.product--no-media .product-form__quantity,
.product--no-media .product-form__input--dropdown {
	flex-direction: column;
	max-width: 100%;
}

.product-form__quantity .form__label {
	margin-bottom: 0.6rem;
}

.product-form__quantity-top .form__label {
	margin-bottom: 1.2rem;
}

.product--no-media fieldset.product-form__input {
	flex-wrap: wrap;
	margin: 0 auto 1.2rem auto;
}

.product-form__buttons{
	max-width: 100%;
}
.showBackinstock #gBackInStock-Button{
  max-width: 100% !important;
}
.showBackinstock #gBackInStock-Button .gBackInStockBtn, .gSubscribeBtn.gEnableSubscribe{
  font-weight:700 !important;
}
.showBackinstock .product-form__buttons{
display:none !important;
}
.product--no-media .product__info-container > modal-opener {
	display: block;
	text-align: center;
}

.product--no-media .price {
	text-align: center;
}

/* Product media */
.product__media-list video {
	border-radius: calc(var(--media-radius) - var(--media-border-width));
}

@media screen and (max-width: 749px) {
	.product__media-list {
		margin-left: -2.5rem;
		margin-bottom: 3rem;
		width: calc(100% + 4rem);
	}

	/* .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  } */

	.slider.product__media-list::-webkit-scrollbar {
		height: 0.2rem;
		width: 0.2rem;
	}

	.product__media-list::-webkit-scrollbar-thumb {
		background-color: rgb(var(--color-foreground));
	}

	.product__media-list::-webkit-scrollbar-track {
		background-color: rgba(var(--color-foreground), 0.2);
	}

	.product__media-list .product__media-item {
		/* width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing)); pdp change*/
		width: 100%;
	}

	.product--mobile-columns .product__media-item {
		width: calc(50% - 1.5rem - var(--grid-mobile-horizontal-spacing));
	}
}

@media screen and (min-width: 750px) {
	.product--thumbnail .product__media-list,
	.product--thumbnail_slider .product__media-list {
		padding-bottom: calc(
			var(--media-shadow-vertical-offset) * var(--media-shadow-visible)
		);
	}

	.product__media-list {
		padding-right: calc(
			var(--media-shadow-horizontal-offset) * var(--media-shadow-visible)
		);
	}

	.product--thumbnail .product__media-item:not(.is-active),
	.product--thumbnail_slider .product__media-item:not(.is-active) {
		display: none;
	}

	.product-media-modal__content
		> .product__media-item--variant.product__media-item--variant {
		display: none;
	}

	.product-media-modal__content > .product__media-item--variant:first-child {
		display: block;
	}
}

.product__media-item.product__media-item--variant {
	display: none;
}

.product__media-item--variant:first-child {
	display: block;
}

@media screen and (min-width: 750px) and (max-width: 989px) {
	.product__media-list .product__media-item:first-child {
		padding-left: 0;
	}

	.product--thumbnail_slider .product__media-list {
		margin-left: 0;
	}

	.product__media-list .product__media-item {
		width: 100%;
	}
}

.product__media-icon .icon {
	width: 1.2rem;
	height: 1.4rem;
}

.product__media-icon,
.thumbnail__badge {
	background-color: rgb(var(--color-background));
	border-radius: 50%;
	border: 0.1rem solid rgba(var(--color-foreground), 0.1);
	color: rgb(var(--color-foreground));
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3rem;
	width: 3rem;
	position: absolute;
	left: 1.2rem;
	top: 1.2rem;
	z-index: 1;
	transition: color var(--duration-short) ease,
		opacity var(--duration-short) ease;
}

.thumbnail__badge {
	background-color: transparent;
	border: none;
}

.product__media-video .product__media-icon {
	opacity: 1;
}

.product__modal-opener--image .product__media-toggle:hover {
	cursor: zoom-in;
}

.product__modal-opener:hover .product__media-icon {
	border: 0.1rem solid rgba(var(--color-foreground), 0.1);
}

@media screen and (min-width: 750px) {
	.grid__item.product__media-item--full {
		width: 100%;
	}

	.product--columns .product__media-item {
		border: 1px solid #d9d9d9;
		border-radius: 1.2rem;
		overflow: hidden;
	}

	.product--columns
		.product__media-item:not(.product__media-item--single):not(:only-child) {
		max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
	}

	.product--large.product--columns
		.product__media-item--full
		.deferred-media__poster-button {
		height: 5rem;
		width: 5rem;
	}

	.product--medium.product--columns
		.product__media-item--full
		.deferred-media__poster-button {
		height: 4.2rem;
		width: 4.2rem;
	}

	.product--medium.product--columns
		.product__media-item--full
		.deferred-media__poster-button
		.icon {
		width: 1.8rem;
		height: 1.8rem;
	}

	.product--small.product--columns
		.product__media-item--full
		.deferred-media__poster-button {
		height: 3.6rem;
		width: 3.6rem;
	}

	.product--small.product--columns
		.product__media-item--full
		.deferred-media__poster-button
		.icon {
		width: 1.6rem;
		height: 1.6rem;
	}
}

@media screen and (min-width: 990px) {
	.product--stacked .product__media-item {
		max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
	}

	.product:not(.product--columns)
		.product__media-list
		.product__media-item:first-child,
	.product:not(.product--columns)
		.product__media-list
		.product__media-item--full {
		/* width: 100%; pdp changes*/
		width: 45%;
		max-width: 100%;
	}

	.product__modal-opener .product__media-icon {
		opacity: 0;
	}

	.product__modal-opener:hover .product__media-icon,
	.product__modal-opener:focus .product__media-icon {
		opacity: 1;
	}
}

.product__media-item > * {
	display: block;
	position: relative;
}

.product__media-toggle {
	display: flex;
	border: none;
	background-color: transparent;
	color: currentColor;
	padding: 0;
}

.product__media-toggle::after {
	content: "";
	cursor: pointer;
	display: block;
	margin: 0;
	padding: 0;
	position: absolute;
	top: calc(var(--border-width) * -1);
	right: calc(var(--border-width) * -1);
	bottom: calc(var(--border-width) * -1);
	left: calc(var(--border-width) * -1);
	z-index: 2;
}

.product__media-toggle:focus-visible {
	outline: 0;
	box-shadow: none;
}

/* outline styling for Windows High Contrast Mode */
@media (forced-colors: active) {
	.product__media-toggle:focus-visible,
	.product__media-toggle:focus-visible:after,
	.product-form__input input[type="radio"]:focus-visible + label {
		outline: transparent solid 1px;
		outline-offset: 2px;
	}
}
.product__media-toggle.focused {
	outline: 0;
	box-shadow: none;
}

.product__media-toggle:focus-visible:after {
	box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
		0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
	border-radius: var(--media-radius);
}

.product__media-toggle.focused:after {
	box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
		0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
	border-radius: var(--media-radius);
}

.product-media-modal {
	background-color: rgb(var(--color-background));
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	visibility: hidden;
	opacity: 0;
	z-index: -1;
}

.product-media-modal[open] {
	visibility: visible;
	opacity: 1;
	z-index: 101;
}

.product-media-modal__dialog {
	display: flex;
	align-items: center;
	height: 100vh;
}

.product-media-modal__content {
	max-height: 100vh;
	width: 100%;
	overflow: auto;
}

.product-media-modal__content > *:not(.active),
.product__media-list .deferred-media:not(.media-video) {
	display: none;
}

@media screen and (min-width: 750px) {
	.product-media-modal__content {
		padding-bottom: 2rem;
	}

	.product-media-modal__content > *:not(.active) {
		display: block;
	}

	.product__modal-opener:not(.product__modal-opener--image) {
		display: none;
	}

	.product__media-list .deferred-media {
		display: block;
	}
}

@media screen and (max-width: 749px) {
	.product--thumbnail
		.is-active
		.product__modal-opener:not(.product__modal-opener--image),
	.product--thumbnail_slider
		.is-active
		.product__modal-opener:not(.product__modal-opener--image) {
		display: none;
	}

	.product--thumbnail .is-active .deferred-media,
	.product--thumbnail_slider .is-active .deferred-media {
		display: block;
		width: 100%;
	}
}

.product-media-modal__content > * {
	display: block;
	height: auto;
	margin: auto;
}

.product-media-modal__content .media {
	background: none;
}

.product-media-modal__model {
	width: 100%;
}

.product-media-modal__toggle {
	background-color: rgb(var(--color-background));
	border: 0.1rem solid rgba(var(--color-foreground), 0.1);
	border-radius: 50%;
	color: rgba(var(--color-foreground), 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	right: 2rem;
	padding: 1.2rem;
	position: fixed;
	z-index: 2;
	top: 2rem;
	width: 4rem;
}

.product-media-modal__content .deferred-media {
	width: 100%;
}

@media screen and (min-width: 750px) {
	.product-media-modal__content {
		padding: 2rem 11rem;
	}

	.product-media-modal__content > * {
		width: 100%;
	}

	.product-media-modal__content > * + * {
		margin-top: 2rem;
	}

	.product-media-modal__toggle {
		right: 5rem;
		top: 2.2rem;
	}
}

@media screen and (min-width: 990px) {
	.product-media-modal__content {
		padding: 2rem 11rem;
	}

	.product-media-modal__content > * + * {
		margin-top: 1.5rem;
	}

	.product-media-modal__content {
		padding-bottom: 1.5rem;
	}

	.product-media-modal__toggle {
		right: 5rem;
	}
}

.product-media-modal__toggle:hover {
	color: rgba(var(--color-foreground), 0.75);
}

.product-media-modal__toggle .icon {
	height: auto;
	margin: 0;
	width: 2.2rem;
}

@media screen and (min-width: 750px) {

	.product-media-modal__dialog .global-media-settings--no-shadow {
		overflow: visible !important;
	}
}

@media screen and (max-width: 749px) {

	.product-media-modal__dialog .global-media-settings,
	.product-media-modal__dialog .global-media-settings video,
	.product-media-modal__dialog .global-media-settings model-viewer,
	.product-media-modal__dialog .global-media-settings iframe,
	.product-media-modal__dialog .global-media-settings img {
		border: none;
		border-radius: 0;
	}
}

.product__media-list .media > * {
	overflow: hidden;
}

.thumbnail-list {
	flex-wrap: wrap;
	grid-gap: 1rem;
}

/* Fix to show some space at the end of our sliders in all browsers to be applied on thumbnails */
.slider--mobile.thumbnail-list:after {
	content: none;
}

@media screen and (min-width: 750px) {
	.product--stacked .thumbnail-list {
		display: none;
	}

	.thumbnail-list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}
}

.thumbnail-list_item--variant:not(:first-child) {
	display: none;
}

@media screen and (min-width: 990px) {
	.thumbnail-list {
		grid-template-columns: repeat(4, 1fr);
	}

	.product--medium .thumbnail-list {
		grid-template-columns: repeat(5, 1fr);
	}

	.product--large .thumbnail-list {
		grid-template-columns: repeat(6, 1fr);
	}
}

@media screen and (max-width: 749px) {
	.product__media-item {
		display: flex;
		align-items: center;
	}

	.product__modal-opener {
		/* width: 94%; pdp changes */
		/* margin: 0 auto; */
		border: 0;
		border-radius: 0;
		overflow: hidden;
	}

	.thumbnail-slider {
		display: flex;
		align-items: center;
	}

	.thumbnail-slider .slider-button {
		/* display: flex; pdp change*/
		display: none;
	}

	.featured-image-slider .slider-buttons {
		display: flex;
		position: absolute;
		width: 100%;
		top: 52%;
		justify-content: space-between;
	}
	.featured-image-slider.show_arrows .slider-buttons {
		display: flex;
	}

	.featured-image-slider .slider-buttons .slider-button {
		position: relative;
		z-index: 2;
	}
	.featured-image-slider .slider-buttons .slider-button.slider-button--prev {
		left: 0.8rem;
	}
	.featured-image-slider .slider-buttons .slider-button.slider-button--next {
		right: 0.8rem;
	}

	.featured-image-slider .slider-buttons .slider-button.slider-button--next {
		transform: rotate(180deg);
	}

	.thumbnail-slider .thumbnail-list.slider {
		display: flex;
		padding: 0.5rem;
		flex: 1;
		scroll-padding-left: 0.5rem;
		width: 94%;
		margin: 0 auto; /* pdp changes */
	}

	.thumbnail-list__item.slider__slide {
		/* width: calc(33% - 0.6rem); pdp change*/
		width: 60px;
		border: 1px solid #d9d9d9;
		border-radius: 0.8rem;
		overflow: hidden;
	}
}

@media screen and (min-width: 750px) {
	.product--thumbnail_slider .thumbnail-slider {
		display: flex;
		align-items: center;
	}

	.thumbnail-slider .thumbnail-list.slider--tablet-up {
		display: flex;
		padding: 0.5rem;
		flex: 1;
		scroll-padding-left: 0.5rem;
	}

	.product__media-wrapper .slider-mobile-gutter .slider-button {
		display: none;
	}

	.thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
		width: calc(25% - 0.8rem);
	}

	.product--thumbnail_slider .slider-mobile-gutter .slider-button {
		display: flex;
	}
}

@media screen and (min-width: 900px) {
	.product--small
		.thumbnail-list.slider--tablet-up
		.thumbnail-list__item.slider__slide {
		width: calc(25% - 0.8rem);
	}

	.thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
		width: calc(20% - 0.8rem);
	}
}

.thumbnail {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 100%;
	width: 100%;
	padding: 0;
	color: rgb(var(--color-base-text));
	cursor: pointer;
	background-color: transparent;
}

.thumbnail:hover {
	opacity: 0.7;
}

.thumbnail.global-media-settings img {
	border-radius: 0;
}

.thumbnail[aria-current] {
	box-shadow: 0 0 0rem 0.1rem rgb(var(--color-foreground));
	border-color: rgb(var(--color-foreground));
}

.image-magnify-full-size {
	cursor: zoom-out;
	z-index: 1;
	margin: 0;
	border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.image-magnify-hover {
	cursor: zoom-in;
}

.product__modal-opener--image .product__media-zoom-none,
.product__media-icon--none {
	display: none;
}

.product__modal-opener > .loading-overlay__spinner {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	display: flex;
	align-items: center;
	height: 48px;
	width: 48px;
}

.product__modal-opener .path {
	stroke: rgb(var(--color-base-accent-1));
	opacity: 0.75;
}

@media (hover: hover) {
	.product__media-zoom-hover,
	.product__media-icon--hover {
		display: none;
	}
}

@media screen and (max-width: 749px) {
	.product__media-zoom-hover,
	.product__media-icon--hover {
		display: flex;
	}
	.product__media-icon--hover {
		display: none;
	}
}

.js .product__media {
	overflow: hidden !important;
}

.thumbnail[aria-current]:focus-visible {
	box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
		0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
}

.thumbnail[aria-current]:focus,
.thumbnail.focused {
	outline: 0;
	box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
		0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
}

/* outline styling for Windows High Contrast Mode */
@media (forced-colors: active) {
	.thumbnail[aria-current]:focus,
	.thumbnail.focused {
		outline: transparent solid 1px;
	}
}
.thumbnail[aria-current]:focus:not(:focus-visible) {
	outline: 0;
	box-shadow: 0 0 0 0.1rem rgb(var(--color-foreground));
}

.thumbnail img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.thumbnail__badge .icon {
	width: 1rem;
	height: 1rem;
}

.thumbnail__badge .icon-3d-model {
	width: 1.2rem;
	height: 1.2rem;
}

.thumbnail__badge {
	color: rgb(var(--color-foreground), 0.6);
	height: 2rem;
	width: 2rem;
	left: auto;
	right: calc(0.4rem + var(--media-border-width));
	top: calc(0.4rem + var(--media-border-width));
}

@media screen and (min-width: 750px) {
	.product:not(.product--small) .thumbnail__badge {
		height: 3rem;
		width: 3rem;
	}

	.product:not(.product--small) .thumbnail__badge .icon {
		width: 1.2rem;
		height: 1.2rem;
	}

	.product:not(.product--small) .thumbnail__badge .icon-3d-model {
		width: 1.4rem;
		height: 1.4rem;
	}
}

.thumbnail-list__item {
	position: relative;
}

.thumbnail-list__item::before {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.product:not(.featured-product) .product__view-details {
	display: none;
}

.product__view-details {
	display: flex;
	text-decoration: none;
}

.product__view-details:hover {
	text-decoration: underline;
	text-underline-offset: 0.3rem;
}

.product__view-details .icon {
	width: 1.2rem;
	margin-left: 1.2rem;
	flex-shrink: 0;
}

/* Inventory status */

.product__inventory {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.product--no-media .product__inventory {
	justify-content: center;
}

/* This keeps the container from getting display: none; applied to it and to make sure we're not introducing some layout shift when switching to an unavailable variant */
.product__inventory.visibility-hidden:empty {
	display: block;
}

.product__inventory.visibility-hidden:empty::after {
	content: "#";
}

/* Icon with text */
.icon-with-text {
	--icon-size: calc(var(--font-heading-scale) * 3rem);
	--icon-spacing: calc(var(--font-heading-scale) * 1rem);
}

.icon-with-text--horizontal {
	display: flex;
	justify-content: center;
	column-gap: 3rem;
	flex-direction: row;
}

.icon-with-text--vertical {
	--icon-size: calc(var(--font-heading-scale) * 2rem);
}

.icon-with-text .icon {
	fill: rgb(var(--color-foreground));
	height: var(--icon-size);
	width: var(--icon-size);
}

.icon-with-text--horizontal .icon,
.icon-with-text--horizontal img {
	margin-bottom: var(--icon-spacing);
}

.icon-with-text--vertical .icon {
	min-height: var(--icon-size);
	min-width: var(--icon-size);
	margin-right: var(--icon-spacing);
}

.icon-with-text img {
	height: var(--icon-size);
	width: var(--icon-size);
	object-fit: contain;
}

.icon-with-text--vertical img {
	margin-right: var(--icon-spacing);
}

.icon-with-text--horizontal .h4 {
	padding-top: calc(var(--icon-size) + var(--icon-spacing));
	text-align: center;
}

.icon-with-text--horizontal svg + .h4,
.icon-with-text--horizontal img + .h4,
.icon-with-text--horizontal.icon-with-text--text-only .h4 {
	padding-top: 0;
}

.icon-with-text__item {
	display: flex;
	align-items: center;
}

.icon-with-text--horizontal .icon-with-text__item {
	flex-direction: column;
	width: 33%;
}

.icon-with-text--vertical .icon-with-text__item {
	margin-bottom: var(--icon-size);
}

/* SKU block */

.product__sku.visibility-hidden::after {
	content: "#";
}

/* Product-thumbnail snippet */

.product-media-container {
	--aspect-ratio: var(--preview-ratio);
	--ratio-percent: calc(1 / var(--aspect-ratio) * 100%);
	position: relative;
	width: 100%;
	max-width: calc(100% - calc(var(--media-border-width) * 2));
	border-radius: 0.8rem;
}

.product-media-container.constrain-height {
	/* arbitrary offset value based on average theme spacing and header height */
	--viewport-offset: 400px;
	--constrained-min-height: 300px;
	--constrained-height: max(
		var(--constrained-min-height),
		calc(100vh - var(--viewport-offset))
	);
	margin-right: auto;
	margin-left: auto;
}

.product-media-container.constrain-height.media-fit-contain {
	--contained-width: calc(var(--constrained-height) * var(--aspect-ratio));
	width: min(var(--contained-width), 100%);
}

.product-media-container .media {
	padding-top: var(--ratio-percent);
	/* border-radius: 1.2rem; */
}

.product-media-container.constrain-height .media {
	padding-top: min(var(--constrained-height), var(--ratio-percent));
}

@media screen and (max-width: 749px) {
	.product-media-container.media-fit-cover {
		display: flex;
		align-self: stretch;
	}

	.product-media-container.media-fit-cover .media {
		/* allow media img element to scale relative to modal-opener/product-media-container */
		position: initial;
	}
}

@media screen and (min-width: 750px) {
	.product-media-container {
		max-width: 100%;
	}

	.product-media-container:not(.media-type-image) {
		/* override to use actual media ratio (not poster ratio) for video/models on desktop */
		--aspect-ratio: var(--ratio);
	}

	.product-media-container.constrain-height {
		--viewport-offset: 170px;
		--constrained-min-height: 500px;
	}

	.product-media-container.media-fit-cover,
	.product-media-container.media-fit-cover .product__modal-opener,
	.product-media-container.media-fit-cover .media {
		height: 100%;
	}

	.product-media-container.media-fit-cover .deferred-media__poster img {
		object-fit: cover;
		width: 100%;
	}
}

.product-media-container .product__modal-opener {
	display: block;
	position: relative;
    height: 100%;
}

.product-media-container .product__modal-opener.product__modal-opener--video {
	display: none;
}

.product-media-container.media-type-video .dffered_video_media {
    height: 100%;
    overflow: hidden;
}

.product-media-container.media-type-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0 !important;
}

.product-media-container.media-type-video .play-pause-btn {
    position: absolute;
    bottom: 8px;
	left:8px;
}

@media screen and (min-width: 750px) {
	.product-media-container
		.product__modal-opener:not(.product__modal-opener--image) {
		display: none;
	}
}

/* Recipient form */
.recipient-form {
	/* (2.88[line-height] - 1.6rem) / 2 */
	--recipient-checkbox-margin-top: 0.64rem;

	display: block;
	position: relative;
	max-width: 44rem;
	margin-bottom: 2.5rem;
}

.recipient-form-field-label {
	margin: 0.6rem 0;
}

.recipient-form-field-label--space-between {
	display: flex;
	justify-content: space-between;
}

.recipient-checkbox {
	flex-grow: 1;
	font-size: 1.6rem;
	display: flex;
	word-break: break-word;
	align-items: flex-start;
	max-width: inherit;
	position: relative;
}

.no-js .recipient-checkbox {
	display: none;
}

.recipient-form > input[type="checkbox"] {
	position: absolute;
	width: 1.6rem;
	height: 1.6rem;
	margin: var(--recipient-checkbox-margin-top) 0;
	top: 0;
	left: 0;
	z-index: -1;
	appearance: none;
	-webkit-appearance: none;
}

.recipient-fields__field {
	margin: 0 0 2rem 0;
}

.recipient-fields .field__label {
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: calc(100% - 3.5rem);
	overflow: hidden;
}

.recipient-checkbox > svg {
	margin-top: var(--recipient-checkbox-margin-top);
	margin-right: 1.2rem;
	flex-shrink: 0;
}

.recipient-form .icon-checkmark {
	visibility: hidden;
	position: absolute;
	left: 0.28rem;
	z-index: 5;
	top: 0.4rem;
}

.recipient-form > input[type="checkbox"]:checked + label .icon-checkmark {
	visibility: visible;
}

.js .recipient-fields {
	display: none;
}

.recipient-fields hr {
	margin: 1.6rem auto;
}

.recipient-form > input[type="checkbox"]:checked ~ .recipient-fields {
	display: block;
	animation: animateMenuOpen var(--duration-default) ease;
}
.recipient-form
	> input[type="checkbox"]:not(:checked, :disabled)
	~ .recipient-fields,
.recipient-email-label {
	display: none;
}

.js .recipient-email-label.required,
.no-js .recipient-email-label.optional {
	display: inline;
}

.recipient-form ul {
	line-height: calc(1 + 0.6 / var(--font-body-scale));
	padding-left: 4.4rem;
	text-align: left;
}

.recipient-form ul a {
	display: inline;
}

.recipient-form .error-message::first-letter {
	text-transform: capitalize;
}

@media screen and (forced-colors: active) {
	.recipient-fields > hr {
		border-top: 0.1rem solid rgb(var(--color-background));
	}

	.recipient-checkbox > svg {
		background-color: inherit;
		border: 0.1rem solid rgb(var(--color-background));
	}

	.recipient-form > input[type="checkbox"]:checked + label .icon-checkmark {
		border: none;
	}
}

/* CUSTOM STYLES */

.cs-img-w-txt {
	display: flex;
	max-width: 90%;
	margin: 0 auto;
}

.cs-img-w-txt .box_one,
.cs-img-w-txt .box_two {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cs-img-w-txt .box_one {
	padding-right: 24px;
	border-right: 1px solid #d9d9d8;
}

.cs-img-w-txt .box_two {
	padding-left: 24px;
}

.cs-img-w-txt .image {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 32px;
	width: 32px;
	border-radius: 9999px;
}

.cs-img-w-txt .image img {
	width: 100%;
	height: 100%;
}

.cs-img-w-txt .info span {
	display: block;
	margin: 0;
}

.cs-img-w-txt .info span.title {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0em;
	color: #43413e;
}

.cs-img-w-txt .info span.subtext {
	font-size: 10px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0em;
}

@media screen and (min-width: 102px) {
	.cs-img-w-txt .image {
		width: 40px;
		height: 40px;
	}
}

/* CUSTOM STYLES END */

/*--- new--pdp--2026--css ---*/
/* ============================================================
   PDP 2026 options + purchase
   Figma: 279:112 (Options), 279:124 (Purchase), 278:1276 (sold out),
          279:710 (size states)
   Replaces the 2025 .color-swatch / .size-style rules removed above.
   ============================================================ */

:root {
	--pdp2026-ink: #43413e;
	--pdp2026-ink-50: rgba(67, 65, 62, 0.5);
	--pdp2026-ink-20: rgba(67, 65, 62, 0.2);
	--pdp2026-ink-65: rgba(67, 65, 62, 0.65);
	--ettika-preorder-dot: #C08A3E;
	/* motion-prototype easing, shared with the Kimonix cards */
	--ettika-rec-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ettika-rec-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
	/* prototype easings for the Add to Bag surface */
	--atb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--atb-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Options group ---------- */
.pdp2026-options {
	display: flex;
	flex-direction: column;
	gap:0;
	width: 100%;
	margin:0 0 22px;
}

.pdp2026-option {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	width: 100%;
	margin:0 0 12px;
}

.pdp2026-option.pdp2026-option--chip {
    margin: 1.6rem 0 0;
}

.pdp2026-option__label,
.pdp2026-option__label-name {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.6rem;
    letter-spacing: 0.24px;
    text-transform: uppercase;
    color: var(--pdp2026-ink);
}

.pdp2026-option__label-value {
	color: var(--pdp2026-ink-50);
}

.pdp2026-option__label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.pdp2026-size-guide {
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.2rem;
	line-height: normal;
	color: var(--pdp2026-ink);
	text-decoration: underline;
	text-underline-position: from-font;
	cursor: pointer;
}

@media screen and (min-width: 750px) {
	.pdp2026-options {
		margin:0 0 32px;
	}
	.pdp2026-option {
		margin: 0 0 1.6rem;
	}
	.pdp2026-option.pdp2026-option--chip {
    margin: 2.4rem 0 0;
}
	.pdp2026-option__label,
	.pdp2026-option__label-name {
		font-size: 1.3rem;
		line-height: 2rem;
		letter-spacing: 0.52px;
	}
}

/* A single-value option is not a choice -- the design omits the row. */
.pdp2026-option--single {
	display: none;
}

/* ---------- Material swatches ---------- */
.pdp2026-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.2rem;
}

/* The limited-edition heading is an .pdp2026-option__label like any other --
   dark name, grey value, same size at both breakpoints -- so it carries only
   the rule that makes it a full-width line of the swatch row it heads. Its own
   type declarations are gone: they came later in the file than the shared
   label rule and so quietly overrode it. */
.pdp2026-swatches__row-label {
	flex: 0 0 100%;
}

.pdp2026-option__input {
	position: absolute;
	width: 1px;
	height: 1px;
	clip: rect(0, 0, 0, 0);
	overflow: hidden;
}

.pdp2026-swatch {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 2.8rem;
    cursor: pointer;
}

.pdp2026-swatch__chip {
	display: block;
	width: 2.8rem;
	height: 2.8rem;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

@media screen and (min-width: 750px) {
	.pdp2026-swatch {
		gap: .7rem;
		width: 3.2rem;
	}
	.pdp2026-swatch__chip {
		width: 3.2rem;
		height: 3.2rem;
	}
}

/* Selected swatch carries a rule beneath it (Figma 279:223). */
.pdp2026-swatch {
	position: relative;
}

/* The radio labels carry visually-hidden text; keep it out of the flex
   column so it can never add height or gap and shift the chip on hover. */
.pdp2026-swatch .visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.pdp2026-swatch::after,
.pdp2026-swatch::before {
	content: '';
	display: block;
	height: 1.25px;
	background: var(--pdp2026-ink);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.pdp2026-swatch::before {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	opacity: 0.35;
	transform-origin: center;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pdp2026-option__input:checked + .pdp2026-swatch::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.pdp2026-option__input.disabled + .pdp2026-swatch,
.pdp2026-option__input:disabled + .pdp2026-swatch {
	opacity: 0.35;
}

.pdp2026-swatch--belt .pdp2026-swatch__chip {
	transition: transform 0.2s ease-out;
}

.pdp2026-swatch--belt:hover .pdp2026-swatch__chip {
	transform: scale(1.1);
}

/* Own layer, so the lift moves the bitmap instead of repainting it at
   sub-pixel offsets (the shimmer on plain chips like Silver). */
.pdp2026-swatch:not(.pdp2026-swatch--belt) .pdp2026-swatch__chip {
	transform: translateZ(0);
	backface-visibility: hidden;
	will-change: transform;
	transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* One set of rules for <a> and <label> swatches alike, sold-out included. */
@media (hover: hover) {
	.pdp2026-swatch:not(.pdp2026-swatch--belt):hover .pdp2026-swatch__chip {
		transform: translate3d(0, -2px, 0);
	}

	.pdp2026-option__input:not(:checked) + .pdp2026-swatch:hover::before,
	.pdp2026-swatch--link:not(.is-selected):hover::before {
		transform: scaleX(0.6);
	}
}

.pdp2026-swatch:not(.pdp2026-swatch--belt):active .pdp2026-swatch__chip {
	transform: translateZ(0) scale(0.92);
	transition-duration: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
	.pdp2026-swatch::after,
	.pdp2026-swatch::before,
	.pdp2026-swatch__chip {
		transition-duration: 0.01s;
		transition-delay: 0s !important;
	}

	.pdp2026-swatch:not(.pdp2026-swatch--belt) .pdp2026-swatch__chip {
		transform: none !important;
	}
}

/* ---------- Size chips ---------- */
.pdp2026-sizes {
	display: flex;
	align-items: flex-start;
	gap: 0.88rem;
	width: 100%;
}

.pdp2026-size {
	position: relative;
	display: flex;
	flex: 1 0 0;
	min-width: 1px;
	height: 3.2rem;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--pdp2026-ink-20);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: normal;
	color: var(--pdp2026-ink);
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.pdp2026-option__input:checked + .pdp2026-size, .pdp2026-size:hover {
	border-color: var(--pdp2026-ink);
}

.pdp2026-size:hover{
	background: #E6E6E6;
}

/* Sold out: faded, with a corner-to-corner strike. Drawn as a gradient rather
   than the design's fixed-length SVG so it scales with the chip width. */
.pdp2026-option__input.disabled + .pdp2026-size,
.pdp2026-option__input:disabled + .pdp2026-size {
	position: relative;
	opacity: 0.35;
	background-image: none;
	overflow: hidden;
}

.pdp2026-option__input.disabled + .pdp2026-size::after,
.pdp2026-option__input:disabled + .pdp2026-size::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Figma 279:489 strikes the chip from its top-right corner down to the
	   bottom-left.

	   An SVG stroke rather than a linear-gradient. A gradient cannot draw a
	   hard edge: each of the two transparent-to-ink stops is a ramp the
	   renderer smooths over its own sub-pixel width, so a nominally 1px band
	   arrived as a soft two-pixel smear. A stroked line has real edges and
	   only the diagonal's own antialiasing.

	   preserveAspectRatio="none" lets the square viewBox stretch to whatever
	   the chip is, which is what keeps the line corner to corner at every
	   width, and vector-effect="non-scaling-stroke" stops that stretch from
	   distorting the stroke -- it stays 1px on screen. The colour is written
	   out because a url() cannot read a custom property. */
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="100" y1="0" x2="0" y2="100" stroke="%2343413e" stroke-width="1" vector-effect="non-scaling-stroke"/></svg>');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.pdp2026-option__input:focus-visible + .pdp2026-size,
.pdp2026-option__input:focus-visible + .pdp2026-swatch {
	outline: 2px solid var(--pdp2026-ink);
	outline-offset: 2px;
}

/* ---------- Romance copy ---------- */
.pdp2026-romance {
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 2rem;
	color: var(--pdp2026-ink);
	width: 100%;
	letter-spacing:-0.26px;
}
@media screen and (min-width: 750px) { 
	.pdp2026-romance {
		font-size: 1.5rem;
		line-height: 2rem;
		letter-spacing:0;
	}
}
/* base.css hides .main_upper_description globally with !important; inside the
   2026 options it is the romance copy, so it is re-shown here. The lower block
   stays drawer-only. */
.pdp2026-romance .main_upper_description {
	display: block !important;
}

.pdp2026-romance .main_lower_description {
	display: none;
}
.pdp2026-romance p {
	margin: 0;
}
.pdp2026-romance p:not(:first-child){
	margin-top:10px;
}
/* ---------- Purchase ---------- */
.pdp2026-purchase {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: 100%;
	margin:0;
}

.pdp2026-buy {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	width: 100%;
}

.pdp2026-stock-status {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.pdp2026-stock-status__text {
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: -0.013rem;
	color: var(--pdp2026-ink);
}

.pdp2026-atc {
	display: flex;
    width: 100%;
    height: 5.6rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    overflow: visible;
    /* The ink moved to .pdp2026-atc__skin so the surface can scale on hover
       without dragging the label and price with it. !important mirrors the
       declaration it replaces, which needed it to win here. */
    background-image: none !important;
    background-color: transparent !important;
    isolation: isolate;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2.4rem;
    letter-spacing: 0.60px;
    text-transform: uppercase;
    color: #fff !important;
    cursor: pointer;
    border-radius: 0 !important;
	border: 1px solid transparent !important;
	transition: background-color .5s ease;
    position:relative;
}

/* ---- Add to Bag surface, from the motion prototype's .atb ----
   Three layers rather than one background:
     .skin        the ink surface; scales and lifts a shadow on hover
     .skin::before a slow sheen drifting across it
     .fill        a darker gradient wiping in from the left on hover
   The old single :after shine is replaced by the sheen, which is wider,
   lower-contrast and on a 6.5s cycle rather than 3.5s. */
.pdp2026-atc__skin {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: #43413e;
	pointer-events: none;
	transition: transform 0.55s var(--atb-ease-out), box-shadow 0.55s var(--atb-ease-out);
}

.pdp2026-atc__skin::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 70%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(255, 248, 235, 0) 0%,
		rgba(255, 248, 235, 0.025) 22%,
		rgba(255, 248, 235, 0.08) 38%,
		rgba(255, 250, 242, 0.16) 50%,
		rgba(255, 248, 235, 0.08) 62%,
		rgba(255, 248, 235, 0.025) 78%,
		rgba(255, 248, 235, 0) 100%
	);
	transform: translateX(-110%);
	opacity: 0;
	animation: atb-sheen 6.5s cubic-bezier(0.45, 0.05, 0.35, 1) 0.4s infinite;
}

/* base.css hides every empty element -- "div:empty { display: none }" -- and
   this layer is empty by design, being pure surface. Two classes to clear that
   rule's (0,1,1) specificity. The skin needs no such override: it is never
   empty, since this sits inside it. */
.pdp2026-atc .pdp2026-atc__fill {
	display: block;
}

.pdp2026-atc__fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #2f2c29, #353230 55%, #2f2c29);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.6s var(--atb-ease-io);
}

@keyframes atb-sheen {
	0% {
		transform: translateX(-110%);
		opacity: 0;
	}
	8% {
		opacity: 1;
	}
	48% {
		opacity: 1;
	}
	56%,
	100% {
		transform: translateX(160%);
		opacity: 0;
	}
}

/* Hover only where hovering is real; on touch :hover sticks after a tap. */
@media (hover: hover) {
	.pdp2026-atc:not([disabled]):not([aria-disabled='true']):hover .pdp2026-atc__skin {
		transform: scale(1.025, 1.08);
		box-shadow: 0 16px 32px -18px rgba(40, 35, 30, 0.7);
	}

	.pdp2026-atc:not([disabled]):not([aria-disabled='true']):hover .pdp2026-atc__fill {
		transform: scaleX(1);
		transform-origin: left;
	}

	.pdp2026-atc:not([disabled]):not([aria-disabled='true']):hover:active .pdp2026-atc__skin {
		transform: scale(1.008, 1.03);
		transition-duration: 0.15s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pdp2026-atc__skin,
	.pdp2026-atc__fill {
		transition: none;
	}

	.pdp2026-atc__skin::before {
		animation: none;
	}
}
/* .pdp2026-atc:hover {
	background: #fff !important;
    color: #43413e !important;
	border-color: #43413e !important;
}

.pdp2026-atc:hover .pdp2026-atc__price-was {
	color: #43413e !important;
} */

.pdp2026-atc[disabled],
.pdp2026-atc[aria-disabled='true'] {
	cursor: not-allowed;
	opacity: 0.5;
}
.pdp2026-atc span, .pdp2026-atc .pdp2026-atc__price-now,
.pdp2026-atc .pdp2026-atc__price-was {
    scale: 1;
    display: inline-block;
    transition: scale 0.3s ease;
}


/* click--animation */
.pdp2026-atc.loading,
.pdp2026-atc.loading[aria-disabled='true'] {
	opacity: 1;
	cursor: progress;
}

.pdp2026-atc__skin::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(244, 223, 170, 0.45), rgba(244, 223, 170, 0) 70%);
	transform: scale(0);
	opacity: 0;
	pointer-events: none;
	z-index: 2;
}

.pdp2026-atc.loading .pdp2026-atc__skin::after {
	animation: pdp2026-atc-ripple 0.9s var(--atb-ease-out) forwards;
}

@keyframes pdp2026-atc-ripple {
	0% {
		transform: scale(0);
		opacity: 1;
	}
	100% {
		transform: scale(70);
		opacity: 0;
	}
}

.pdp2026-atc .pdp2026-atc__label,
.pdp2026-atc .pdp2026-atc__price {
	transition: opacity 0.35s var(--atb-ease-io), transform 0.5s var(--atb-ease-io);
}

.pdp2026-atc.loading .pdp2026-atc__label,
.pdp2026-atc.loading .pdp2026-atc__price {
	opacity: 0;
	transform: translateY(-8px);
}

.pdp2026-atc .loading-overlay__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2rem;
	height: 2rem;
	margin: -1rem 0 0 -1rem;
	display: block;
	pointer-events: none;
}

.pdp2026-atc .loading-overlay__spinner.hidden {
	display: none;
}

.pdp2026-atc .loading-overlay__spinner .spinner {
	display: block;
	width: 100%;
	height: 100%;
}

.pdp2026-atc .loading-overlay__spinner .path {
	stroke: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.pdp2026-atc.loading .pdp2026-atc__skin::after {
		animation: none;
	}

	.pdp2026-atc .pdp2026-atc__label,
	.pdp2026-atc .pdp2026-atc__price {
		transition-duration: 0.01s;
	}
}
/* .pdp2026-atc:hover span, .pdp2026-atc:hover .pdp2026-atc__price-now,
.pdp2026-atc:hover .pdp2026-atc__price-was {
        scale: 0.9;
        transition: scale 0.3s ease;
} */

.pdp2026-atc__price {
    display: flex;
    align-items: center;
    min-width: 2.9rem;
    justify-content: flex-end;
    gap: .6rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2.4rem;
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Inter';
}

@media screen and (min-width: 750px) {
	.pdp2026-purchase {
	gap: 2.4rem;
}
	.pdp2026-stock-status__text {
		font-size: 1.5rem;
		letter-spacing: -0.015rem;
	}
	.pdp2026-atc {
		height: 6.4rem;
		padding: 0 3.2rem;
		font-size: 1.8rem;
		letter-spacing: .144rem;
	}
	.pdp2026-atc__price {
		font-size: 1.8rem;
	}
}

/* With a discount running the button shows both prices (Figma 279:4103/4104). */
.pdp2026-atc__price-was {
	color: rgba(255, 253, 251, 0.5);
	text-decoration: line-through;
	text-decoration-skip-ink: none;
}

/* Waiting on a size: label only, no price, not clickable. */
.pdp2026-atc--awaiting-size {
	cursor: not-allowed;
}

/* ---------- Notify me (sold out) ---------- */
/* The row hosts whichever state Klaviyo is showing. The frame -- border, fixed
   height, clipping -- belongs to the capture form alone: Klaviyo swaps its
   confirmation message into this same wrapper, and the frame was boxing that
   in and clipping its first line.

   pdp2026-notify.js sets the modifier from what the embed actually rendered.
   The :has() twin covers the moment before that script runs, so the form is
   never briefly unframed. */
.pdp2026-notify {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
}

.pdp2026-notify--form,
.pdp2026-notify:has(input[type='email']) {
	height: 5.6rem; /* Figma 123:3603 -- mobile frame is 56 */
	overflow: hidden;
	border: 1px solid var(--pdp2026-ink, #43413e);
}

.pdp2026-notify__email {
	flex: 1 0 0;
	min-width: 1px;
	height: 100%;
	padding: 0 0 0 1.6rem;
	border: 0;
	background: none;
	font-size: 1.6rem;
	color: var(--pdp2026-ink);
}

.pdp2026-notify__email::placeholder {
	color: rgba(67, 65, 62, 0.65) !important;
}

.pdp2026-notify__submit {
	display: flex;
	width: 20rem;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: 0 2rem;
	border: 0;
	background-image: linear-gradient(
		90deg,
		#43413e 0%,
		#5b5855 50%,
		#43413e 100%
	);
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: 0.108rem;
	text-transform: uppercase;
	color: #fffdfb;
	cursor: pointer;
}

/* Klaviyo nests several kl-private-reset-css wrappers between the embed and the
   controls. They are plain blocks, so height:100% on the field had nothing to
   resolve against and it collapsed to 0. Stretch the whole chain instead of
   guessing at the depth -- the class names are generated, the nesting is not
   contractual, and this holds whatever it renders. */
.pdp2026-notify--form [class*='klaviyo-form-'],
.pdp2026-notify--form [class*='kl-private-reset-css'],
.pdp2026-notify--form form,
.pdp2026-notify--form form > div,
.pdp2026-notify--form form > div > div {
	display: flex;
	flex: 1 0 0;
	min-width: 0;
	height: 100%;
	align-items: stretch;
	margin: 0;
	padding: 0;
	background: none !important;
	border: 0 !important;
}

/* Klaviyo lays its form out as a column -- the email block and the button block
   stack as two 31px rows inside the frame. The design puts them side by side,
   so the row container is turned horizontal and its children made full height.
   This is the one place the embed's own layout has to be overridden; everything
   else above is just letting the height through. */
.pdp2026-notify--form form > div {
	flex-direction: row !important;
	align-items: stretch !important;
}

.pdp2026-notify--form form > div > div {
	height: 100% !important;
	align-self: stretch;
}

/* The two blocks inside the row: field grows, button is a fixed 200 wide
   (Figma 279:982). Klaviyo gives them an equal split, so both need pinning. */
.pdp2026-notify--form form > div > div {
	height: 100% !important;
}

.pdp2026-notify--form form > div > div:first-of-type {
	flex: 1 0 0 !important;
	min-width: 0;
}
.pdp2026-notify--form form > div > div:last-of-type {
    flex: 0 0 118px !important;
    width: 118px !important;
    max-width: 118px;
}
/* Inside the field block Klaviyo stacks the input above its validation message,
   which halved the 62px frame and left the input 31 high. Lay that block out as
   a row and take the message out of flow, below the row, so it can still be
   read without squeezing the field. */
.pdp2026-notify--form [class*='klaviyo-emailinput'] {
	position: relative;
	flex-direction: row !important;
	align-items: stretch !important;
}

.pdp2026-notify--form [class*='klaviyo-emailinput'] > div {
	position: absolute !important;
	top: 100%;
	left: 0;
	width: 100%;
	height: auto !important;
}

.pdp2026-notify--form [class*='klaviyo-emailinput'] input {
    flex: 1 0 0 !important;
    height: 100% !important;
    font-family: 'Inter', sans-serif !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    letter-spacing: 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 20px !important;
	color: #43413e !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Klaviyo styles the placeholder separately, so the input rule above never
   reached it -- that is where the wide tracking and the fallback face in the
   live render came from. Figma: Inter Regular, 14/20 mobile, 16 desktop,
   rgba(67,65,62,0.65), no tracking. */
.pdp2026-notify--form [class*='klaviyo-emailinput'] input::placeholder {
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 20px !important;
	letter-spacing: 0 !important;
	color: rgba(67, 65, 62, 0.65) !important;
	opacity: 1 !important;
	text-transform: none !important;
}

.pdp2026-notify--form [class*='klaviyo-emailinput'] input:focus {
	outline: none;
}

.pdp2026-notify--form [class*='klaviyo-emailinput'] input:focus-visible {
	outline: 1px solid #43413e;
	outline-offset: -3px;
}

/* The button sits 16px tall inside a 62px block until it is told to fill it. */
.pdp2026-notify--form [class*='klaviyo-button'],
.pdp2026-notify--form form button {
	height: 100% !important;
	width: 100% !important;
	flex: 1 0 0 !important;
}

.pdp2026-notify--form [class*='klaviyo-form-'] label {
	display: none;
}

/* Klaviyo puts kl-private-reset-css on the button as well as the wrappers, so
   the wrapper reset above matches it at (0,2,0) and strips the gradient.
   Chaining both of the button's own class hooks is (0,3,0) and wins cleanly --
   better than excluding the controls from that reset, which is what broke the
   row layout on the previous attempt: they take their height from it. */
.pdp2026-notify--form [class*='kl-private-reset-css'][class*='klaviyo-form-button'] {
	padding: 0 2rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-image: linear-gradient(
		90deg,
		#43413e 0%,
		#5b5855 50%,
		#43413e 100%
	) !important;
	/* Figma stacks the gradient over a solid #43413e fill. */
	background-color: #43413e !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: left !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 16px !important;
	letter-spacing: 0.78px !important;
	text-transform: uppercase !important;
	color: #fffdfb !important;
	cursor: pointer;
}

.pdp2026-notify--form [class*='kl-private-reset-css'][class*='klaviyo-form-button']:focus-visible {
	outline: 1px solid #fffdfb !important;
	outline-offset: -4px;
}

@media screen and (min-width: 750px) {
.pdp2026-notify--form,
.pdp2026-notify:has(input[type='email']) {
	height: 6.4rem;
}
.pdp2026-notify--message {
	min-height: 6.4rem;
}
.pdp2026-notify--form [class*='kl-private-reset-css'][class*='klaviyo-form-button'] {
	font-size: 15px !important;
	line-height: normal !important;
	letter-spacing: 0.9px !important;
}
.pdp2026-notify--form form > div > div:last-of-type {
	flex: 0 0 20rem !important;
	width: 20rem !important;
	max-width: 20rem;
}
.pdp2026-notify--form [class*='klaviyo-emailinput'] input,
.pdp2026-notify--form [class*='klaviyo-emailinput'] input::placeholder {
	font-size: 16px !important;
	line-height: normal !important;
}
}

/* The confirmation -- Figma 1116:242, "Notify Me / Confirmed".

   It keeps the form's frame rather than replacing it: same border, same
   height, same 16px inset, so the row resolves in place instead of becoming a
   different object. Two lines, 4px apart, left aligned and vertically centred
   -- Inter Medium 16 over Inter Regular 14 at ink-65.

   min-height rather than the design's fixed 64, so copy that wraps on a
   narrow phone grows the frame instead of spilling out of it.

   Klaviyo writes its own type inline on every element it renders, so each
   declaration here has to be !important to be reached, and the rows are
   addressed by position because the class names are generated. */
.pdp2026-notify--message {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 5.6rem;
	padding: 0.8rem 1.6rem;
	border: 1px solid var(--pdp2026-ink, #43413e);
}

.pdp2026-notify--message [class*='klaviyo-form-richtext'] p {
	margin: 0 !important;
	text-align: left !important;
}

.pdp2026-notify--message [class*='klaviyo-form-richtext'] span {
	font-family: 'Inter', sans-serif !important;
	font-style: normal !important;
	text-transform: none !important;
}

/* First line: what happened. */
.pdp2026-notify--message [data-testid='form-row']:first-child span {
	font-size: 1.6rem !important;
	font-weight: 500 !important;
	line-height: 2rem !important;
	letter-spacing: -0.016rem !important;
	color: var(--pdp2026-ink) !important;
}

/* The rest: what happens next, stepped back from it. */
.pdp2026-notify--message [data-testid='form-row']:not(:first-child) {
	margin-top: 0.4rem;
}

.pdp2026-notify--message [data-testid='form-row']:not(:first-child) span {
	font-size: 1.4rem !important;
	font-weight: 400 !important;
	line-height: 2rem !important;
	letter-spacing: -0.014rem !important;
	color: var(--pdp2026-ink-65) !important;
}

/* ------------------------------------------------------------------
   Sold-out stock status -- Figma 279:976
   16px dot + 8px gap + Inter Medium 15, -0.15px, #43413e.
   16px between the status row and the notify frame.
   Scoped to the sold-out state only; the pre-order status is untouched.
   ------------------------------------------------------------------ */
/* :not([hidden]) so this never fights the JS that hides the status row
   when a variant comes back in stock. */
.pdp2026-buy--sold-out .pdp2026-stock-status--soldout:not([hidden]) {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0;
}

.pdp2026-buy--sold-out .pdp2026-stock-status--soldout .pdp2026-stock-status__text {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 500;
	font-style: normal;
	line-height: normal;
	letter-spacing: -0.15px;
	color: #43413e;
	white-space: nowrap;
}

/* Pulse: the solid centre stays put and the 10% halo breathes out from it.
   The halo already fills the 16px box, so the svg is allowed to overflow
   or the expanding ring would be clipped flat at the edges. */
.pdp2026-buy--sold-out .pdp2026-stock-status--soldout .icon-pdp2026-status,
.pdp2026-stock-status--final .icon-pdp2026-status {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	overflow: visible;
}

.pdp2026-buy--sold-out .pdp2026-stock-status--soldout .icon-pdp2026-status circle:first-child,
.pdp2026-stock-status--final .icon-pdp2026-status circle:first-child {
	transform-box: fill-box;
	transform-origin: center;
	animation: pdp2026-status-pulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pdp2026-status-pulse {
	0% {
		transform: scale(0.5);
		opacity: 1;
	}
	70% {
		transform: scale(1.25);
		opacity: 0;
	}
	100% {
		transform: scale(1.25);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pdp2026-buy--sold-out .pdp2026-stock-status--soldout .icon-pdp2026-status circle:first-child,
	.pdp2026-stock-status--final .icon-pdp2026-status circle:first-child {
		animation: none;
	}
}

/* ---------- Service bullets + details links ---------- */
.pdp2026-service {
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
	width: 100%;
}

.pdp2026-service__bullets {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pdp2026-service__bullet {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.6rem;
	letter-spacing: -0.015rem;
	color: var(--pdp2026-ink);
}

/* The asset points down; the design rotates it to point right. */
.icon-pdp2026-bullet {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	transform: rotate(-90deg);
}

.icon-pdp2026-status {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.pdp2026-service__links {
	display: flex;
	gap: 1.6rem;
	width: 100%;
}

.pdp2026-service__link {
	font-size: 1.5rem;
	line-height: 2rem;
	letter-spacing: -0.015rem;
	color: var(--pdp2026-ink);
	text-decoration: underline;
	text-underline-position: from-font;
	white-space: nowrap;
}

/* ---------- Bundle / set pieces (Figma 279:2619) ---------- */
.pdp2026-set {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.pdp2026-set__label {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.6rem;
	letter-spacing: 0.024rem;
	text-transform: uppercase;
	color: var(--pdp2026-ink);
}

.pdp2026-set__pieces {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: 100%;
}

.pdp2026-piece {
	display: flex;
	gap: 1.6rem;
	align-items: flex-start;
	width: 100%;
}

.pdp2026-piece__image {
	flex: 0 0 6rem;
	width: 6rem;
	height: 8rem;
	overflow: hidden;
}

.pdp2026-piece__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pdp2026-piece__info {
	display: flex;
	flex: 1 0 0;
	min-width: 1px;
	flex-direction: column;
	align-self: stretch;
}

/* Name at the top, options on the thumbnail's bottom edge: the design holds
   them apart across the image's 80px. Only those two -- the pre-order row
   sits outside this, because as a third item here the spare height was shared
   between all three and a piece with no options pushed its row nearly 50px
   below the name. */
.pdp2026-piece__block {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: 8rem;
}

.pdp2026-piece__top {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	width: 100%;
}

.pdp2026-piece__name-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.8rem;
	width: 100%;
	line-height: 2rem;
}

/* The thumbnail is a link now, so it has to fill the fixed 6rem x 8rem box the
   image used to fill on its own. */
.pdp2026-piece__image-link {
	display: block;
	width: 100%;
	height: 100%;
}

.pdp2026-piece__name {
	flex: 1 0 0;
	min-width: 1px;
	margin: 0;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 2rem;
	color: var(--pdp2026-ink);
	/* It is an <a> now; keep it looking like the heading it replaced. */
	text-decoration: none;
}

@media (hover: hover) {
	.pdp2026-piece__name:hover {
		text-decoration: underline;
		text-underline-offset: 2px;
	}
}

.pdp2026-piece__price {
	display: flex;
	gap: 0.4rem;
	justify-content: flex-end;
	font-size: 1.3rem;
	line-height: 2rem;
	white-space: nowrap;
}

.pdp2026-piece__price-was {
	font-weight: 400;
	color: var(--pdp2026-ink-65);
	text-decoration: line-through;
	text-decoration-skip-ink: none;
}

.pdp2026-piece__price-now {
	font-weight: 500;
	color: var(--pdp2026-ink);
}

.pdp2026-piece__meta {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.6rem;
	color: var(--pdp2026-ink-65);
}

.pdp2026-piece__bottom {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	width: 100%;
}

/* "Pieces in this set may ship separately." -- Figma 249:361 on a phone,
   279:4610 inside the desktop set (279:4355). Shown only when a piece in the
   set is on pre-order; hidden it takes no space at all, so a fully in-stock
   set keeps the spacing it has today.

   Phone: 12/16, 22px under the last piece. Desktop: 14/19, and 32px under
   it -- the design measures the pieces ending at 472 against the purchase
   group at 504. The 16px down to the buy button is the same at both. */
.pdp2026-set__split-note {
	margin: 2.2rem 0 1.6rem;
	font-family: 'Inter', sans-serif;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.6rem;
	color: rgba(67, 65, 62, 0.8);
}

.pdp2026-set__split-note[hidden] {
	display: none;
}

@media screen and (min-width: 768px) {
	.pdp2026-set__split-note {
		margin: 3.2rem 0 1.6rem;
		font-size: 1.4rem;
		line-height: 1.9rem;
	}
}

/* A piece's pre-order row.

   The gap follows what the row comes after, not the breakpoint: 8px under
   the name when the piece has no options (Figma 279:4355 desktop, 249:199
   mobile), 12px under the options when it has them (279:3243). The snippet
   renders it inside __top in the first case and after __block in the second,
   so the two rules below say exactly that.

   The shared .ettika-preorder-note carries the PDP row's own margins,
   including a negative bottom that pulls it up against the price -- wrong
   here, so both are restated. Two classes deep so they win wherever the
   shared rule happens to sit in the file. */
/* 0.4 and not 0.8: __top is a flex column with a 0.4rem gap of its own, and
   a margin adds to that gap rather than replacing it. The two make the 8px
   the design measures from the name. */
.pdp2026-piece__top .pdp2026-piece__preorder {
	margin: 0.4rem 0 0;
}

.pdp2026-piece__info > .pdp2026-piece__preorder {
	margin: 1.2rem 0 0;
}

/* Pieces use 20px swatches against the 28px on a simple product. */
.pdp2026-swatches--sm {
	gap: 0.8rem;
	min-height: 2.4rem;
}

.pdp2026-swatches--sm .pdp2026-swatch {
	width: 2rem;
	gap: 0.3rem;
}

.pdp2026-swatches--sm .pdp2026-swatch__chip {
	width: 2rem;
	height: 2rem;
}

.pdp2026-swatches--sm .pdp2026-swatch::after {
	height: 1px;
}

.pdp2026-sizes--sm {
	gap: 0.4rem;
}

.pdp2026-sizes--sm .pdp2026-size {
	height: 2.8rem;
	font-size: 1.2rem;
}

/* Colourway links to sibling set products behave like swatches but navigate. */
.pdp2026-swatch--link {
	text-decoration: none;
}

/* ---------- Accordion (Figma 278:337) ---------- */
.pdp2026-accordion {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 100%;
    margin: 0 0 24px;
}

/* The spacers are part of the panel's natural height, not something added
   once it is open. Gated on .is-open they vanished the instant the class came
   off, so the copy jumped up 24px before the height animation had started --
   which is what made closing feel broken. The panel is clipped at 0fr when
   closed, so carrying them always costs nothing. */
.pdp2026-accordion__content::before,
.pdp2026-accordion__content::after {
  content: "";
  display: block;
  height: 1.2rem;
}


.pdp2026-accordion__item {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

.pdp2026-accordion__trigger {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

.pdp2026-accordion__caret {
	display: flex;
	flex: 0 0 8px;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 8px;
}

.pdp2026-accordion__caret .icon-pdp2026-bullet {
	transform: rotate(-90deg);
	transition: transform 0.2s ease;
}

.pdp2026-accordion__item.is-open .pdp2026-accordion__caret .icon-pdp2026-bullet {
	transform: rotate(0deg);
}

.pdp2026-accordion__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.pdp2026-accordion__icon img {
	display: block;
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.pdp2026-accordion__title {
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.6rem;
	letter-spacing: -0.015rem;
	color: var(--pdp2026-ink);
}

.pdp2026-accordion__content {
	padding-left: 1.6rem;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 2.1rem;
	color: rgba(67, 65, 62, 0.8);
}

.pdp2026-accordion__content p {
	margin: 0 0 1.2rem;
}

.pdp2026-accordion__content p:last-child {
	margin-bottom: 0;
}

.pdp2026-accordion__content strong,
.pdp2026-accordion__content b {
	font-weight: 600;
	color: var(--pdp2026-ink);
	    font-family: 'Inter' !important;
}

.pdp2026-accordion__content a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

@media screen and (min-width: 750px) {
	.pdp2026-accordion {
		gap: 1.6rem;
		margin: 0 0 32px;
	}
	.pdp2026-accordion__title {
		font-size: 1.5rem;
	}
	.pdp2026-accordion__content {
		font-size: 1.5rem;
		line-height: 2.4rem;
	}
	.pdp2026-accordion__item.is-open .pdp2026-accordion__content::after {
		height: .8rem;
	}

	.pdp2026-accordion__item.is-open .pdp2026-accordion__content::before,
	.pdp2026-accordion__item.is-open .pdp2026-accordion__content::after {
	height: 1.6rem;
	}
}

/* ---------- Product switchers ----------
   custom.color_variants_list / custom.size_variants_list are metaobject lists
   whose entries point at other products, so these navigate instead of changing
   a variant. Drawn exactly like the swatches and chips they stand in for.
   The real option radios stay in the DOM, hidden, so variant resolution keeps
   working -- that is what --replaced hides. */
.pdp2026-option--replaced {
	display: none;
}

/* ---------- Watch bands (Figma 1049:2) ----------
   A watch's choice is the whole band, so the swatch is a photograph of the
   watch rather than a round chip. It is still a .pdp2026-swatch, so the
   selected underline, its hover preview and the lift all come from the shared
   rules; only the chip's proportions and the row's gap differ.

   The cream plate is the design's: these are cut-outs on transparency, and on
   white they would float with no card to sit in -- the 2026 design drops the
   bordered card the live theme drew around them. */
.pdp2026-swatches--band {
	gap: 0.8rem;
}

.pdp2026-swatch--band {
	width: 4.8rem;
	/* 4px between the card and its underline */
	gap: 0.4rem;
}

.pdp2026-swatch--band .pdp2026-swatch__chip {
	width: 4.8rem;
	height: 6.4rem;
	background-color: #f7f4ee;
}

.pdp2026-swatch--link,
.pdp2026-size--link {
	text-decoration: none;
}

/* Selected. These never showed: the only rule they had set opacity, while the
   line itself is still scaleX(0) from the base rule, so nothing was visible. */
.pdp2026-swatch--link.is-selected::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.pdp2026-size--link.is-selected {
	border-color: var(--pdp2026-ink);
}

.pdp2026-size--link {
	flex: 1 0 auto;
	min-width: 4.8rem;
	padding: 0 1.2rem;
}

/* ---------- Information drawer triggers (Figma 279:140) ----------
   Plain underlined links, not the bordered buttons with arrow glyphs that
   product-block-tabs draws. The .drawer--opener--* hooks are kept so the
   existing drawer script still opens the panels. */
.pdp2026-drawers {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    width: 100%;
    margin: 0 0 40px;
}

.pdp2026-drawers__link {
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 2rem;
	letter-spacing: -0.015rem;
	color: var(--pdp2026-ink);
	text-decoration: underline;
	text-underline-position: from-font;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

/* The 2025 trigger styling must not reach these. product-block-tabs ships its
   rules in an inline <style> in the body, so at equal specificity it wins on
   document order -- every property it sets has to be restated here, at higher
   specificity, including the ones that look redundant. */
.pdp2026-drawers .drawer--opener--btn {
	display: inline-flex;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	justify-content: flex-start;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 2rem;
	letter-spacing: -0.015rem;
	text-transform: none;
	color: var(--pdp2026-ink);
	text-decoration: underline;
	text-underline-position: from-font;
}

.pdp2026-drawers .product--info-arrows {
	display: none;
}

@media screen and (min-width: 750px) {
	.pdp2026-drawers {
		margin: 0 0 56px;
	}

	.pdp2026-drawers .drawer--opener--btn{
		font-size:1.5rem;
	}
}

/* ---------- Information drawer panels ----------
   product-block-tabs shipped these in an inline <style> in the body. Here they
   are part of the stylesheet, so they cache with it and no longer compete with
   it on document order. */
   
   
/* Above the sticky site header, which is a z-index: 1000 stacking context of
   its own -- 100 and 111 sat under it, so the drawer's title bar was covered
   even once pdp2026-drawers.js moved the drawer out to the body. The overlay
   dims the header too, as it does on the live theme. */
.product--info--drawer--slide--overlay {
	position: fixed;
	inset: 0;
	z-index: 1090;
	background: rgba(67, 65, 62, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	display: block !important;
    margin: 0 !important;
}

.product--info--drawer--slide--overlay--active {
	opacity: 1;
	visibility: visible;
}

.product--info--drawer--slide {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1100;
	display: flex;
	margin:0;
	flex-direction: column;
	width: min(48rem, 100%);
	height: 100%;
	background: #fffdfb;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.35s;
}

.product--info--drawer--slide--active {
	transform: translateX(0);
	visibility: visible;
}

.product--info--drawer--slide--header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
	padding: 2.4rem;
	border-bottom: 1px solid var(--pdp2026-ink-20);
}

.product--info--drawer--title {
	margin: 0;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 2.4rem;
	color: var(--pdp2026-ink);
}

.product--info--drawer--close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.product--info--drawer--close svg {
	width: 1.6rem;
	height: 1.6rem;
}

.product--info--drawer--slide--content {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 2.4rem;
	font-size: 1.5rem;
	line-height: 2.4rem;
	color: rgba(67, 65, 62, 0.8);
}

.product--info--drawer--bottom--description {
	margin-top: 2.4rem;
}

@media screen and (max-width: 749px) {
	.product--info--drawer--slide {
		width: 100%;
	}
}

/* ---------- Accordion open/close animation ----------
   grid-template-rows 0fr -> 1fr animates to the panel's natural height without
   measuring it in JS, so it stays smooth however long the copy is. */
.pdp2026-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pdp2026-accordion__item.is-open .pdp2026-accordion__panel {
  grid-template-rows: 1fr;
}

.pdp2026-accordion__panel > .pdp2026-accordion__content {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .pdp2026-accordion__panel {
    transition: none;
  }
}

/*----- main--product--2026--css -----*/
.product--mobile--info {
    padding: 16px 24px;
	    width: 100%;
}
/* Breadcrumbs, matching the live theme.

   Same markup breadcrumb-v2 already renders -- the separators are drawn with
   ::after rather than added to the snippet, which keeps this CSS-only.

   Live hides the first crumb on a phone and reverses each row so the slash
   leads the link: "/ Starfish Rings" instead of the full trail. From 750px up
   the trail reads left to right with a slash after every crumb but the last.

   One deliberate difference: live hides the first crumb unconditionally, so a
   product filed under a single collection gets an empty breadcrumb on mobile.
   :not(:last-child) keeps that one crumb. */
.breadcrumbs_list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 0;
	margin: 0 0 4px;
	list-style: none;
	/* Set on the list, not on the links: the last crumb is the current page and
	   so is plain text, which would otherwise keep the inherited 16px. */
	font-family: 'Inter';
	font-size: 12px;
	line-height: 18px;
	letter-spacing: -0.12px;
	font-weight: 500;
	color: #8E8D8B;
}

.breadcrumbs_list li {
	display: flex;
	align-items: center;
	gap: 8px;
	/* the slash is the ::after, so reversing puts it in front of the link */
	flex-direction: row-reverse;
}

.breadcrumbs_list li::after {
	content: '/';
}

/* The first crumb goes only when there is another collection behind it.
   nth-last-child(2) rather than :not(:last-child), because the product crumb
   is always the real last child -- without this a product filed under a single
   collection would show nothing at all on a phone, as it does on live. */
.breadcrumbs_list li:first-child:not(:nth-last-child(2)) {
	display: none;
}

/* The product itself: the current page, so no slash after it, and hidden on a
   phone where the title is the heading immediately below. */
.breadcrumbs_current {
	display: none;
}

.breadcrumbs_list .breadcrumbs_current::after {
	content: none;
}

.breadcrumbs_list a {
	color: inherit;
	text-decoration: none;
}

.breadcrumbs_list a:hover {
	text-decoration: underline;
}
.product-title-wishlist-wrapper {
    display: flex;
    justify-content: space-between;
	align-items: flex-start;
    gap: 0 16px;
}
.product-title-wishlist-wrapper.product-title-wishlist-wrapper_short {
    flex-wrap: wrap;
}
.product__title .pdp_short_description {
  flex: 0 0 100%;
}
button.swym-button.swym-add-to-wishlist.product-wishlist {
    position: static !important;
    overflow: inherit;
	height: auto;
	margin: 4px 0 0;
	opacity:1;
}
.product-wishlist {
  position: relative;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.product-wishlist.swym-added {
  opacity: 1;
}

.product-wishlist::after {
  content: none !important;
}

.product-wishlist__icon {
  width: 16.62px;
  height: 24px;
}

.product-wishlist__icon path {
  fill: transparent;
  transition: fill 0.3s;
}

/* Hover inks the heart to a quarter-strength #43413e, so it previews the saved
   state instead of nudging the glyph out of line with the title beside it.

   Skipped once saved: that path is already solid #43413e, and fading it to 25%
   under the cursor would read as the save coming undone. */
@media (hover: hover) {
  .product-wishlist:not(.swym-added):hover .product-wishlist__icon path {
    fill: rgba(67, 65, 62, 0.25);
  }
}

.product-wishlist.swym-added .product-wishlist__icon {
  animation: product-wishlist-pop 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.product-wishlist.swym-added .product-wishlist__icon path {
  fill: #43413e;
}

@keyframes product-wishlist-pop {
  40% {
    transform: scale(1.3);
  }
}

.product-wishlist__burst {
  position: absolute;
  inset: -6px;
  pointer-events: none;
}

.product-wishlist__burst i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 6px;
  background: #c99a4b;
  border-radius: 2px;
  opacity: 0;
}

.product-wishlist.swym-added .product-wishlist__burst i {
  animation: product-wishlist-burst 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes product-wishlist-burst {
  0% {
    opacity: 1;
    transform: rotate(var(--r)) translateY(-6px);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--r)) translateY(-16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-wishlist__icon path {
    transition-duration: 0.01s;
  }

  .product-wishlist.swym-added .product-wishlist__icon,
  .product-wishlist.swym-added .product-wishlist__burst i {
    animation: none;
  }
}
.product-subtitle, .product__title .pdp_short_description {
    font-size: 10px;
    line-height: 12px;
    margin: 4px 0 0;
    font-family: 'Inter';
    font-weight: 500;
    color: rgba(67, 65, 62, 0.65);
    letter-spacing: 0.8px;
	text-transform: uppercase;
}
.product .stamped-product-reviews-badge.stamped-main-badge {
  line-height: 0;
  position: static;
  margin: 8px 0 0;
  top: 40px;
  right: 36px;
  white-space: nowrap;
}

.product .stamped-main-badge .stamped-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-family: 'Inter';
}

.product .stamped-main-badge .stamped-starrating,
.product .stamped-main-badge .stamped-badge-caption {
  display: none !important;
}

.product .stamped-main-badge .stamped-badge::before {
  content: "";
  display: block;
  flex: none;
  width: 16.07px;
  height: 15px;
  background: #43413e;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.07 15'%3E%3Cpath d='M8.03571 12.5122L12.0517 14.88C12.6853 15.2535 13.4668 14.6984 13.2987 13.995L12.2327 9.53177L15.7815 6.52841C16.3408 6.05548 16.0417 5.15779 15.3047 5.09699L10.6333 4.71012L8.80593 0.497995C8.5174 -0.165998 7.55403 -0.165998 7.2655 0.497995L5.43816 4.71012L0.76677 5.09699C0.0296926 5.15779 -0.269341 6.05548 0.289933 6.52841L3.83874 9.53177L2.77272 13.995C2.60462 14.6984 3.38614 15.2535 4.01977 14.88L8.03571 12.5122Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.07 15'%3E%3Cpath d='M8.03571 12.5122L12.0517 14.88C12.6853 15.2535 13.4668 14.6984 13.2987 13.995L12.2327 9.53177L15.7815 6.52841C16.3408 6.05548 16.0417 5.15779 15.3047 5.09699L10.6333 4.71012L8.80593 0.497995C8.5174 -0.165998 7.55403 -0.165998 7.2655 0.497995L5.43816 4.71012L0.76677 5.09699C0.0296926 5.15779 -0.269341 6.05548 0.289933 6.52841L3.83874 9.53177L2.77272 13.995C2.60462 14.6984 3.38614 15.2535 4.01977 14.88L8.03571 12.5122Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform-origin: 50% 55%;
  transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.product .stamped-main-badge .stamped-badge::after {
  content: attr(data-rating);
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0;
  color: #43413e;
}

@media (hover: hover) {
  .product .stamped-main-badge:hover .stamped-badge::before {
    transform: rotate(72deg) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product .stamped-main-badge .stamped-badge::before {
    transition-duration: 0.01s;
  }
}
.product .price__container {
    margin: 0;
    display: flex;
    align-items: center;
	flex-wrap: wrap;
    gap: 4px;
}
.price--large {
    font-size: 15px;
    line-height: 20px;
    color: #43413E;
    letter-spacing: -0.30px;
    font-weight: 600;
    margin: 0;
}
.price--on-sale .price__sale {
	gap: .4rem;
}
.price--on-sale .price-item--regular {
    text-decoration: line-through;
    color: rgba(67, 65, 62, 0.65);
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: -0.30px;
    font-weight: 400;
}
.price-item.price-item--sale {
    color: #43413E;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.30px;
}
    span.save-badge.saving-custom-badge{
    border-radius: 0;
      background: #F2B9B6;
      color: #43413E;
      text-align: center;
      font-family: Inter;
      font-size: 11px;
      font-style: normal;
      font-weight: 600;
      line-height: 16px;
      text-transform: uppercase;
      letter-spacing: 0;
      padding: 2px 6px;
      margin-left: 2px;
  }
  .no-sitewide-discount .save-badge.saving-custom-badge {
	display:none;
  }
.tagline_under_price {
    color:#9A6B14;
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    margin: 0;
    letter-spacing: 0;
    flex: 0 0 100%;
    width: 100%;
}
/* will--take--care--of--these--later */
.product .shopify-app-block {
    margin: 0;
}
div#price-template--23949024034991__main {
    margin: 0 !important;
}
.desktop--items--new {
	display:none;
}
.product__info-wrapper .breadcrumbs_list,
.product__info-wrapper .product__title ,
.product__info-wrapper .product-subtitle,
.product__info-wrapper .price--large {display:none;}

.product_switch_main {
	margin:0 0 16px !important;
}
@media screen and (min-width: 750px) {
.mobile--items--new {
	display:none;
}
.desktop--items--new,
.product__info-wrapper .product__title ,
.product__info-wrapper .product-subtitle,
.product__info-wrapper .price--large {
	display:block;
}
/* Separate from the block above: the trail is a flex row, and that rule's
   two-class specificity would otherwise reset it to block. */
.product__info-wrapper .breadcrumbs_list {
	display: flex;
} 
.product .stamped-main-badge .stamped-badge {
    gap: .6rem;
}
.product .stamped-main-badge .stamped-badge::after {
    font-size: 15px;
    line-height: 15px;
}
.product .stamped-main-badge .stamped-badge::before {
    font-size: 20px;
    width: 16px;
    height: 15px;
}
.breadcrumbs_list {
    line-height: 21px;
    padding: 0;
    margin: 0 0 16px;
	font-size: 14px;
	letter-spacing: -0.14px;
}

/* The whole trail, read left to right, with no slash after the last crumb.

   One breakpoint, 750px, for the whole switch. Live uses two -- it brings the
   product crumb back at 640px but keeps hiding the first crumb until 768 --
   which between those widths reads "/ Starfish Rings Starfish Luxe Ring".
   Switching once avoids that in-between and matches live at the two widths
   that matter. */
.breadcrumbs_list li {
	flex-direction: row;
}

.breadcrumbs_list li:first-child:not(:nth-last-child(2)) {
	display: flex;
}

.breadcrumbs_current {
	display: flex;
}

.breadcrumbs_list li:last-child::after {
	content: none;
}


.product-subtitle, .product__title .pdp_short_description {
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 1.04px;
	margin: 8px 0 0;
}
.product .price__container {
    gap: 6px;
}
.price--large {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.36px;
	margin: 0 0 32px;
}
.product .stamped-product-reviews-badge.stamped-main-badge {
    position: static;
	margin:6px 0 0;
}
.price--on-sale .price-item--regular,
.price-item.price-item--sale {
    font-size: 1.8rem;
    line-height: 2.4rem;
    letter-spacing: -0.36px;
}
      span.save-badge.saving-custom-badge{
        padding: 4px 6.43px;
        font-size: 12px;
        line-height: 16px;
        margin-left: 6px;
    }
.tagline_under_price {
        font-size: 14px;
        line-height: 20px;
    }
}

/* ---------- Seen On You (Figma 278:179 desktop, 145:637 mobile) ---------- */
.pdp2026-ugc {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	width: 100%;
	margin: 48px 0 0;
}

.pdp2026-ugc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
	width: 100%;
}

.pdp2026-ugc__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 2rem;
	letter-spacing: 0.06rem;
	text-transform: uppercase;
	color: var(--pdp2026-ink);
}

/* Figma "Controls": 64px wide, two 12px arrows, space-between (= 40px gap). Same on desktop and mobile. */
.pdp2026-ugc__controls {
	display: flex;
	align-items: center;
	flex: none;
	gap: 4rem;
}

/* Doubled selector: theme button[type="button"] rules (0,1,1) otherwise add padding and widen the arrow box. */
.pdp2026-ugc__controls .pdp2026-ugc__nav {
	position: relative;
	display: block;
	flex: none;
	width: 1.2rem;
	height: 1.2rem;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* Larger tap target without changing the 12px layout box. */
.pdp2026-ugc__controls .pdp2026-ugc__nav::before {
	content: "";
	position: absolute;
	inset: -1rem;
}

/*
 * The chevron path sits in a 24px viewBox and draws a 6x12 glyph with a 1px
 * stroke - exactly the Figma glyph - so the SVG stays at its native 24px and
 * overflows the 12px button. Offsets put the glyph where Figma has it: the
 * next arrow's point on the right edge, the prev arrow's point on the left edge.
 */
.pdp2026-ugc__controls .pdp2026-ugc__nav .icon-pdp2026-chevron {
	position: absolute;
	top: -0.6rem;
	left: -0.4rem;
	width: 2.4rem;
	height: 2.4rem;
	max-width: none;
	pointer-events: none;
}

/* One chevron asset; the design's left arrow is it mirrored. */
.pdp2026-ugc__controls .pdp2026-ugc__nav--prev .icon-pdp2026-chevron {
	left: -0.8rem;
	transform: scaleX(-1);
}

/* The design's disabled chevron is the same path at 0.3 stroke opacity. */
.pdp2026-ugc__controls .pdp2026-ugc__nav[disabled] {
	opacity: 0.3;
	cursor: default;
}

.pdp2026-ugc__track {
	display: flex;
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* a sideways flick here must not become a browser back gesture */
	overscroll-behavior-x: contain;
}

.pdp2026-ugc__track::-webkit-scrollbar {
	display: none;
}

.pdp2026-ugc__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* Figma UGC card: 168 x 296 on both desktop and mobile. Doubled selector so theme
   button rules can't collapse the video cards (they are <button>s). */
.pdp2026-ugc__track .pdp2026-ugc__card {
	position: relative;
	display: block;
	width: 16.8rem;
	height: 29.6rem;
	padding: 0;
	border: 0;
	overflow: hidden;
	margin: 0;
	border-radius: 0;
	background: var(--pdp2026-ink);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.pdp2026-ugc__track .pdp2026-ugc__card--static {
	cursor: default;
}

.pdp2026-ugc__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pdp2026-ugc__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
	pointer-events: none;
}

.pdp2026-ugc__handle {
	position: absolute;
	left: 1.2rem;
	bottom: 1.2rem;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.6rem;
	color: #fffdfb;
	white-space: nowrap;
}

.pdp2026-ugc__play {
	position: absolute;
	right: 1.2rem;
	bottom: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.2rem;
	height: 1.2rem;
}

/* The asset points up; the design turns it to point right. */
.pdp2026-ugc__play .icon-pdp2026-play {
	transform: rotate(90deg);
}

/* Figma "Pager": 12px radios, 8px apart on desktop (4px on mobile). */
.pdp2026-ugc__pager {
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
 * Doubled selector on purpose: theme-wide button rules such as
 * button[type="button"] or ".product button" (0,1,1) outrank a single class
 * and were overriding height/padding/radius, squashing the dot.
 */
.pdp2026-ugc__pager .pdp2026-ugc__dot {
	position: relative;
	display: block;
	flex: none;
	width: 12px;
	min-width: 12px;
	max-width: 12px;
	height: 12px;
	min-height: 12px;
	max-height: 12px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--pdp2026-ink);
	border-radius: 50%;
	background: transparent;
	box-sizing: border-box;
	font-size: 0;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* Figma "Radio / Selected": 6px filled centre inside the 12px ring. */
.pdp2026-ugc__pager .pdp2026-ugc__dot.is-active::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pdp2026-ink);
	transform: translate(-50%, -50%);
}

@media screen and (max-width: 989px) {
	.pdp2026-ugc__title {
		font-size: 1.4rem;
		letter-spacing: 0.056rem;
	}
	/*
	 * Figma 145:637: cards sit on the 24px page gutter but the row runs edge to
	 * edge, so neighbouring cards peek in on both sides.
	 * The track bleeds out of the content column to the full screen width on
	 * both sides (negative margin), its padding puts the first card back on the
	 * gutter, and scroll-padding makes every snap land a card on the gutter too,
	 * leaving the previous card visible on the left and the next on the right.
	 * cqw = width of the content column (container set below), so the gutter is
	 * (100vw - 100cqw) / 2 wherever it is measured. The % lines are fallbacks
	 * for browsers without container units (no left snap offset there).
	 */
	.pdp2026-ugc {
		container-type: inline-size;
	}
	.pdp2026-ugc__track {
		gap: 0.8rem;
		margin-inline: calc(50% - 50vw);
		padding-inline: calc(50vw - 50%);
		margin-inline: calc(50cqw - 50vw);
		padding-inline: calc(50vw - 50cqw);
		scroll-padding-inline: calc(50vw - 50cqw);
	}
	/* Mobile pager group is 44px wide: 3 x 12px + 2 x 4px. */
	.pdp2026-ugc__pager {
		gap: 4px;
	}
}

/* ---------- Video popup ---------- */
.pdp2026-ugc-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.4rem;
	background: rgba(23, 22, 21, 0.82);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.pdp2026-ugc-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.pdp2026-ugc-modal__inner {
	position: relative;
	max-width: min(42rem, 100%);
	max-height: 100%;
}

.pdp2026-ugc-modal__video {
	display: block;
	width: 100%;
	max-height: 85vh;
	background: #000;
}

.pdp2026-ugc-modal__close {
	position: absolute;
	top: -4rem;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	padding: 0;
	border: 0;
	background: none;
	color: #fffdfb;
	cursor: pointer;
}

.pdp2026-ugc-modal__close svg {
	width: 1.6rem;
	height: 1.6rem;
}

@media (prefers-reduced-motion: reduce) {
	.pdp2026-ugc__track {
		scroll-behavior: auto;
	}
	.pdp2026-ugc-modal {
		transition: none;
	}
}

/*----- new--pdp--2026--css ----- */
.main-product-section {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 0 48px;
	background: #ffffff;
}

.product__info-wrapper {
    padding-left:24px;
	padding-right:24px;
}
@media screen and (min-width: 750px) {
	.main-product-section {
		padding: 0 24px 120px;
	}
	.product__info-wrapper {
		padding-left:4.3rem;
		padding-right:0;
	}
}

/* rebuy-wdget--css */
#rebuy-widget-139389 .primary-title {
    font-family: Inter;
    font-weight: 600;
    text-align: left;
    color: #43413E;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

  #rebuy-widget-139389 {
    --pw-ink: #43413e;
    --pw-card-border: #e4ded6;
    --pw-card-border-mobile: #d9d9d8;
    --pw-select-border: rgba(67, 65, 62, 0.2);
    --pw-font: "Inter", var(--font-body-family, sans-serif), sans-serif;
    font-family: var(--pw-font);
    color: var(--pw-ink);
    -webkit-font-smoothing: antialiased;
	max-width:100%;
  }

  /* ---------- Wrappers: reset Rebuy padding/backgrounds ---------- */
  #rebuy-widget-139389 .rebuy-widget-container,
  #rebuy-widget-139389 .rebuy-widget-content {
    position: relative;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  /* ---------- Heading: "PAIRS WITH" ---------- */
  #rebuy-widget-139389 .primary-title {
    margin: 0 0 16px;
    padding: 0;
    font-family: var(--pw-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.6px; /* 4% */
    text-transform: uppercase;
    text-align: left;
    color: var(--pw-ink);
  }
  #rebuy-widget-139389 .primary-title::before,
  #rebuy-widget-139389 .primary-title::after { content: none; }

  /* ---------- Desktop: 3-column grid (Splide stays mounted) ---------- */
  #rebuy-widget-139389 .rebuy-product-grid {
    margin: 0;
    padding: 0;
  }
  #rebuy-widget-139389 .splide__track {
    margin: 0;
    padding: 0 !important;
  }
  #rebuy-widget-139389 .splide__list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    height: auto;
    transform: none !important;
  }

  /* ---------- Card ---------- */
  #rebuy-widget-139389 .rebuy-product-block {
    display: flex !important;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
    width: auto !important;
    min-width: 0;
    height: auto;
    margin: 0 !important;
    padding: 12px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--pw-card-border);
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    overflow: hidden;
  }

  /* Image: full width x 170, contained */
  #rebuy-widget-139389 .rebuy-product-media {
    flex: 0 0 auto;
    width: 100% !important;
    max-width: none;
    height: 170px;
    margin: 0;
    padding: 0;
    background: #fff;
  }
  #rebuy-widget-139389 .rebuy-product-image {
    display: block;
    width: 100%;
    height: 100%;
  }
  #rebuy-widget-139389 .rebuy-product-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: contain;
    object-position: center;
	border: 0;
    border-radius: inherit;
  }

  /* Info + options column; options pinned to card bottom */
  #rebuy-widget-139389 .rebuy_product_info_wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  #rebuy-widget-139389 .rebuy-product-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  /* Title */
  #rebuy-widget-139389 .rebuy-product-title {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--pw-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.14px;
    color: var(--pw-ink);
    text-decoration: none;
    text-transform: none;
    word-break: break-word;
  }
  #rebuy-widget-139389 .rebuy-product-title:hover { text-decoration: none; }

  /* Vendor/material line is not in the design */
  #rebuy-widget-139389 .rebuy-product-vendor { display: none; }

  /* Price */
  #rebuy-widget-139389 .rebuy-product-price,
  #rebuy-widget-139389 .rebuy_sale_price {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
  }
  #rebuy-widget-139389 .rebuy-product-price .rebuy-money {
    font-family: var(--pw-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.13px;
    color: var(--pw-ink);
    white-space: nowrap;
  }
  #rebuy-widget-139389 .rebuy-product-price .rebuy-money.compare-at {
    font-weight: 400;
    text-decoration: line-through;
    opacity: 0.6;
  }

  /* ---------- Options row: [Size ▾] [ADD] or full-width [ADD] ---------- */
  #rebuy-widget-139389 .rebuy-product-options {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 12px 0 0;
    padding: 0;
  }
  #rebuy-widget-139389 .rebuy-product-option {
    margin: 0;
    padding: 0;
    min-width: 0;
  }
  /* Empty option holders (only Vue comments inside) */
  #rebuy-widget-139389 .rebuy-product-option:empty,
  #rebuy-widget-139389 .rebuy-product-actions:empty { display: none; }

  /* Material swatch: hidden when there is only one choice, kept when a
     product really has several, so variant selection is never lost */
  #rebuy-widget-139389 .rebuy-product-option.material:not(:has(.variant-option > .option-swatch ~ .option-swatch)) {
    display: none;
  }
  #rebuy-widget-139389 .rebuy-product-option.material { flex: 0 0 100%; }

  /* Size dropdown (Figma: 13px regular, 1px 20% ink border, chevron) */
  #rebuy-widget-139389 .rebuy-product-option.size { flex: 1 1 0; }
  #rebuy-widget-139389 .rebuy-product-option.size select {
	-webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 36px;
    margin: 0 !important;
    padding: 0 24px 0 12px;
    box-sizing: border-box;
    font-family: var(--pw-font);
    font-size: 13px !important;
    font-weight: 400;
    line-height: normal;
    color: var(--pw-ink);
    background: #fff url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4'%3E%3Cpath d='M.5.5 3 3 5.5.5' fill='none' stroke='%2343413e' stroke-width='.9'/%3E%3C/svg%3E) no-repeat right 10px center / 6px 3.5px;
    border: 1px solid var(--pw-select-border);
    border-radius: 0 !important;
    box-shadow: none;
    cursor: pointer;
    text-overflow: ellipsis;
    outline: none !important;
}

  /* ADD button */
  #rebuy-widget-139389 .rebuy-button {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: auto;
    height: 36px;
    margin:0;
    padding: 8px 4px;
    box-sizing: border-box;
    font-family: var(--pw-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.52px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--pw-ink) !important;
    background: #fff !important;
    border: 1px solid var(--pw-ink) !important;
    border-radius: 0 !important;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  #rebuy-widget-139389 .rebuy-button span {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #rebuy-widget-139389 .rebuy-button:hover:not([disabled]) {
    color: #fff !important;
    background: var(--pw-ink) !important;
  }
  #rebuy-widget-139389 .rebuy-button:focus-visible,
  #rebuy-widget-139389 .rebuy-product-option.size select:focus-visible,
  #rebuy-widget-139389 .rebuy-product-title:focus-visible {
    outline: 2px solid var(--pw-ink);
    outline-offset: 2px;
  }
  #rebuy-widget-139389 .rebuy-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
#rebuy-widget-139389 .rebuy-product-actions {
    margin: 0 !important;
}
  /* Carousel controls are a mobile-only element in the design */
  #rebuy-widget-139389 .splide__arrows,
  #rebuy-widget-139389 .splide__pagination {
    display: none !important;
  }

  .rebuy_sale_price .rebuy_sale_price_percentage {
    padding: 4px 9.12px;
    background: #ed7b68;
    color: #fff !important;
    text-align: center;
    font-family: Inter !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    text-transform: uppercase;
    display: block;
    border-radius: 0px;
    margin-left: 0;
    position: absolute;
    top: 4px;
    letter-spacing: 0;
    left: 4px;
}


  #rebuy-widget-314223 .rebuy-button {
    position: relative;
  }
  #rebuy-widget-314223 .rebuy-btn-label.is-hidden-label {
    visibility: hidden;
  }
  #rebuy-widget-314223 .rebuy-btn-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: rebuy-btn-spin 0.7s linear infinite;
    box-sizing: border-box;
  }
  @keyframes rebuy-btn-spin {
    to { transform: rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    #rebuy-widget-314223 .rebuy-btn-spinner { animation-duration: 1.6s; }
  }

  /* =========================================================
     MOBILE  (Figma 145:592) — change 767px to match the PDP breakpoint
     ========================================================= */
  @media screen and (max-width: 767px) {
    #rebuy-widget-139389 .primary-title {
      font-size: 13px;
      letter-spacing: 0.52px;
      padding-right: 80px; /* room for arrows */
    }

    /* Back to a Splide row: 168px cards, 8px gap, next card peeks in */
    #rebuy-widget-139389 .rebuy-product-grid.splide { position: static; }
    #rebuy-widget-139389 .splide__list {
      display: flex !important;
      gap: 0;
    }
    #rebuy-widget-139389 .rebuy-product-block {
      flex: 0 0 168px;
      width: 168px !important;
      min-height: 260px;
      margin: 0 8px 0 0 !important;
      padding: 8px 16px 20px;
      gap: 0;
      border-color: var(--pw-card-border-mobile);
    }
    #rebuy-widget-139389 .rebuy-product-block:last-child { margin-right: 0 !important; }

    /* Image 106 x 139, centred, 8px from top, 5px above info */
    #rebuy-widget-139389 .rebuy-product-media {
      width: 106px !important;
      height: 139px;
      margin: 0 auto 5px;
    }

    /* Title: single line with ellipsis */
    #rebuy-widget-139389 .rebuy-product-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #rebuy-widget-139389 .rebuy-button,
    #rebuy-widget-139389 .rebuy-product-option.size select { height: 32px; }
    #rebuy-widget-139389 .rebuy-button { padding: 8px 12px; }

    /* Arrows: top-right on the heading line, 12px chevrons, 40px apart */
    #rebuy-widget-139389 .splide__arrows {
      display: flex !important;
      align-items: center;
      gap: 40px;
      position: absolute;
      top: 4px;
      right: 0;
      z-index: 2;
    }
    #rebuy-widget-139389 .splide__arrow {
      position: static;
      transform: none;
      display: block;
      width: 12px;
      height: 12px;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: var(--pw-ink);
      opacity: 1;
      cursor: pointer;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.4.4 9 6l-5.6 5.6' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
              mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.4.4 9 6l-5.6 5.6' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    }
    #rebuy-widget-139389 .splide__arrow--prev { transform: scaleX(-1); }
    #rebuy-widget-139389 .splide__arrow svg { display: none; }
    #rebuy-widget-139389 .splide__arrow:disabled {
      opacity: 0.3;
      cursor: default;
    }

    /* Dots: 12px rings, 4px apart, 16px under cards, left aligned */
    #rebuy-widget-139389 .splide__pagination {
      display: flex !important;
      justify-content: flex-start;
      gap: 4px;
      position: static !important;
      width: auto;
      margin: 16px 0 0 !important;
      padding: 0 !important;
      transform: none;
    }
    #rebuy-widget-139389 .splide__pagination li {
      margin: 0;
      line-height: 0;
      list-style: none;
    }
    #rebuy-widget-139389 .splide__pagination__page {
      display: block;
      width: 12px;
      height: 12px;
      margin: 0;
      padding: 0;
      border: 1px solid var(--pw-ink);
      border-radius: 50%;
      background: transparent;
      opacity: 1;
      transform: none !important;
    }
    #rebuy-widget-139389 .splide__pagination__page.is-active {
      background: radial-gradient(circle, var(--pw-ink) 0 3px, transparent 3.5px);
    }
	  .rebuy_sale_price .rebuy_sale_price_percentage {
		padding: 2px 7.12px;
		font-size: 11px !important;
	}
  }

  @media (prefers-reduced-motion: reduce) {
    #rebuy-widget-139389 .rebuy-button { transition: none; }
  }
/* Pre-order ship estimate (Figma 278:915) -- the sold-out status row in amber. */
.pdp2026-stock-status--preorder[hidden] {
	display: none;
}

.pdp2026-stock-status--preorder .pdp2026-stock-status__text {
	color: var(--pdp2026-ink);
}

/* The pre-order dot pulses: the outer ring expands from the solid centre and
   fades. It animates fill-opacity rather than opacity -- the ring carries
   fill-opacity="0.1" in the markup, so fading element opacity from 0.85 was
   fading something already at 10% and the pulse was invisible. transform-box
   keeps the origin on the circle rather than the SVG viewport. */
.pdp2026-stock-status--preorder .icon-pdp2026-status circle:first-of-type {
	transform-origin: center;
	transform-box: fill-box;
	animation: pdp2026-status-pulse 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

@keyframes pdp2026-status-pulse {
	0% {
		transform: scale(0.4);
		fill-opacity: 0.55;
	}
	70% {
		transform: scale(1);
		fill-opacity: 0;
	}
	100% {
		transform: scale(1);
		fill-opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pdp2026-stock-status--preorder .icon-pdp2026-status circle:first-of-type {
		animation: none;
	}
}

/* ---------- Sold-out size selected (Figma 279:734) ----------
   Both the button and the notify row are in the DOM; this decides which shows,
   so picking a sold-out size swaps them without a round trip. */
.pdp2026-buy .pdp2026-notify,
.pdp2026-buy .pdp2026-stock-status--soldout {
	display: none;
}

.pdp2026-buy--sold-out .pdp2026-notify,
.pdp2026-buy--sold-out .pdp2026-stock-status--soldout {
	display: flex;
}

.pdp2026-buy--sold-out .pdp2026-atc,
.pdp2026-buy--sold-out .shopify-payment-button {
	display: none;
}

/* A sold-out size is still selectable -- the design shows size 8 chosen and
   sold out (279:967): the dark selected border and full opacity, keeping the
   strike. Only unselected sold-out chips are faded. */
.pdp2026-option__input.disabled + .pdp2026-size,
.pdp2026-option__input:disabled + .pdp2026-size {
	cursor: pointer;
}

.pdp2026-option__input.disabled:checked + .pdp2026-size,
.pdp2026-option__input:disabled:checked + .pdp2026-size {
	opacity: 1;
	border-color: var(--pdp2026-ink);
}

/* ==========================================================================
   Rebuy "Pairs With" widget – Figma: Ettika 2027
   Desktop  : node 278:144  (min-width: 780px)
   Mobile   : node 145:592  (below 780px)

   Scoped to the Pairs With widget only via its grid aria-label, so other
   Rebuy widgets on the site are not affected. No markup or slider logic
   is changed – CSS only.
   ========================================================================== */

/* ---------- Shared (all breakpoints) ---------- */

#rebuy-widget-314223 {
  --pw-text: #43413e;
  --pw-btn-border: #43413e;
  --pw-select-border: rgba(67, 65, 62, 0.2);
  margin: 0;
  padding: 0;
  background: transparent;
  max-width: 100%;
}

#rebuy-widget-314223 .rebuy-widget-content {
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}

/* Elements not present in the Figma design */
#rebuy-widget-314223 .rebuy-modal-close,
#rebuy-widget-314223 .rebuy-product-vendor,
#rebuy-widget-314223 .rebuy-product-option.material,
#rebuy-widget-314223 .rebuy-product-option.size:empty,
#rebuy-widget-314223 .rebuy-product-actions:empty,
#rebuy-widget-314223 .powered-by-rebuy {
  display: none !important;
}

/* Title: "PAIRS WITH" */
#rebuy-widget-314223 .primary-title {
  margin: 0 0 16px;
  padding: 0;
  font-weight: 600;
  line-height: 20px;
  color: var(--pw-text);
  text-transform: uppercase;
  text-align: left;
}

/* Grid wrapper (Splide root) – relative so the arrows can sit in the header row */
#rebuy-widget-314223 .rebuy-product-grid {
  position: relative;
  margin: 0;
  padding: 0;
  display:block;
}

/* Card */
#rebuy-widget-314223 .rebuy-product-block {
  display: flex !important;
  flex-direction: column-reverse;
  box-sizing: border-box;
  margin-bottom: 0;
  background: #fff;
  text-align: left;
  overflow: hidden;
  border-radius:0;
  width: 100% !important;
  border: 1px solid #d9d9d8;
  position: relative;
}

/* Media */
#rebuy-widget-314223 .rebuy-product-media {
  position: relative;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

#rebuy-widget-314223 .rebuy-product-image {
  display: block !important;
  width: 100% !important;
  height: 100%;
}

#rebuy-widget-314223 .rebuy-product-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: contain;
    margin: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
	transition: transform .4s ease;
}
/* 
#rebuy-widget-314223 .rebuy-product-block:hover .rebuy-product-image img {
    transform: scale(.96);
} */

/* Info wrapper fills the card so the CTA row always sits at the bottom */
#rebuy-widget-314223 .rebuy_product_info_wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

#rebuy-widget-314223 .rebuy-product-info {
display: flex !important;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    width: 100% !important;
}

/* Product title */
#rebuy-widget-314223 .rebuy-product-title,
#rebuy-widget-314223 .rebuy-product-title .rebuy-product-title-link {
display: block;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px;
    letter-spacing: -0.14px;
    color: var(--pw-text) !important;
    text-decoration: none;
    text-transform: none;
    font-family: 'Inter';
}

#rebuy-widget-314223 .rebuy-product-title {
	  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* Price */
#rebuy-widget-314223 .rebuy-product-price,
#rebuy-widget-314223 .rebuy_sale_price {
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 0;
  gap: 4px;
}

#rebuy-widget-314223 .rebuy-money {
    font-size: 13px !important;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.13px;
    color: var(--pw-text) !important;
}

#rebuy-widget-314223 .rebuy-money.compare-at {
	color:rgba(67, 65, 62, 0.5) !important;
	font-weight:500;
}

/* CTA row: [Size select] [ADD] – equal widths, 8px gap */
#rebuy-widget-314223 .rebuy-product-options {
display: flex !important;
    flex-direction: row;
    align-items: stretch;
    gap: 8px !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
}

#rebuy-widget-314223 .rebuy-product-actions {
	margin:0;
	width: 100% !important;
}

#rebuy-widget-314223 .rebuy-product-option.size {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Size dropdown */
#rebuy-widget-314223 .rebuy-select.variant-select {
  -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 22px 0 12px;
    border: 1px solid var(--pw-select-border);
    border-radius: 0 !important;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M0.5 0.5L3 3L5.5 0.5' stroke='%2343413E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center !important;
    background-size: 6px 4px;
    box-shadow: none;
    font-size: 14px !important;
    font-weight: 400;
    line-height: normal;
    color: var(--pw-text);
    cursor: pointer;
	outline: none;
	  appearance: none;
}

#rebuy-widget-314223 .rebuy-select.variant-select:focus-visible {
  border-color: var(--pw-btn-border);
}

/* ADD button */
#rebuy-widget-314223 .rebuy-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 11.2px 0;
  border: 1px solid var(--pw-btn-border);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  color: var(--pw-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.52px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 1;
  transition: color 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

#rebuy-widget-314223 .rebuy-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pw-btn-border);
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}

#rebuy-widget-314223 .rebuy-button span {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

#rebuy-widget-314223 .rebuy-button:not([disabled]):hover {
  color: #fff;
}

#rebuy-widget-314223 .rebuy-button:not([disabled]):hover::before {
  transform: translateY(0);
}

#rebuy-widget-314223 .rebuy-button:not([disabled]):focus {
  color: #fff;
}

#rebuy-widget-314223 .rebuy-button:not([disabled]):focus::before {
  transform: translateY(0);
}

#rebuy-widget-314223 .rebuy-button:not([disabled]):focus-visible {
  color: #fff;
}

#rebuy-widget-314223 .rebuy-button:not([disabled]):focus-visible::before {
  transform: translateY(0);
}

#rebuy-widget-314223 .rebuy-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  #rebuy-widget-314223 .rebuy-button,
  #rebuy-widget-314223 .rebuy-button::before {
    transition-duration: 0.01s;
  }
}

#rebuy-widget-314223 .rebuy-button:hover, #rebuy-widget-314223 .rebuy-button:focus {
	background:transparent;
}

/* ==========================================================================
   MOBILE  (below 780px) – Figma 145:592
   Card 168 x 260, 1px #d9d9d8, 8px gap, next card peeks
   ========================================================================== */
@media (max-width: 480.98px) {

  #rebuy-widget-314223 .primary-title {
    font-size: 13px;
    letter-spacing: 0.52px;
    padding-right: 80px; /* keep clear of the arrows */
  }

  #rebuy-widget-314223 .splide__track {
    overflow: hidden;
  }

    #rebuy-widget-314223 .rebuy-product-grid {
    container-type: inline-size;
  }

  #rebuy-widget-314223 .splide__track {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%) !important;
    margin-inline: calc(50cqw - 50vw);
    padding-inline: calc(50vw - 50cqw) !important;
  }

  /* Slides – Splide measures the rendered size, so this keeps its logic intact */
  #rebuy-widget-314223 .rebuy-product-block.splide__slide, #rebuy-widget-314223 .rebuy-product-block {
    width: 168px !important;
    min-width: 168px;
    min-height: 260px;
    margin-right: 8px !important;
    padding: 8px 16px 20px;
    border: 1px solid #d9d9d8;
  }

  #rebuy-widget-314223 .rebuy-product-media {
    width: 106px;
    height: 139px;
    margin: 0 auto 5px;
  }

  #rebuy-widget-314223 .rebuy-product-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	-webkit-line-clamp: 2;
  }

  #rebuy-widget-314223 .rebuy-product-options {
    height: 32px;
    margin-top: 12px;
  }

  #rebuy-widget-314223 .rebuy-button {
    padding: 7px 0;
  }

  /* ---- Arrows (in the header row, right aligned, 12px chevrons, 64px group) ---- */
  #rebuy-widget-314223 .splide__arrows {
    display: block;
  }

  #rebuy-widget-314223 .splide__arrow {
    position: absolute;
    top: -32px;
    bottom: auto;
    left: auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
    cursor: pointer;
  }

  /* Expand the tap target without moving the icon */
  /* #rebuy-widget-314223 .splide__arrow::after {
    content: "";
    position: absolute;
    inset: -14px;
  } */

  #rebuy-widget-314223 .splide__arrow--prev {
    right: 52px;
  }

  #rebuy-widget-314223 .splide__arrow--next {
    right: 0;
  }

  /* Replace Splide's default icon with the Figma chevron */
  #rebuy-widget-314223 .splide__arrow svg,
  #rebuy-widget-314223 .splide__arrow svg path {
    display: block;
	        fill: #43413E !important;
  }

  /* #rebuy-widget-314223 .splide__arrow::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid var(--pw-text);
    border-right: 1.5px solid var(--pw-text);
    box-sizing: border-box;
  }

  #rebuy-widget-314223 .splide__arrow--next::before {
    transform: translateX(-1px) rotate(45deg);
  }

  #rebuy-widget-314223 .splide__arrow--prev::before {
    transform: translateX(1px) rotate(-135deg);
  } */

  #rebuy-widget-314223 .splide__arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }

  /* ---- Pagination dots (left aligned, 16px below cards) ---- */
/* Rebuy widget 314223 pager -- same Figma spec as the PDP pager
     (1041:117 mobile): three 20 x 1px lines, 8px apart,
     active #000000, inactive #D9D9D8.
     Mobile only -- keep this inside the same mobile media query the
     original block lived in. Selectors unchanged; Splide still toggles
     .is-active, nothing in the markup or JS changes.
     The button stays 12px tall so the hit area and the space under the
     carousel don't move; the 1px line is painted across its centre. */

  #rebuy-widget-314223 .splide__pagination {
    position: static;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    transform: none;
    list-style: none;
  }

  #rebuy-widget-314223 .splide__pagination li {
    margin: 0;
    padding: 0;
    line-height: 0;
  }

  #rebuy-widget-314223 .splide__pagination__page {
    display: block;
    width: 20px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: linear-gradient(#d9d9d8, #d9d9d8) center / 100% 1px no-repeat;
    box-shadow: none;
    opacity: 1;
    transform: none;
    cursor: pointer;
  }

  #rebuy-widget-314223 .splide__pagination__page.is-active {
    background: linear-gradient(#000000, #000000) center / 100% 1px no-repeat;
    transform: none;
  }

  #rebuy-widget-314223 .splide__pagination__page:focus-visible {
    outline: 1px solid #43413e;
    outline-offset: 2px;
  }

  #rebuy-widget-314223 .rebuy-select.variant-select {
    font-size: 13px !important;
}
}

/* ==========================================================================
   DESKTOP  (min-width: 780px) – Figma 278:144
   3 equal cards, 12px gap, 1px #e4ded6, 12px padding, 170px image
   ========================================================================== */
@media (min-width: 481px) {
#rebuy-widget-314223 .rebuy-product-price,
#rebuy-widget-314223 .rebuy_sale_price {
  gap: 6px;
}
#rebuy-widget-314223 .rebuy-money {
    font-size: 14px !important;
    letter-spacing: -0.14px;
}
  #rebuy-widget-314223 .primary-title {
    font-size: 15px;
    letter-spacing: 0.6px;
  }

  #rebuy-widget-314223 .splide__track {
    overflow: visible;
  }

  /* Lay the existing list out as a 3-column row */
  #rebuy-widget-314223 .splide__list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    transform: none !important;
    margin: 0;
    padding: 0;
  }

  #rebuy-widget-314223 .rebuy-product-block.splide__slide, #rebuy-widget-314223 .rebuy-product-block {
    width: auto !important;
    min-width: 0;
    height: auto;
    margin: 0 !important; 
    padding: 12px !important;
    gap: 12px;
    border: 1px solid #e4ded6;
  }

  #rebuy-widget-314223 .rebuy-product-media {
    width: 100% !important;
    height: 148px;
  }

  #rebuy-widget-314223 .rebuy_product_info_wrapper {
    gap: 0;
  }

  #rebuy-widget-314223 .rebuy-product-title {
    white-space: normal;
    overflow-wrap: break-word;
  }

  #rebuy-widget-314223 .rebuy-product-options {
height: auto;	
        min-height: 40px;
  }

  /* No arrows or dots on desktop */
  #rebuy-widget-314223 .splide__arrows,
  #rebuy-widget-314223 .splide__pagination {
    display: none !important;
  }
}

/* ==========================================================================
   Ettika – Pre-Order Status note
   Figma: Ettika-2027 › Pre-Order Status
     Mobile  (node 622:2402) – 12px / 16px Inter Medium
     Desktop (node 588:786)  – 11px / 12px Inter Medium
   Shared: 12px status icon (10% halo + 6px dot), 6px gap, #43413E text
   ========================================================================== */

.ettika-preorder-note {
	--ettika-preorder-dot: #C08A3E;
	--ettika-preorder-halo: rgba(192, 138, 62, 0.1);
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 16px 0 -6px;
	width: 100%;
}

.ettika-preorder-note[hidden] {
	display: none;
}

.ettika-preorder-note .ettika-preorder-note__dot {
	position: relative !important;
	display: block !important;
	flex: 0 0 12px !important;
	align-self: center !important;
	box-sizing: border-box !important;
	width: 12px !important;
	height: 12px !important;
	min-width: 12px !important;
	min-height: 12px !important;
	max-width: 12px !important;
	max-height: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	transform: none !important;
	translate: none !important;
	rotate: none !important;
	scale: none !important;
	top: auto !important;
	left: auto !important;
	font-size: 0 !important;
	line-height: 0 !important;
	background: radial-gradient(
		circle at 50% 50%,
		var(--ettika-preorder-dot) 0,
		var(--ettika-preorder-dot) 2.6px,
		var(--ettika-preorder-halo) 3.4px,
		var(--ettika-preorder-halo) 5.6px,
		transparent 6px
	) !important;
	isolation: isolate;
}

.ettika-preorder-note .ettika-preorder-note__dot::before {
	content: none !important;
	display: none !important;
}

.ettika-preorder-note .ettika-preorder-note__dot::after {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	box-sizing: border-box !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	translate: none !important;
	rotate: none !important;
	scale: none !important;
	transform-origin: 50% 50% !important;
	background: radial-gradient(
		circle at 50% 50%,
		var(--ettika-preorder-dot) 0,
		var(--ettika-preorder-dot) 5.6px,
		transparent 6px
	) !important;
	z-index: -1;
	opacity: 0;
	transform: scale(0.5);
	backface-visibility: hidden;
	will-change: transform, opacity;
	pointer-events: none;
	animation: ettika-preorder-pulse 2s cubic-bezier(0.25, 0.6, 0.35, 1) infinite;
}

@keyframes ettika-preorder-pulse {
	0% {
		opacity: 0.35;
		transform: scale(0.5);
	}
	80%,
	100% {
		opacity: 0;
		transform: scale(1.5);
	}
}

.ettika-preorder-note__text {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	line-height: 12px;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0;
	white-space: nowrap;
	color: var(--pdp2026-ink, #43413E);
}

@media screen and (min-width: 768px) {
	.ettika-preorder-note {
		margin: 12px 0 -6px;
	}

	.ettika-preorder-note__text {
		font-size: 12px;
		line-height: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ettika-preorder-note .ettika-preorder-note__dot::after {
		animation: none;
		opacity: 0;
	}
}

/* Mouse-drag affordance for the scroll-snap carousels (ettika-carousel.js).
   Touch and trackpad need none of this -- they are the native scroller. */
.pdp2026-ugc__track[data-carousel],
.pdp-kmnx__track[data-carousel] {
	cursor: grab;
}

/* Native image/link dragging has to be off before the gesture starts, not once
   we have decided it is a drag -- by then the browser has already taken it. */
.pdp2026-ugc__track[data-carousel] img,
.pdp2026-ugc__track[data-carousel] a,
.pdp-kmnx__track[data-carousel] img,
.pdp-kmnx__track[data-carousel] a {
	-webkit-user-drag: none;
	user-drag: none;
}

.pdp2026-ugc__track.is-dragging,
.pdp-kmnx__track.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.pdp2026-ugc__track.is-dragging a,
.pdp2026-ugc__track.is-dragging img,
.pdp-kmnx__track.is-dragging a,
.pdp-kmnx__track.is-dragging img {
	pointer-events: none;
}


/* ---------- Rebuy 314223 recommendation cards ----------
   The same motion as the Kimonix cards, from the same prototype: the card
   lifts and shadows, the art scales, a second view cross-fades in, and the CTA
   fills by wiping up from below.

   Scoped to .ettika-rec-card, a static class on that one template. This file
   also styles every other Rebuy widget on the page, so an unscoped
   .rebuy-product-block rule would restyle all of them. */
.ettika-rec-card .rebuy-product-image {
	position: relative;
	overflow: hidden;
	display: block;
}

.ettika-rec-card__hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	pointer-events: none;
}

.ettika-rec-card__hover[hidden] {
	display: none;
}

/* Hover only where hovering is real: on touch :hover sticks after a tap and
   would strand a card lifted, showing its second image. */
@media (hover: hover) {
	.ettika-rec-card {
		transition: border-color 0.45s var(--ettika-rec-ease), box-shadow 0.6s var(--ettika-rec-ease),
			transform 0.6s var(--ettika-rec-ease);
	}

	.ettika-rec-card .ettika-rec-card__img,
	.ettika-rec-card__hover {
		transition: opacity 0.45s var(--ettika-rec-ease), transform 0.9s var(--ettika-rec-ease);
	}

	.ettika-rec-card:hover {
		border-color: rgba(67, 65, 62, 0.45);
		box-shadow: 0 18px 32px -24px rgba(40, 35, 30, 0.5);
		transform: translateY(-3px);
	}

	.ettika-rec-card:hover .ettika-rec-card__img,
	.ettika-rec-card:hover .ettika-rec-card__hover {
		transform: scale(1.02);
	}

	/* Only swap where there is a second view; otherwise the primary must not
	   fade out to nothing. */
	.ettika-rec-card--dual:hover .ettika-rec-card__hover {
		opacity: 1;
	}

	.ettika-rec-card--dual:hover .ettika-rec-card__img {
		opacity: 0;
	}
}

/* CTA: ink wipes up from below rather than the background switching, and the
   label crosses to white over the same 0.45s so the two land together. */
.ettika-rec-card .rebuy-button,
.ettika-rec-card .rebuy-button span {
	transition: color 0.45s var(--ettika-rec-ease-io);
}

.ettika-rec-card .rebuy-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ettika-rec-card .rebuy-button::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #43413e;
	transform: translateY(101%);
	transition: transform 0.45s var(--ettika-rec-ease-io);
}

/* The visible label is span.rebuy-btn-label, which carries its own colour, so
   setting colour on .rebuy-button does nothing to it -- the button's own
   computed colour cannot be changed at all, even from an id selector with
   !important. Target the span, where a plain class rule with !important does
   win. Without this the ink wiped up behind text that stayed dark.

   The wipe itself needs none of this: it is a pseudo-element with its own
   background, which nothing of Rebuy's touches. */
@media (hover: hover) {
	.ettika-rec-card .rebuy-button:not(:disabled):hover,
	.ettika-rec-card .rebuy-button:not(:disabled):hover span {
		color: #fff !important;
	}

	.ettika-rec-card .rebuy-button:not(:disabled):hover::before {
		transform: none;
	}
}

.ettika-rec-card .rebuy-button:not(:disabled):focus-visible,
.ettika-rec-card .rebuy-button:not(:disabled):focus-visible span {
	color: #fff !important;
}

.ettika-rec-card .rebuy-button:not(:disabled):focus-visible::before {
	transform: none;
}

.ettika-rec-card .rebuy-button:not(:disabled):active {
	transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
	.ettika-rec-card,
	.ettika-rec-card .ettika-rec-card__img,
	.ettika-rec-card__hover,
	.ettika-rec-card .rebuy-button,
	.ettika-rec-card .rebuy-button::before {
		transition: none;
	}

	.ettika-rec-card:hover,
	.ettika-rec-card:hover .ettika-rec-card__img,
	.ettika-rec-card:hover .ettika-rec-card__hover,
	.ettika-rec-card .rebuy-button:not(:disabled):active {
		transform: none;
	}
}


/* ---- Save for later, over the gallery (mobile) ----
   Figma 159:83 / 221:109: the icon sits inset from the top-right corner of the
   first gallery image, not beside the title. The design frame is 392 wide with
   a 252 image and the icon's right edge at 244, i.e. 8px in.

   Anchored to the slide's own width -- .product-main-slider-2026 .splide__slide
   is flex: 0 0 66.6% -- rather than to the wrapper's right edge, because the
   slide is narrower than the wrapper: the next image peeks in beside it.

   Not placed inside the slide itself: that first slide only renders when the
   selected variant has a featured media. */
/* The selector is this long, and !important, to clear an existing rule in this
   same file: button.swym-button.swym-add-to-wishlist.product-wishlist is
   declared position: static !important, which a single class cannot beat. The
   top/left below were resolving correctly all along and simply doing nothing
   against a static box. */
button.swym-button.swym-add-to-wishlist.product-wishlist--gallery {
	position: absolute !important;
}

/* Once inside the first slide the button travels with the gallery and needs
   no measuring: 8 from that slide's own corner. The slide is the containing
   block there, so the starting left is cleared and right takes over. */
.product-wishlist--gallery.product-wishlist--in-slide {
	top: 8px;
	right: 8px;
	left: auto;
}

/* The slide has to be the positioning context for the button it now holds.
   Scoped to the product gallery so no other Splide on the page is touched. */
.product__media-wrapper .splide__slide,
.product__media-wrapper .product__media-item {
	position: relative;
}

.product-wishlist--gallery {
	/* The design insets the icon 8px from the first image's top-right corner.

	   This left is only the starting value, used until ettika-gallery-save.js
	   moves the button into the first slide; it carries the slide's width as a
	   literal and Splide writes the real widths at runtime, so it is close
	   rather than exact. Keeping it means there is no jump before that runs. */
	top: 4px;
	left: calc(66.6% - 26px);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* 16x16 in the design, against the desktop button's 24. The bookmark is taller
   than it is wide, so height drives it and the width follows, rather than
   squashing the glyph into a square box. */
.product-wishlist--gallery .product-wishlist__icon {
	width: auto;
	height: 16px;
}

/* The two buttons hand over at 990: below it the gallery holds the save
   control, above it the title row does. They used to overlap -- the gallery
   button hid at 990 but the title-row one had no floor, so a tablet showed
   both at once (measured at 820px: the gallery icon and the title-row icon on
   screen together).

   Which button is which is decided by where it sits, not by its modifier
   class. Swym owns these elements once its script runs and nothing guarantees
   it leaves our class list alone, so a :not() on that modifier is a thread to
   hang the whole control on.

   The gallery button is also forced visible here. On an iPhone at 393px it
   computed display:none with the desktop breakpoint confirmed not matching,
   which leaves a rule outside this stylesheet -- Swym's own CSS is the
   candidate; it hides .swym-button until it has wired it up, and there are two
   buttons for one product on this page. Our placement is the one that should
   win below 990. */
@media screen and (max-width: 989px) {
	.product__info-wrapper .product-wishlist,
	product-info .product-wishlist:not(.product-wishlist--gallery) {
		display: none !important;
	}

	button.swym-button.swym-add-to-wishlist.product-wishlist--gallery,
	.product__media-wrapper .product-wishlist--gallery {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
}

@media screen and (min-width: 990px) {
	.product__media-wrapper .product-wishlist--gallery,
	.product-wishlist--gallery {
		display: none !important;
	}
}

/* ---------- Stamped reviews ----------
   The widget starts hidden and ettika-stamped-empty.js reveals it once Stamped
   reports a review count above zero, so a product with no reviews shows no
   reviews section at all. Hidden up front rather than hidden afterwards: the
   widget renders its empty state a second or two in, and collapsing it then
   would pull the page up under anyone reading below it.

   This stylesheet loads only from the 2026 product section, so the older
   templates that share the Stamped section are unaffected. */
#stamped-main-widget {
	display: none;
}

#stamped-main-widget.ettika-stamped--resolved {
	display: block;
}

/* ---------- Stamped reviews: the 2026 ink ----------
   The widget inherits a site-wide #847271 from the <style> block in
   theme.liquid -- a warm brown set on everything with !important. On the 2026
   PDP that reads as a lighter, different palette from the page it sits under,
   whose text, controls and stars are all --pdp2026-ink. So remap it here.

   Every rule needs !important and an id, because the declarations being
   overridden are !important and come later in the document than this
   stylesheet; without the id a tie would go to them on document order. Where
   theme.liquid already qualifies with #stamped-main-widget, one extra class
   carries the specificity.

   This stylesheet loads only from the 2026 product section, so the older
   templates keep the brown. The filled stars are already ink -- Stamped's own
   setting -- and are left alone. */
#stamped-main-widget .stamped-container,
#stamped-main-widget .stamped-container p,
#stamped-main-widget .stamped-summary-text,
#stamped-main-widget .stamped-summary-text-1,
#stamped-main-widget .stamped-summary-caption,
#stamped-main-widget .stamped-header-title,
#stamped-main-widget .stamped-reviews-filter,
#stamped-main-widget .stamped-review-header-title,
#stamped-main-widget .author,
#stamped-main-widget .stamped-verified-badge {
	color: var(--pdp2026-ink) !important;
}

/* Secondary lines -- dates, locations, counts -- step back rather than
   switching hue, as they do everywhere else on this page. */
#stamped-main-widget .stamped-review-header .review-location,
#stamped-main-widget .stamped-review-header .created,
#stamped-main-widget .stamped-review-header-byline .created,
#stamped-main-widget .summary-rating-count,
#stamped-main-widget .summary-rating-title {
	color: var(--pdp2026-ink-65) !important;
}

#stamped-main-widget
	.stamped-container[data-widget-show-product-variant='true']
	.stamped-review
	.stamped-review-product a {
	color: var(--pdp2026-ink-65) !important;
}

/* The rating breakdown draws its stars as ::before glyphs, so they are a
   colour rather than an icon fill. */
#stamped-main-widget .summary-rating:nth-child(1) .summary-rating-title:before,
#stamped-main-widget .summary-rating:nth-child(2) .summary-rating-title:before,
#stamped-main-widget .summary-rating:nth-child(3) .summary-rating-title:before,
#stamped-main-widget .summary-rating:nth-child(4) .summary-rating-title:before,
#stamped-main-widget .summary-rating:nth-child(5) .summary-rating-title:before {
	color: var(--pdp2026-ink) !important;
}

#stamped-main-widget .summary-rating-bar > div,
#stamped-main-widget .stamped-review-avatar {
	background: var(--pdp2026-ink) !important;
}

/* The verified-buyer tick. It is an icon-font glyph hung off the avatar's
   bottom-right corner, so it sits on the page rather than on the circle and
   stays legible in ink. */
#stamped-main-widget .stamped-review[data-verified='buyer'] .stamped-review-avatar::before {
	color: var(--pdp2026-ink) !important;
}

/* Ask a Question / Write a Review. The border was #ccd6e0, a blue-grey from
   Stamped's own defaults that belongs to no part of this page. */
#stamped-main-widget .stamped-container .stamped-summary-actions-newreview,
#stamped-main-widget .stamped-container .stamped-summary-actions-newquestion {
	color: var(--pdp2026-ink) !important;
	border-color: var(--pdp2026-ink-20) !important;
}

#stamped-main-widget .stamped-container .stamped-summary-actions-newreview:hover,
#stamped-main-widget .stamped-container .stamped-summary-actions-newquestion:hover {
	border-color: var(--pdp2026-ink) !important;
}

#stamped-main-widget .stamped-container ul.stamped-tabs li {
	color: var(--pdp2026-ink) !important;
}

/* The bar under the open tab was #a49694, Stamped's own accent -- a lighter
   brown than the label sitting on top of it. */
#stamped-main-widget .stamped-container ul.stamped-tabs li.active {
	border-bottom-color: var(--pdp2026-ink) !important;
}

/* Load More Reviews, dressed as the Kimonix card's Add button: outlined at
   rest, and on hover the ink wipes up from below while the label crosses to
   white over the same 0.45s, so the two land together.

   Filled ink was wrong at rest -- the only solid dark block on a page whose
   controls are all outlines -- and Stamped darkens its own label on hover, so
   dark text was landing on a dark button.

   One difference from .kmnx-card__add: there the fill is ::before, here the
   label is. Stamped gives the anchor font-size: 0 and writes "Load More
   Reviews" into a::before, so the fill has to be ::after, and the label's type
   has to be set on the pseudo rather than the button.

   Every declaration carries an id and !important: what it overrides is
   !important and sits later in the document than this stylesheet. */
#stamped-main-widget div[data-load-type='continue'] ul.stamped-pagination li.next a,
#stamped-main-widget div[data-widget-load-type='continue'] ul.stamped-pagination li.next a {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid var(--pdp2026-ink) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--pdp2026-ink) !important;
	transition: color 0.45s var(--ettika-rec-ease-io) !important;
}

#stamped-main-widget
	div[data-load-type='continue']
	ul.stamped-pagination
	li.next
	a::before,
#stamped-main-widget
	div[data-widget-load-type='continue']
	ul.stamped-pagination
	li.next
	a::before {
	font-family: Inter, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 16px !important;
	letter-spacing: 0.52px !important;
	text-transform: uppercase !important;
	color: inherit !important;
}

#stamped-main-widget
	div[data-load-type='continue']
	ul.stamped-pagination
	li.next
	a::after,
#stamped-main-widget
	div[data-widget-load-type='continue']
	ul.stamped-pagination
	li.next
	a::after {
	content: '' !important;
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--pdp2026-ink);
	transform: translateY(101%);
	transition: transform 0.45s var(--ettika-rec-ease-io);
}

/* Hover only where hovering is real: on touch :hover sticks after a tap and
   would leave the button filled as though it were selected. focus-visible is
   unconditional so keyboard users keep the affordance. */
@media (hover: hover) {
	#stamped-main-widget div[data-load-type='continue'] ul.stamped-pagination li.next a:hover,
	#stamped-main-widget
		div[data-widget-load-type='continue']
		ul.stamped-pagination
		li.next
		a:hover {
		color: #fff !important;
		background: transparent !important;
	}

	#stamped-main-widget
		div[data-load-type='continue']
		ul.stamped-pagination
		li.next
		a:hover::after,
	#stamped-main-widget
		div[data-widget-load-type='continue']
		ul.stamped-pagination
		li.next
		a:hover::after {
		transform: none;
	}
}

#stamped-main-widget div[data-load-type='continue'] ul.stamped-pagination li.next a:focus-visible,
#stamped-main-widget
	div[data-widget-load-type='continue']
	ul.stamped-pagination
	li.next
	a:focus-visible {
	color: #fff !important;
	background: transparent !important;
}

#stamped-main-widget
	div[data-load-type='continue']
	ul.stamped-pagination
	li.next
	a:focus-visible::after,
#stamped-main-widget
	div[data-widget-load-type='continue']
	ul.stamped-pagination
	li.next
	a:focus-visible::after {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	#stamped-main-widget div[data-load-type='continue'] ul.stamped-pagination li.next a,
	#stamped-main-widget div[data-load-type='continue'] ul.stamped-pagination li.next a::after,
	#stamped-main-widget
		div[data-widget-load-type='continue']
		ul.stamped-pagination
		li.next
		a,
	#stamped-main-widget
		div[data-widget-load-type='continue']
		ul.stamped-pagination
		li.next
		a::after {
		transition: none !important;
	}
}

/* ---------- Size guide drawer ----------
   size-chart.liquid is shared with the 2025 and legacy product sections, so
   its own z-indexes are left alone and raised here instead, in the stylesheet
   only the 2026 section loads.

   The drawer sat at z-index 1000 against a site header that is also a
   z-index: 1000 stacking context, so its title bar -- the Ring/Belts tabs and
   the close button -- was painted under the nav. The snippet tries to solve
   this by dropping the header to z-index 1 while the drawer is open, but that
   declaration is overridden on this template and never takes effect. Clearing
   the header outright is the same fix the information drawers got, and needs
   nothing from the header itself.

   pdp2026-drawers.js also moves the drawer to the body, so no sticky ancestor
   can trap it the way <product-info> trapped the information drawers. */
#sizeChartPopup {
	z-index: 1100 !important;
}

#overlay__size__chart {
	z-index: 1090 !important;
}

/* The low-stock note is hidden from the moment the shopper changes variant
   until the fetched markup replaces it -- see pdp2026-overrides.js. Without
   this the previous variant's "Act Fast - Only 9 Left" sat under the new
   variant's "Size 6 is sold out" for as long as the round trip took.

   visibility rather than display, so the row keeps its height and nothing
   below it jumps while the note is being replaced. */
.variant-inventory-note-wrapper--pending {
	visibility: hidden;
}

/* ==========================================================================
   Sticky Add to Bag -- Figma 1174:2

   Mobile  1177:2 (plain) · 1177:9 (pre-order) · 1179:7 (sale)
   Desktop 1199:3 (plain) · :14 (sale) · :28 (ring) · :39 (pre-order) · :50 (both)

   Measured from those frames rather than eyeballed. Mobile is a 96-tall band:
   the name at 11/12 from the top-left, the button 48 tall below it with a 12
   gutter either side. Desktop is 72 tall: the name at 15, the variant line at
   41, the 248-wide button at 12 from the top.

   The button is a .pdp2026-atc, so its hover and sheen are the main button's
   rules running here -- see "Add to Bag surface" above. Only geometry is
   restated below. The ship dot is likewise the stock indicator's own element,
   so the ripple is that animation.
   ========================================================================== */
.pdp2026-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	/* Edge to edge, and stated rather than inferred from left/right: the bar is
	   a band across the page, so its width must not be a function of what is
	   written in it. */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	/* Over the page, under the information drawers and the size guide, which
	   sit at 1090/1100 and must stay over it. */
	z-index: 50;
	background: #fff;
	border-top: 1px solid #d9d9d8;
	/* The home indicator overlaps anything pinned to the bottom of an iPhone. */
	padding-bottom: env(safe-area-inset-bottom, 0);
	transform: translateY(100%);
	visibility: hidden;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.35s;
}

.pdp2026-sticky--visible {
	transform: translateY(0);
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.pdp2026-sticky {
		transition: none;
	}
}

/* Mobile, 1177:2: a 96-tall frame with the name's top at 12, the button's at
   36 and 12 left under it. The 1px border is inside that 96, so the padding
   above the name is 11 and the gap to the button 8: 1 + 11 + 16 + 8 = 36. */
.pdp2026-sticky__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
}

/* Two rows, each its own flex line. Not one grid: a grid column is shared
   down the rows, so the name -- longer than the variant line -- decided where
   the second column began, and the ship estimate sat after the name's width
   rather than 16 after the line it belongs to.

   min-width: 0 so a long name can truncate on mobile instead of widening the
   band. */
.pdp2026-sticky__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
}

.pdp2026-sticky__row {
	display: flex;
	align-items: center;
	min-width: 0;
}

/* On mobile the estimate is pinned to the top-right of the band (1189:3815),
   so its row collapses to nothing and the name keeps the full line. */
.pdp2026-sticky__row--secondary {
	display: contents;
}

.pdp2026-sticky__title {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.6rem;
	color: var(--pdp2026-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	letter-spacing:0;
}

/* Desktop only (1199:50); the mobile frames carry no save tag. */
.pdp2026-sticky__save {
	display: none;
	flex: 0 0 auto;
	padding: 0.2rem 0.6rem;
	background: #9a6b14;
	font-family: 'Inter', sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.6rem;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}

/* 1189:3815 -- 16px dot, 6px gap, Inter Medium 12/16 in ink. */
/* 1189:3815 -- out of flow at the band's top-right on mobile, 12 in and level
   with the name. */
.pdp2026-sticky__ships {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	font-family: 'Inter', sans-serif;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.6rem;
	color: var(--pdp2026-ink);
}

.pdp2026-sticky__ships[hidden] {
	display: none;
}

.pdp2026-sticky__ships-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The dot carries the stock indicator's classes, so it inherits that ripple.
   The amber is the same token the pre-order notes use; currentColor drives
   both the core and the ripple. */
/* Two classes, because .variant-inventory-note__icon--dot sizes itself 16px
   from stock-indicator's inline <style>, which sits later in the document
   than this file and would win a tie. */
.pdp2026-sticky .pdp2026-sticky__dot {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--ettika-preorder-dot, #c08a3e);
}

/* The variant line is desktop-only: the mobile frames show the name alone. */
.pdp2026-sticky__variant {
	flex: 0 1 auto;
	display: none;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.6rem;
	letter-spacing: 0.096rem;
	text-transform: uppercase;
	color: var(--pdp2026-ink-50);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pdp2026-sticky__variant[hidden] {
	display: none;
}

/* ---- the button ----
   A .pdp2026-atc, so the surface, sheen, hover wipe, reduced-motion and
   disabled rules above all apply. Geometry only here. */
.pdp2026-atc--sticky {
	height: 4.8rem;
	padding: 0 2rem;
}

/* The main button is 18/500 in white; these frames are 600 in #fffdfb, so the
   weight and the off-white are restated for this one rather than changed on
   the shared rule, which has its own design. */
.pdp2026-atc--sticky .pdp2026-atc__label {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 2.4rem;
	letter-spacing: 0.12rem;
	color: #fffdfb;
}

.pdp2026-atc--sticky .pdp2026-atc__price,
.pdp2026-atc--sticky .pdp2026-atc__price-now,
.pdp2026-atc--sticky .pdp2026-atc__price-was {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 2.4rem;
	letter-spacing: -0.015rem;
}

.pdp2026-atc--sticky .pdp2026-atc__price,
.pdp2026-atc--sticky .pdp2026-atc__price-now {
	color: #fffdfb;
}

/* 1179:15 / 1199:54 -- the struck figure is 45% here, not the main button's
   50%. */
.pdp2026-atc--sticky .pdp2026-atc__price-was {
	color: rgba(255, 253, 251, 0.45);
}

/* ---------- Desktop (1199:3 onwards) ----------
   One 72px row: the name over its variant line, a 248 button on the right. */
@media screen and (min-width: 750px) {
	/* 1200:3858, the bar in place on the full desktop page: a centred card
	   592 wide at x=460 of a 1512 frame, its bottom edge 28 above the page's.
	   Not a band -- that is the mobile frame, which is the full 392 of the
	   device. Floating is also what makes the two shadows read; against the
	   viewport edge the long one had nothing to fall on.

	   fit-content between 592 and 718: the frames draw both, 592 without the
	   ship estimate and 718 with it. */
	.pdp2026-sticky {
		right: auto;
		left: 50%;
		bottom: 2.8rem;
		/* The card is sized by its text, with the gaps fixed rather than the
		   width: 592 is the floor the frames draw, and anything longer than
		   that pushes the card wider instead of being cut. */
		width: fit-content;
		min-width: min(59.2rem, calc(100vw - 4.8rem));
		max-width: calc(100vw - 4.8rem);
		border-top: 0;
		/* 1199:50 -- the near shadow plus the long one. */
		box-shadow: 0 2px 3px rgba(67, 65, 62, 0.05), 0 16px 20px rgba(67, 65, 62, 0.12);
		/* The centring has to ride along with the slide, or the card jumps
		   half its width as it comes in. */
		transform: translate(-50%, calc(100% + 2.8rem));
	}

	.pdp2026-sticky--visible {
		transform: translate(-50%, 0);
	}

	.pdp2026-sticky__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		/* 1199:39 -- the ship estimate ends at 369 and the button starts at
		   458. The gap is held at that 88 and the card grows, rather than the
		   card being held and the gap closing. space-between keeps the button
		   on the right edge when the text is short enough that the 592 floor
		   leaves slack. */
		gap: 8.8rem;
		/* 1200:3858 -- the name at 20 from the left, the button's right edge 12
		   from the right; 12 above and below its 48 makes the 72. */
		padding: 1.2rem 1.2rem 1.2rem 2rem;
	}

	/* 1 1 0, not 1 1 auto: an auto basis is the content's width, so the meta
	   would ask for as much room as its longest line and the row would grow
	   with it. From zero it takes what is left after the button. */
	.pdp2026-sticky__meta {
		/* Sized by its content, which is what lets the card grow with it. */
		flex: 0 0 auto;
		min-width: auto;
		max-width: none;
		overflow: visible;
		/* 1199:39/:50 -- the name at 15 and the variant line at 41 is 10
		   between two 16-tall lines. The rows are fixed at that 16 so the
		   20-tall save tag overhangs its row rather than pushing the second
		   line down, which is how the design draws it. */
		/* 10 between the rows: 1199:50 puts the name at 15 and the line at 41,
		   two 16-tall lines. */
		gap: 1rem;
		align-items: flex-start;
	}

	.pdp2026-sticky__row {
		/* Each row is its own line, so the estimate measures from the variant
		   line and not from whichever of the two is longer. */
		height: 1.6rem;
	}

	.pdp2026-sticky__row--secondary {
		display: flex;
	}

	/* 1199:50 -- the save tag 10 from the name; 1199:46 -- the estimate 16
	   from the variant line. Margins, not a row gap, so a hidden one costs
	   nothing. */
	.pdp2026-sticky__save {
		margin-left: 1rem;
	}

	.pdp2026-sticky__ships {
		position: static;
		margin-left: 1.6rem;
	}

	/* No ellipsis on desktop: the card grows to hold the text instead. */
	.pdp2026-sticky__title,
	.pdp2026-sticky__variant {
		max-width: none;
		overflow: visible;
		text-overflow: clip;
	}

	.pdp2026-sticky__title {
		font-size: 1.6rem;
		line-height:24px;
	}

	.pdp2026-sticky__save {
		display: block;
	}

	.pdp2026-sticky__save[hidden] {
		display: none;
	}

	.pdp2026-sticky__variant {
		display: block;
	}

	.pdp2026-sticky__variant[hidden] {
		display: none;
	}

	/* 1199:46 -- a 6px dot here, and 13px text. */
	.pdp2026-sticky__ships {
		font-size: 1.3rem;
		overflow: visible;
	}

	.pdp2026-sticky__ships-text {
		overflow: visible;
		text-overflow: clip;
	}

	.pdp2026-sticky .pdp2026-sticky__dot {
		width: 6px;
		height: 6px;
	}

	.pdp2026-atc--sticky {
		flex: 0 0 24.8rem;
		width: 24.8rem;
	}

	.pdp2026-atc--sticky .pdp2026-atc__label {
		font-size: 1.4rem;
		line-height: 1.6rem;
		letter-spacing: 0.112rem;
	}

	.pdp2026-atc--sticky .pdp2026-atc__price,
	.pdp2026-atc--sticky .pdp2026-atc__price-now,
	.pdp2026-atc--sticky .pdp2026-atc__price-was {
		font-size: 1.4rem;
		line-height: 2rem;
		letter-spacing: -0.014rem;
	}
}

/* ==========================================================================
   Mystery box tiers -- Figma 1215:2 (mobile) / 1206:376 (desktop)

   The same custom.color_variants_list that drives the colourway switcher, but
   its entries are tiers rather than colours, so the row is cards instead of
   chips. Each card links to that box's own product, as the switcher always
   was.

   Mobile is three 108-wide cards across the 344 column; desktop is three 180s.
   The count and the rate stack on two lines on a phone and run together on
   one at desktop, which is the only structural difference between the two.
   ========================================================================== */
.pdp2026-boxes {
	display: flex;
	align-items: stretch;
	gap: 1rem;
}

.pdp2026-box {
	display: flex;
	/* 1 1 0 rather than the frame's fixed 108: three cards and two 10 gaps
	   come to exactly the 344 column, and a product with two tiers shares the
	   row rather than leaving a hole. */
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.2rem;
	height: 11.2rem;
	padding: 1rem 1.2rem 1.2rem;
	background: #fff;
	/* 1.5 when selected against 1 otherwise would shift the contents by half a
	   pixel, so the border is always 1.5 and only its colour changes. */
	border: 1.5px solid #d9d9d8;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.25s ease;
}

.pdp2026-box.is-selected {
	border-color: var(--pdp2026-ink);
}

@media (hover: hover) {
	.pdp2026-box:not(.is-selected):hover {
		border-color: var(--pdp2026-ink-50);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pdp2026-box {
		transition: none;
	}
}

.pdp2026-box__head {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.pdp2026-box__name,
.pdp2026-box__price {
	font-family: 'Inter', sans-serif;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 2rem;
	letter-spacing: -0.013rem;
	color: var(--pdp2026-ink);
}

/* 1215:6 -- two lines, 11/16, the count stepping back and the rate in the
   accent. The count goes full ink on the chosen card. */
.pdp2026-box__sub {
	display: flex;
	flex-direction: column;
	font-family: 'Inter', sans-serif;
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.6rem;
	letter-spacing: -0.011rem;
}

.pdp2026-box__pieces {
	color: var(--pdp2026-ink-65);
}

.pdp2026-box.is-selected .pdp2026-box__pieces {
	color: var(--pdp2026-ink);
}

.pdp2026-box__each {
	color: #c2573f;
}

/* ---------- Desktop (1206:376) ----------
   180 cards, 12 apart, and the two sub-lines run together in the accent. */
@media screen and (min-width: 750px) {
	.pdp2026-boxes {
		flex-wrap: wrap;
		gap: 1.2rem;
	}

	.pdp2026-box {
		flex: 0 0 18rem;
		width: 18rem;
		height: auto;
		padding: 1.2rem;
	}

	.pdp2026-box__name,
	.pdp2026-box__price {
		font-size: 1.5rem;
		letter-spacing: -0.015rem;
	}

	.pdp2026-box__sub {
		flex-direction: row;
		align-items: baseline;
		font-size: 1.3rem;
		line-height: 1.6rem;
		letter-spacing: -0.026rem;
	}

	/* One line at desktop, so the two halves need the dot between them.
	   Non-breaking spaces either side: a plain trailing space is dropped from
	   a content string, which left the dot touching the price. */
	.pdp2026-box__each::before {
		content: '\00a0\00b7\00a0';
	}

	.pdp2026-box__pieces,
	.pdp2026-box.is-selected .pdp2026-box__pieces,
	.pdp2026-box__each {
		color: #c2573f;
	}
}

/* Final Sale sits in the same row as the sold-out status, which is hidden
   until that state applies -- this one is shown whenever it renders. The dot
   pulses on the same rules as the sold-out one above, rather than a second
   copy of them: the scoping there is .pdp2026-buy--sold-out, which this row
   is not inside, so it is named alongside. */
.pdp2026-stock-status--final {
	display: flex;
}

/* BOGO tag beside the PDP price — Figma 956:3.

   Deliberately not carrying .saving-custom-badge, which would pick up its
   type but also `.no-sitewide-discount .save-badge.saving-custom-badge
   { display: none }` -- and a buy-one-get-one runs precisely when the
   sitewide discount does not, so the badge would vanish exactly when it is
   wanted. Self-contained instead.

   The container is a flex row with a 4px gap and the design measures 6 from
   the price, so 2 is made up here. */
/* The price and its tag, one row with the design's 6px between them.

   width: max-content and nowrap because the row inherits .price__container's
   computed width of 0 -- a wrapping flex row inside a zero-width box puts
   every child on its own line, which is how the tag ended up under the
   price rather than beside it. Sized to its contents, it lays out as the
   design draws it and overflows the same way the price spans already do. */
.price__container .price__row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	width: max-content;
	gap: 6px;
}

.price__container .bogo-custom-badge {
	/* nowrap and no shrink: .price__container computes to width 0 on the PDP
	   -- the price spans survive only by being nowrap and overflowing it --
	   so a badge allowed to wrap collapses to one character per line. */
	flex: 0 0 auto;
	white-space: nowrap;
	/* 1 rather than 2: the design's tag is 20 tall measured to the outside of
	   its rule, and 2 + 16 + 2 plus a border either side came to 22. */
	padding: 1px 6px;
	border: 1px solid #9a6b14;
	border-radius: 0;
	font-family: Inter, sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.price__container .bogo-custom-badge {
	font-size: 12px;
}
}