/**
 * Pearlica — Luxury black-and-white design system
 * Jost throughout (headings, body, nav, prices). No border-radius. Sharp, minimal.
 * All design tokens: assets/css/tokens.css (loaded before this file).
 */

/* No border-radius on site UI — sharp and square */
body,
main,
section,
header,
footer,
.card,
.panel,
.btn,
.form-control,
.form-select,
.input-group,
.dropdown-menu,
.accordion,
.list-group-item,
.breadcrumb,
.pagination,
.cart-item-card,
.cart-summary,
.checkout-delivery-card,
.product-item,
.image-holder,
.product-gallery-thumbs img,
.navbar,
.offcanvas,
.search-popup,
[class*="cart-"],
[class*="checkout-"],
[class*="product-"],
.rounded,
.rounded-circle,
.rounded-0,
.rounded-1,
.rounded-2,
.rounded-3 {
	border-radius: 0;
}

/* Base typography — Jost site-wide. */
body {
	font-family: var(--font-body);
	font-weight: var(--font-weight-normal);
	color: var(--text-main);
	background-color: var(--white);
	letter-spacing: var(--letter-spacing-body);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font-family: var(--font-heading);
	font-weight: 400;
	color: var(--text-main);
}

/* Form controls, buttons, inputs — always Jost (same as body) */
button,
input,
select,
textarea,
optgroup,
.form-control,
.form-select,
.form-label,
.form-check-label,
label,
.btn,
.nav-link,
.dropdown-item,
.pagination .page-link,
[type="button"],
[type="submit"],
[type="reset"],
[type="search"] {
	font-family: var(--font-body);
}

/* Section / element titles */
.section-title,
.element-title,
.title-xlarge,
.widget-title {
	font-family: var(--font-heading);
}

/* Section labels & category headings: 10px Jost uppercase 0.3em --text-muted */
.section-label,
.category-heading,
.widget-title.section-label {
	font-family: var(--font-body);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-normal);
	letter-spacing: var(--letter-spacing-section-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Product names: Jost 17–22px weight 400 */
.product-name,
.product-title,
.item-title,
.link-effect a[data-after],
.cart-item-name,
.product-title-detail {
	font-family: var(--font-heading);
	font-size: clamp(17px, 2.2vw, 22px);
	font-weight: 400;
	color: var(--text-main);
}

/* All prices: Jost — main price and MRP (struck-through) same typeface */
.product-price,
.product-price-current,
.regular-price,
.cart-item-subtotal,
.cart-summary-amount,
.product-info .product-price strong {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 400;
	color: var(--text-main);
}

/* MRP / original (struck-through) price — same font, smaller, muted */
.product-price-original,
.products-card-price-original,
.product-ymal-card-price-original,
.cart-drawer-item-mrp,
.cart-item-mrp {
	font-family: var(--font-heading);
	font-weight: 400;
	color: var(--text-muted);
	text-decoration: line-through;
}

/* Shown after catalogue / PDP unit prices (same line as amounts) */
.product-price-tax-note {
	display: inline;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 400;
	color: var(--text-muted);
	letter-spacing: 0.04em;
	white-space: nowrap;
	vertical-align: baseline;
}

.product-price-wrap .product-price-tax-note {
	font-size: 11px;
}

/* Breadcrumbs: 11px uppercase 0.14em --text-muted, current page --black */
.breadcrumb,
.breadcrumbs {
	font-family: var(--font-body);
	font-size: var(--font-size-nav);
	letter-spacing: var(--letter-spacing-breadcrumb);
	text-transform: uppercase;
	color: var(--text-muted);
}

.breadcrumb-item.active,
.breadcrumbs .current {
	color: var(--black);
}

/* Cards & panels: 1px --border solid, #fff background, no border-radius */
.card,
.panel,
.cart-item-card,
.cart-summary,
.checkout-delivery-card,
.product-item .product-content {
	border: 1px solid var(--border);
	background-color: var(--white);
}

/* Primary CTA: full-width black, white Jost 11px 0.28em uppercase, 18px padding, shimmer on hover */
.btn-cta-primary,
.btn-primary.pearlica-cta,
.cart-summary .btn-primary,
.checkout-summary .checkout-btn-pay,
.cookie-consent-accept-btn {
	display: inline-block;
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--font-size-cta);
	font-weight: var(--font-weight-normal);
	letter-spacing: var(--letter-spacing-cta);
	text-transform: uppercase;
	color: var(--btn-filled-fg);
	background-color: var(--btn-filled-bg);
	border: none;
	padding: var(--btn-cta-padding-y);
	position: relative;
	overflow: hidden;
	transition: color 0.25s ease;
}

.btn-cta-primary::after,
.btn-primary.pearlica-cta::after,
.cart-summary .btn-primary::after,
.checkout-summary .checkout-btn-pay::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s ease;
	pointer-events: none;
}

.btn-cta-primary:hover::after,
.btn-primary.pearlica-cta:hover::after,
.cart-summary .btn-primary:hover::after,
.checkout-summary .checkout-btn-pay:hover::after {
	transform: scaleX(1);
}

.btn-cta-primary:hover,
.btn-primary.pearlica-cta:hover,
.cart-summary .btn-primary:hover,
.checkout-summary .checkout-btn-pay:hover {
	color: var(--btn-filled-fg);
	background-color: var(--btn-filled-bg);
}

/* Secondary: ghost with --border, darkens to --black on hover */
.btn-cta-secondary,
.btn-outline-dark.pearlica-secondary,
.checkout-summary .checkout-btn-back {
	font-family: var(--font-body);
	font-size: var(--font-size-cta);
	letter-spacing: var(--letter-spacing-cta);
	text-transform: uppercase;
	color: var(--text-main);
	background-color: transparent;
	border: 1px solid var(--border);
	padding: var(--btn-cta-padding-y);
	transition: border-color 0.25s ease, color 0.25s ease;
}

.btn-cta-secondary:hover,
.btn-outline-dark.pearlica-secondary:hover,
.checkout-summary .checkout-btn-back:hover {
	border-color: var(--black);
	color: var(--black);
	background-color: transparent;
}

/* Input fields: borderless inside container; container has 1px border */
.input-group.pearlica-input-wrap,
.promo-box,
.form-control.pearlica-input {
	border: 1px solid var(--border);
	background: var(--white);
}

.form-control.pearlica-input,
.promo-box input {
	border: none;
	background: transparent;
}

/* fadeUp keyframe — opacity 0→1, translateY 18px→0, use animation-delay for stagger */
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-up,
[data-fade-up] {
	opacity: 0;
	animation: fadeUp 0.6s ease-out forwards;
}

.fade-up-delay-1 {
	animation-delay: 0.05s;
}

.fade-up-delay-2 {
	animation-delay: 0.1s;
}

.fade-up-delay-3 {
	animation-delay: 0.15s;
}

.fade-up-delay-4 {
	animation-delay: 0.2s;
}

.fade-up-delay-5 {
	animation-delay: 0.25s;
}

.fade-up-delay-6 {
	animation-delay: 0.3s;
}

/* Product images on light section backgrounds: mix-blend-mode multiply */
.bg-off-white .product-image img,
.bg-off-white .image-holder img,
.product-item .image-holder img {
	mix-blend-mode: multiply;
}

.bg-off-white {
	background-color: var(--off-white);
}

/* Page content — horizontal padding from tokens; width capped by --layout-content-max (none = full bleed) */
.page-content-constrained {
	max-width: var(--layout-content-max);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: var(--layout-page-padding-x);
	padding-right: var(--layout-page-padding-x);
	padding-top: var(--layout-page-padding-top);
	padding-bottom: var(--layout-page-padding-bottom);
}

@media (max-width: 767px) {
	.page-content-constrained {
		padding-left: var(--layout-page-padding-x-mobile);
		padding-right: var(--layout-page-padding-x-mobile);
		padding-top: var(--layout-page-padding-top-mobile);
		padding-bottom: var(--layout-page-padding-bottom-mobile);
	}
}

/* Every page: same content width and padding as checkout */
main .container {
	max-width: var(--layout-content-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--layout-page-padding-x);
	padding-right: var(--layout-page-padding-x);
}

@media (max-width: 767px) {
	main .container {
		padding-left: var(--layout-page-padding-x-mobile);
		padding-right: var(--layout-page-padding-x-mobile);
	}
}

/* Footer: same horizontal extent as main (Bootstrap .container defaults are narrower) */
.footer-pearlica .container {
	max-width: var(--layout-content-max);
	width: 100%;
	padding-left: var(--layout-page-padding-x);
	padding-right: var(--layout-page-padding-x);
}

@media (max-width: 767px) {
	.footer-pearlica .container {
		padding-left: var(--layout-page-padding-x-mobile);
		padding-right: var(--layout-page-padding-x-mobile);
	}
}

/* Product tiles: discount pill + add strip — same opacity everywhere (shop, home, gifting, PDP related, wishlist) */
.products-card-discount-badge,
.products-card-addstrip,
.product-ymal-card-discount-badge,
.product-ymal-card-addstrip,
.wishlist-discount-badge {
	opacity: 0.75;
}