/**
 * The Wear Soft — Core styles.
 *
 * Only for behaviour this plugin adds (cart/wishlist badges, lightbox) plus a
 * few WooCommerce defaults that have no Bricks control. All layout and brand
 * styling lives in Bricks global classes and variables, so this file stays
 * small and does not fight the builder.
 */

/**
 * Design tokens, extracted from the source storefront's own CSS.
 *
 * These are also registered in Bricks' Variables manager so they can be edited
 * from the builder. They are declared here as well so that the Bricks global
 * classes which reference them always resolve, even if the builder's variable
 * list is cleared or a template is exported to another install.
 *
 * Bricks' own variable definitions load after this file and therefore win,
 * which keeps the builder authoritative while this stays a safety net.
 */
:root {
	--tws-ink: #211e1b;
	--tws-ink-deep: #1a1a1a;
	--tws-ink-soft: #2a2523;
	--tws-gold: #c7a45f;
	--tws-gold-dark: #b08d57;
	--tws-cream: #fbf8f3;
	--tws-cream-2: #f1ede6;
	--tws-border: #e7e1d8;
	--tws-muted: #8a8075;
	--tws-muted-2: #9a928a;
	--tws-wine: #5b1b2c;
	--tws-white: #ffffff;
	--tws-page-width: 1400px;
	--tws-section-y: 110px;
	--tws-section-y-mobile: 64px;
	--tws-font-head: 'Playfair Display', Georgia, serif;
	--tws-font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@media (max-width: 767px) {
	:root {
		--tws-section-y: var(--tws-section-y-mobile);
	}
}

/**
 * Base typography.
 *
 * Low specificity on purpose: this sets the brand defaults so plain WooCommerce
 * output (cart, checkout, account) inherits the right fonts, while anything
 * styled in Bricks still overrides it.
 */
body {
	font-family: var(--tws-font-body);
	font-weight: 300;
	color: var(--tws-ink);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tws-font-head);
	font-weight: 400;
	color: var(--tws-ink);
}

/* Never let a layout scroll sideways on a phone. */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

/* ============================================================
   Homepage components, matched to the brand's reference design.
   Layout, colour and type remain editable in Bricks; these rules
   cover behaviour Bricks controls cannot express (marquee motion,
   overlays, hover reveals, swatches).
   ============================================================ */

/* --- announcement marquee: light bar below the hero ------------------ */
.tws-marquee {
	height: 46px;
	display: flex;
	align-items: center;
	border-top: 1px solid var(--tws-border);
	border-bottom: 1px solid var(--tws-border);
}

.tws-marquee .tws-mq-track {
	display: flex;
	width: max-content;
	flex: 0 0 auto;
	animation: tws-marquee 44s linear infinite;
}

.tws-marquee:hover .tws-mq-track {
	animation-play-state: paused;
}

.tws-marquee .tws-mq-inner {
	display: flex;
	width: max-content;
	flex: 0 0 auto;
	align-items: center;
}

.tws-marquee .tws-mq-item {
	flex: 0 0 auto;
	position: relative;
	padding: 0 38px;
	font-family: var(--tws-font-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.18em;
	line-height: 46px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--tws-ink);
}

.tws-marquee .tws-mq-item::after {
	content: '·';
	position: absolute;
	right: -4px;
	color: var(--tws-gold);
}

@keyframes tws-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-33.333%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.tws-marquee .tws-mq-track { animation: none; }
}

/* --- header ---------------------------------------------------------- */
.tws-header-sticky {
	box-shadow: 0 1px 0 rgba(33, 30, 27, 0.07);
}

.tws-utility a {
	color: var(--tws-ink);
	text-decoration: none;
	transition: color 0.3s;
}

.tws-utility:hover a,
.tws-utility:hover .brxe-icon {
	color: var(--tws-gold);
}

.tws-nav .bricks-nav-menu > li > a {
	position: relative;
	padding-bottom: 3px;
	font-family: var(--tws-font-body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tws-ink);
}

.tws-nav .bricks-nav-menu > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--tws-gold);
	transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tws-nav .bricks-nav-menu > li > a:hover::after { width: 100%; }

.tws-nav .bricks-nav-menu .sub-menu {
	background: #fff;
	border: 1px solid var(--tws-border);
	padding: 10px 0;
	min-width: 210px;
}

.tws-nav .bricks-nav-menu .sub-menu a { padding: 9px 22px; letter-spacing: 0.12em; }

/* --- hero ------------------------------------------------------------ */
.tws-hero { position: relative; }

.tws-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 18, 16, 0.55) 0%, rgba(20, 18, 16, 0.18) 55%, rgba(20, 18, 16, 0.05) 100%);
}

.tws-hero > * { position: relative; z-index: 1; }

.tws-scroll-hint {
	writing-mode: vertical-rl;
	letter-spacing: 0.3em;
}

.tws-scroll-hint::after {
	content: '';
	display: block;
	width: 1px;
	height: 54px;
	margin: 12px auto 0;
	background: rgba(255, 255, 255, 0.45);
}

/* --- section "VIEW ALL" link ----------------------------------------- */
.tws-viewall a,
.tws-viewall {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 5px;
	white-space: nowrap;
}

/* --- product card ---------------------------------------------------- */
.tws-styles-count {
	font-family: var(--tws-font-body);
	font-size: 12px;
	font-weight: 300;
	color: var(--tws-muted);
}

.tws-swatches { display: flex; gap: 7px; }

.tws-swatch {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid rgba(33, 30, 27, 0.18);
	display: inline-block;
}

/* --- shop the look --------------------------------------------------- */
.tws-look { position: relative; overflow: hidden; }

.tws-look .tws-look-img { transition: transform 1s cubic-bezier(0.2, 0.7, 0.3, 1); }
.tws-look:hover .tws-look-img { transform: scale(1.04); }

.tws-look .tws-look-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px 28px;
	background: linear-gradient(180deg, rgba(20, 18, 16, 0) 0%, rgba(20, 18, 16, 0.78) 72%);
}

/* The product + price sits in a gold pill, as on the source. */
.tws-look-price {
	display: inline-block;
	background: var(--tws-gold);
	color: var(--tws-ink);
	font-family: var(--tws-font-body);
	font-size: 12px;
	font-weight: 500;
	padding: 9px 16px;
}

.tws-look-price a { color: inherit; text-decoration: none; }
.tws-look-price del { opacity: 0.55; margin-right: 6px; }
.tws-look-price ins { text-decoration: none; }

/* --- category tiles (dark section) ----------------------------------- */
.tws-cat-tile { position: relative; overflow: hidden; cursor: pointer; }

.tws-cat-tile .tws-cat-img { transition: transform 1.05s cubic-bezier(0.2, 0.7, 0.3, 1); }
.tws-cat-tile:hover .tws-cat-img { transform: scale(1.05); }

.tws-cat-tile .tws-cat-body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 0 18px 36px;
	background: linear-gradient(180deg, rgba(20, 18, 16, 0) 42%, rgba(20, 18, 16, 0.72) 100%);
}

.tws-cat-cta {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.35s, transform 0.35s;
}

.tws-cat-tile:hover .tws-cat-cta { opacity: 1; transform: translateY(0); }

@media (hover: none) {
	.tws-cat-cta { opacity: 1; transform: none; }
}

/* --- reviews --------------------------------------------------------- */
.tws-review {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: #ece7dd;
	padding: 34px 32px;
	min-height: 290px;
}

.tws-review-by img { object-fit: cover; }

/* --- our craft (dark section) ---------------------------------------- */
.tws-stat { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 14px; }

.tws-atelier {
	position: absolute;
	left: 24px;
	bottom: 24px;
	background: var(--tws-gold);
	padding: 13px 18px;
}

/* --- instagram ------------------------------------------------------- */
.tws-insta img { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1); }
.tws-insta:hover img { transform: scale(1.07); }

/**
 * Hover states.
 *
 * Bricks stores pseudo-class styling in a form that cannot be written from
 * outside the builder (it ignores a "key:hover" setting), so hover polish is
 * defined here against the same global classes the templates use. The base
 * styling of every one of these elements remains editable in Bricks; only the
 * hover transition lives here.
 */
.tws-btn {
	transition: background-color 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
		color 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tws-btn-light:hover {
	background-color: var(--tws-gold);
	color: #fff;
}

.tws-btn-dark:hover {
	background-color: var(--tws-gold);
	color: #fff;
}

.tws-btn-outline:hover {
	background-color: var(--tws-ink);
	color: #fff;
}

/* Product card: image lift + hover actions */
.tws-card-img {
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tws-card:hover .tws-card-img {
	transform: scale(1.06);
}

/* Navigation underline + colour */
.tws-navlink:hover,
#brx-header .bricks-nav-menu > li > a:hover {
	color: var(--tws-gold);
}

.tws-footer-link:hover,
#brx-footer .bricks-nav-menu > li > a:hover {
	color: #fff;
}

/* Social and utility icons */
#brx-header .brxe-icon:hover,
#brx-footer .brxe-icon:hover {
	color: var(--tws-gold);
}

/* ---------------------------------------------------------------- badges */
.tws-cart-count,
.tws-wishlist-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--tws-ink);
	color: #fff;
	font-family: Outfit, sans-serif;
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
}

.tws-cart-count.is-empty,
.tws-wishlist-count[data-count='0'] {
	background: transparent;
	color: var(--tws-muted);
}

/* -------------------------------------------------------------- wishlist */
.tws-wishlist-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--tws-ink);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.3s, color 0.3s, transform 0.3s;
}

.tws-wishlist-toggle:hover {
	background: #fff;
	transform: scale(1.08);
}

.tws-wishlist-toggle.is-active {
	color: #b3122b;
}

.tws-wishlist-toggle[data-busy='1'] {
	opacity: 0.55;
	pointer-events: none;
}

.tws-wishlist-empty {
	padding: 64px 24px;
	text-align: center;
	font-family: Outfit, sans-serif;
	font-size: 15px;
	font-weight: 300;
	color: var(--tws-muted);
}

.tws-wishlist-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 991px) {
	.tws-wishlist-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------- filters */
.tws-filters {
	font-family: var(--tws-font-body);
}

.tws-filter-group {
	margin-bottom: 26px;
}

.tws-filter-group__title {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tws-ink);
}

.tws-filter-group ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tws-filter-option a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 0;
	font-size: 13px;
	font-weight: 300;
	color: var(--tws-muted);
	text-decoration: none;
	transition: color 0.25s;
}

.tws-filter-option a:hover {
	color: var(--tws-ink);
}

.tws-filter-option em {
	font-style: normal;
	font-size: 11px;
	color: var(--tws-muted-2);
}

.tws-filter-box {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	border: 1px solid var(--tws-border);
	background: #fff;
	transition: background 0.25s, border-color 0.25s;
}

.tws-filter-option.is-active a {
	color: var(--tws-ink);
	font-weight: 400;
}

.tws-filter-option.is-active .tws-filter-box {
	border-color: var(--tws-ink);
	background: var(--tws-ink);
	box-shadow: inset 0 0 0 2px #fff;
}

.tws-filter-clear a {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tws-gold);
	text-decoration: none;
}

.tws-filter-clear a:hover {
	text-decoration: underline;
}

/* Sale badge rendered by the plugin shortcode. */
.tws-sale-badge {
	display: inline-block;
	font-family: var(--tws-font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1;
}

/* Shipping notice shown when no delivery method is available. */
.tws-no-shipping {
	margin: 0;
	font-family: var(--tws-font-body);
	font-size: 13px;
	line-height: 1.7;
	color: var(--tws-ink);
}

.tws-no-shipping strong {
	display: block;
	margin-bottom: 4px;
	font-weight: 500;
}

/* -------------------------------------------------------------- lightbox */
.tws-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba(20, 18, 16, 0.9);
	animation: tws-fade 0.25s ease;
}

.tws-lightbox img {
	max-width: min(900px, 100%);
	max-height: 90vh;
	object-fit: contain;
	background: #fff;
}

.tws-lightbox__close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 42px;
	height: 42px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

@keyframes tws-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tws-lightbox {
		animation: none;
	}
}

/**
 * Layout stability (CLS) — product gallery.
 *
 * The brand's product photography mixes aspect ratios: some shots are square
 * (1600x1600), others tall portrait (3072x4608). FlexSlider sizes its viewport
 * to whichever slide is active, so moving between slides resized the gallery
 * and pushed everything below it down — measured at CLS 0.64 on desktop.
 *
 * Pinning the viewport to one ratio makes the gallery a fixed box. Images are
 * contained rather than cropped, so no product detail is lost; the letterboxing
 * sits on white, as it does on the source storefront.
 */
.brxe-product-gallery .flex-viewport {
	aspect-ratio: 3 / 4;
	height: auto !important;
	max-height: 78vh;
	overflow: hidden;
	background: #fff;
}

.brxe-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper {
	height: 100% !important;
}

.brxe-product-gallery .woocommerce-product-gallery__image {
	height: 100% !important;
}

.brxe-product-gallery .woocommerce-product-gallery__image > a {
	display: block;
	height: 100%;
}

/* The zoom overlay is positioned by its own script; leave it alone. */
.brxe-product-gallery .woocommerce-product-gallery__image img:not(.zoomImg) {
	width: 100%;
	height: 100% !important;
	object-fit: contain;
}

/* Before FlexSlider runs, keep the un-wrapped gallery one image tall. */
.brxe-product-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.brxe-product-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > * {
	grid-row: 1;
	grid-column: 1;
}

/* Thumbnail strip: a fixed grid, so its height never changes. */
.brxe-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.brxe-product-gallery .flex-control-thumbs li {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.brxe-product-gallery .flex-control-thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
}

.tws-card img,
.brxe-image img {
	max-width: 100%;
}

/**
 * WooCommerce loop images (cross-sells on the cart page, related products,
 * "New in store" on the empty cart) reserve their box before loading.
 *
 * Without this the page grows as each thumbnail arrives and pushes the footer
 * down — measured as the entire CLS on cart and checkout at phone widths
 * (0.24 at 430px) before this rule.
 */
ul.products li.product img,
.woocommerce ul.products li.product img,
.wc-block-grid__product-image img {
	aspect-ratio: 3 / 4;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Cross-sell / upsell headings keep a stable rhythm. */
.woocommerce .cross-sells ul.products,
.woocommerce .up-sells ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .cross-sells ul.products li,
.woocommerce .up-sells ul.products li {
	width: 100%;
	margin: 0;
}

/* ------------------------------------------- WooCommerce notice styling */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 2px solid var(--tws-gold);
	border-radius: 0;
	background: var(--tws-cream);
	font-family: Outfit, sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: var(--tws-ink);
}

.woocommerce-message .button,
.woocommerce-info .button {
	border-radius: 0;
	background: var(--tws-ink);
	color: #fff;
	font-family: Outfit, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Out-of-stock variations read as unavailable rather than simply missing. */
.brxe-product-gallery form.cart .variations select option[disabled] {
	color: #b9b2aa;
}

/* Keep price markup consistent wherever WooCommerce renders it. */
.woocommerce del {
	opacity: 0.6;
	margin-right: 8px;
}

.woocommerce ins {
	text-decoration: none;
}