/* ==========================================================================
   Shivay Anantam — Bulk Orders page
   ========================================================================== */

.sa-bulk__cta { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: -36px; }
.sa-bulk__cta .sa-btn { box-shadow: 0 18px 36px -16px rgba(124, 66, 52, .55); }

/* ============ BENEFITS ============ */
.sa-bben__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sa-bben__item {
	display: flex;
	gap: 18px;
	padding: 26px;
	border-radius: 22px;
	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-bben__item .sa-feature__icon { flex: none; margin: 0; }
.sa-bben__item h3 { margin: 4px 0 6px; font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.sa-bben__item p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--sa-muted); }
.sa-bben__item:hover { transform: translateY(-5px); border-color: rgba(162, 93, 76, .35); box-shadow: 0 22px 44px -28px rgba(124, 66, 52, .55); transition-delay: 0s !important; }
.sa-bben__item:hover .sa-feature__icon { background: linear-gradient(135deg, var(--sa-copper), var(--sa-red)); color: #fff; transform: rotate(-8deg) scale(1.06); }

/* ============ TIERS ============ */
.sa-tiers { padding-top: 0; }
.sa-tiers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.sa-tier {
	display: flex;
	flex-direction: column;
	border-radius: 26px;
	background: #fff;
	border: 1px solid var(--sa-line);
	overflow: hidden;
	transition: transform .5s var(--sa-ease), box-shadow .5s, opacity .9s var(--sa-ease) !important;
	transition-delay: calc(var(--i, 0) * 110ms) !important;
}
.sa-tier:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -34px rgba(124, 66, 52, .6); transition-delay: 0s !important; }
.sa-tier--featured { background: var(--sa-ink); border-color: transparent; color: #dcc8bd; }
.sa-tier--featured h3 { color: #fff !important; }
.sa-tier__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f1efed; }
.sa-tier__media img { width: 100%; height: 100% !important; object-fit: contain; background: #f1efed; box-sizing: border-box; padding: 12px; transition: transform .9s var(--sa-ease); }
.sa-tier:hover .sa-tier__media img { transform: scale(1.07); }
.sa-tier__body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 34px 26px 26px; }
.sa-tier__icon { position: absolute; top: -28px; left: 26px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, var(--sa-copper), var(--sa-red)); color: #fff; font-size: 1.4rem; box-shadow: 0 14px 28px -12px rgba(215, 81, 82, .7); }
.sa-tier h3 { margin: 0 0 8px; font-size: 1.6rem; font-weight: 600; }
.sa-tier p { margin: 0 0 18px; font-size: .92rem; line-height: 1.65; color: var(--sa-muted); }
.sa-tier--featured p { color: #cdb9af; }
.sa-tier__cats { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.sa-tier__cats a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--sa-cream); font-size: .88rem; font-weight: 600; transition: background-color .3s, color .3s, padding .35s var(--sa-ease); }
.sa-tier__cats small { padding: 2px 8px; border-radius: 999px; background: #fff; color: var(--sa-copper); font-size: .72rem; font-weight: 700; }
.sa-tier__cats a:hover { background: var(--sa-copper); color: #fff !important; padding-left: 18px; }
.sa-tier--featured .sa-tier__cats a { background: rgba(255, 255, 255, .06); color: #fff !important; }
.sa-tier--featured .sa-tier__cats small { background: rgba(212, 168, 106, .18); color: var(--sa-gold); }
.sa-tier--featured .sa-tier__cats a:hover { background: var(--sa-copper); }
.sa-tier__thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.sa-tier__thumbs a { position: relative; display: block; border-radius: 14px; overflow: hidden; }
.sa-tier__thumbs img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; background: #f1efed; box-sizing: border-box; padding: 6px; transition: transform .6s var(--sa-ease); }
.sa-tier__thumbs a:hover img { transform: scale(1.08); }
.sa-tier__thumbs span { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(43, 27, 22, .78); color: #fff; font-size: .64rem; font-weight: 700; letter-spacing: .05em; }

/* ============ BRANDING METHODS ============ */
.sa-brand { background: var(--sa-ink); background-image: radial-gradient(circle at 85% 0%, rgba(162, 93, 76, .4), transparent 45%), radial-gradient(circle at 0% 100%, rgba(212, 168, 106, .14), transparent 45%); color: #dcc8bd; }
.sa-brand h2 { color: #fff !important; }
.sa-brand em { color: var(--sa-gold); }
.sa-brand .sa-head--row p { max-width: 360px; margin: 0; color: #cdb9af; }
.sa-brand__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sa-method {
	position: relative;
	padding: 24px 26px 28px;
	border-radius: 24px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
	transition: transform .5s var(--sa-ease), border-color .4s, background-color .4s, opacity .9s var(--sa-ease) !important;
	transition-delay: calc(var(--i, 0) * 110ms) !important;
}
.sa-method:hover { transform: translateY(-6px); border-color: rgba(212, 168, 106, .4); background: rgba(255, 255, 255, .07); transition-delay: 0s !important; }
.sa-method__num { position: absolute; top: 20px; right: 24px; font: 600 2.6rem/1 var(--sa-serif); color: rgba(212, 168, 106, .25); }
.sa-method h3 { margin: 18px 0 6px; font-size: 1.6rem; font-weight: 600; color: #fff !important; }
.sa-method p { margin: 0 0 16px; font-size: .92rem; line-height: 1.6; }
.sa-method ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sa-method li { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: #ecdcd2; }
.sa-method li .sa-icon { flex: none; color: var(--sa-gold); stroke-width: 3; }

/* Animated mini illustrations */
.sa-method__art { position: relative; display: grid; place-items: center; height: 120px; border-radius: 18px; overflow: hidden; }
.sa-method__logo { position: relative; z-index: 1; font: 800 1.5rem/1 var(--sa-sans); letter-spacing: .3em; }
.sa-method__fx { position: absolute; inset: 0; }

/* Laser: metal surface + scanning beam */
.sa-method--laser .sa-method__art { background: linear-gradient(135deg, #5d5d62, #2c2c30 60%, #4a4a50); }
.sa-method--laser .sa-method__logo { color: transparent; background: linear-gradient(90deg, #e8e6e3 0 var(--burn, 0%), rgba(255, 255, 255, .08) var(--burn, 0%)); -webkit-background-clip: text; background-clip: text; animation: sa-burn 3.2s ease-in-out infinite; }
.sa-method--laser .sa-method__fx::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; left: 0; background: #ff5a4f; box-shadow: 0 0 12px 3px rgba(255, 90, 79, .8); animation: sa-beam 3.2s ease-in-out infinite; }
@property --burn { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes sa-burn { 0% { --burn: 0%; } 70%, 100% { --burn: 100%; } }
@keyframes sa-beam { 0% { left: 28%; opacity: 1; } 70% { left: 72%; opacity: 1; } 75%, 100% { left: 72%; opacity: 0; } }

/* Screen: mesh + squeegee sweep */
.sa-method--screen .sa-method__art { background: #f3e7dc; }
.sa-method--screen .sa-method__logo { color: var(--sa-copper); animation: sa-ink 3s ease-in-out infinite; }
.sa-method--screen .sa-method__fx { background-image: linear-gradient(rgba(43, 27, 22, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 27, 22, .08) 1px, transparent 1px); background-size: 8px 8px; }
.sa-method--screen .sa-method__fx::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 4px; background: var(--sa-ink); box-shadow: 0 4px 10px rgba(0, 0, 0, .3); animation: sa-squeegee 3s ease-in-out infinite; }
@keyframes sa-squeegee { 0% { top: -12px; } 60% { top: 120px; } 100% { top: 120px; } }
@keyframes sa-ink { 0%, 15% { opacity: 0; } 55%, 100% { opacity: 1; } }

/* UV: colour gradient logo + curing glow */
.sa-method--uv .sa-method__art { background: #fff; }
.sa-method--uv .sa-method__logo { color: transparent; background: linear-gradient(90deg, #d75152, #d4a86a, #4f7a3a, #3a6fd7, #a25d4c); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; animation: sa-gradient 4s linear infinite; }
.sa-method--uv .sa-method__fx { background: radial-gradient(circle at 50% 120%, rgba(122, 76, 255, .35), transparent 60%); animation: sa-cure 2.4s ease-in-out infinite; }
@keyframes sa-cure { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ============ PROCESS (5 steps) ============ */
.sa-steps--5 { grid-template-columns: repeat(5, 1fr); }
.sa-steps--5::before, .sa-steps--5::after { left: 10%; right: 10%; }

/* ============ PACKAGING ============ */
.sa-pack { padding-top: 0; }
.sa-pack__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: center; padding: clamp(28px, 4vw, 50px); border-radius: 30px; background: linear-gradient(135deg, #fff, var(--sa-sand)); border: 1px solid var(--sa-line); }
.sa-pack__copy h2 { margin: 16px 0 12px; font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 600; line-height: 1.1; }
.sa-pack__copy p { margin: 0 0 24px; color: var(--sa-muted); line-height: 1.75; }
.sa-pack__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sa-pack__item { position: relative; display: block; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 16px 34px -26px rgba(43, 27, 22, .6); transition: transform .5s var(--sa-ease), opacity .9s var(--sa-ease) !important; transition-delay: calc(var(--i, 0) * 80ms) !important; }
.sa-pack__item:nth-child(even) { transform: translateY(24px); }
.sa-pack__item.is-visible:nth-child(even) { transform: translateY(24px); }
.sa-pack__item img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; background: #f1efed; box-sizing: border-box; padding: 8px; transition: transform .8s var(--sa-ease); }
.sa-pack__item:hover img { transform: scale(1.07) rotate(-1deg); }
.sa-pack__item span { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(43, 27, 22, .78); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; }

/* ============ FORM AREA ============ */
.sa-bulk__form { margin-top: 0; padding-top: clamp(40px, 6vw, 80px); }
.sa-checklist { padding: 28px; border-radius: 24px; background: var(--sa-ink); background-image: radial-gradient(circle at 0% 0%, rgba(162, 93, 76, .45), transparent 55%); color: #dcc8bd; }
.sa-checklist h2 { margin: 14px 0 18px; font: 600 1.6rem/1.15 var(--sa-serif); color: #fff !important; }
.sa-checklist ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sa-checklist li { display: flex; gap: 12px; font-size: .9rem; line-height: 1.5; }
.sa-checklist li .sa-icon { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(212, 168, 106, .14); color: var(--sa-gold); }
.sa-checklist strong { color: #fff; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
	.sa-steps--5 { grid-template-columns: repeat(3, 1fr); row-gap: 44px; }
	.sa-steps--5::before, .sa-steps--5::after { display: none; }
}
@media (max-width: 1000px) {
	.sa-bben__grid, .sa-tiers__grid, .sa-brand__grid { grid-template-columns: 1fr 1fr; }
	.sa-pack__inner { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.sa-bben__grid, .sa-tiers__grid, .sa-brand__grid { grid-template-columns: 1fr; }
	.sa-steps--5 { grid-template-columns: 1fr 1fr; }
	.sa-bulk__cta .sa-btn { width: 100%; }
}
@media (max-width: 480px) {
	.sa-steps--5 { grid-template-columns: 1fr; }
}