/* Styletodo Cart Edit — "Edit style" popup and the option box in the cart. Colours match the site (dark / gold). */

/* ---------- The option box under each piece ---------- */
.str-ce-chip,
.st-cd .st-cd__var.str-ce-on {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	width: auto !important;
	min-height: 0 !important;
	margin: 8px 0 4px !important;
	padding: 7px 10px !important;
	border: 1px solid #2B2721 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #D8C3A0 !important;
	font-family: "Manrope", sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: .02em !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: border-color .2s;
}
.str-ce-chip:hover, .str-ce-chip:focus-visible,
.st-cd .st-cd__var.str-ce-on:hover, .st-cd .st-cd__var.str-ce-on:focus-visible { border-color: #C9A227 !important; background: transparent !important; color: #ECE5D5 !important; outline: 0; }
.str-ce-chip span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.str-ce-chip .str-ce-sep { color: #5E584C; font-style: normal; }
.str-ce-chip .str-ce-dot { width: 14px !important; height: 14px !important; max-width: none; margin: 0 !important; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px #2B2721; }
.str-ce-chip svg,
.st-cd .st-cd__var.str-ce-on::after { flex: none; width: 14px; height: 14px; color: #C9A227; }
.st-cd .st-cd__var.str-ce-on::after {
	content: "";
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='1.8'/%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 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The box replaces WooCommerce's plain "Size: L / Color: White" list on the cart page */
.woocommerce-cart-form .product-name .str-ce-chip ~ dl.variation { display: none !important; }
.str-ce-chip.is-busy, .st-cd .st-cd__var.is-busy { opacity: .5; pointer-events: none; }

/* ---------- Popup ---------- */
.str-ce { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; pointer-events: none; transition: visibility 0s .3s; }
.str-ce.is-open { visibility: visible; pointer-events: auto; transition: none; }
.str-ce__backdrop { position: absolute; inset: 0; background: rgba(6,5,4,.78); opacity: 0; transition: opacity .3s; }
.str-ce.is-open .str-ce__backdrop { opacity: 1; }
.str-ce__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: calc(100vh - 48px); background: #14120F; border: 1px solid #2B2721; opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; }
.str-ce.is-open .str-ce__panel { opacity: 1; transform: none; }
.str-ce__head { display: flex; align-items: center; justify-content: center; position: relative; flex: none; padding: 16px 56px; border-bottom: 1px solid #2B2721; }
.str-ce__title { margin: 0; color: #ECE5D5; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.str-ce .str-ce__close { position: absolute; top: 50%; right: 10px; width: 40px; height: 40px; margin: -20px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #ECE5D5; font-size: 28px; font-weight: 300; line-height: 1; cursor: pointer; }
.str-ce .str-ce__close:hover { color: #C9A227; background: transparent; }
.str-ce__body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 8px; }

/* Photos: one sliding row with arrows */
.str-ce__gallery { position: relative; margin: 0 0 18px; }
.str-ce__imgs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.str-ce__imgs::-webkit-scrollbar { display: none; }
.str-ce__imgs img { flex: none; width: calc((100% - 16px) / 3); aspect-ratio: 4 / 5; height: auto; object-fit: cover; background: #fff; scroll-snap-align: start; }
.str-ce .str-ce__arrow { position: absolute; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 1px solid #2B2721; border-radius: 50%; background: rgba(20,18,15,.92); color: #ECE5D5; cursor: pointer; }
.str-ce .str-ce__arrow:hover { border-color: #C9A227; color: #C9A227; background: rgba(20,18,15,.92); }
.str-ce .str-ce__arrow:disabled { opacity: 0; pointer-events: none; }
.str-ce__arrow--prev { left: 8px; } .str-ce__arrow--next { right: 8px; }
.str-ce__arrow svg { width: 16px; height: 16px; }

.str-ce__name { margin: 0 0 4px; color: #ECE5D5; font-family: "Cormorant Garamond", serif; font-size: 24px; font-weight: 500; line-height: 1.2; }
.str-ce__name a { color: inherit; text-decoration: none; } .str-ce__name a:hover { color: #C9A227; }
.str-ce__price { margin: 0 0 4px; color: #C9A227; font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 600; }
.str-ce__price .amount, .str-ce__price ins { color: #C9A227; text-decoration: none; }
.str-ce__price del, .str-ce__price del .amount { margin-right: 6px; color: #988F7E; font-weight: 400; }
.str-ce__price .screen-reader-text { display: none; }

.str-ce__group { margin-top: 18px; }
.str-ce__label { margin: 0 0 10px; color: #988F7E; font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.str-ce__label b { color: #ECE5D5; font-weight: 600; letter-spacing: .06em; text-transform: none; }
.str-ce__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.str-ce .str-ce__pill { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 42px; margin: 0; padding: 0 14px; border: 1px solid #2B2721; border-radius: 0; background: transparent; box-shadow: none; color: #ECE5D5; font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .02em; line-height: 1; text-transform: none; cursor: pointer; transition: border-color .2s, color .2s; }
.str-ce .str-ce__pill:hover { border-color: #C9A227; background: transparent; color: #ECE5D5; }
.str-ce .str-ce__pill.is-active { border-color: #C9A227; color: #C9A227; box-shadow: inset 0 0 0 1px #C9A227; }
.str-ce .str-ce__pill.is-soldout, .str-ce .str-ce__pill:disabled { color: #5E584C; background: linear-gradient(to top right, transparent calc(50% - .5px), #3A352C calc(50% - .5px), #3A352C calc(50% + .5px), transparent calc(50% + .5px)); }
.str-ce .str-ce__pill:disabled { cursor: not-allowed; }
.str-ce .str-ce__pill.is-swatch { width: 46px; min-width: 0; height: 46px; padding: 3px; border-radius: 50%; background: transparent; }
.str-ce .str-ce__pill.is-swatch img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; }
.str-ce .str-ce__pill.is-swatch.is-soldout img, .str-ce .str-ce__pill.is-swatch:disabled img { opacity: .35; }

.str-ce__msg { min-height: 18px; margin: 14px 0 0; color: #E8B3A4; font-family: "Manrope", sans-serif; font-size: 12px; }
.str-ce__foot { flex: none; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #2B2721; }
.str-ce .str-ce__save { width: 100%; height: 50px; margin: 0; padding: 0 16px; border: 0; border-radius: 0; background: #C9A227; color: #120F06; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2em; line-height: 1; text-transform: uppercase; cursor: pointer; transition: background .2s, opacity .2s; }
.str-ce .str-ce__save:hover { background: #E2BC48; color: #120F06; }
.str-ce .str-ce__save:disabled { background: #2B2721; color: #988F7E; cursor: not-allowed; }
.str-ce .str-ce__save.is-notify { background: transparent; color: #ECE5D5; box-shadow: inset 0 0 0 1px #C9A227; }
.str-ce .str-ce__save.is-busy { opacity: .6; cursor: wait; }

.str-ce__loading { padding: 60px 0; color: #988F7E; font-family: "Manrope", sans-serif; font-size: 13px; text-align: center; }
html.str-ce-open, html.str-ce-open body { overflow: hidden; }
html.str-ce-open .cky-btn-revisit-wrapper { display: none !important; }

/* Phones: the popup slides up from the bottom */
@media (max-width: 767px) {
	.str-ce { align-items: flex-end; padding: 0; }
	.str-ce__panel { max-width: none; max-height: 90vh; border-width: 1px 0 0; transform: translateY(100%); transition: opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
	.str-ce__body { padding: 16px 16px 8px; }
	.str-ce__foot { padding-left: 16px; padding-right: 16px; }
	.str-ce__imgs img { width: 42%; }
	.str-ce__arrow { display: none !important; }
	.str-ce__name { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .str-ce__panel, .str-ce__backdrop { transition: none; } }