/* Suggested Product Panel (cards + its control panel). Looks come from CSS variables set by suggestions.js. */
.cgs-sug { --sg-gap: 16px; --sg-radius: 12px; --sg-ratio: 1/1; --sg-width: 100%; width: var(--sg-width); max-width: 100%; margin: 28px auto 0; padding: 0 12px; box-sizing: border-box; background: var(--sg-panel-bg, transparent); }
.cgs-sug.pal-left { margin-left: 0; margin-right: auto; }
.cgs-sug.pal-right { margin-left: auto; margin-right: 0; }
/* Beside the studio (left / right, vertical): the panel sits in a padding strip next to the studio and is exactly as tall as the studio; it scrolls, so it never stretches the page or a hero picture. */
.cgs-sug-row { position: relative; }
.cgs-sug-row.has-right { padding-right: calc(var(--sg-wr, 28%) + 16px); }
.cgs-sug-row.has-left { padding-left: calc(var(--sg-wl, 28%) + 16px); }
.cgs-sug-row > .cgs-sug { position: absolute; top: 0; bottom: 0; width: var(--sg-width); margin: 0; overflow-y: auto; box-sizing: border-box; }
.cgs-sug-row > .cgs-sug.side-right { right: 0; }
.cgs-sug-row > .cgs-sug.side-left { left: 0; }
@media (max-width: 900px) {
	.cgs-sug-row.has-right, .cgs-sug-row.has-left { padding: 0; }
	.cgs-sug-row > .cgs-sug { position: static; width: 100%; overflow: visible; margin-top: 16px; }
}
.cgs-sug[hidden] { display: none; }
.cgs-customize-fields > .cgs-sug { margin: 14px auto; padding: 14px; background: var(--sg-panel-bg, #1b2429); color: #eef2f4; border-radius: 12px; }
.cgs-sug-admin .cgs-sug { margin: 0 0 18px; background: var(--sg-panel-bg, transparent); border-radius: 12px; padding: 14px; }
.cgs-sug-title { margin: 0 0 14px; font-size: 1.15em; text-align: center; letter-spacing: .02em; color: var(--sg-title, inherit); }
.cgs-sug-note { margin: 0 0 10px; padding: 10px 14px; border: 1px dashed currentColor; border-radius: 8px; opacity: .7; font-size: .9em; text-align: center; }
.cgs-sug-grid { display: grid; grid-template-columns: repeat(var(--cgs-sug-cols, 4), minmax(0, 1fr)); gap: var(--sg-gap); }
@media (max-width: 720px) { .cgs-sug-grid { grid-template-columns: repeat(min(var(--cgs-sug-cols, 4), 2), minmax(0, 1fr)); } }
.cgs-sug-card { display: flex; flex-direction: column; text-align: center; background: var(--sg-card-bg, rgba(255,255,255,.05)); color: var(--sg-text, inherit); border: var(--sg-bw, 1px) solid var(--sg-border, rgba(128,128,128,.28)); border-radius: var(--sg-radius); overflow: hidden; box-shadow: var(--sg-shadow, none); transition: transform .2s, box-shadow .2s; }
.cgs-sug.align-left .cgs-sug-card { text-align: left; }
.cgs-sug.hover-lift .cgs-sug-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.cgs-sug.hover-grow .cgs-sug-card:hover { transform: scale(1.03); }
.cgs-sug.hover-glow .cgs-sug-card:hover { box-shadow: 0 0 0 2px var(--sg-btn-bg, #2bff7a), 0 0 22px var(--sg-btn-bg, #2bff7a); }
.cgs-sug-pic { display: block; position: relative; aspect-ratio: var(--sg-ratio); background: linear-gradient(100deg, #120c08, #2a1e15 50%, #7d6a52 76%, #cdbb9f); }
.cgs-sug-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cgs-sug-pic.is-loading .cgs-sug-img { opacity: .35; filter: blur(2px); }
.cgs-sug-pic.is-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); background-size: 200% 100%; animation: cgs-sug-shine 1.2s linear infinite; }
@keyframes cgs-sug-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.cgs-sug-name { margin: 10px 10px 2px; font-size: .98em; color: inherit; }
.cgs-sug-price { margin: 0 10px 8px; opacity: .85; font-size: .92em; }
.cgs-sug.no-price .cgs-sug-price { display: none; }
.cgs-sug-buttons { display: flex; flex-direction: column; gap: 6px; margin: auto 10px 12px; }
.cgs-sug-buy, .cgs-sug-go { display: block; padding: 8px 10px; border-radius: 999px; font-size: .88em; font-weight: 600; text-decoration: none; cursor: pointer; text-align: center; line-height: 1.2; }
.cgs-sug.btn-round .cgs-sug-buy, .cgs-sug.btn-round .cgs-sug-go { border-radius: 8px; }
.cgs-sug.btn-square .cgs-sug-buy, .cgs-sug.btn-square .cgs-sug-go { border-radius: 0; }
.cgs-sug-buy { border: 0; background: var(--sg-btn-bg, #1f2a30); color: var(--sg-btn-text, #fff); }
.cgs-sug-buy:hover:not(:disabled) { filter: brightness(1.18); }
.cgs-sug-buy:disabled { opacity: .6; cursor: progress; }
.cgs-sug-go { border: 1px solid rgba(128,128,128,.5); background: transparent; color: inherit; }
.cgs-sug-go:hover { border-color: var(--sg-btn-bg, #2bff7a); }
.cgs-sug.no-go .cgs-sug-go { display: none; }
/* Add to cart pop-up */
.cgs-sug-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); padding: 16px; }
.cgs-sug-modal-box { position: relative; background: #fff; color: #1d2327; border-radius: 14px; padding: 22px 22px 18px; max-width: 460px; width: 100%; max-height: 88vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.cgs-sug-modal-box h4 { margin: 0 0 12px; font-size: 1.1em; padding-right: 28px; }
.cgs-sug-modal-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #555; }
.cgs-sug-table { width: 100%; border-collapse: collapse; }
.cgs-sug-table td { padding: 9px 6px; border-top: 1px solid #e3e3e3; vertical-align: middle; font-size: .92em; }
.cgs-sug-table .cgs-sug-size { font-weight: 600; }
.cgs-sug-table .cgs-sug-dims { opacity: .7; font-size: .85em; }
.cgs-sug-table .cgs-sug-p { white-space: nowrap; }
.cgs-sug-table .cgs-sug-buy { padding: 7px 16px; background: #1f2a30; color: #fff; }
.cgs-sug-out { color: #b32d2e; font-size: .85em; }
.cgs-sug-agree-text { max-height: 130px; overflow: auto; font-size: .85em; border: 1px solid #e3e3e3; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.cgs-sug-agree { display: block; margin: 0 0 10px; font-size: .9em; }
.cgs-sug-msg { color: #b32d2e; margin: 8px 0 0; min-height: 1em; font-size: .88em; }
/* The panel's own control panel (shop managers): its own light box, plain colours, readable on any page */
.cgs-sgc { margin-top: 16px; padding: 12px 14px 14px; background: #f6f7f7; border: 1px solid #c3c4c7; border-radius: 10px; font-size: 13px; line-height: 1.4; color: #1d2327; text-align: left; font-weight: 400; letter-spacing: normal; text-transform: none; }
.cgs-sgc summary { cursor: pointer; font-weight: 700; padding: 2px 0; color: #1d2327; }
.cgs-sgc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 22px; margin-top: 10px; }
.cgs-sgc fieldset { border: 1px solid #dcdcde; border-radius: 8px; padding: 8px 10px 10px; margin: 0; min-width: 0; background: #fff; }
.cgs-sgc legend { padding: 0 6px; font-weight: 700; color: #1d2327; }
.cgs-sgc label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 5px 0; color: #1d2327; }
.cgs-sgc input[type=text], .cgs-sgc input[type=number], .cgs-sgc select { max-width: 150px; background: #fff; color: #1d2327; border: 1px solid #8c8f94; border-radius: 4px; padding: 3px 6px; font-size: 13px; box-shadow: none; }
.cgs-sgc input[type=text].wide { max-width: 100%; width: 100%; }
.cgs-sgc input[type=range] { max-width: 120px; }
.cgs-sgc input[type=color] { width: 34px; height: 24px; padding: 0; border: 1px solid #8c8f94; background: #fff; }
.cgs-sgc button { background: #f0f0f1; color: #1d2327; border: 1px solid #8c8f94; border-radius: 4px; padding: 3px 9px; cursor: pointer; font-size: 12px; }
.cgs-sgc button:hover { background: #e4e4e5; }
.cgs-sgc .cgs-sgc-auto.is-on { background: #1d2327; color: #fff; border-color: #1d2327; }
.cgs-sgc ul { list-style: none; margin: 4px 0 6px; padding: 0; }
.cgs-sgc li { display: flex; gap: 6px; align-items: center; padding: 3px 0; border-bottom: 1px dashed #dcdcde; }
.cgs-sgc li span { flex: 1; }
.cgs-sgc li button { padding: 0 7px; }
.cgs-sgc-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.cgs-sgc-bar .cgs-sgc-save { background: #2271b1; color: #fff; border-color: #2271b1; font-weight: 600; padding: 5px 14px; }
.cgs-sgc-bar .cgs-sgc-save:hover { background: #135e96; }
.cgs-sgc-msg { font-size: 12px; color: #50575e; }
.cgs-sgc code { background: #fff; color: #1d2327; padding: 2px 6px; border: 1px solid #dcdcde; border-radius: 4px; }
/* Services pill */
.cgs-sgp-pill.is-on { background: #2bff7a; color: #0b1a10; }