/* ===============================
		 CAKE IMAGE UPLOAD WRAPPER
	================================ */
	.cake-upload {
		border: 2px dashed var(--theme-border-color);
		border-radius: var(--radius-lg);
		padding: var(--sp-lg);
		background: var(--section-background-soft);
		margin: var(--sp-lg) 0;
	}

	/* LABEL */
	.cake-upload label {
		display: block;
		font-size: var(--fs-md);
		color: var(--theme-headings-color);
		margin-bottom: var(--sp-xs);
	}

	/* HELP TEXT */
	.cake-upload small {
		display: block;
		font-size: var(--fs-xs);
		color: var(--theme-text-color);
		margin-top: var(--sp-xs);
	}

	/* FILE INPUT */
	.cake-upload input[type="file"] {
		display: block;
		width: 100%;
		padding: var(--sp-sm);
		margin: var(--sp-sm) 0;
		font-size: var(--fs-sm);
		background: var(--white);
		border: 1px solid var(--theme-border-color);
		border-radius: var(--radius-md);
		cursor: pointer;
	}

    /* ===============================
		 PREVIEW GRID
	================================ */
	#cake-preview-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
		gap: var(--sp-md);
		margin-top: var(--sp-md);
	}

	/* SINGLE IMAGE CARD */
	.cake-preview-item {
		position: relative;
		background: var(--white);
		border-radius: var(--radius-md);
		overflow: hidden;
		box-shadow: 0 8px 20px var(--shadow-soft);
		aspect-ratio: 1 / 1;
		transition: transform 0.25s ease, box-shadow 0.25s ease;
	}

	.cake-preview-item:hover {
		transform: translateY(-4px);
		box-shadow: 0 14px 30px var(--shadow-soft);
	}

	/* IMAGE */
	.cake-preview-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* ===============================
		 REMOVE BUTTON (×)
	================================ */
	.cake-remove {
		position: absolute;
		top: var(--sp-xs);
		right: var(--sp-xs);
		width: 26px;
		height: 26px;
		border-radius: var(--radius-round);
		background: var(--danger);
		color: var(--white);
		font-size: var(--fs-md);
		line-height: 26px;
		text-align: center;
		cursor: pointer;
		box-shadow: 0 4px 10px rgba(0,0,0,0.2);
		transition: transform 0.2s ease, background 0.2s ease;
	}

	.cake-remove:hover {
		background: var(--primary-hover);
		transform: scale(1.1);
	}

	/* ===============================
		 MOBILE FRIENDLY
	================================ */
	@media (max-width: 600px) {
		#cake-preview-list {
			grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
		}
	}
.cake-highlights {
		background: var(--section-background-soft);
		border: 1px solid var(--theme-border-color);
		border-radius: 14px;
		padding: 22px 24px;
		margin: 30px 0;
		font-family: inherit;
	}

	.ch-title {
		font-size: 20px;
		font-weight: 600;
		color: var(--theme-headings-color);
		margin-bottom: 14px;
		position: relative;
	}

	.ch-title::after {
		content: "";
		width: 60px;
		height: 3px;
		background: var(--accent);
		display: block;
		margin-top: 6px;
		border-radius: 2px;
	}

	.ch-list {
		list-style: none;
		padding: 0;
		margin: 0 0 18px;
	}

	.ch-list li {
		position: relative;
		padding-left: 26px;
		margin-bottom: 10px;
		font-size: 14.5px;
		color: var(--theme-text-color);
		line-height: 1.6;
	}

	.ch-list li::before {
		content: "✔";
		position: absolute;
		left: 0;
		top: 0;
		color: var(--accent);
		font-size: 14px;
		font-weight: bold;
	}

	.ch-note {
		background: var(--white);
		border-left: 4px solid var(--accent);
		padding: 12px 14px;
		font-size: 13.5px;
		color: var(--theme-text-color);
		line-height: 1.6;
		border-radius: 6px;
	}

	.ch-note span {
		font-weight: 600;
		color: var(--primary);
	}

	/* Mobile friendly */
	@media (max-width: 600px) {
		.cake-highlights {
			padding: 18px;
		}

		.ch-title {
			font-size: 18px;
		}

		.ch-list li {
			font-size: 14px;
		}
	}


/* ================================
   PDP Pincode Checker – Themed
================================ */

.pdp-pincode-checker {
    margin-top: var(--sp-md);
    padding: var(--sp-md);
    background: var(--section-background-soft);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--radius-md);
 
    box-shadow: 0 6px 18px var(--shadow-soft);
}

/* Label */
.pdp-pincode-checker label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-bottom: var(--sp-xs);
    color: var(--theme-headings-color);
}

/* Input + Button Row */
.pdp-pincode-checker .pincode-wrap {
    display: flex;
    gap: var(--sp-xs);
    align-items: center;
}

/* Input Field */
.pdp-pincode-checker input#pdp_pincode {
    flex: 1;
    height: var(--theme-button-min-height);
    padding: 0 var(--sp-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--theme-form-field-border-initial-color);
    font-size: var(--fs-sm);
    color: var(--theme-text-color);
    background: var(--white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pdp-pincode-checker input#pdp_pincode::placeholder {
    color: color-mix(in srgb, var(--theme-text-color) 55%, transparent);
}

.pdp-pincode-checker input#pdp_pincode:focus {
    outline: none;
    border-color: var(--theme-form-field-border-focus-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* Button */
.pdp-pincode-checker button#pdp_check_pincode {
    min-height: var(--theme-button-min-height);
    padding: var(--theme-button-padding);
    background: var(--theme-button-background-initial-color);
    color: var(--theme-button-text-initial-color);
    border: var(--theme-button-border);
    border-radius: var(--theme-button-border-radius);
    font-size: var(--theme-button-font-size);
    font-weight: var(--theme-button-font-weight);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--theme-button-shadow);
    transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.pdp-pincode-checker button#pdp_check_pincode:hover {
    background: var(--theme-button-background-hover-color);
}

.pdp-pincode-checker button#pdp_check_pincode:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px var(--shadow-cta);
}

/* Result Message */
#pincode_result {
    margin-top: var(--sp-xs);
    font-size: var(--fs-xs);
    font-weight: 600;
}

#pincode_result.success {
    color: var(--success);
}

#pincode_result.error {
    color: var(--danger);
}

/* Mobile */
@media (max-width: 480px) {
    .pdp-pincode-checker .pincode-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .pdp-pincode-checker button#pdp_check_pincode {
        width: 100%;
    }
}