/* ==========================================================================
   Shivay Anantam — Catalogue (shop, main category, subcategory)
   ========================================================================== */

/* ============ HERO ============ */
.sa-chero { position: relative; padding: clamp(40px, 6vw, 80px) 0 clamp(50px, 7vw, 90px); background: linear-gradient(180deg, var(--sa-cream) 0%, #f6ece3 100%); overflow: hidden; }
.sa-chero__inner { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: clamp(30px, 5vw, 70px); }
.sa-catalog--shop .sa-chero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.sa-catalog--shop .sa-crumbs { justify-content: center; }
.sa-chero__copy .sa-crumbs { flex-wrap: wrap; }
.sa-chero__title { margin: 18px 0 14px; font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 600; line-height: 1.02; }
.sa-chero__text { max-width: 560px; margin: 0 0 26px; color: var(--sa-muted); font-size: 1.05rem; line-height: 1.75; }
.sa-catalog--shop .sa-chero__text { margin-inline: auto; }
.sa-chero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sa-catalog--shop .sa-chero__actions { justify-content: center; }

.sa-chero__visual { position: relative; justify-self: center; width: min(100%, 420px); }
.sa-chero__visual img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #f1efed; box-sizing: border-box; padding: 18px; border-radius: 30px; box-shadow: 0 40px 70px -36px rgba(43, 27, 22, .7); transform: rotate(-3deg); transition: transform .8s var(--sa-ease); }
.sa-chero__visual:hover img { transform: rotate(0) scale(1.02); }
.sa-chero__ring { position: absolute; inset: -18px; border-radius: 40px; border: 2px dashed rgba(162, 93, 76, .35); transform: rotate(4deg); animation: sa-ring-spin 30s linear infinite; }
@keyframes sa-ring-spin { to { transform: rotate(364deg); } }
.sa-chero__badge { position: absolute; z-index: 2; right: -14px; bottom: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 104px; height: 104px; border-radius: 50%; background: var(--sa-ink); color: #e8d6cc; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .6); animation: sa-bob 5s ease-in-out infinite; }
.sa-chero__badge strong { font: 600 2.2rem/1 var(--sa-serif); color: var(--sa-gold); letter-spacing: 0; text-transform: none; }

/* ============ SHOP: MAIN COLLECTIONS ============ */
.sa-mains { padding-top: 0; margin-top: -30px; }
.sa-mains__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sa-main {
	position: relative;
	display: block;
	min-height: 320px;
	border-radius: 26px;
	overflow: hidden;
	color: #fff !important;
	isolation: isolate;
	transition: transform .55s var(--sa-ease), box-shadow .55s, opacity .9s var(--sa-ease) !important;
	transition-delay: calc(var(--i, 0) * 80ms) !important;
}
.sa-main--wide { grid-column: span 2; }
.sa-main img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100% !important; object-fit: contain; object-position: center top; background: #f1efed; box-sizing: border-box; padding: 18px 18px 96px; transition: transform 1s var(--sa-ease); }
.sa-main__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(43, 27, 22, 0) 58%, rgba(43, 27, 22, .9) 100%); transition: background-color .5s; }
.sa-main__body { position: absolute; left: 26px; right: 80px; bottom: 24px; display: flex; flex-direction: column; gap: 4px; }
.sa-main small { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sa-gold); }
.sa-main strong { font: 600 clamp(1.6rem, 2.4vw, 2.2rem)/1.1 var(--sa-serif); }
.sa-main__subs { max-height: 0; overflow: hidden; font-size: .85rem; color: #ecdcd2; opacity: 0; transition: max-height .5s var(--sa-ease), opacity .4s, margin .4s; }
.sa-main__go { position: absolute; right: 22px; bottom: 24px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--sa-copper); transform: rotate(-45deg); transition: transform .45s var(--sa-ease), background-color .3s, color .3s; }
.sa-main:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -32px rgba(43, 27, 22, .8); transition-delay: 0s !important; }
.sa-main:hover img { transform: scale(1.08); }
.sa-main:hover .sa-main__subs { max-height: 60px; opacity: 1; margin-top: 4px; }
.sa-main:hover .sa-main__go { transform: rotate(0); background: var(--sa-copper); color: #fff; }

/* ============ MAIN: SUBCATEGORIES ============ */
.sa-subs { padding-bottom: 0; }
.sa-subs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sa-subs__grid--2 { grid-template-columns: repeat(2, 1fr); }
.sa-subs__grid--4 { grid-template-columns: repeat(4, 1fr); }
.sa-sub {
	display: flex;
	flex-direction: column;
	border-radius: 24px;
	background: #fff;
	border: 1px solid var(--sa-line);
	overflow: hidden;
	transition: transform .5s var(--sa-ease), box-shadow .5s, border-color .4s, opacity .9s var(--sa-ease) !important;
	transition-delay: calc(var(--i, 0) * 90ms) !important;
}
.sa-sub__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f1efed; }
.sa-subs__grid--2 .sa-sub__img { aspect-ratio: 16 / 9; }
.sa-sub__img img { width: 100%; height: 100% !important; object-fit: contain; background: #f1efed; box-sizing: border-box; padding: 12px; transition: transform .9s var(--sa-ease); }
.sa-sub__body { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px 22px; }
.sa-sub small { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-copper); }
.sa-sub strong { font: 600 1.5rem/1.15 var(--sa-serif); }
.sa-sub__peek { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.sa-sub__peek img { width: 46px; height: 46px; border-radius: 12px; object-fit: contain; background: #f1efed; box-sizing: border-box; padding: 3px; border: 2px solid #fff; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .4); transition: transform .4s var(--sa-ease); }
.sa-sub__peek img:nth-child(2) { margin-left: -16px; }
.sa-sub__peek img:nth-child(3) { margin-left: -16px; }
.sa-sub__peek em { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: .84rem; font-weight: 700; color: var(--sa-copper); }
.sa-sub__peek em .sa-icon { transition: transform .35s var(--sa-ease); }
.sa-sub:hover { transform: translateY(-8px); border-color: rgba(162, 93, 76, .35); box-shadow: 0 30px 56px -32px rgba(124, 66, 52, .6); transition-delay: 0s !important; }
.sa-sub:hover .sa-sub__img img { transform: scale(1.08); }
.sa-sub:hover .sa-sub__peek img:nth-child(2) { transform: translateX(10px); }
.sa-sub:hover .sa-sub__peek img:nth-child(3) { transform: translateX(20px); }
.sa-sub:hover .sa-sub__peek em .sa-icon { transform: translateX(5px); }

/* ============ PRODUCT LIST ============ */
.sa-plist { scroll-margin-top: 110px; }
.sa-catalog--shop .sa-plist { padding-top: 0; }
.sa-toolbar { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border-radius: 22px; background: #fff; border: 1px solid var(--sa-line); box-shadow: 0 20px 40px -34px rgba(124, 66, 52, .6); }
.sa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--sa-cream); border: 1px solid transparent; color: var(--sa-ink) !important; font-size: .86rem; font-weight: 600; transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--sa-ease); }
.sa-chip small { padding: 2px 8px; border-radius: 999px; background: #fff; color: var(--sa-copper); font-size: .7rem; font-weight: 800; transition: background-color .3s, color .3s; }
.sa-chip:hover { border-color: rgba(162, 93, 76, .4); transform: translateY(-2px); }
.sa-chip.is-active { background: var(--sa-ink); color: #fff !important; }
.sa-chip.is-active small { background: rgba(212, 168, 106, .2); color: var(--sa-gold); }

.sa-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.sa-select { position: relative; display: flex; align-items: center; gap: 0; border-radius: 999px; background: var(--sa-cream); border: 1px solid var(--sa-line); transition: border-color .3s, box-shadow .3s; }
.sa-select:focus-within { border-color: var(--sa-copper); box-shadow: 0 0 0 4px rgba(162, 93, 76, .12); }
.sa-select span { padding-left: 16px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-copper); }
.sa-select select { padding: 11px 40px 11px 10px; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23a25d4c' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; color: var(--sa-ink); font: 600 .88rem var(--sa-sans); cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; }

.sa-plist__meta { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 18px; }
.sa-plist__meta p { margin: 0; color: var(--sa-muted); font-size: .92rem; }
.sa-plist__meta strong { color: var(--sa-ink); }
.sa-tag { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; padding: 5px 6px 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--sa-line); color: var(--sa-ink); font-weight: 600; }
.sa-tag i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.sa-tag a { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sa-sand); color: var(--sa-copper) !important; font-size: 1rem; line-height: 1; }

.sa-plist__item { animation: sa-in .7s var(--sa-ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.sa-plist__item .sa-card { height: 100%; }

/* Pagination */
.sa-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 44px; }
.sa-pager .page-numbers { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 14px; background: #fff; border: 1px solid var(--sa-line); color: var(--sa-ink) !important; font-weight: 700; font-size: .92rem; transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--sa-ease); }
.sa-pager a.page-numbers:hover { border-color: var(--sa-copper); color: var(--sa-copper) !important; transform: translateY(-2px); }
.sa-pager .current { background: var(--sa-ink); border-color: var(--sa-ink); color: #fff !important; }
.sa-pager .dots { background: transparent; border-color: transparent; }

.sa-empty { padding: 60px 20px; text-align: center; border-radius: 24px; background: #fff; border: 1px dashed rgba(162, 93, 76, .35); }
.sa-empty > span { display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--sa-sand); color: var(--sa-copper); font-size: 1.8rem; }
.sa-empty h2 { margin: 16px 0 8px; font-size: 1.9rem; font-weight: 600; }
.sa-empty p { margin: 0 0 20px; color: var(--sa-muted); }

/* ============ OTHER COLLECTIONS ============ */
.sa-others { padding-top: 0; }
.sa-others__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sa-other { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid var(--sa-line); transition: transform .45s var(--sa-ease), box-shadow .45s, border-color .4s, opacity .9s var(--sa-ease) !important; transition-delay: calc(var(--i, 0) * 70ms) !important; }
.sa-other img { flex: none; width: 64px; height: 64px !important; border-radius: 12px; object-fit: contain; background: #f1efed; box-sizing: border-box; padding: 4px; transition: transform .5s var(--sa-ease); }
.sa-other span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-other strong { font: 600 1.1rem/1.2 var(--sa-serif); }
.sa-other small { font-size: .76rem; color: var(--sa-copper); font-weight: 700; }
.sa-other i { margin-left: auto; display: flex; color: var(--sa-copper); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .35s var(--sa-ease); }
.sa-other:hover { transform: translateY(-4px); border-color: rgba(162, 93, 76, .35); box-shadow: 0 20px 40px -28px rgba(124, 66, 52, .6); transition-delay: 0s !important; }
.sa-other:hover img { transform: scale(1.08) rotate(-3deg); }
.sa-other:hover i { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
	.sa-subs__grid--4 { grid-template-columns: repeat(2, 1fr); }
	.sa-others__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.sa-chero__inner { grid-template-columns: 1fr; }
	.sa-chero__visual { width: min(80%, 340px); }
	.sa-mains__grid { grid-template-columns: 1fr 1fr; }
	.sa-main--wide { grid-column: span 2; }
	.sa-subs__grid, .sa-subs__grid--2 { grid-template-columns: 1fr 1fr; }
	.sa-filters { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
	.sa-mains__grid, .sa-subs__grid, .sa-subs__grid--2, .sa-subs__grid--4, .sa-others__grid { grid-template-columns: 1fr; }
	.sa-main--wide { grid-column: auto; }
	.sa-main { min-height: 260px; }
	.sa-main__subs { max-height: 60px; opacity: 1; margin-top: 4px; }
	.sa-chips { flex-wrap: nowrap; overflow-x: auto; margin: -4px; padding: 4px; scrollbar-width: none; }
	.sa-chip { flex: none; }
	.sa-select { flex: 1; }
	.sa-select select { width: 100%; }
	.sa-chero__badge { right: -6px; width: 88px; height: 88px; }
}

/* ==========================================================================
   Shop layout: sidebar + results
   ========================================================================== */
.sa-shop { display: grid; grid-template-columns: 290px 1fr; gap: 32px; align-items: start; }
.sa-results { min-width: 0; }
.sa-results .sa-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sa-results > .sa-chips { margin-bottom: 14px; }
.sa-results .sa-toolbar { margin-bottom: 22px; padding: 10px 10px 10px 18px; }
.sa-toolbar__count { margin: 0; font-size: .92rem; color: var(--sa-muted); }
.sa-toolbar__count strong { color: var(--sa-ink); }
.sa-filter-btn { display: none; position: relative; align-items: center; gap: 8px; padding: 11px 16px; border: 0; border-radius: 999px; background: var(--sa-ink); color: #fff; font: 700 .86rem var(--sa-sans); cursor: pointer; }
.sa-filter-btn i { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--sa-red); box-shadow: 0 0 0 2px var(--sa-ink); }

/* Sidebar */
.sa-side { position: sticky; top: calc(var(--sa-adminbar) + 100px); display: grid; gap: 16px; max-height: calc(100vh - var(--sa-adminbar) - 120px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.sa-side__head { display: none; }
.sa-side__block { padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--sa-line); }
.sa-side__block h3 { margin: 0 0 14px; font: 700 .74rem var(--sa-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sa-copper); }

.sa-search { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--sa-line); transition: border-color .3s, box-shadow .3s; }
.sa-search:focus-within { border-color: var(--sa-copper); box-shadow: 0 0 0 4px rgba(162, 93, 76, .12); }
.sa-search > .sa-icon { flex: none; color: var(--sa-copper); }
.sa-search input { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: transparent; font: 500 .9rem var(--sa-sans); color: var(--sa-ink); outline: none; }
.sa-search button { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--sa-copper), var(--sa-red)); color: #fff; cursor: pointer; transition: transform .35s var(--sa-ease); }
.sa-search button:hover { transform: rotate(-45deg); }

.sa-tree, .sa-tree ul { margin: 0; padding: 0; list-style: none; }
.sa-tree > li { position: relative; border-bottom: 1px solid var(--sa-line); }
.sa-tree > li:last-child { border-bottom: 0; }
.sa-tree a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 40px 10px 0; color: var(--sa-ink) !important; font-size: .92rem; font-weight: 600; transition: color .25s, padding .3s var(--sa-ease); }
.sa-tree ul a { padding: 7px 0 7px 14px; font-size: .86rem; font-weight: 500; color: var(--sa-muted) !important; border-left: 2px solid var(--sa-line); }
.sa-tree a:hover { color: var(--sa-copper) !important; }
.sa-tree ul a:hover { padding-left: 18px; border-color: var(--sa-copper); }
.sa-tree small { flex: none; min-width: 30px; padding: 2px 8px; border-radius: 999px; background: var(--sa-cream); color: var(--sa-copper); font-size: .7rem; font-weight: 800; text-align: center; }
.sa-tree li.is-current > a { color: var(--sa-copper) !important; }
.sa-tree li.is-current > a small { background: var(--sa-copper); color: #fff; }
.sa-tree ul li.is-current > a { border-color: var(--sa-copper); }
.sa-tree__toggle { position: absolute; top: 6px; right: 0; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--sa-copper); cursor: pointer; transition: transform .35s var(--sa-ease), background-color .3s; }
.sa-tree__toggle:hover { background: var(--sa-sand); }
.sa-tree li.is-open > .sa-tree__toggle { transform: rotate(180deg); }
.sa-tree li > ul { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .4s var(--sa-ease); }
.sa-tree li > ul > * { min-height: 0; overflow: hidden; }
.sa-tree li.is-open > ul { grid-template-rows: 1fr; padding-bottom: 8px; }

.sa-swatches { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sa-swatches li.is-extra { display: none; }
.sa-swatches.is-expanded li.is-extra { display: block; }
.sa-swatches a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; color: var(--sa-ink) !important; font-size: .88rem; font-weight: 500; transition: background-color .25s; }
.sa-swatches a:hover { background: var(--sa-cream); }
.sa-swatches a.is-active { background: var(--sa-ink); color: #fff !important; }
.sa-swatches i { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); transition: transform .3s var(--sa-ease); }
.sa-swatches a:hover i { transform: scale(1.2); }
.sa-swatches span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-swatches small { font-size: .72rem; font-weight: 700; color: var(--sa-muted); }
.sa-swatches a.is-active small { color: var(--sa-gold); }
.sa-side__more { margin-top: 8px; padding: 6px 10px; border: 0; background: none; color: var(--sa-copper); font: 700 .82rem var(--sa-sans); cursor: pointer; }

.sa-side__cta { padding: 22px; border-radius: 22px; background: var(--sa-ink); background-image: radial-gradient(circle at 100% 0%, rgba(162, 93, 76, .5), transparent 55%); color: #dcc8bd; }
.sa-side__cta > span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 12px; background: rgba(212, 168, 106, .16); color: var(--sa-gold); font-size: 1.2rem; }
.sa-side__cta strong { display: block; margin-bottom: 4px; font: 600 1.3rem/1.2 var(--sa-serif); color: #fff; }
.sa-side__cta p { margin: 0 0 14px; font-size: .86rem; line-height: 1.6; }

.sa-side__overlay { display: none; }

@media (max-width: 1200px) {
	.sa-results .sa-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
	.sa-shop { grid-template-columns: 1fr; }
	.sa-filter-btn { display: inline-flex; }
	.sa-results .sa-toolbar { padding: 10px; }
	.sa-results .sa-grid { grid-template-columns: repeat(3, 1fr); }
	.sa-side {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 1003;
		width: min(360px, 88vw);
		max-height: none;
		padding: 18px;
		background: var(--sa-cream);
		box-shadow: 20px 0 60px -20px rgba(0, 0, 0, .4);
		transform: translateX(-105%);
		visibility: hidden;
		transition: transform .5s var(--sa-ease), visibility 0s .5s;
		align-content: start;
	}
	.sa-side.is-open { transform: none; visibility: visible; transition: transform .5s var(--sa-ease), visibility 0s; }
	.sa-side__head { display: flex; align-items: center; justify-content: space-between; }
	.sa-side__head strong { font: 600 1.6rem var(--sa-serif); }
	.sa-side__close { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--sa-sand); color: var(--sa-ink); cursor: pointer; }
	.sa-side__overlay { position: fixed; inset: 0; z-index: 1002; display: block; background: rgba(43, 27, 22, .5); opacity: 0; transition: opacity .4s; }
	.sa-side__overlay[hidden] { display: none; }
	.sa-side__overlay.is-open { opacity: 1; }
}
@media (max-width: 700px) {
	.sa-results .sa-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.sa-toolbar__count { order: 3; width: 100%; }
	.sa-results .sa-filters { width: auto; margin-left: auto; }
}

/* ==========================================================================
   Combo sizes: sidebar filter, overview page, badges
   ========================================================================== */
.sa-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sa-size { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 14px; background: var(--sa-cream); border: 1px solid transparent; color: var(--sa-ink) !important; transition: background-color .25s, border-color .25s, transform .3s var(--sa-ease); }
.sa-size strong { display: flex; align-items: baseline; gap: 2px; font: 600 1.4rem/1 var(--sa-serif); }
.sa-size strong em { font: 700 .6rem var(--sa-sans); font-style: normal; color: var(--sa-copper); letter-spacing: .04em; }
.sa-size small { font-size: .68rem; font-weight: 700; color: var(--sa-muted); }
.sa-size:hover { border-color: rgba(162, 93, 76, .4); transform: translateY(-2px); }
.sa-size.is-active { background: var(--sa-ink); color: #fff !important; }
.sa-size.is-active strong em, .sa-size.is-active small { color: var(--sa-gold); }

/* Overview page */
.sa-sizegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sa-sizecard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	border-radius: 24px;
	background: #fff;
	border: 1px solid var(--sa-line);
	overflow: hidden;
	isolation: isolate;
	transition: transform .5s var(--sa-ease), box-shadow .5s, color .4s, opacity .9s var(--sa-ease) !important;
	transition-delay: calc(var(--i, 0) * 60ms) !important;
}
.sa-sizecard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(140deg, var(--sa-ink), #4a2a22 60%, var(--sa-copper-dark)); opacity: 0; transition: opacity .5s; }
.sa-sizecard__num { display: flex; align-items: baseline; gap: 6px; }
.sa-sizecard__num strong { font: 600 4.2rem/.9 var(--sa-serif); background: linear-gradient(135deg, var(--sa-copper), var(--sa-red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sa-sizecard__num em { font: 800 .9rem var(--sa-sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--sa-copper); }
.sa-sizecard__body strong { display: block; font: 600 1.35rem/1.2 var(--sa-serif); transition: color .4s; }
.sa-sizecard__body small { font-size: .8rem; color: var(--sa-muted); transition: color .4s; }
.sa-sizecard__peek { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: auto; }
.sa-sizecard__peek img { width: 100%; height: auto !important; aspect-ratio: 1; object-fit: contain; background: #f1efed; box-sizing: border-box; padding: 4px; border-radius: 10px; transition: transform .5s var(--sa-ease); }
.sa-sizecard__go { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sa-sand); color: var(--sa-copper); transform: rotate(-45deg); transition: transform .45s var(--sa-ease), background-color .3s, color .3s; }
.sa-sizecard:hover { transform: translateY(-8px); box-shadow: 0 30px 56px -30px rgba(43, 27, 22, .7); color: #fff; transition-delay: 0s !important; }
.sa-sizecard:hover::before { opacity: 1; }
.sa-sizecard:hover .sa-sizecard__body strong { color: #fff; }
.sa-sizecard:hover .sa-sizecard__body small { color: #dcc8bd; }
.sa-sizecard:hover .sa-sizecard__num strong { background: linear-gradient(135deg, var(--sa-gold), #fff); -webkit-background-clip: text; background-clip: text; }
.sa-sizecard:hover .sa-sizecard__num em { color: var(--sa-gold); }
.sa-sizecard:hover .sa-sizecard__go { transform: rotate(0); background: var(--sa-copper); color: #fff; }
.sa-sizecard:hover .sa-sizecard__peek img:nth-child(odd) { transform: translateY(-4px) rotate(-3deg); }
.sa-sizecard:hover .sa-sizecard__peek img:nth-child(even) { transform: translateY(4px) rotate(3deg); }

.sa-sizeguide { padding-top: 0; }
.sa-sizeguide__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sa-guide { padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--sa-line); }
.sa-guide__tag { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--sa-ink); color: var(--sa-gold); font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.sa-guide h3 { margin: 14px 0 6px; font-size: 1.5rem; font-weight: 600; }
.sa-guide p { margin: 0 0 16px; font-size: .92rem; line-height: 1.65; color: var(--sa-muted); }
.sa-guide__links { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-guide__links a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--sa-cream); color: var(--sa-ink) !important; font-size: .84rem; font-weight: 700; transition: background-color .3s, color .3s; }
.sa-guide__links small { color: var(--sa-copper); font-size: .7rem; }
.sa-guide__links a:hover { background: var(--sa-copper); color: #fff !important; }
.sa-guide__links a:hover small { color: #fff; }

@media (max-width: 1100px) { .sa-sizegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .sa-sizeguide__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sa-sizegrid { grid-template-columns: 1fr; } }