/*
  Theme Name:   Altertee (Astra Child)
  Template:     astra
  Version:      2.1.1
 Description:  Child theme Altertee — streetwear apparel & sablon custom.
*/

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
	--alt-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--alt-ink: #0d0f12;
	--alt-ink-2: #171a1f;
	--alt-ink-3: #262a31;
	--alt-paper: #f2f2ee;
	--alt-card: #ffffff;
	--alt-line: #e3e3dd;
	--alt-line-2: #cfcfc6;
	--alt-text: #16181c;
	--alt-muted: #6a6e75;
	--alt-muted-d: #a3a8b0;
	--alt-brand: #0c8d97;
	--alt-brand-ink: #076069;
	--alt-brand-soft: #e1f2f2;
	--alt-brand-glow: #6fdbe0;
	--alt-accent: #f26b2a;
	--alt-red: #d9361a;
	--alt-star: #f5a623;
	--alt-wa: #1fbf5a;
	--alt-wa-d: #169a48;
	--alt-wa-soft: #e3f7ea;
	--alt-r: 14px;
	--alt-r-lg: 18px;
	--alt-shadow: 0 1px 2px rgba(13, 15, 18, .04), 0 8px 24px rgba(13, 15, 18, .06);
}

/* ==========================================================================
   BASE / ASTRA NEUTRALISATION
   ========================================================================== */
body.alt-site,
body.alt-site.ast-separate-container,
body.alt-site.ast-plain-container {
	background: var(--alt-paper) !important;
	color: var(--alt-text);
	font-family: var(--alt-font);
	-webkit-font-smoothing: antialiased;
}

body.alt-site h1, body.alt-site h2, body.alt-site h3, body.alt-site h4,
body.alt-site button, body.alt-site input, body.alt-site select, body.alt-site textarea {
	font-family: var(--alt-font);
}

.alt-full .site-content > .ast-container {
	display: block;
	max-width: none;
	padding: 0;
	margin: 0;
}

.alt-full #content { padding: 0; }

.alt-site .alt-main *,
.alt-site .alt-header *,
.alt-site .alt-footer * { box-sizing: border-box; }

.alt-main img { display: block; max-width: 100%; }

.alt-main a, .alt-header a, .alt-footer a, .alt-topbar a { text-decoration: none; }

.alt-wrap {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
}

.alt-main { padding-bottom: 8px; }
.alt-sec { margin-top: 40px; }

.alt-h1, .alt-h2, .alt-hero__title, .alt-pdp__title {
	color: var(--alt-ink);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.1;
	margin: 0;
}

.alt-h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.alt-h2 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }

.alt-eyebrow {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--alt-brand);
}

.alt-eyebrow--light { color: var(--alt-brand-glow); }

.alt-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--alt-ink) !important;
	white-space: nowrap;
}

.alt-link i { font-size: 12px; transition: transform .2s; }
.alt-link:hover { color: var(--alt-brand) !important; }
.alt-link:hover i { transform: translateX(3px); }

.alt-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	color: #fff;
}

.alt-pill i { color: var(--alt-accent); }

.alt-pill--soft {
	background: var(--alt-brand-soft);
	border-color: transparent;
	color: var(--alt-brand-ink) !important;
}

.alt-pill--soft i { color: var(--alt-brand); }

.alt-stars { color: var(--alt-star); letter-spacing: 2px; }

.alt-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	font-size: 12.5px;
	color: var(--alt-muted);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.alt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 42px;
	padding: 0 18px;
	border-radius: 10px;
	border: 1.5px solid transparent;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s, transform .18s;
}

.alt-btn:hover { transform: translateY(-1px); }
.alt-btn i { font-size: 1.1em; }
.alt-btn--lg { height: 50px; padding: 0 22px; font-size: 15px; }
.alt-btn--block { width: 100%; }

.alt-btn--wa { background: var(--alt-wa); color: #fff !important; }
.alt-btn--wa:hover { background: var(--alt-wa-d); }

.alt-btn--dark { background: var(--alt-ink); color: #fff !important; }
.alt-btn--dark:hover { background: var(--alt-ink-3); }

.alt-btn--light { background: #fff; color: var(--alt-ink) !important; }
.alt-btn--light:hover { background: var(--alt-brand-soft); }

.alt-btn--outline { background: #fff; border-color: var(--alt-line-2); color: var(--alt-ink) !important; }
.alt-btn--outline:hover { border-color: var(--alt-ink); }

.alt-btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .25); color: #fff !important; }
.alt-btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

/* ==========================================================================
   SECTION HEAD
   ========================================================================== */
.alt-shead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.alt-shead .alt-h2 { margin-top: 4px; }

/* ==========================================================================
   CATEGORY TILES
   ========================================================================== */
.alt-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.alt-cat {
	position: relative;
	display: block;
	height: 160px;
	overflow: hidden;
	border-radius: var(--alt-r);
	background: var(--alt-ink);
	isolation: isolate;
}

.alt-cat img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .6;
	z-index: -2;
	transition: transform .5s, opacity .3s;
}

.alt-cat::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(13, 15, 18, 0) 20%, rgba(13, 15, 18, .85));
}

.alt-cat:hover img { transform: scale(1.06); opacity: .75; }

.alt-cat__body {
	position: absolute;
	left: 16px;
	bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: #fff;
}

.alt-cat__body i {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: 8px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .16);
	backdrop-filter: blur(6px);
	font-size: 14px;
}

.alt-cat__body strong { font-size: 17px; font-weight: 800; }
.alt-cat__body small { font-size: 12.5px; color: #d3d6db; }

.alt-cat__go {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	color: var(--alt-ink);
	font-size: 12px;
	transition: transform .2s;
}

.alt-cat:hover .alt-cat__go { transform: rotate(-45deg); }

/* ==========================================================================
   PRODUCT GRID + CARD
   ========================================================================== */
.alt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.alt-grid--shop { grid-template-columns: repeat(4, 1fr); }

.alt-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--alt-card);
	border: 1px solid var(--alt-line);
	border-radius: var(--alt-r);
	transition: border-color .2s, box-shadow .2s, transform .2s;
}

.alt-card:hover { border-color: var(--alt-line-2); box-shadow: var(--alt-shadow); transform: translateY(-2px); }

.alt-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #e9e9e4;
}

.alt-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.alt-card:hover .alt-card__media img { transform: scale(1.05); }

.alt-card__ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-size: 42px;
	color: var(--alt-line-2);
}

.alt-card__tags {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.alt-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.2;
	color: #fff;
}

.alt-tag--best { background: var(--alt-ink); }
.alt-tag--baru { background: var(--alt-brand); }
.alt-tag--promo { background: var(--alt-accent); }
.alt-tag--off { background: #fff; color: var(--alt-red); box-shadow: inset 0 0 0 1px #f5c9bd; }

.alt-card__quick {
	position: absolute;
	left: 50%;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(13, 15, 18, .88);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity .2s, transform .2s;
}

.alt-card:hover .alt-card__quick { opacity: 1; transform: translate(-50%, 0); }

.alt-card__body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }

.alt-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--alt-muted);
}

.alt-card__meta span + span::before { content: '\2022'; margin-right: 8px; color: var(--alt-line-2); }

.alt-site .alt-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 5px 0 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.01em;
}

.alt-card__title a { color: var(--alt-ink) !important; }
.alt-card__title a:hover { color: var(--alt-brand) !important; }

.alt-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
}

.alt-price { display: flex; flex-direction: column; line-height: 1.2; }
.alt-price strong { font-size: 16.5px; font-weight: 800; color: var(--alt-ink); letter-spacing: -.01em; }
.alt-price del { font-size: 12.5px; color: var(--alt-muted); }

.alt-card__wa {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--alt-wa-soft);
	color: var(--alt-wa-d) !important;
	font-size: 18px;
	transition: background .18s, color .18s;
}

.alt-card__wa:hover { background: var(--alt-wa); color: #fff !important; }

/* Chip kategori (shortcode + katalog mobile) */
.alt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

.alt-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--alt-line);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--alt-ink) !important;
	white-space: nowrap;
}

.alt-chip i { font-size: 12px; color: var(--alt-muted); }
.alt-chip:hover { border-color: var(--alt-ink); }
.alt-chip.is-active { background: var(--alt-ink); border-color: var(--alt-ink); color: #fff !important; }
.alt-chip.is-active i { color: var(--alt-brand-glow); }

/* ==========================================================================
   PAGE HEAD + BREADCRUMB
   ========================================================================== */
.alt-phead {
	padding: 28px 0;
	background:
		radial-gradient(60% 160% at 100% 0%, rgba(12, 141, 151, .3), transparent 60%),
		var(--alt-ink);
}

.alt-phead__in { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.alt-phead .alt-h1 { color: #fff; margin: 10px 0 6px; }
.alt-phead p { margin: 0; max-width: 640px; font-size: 14.5px; line-height: 1.6; color: #b9bfc6; }

.alt-phead__stats { display: flex; gap: 8px; flex-shrink: 0; }

.alt-phead__stats span {
	min-width: 96px;
	padding: 10px 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .09);
	font-size: 12px;
	color: var(--alt-muted-d);
}

.alt-phead__stats strong { display: block; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.02em; }

.alt-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--alt-muted-d);
}

.alt-crumbs a { color: var(--alt-muted-d) !important; }
.alt-crumbs a:hover { color: #fff !important; }
.alt-crumbs .fa-chevron-right { font-size: 8px; opacity: .6; }
.alt-crumbs span { color: #fff; }

.alt-crumbs--bar { padding: 14px 0; color: var(--alt-muted); }
.alt-crumbs--bar a { color: var(--alt-muted) !important; }
.alt-crumbs--bar a:hover { color: var(--alt-ink) !important; }
.alt-crumbs--bar span { color: var(--alt-ink); font-weight: 600; }

/* ==========================================================================
   SHOP / CATALOG
   ========================================================================== */
.alt-shop {
	display: grid;
	grid-template-columns: 264px 1fr;
	gap: 16px;
	align-items: start;
	margin-top: 16px;
}

.alt-shop > *, .alt-pdp > *, .alt-duo > *, .alt-about > *, .alt-pdp__more > * { min-width: 0; }

.alt-shop__side { position: sticky; top: 84px; display: grid; gap: 12px; }

.alt-box {
	padding: 16px;
	background: var(--alt-card);
	border: 1px solid var(--alt-line);
	border-radius: var(--alt-r);
}

.alt-site .alt-box__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--alt-ink);
}

.alt-box__title i { color: var(--alt-brand); }

.alt-catlist { margin: 0; padding: 0; list-style: none; }

.alt-catlist a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--alt-ink) !important;
	transition: background .15s;
}

.alt-catlist a i { width: 16px; text-align: center; color: var(--alt-muted); font-size: 13px; }
.alt-catlist a em {
	margin-left: auto;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--alt-paper);
	font-size: 11.5px;
	font-style: normal;
	color: var(--alt-muted);
}

.alt-catlist a:hover { background: var(--alt-paper); }
.alt-catlist a.is-active { background: var(--alt-ink); color: #fff !important; }
.alt-catlist a.is-active i { color: var(--alt-brand-glow); }
.alt-catlist a.is-active em { background: var(--alt-ink-3); color: #fff; }

.alt-spec { margin: 0; padding: 0; list-style: none; }

.alt-spec li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--alt-line);
	font-size: 13px;
}

.alt-spec li:last-child { border-bottom: 0; padding-bottom: 0; }
.alt-spec span { color: var(--alt-muted); }
.alt-spec strong { color: var(--alt-ink); }

.alt-box--dark { background: var(--alt-ink); border-color: var(--alt-ink); color: #b9bfc6; }
.alt-box__icon { font-size: 22px; color: var(--alt-brand-glow); }
.alt-box--dark strong { display: block; margin: 10px 0 6px; font-size: 15px; color: #fff; line-height: 1.35; }
.alt-box--dark p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; }

.alt-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 8px 8px 8px 16px;
	background: var(--alt-card);
	border: 1px solid var(--alt-line);
	border-radius: var(--alt-r);
}

.alt-toolbar__count {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: 1;
	font-size: 14px;
	color: var(--alt-muted);
}

.alt-toolbar__count > strong { color: var(--alt-ink); margin-right: -4px; }

.alt-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--alt-brand-soft);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--alt-brand-ink) !important;
}

.alt-filter i { font-size: 10px; }

.alt-toolbar__search,
.alt-toolbar__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	border-radius: 10px;
	background: var(--alt-paper);
	color: var(--alt-muted);
	font-size: 13px;
}

.alt-toolbar__search { width: 230px; }

.alt-site .alt-toolbar input,
.alt-site .alt-toolbar select {
	width: 100%;
	height: 38px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	outline: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--alt-ink);
}

.alt-site .alt-toolbar select { width: auto; cursor: pointer; padding-right: 4px; }

.alt-chips--mobile { display: none; }

.alt-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 48px 20px;
	text-align: center;
	background: var(--alt-card);
	border: 1.5px dashed var(--alt-line-2);
	border-radius: var(--alt-r-lg);
}

.alt-empty > i { font-size: 34px; color: var(--alt-line-2); margin-bottom: 6px; }
.alt-empty strong { font-size: 18px; color: var(--alt-ink); }
.alt-empty p { margin: 0 0 12px; color: var(--alt-muted); font-size: 14px; }
.alt-empty--page { padding: 64px 20px; }

.alt-empty__code {
	font-size: clamp(4rem, 10vw, 7rem);
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: 1;
	color: var(--alt-ink);
}

/* ==========================================================================
   PRODUCT DETAIL
   ========================================================================== */
.alt-pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; align-items: start; }

.alt-pdp__media { position: sticky; top: 84px; }

.alt-pdp__img {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--alt-r-lg);
	background: #e9e9e4;
}

.alt-pdp__img img { width: 100%; height: 100%; object-fit: cover; }
.alt-pdp__img .alt-card__tags { top: 14px; left: 14px; }

.alt-pdp__feats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.alt-pdp__feats li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 12px;
	background: var(--alt-card);
	border: 1px solid var(--alt-line);
	border-radius: 11px;
	font-size: 13px;
	font-weight: 600;
	color: var(--alt-ink);
}

.alt-pdp__feats i { color: var(--alt-brand); }

.alt-pdp__info {
	padding: 24px;
	background: var(--alt-card);
	border: 1px solid var(--alt-line);
	border-radius: var(--alt-r-lg);
}

.alt-pdp__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.alt-pdp__rate { font-size: 13px; color: var(--alt-muted); }

.alt-pdp__title { margin: 12px 0 14px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

.alt-pdp__price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--alt-paper);
}

.alt-pdp__price strong { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--alt-ink); }
.alt-pdp__price del { font-size: 15px; color: var(--alt-muted); }

.alt-pdp__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 16px; }
.alt-pdp__specs div { padding: 10px 12px; border: 1px solid var(--alt-line); border-radius: 10px; }
.alt-pdp__specs dt { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--alt-muted); }
.alt-pdp__specs dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--alt-ink); }

.alt-order { padding-top: 16px; border-top: 1px solid var(--alt-line); }
.alt-order__row { margin-bottom: 16px; }
.alt-order__row--inline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.alt-order__label {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--alt-ink);
}

.alt-order__row--inline .alt-order__label { margin: 0; }

.alt-order__label a {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--alt-brand) !important;
}

.alt-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.alt-sizes label { position: relative; margin: 0; cursor: pointer; }
.alt-sizes input { position: absolute; opacity: 0; pointer-events: none; }

.alt-sizes span {
	display: grid;
	place-items: center;
	min-width: 54px;
	height: 44px;
	padding: 0 12px;
	border: 1.5px solid var(--alt-line-2);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--alt-ink);
	transition: border-color .15s, background .15s, color .15s;
}

.alt-sizes label:hover span { border-color: var(--alt-ink); }
.alt-sizes input:checked + span { background: var(--alt-ink); border-color: var(--alt-ink); color: #fff; }
.alt-sizes input:focus-visible + span { outline: 2px solid var(--alt-brand); outline-offset: 2px; }

.alt-sizes.is-shake { animation: alt-shake .35s; }

@keyframes alt-shake {
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

.alt-qty {
	display: inline-flex;
	height: 44px;
	overflow: hidden;
	border: 1.5px solid var(--alt-line-2);
	border-radius: 10px;
}

.alt-site .alt-qty button {
	width: 40px;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: var(--alt-ink);
	font-size: 12px;
	cursor: pointer;
}

.alt-site .alt-qty button:hover { background: var(--alt-paper); }

.alt-site .alt-qty input {
	width: 52px;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--alt-ink);
	box-shadow: none;
	-moz-appearance: textfield;
}

.alt-qty input::-webkit-outer-spin-button,
.alt-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.alt-order__total { margin-left: auto; font-size: 13px; color: var(--alt-muted); }
.alt-order__total strong { margin-left: 6px; font-size: 18px; font-weight: 800; color: var(--alt-ink); }

.alt-order__actions { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }

.alt-order__hint { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--alt-red); }
.alt-order__hint[hidden] { display: none; }

.alt-pdp__note {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	padding: 11px 14px;
	border-radius: 10px;
	background: #fff8e6;
	border: 1px solid #f3dfa8;
	font-size: 13.5px;
	line-height: 1.5;
	color: #5c4a14;
}

.alt-pdp__note i { margin-top: 3px; color: #d39a00; }

.alt-pdp__trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.alt-pdp__trust li {
	display: flex;
	gap: 10px;
	padding: 11px 12px;
	border-radius: 11px;
	background: var(--alt-paper);
	font-size: 12px;
	line-height: 1.4;
	color: var(--alt-muted);
}

.alt-pdp__trust i { margin-top: 2px; font-size: 15px; color: var(--alt-brand); }
.alt-pdp__trust strong { display: block; font-size: 13px; color: var(--alt-ink); }

.alt-pdp__more { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: start; margin-top: 16px; }

.alt-prose { font-size: 14.5px; line-height: 1.75; color: var(--alt-text); }
.alt-prose p { margin: 0 0 10px; }
.alt-prose p:last-child { margin-bottom: 0; }

.alt-table-wrap { overflow-x: auto; border: 1px solid var(--alt-line); border-radius: 12px; }

.alt-site .alt-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 14px;
}

.alt-site .alt-table th,
.alt-site .alt-table td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--alt-line);
	text-align: center;
	color: var(--alt-ink);
}

.alt-site .alt-table thead th {
	background: var(--alt-ink);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.alt-site .alt-table tbody th { font-weight: 800; }
.alt-site .alt-table tbody tr:last-child > * { border-bottom: 0; }
.alt-site .alt-table tr.is-off > * { color: var(--alt-muted-d); background: var(--alt-paper); }

.alt-site .alt-panel__sub {
	margin: 18px 0 10px;
	padding-top: 16px;
	border-top: 1px solid var(--alt-line);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--alt-ink);
}

.alt-care { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }

.alt-care li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--alt-paper);
	font-size: 13px;
	color: var(--alt-text);
}

.alt-care i { width: 16px; text-align: center; color: var(--alt-brand); }

.alt-buybar { display: none; }

/* ==========================================================================
   PANEL (dipakai detail produk)
   ========================================================================== */
.alt-panel {
	padding: 22px;
	background: var(--alt-card);
	border: 1px solid var(--alt-line);
	border-radius: var(--alt-r-lg);
}

.alt-site .alt-panel__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 800;
	color: var(--alt-ink);
}

.alt-panel__title i { color: var(--alt-brand); }

/* Kolom pencarian [altertee_cari] */
.alt-search { position: relative; display: flex; align-items: center; width: 100%; }

.alt-search i {
	position: absolute;
	left: 14px;
	font-size: 13px;
	color: var(--alt-muted);
	pointer-events: none;
}

.alt-site .alt-search input {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 14px 0 38px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--alt-paper);
	font-size: 13.5px;
	color: var(--alt-ink);
	box-shadow: none;
	outline: 0;
}

.alt-site .alt-search input:focus { border-color: var(--alt-line-2); background: #fff; }

.alt-main [id] { scroll-margin-top: 90px; }

/* ==========================================================================
   ELEMENTOR — DASAR
   Konten, warna latar, padding, gap & kolom grid diatur di Elementor.
   Bagian ini hanya memberi gaya pada kelas CSS "alt-el-*" (Advanced > CSS Classes).
   ========================================================================== */
.elementor .elementor-widget-text-editor p:last-child,
.ast-custom-footer .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

.elementor-widget-text-editor { font-size: 14.5px; line-height: 1.65; }

.alt-site .elementor-heading-title { line-height: 1.12; }

.alt-el-h1 .elementor-heading-title { font-size: clamp(1.7rem, 3vw, 2.4rem); color: #fff; }
.alt-el-h2 .elementor-heading-title { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }

.alt-el-eyebrow .elementor-heading-title {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--alt-brand);
}

.alt-el-eyebrow.is-light .elementor-heading-title { color: var(--alt-brand-glow); }

/* Ikon SVG dari Elementor mengikuti warna teks */
.alt-site .elementor-icon-list-icon svg,
.alt-site .elementor-button-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* Tombol */
.alt-el-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 18px;
	border: 1.5px solid transparent;
	border-radius: 10px;
	background: var(--alt-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	transition: background .18s, border-color .18s, transform .18s;
}

.alt-el-btn .elementor-button:hover { transform: translateY(-1px); color: #fff; }
.alt-el-btn .elementor-button-content-wrapper { gap: 8px; align-items: center; }
.alt-el-btn .elementor-button-icon { margin: 0 !important; }
.alt-el-btn.is-lg .elementor-button { height: 50px; padding: 0 22px; font-size: 15px; }
.alt-el-btn.is-block, .alt-el-btn.is-block .elementor-button { width: 100%; justify-content: center; }
.alt-el-btn.is-wa .elementor-button { background: var(--alt-wa); }
.alt-el-btn.is-wa .elementor-button:hover { background: var(--alt-wa-d); }
.alt-el-btn.is-light .elementor-button { background: #fff; color: var(--alt-ink); }
.alt-el-btn.is-light .elementor-button:hover { background: var(--alt-brand-soft); color: var(--alt-ink); }
.alt-el-btn.is-ghost .elementor-button { background: transparent; border-color: rgba(255, 255, 255, .25); }
.alt-el-btn.is-ghost .elementor-button:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

.alt-el-link .elementor-button {
	padding: 0;
	background: none;
	color: var(--alt-ink);
	font-size: 14px;
	font-weight: 700;
}

.alt-el-link .elementor-button:hover { background: none; color: var(--alt-brand); }
.alt-el-link .elementor-button-content-wrapper { gap: 8px; }
.alt-el-link .elementor-button-icon svg { width: 12px; height: 12px; transition: transform .2s; }
.alt-el-link .elementor-button:hover .elementor-button-icon svg { transform: translateX(3px); }

/* Judul section & baris teks + aksi: kolom teks selebar isinya */
.alt-el-shead > .e-con,
.alt-el-cta > .e-con,
.alt-el-phead__in > .e-con { --width: auto; width: auto; }
.alt-el-shead > .e-con:first-child { flex: 1 1 auto; }

/* Tautan di konten Elementor tanpa garis bawah bawaan tema */
.alt-site .alt-card a, .alt-site a.alt-cat, .alt-site .alt-shop a, .alt-site a.alt-chip,
.alt-site [class*="alt-el-"] a { text-decoration: none; }

/* Panel putih */
.alt-el-panel {
	padding: 22px !important;
	background: var(--alt-card);
	border: 1px solid var(--alt-line);
	border-radius: var(--alt-r-lg);
}

/* Statistik (angka + label) */
.alt-el-stat-num .elementor-heading-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.alt-el-stat-label .elementor-heading-title { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--alt-muted-d); }

/* ==========================================================================
   ELEMENTOR — HEADER (Custom Layout "Header Altertee")
   ========================================================================== */
.ast-custom-header { position: sticky; top: 0; z-index: 90; }
.admin-bar .ast-custom-header { top: 32px; }

.alt-el-topbar .elementor-icon-list-item,
.alt-el-topbar .elementor-icon-list-text { color: #c9cdd3; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.alt-el-topbar .elementor-icon-list-icon { color: var(--alt-brand-glow); }
.alt-el-topbar__list { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.alt-el-topbar__list .elementor-icon-list-items,
.alt-el-topbar__side .elementor-icon-list-items {
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
.alt-el-topbar__list .elementor-icon-list-items { overflow: hidden; gap: 0 26px; }
.alt-el-topbar__list .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
.alt-el-topbar__list .elementor-icon-list-item::after { display: none; }
.alt-el-topbar__side .elementor-icon-list-text { color: var(--alt-muted-d); }

.alt-el-header { border-bottom: 1px solid var(--alt-line); box-shadow: 0 6px 20px rgba(13, 15, 18, .04); }

.alt-el-header .alt-el-brand { flex-shrink: 0; }
.alt-el-brand .elementor-image-box-wrapper { display: flex; align-items: center; gap: 10px; text-align: left; }
.alt-el-brand .elementor-image-box-img { width: 36px !important; margin: 0 !important; flex-shrink: 0; }
.alt-el-brand .elementor-image-box-img img { width: 36px; height: 36px; border-radius: 9px; }
.alt-el-brand .elementor-image-box-title { display: block; margin: 0; font-size: 17px; font-weight: 800; letter-spacing: .1em; line-height: 1.05; }
.alt-el-brand .elementor-image-box-title a { color: var(--alt-ink); }
.alt-el-brand .elementor-image-box-description {
	margin: 3px 0 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--alt-muted);
	white-space: nowrap;
}
.alt-el-brand.is-light .elementor-image-box-title a { color: #fff; }
.alt-el-brand.is-light .elementor-image-box-description { color: var(--alt-muted-d); }

.alt-el-nav .uael-nav-menu .menu-item a.uael-menu-item {
	padding: 8px 13px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--alt-muted);
	transition: background .15s, color .15s;
}

.alt-el-nav .uael-nav-menu .menu-item a.uael-menu-item:hover,
.alt-el-nav .uael-nav-menu .current-menu-item > .uael-has-submenu-container > a.uael-menu-item,
.alt-el-nav .uael-nav-menu .current-menu-item > a.uael-menu-item { background: var(--alt-paper); color: var(--alt-ink); }

.alt-el-nav .uael-nav-menu__toggle { margin-left: auto; }

.alt-el-nav .uael-nav-menu-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--alt-line);
	border-radius: 10px;
	color: var(--alt-ink);
}

.alt-el-search { width: 260px; flex-shrink: 1; }

/* ==========================================================================
   ELEMENTOR — FOOTER (Custom Layout "Footer Altertee")
   ========================================================================== */
.alt-el-prefooter { border-top: 1px solid var(--alt-line); margin-top: 40px; }

.alt-el-pf { padding: 20px 16px; }
.alt-el-pf:first-child { padding-left: 0; }
.alt-el-pf + .alt-el-pf { border-left: 1px solid var(--alt-line); }

.alt-el-pf .elementor-icon-box-wrapper,
.alt-el-usp .elementor-icon-box-wrapper,
.alt-el-trust .elementor-icon-box-wrapper,
.alt-el-mini .elementor-icon-box-wrapper,
.alt-el-service .elementor-icon-box-wrapper,
.alt-el-step .elementor-icon-box-wrapper,
.alt-el-promo .elementor-icon-box-wrapper { display: flex; align-items: center; gap: 12px; text-align: left; }

.alt-el-pf .elementor-icon-box-icon,
.alt-el-usp .elementor-icon-box-icon,
.alt-el-trust .elementor-icon-box-icon,
.alt-el-mini .elementor-icon-box-icon,
.alt-el-service .elementor-icon-box-icon,
.alt-el-step .elementor-icon-box-icon,
.alt-el-promo .elementor-icon-box-icon,
.alt-el-flow .elementor-icon-box-icon { margin: 0 !important; flex-shrink: 0; display: block; }

.alt-site [class*="alt-el-"] .elementor-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	font-size: 17px;
	background: var(--alt-brand-soft);
	color: var(--alt-brand);
	fill: var(--alt-brand);
}

.alt-site [class*="alt-el-"] .elementor-icon svg { width: 1em; height: 1em; fill: currentColor; }

.alt-el-pf .elementor-icon { background: var(--alt-ink) !important; color: var(--alt-brand-glow) !important; fill: var(--alt-brand-glow) !important; }

.alt-site [class*="alt-el-"] .elementor-icon-box-title {
	margin: 0 0 1px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.005em;
	line-height: 1.3;
	color: var(--alt-ink);
}

.alt-site [class*="alt-el-"] .elementor-icon-box-description { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--alt-muted); }

.alt-el-footer { color: var(--alt-muted-d); }
.alt-el-fdesc p { max-width: 380px; font-size: 13.5px; line-height: 1.65; color: var(--alt-muted-d); }

.alt-el-fhead .elementor-heading-title {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
}

.alt-el-flinks .elementor-icon-list-item { padding-bottom: 10px !important; }
.alt-el-flinks .elementor-icon-list-text { font-size: 14px; color: #c4c8ce; transition: color .15s; }
.alt-el-flinks a:hover .elementor-icon-list-text { color: #fff; }
.alt-el-flinks .elementor-icon-list-icon { color: var(--alt-brand-glow); width: 16px; }
.alt-el-flinks .elementor-icon-list-icon svg { width: 12px; height: 12px; }

.alt-el-social { --justify-content: flex-start; text-align: left; }
.alt-el-social .elementor-social-icons-wrapper { display: flex; justify-content: flex-start !important; gap: 8px; }
.alt-el-social .elementor-social-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	margin: 0 !important;
	border-radius: 10px;
	background: var(--alt-ink-3);
	font-size: 16px;
	transition: background .15s;
}

.alt-el-social .elementor-social-icon svg { width: 16px; height: 16px; fill: #fff; }
.alt-el-social .elementor-social-icon:hover { background: var(--alt-brand); }

.alt-el-fbottom { border-top: 1px solid rgba(255, 255, 255, .08); }
.alt-el-copy p { font-size: 12.5px; color: var(--alt-muted-d); }

.alt-el-pay .elementor-icon-list-items { gap: 6px; }
.alt-el-pay .elementor-icon-list-item {
	margin: 0 !important;
	padding: 5px 10px !important;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 6px;
}
.alt-el-pay .elementor-icon-list-item::after { display: none; }
.alt-el-pay .elementor-icon-list-text { font-size: 12px; color: #c4c8ce; }
.alt-el-pay .elementor-icon-list-icon { color: #c4c8ce; }

/* ==========================================================================
   ELEMENTOR — BERANDA
   ========================================================================== */
.alt-el-hero {
	display: grid !important;
	grid-template-columns: 1.3fr 1fr .78fr;
	gap: 12px;
	min-height: 540px;
}

.alt-el-hero__main {
	background-image: radial-gradient(120% 80% at 100% 0%, rgba(12, 141, 151, .35), transparent 55%) !important;
}

.alt-el-pill .elementor-icon-list-item {
	padding: 6px 12px !important;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
}
.alt-el-pill .elementor-icon-list-text { font-size: 12px; font-weight: 700; color: #fff; }
.alt-el-pill .elementor-icon-list-icon { color: var(--alt-accent); }

.alt-el-hero__title .elementor-heading-title {
	font-size: clamp(2rem, 3.7vw, 3.3rem);
	letter-spacing: -.035em;
	line-height: 1.04;
	color: #fff;
}

.alt-el-hero__title .elementor-heading-title span { color: var(--alt-brand-glow); }
.alt-el-hero__lead p { max-width: 520px; font-size: 15.5px; color: #b9bfc6; }

.alt-el-hero__stats { width: 100%; padding-top: 18px !important; margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .1); }
.alt-el-hero__stats .alt-el-stat { padding-right: 12px !important; }
.alt-el-hero__stats .alt-el-stat + .alt-el-stat { padding-left: 14px !important; border-left: 1px solid rgba(255, 255, 255, .1); }

.alt-el-tile { position: relative; overflow: hidden; min-height: 200px; }
.alt-el-tile::before { transition: transform .5s ease; }
.alt-el-hero__side { display: grid !important; grid-template-rows: 1fr auto; }

.alt-el-cap { padding: 11px 14px !important; border-radius: 12px; background: rgba(255, 255, 255, .95); }
.alt-el-cap__small .elementor-heading-title { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--alt-muted); }
.alt-el-cap__title .elementor-heading-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--alt-ink); }
.alt-site .alt-el-cap__go .elementor-icon { width: 34px; height: 34px; border-radius: 50%; font-size: 12px; background: var(--alt-ink); color: #fff; fill: #fff; }

.alt-el-promo { padding: 20px; border-radius: var(--alt-r-lg); background: var(--alt-accent); }
.alt-site .alt-el-promo .elementor-icon { width: 46px; height: 46px; border-radius: 12px; font-size: 20px; background: rgba(255, 255, 255, .18); color: #fff; fill: #fff; }
.alt-site .alt-el-promo .elementor-icon-box-title { font-size: 16px; font-weight: 800; color: #fff; }
.alt-site .alt-el-promo .elementor-icon-box-description { color: rgba(255, 255, 255, .9); }

.alt-el-uspgrid { background: var(--alt-card); border: 1px solid var(--alt-line); border-radius: var(--alt-r); }
.alt-el-usp { padding: 16px 18px; }
.alt-el-usp + .alt-el-usp { border-left: 1px solid var(--alt-line); }

.alt-el-custom { overflow: hidden; }
.alt-el-chips .elementor-icon-list-items { gap: 6px; }
.alt-el-chips .elementor-icon-list-item { margin: 0 !important; padding: 7px 12px !important; border-radius: 999px; background: rgba(255, 255, 255, .94); }
.alt-el-chips .elementor-icon-list-item::after { display: none; }
.alt-el-chips .elementor-icon-list-text { font-size: 12.5px; font-weight: 700; color: var(--alt-ink); }
.alt-el-chips .elementor-icon-list-icon { color: var(--alt-brand); }

.alt-el-custom__body .alt-el-h2 .elementor-heading-title { color: #fff; }
.alt-el-custom__body .elementor-widget-text-editor { color: #b9bfc6; font-size: 15px; }

.alt-el-checks .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.alt-el-checks .elementor-icon-list-item { align-items: flex-start !important; padding: 0 !important; margin: 0 !important; }
.alt-el-checks .elementor-icon-list-text { font-size: 13.5px; line-height: 1.45; color: #dfe2e6; }
.alt-el-checks .elementor-icon-list-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: rgba(111, 219, 224, .16);
	color: var(--alt-brand-glow);
}
.alt-el-checks .elementor-icon-list-icon svg { width: 10px; height: 10px; }

.alt-el-custom__note .elementor-icon-list-text,
.alt-el-custom__note .elementor-icon-list-icon { font-size: 13px; color: var(--alt-muted-d); }

/* Langkah order (nomor otomatis) */
.alt-el-steps { counter-reset: altstep; }
.alt-el-step { counter-increment: altstep; padding: 13px 0; border-bottom: 1px dashed var(--alt-line); }
.alt-el-step:first-child { padding-top: 0; }
.alt-el-step .elementor-icon-box-wrapper { gap: 14px; }
.alt-el-step .elementor-icon-box-content { flex: 1; }
.alt-el-step .elementor-icon-box-wrapper::after {
	content: counter(altstep, decimal-leading-zero);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--alt-line-2);
}
.alt-site .alt-el-step .elementor-icon-box-title { font-size: 15px; }
.alt-site .alt-el-step .elementor-icon-box-description { font-size: 13px; }

/* Ulasan */
.alt-el-rating .elementor-star-rating__wrapper {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--alt-paper);
}
.alt-el-rating .elementor-star-rating__title { margin: 0; font-size: 13px; font-weight: 600; color: var(--alt-muted); }
.alt-el-rating .elementor-star-rating { font-size: 18px; color: var(--alt-star); }
.alt-el-rating .elementor-star-rating i::before { color: var(--alt-star); }

.alt-el-review { padding: 14px 16px; border: 1px solid var(--alt-line); border-radius: 12px; }
.alt-el-review .elementor-testimonial-wrapper { text-align: left; }
.alt-el-review .elementor-testimonial-content { font-size: 13.5px; font-style: normal; line-height: 1.6; color: var(--alt-text); }
.alt-el-review .elementor-testimonial-meta { margin-top: 10px; }
.alt-el-review .elementor-testimonial-image { display: none; }
.alt-el-review .elementor-testimonial-details { padding: 0 !important; }
.alt-el-review .elementor-testimonial-name { font-size: 13px; font-weight: 700; color: var(--alt-ink); }
.alt-el-review .elementor-testimonial-job { font-size: 12px; color: var(--alt-muted); }

/* CTA */
.alt-el-cta { background-image: radial-gradient(70% 140% at 100% 50%, rgba(12, 141, 151, .45), transparent 60%) !important; }
.alt-el-cta .alt-el-h2 .elementor-heading-title { color: #fff; }
.alt-el-cta .elementor-widget-text-editor { max-width: 560px; color: #b9bfc6; }
.alt-el-cta__text { flex: 1 1 360px; }

/* ==========================================================================
   ELEMENTOR — HALAMAN DALAM (Katalog, Tentang)
   ========================================================================== */
.alt-el-phead { background-image: radial-gradient(60% 160% at 100% 0%, rgba(12, 141, 151, .3), transparent 60%) !important; }
.alt-el-phead .elementor-widget-text-editor { max-width: 640px; color: #b9bfc6; }

.alt-el-phead__stats .alt-el-stat {
	min-width: 96px;
	padding: 10px 16px !important;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .09);
}
.alt-el-phead__stats .alt-el-stat-num .elementor-heading-title { font-size: 20px; }

.alt-el-about__img { position: relative; min-height: 360px; overflow: hidden; border-radius: var(--alt-r-lg); }
.alt-el-about__img img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.alt-el-mini { padding: 12px 14px; border-radius: 12px; background: var(--alt-paper); }
.alt-site .alt-el-mini .elementor-icon { width: 36px; height: 36px; font-size: 15px; background: #fff; }

.alt-el-flow { position: relative; padding: 18px; background: var(--alt-card); border: 1px solid var(--alt-line); border-radius: var(--alt-r); }
.alt-el-flowgrid { counter-reset: altflow; }
.alt-el-flow { counter-increment: altflow; }
.alt-el-flow::after {
	content: counter(altflow, decimal-leading-zero);
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--alt-line-2);
}
.alt-site .alt-el-flow .elementor-icon-box-wrapper,
.alt-site .alt-el-flow .elementor-icon-box-content { text-align: left !important; }
.alt-site .alt-el-flow .elementor-icon-box-icon { display: flex; justify-content: flex-start; }
.alt-el-flow .elementor-icon-box-icon { margin-bottom: 14px !important; }
.alt-site .alt-el-flow .elementor-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; background: var(--alt-ink); color: var(--alt-brand-glow); fill: var(--alt-brand-glow); }
.alt-site .alt-el-flow .elementor-icon-box-title { font-size: 16px; }
.alt-site .alt-el-flow .elementor-icon-box-description { margin-top: 4px; font-size: 13.5px; line-height: 1.55; }

.alt-el-format { border: 1px solid #c3e4e5; }
.alt-el-format .elementor-widget-text-editor { color: var(--alt-brand-ink); font-size: 14px; }
.alt-site .alt-el-pre pre {
	margin: 0;
	padding: 10px 14px;
	border: 1px solid #c3e4e5;
	border-radius: 10px;
	background: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--alt-ink);
	white-space: pre;
	overflow: auto;
}

.alt-el-service { padding: 14px; background: var(--alt-card); border: 1px solid var(--alt-line); border-radius: 12px; }
.alt-el-service .elementor-icon-box-wrapper { align-items: flex-start; }
.alt-el-service .elementor-icon-box-content { display: flex; flex-direction: column-reverse; }
.alt-site .alt-el-service .elementor-icon-box-title { margin-top: 2px; font-size: 14px; line-height: 1.4; }
.alt-site .alt-el-service .elementor-icon-box-description { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.alt-site .alt-el-service .elementor-icon { width: 40px; height: 40px; font-size: 15px; }

.alt-el-faq .elementor-toggle-item {
	margin-bottom: 8px;
	background: var(--alt-card);
	border: 1px solid var(--alt-line);
	border-radius: 12px;
	overflow: hidden;
}
.alt-el-faq .elementor-tab-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px !important;
	border: 0 !important;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--alt-ink);
}
.alt-el-faq .elementor-tab-title a { color: var(--alt-ink); }
.alt-el-faq .elementor-toggle-title { order: 1; flex: 1; }
.alt-el-faq .elementor-toggle-icon { order: 2; float: none !important; margin: 0 !important; width: auto !important; color: var(--alt-muted); }
.alt-el-faq .elementor-toggle-icon svg { width: 12px; height: 12px; fill: currentColor; }
.alt-el-faq .elementor-tab-content { padding: 0 16px 14px !important; border: 0 !important; font-size: 14px; line-height: 1.65; color: var(--alt-muted); }

/* ==========================================================================
   ELEMENTOR — BLOK HOOK (produk & katalog)
   ========================================================================== */
.alt-el-trust { padding: 11px 12px; border-radius: 11px; background: var(--alt-card); border: 1px solid var(--alt-line); }
.alt-el-trust .elementor-icon-box-wrapper { gap: 10px; }
.alt-site .alt-el-trust .elementor-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; }
.alt-site .alt-el-trust .elementor-icon-box-title { font-size: 13px; }
.alt-site .alt-el-trust .elementor-icon-box-description { font-size: 12px; }

.alt-site .alt-el-ptitle .elementor-icon-list-text { font-size: 16px; font-weight: 800; color: var(--alt-ink); }
.alt-el-ptitle .elementor-icon-list-icon { color: var(--alt-brand); }

.alt-el-sizechart .alt-table { border: 1px solid var(--alt-line) !important; border-radius: 12px; overflow: hidden; border-collapse: separate !important; border-spacing: 0; }
.alt-el-note p { font-size: 12.5px; color: var(--alt-muted); }

.alt-el-care .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.alt-el-care .elementor-icon-list-item { margin: 0 !important; padding: 10px 12px !important; border-radius: 10px; background: var(--alt-paper); }
.alt-el-care .elementor-icon-list-item::after { display: none; }
.alt-el-care .elementor-icon-list-text { font-size: 13px; color: var(--alt-text); }
.alt-el-care .elementor-icon-list-icon { color: var(--alt-brand); }

.alt-el-box { padding: 16px !important; background: var(--alt-card); border: 1px solid var(--alt-line); border-radius: var(--alt-r); }
.alt-el-box.is-dark { border-color: var(--alt-ink); color: #b9bfc6; }
.alt-el-box.is-dark .elementor-widget-text-editor { font-size: 13px; line-height: 1.55; color: #b9bfc6; }
.alt-site .alt-el-boxtitle .elementor-icon-list-text { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--alt-ink); }
.alt-el-boxtitle .elementor-icon-list-icon { color: var(--alt-brand); }
.alt-site .alt-el-boxicon .elementor-icon { width: auto; height: auto; background: none; font-size: 22px; color: var(--alt-brand-glow); fill: var(--alt-brand-glow); }
.alt-el-boxhead .elementor-heading-title { font-size: 15px; font-weight: 800; line-height: 1.35; color: #fff; }
.alt-el-box .alt-spec { margin: 0; }

.alt-pdp__slot:empty { display: none; }

/* Daftar di dalam konten halaman (Astra memberi margin pada ul di .entry-content) */
.alt-site .entry-content .alt-catlist,
.alt-site .entry-content .alt-spec,
.alt-site .entry-content .alt-sizes { margin: 0; padding: 0; list-style: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
	.alt-el-hero { grid-template-columns: 1.25fr 1fr; }
	.alt-el-hero__main { grid-row: 1 / 3; }
	.alt-el-hero__side { grid-template-rows: 1fr; }
	.alt-el-promo { display: none; }
	.alt-el-search { width: 200px; }
	.alt-grid--shop { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
	.alt-grid { grid-template-columns: repeat(3, 1fr); }
	.alt-el-search, .alt-el-topbar__side { display: none; }
	.alt-el-header { position: relative; }
	.alt-el-header .e-con-inner { position: static; }
	.alt-el-nav { order: 9; flex: 0 0 auto !important; width: auto !important; position: static !important; }
	.alt-el-nav .elementor-widget-container, .alt-el-nav .uael-nav-menu { position: static; }
	.alt-el-nav nav.uael-dropdown { position: absolute !important; top: 100%; left: 0 !important; right: 0; width: auto !important; z-index: 99; }
	.alt-el-header .alt-el-btn { margin-left: auto; flex-shrink: 0; }

	.alt-el-nav .uael-nav-menu__layout-horizontal,
	.alt-el-nav nav.uael-dropdown {
		background: #fff;
		border-bottom: 1px solid var(--alt-line);
		box-shadow: 0 16px 30px rgba(13, 15, 18, .08);
	}

	.alt-el-nav .uael-dropdown .menu-item a.uael-menu-item { padding: 12px 20px; font-size: 15px; }

	.alt-el-hero { grid-template-columns: 1fr 1fr; min-height: 0; }
	.alt-el-hero__main { grid-column: 1 / -1; grid-row: auto; }
	.alt-el-tile { min-height: 260px; }

	.alt-el-uspgrid > .alt-el-usp:nth-child(3) { border-left: 0; }
	.alt-el-uspgrid > .alt-el-usp:nth-child(n+3) { border-top: 1px solid var(--alt-line); }
	.alt-el-prefooter__grid > .alt-el-pf:nth-child(3) { border-left: 0; padding-left: 0; }
	.alt-el-prefooter__grid > .alt-el-pf:nth-child(n+3) { border-top: 1px solid var(--alt-line); }

	.alt-cats { grid-template-columns: 1fr 1fr; }
	.alt-el-format .elementor-widget-button { justify-self: start; }

	.alt-pdp, .alt-pdp__more { grid-template-columns: 1fr; }
	.alt-pdp__media { position: static; }

	.alt-shop { grid-template-columns: 1fr; }
	.alt-shop__side { display: none; }
	.alt-chips--mobile {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-right: -20px;
		padding-right: 20px;
	}
	.alt-chips--mobile::-webkit-scrollbar { display: none; }

	.alt-phead__in { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 782px) {
	.admin-bar .ast-custom-header { top: 0; }
}

@media (max-width: 767px) {
	.alt-buybar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 80;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 16px;
		background: #fff;
		border-top: 1px solid var(--alt-line);
		box-shadow: 0 -8px 24px rgba(13, 15, 18, .08);
	}

	.alt-buybar div { min-width: 0; }
	.alt-buybar small { display: block; overflow: hidden; font-size: 12px; color: var(--alt-muted); white-space: nowrap; text-overflow: ellipsis; }
	.alt-buybar strong { font-size: 17px; font-weight: 800; color: var(--alt-ink); }
	.single-produk .ast-custom-footer { padding-bottom: 64px; }
	.single-produk .joinchat { display: none; }

	.alt-wrap { padding: 0 16px; }
	.alt-sec { margin-top: 32px; }
	.alt-chips--mobile { margin-right: -16px; padding-right: 16px; }

	.alt-el-brand .elementor-image-box-description { display: none; }

	.alt-el-hero { gap: 8px; }
	.alt-el-hero__actions, .alt-el-hero__actions .elementor-widget-button { width: 100%; }
	.alt-el-hero__actions .elementor-widget-button { flex: 1; }
	.alt-el-hero__actions .elementor-button { width: 100%; justify-content: center; padding: 0 12px !important; font-size: 14px !important; }
	.alt-el-hero__stats { row-gap: 14px !important; }
	.alt-el-hero__stats .alt-el-stat:nth-child(3) { border-left: 0; padding-left: 0 !important; }
	.alt-el-tile { min-height: 200px; padding: 8px !important; }
	.alt-el-cap { padding: 8px 10px !important; }
	.alt-el-cap__title .elementor-heading-title { font-size: 13px; }
	.alt-site .alt-el-cap__go .elementor-icon { width: 28px; height: 28px; }

	.alt-el-usp { padding: 12px; }
	.alt-el-usp .elementor-icon-box-description { display: none; }
	.alt-site .alt-el-usp .elementor-icon { width: 36px; height: 36px; font-size: 15px; }
	.alt-site .alt-el-usp .elementor-icon-box-title { font-size: 13px; }

	.alt-el-shead { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; margin-bottom: 12px !important; }

	.alt-cat { height: 130px; }
	.alt-cat__body { left: 12px; bottom: 10px; }
	.alt-cat__body i { width: 30px; height: 30px; margin-bottom: 6px; }
	.alt-cat__body strong { font-size: 15px; }
	.alt-cat__go { top: 10px; right: 10px; width: 28px; height: 28px; }

	.alt-grid, .alt-grid--shop { grid-template-columns: 1fr 1fr; gap: 10px; }
	.alt-card__body { padding: 10px 11px 12px; }
	.alt-card__meta { font-size: 10px; }
	.alt-site .alt-card__title { font-size: 13.5px; margin-bottom: 8px; }
	.alt-price strong { font-size: 15px; }
	.alt-price del { font-size: 11.5px; }
	.alt-card__wa { width: 34px; height: 34px; font-size: 16px; }
	.alt-card__quick { display: none; }
	.alt-tag { font-size: 9.5px; padding: 3px 6px; }

	.alt-el-checks .elementor-icon-list-items, .alt-el-care .elementor-icon-list-items { grid-template-columns: 1fr; }
	.alt-el-panel { padding: 18px 16px !important; }

	.alt-el-flow { padding: 14px; }
	.alt-el-flow::after { top: 10px; right: 12px; font-size: 20px; }
	.alt-site .alt-el-flow .elementor-icon { width: 38px; height: 38px; font-size: 15px; }
	.alt-site .alt-el-flow .elementor-icon-box-title { font-size: 14.5px; }
	.alt-site .alt-el-flow .elementor-icon-box-description { font-size: 12.5px; }
	.alt-site .alt-el-mini .elementor-icon-box-wrapper { flex-direction: column; align-items: flex-start; gap: 8px; }

	.alt-el-cta__actions, .alt-el-cta__actions .elementor-widget-button, .alt-el-cta__actions .elementor-button { width: 100%; justify-content: center; }

	.alt-el-phead__stats { width: 100%; }
	.alt-el-phead__stats .alt-el-stat { flex: 1; min-width: 0; padding: 8px 12px !important; }
	.alt-el-phead__stats .alt-el-stat-num .elementor-heading-title { font-size: 17px; }
	.alt-el-about__img { min-height: 280px; }

	.alt-el-pf { padding: 14px 10px; }
	.alt-site .alt-el-pf .elementor-icon { width: 36px; height: 36px; font-size: 14px; }
	.alt-site .alt-el-pf .elementor-icon-box-title { font-size: 13px; }
	.alt-site .alt-el-pf .elementor-icon-box-description { font-size: 11.5px; }
	.alt-el-fgrid > :first-child, .alt-el-fgrid > :last-child { grid-column: 1 / -1; }

	.alt-phead { padding: 22px 0; }
	.alt-toolbar { padding: 8px; }
	.alt-toolbar__count { flex-basis: 100%; padding: 4px 6px 2px; }
	.alt-toolbar__search { flex: 1; width: auto; }

	.alt-pdp__info { padding: 18px 16px; }
	.alt-pdp__price strong { font-size: 24px; }
	.alt-order__actions { grid-template-columns: 1fr; }
	.alt-order__total { margin-left: 0; flex-basis: 100%; }
}

/* ==========================================================================
   MOTION EFFECTS & SMOOTH INTERACTIVITY
   ========================================================================== */
html {
	scroll-behavior: smooth;
}

/* Premium easing for Elementor animations */
.animated {
	animation-duration: 0.85s;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	animation-fill-mode: both;
}

.animated.animated-fast {
	animation-duration: 0.5s;
}

.animated.animated-slow {
	animation-duration: 1.2s;
}

/* Silky smooth card & element hover lift */
.alt-card,
.alt-el-usp,
.alt-el-flow,
.alt-el-tile,
.alt-el-rev {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.25s ease !important;
	will-change: transform;
}

.alt-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 36px rgba(13, 15, 18, 0.09) !important;
}

.alt-el-usp:hover,
.alt-el-flow:hover,
.alt-el-rev:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(13, 15, 18, 0.07) !important;
}

/* Micro-interaction on buttons */
.alt-site .elementor-button,
.alt-btn {
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
	            background-color 0.2s ease,
	            color 0.2s ease !important;
}

.alt-site .elementor-button:hover,
.alt-btn:hover {
	transform: translateY(-2px);
}

.alt-site .elementor-button:active,
.alt-btn:active {
	transform: translateY(0) scale(0.98);
}

/* Smooth sticky header transition */
.ast-custom-header,
.ast-header-sticky-active {
	transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.elementor-invisible {
		visibility: visible !important;
		opacity: 1 !important;
	}
}