/* CRITICAL: [hidden] must always win over our display rules.
   (v1.1 bug: display:flex overrode the hidden attribute -> panel showed on load,
   close appeared broken, overlay ate add-to-cart clicks.) */
.sc-panel[hidden], #sc-overlay[hidden], .sc-summary[hidden],
.sc-page-actions[hidden], .sc-qty-mode[hidden], .sc-unit-indicator[hidden],
.sc-steps-nav[hidden], .sc-returning[hidden] { display: none !important; }

/* Suit Customizer — front end. Functional baseline; brand pass comes in the design phase. */
.sc-lock { overflow: hidden; }
#sc-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9998; }
.sc-panel { background: #fff; display: flex; flex-direction: column; }
/* Mode: slide-in panel (default) */
.sc-panel.sc-mode-panel {
	position: fixed; top: 0; right: 0; height: 100dvh; width: min(560px, 100vw);
	z-index: 9999; box-shadow: -8px 0 30px rgba(0,0,0,.18);
}
/* Mode: centered popup */
.sc-panel.sc-mode-popup {
	position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: min(680px, 94vw); max-height: 88dvh; z-index: 9999;
	border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
/* Mode: inline dropdown under the button */
.sc-panel.sc-mode-inline {
	position: static; width: 100%; margin-top: 14px;
	border: 1px solid #e5e5e5; border-radius: 6px;
}
.sc-panel.sc-mode-inline .sc-panel-body { max-height: 70vh; }
/* Mode: embedded on the dedicated page */
.sc-panel.sc-mode-embedded {
	position: static; width: 100%; border: 1px solid #e5e5e5; border-radius: 8px;
}
.sc-panel.sc-mode-embedded .sc-panel-body { overflow: visible; }
.sc-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #e5e5e5; }
.sc-panel-head h2 { margin: 0; font-size: 20px; }
#sc-close { background: none; border: 0; font-size: 20px; cursor: pointer; line-height: 1; }
.sc-panel-body { flex: 1; overflow-y: auto; padding: 10px 22px 22px; }
.sc-panel-foot { border-top: 1px solid #e5e5e5; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fafafa; }
.sc-price-line { font-size: 14px; }

/* Accordion */
.sc-acc { border: 1px solid #e5e5e5; border-radius: 4px; margin-top: 12px; overflow: hidden; }
.sc-acc-head {
	width: 100%; text-align: left; background: #000; color: #fff; border: 0;
	padding: 14px 18px; font-size: 14px; font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; cursor: pointer; display: flex; justify-content: space-between;
}
.sc-acc-body { display: none; padding: 16px 18px; }
.sc-acc.open .sc-acc-body { display: block; }
.sc-acc.open .sc-acc-arrow { transform: rotate(180deg); }

/* Fields */
.sc-field { margin-bottom: 22px; }
.sc-field-label { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.sc-req { color: #b32d2e; }
.sc-field-desc { font-size: 13px; color: #555; margin: 0 0 10px; }
.sc-field select, .sc-field input[type=text], .sc-field input[type=number], .sc-field textarea {
	width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 3px; font-size: 14px;
}

/* Option cards (image + label) */
.sc-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--sc-opt-img, 120px), 1fr)); gap: 12px; }
.sc-opt-card {
	border: 1px solid #ddd; border-radius: 4px; padding: 8px; text-align: center;
	cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: center;
	transition: border-color .15s, box-shadow .15s; position: relative;
}
.sc-opt-card input { position: absolute; opacity: 0; pointer-events: none; }
.sc-opt-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--sc-opt-radius, 8px); }
.sc-opt-card:has(input:checked) { border-color: #000; box-shadow: 0 0 0 2px #000 inset; }
.sc-opt-label { font-size: 12.5px; line-height: 1.3; }
.sc-opt-price { display: block; font-size: 12px; color: #7a1f2b; font-style: normal; font-weight: 600; }

/* No :has() fallback (older browsers): JS-free acceptable degradation via outline */
.sc-opt-card input:focus-visible + img, .sc-opt-card input:focus-visible ~ .sc-opt-label { outline: 2px solid #000; }

/* Conditional hide */
.sc-hide { display: none !important; }

/* Product page bits */
.sc-customize-btn { margin-top: 12px; width: 100%; }
.sc-summary { margin-top: 10px; font-size: 13.5px; background: #f4f9f4; border: 1px solid #cde6cd; padding: 10px 14px; border-radius: 4px; }

/* Uploads */
.sc-upload-list { margin-top: 8px; font-size: 13px; }
.sc-note { color: #b32d2e; }

@media (max-width: 600px) {
	.sc-opts { grid-template-columns: repeat(2, 1fr); }
	.sc-panel-foot { flex-direction: column; align-items: stretch; text-align: center; }
}


/* ---- Dedicated customize page ---- */
.sc-page { max-width: 860px; margin: 0 auto; }
.sc-page-product { display: flex; gap: 20px; align-items: center; margin-bottom: 22px; }
.sc-page-product img { width: 110px; height: auto; border-radius: 6px; }
.sc-page-product h2 { margin: 0 0 6px; }
.sc-page-price { font-size: 18px; font-weight: 600; }
.sc-preview-banner {
	background: #fdf3e7; border: 1px solid #f0c37e; color: #7a5200;
	padding: 10px 16px; border-radius: 6px; margin-bottom: 18px; font-size: 14px;
}
.sc-page-actions { margin-top: 22px; padding: 18px; background: #fafafa; border: 1px solid #e5e5e5; border-radius: 8px; text-align: center; }
.sc-page-actions .button { margin: 0 6px; }
.sc-page-note { font-size: 12.5px; color: #666; margin: 12px 0 0; }
.sc-saved-note { font-size: 13px; color: #1a7a1a; width: 100%; text-align: center; margin-top: 8px; }

/* ---- Customer view page ---- */
.sc-view-table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.sc-view-table th, .sc-view-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #ececec; font-size: 14px; }
.sc-view-table th { width: 40%; color: #333; }
.sc-view-table tr:nth-child(odd) { background: #fafafa; }
.sc-view-meta { color: #666; font-size: 13.5px; }


/* ---- Buttons: full + icon presets ---- */
.sc-btn-full { margin-top: 12px; width: 100%; display: inline-block; text-align: center; }
.sc-btn-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin-left: 8px; vertical-align: middle;
	border: 1px solid #d6d6d6; border-radius: 4px; background: #fff; color: #1d2327;
	cursor: pointer; transition: border-color .15s, color .15s;
}
.sc-btn-icon:hover { border-color: #000; color: #000; }
.sc-btn-icon svg { display: block; }

/* ---- Layout: list (all sections open, no accordion) ---- */
.sc-layout-list .sc-acc-body { display: block; }
.sc-layout-list .sc-acc-head { cursor: default; }
.sc-layout-list .sc-acc-arrow { display: none; }

/* ---- Layout: steps ---- */
.sc-layout-steps .sc-acc { display: none; }
.sc-layout-steps .sc-acc.sc-step-active { display: block; }
.sc-layout-steps .sc-acc.sc-step-active .sc-acc-body { display: block; }
.sc-layout-steps .sc-acc-head { cursor: default; }
.sc-layout-steps .sc-acc-arrow { display: none; }
.sc-steps-nav { display: flex; align-items: center; gap: 12px; width: 100%; justify-content: space-between; margin-bottom: 10px; }
.sc-step-progress { font-size: 13px; color: #555; }

/* ---- Quantity bar ---- */
.sc-qty-bar {
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
	padding: 12px 22px; border-bottom: 1px solid #e5e5e5; background: #fafafa; font-size: 14px;
}
.sc-qty-ctl { display: inline-flex; align-items: center; margin-left: 8px; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; }
.sc-qty-ctl button { border: 0; background: #f0f0f0; width: 32px; height: 34px; cursor: pointer; font-size: 16px; }
.sc-qty-ctl .sc-qty { width: 52px; height: 34px; border: 0; text-align: center; }
.sc-unit-indicator { font-weight: 600; color: #7a1f2b; width: 100%; }

/* ---- Contact + returning notice ---- */
.sc-contact .sc-acc-head { background: #7a1f2b; }
.sc-returning {
	margin-top: 8px; padding: 9px 12px; font-size: 13px;
	background: #eef7ee; border: 1px solid #bfe3bf; border-radius: 5px; color: #1a5c1a;
}


/* ================= v1.3 design polish ================= */
.sc-panel { font-size: 14.5px; color: #1d2327; }
.sc-panel-head { padding: 20px 24px; }
.sc-panel-head h2 { font-size: 19px; letter-spacing: .01em; font-weight: 600; }
.sc-close { width: 34px; height: 34px; border-radius: 50%; transition: background .15s; display: flex; align-items: center; justify-content: center; }
.sc-close:hover { background: #f0f0f0; }
.sc-mode-popup { border-radius: 14px; }

.sc-acc { border: 1px solid #e8e8e8; border-radius: 10px; overflow: hidden; }
.sc-acc-head {
	background: linear-gradient(135deg, #101010 0%, #262626 100%);
	letter-spacing: .08em; font-size: 13px; padding: 15px 20px;
}
.sc-contact .sc-acc-head { background: linear-gradient(135deg, #5e161f 0%, #7a1f2b 100%); }

/* Option cards: modern hover + selected states */
.sc-opt-card {
	border-radius: 10px; padding: 10px;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sc-opt-card:hover { border-color: #b7b7b7; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.sc-opt-card:has(input:checked) {
	border-color: #7a1f2b; box-shadow: 0 0 0 2px #7a1f2b inset, 0 6px 16px rgba(122,31,43,.12);
}
.sc-opt-card:has(input:checked)::after {
	content: "✓"; position: absolute; top: 6px; right: 6px;
	width: 20px; height: 20px; border-radius: 50%;
	background: #7a1f2b; color: #fff; font-size: 12px; line-height: 20px; text-align: center;
}

/* Inputs */
.sc-field select, .sc-field input[type=text], .sc-field input[type=number],
.sc-field input[type=email], .sc-field input[type=tel], .sc-field textarea {
	border-radius: 8px; border-color: #d8d8d8; transition: border-color .15s, box-shadow .15s;
}
.sc-field select:focus, .sc-field input:focus, .sc-field textarea:focus {
	border-color: #7a1f2b; box-shadow: 0 0 0 3px rgba(122,31,43,.12); outline: none;
}

/* Field dividers (Settings toggle) */
.sc-dividers .sc-acc-body .sc-field { padding-bottom: 20px; border-bottom: 1px solid #ececec; }
.sc-dividers .sc-acc-body .sc-field:last-child { border-bottom: 0; padding-bottom: 0; }

/* Footer */
.sc-panel-foot { padding: 16px 24px; }
.sc-foot-actions { display: flex; gap: 10px; }
.sc-save { border-radius: 8px; padding: 12px 22px; font-weight: 600; letter-spacing: .03em; }
.sc-finish-later { border-radius: 8px; }
.sc-price-line { font-weight: 500; }

/* Steps: progress feel */
.sc-steps-nav { border-bottom: 1px solid #eee; padding-bottom: 10px; }
.sc-step-progress { font-weight: 600; color: #7a1f2b; }

/* Multi-select cap note */
.sc-max-note {
	grid-column: 1 / -1; margin: 0 0 4px; font-size: 12px; color: #7a1f2b; font-weight: 600;
	transition: transform .15s;
}
.sc-max-note.sc-max-hit { transform: scale(1.06); color: #b32d2e; }

/* Previous customizations list */
.sc-previous { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.sc-previous[hidden] { display: none !important; }
.sc-prev-item, .sc-prev-new {
	text-align: left; padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px;
	background: #fff; cursor: pointer; font-size: 13.5px; transition: border-color .15s;
}
.sc-prev-item:hover { border-color: #7a1f2b; }
.sc-prev-new { border-style: dashed; color: #555; }

/* Honeypot: hide from humans, keep for bots */
.sc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Resume note */
.sc-saved-note a { word-break: break-all; }