/* ────────────────────────────────────────────────────────────
   Sticker Studio — My Account page (orders list + sidebar).
   Scope: страницы /account/* (logged-in user).
   Design system: Bounded (display), Golos Text (body), 16px radius,
   #FF3600 accent, #F5F5F5 card grey.
   ──────────────────────────────────────────────────────────── */

/* ─── Двухколоночный layout: сайдбар + контент ───────────────
   После удаления YITH дефолтные WC-стили (float: left 30%) не подходят.
   Делаем flexbox на ближайшем общем родителе — обёртке `.woocommerce`
   (WC оборачивает контент в неё на странице /account/). Скоупим жёстко
   к body.woocommerce-account, чтобы не задеть другие WC-страницы. */
body.woocommerce-account .woocommerce {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}
body.woocommerce-account .woocommerce > .ss-acc-sidebar {
	flex: 0 0 280px;
}
body.woocommerce-account .woocommerce > .woocommerce-MyAccount-content > h2:first-child { display: none; }

/* ─── Тип/цвета ──────────────────────────────────────────── */
.ss-acc-sidebar, .ss-acc-page, .ss-acc-order, .ss-acc-popover, .ss-acc-btn,
.ss-acc-pagination, .ss-acc-title, .ss-acc-section-head, .ss-acc-empty {
	font-family: "Golos Text", system-ui, -apple-system, sans-serif;
	color: #262626;
	box-sizing: border-box;
}

/* ─── Сайдбар (десктоп; на мобилках скрыт — см. media-query внизу) ─── */
.ss-acc-sidebar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 280px;
}

.ss-acc-sidebar__profile {
	background: #F5F5F5;
	border-radius: 18px;
	padding: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.ss-acc-sidebar__avatar {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: #fff;
	display: grid; place-items: center;
	font-family: "Bounded", system-ui, sans-serif;
	font-weight: 600; font-size: 15px;
	color: #262626;
	flex-shrink: 0;
}
.ss-acc-sidebar__profile-text { min-width: 0; }
.ss-acc-sidebar__name {
	font-weight: 600; font-size: 14px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-acc-sidebar__email {
	font-size: 12px; color: #8B8B8B; margin-top: 2px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Points CTA — оранжевая карточка с прозрачным S справа */
.ss-acc-sidebar__points {
	position: relative; overflow: hidden;
	background: #FF3600; color: #fff;
	border-radius: 18px;
	padding: 16px 18px;
	text-decoration: none;
	display: block;
	transition: opacity .12s ease;
}
.ss-acc-sidebar__points:hover { opacity: .92; color: #fff; }
.ss-acc-sidebar__points-num {
	position: relative; z-index: 1;
	font-family: "Bounded", system-ui, sans-serif;
	font-weight: 700; font-size: 32px; line-height: 1;
	letter-spacing: -0.02em;
}
.ss-acc-sidebar__points-label {
	position: relative; z-index: 1;
	font-size: 12px; opacity: .9; margin-top: 4px; font-weight: 500;
}
.ss-acc-sidebar__points-coin {
	position: absolute;
	right: -34px; top: 50%;
	transform: translateY(-50%) perspective(220px) rotateX(38deg) rotateZ(30deg);
	transform-origin: center;
	opacity: .22;
	pointer-events: none;
}

/* Навигация */
.ss-acc-sidebar__nav {
	background: #F5F5F5;
	border-radius: 18px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ss-acc-sidebar__link {
	display: block;
	padding: 10px 12px;
	border-radius: 10px;
	font-weight: 600; font-size: 14px;
	color: #262626;
	text-decoration: none;
	transition: background .12s ease;
}
.ss-acc-sidebar__link:hover { background: rgba(255,255,255,.5); color: #262626; }
.ss-acc-sidebar__link.is-active { background: #fff; color: #262626; }

/* ─── Заголовок страницы ─── */
.ss-acc-title {
	font-family: "Bounded", system-ui, sans-serif;
	font-weight: 600; font-size: 30px;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
	color: #262626;
}

.ss-acc-section-head {
	font-size: 14px;
	color: rgb(163, 163, 163);
	margin: 8px 4px 14px;
}
.ss-acc-section-head--spaced { margin-top: 32px; }

.ss-acc-empty { padding: 24px; }

/* ─── Список заказов: один <a> на строку ─── */
.ss-acc-orders {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ss-acc-order {
	display: grid;
	grid-template-columns: 360px 1px 1fr;
	align-items: stretch;
	gap: 28px;
	background: #F5F5F5;
	border-radius: 20px;
	padding: 28px 32px;
	text-decoration: none;
	color: inherit;
	transition: background .12s ease;
}
.ss-acc-order:hover { background: #F0F0F0; color: inherit; }

.ss-acc-order__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.ss-acc-order__head {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	color: #262626;
}
.ss-acc-order--done .ss-acc-order__head { color: #5C5C5C; }
.ss-acc-order__title {
	font-family: "Bounded", system-ui, sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
	color: inherit;
}
.ss-acc-order__chev {
	flex-shrink: 0;
	color: #262626;
	margin-left: 2px;
}
.ss-acc-order__meta {
	font-size: 13px; color: #8B8B8B;
	margin-top: 8px;
}
.ss-acc-order__sentence {
	font-size: 14px; color: #262626;
	font-weight: 600;
	margin-top: 10px;
}
.ss-acc-order__actions {
	margin-top: auto;
	padding-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ss-acc-order__divider {
	width: 1px;
	margin: 4px 0;
	background: rgb(218, 218, 218);
}
.ss-acc-order__thumbs {
	align-self: center;
	display: flex;
	gap: 10px;
	align-items: center;
}

/* Миниатюры макетов */
.ss-acc-thumb {
	width: 112px; height: 112px;
	border-radius: 16px;
	overflow: hidden;
	display: block;
	background: rgb(218, 218, 218);
	flex-shrink: 0;
	position: relative;
}
/* Картинка позиционируется через absolute, чтобы можно было анимировать
   её box (width/height) при hover — рамка остаётся, картинка «отзумивается»
   до своего нативного aspect-ratio. См. JS: вычисление hoverW/hoverH. */
.ss-acc-thumb img {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 100%; height: 100%;
	object-fit: cover;
	transition: width 320ms cubic-bezier(.22,.61,.36,1),
	            height 320ms cubic-bezier(.22,.61,.36,1);
	will-change: width, height;
}
.ss-acc-thumb--more {
	display: grid; place-items: center;
	font-family: "Bounded", system-ui, sans-serif;
	font-weight: 600; font-size: 24px;
	color: #262626;
	letter-spacing: -0.01em;
}
.ss-acc-thumb--empty { background: rgb(238,238,238); }

/* ─── Кнопки в карточке ─── */
.ss-acc-btn {
	display: inline-flex;
	align-items: center; justify-content: center;
	gap: 6px;
	border: 1px solid rgb(218, 218, 218);
	border-radius: 10px;
	padding: 9px 14px;
	font-family: "Bounded", system-ui, sans-serif;
	font-weight: 500; font-size: 13px; line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity .12s ease, transform .12s ease;
	text-decoration: none;
}
.ss-acc-btn:hover { opacity: .85; }
.ss-acc-btn:active { transform: translateY(1px); }
.ss-acc-btn--accent { background: #FF3600; color: #fff; }
.ss-acc-btn--dark   { background: #262626; color: #fff; }
.ss-acc-btn--white  { background: #fff;    color: #262626; }

/* ─── Hover-попап (прогресс + тёмный тултип) ─── */
.ss-acc-popover {
	position: absolute;
	top: calc(100% + 12px); left: -18px;
	z-index: 50;
	width: 340px;
	opacity: 0; visibility: hidden;
	pointer-events: none;
	transition: opacity .14s ease, visibility .14s ease;
}
.ss-acc-popover.is-open { opacity: 1; visibility: visible; }
.ss-acc-popover__arrow {
	position: absolute;
	top: -6px; left: 36px;
	width: 12px; height: 12px;
	transform: rotate(45deg);
	z-index: 0;
}
.ss-acc-popover__inner {
	position: relative; z-index: 1;
	padding: 20px 22px;
	border-radius: 18px;
}

/* Светлый (прогресс) */
.ss-acc-popover--progress .ss-acc-popover__inner {
	background: #fff;
	box-shadow: 0 18px 44px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
}
.ss-acc-popover--progress .ss-acc-popover__arrow {
	background: #fff;
	box-shadow: -1px -1px 1px rgba(0,0,0,0.04);
}
.ss-acc-popover__row {
	display: flex;
	gap: 14px;
	position: relative;
	padding-bottom: 16px;
}
.ss-acc-popover__row.is-last { padding-bottom: 0; }
.ss-acc-popover__bullet {
	position: relative;
	width: 20px; height: 20px;
	border-radius: 50%;
	flex-shrink: 0;
	display: grid; place-items: center;
	z-index: 1;
}
.ss-acc-popover--progress .is-done    .ss-acc-popover__bullet { background: #262626; }
.ss-acc-popover--progress .is-current .ss-acc-popover__bullet { background: #095EF7; box-shadow: 0 0 0 4px rgba(9,94,247,0.20); }
.ss-acc-popover--progress .is-pending .ss-acc-popover__bullet { background: #fff; border: 2px solid #E5E5E5; }
.ss-acc-popover__dot-inner {
	width: 5px; height: 5px;
	border-radius: 999px;
	background: #fff;
}
.ss-acc-popover__line {
	position: absolute;
	left: 10px; top: 22px; bottom: -14px;
	width: 2px;
	transform: translateX(-50%);
}
.ss-acc-popover--progress .is-done .ss-acc-popover__line { background: #262626; }
.ss-acc-popover--progress .ss-acc-popover__line { background: #EFEFEF; }
.ss-acc-popover__text {
	flex: 1; min-width: 0;
	padding-top: 1px;
}
.ss-acc-popover__label {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	font-family: "Bounded", system-ui, sans-serif;
	font-weight: 500; font-size: 14px;
	color: #262626; line-height: 1.2;
}
.ss-acc-popover--progress .is-pending .ss-acc-popover__label { color: #A3A3A3; }
.ss-acc-popover__desc {
	font-size: 13px; margin-top: 4px; line-height: 1.4; color: #8B8B8B;
}
.ss-acc-popover--progress .is-current .ss-acc-popover__desc { color: #5C5C5C; }
.ss-acc-popover--progress .is-pending .ss-acc-popover__desc { color: #A3A3A3; }
.ss-acc-popover__now {
	background: #095EF7; color: #fff;
	border-radius: 999px;
	padding: 2px 8px;
	font-family: "Bounded", system-ui, sans-serif;
	font-weight: 500; font-size: 10px;
	letter-spacing: 0.06em; text-transform: uppercase;
	line-height: 1.3;
}

/* ─── Пагинация ─── */
.ss-acc-pagination {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 16px;
	margin-top: 28px;
	padding: 20px 4px 0;
	border-top: 1px solid #EFEFEF;
}
.ss-acc-pagination__info {
	font-size: 13px; color: #8B8B8B;
}
.ss-acc-pagination__info b {
	color: #262626;
	font-family: "Bounded", system-ui, sans-serif;
	font-weight: 500;
}
.ss-acc-pagination__nav {
	display: inline-flex; align-items: center; gap: 4px;
}
.ss-acc-page {
	min-width: 38px; height: 38px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 12px;
	background: transparent;
	font-family: "Bounded", system-ui, sans-serif;
	font-weight: 500; font-size: 14px;
	color: #262626;
	text-decoration: none;
	transition: background .12s ease, color .12s ease;
}
.ss-acc-page:hover { background: #F5F5F5; color: #262626; }
.ss-acc-page.is-active {
	background: #262626; color: #fff; font-weight: 600;
}
.ss-acc-page--arrow {
	width: 38px; background: #F5F5F5;
}
.ss-acc-page--arrow:hover { background: #262626; color: #fff; }
.ss-acc-page--arrow.is-disabled {
	background: transparent;
	color: #C7C7C7;
	pointer-events: none;
}
.ss-acc-page--ellipsis { color: #8B8B8B; }

/* ────────────────────────────────────────────────────────────
   ADAPTIVE: ≤880px — сайдбар скрыт, карточка в одну колонку,
   кнопки на всю ширину. Мобильное меню — отдельный бургер темы.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
	body.woocommerce-account .woocommerce { display: block; }
	body.woocommerce-account .ss-acc-sidebar { display: none; }

	.ss-acc-title { font-size: 24px; margin-bottom: 18px; }

	.ss-acc-order {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 18px 18px 20px;
		border-radius: 18px;
	}
	.ss-acc-order__divider { display: none; }
	.ss-acc-order__title { font-size: 20px; }

	.ss-acc-order__thumbs {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		width: 100%;
		padding-top: 16px;
		border-top: 1px solid rgb(218, 218, 218);
	}
	.ss-acc-thumb {
		width: auto;
		height: auto;
		aspect-ratio: 1 / 1;
		border-radius: 14px;
	}
	.ss-acc-thumb--more { font-size: 20px; }

	.ss-acc-order__actions {
		flex-direction: column;
		padding-top: 18px;
	}
	.ss-acc-btn { width: 100%; padding: 12px 14px; }

	/* Hover-попапы на тач-устройствах прячем — для них есть отдельная
	   страница заказа со своим прогресс-баром. */
	.ss-acc-popover { display: none; }

	.ss-acc-pagination__info { font-size: 12px; }
}