/* ==========================================================================
   AWSPC — Luxury fashion customizer
   ========================================================================== */
.awspc-customizer{
	--awspc-bg:transparent;
	--awspc-card:#ffffff;
	--awspc-text:#222;
	--awspc-muted:#777;
	--awspc-border:#e8e2d4;
	--awspc-shadow:0 6px 22px rgba(20,40,30,.06);
	background:var(--awspc-bg);
	color:var(--awspc-text);
	font-family:var(--awspc-font, Georgia, serif);
	max-width:var(--awspc-container, 1280px);
	margin:0 auto;
	padding:18px 18px 80px;
	position:relative;
	box-sizing:border-box;
	display:block;
	width:100%;
	min-width:0;
	word-break:normal;
	overflow-wrap:break-word;
	hyphens:none;
}
.awspc-customizer *,.awspc-customizer *::before,.awspc-customizer *::after{box-sizing:border-box;}
.awspc-customizer, .awspc-customizer *{word-break:normal !important; writing-mode:horizontal-tb !important;}

/* If a theme drops us into a narrow column (e.g. WC summary), break out to full content width. */
.woocommerce div.product .summary .awspc-customizer,
.woocommerce div.product div.summary .awspc-customizer,
.product .summary .awspc-customizer{
	position:relative;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	width:100vw;
	max-width:100vw;
	padding-left:max(18px, calc(50vw - 640px));
	padding-right:max(18px, calc(50vw - 640px));
}

/* Header */
.awspc-header{
	display:flex;align-items:center;justify-content:space-between;
	padding:6px 0 16px;border-bottom:1px solid transparent;
}
.awspc-back{
	background:transparent;border:0;font-size:22px;color:var(--awspc-text);cursor:pointer;
	width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.awspc-back:hover{background:rgba(0,0,0,.04);}
.awspc-brand{text-align:center;line-height:1.1;}
.awspc-brand-name{display:block;font-size:22px;letter-spacing:.18em;font-weight:600;color:var(--awspc-primary);}
.awspc-brand-sub{display:block;font-size:11px;letter-spacing:.18em;color:var(--awspc-muted);margin-top:4px;text-transform:uppercase;}
.awspc-cart-link{color:var(--awspc-text);display:inline-flex;padding:6px;border-radius:6px;}
.awspc-cart-link:hover{background:rgba(0,0,0,.04);}

/* Progress */
.awspc-progress{padding:6px 0 14px;display:none;}
.awspc-progress-text{font-size:11px;letter-spacing:.18em;color:var(--awspc-muted);text-transform:uppercase;}
.awspc-progress-bar{height:3px;background:rgba(0,0,0,.06);border-radius:3px;margin-top:6px;overflow:hidden;}
.awspc-progress-fill{height:100%;background:var(--awspc-primary);transition:width .3s ease;}

/* Layout: 4/12 preview + 8/12 step content on STEP 1; full-width from step 2 onward. */
.awspc-body{display:grid;grid-template-columns:4fr 8fr;gap:36px;align-items:start;margin-top:6px;}
@media (max-width:900px){.awspc-body{grid-template-columns:1fr;gap:18px;}}
/* From step 2 onward (.awspc-step-2, .awspc-step-3, etc.): hide the preview column and go full-width. */
.awspc-customizer:not(.awspc-step-1) .awspc-body{grid-template-columns:1fr;}
.awspc-customizer:not(.awspc-step-1) .awspc-preview{display:none;}
.awspc-customizer:not(.awspc-step-1) .awspc-steps{max-width:1100px;margin-left:auto;margin-right:auto;}

/* Preview */
.awspc-preview{position:sticky;top:18px;}
.awspc-image-wrap{
	background:var(--awspc-card);border-radius:var(--awspc-card-radius,12px);
	box-shadow:var(--awspc-shadow);overflow:hidden;display:flex;align-items:center;justify-content:center;
	aspect-ratio: 3 / 4; min-height:360px;
}
.awspc-image-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s ease;}
.awspc-view-toggle{display:flex;gap:10px;justify-content:center;margin-top:14px;}
.awspc-view-toggle button{
	border:1px solid var(--awspc-border);background:var(--awspc-card);
	padding:8px 18px;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
	font-family:inherit;font-size:13px;color:var(--awspc-text);
}
.awspc-view-toggle .dot{width:8px;height:8px;border-radius:50%;background:#999;display:inline-block;}
.awspc-view-toggle .is-active{border-color:var(--awspc-primary);}
.awspc-view-toggle .is-active .dot{background:var(--awspc-primary);}

/* Step */
.awspc-steps{display:block;}
.awspc-steps .awspc-step{display:none;animation:awspc-fade .35s ease both;}
.awspc-steps .awspc-step.is-active{display:block;}
@keyframes awspc-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.awspc-step-progress{font-size:11px;letter-spacing:.22em;color:var(--awspc-muted);text-transform:uppercase;text-align:center;margin-bottom:6px;}
.awspc-step-title{font-family:inherit;font-weight:500;font-size:26px;letter-spacing:.06em;text-align:center;margin:0 0 6px;color:var(--awspc-primary);text-transform:uppercase;}
.awspc-step-subtitle{text-align:center;color:var(--awspc-muted);margin:0 0 22px;font-size:14px;}

/* Options grid */
.awspc-options{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;margin-bottom:24px;}
.awspc-options-image_card,.awspc-options-text_card{grid-template-columns:repeat(2, 1fr);}
/* Step 2 specifically: render its image_card options in a single 3-column row. */
.awspc-step[data-step-index="2"] .awspc-options{grid-template-columns:repeat(3, 1fr);}
/* Step 4 specifically: render its image_card options in a single 4-column row. */
.awspc-step[data-step-index="4"] .awspc-options{grid-template-columns:repeat(4, 1fr);}
@media (max-width:540px){.awspc-options{grid-template-columns:repeat(2, 1fr) !important;}}
.awspc-options-grid-5{grid-template-columns:repeat(5, 1fr);}
@media (max-width:768px){.awspc-options-grid-5{grid-template-columns:repeat(3, 1fr);}}

/* Option Card */
.awspc-option-card{
	position:relative;background:var(--awspc-card);
	border:2px solid var(--awspc-border);border-radius:var(--awspc-card-radius,12px);
	padding:18px 14px;cursor:pointer;text-align:center;
	transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
	display:flex;flex-direction:column;align-items:center;gap:10px;
}
.awspc-option-card:hover{box-shadow:0 8px 22px rgba(20,40,30,.08);transform:translateY(-2px);}
.awspc-option-card.is-selected{border-color:var(--awspc-primary);box-shadow:0 10px 24px rgba(14,59,46,.12);}
.awspc-option-check{
	position:absolute;top:10px;right:10px;
	width:24px;height:24px;border-radius:50%;background:var(--awspc-primary);color:#fff;
	display:none;align-items:center;justify-content:center;
}
.awspc-option-card.is-selected .awspc-option-check{display:flex;}
.awspc-option-badge{
	position:absolute;top:10px;left:10px;background:var(--awspc-accent);color:#fff;
	font-size:10px;letter-spacing:.12em;padding:3px 9px;border-radius:99px;text-transform:uppercase;
}
.awspc-option-img{width:100%;display:flex;justify-content:center;align-items:center;min-height:120px;}
.awspc-option-img img{max-width:100%;max-height:160px;object-fit:contain;}
.awspc-option-img-placeholder{color:var(--awspc-muted);}
.awspc-size-icon{color:var(--awspc-text);opacity:.65;margin:8px 0;}
.awspc-option-card.is-selected .awspc-size-icon{color:var(--awspc-primary);opacity:1;}
.awspc-option-body{margin-top:auto;}
.awspc-option-title{font-weight:600;letter-spacing:.06em;font-size:14px;text-transform:uppercase;color:var(--awspc-primary);}
.awspc-option-subtitle{color:var(--awspc-muted);font-size:13px;margin-top:6px;}
.awspc-option-divider{margin:14px auto 10px;width:100%;height:1px;background:var(--awspc-border);}
.awspc-option-bestfor-label{font-size:12px;color:var(--awspc-muted);letter-spacing:.04em;}
.awspc-option-bestfor-value{font-size:14px;color:var(--awspc-primary);font-weight:600;margin-top:3px;letter-spacing:.02em;}
.awspc-option-price{margin-top:6px;font-weight:600;color:var(--awspc-primary);font-size:13px;}
.awspc-option-price.awspc-discount{color:#a02525;}

/* Buttons */
.awspc-step-actions{display:flex;justify-content:center;gap:12px;margin-top:14px;}
.awspc-btn{
	font-family:inherit;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
	padding:14px 28px;border-radius:var(--awspc-btn-radius,6px);border:0;cursor:pointer;
	display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;
	min-width:200px;transition:opacity .15s ease, transform .15s ease;
}
.awspc-btn:hover{opacity:.9;}
.awspc-btn:active{transform:translateY(1px);}
.awspc-next,.awspc-btn-primary{background:var(--awspc-primary);color:#fff;}
.awspc-prev,.awspc-btn-secondary{background:transparent;color:var(--awspc-primary);border:1px solid var(--awspc-primary);}
.awspc-btn-accent{background:var(--awspc-accent);color:#fff;}

/* Summary */
.awspc-summary-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;margin-bottom:18px;align-items:start;}
@media (max-width:900px){.awspc-summary-grid{grid-template-columns:1fr;}}
.awspc-summary-card{background:var(--awspc-card);border-radius:var(--awspc-card-radius,12px);padding:22px;box-shadow:var(--awspc-shadow);}
.awspc-summary-thumb-placeholder{width:64px;height:80px;background:#f4eee2;border-radius:6px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--awspc-primary);opacity:.55;}
.awspc-summary-thumb-placeholder svg{width:38px;height:48px;}
.awspc-summary-row{display:flex;gap:14px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--awspc-border);margin-bottom:14px;min-width:0;}
.awspc-summary-row img{width:64px;height:80px;object-fit:cover;border-radius:6px;flex:0 0 auto;}
.awspc-summary-row > div{flex:1 1 auto;min-width:0;}
.awspc-summary-name{font-weight:600;letter-spacing:.04em;white-space:normal;word-break:keep-all;overflow-wrap:break-word;}
.awspc-summary-meta{font-size:12px;color:var(--awspc-muted);margin-top:4px;}
.awspc-summary-price{font-weight:600;}
.awspc-summary-extras .awspc-summary-row{padding-bottom:10px;margin-bottom:10px;}
.awspc-summary-total-row{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--awspc-border);}
.awspc-summary-total-label{font-size:15px;letter-spacing:.18em;font-weight:700;color:var(--awspc-text);}
.awspc-summary-total{font-size:24px;font-weight:700;color:var(--awspc-primary);}
.awspc-summary-tax-note{font-size:12px;color:var(--awspc-muted);margin-top:4px;}
.awspc-summary-actions{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px;}
.awspc-summary-actions .awspc-btn{width:100%;min-width:0;padding:16px 28px;font-size:14px;letter-spacing:.2em;}
.awspc-summary-actions .awspc-btn svg{margin-right:4px;}
.awspc-summary-disclaimer{font-size:11px;color:var(--awspc-muted);text-align:center;margin-top:14px;}

.awspc-summary-side{display:flex;flex-direction:column;gap:14px;}
.awspc-feature{
	background:var(--awspc-card);border-radius:var(--awspc-card-radius,12px);
	box-shadow:var(--awspc-shadow);padding:16px 18px;display:flex;align-items:center;gap:14px;color:var(--awspc-primary);
}
.awspc-feature svg{flex:0 0 auto;width:26px;height:26px;color:var(--awspc-accent);}
.awspc-feature strong{display:block;font-size:14px;letter-spacing:.04em;font-weight:600;}
.awspc-feature span{display:block;font-size:12px;color:var(--awspc-muted);margin-top:3px;}

/* Mobile sticky bar */
.awspc-mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#fff;border-top:1px solid var(--awspc-border);padding:10px 14px;justify-content:space-between;align-items:center;gap:10px;}
.awspc-mobile-bar .awspc-mobile-label{display:block;font-size:11px;color:var(--awspc-muted);letter-spacing:.14em;text-transform:uppercase;}
.awspc-mobile-bar .awspc-total-mobile{display:block;font-weight:700;font-size:18px;color:var(--awspc-primary);}
.awspc-mobile-bar .awspc-btn{min-width:140px;padding:12px 18px;}
@media (max-width:768px){.awspc-mobile-bar{display:flex;} .awspc-customizer{padding-bottom:88px;}}

/* Loading overlay */
.awspc-loading{
	position:absolute;inset:0;background:rgba(255,255,255,.7);display:none;align-items:center;justify-content:center;z-index:50;
}
.awspc-loading.is-active{display:flex;}
.awspc-spinner{width:36px;height:36px;border-radius:50%;border:3px solid rgba(0,0,0,.1);border-top-color:var(--awspc-primary);animation:awspc-spin 1s linear infinite;}
@keyframes awspc-spin{to{transform:rotate(360deg);}}

/* Errors / notices */
.awspc-error-bubble{margin:12px auto;max-width:420px;padding:10px 14px;border-radius:6px;background:#fbeaea;color:#9a2c11;text-align:center;font-size:14px;}
.awspc-success-bubble{margin:12px auto;max-width:420px;padding:10px 14px;border-radius:6px;background:#e7f5ec;color:#0a5c2a;text-align:center;font-size:14px;}

/* Layout: popup */
.awspc-layout-popup .awspc-customizer{max-width:1100px;background:#fff;}

.awspc-empty{padding:18px;text-align:center;background:#fef9e7;border:1px dashed #d6c389;color:#7a611c;border-radius:8px;}
