/** Shopify CDN: Minification failed

Line 4160: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;
}

.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__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. The band of a linear-gradient runs perpendicular to the
	   gradient axis, so "to top right" drew the opposite diagonal -- top-left
	   down to bottom-right. "to bottom right" gives the one the design has. */
	background-image: linear-gradient(
		to bottom right,
		transparent calc(50% - 0.5px),
		var(--pdp2026-ink) calc(50% - 0.5px),
		var(--pdp2026-ink) calc(50% + 0.5px),
		transparent calc(50% + 0.5px)
	);
}

.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;
}

/* ---------- 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) ---------- */
.pdp2026-notify {
	display: flex;
	width: 100%;
	height: 5.6rem; /* Figma 123:3603 -- mobile frame is 56 */
	align-items: center;
	justify-content: space-between;
	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 [class*='klaviyo-form-'],
.pdp2026-notify [class*='kl-private-reset-css'],
.pdp2026-notify form,
.pdp2026-notify form > div,
.pdp2026-notify 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 > div {
	flex-direction: row !important;
	align-items: stretch !important;
}

.pdp2026-notify 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 > div > div {
	height: 100% !important;
}

.pdp2026-notify form > div > div:first-of-type {
	flex: 1 0 0 !important;
	min-width: 0;
}
.pdp2026-notify 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 [class*='klaviyo-emailinput'] {
	position: relative;
	flex-direction: row !important;
	align-items: stretch !important;
}

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

.pdp2026-notify [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 [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 [class*='klaviyo-emailinput'] input:focus {
	outline: none;
}

.pdp2026-notify [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 [class*='klaviyo-button'],
.pdp2026-notify form button {
	height: 100% !important;
	width: 100% !important;
	flex: 1 0 0 !important;
}

.pdp2026-notify [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 [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 [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 {
	height: 6.4rem;
}
.pdp2026-notify [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 > div > div:last-of-type {
	flex: 0 0 20rem !important;
	width: 20rem !important;
	max-width: 20rem;
}
.pdp2026-notify [class*='klaviyo-emailinput'] input,
.pdp2026-notify [class*='klaviyo-emailinput'] input::placeholder {
	font-size: 16px !important;
	line-height: normal !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: 16px;
}

.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 {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	overflow: visible;
}

.pdp2026-buy--sold-out .pdp2026-stock-status--soldout .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 {
		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;
	justify-content: space-between;
	align-self: stretch;
	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 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;
}

.pdp2026-accordion__item.is-open .pdp2026-accordion__content::before,
.pdp2026-accordion__item.is-open .pdp2026-accordion__content::after {
  content: "";
  display: block;
  height: 1.2rem;
}
.pdp2026-accordion__item.is-open .pdp2026-accordion__content::after {
  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_list {
    line-height: 16px;
    padding: 0;
    margin: 0 0 8px;
}
.breadcrumbs_list a {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.12px;
    color: #43413E;
    font-family: 'Inter';
    font-weight: 400;
    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;
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
}

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

@media (hover: hover) {
  .product-wishlist:hover .product-wishlist__icon {
    transform: translateY(-2px);
  }
}

.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,
  .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 .breadcrumbs_list,
.product__info-wrapper .product__title ,
.product__info-wrapper .product-subtitle,
.product__info-wrapper .price--large {
	display:block;
} 
.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: 20px;
    padding: 0;
    margin: 0 0 12px;
}
.breadcrumbs_list a {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.14px;
}
.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 .splide__pagination {
    position: static;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    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: 12px;
    height: 12px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--pw-text);
    border-radius: 50%;
    background: transparent;
    opacity: 1;
    transform: none;
    cursor: pointer;
  }

  #rebuy-widget-314223 .splide__pagination__page.is-active {
    background: radial-gradient(circle, var(--pw-text) 0 3px, transparent 3.5px);
    transform: none;
  }

  #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;
}

.product-wishlist--gallery {
	/* The design insets the icon 8px from the first image's top-right corner.
	   Measured against the live slide: the slider sits 4px below the wrapper's
	   top, and 66.6% - 24px left the right inset at 6px, so both are nudged to
	   land on 8/8. */
	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;
}

/* Desktop keeps the button in the title row, so this one is mobile only. */
@media screen and (min-width: 990px) {
	.product-wishlist--gallery {
		display: none;
	}
}

/* ---------- 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;
}

/* 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;
}

#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 {
	background: var(--pdp2026-ink) !important;
	border-color: var(--pdp2026-ink) !important;
}