@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

.dc-wrapper, .dc-wrapper *, .dc-wrapper *::before, .dc-wrapper *::after {
	box-sizing: border-box;
}

.dc-wrapper {
	--dc-maroon: #5c1420;
	--dc-maroon-dark: #400e17;
	--dc-saffron: #d9720f;
	--dc-gold: #c9962f;
	--dc-gold-light: #e6b95a;
	--dc-cream: #fdf9f1;
	--dc-ink: #2b2420;
	--dc-muted: #7a6f63;
	--dc-border: #ecdfc9;

	position: relative;
	max-width: 740px;
	margin: 0 auto;
	padding: 0 0 40px;
	background-color: var(--dc-cream);
	background-image: linear-gradient(90deg, var(--dc-maroon), var(--dc-saffron), var(--dc-gold));
	background-repeat: no-repeat;
	background-size: 100% 6px;
	border: 1px solid var(--dc-border);
	border-radius: 16px;
	/*font-family: 'Inter', sans-serif;*/
	color: var(--dc-ink);
	box-shadow: 0 24px 50px -24px rgba(92, 20, 32, 0.35);
	overflow: hidden;
}

.dc-wrapper::before {
	content: "Download Center";
		text-align: center;
	display: block;
	/*font-family: 'Cormorant Garamond', serif;*/
	font-weight: 700;
	font-size: 23px;
	color: #ffffff;
	/*background: linear-gradient(135deg, var(--dc-maroon), var(--dc-maroon-dark));*/
	background: linear-gradient(135deg, #ff9307, #ff7800);
	padding: 26px 32px 22px;
	margin-top: 6px;
	letter-spacing: 0.3px;
}

#dc-form {
	padding: 28px 28px 0;
}

/* ---------- Steps breadcrumb (Select Items -> Checkout) ---------- */
.dc-steps-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 22px 28px 0;
}

.dc-step-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px 7px 8px;
	border-radius: 24px;
	background: #f5ece0;
	border: 1px solid var(--dc-border);
	color: var(--dc-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1px;
	white-space: nowrap;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dc-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #e4d8c3;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
}

.dc-step-pill.is-active {
	background: #fbeee0;
	border-color: var(--dc-gold);
	color: var(--dc-maroon);
}

.dc-step-pill.is-active .dc-step-num {
	background: var(--dc-maroon);
}

.dc-step-pill.is-done {
	background: #eaf6ec;
	border-color: #cfe3d1;
	color: #1f6b3a;
}

.dc-step-pill.is-done .dc-step-num {
	background: #1f6b3a;
	font-size: 12px;
}

.dc-step-arrow {
	color: var(--dc-border);
	font-size: 15px;
	line-height: 1;
}

/* ---------- Items list (one item per row) ---------- */
.dc-items-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 4px 0 24px;
	max-height: 520px;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 6px;
}
@media (max-width: 767px) {
    .dc-items-list {
         max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: auto;
        /*touch-action: pan-y;*/
    }
}

.dc-item {
	display: grid;
	grid-template-columns: auto 84px 1fr auto;
	align-items: center;
	gap: 16px;
	background: #ffffff;
	border: 1px solid var(--dc-border);
	border-left: 3px solid transparent;
	border-radius: 12px;
	padding: 14px 16px;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease;
}

.dc-item:hover {
	border-color: var(--dc-gold-light);
	box-shadow: 0 10px 22px -14px rgba(92, 20, 32, 0.3);
	transform: translateY(-1px);
}

.dc-item:hover .dc-item-view-hint {
	border-color: var(--dc-saffron);
	color: var(--dc-saffron);
	transform: translateY(-1px);
}

.dc-item:has(.dc-item-checkbox:checked) {
	border-left-color: var(--dc-saffron);
	background: #fff8ee;
	box-shadow: 0 10px 22px -14px rgba(217, 114, 15, 0.4);
}

/* Selection checkbox — a clear, self-contained control on its own column so it
   never overlaps the thumbnail or text, with an obvious checkmark when selected. */
.dc-item-select {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.dc-item-select .dc-item-checkbox {
	position: absolute;

	width: 17px;
	height: 17px;
	margin: 0;
	cursor: pointer;
}

.dc-item-select-mark {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--dc-border);
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s ease, background 0.2s ease;
	display: none;
}

/*.dc-item-select-mark::after {*/
/*	content: "";*/
/*	width: 11px;*/
/*	height: 6px;*/
/*	border-left: 2.5px solid #fff;*/
/*	border-bottom: 2.5px solid #fff;*/
/*	transform: scale(0) rotate(-45deg);*/
/*	transition: transform 0.15s ease;*/
/*	margin-top: -2px;*/
/*}*/

.dc-item-checkbox:checked ~ .dc-item-select-mark {
	border-color: var(--dc-saffron);
	background: var(--dc-saffron);
}

.dc-item-checkbox:checked ~ .dc-item-select-mark::after {
	transform: scale(1) rotate(-45deg);
}

/* Thumbnail — fixed small square on the left of the row, like the original design */
.dc-item-thumb {
	flex-shrink: 0;
	width: 84px;
	height: 84px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--dc-border);
	background: #fff8ee;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dc-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dc-item-thumb-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Info column */
.dc-item-info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.dc-item-title {
    /*font-family: 'Cormorant Garamond', serif;*/
    font-weight: 600;
    font-size: 18px;
    color: var(--dc-maroon);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.dc-item-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dc-rating-number {
    font-size: 12px;
    font-weight: 700;
    color: #2B2440;
}

.dc-star-rating {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.dc-star-rating .dc-star {
    width: 13px;
    height: 13px;
    fill: #e4dccd;
}

.dc-star-rating .dc-star.is-filled {
    fill: #e8a33d;
}

.dc-review-count {
    font-size: 11.5px;
    color: #8a7d6d;
    font-weight: 600;
}

.dc-item-content {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--dc-muted);
}

.dc-item-price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}

.dc-summary-total{
    color: white;
    background: #ff7800;
}

.dc-summary-header{
    background: linear-gradient(135deg, #fff8ee 0%, #fdeecb 100%);
    border: 1px solid #ecd9b6;
    padding: 12px 16px;
    border-radius: 12px;
}

.dc-summary-header h2 {
    font-size: 17px !important;
    letter-spacing: 0.2px;
}

.dc-add-more-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ffffff;
    color: #a3610f !important;
    border: 1px solid #e6b95a !important;
    font-weight: 700;
    padding: 2px 7px !important;
    border-radius: 20px;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 2px 6px -2px rgba(217, 114, 15, 0.25);
}

.dc-add-more-link:hover {
    background: linear-gradient(135deg, #ff9307, #ff7800) !important;
    color: #fff8ee !important;
    box-shadow: 0 4px 10px -3px rgba(217, 114, 15, 0.5);
}



@media only screen and (max-width: 767px) {
    .dc-order-summary h2,
    .dc-checkout-form h2 {
        font-size: 14px !important;
        line-height: 20px !important;
    }
    
    .dc-wrapper{
        font-size: 16px !important;
        height: 700px;
    }
}

.dc-price-badge {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	font-size: 12px;
	padding: 4px 11px;
	border-radius: 20px;
	background: #fff8ef;
	color: #8b6a34;
	border: 1px solid #ecd9b6;
	white-space: nowrap;
}

.dc-price-badge.dc-price-usd {
	background: #fdeee9;
	color: #8a3418;
	border-color: #f4cebe;
}

/* Passive "view details" hint on the right of the row — the whole row is clickable,
   this is just a visual cue, not an interactive element on its own. */
.dc-item-view-hint {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1.5px solid var(--dc-border);
	color: var(--dc-muted);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.2px;
	border-radius: 20px;
	white-space: nowrap;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

/* Standalone price cards (used on the item detail page) */
.dc-price-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 90px;
	padding: 10px 16px;
	background: #fff8ef;
	border: 1px solid #ecd9b6;
	border-radius: 12px;
	transition: .3s;
}

.dc-price-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.dc-price-card small {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: #8b6a34;
	letter-spacing: .6px;
}

.dc-price-card strong {
	margin-top: 3px;
	font-size: 20px;
	font-weight: 700;
	color: #5c1420;
	/*font-family: 'Cormorant Garamond', serif;*/
}

.dc-price-card.dc-price-usd {
	background: #fff3f0;
	border-color: #efc7bb;
}

.dc-price-card.dc-price-usd strong {
	color: #b34722;
}

.dc-price-divider {
	width: 1px;
	height: 42px;
	background: #e6d9c6;
}

/* ---------- User info ---------- */
.dc-user-info {
	background: #ffffff;
	border: 1px solid var(--dc-border);
	border-radius: 12px;
	padding: 20px 20px 6px;
	margin-bottom: 22px;
}

.dc-user-info p {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.dc-user-info label {
	font-size: 12px;
	font-weight: 700;
	color: var(--dc-maroon);
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.dc-user-info input {
	padding: 11px 13px;
	border: 1px solid var(--dc-border);
	border-radius: 8px;
	font-size: 14.5px;
	/*font-family: inherit;*/
	color: var(--dc-ink);
	background: #fffdfa;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dc-user-info input:focus {
	outline: none;
	border-color: var(--dc-saffron);
	box-shadow: 0 0 0 3px rgba(217, 114, 15, 0.15);
}

/* ---------- Sticky summary bar (selected count + total + Buy Now) ---------- */
.dc-sticky-bar {
	position: sticky;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 8px;
	padding: 16px 28px 26px;
	background: var(--dc-cream);
	border-top: 1px solid var(--dc-border);
}

.dc-sticky-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13.5px;
	font-weight: 600;
	/*color: var(--dc-muted);*/
}

.dc-cart-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--dc-maroon);
	width: 30px;
	height: 30px;
	cursor: pointer;
}

.dc-cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dc-border);
	color: var(--dc-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	border-radius: 999px;
	border: 2px solid var(--dc-cream);
	transition: background 0.15s ease, color 0.15s ease;
}

.dc-cart-icon-wrap.has-items .dc-cart-count {
	background: linear-gradient(135deg, #ff9307, #ff7800);
	color: #fff8ee;
}

#dc-total-amount {
	/*font-family: 'Cormorant Garamond', serif;*/
	font-size: 24px;
	font-weight: 700;
	color: var(--dc-maroon);
}

/* ---------- Total / errors / pay button ---------- */
.dc-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(135deg, var(--dc-maroon), var(--dc-maroon-dark));
	color: #f7e9d8;
	border-radius: 12px;
	padding: 18px 22px;
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 500;
}

.dc-total span {
	/*font-family: 'Cormorant Garamond', serif;*/
	font-size: 28px;
	font-weight: 700;
	color: var(--dc-gold-light);
	margin-left: 8px;
}

.dc-error {
	color: #a3271f;
	font-weight: 600;
	font-size: 13.5px;
	background: #fdecea;
	border: 1px solid #f3c6c1;
	border-radius: 8px;
	padding: 10px 14px;
}

.dc-pay-btn {
	width: 100%;
	/*background: linear-gradient(135deg, #7a1625, #c57a14);*/
	background: linear-gradient(135deg, #ff9307, #ff7800);
	color: #fff8ee;
	border: none;
	padding: 17px 28px;
	font-size: 16px;
	font-weight: 700;
	/*font-family: 'Inter', sans-serif;*/
	letter-spacing: 0.4px;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 12px 26px -10px rgba(217, 114, 15, 0.55);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dc-pay-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 30px -10px rgba(217, 114, 15, 0.65);
}

.dc-pay-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

#dc-download-links {
	margin: 26px 28px 0;
	padding: 24px;
	border: 1px solid #cfe3d1;
	border-radius: 14px;
	background: #f3faf4;
}

#dc-download-links h3 {
	/*font-family: 'Cormorant Garamond', serif;*/
	font-size: 22px;
	color: #1f6b3a;
	margin: 0 0 14px;
}

#dc-download-links-inner a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 6px 10px 6px 0;
	padding: 10px 20px;
	background: #1f6b3a;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 13.5px;
	border-radius: 24px;
	transition: background 0.2s ease;
}

#dc-download-links-inner a:hover {
	background: #175229;
}

/* Scrollbar styling */
.dc-items-list::-webkit-scrollbar {
	width: 8px;
}

.dc-items-list::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 10px;
}

.dc-items-list::-webkit-scrollbar-thumb {
	background: #999;
	border-radius: 10px;
}

.dc-items-list::-webkit-scrollbar-thumb:hover {
	background: #666;
}

@media (max-width: 600px) {
	.dc-wrapper::before {
		        font-size: 18px;
        padding: 6px;
	}

	#dc-form {
		padding: 3px 16px 0;
	}

	.dc-steps-nav {
		padding: 16px 16px 0;
		gap: 8px;
	}

	.dc-step-pill {
		font-size: 12px;
		padding: 6px 12px 6px 6px;
	}

	.dc-item-content {
		-webkit-line-clamp: 1;
		font-size: 11px;
	}

	/* Buy Now button ko poore time visible rakhne ke liye -- ab yeh screen ke
	   bottom se fix rahega, chahe item list ke andar scroll ho ya poora page,
	   isliye user ko button dhoondhne ke liye extra scroll nahi karna padega.
	   Size ko bhi thoda compact rakha hai taaki zyada jagah na le. */
	.dc-sticky-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		gap: 6px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -6px 20px -10px rgba(43, 36, 32, 0.35);
		transition: transform 0.25s ease;
	}


	.dc-sticky-bar.dc-sticky-bar--hidden {
		transform: translateY(120%);
	}

	.dc-sticky-info {
		font-size: 12px;
	}

	#dc-total-amount {
		font-size: 17px;
	}

	.dc-sticky-bar .dc-pay-btn {
		padding: 10px 20px;
		font-size: 14px;
		border-radius: 8px;
		box-shadow: 0 6px 14px -8px rgba(217, 114, 15, 0.55);
	}

	/* Fixed bar ke neeche chhup jaane se bachane ke liye form me utni jagah
	   bottom padding ke roop me chhod di, taaki last item ya "no results"
	   message bar ke peeche na aaye. */
	#dc-form {
		/*padding-bottom: 78px;*/
	}

	/* Item list ko fixed height diya hai taaki mobile par predictably ~3-4
	   items ek saath visible rahein, baaki scroll se dikhein. */
	.dc-items-list {
		max-height: 440px;
		gap: 8px;
	}

	/* Mobile: stacked card -- image on top (full width), then title, then
	   description below it. Checkbox sits as a small overlay badge on the
	   image's top-left corner. Title always shows in FULL (wraps to as many
	   lines as it needs); description above is already clamped to 1 line. */
	.dc-item {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 12px;
	}

	.dc-item-select {
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 2;
		width: 22px;
		height: 22px;
	}

	.dc-item-select .dc-item-checkbox {
		width: 12px;
		height: 12px;
		    left: 0px;

	}

	.dc-item-select-mark {
		width: 20px;
		height: 20px;
		background: #fff;
		box-shadow: 0 2px 8px rgba(43, 36, 32, 0.25);
		display: none;
	}

	.dc-item-thumb {
		width: 100%;
		height: 130px;
		margin: 0;
		border-radius: 10px;
	}

	.dc-item-thumb img {
		object-fit: cover;
		padding: 0;
	}

	.dc-item-info {
		text-align: left;
	}

	/* Full title, always -- wraps onto as many lines as it needs, never cut off. */
	.dc-item-title {
		font-size: 14px;
		line-height: 1.3;
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
		word-break: break-word;
		overflow-wrap: break-word;
	}

	.dc-item-price {
		justify-content: flex-start;
	}

	/* Whole card is already clickable to view details -- hide this hint on
	   mobile to save vertical space. */
	.dc-item-view-hint {
		display: none;
	}

	.dc-total {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	#dc-download-links {
		margin: 22px 16px 0;
	}
}

.dc-search-filter-row{
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 620px;
    margin: 22px auto 14px;
}

/* Language filter uses the exact same button/panel pattern as the category
   filter (dc-filter-btn / dc-filter-panel / dc-filter-option / dc-filter-checkbox
   styling), so it sits naturally in the same search/filter row and behaves
   identically -- multi-select checkboxes, applies immediately. */

#dc-lang-badge {
    font-size: 9px;
    letter-spacing: 0.2px;
}

.dc-search-box{
    position: relative;
    flex: 1 1 auto;
    max-width: 500px;
    margin: 0;

}

.dc-filter-wrap{
    position: relative;
    flex: 0 0 auto;
}

.dc-filter-btn{
    position: relative;
    width: 50px;
    height: 50px;
    border: 1px solid #e4d8d8;
    border-radius: 50%;
    background: #fff;
    color: #8b1d2c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0,0,0,.06);
    transition: all .2s ease;
}

.dc-filter-btn:hover{
    border-color: #c7a6a6;
}

.dc-lang-icon{
    position: relative;
    display: inline-block;
    width: 22px;
    height: 22px;
}

.dc-lang-icon-hi{
    position: absolute;
    top: -1px;
    left: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: currentColor;
    opacity: .5;
}

.dc-lang-icon-en{
    position: absolute;
    bottom: -1px;
    right: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    font-family: Georgia, serif;
    color: currentColor;
    padding-bottom: 1px;
    border-bottom: 1.5px solid currentColor;
}

.dc-filter-btn-active,
.dc-filter-btn.dc-filter-has-selection{
    border-color: #8b1d2c;
    background: #fdf1f1;
}

.dc-filter-badge{
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #8b1d2c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.dc-filter-panel{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    max-width: 80vw;
    background: #fff;
    border: 1px solid #e4d8d8;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.14);
    padding: 14px;
    z-index: 30;
}

.dc-filter-panel-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: #2b2420;
    margin-bottom: 10px;
}

.dc-filter-panel-header button{
    border: none;
    background: none;
    color: #8b1d2c;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.dc-filter-panel-header button:hover{
    text-decoration: underline;
}

.dc-filter-options{
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.dc-filter-option{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #4a3d3d;
    cursor: pointer;
}

.dc-filter-option input[type="checkbox"]{
    width: 15px;
    height: 15px;
    accent-color: #8b1d2c;
    cursor: pointer;
}

.dc-item-category-tag{
    display: inline-block;
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #8b1d2c;
    background: #fdf1f1;
    border: 1px solid #f1d9d9;
    border-radius: 20px;
    padding: 2px 9px;
    margin-bottom: 2px;
}

@media(max-width:768px){
    .dc-filter-btn{
        width: 34px;
        height: 34px;
    }
    .dc-filter-btn svg{
        width: 15px;
        height: 15px;
    }
    .dc-lang-icon{
        width: 18px;
        height: 18px;
    }
    .dc-lang-icon-hi{
        font-size: 11px;
    }
    .dc-lang-icon-en{
        font-size: 12.5px;
    }
    .dc-filter-panel{
        width: 220px;
    }
}

.dc-search-icon{
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #8b1d2c;
    pointer-events: none;
}

#dc-search{
    width:100%;
    height:50px;
    padding:0 20px 0 52px;
    border:1px solid #e4d8d8;
    border-radius:50px;
    background:#fff;
    font-size:16px;
    font-weight:500;
    color:#000 !important;
    transition:all .3s ease;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
}

#dc-search::placeholder{
    color:#999;
    font-weight:400;
}

#dc-search:hover{
    border-color:#c7a6a6;
}

#dc-search:focus{
    outline:none;
    border-color:#8b1d2c;
    box-shadow:0 0 0 5px rgba(139,29,44,.12),
               0 12px 30px rgba(0,0,0,.10);
}

#dc-search{
    padding-right: 44px;
}

#dc-search:-webkit-autofill,
#dc-search:-webkit-autofill:hover,
#dc-search:-webkit-autofill:focus {
    -webkit-text-fill-color: #333;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

#dc-search-clear{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    width:26px;
    height:26px;
    border:none;
    border-radius:50%;
    background:#f1e6e6;
    color:#8b1d2c;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease;
}

#dc-search-clear:hover{
    background:#e4d0d0;
}

.dc-no-results{
    text-align:center;
    padding:26px 16px;
    color:var(--dc-muted);
    font-size:14px;
    font-weight:500;
    background:#fff8ee;
    border:1px dashed var(--dc-border);
    border-radius:12px;
    margin:4px 0 24px;
}

@media(max-width:768px){

    .dc-search-filter-row{
        margin-bottom:14px;
        margin: 10px 17px 0;
    }

    #dc-search{
        height:34px;
        font-size:15px;
    }
}

.e-mailit_toolbox{
    display:none !important;
}

/*new css*/

@media (max-width: 767px) {

  /* ---------- Container ---------- */
  

  .dc-search-filter-row{
    margin-bottom: 10px;
  }

  /* ---------- Amazon-style single column list ---------- */
  .dc-items-list{
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
 

  /* ---------- Row card: image left, details right (like Amazon app).
     Single-row grid (no spanning) so row heights size predictably and
     nothing gets clipped, regardless of title length or thumbnail type. ---------- */
  .dc-item{
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto;
    column-gap: 12px;
    background: #fff;
    border: 1px solid #EFE6D8;
    border-radius: 11px;
    box-shadow: 0 3px 10px rgba(43,36,64,0.07);
    position: relative;
    padding: 10px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .dc-item:active{
    transform: scale(0.98);
  }
  .dc-item.dc-item-selected,
  .dc-item:has(.dc-item-checkbox:checked){
    border-color: #D9860F;
    box-shadow: 0 4px 14px rgba(217,134,15,0.28);
  }

  /* ---------- Select checkbox — small circle overlay on the thumbnail's
     top-left corner, same behaviour as before. The Buy Now button at the
     bottom sticky bar handles checkout, so this stays a plain selection
     control, not an Add to Cart button. ---------- */
  .dc-item-select{
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    width: 18px;
    height: 18px;
    margin: 0;
  }
  .dc-item-select .dc-item-checkbox{
    position: absolute;
    width: 18px;
    height: 18px;
    margin: 0;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  .dc-item-select-mark{
    display: flex !important;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: rgba(255,255,255,0.92);
    border: 1.5px solid #D8CFE0;
    box-shadow: 0 2px 6px rgba(43,36,32,0.2);
    pointer-events: none;
    align-items: center;
    justify-content: center;
  }
  .dc-item-select-mark::after{
    content: "";
    width: 5px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: scale(0) rotate(45deg);
    transition: transform 0.15s ease;
    margin-top: -2px;
  }
  .dc-item-checkbox:checked ~ .dc-item-select-mark{
    background: #D9860F;
    border-color: #D9860F;
  }
  .dc-item-checkbox:checked ~ .dc-item-select-mark::after{
    transform: scale(1) rotate(45deg);
  }

  /* ---------- Thumbnail — single row, so its size never fights with the
     info column beside it. ---------- */
  .dc-item-thumb{
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: #FCEFDA;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px;
  }
  .dc-item-thumb img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    display: block;
  }
  .dc-item-thumb-fallback{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  /* ---------- Info block ---------- */
  .dc-item-info{
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    min-width: 0;
  }

  .dc-item-title{
    font-size: 12.5px;
    line-height: 1.34;
    font-weight: 600;
    color: #2B2440;
    display: -webkit-box;
    /*-webkit-line-clamp: 2;*/
       -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Amazon shows stars right under the title — keep it visible whenever an
     item actually has ratings; items without ratings simply show no row. */
  .dc-item-rating{
    margin-top: 1px;
  }
  .dc-star-rating .dc-star{
    width: 12px;
    height: 12px;
  }
  .dc-review-count{
    font-size: 10.5px;
  }

  /* Show a short, single-line snippet instead of hiding it completely */
  .dc-item-content{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.4;
    color: #8a7d6d;
  }

  /* ---------- Price badges (Amazon-style, price reads first) ---------- */
  .dc-item-price{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
  }
  .dc-price-badge{
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    line-height: 1.3;
    white-space: nowrap;
  }
  .dc-price-inr{
    background: #FDEFE0;
    color: #B5641A;
    font-size: 13px;
  }
  .dc-price-usd{
    background: #EAF4EE;
    color: #2E7D52;
  }

  /* Hide the trailing "view details" hint arrow on cramped mobile cards */
  .dc-item-view-hint{
    display: none;
  }

  /* ---------- Sticky bottom cart bar ---------- */
  .dc-sticky-bar{
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-top: 1px solid #EFE6D8;
    padding: 11px 14px;
    box-shadow: 0 -6px 18px rgba(27,23,64,0.09);
  }
  .dc-sticky-info{
   display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 12px;
  }
  #dc-total-amount{
    font-size: 16px;
    font-weight: 700;
    color: #1B1740;
  }
  .dc-pay-btn{
    background: linear-gradient(120deg, #D9860F, #F0A93A);
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 24px;
    box-shadow: 0 6px 16px rgba(217,134,15,0.35);
  }
  .dc-pay-btn:disabled{
    background: #D8D0E0;
    box-shadow: none;
  }

  .dc-no-results{
    grid-column: 1 / -1;
    text-align: center;
    font-size: 12px;
    color: #8B8398;
    padding: 20px 10px;
  }
  
   .dc-summary-title {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Title: thoda text dikhega, phir ... */
    .dc-summary-title-text {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Language tag hamesha visible */
    .dc-summary-lang-tag {
        display: block !important;
        width: fit-content !important;
        margin: 3px 0 0 0 !important;

        font-size: 9px !important;
        line-height: 14px !important;
        font-weight: 700 !important;

        color: #8b1d2c !important;
        background: #fdf1f1 !important;
        border: 1px solid #f1d9d9 !important;
        border-radius: 12px !important;
        padding: 0 6px !important;

        white-space: nowrap !important;
    }
    
    
    .dc-order-summary {
            height: auto !important;
            min-height: 500px;
        }
    
        .dc-summary-list {
            max-height: 450px !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
        }    
}

.dc-item-checkbox {
    accent-color: #ff7c01; /* Green */
}

  .dc-summary-lang-tag {
        display: inline-block;
        font-size: 10px;
        line-height: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2px;

        color: #8b1d2c;
        background: #fdf1f1;
        border: 1px solid #f1d9d9;
        border-radius: 12px;

        padding: 1px 8px;
        margin-left: 6px;

        white-space: nowrap;
        vertical-align: middle;
        width: 107px;
    }