/* A 3D crystal gift's product page: numbered steps, cards, photo check, preview. */
.c3d-crystal {
    margin: 0 0 20px;
    color: #111827;
}

.c3d-crystal-title {
    margin: 0 0 12px;
}

.c3d-crystal-step {
    margin: 0 0 18px;
    padding: 0 0 16px;
    border-bottom: 1px solid #E5E7EB;
}

.c3d-crystal-step-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 1em;
}

.c3d-crystal-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c3d-theme-accent, #111827);
    color: var(--c3d-theme-accent-text, #FFFFFF);
    font-size: 13px;
    font-weight: 700;
}

.c3d-crystal-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.c3d-crystal-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #FFFFFF;
    color: #111827;
    text-align: left;
    font: inherit;
    line-height: 1.35;
    cursor: pointer;
}

.c3d-crystal-card:hover {
    border-color: var(--c3d-theme-accent, #111827);
}

.c3d-crystal-card:focus-visible,
.c3d-crystal-pill:focus-visible {
    outline: 2px solid var(--c3d-theme-accent-dark, #111827);
    outline-offset: 2px;
}

.c3d-crystal-card.is-selected {
    border-color: var(--c3d-theme-accent, #111827);
    box-shadow: 0 0 0 1px var(--c3d-theme-accent, #111827);
    background: color-mix(in srgb, var(--c3d-theme-accent, #111827) 6%, transparent);
}

.c3d-crystal-card-name {
    font-weight: 600;
}

.c3d-crystal-card-hint,
.c3d-crystal-card-people {
    font-size: 0.875em;
    color: #4B5563;
}

.c3d-crystal-card-price {
    font-size: 0.875em;
    font-weight: 600;
    color: #111827;
}

.c3d-crystal-note {
    margin: 8px 0 0;
    font-size: 0.875em;
    color: #4B5563;
}

.c3d-crystal-orientation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
}

.c3d-crystal-orientation[hidden] {
    display: none;
}

.c3d-crystal-orientation-label {
    margin-right: 4px;
    font-size: 0.875em;
    color: #4B5563;
}

.c3d-crystal-pill {
    padding: 5px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 999px;
    background: #FFFFFF;
    color: #111827;
    font: inherit;
    font-size: 0.875em;
    cursor: pointer;
}

.c3d-crystal-pill.is-selected {
    border-color: var(--c3d-theme-accent, #111827);
    background: var(--c3d-theme-accent, #111827);
    color: var(--c3d-theme-accent-text, #FFFFFF);
}

.c3d-crystal-tips {
    margin: 0 0 10px 1.2em;
    padding: 0;
    font-size: 0.875em;
    color: #4B5563;
}

.c3d-crystal-tips li {
    margin: 0 0 2px;
}

.c3d-crystal[data-type="closeup"] .c3d-crystal-tip-standing,
.c3d-crystal[data-type="standing"] .c3d-crystal-tip-closeup {
    display: none;
}

.c3d-crystal-photo-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The framed part, whole (as the crystal will show it). */
.c3d-crystal-thumb {
    width: auto;
    height: auto;
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
    background: #111827;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
}

.c3d-crystal-thumb[hidden],
.c3d-crystal-check[hidden],
.c3d-crystal-result[hidden],
.c3d-crystal-approve[hidden],
.c3d-crystal-lit[hidden],
.c3d-crystal-recrop[hidden] {
    display: none;
}

.c3d-crystal-photo-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.c3d-crystal-check {
    margin: 10px 0 0;
}

.c3d-crystal-msg {
    margin: 0 0 6px;
    padding: 8px 10px;
    border-left: 3px solid #16A34A;
    border-radius: 4px;
    background: rgba(22, 163, 74, 0.08);
    color: #15803D;
    font-size: 0.9em;
}

.c3d-crystal-msg.is-warn {
    border-left-color: #F59E0B;
    background: rgba(245, 158, 11, 0.1);
    color: #B45309;
}

.c3d-crystal-msg.is-refuse {
    border-left-color: #DC2626;
    background: rgba(220, 38, 38, 0.08);
    color: #DC2626;
}

.c3d-crystal-msg.is-info,
.c3d-crystal-msg.is-busy {
    border-left-color: #2563EB;
    background: rgba(37, 99, 235, 0.08);
    color: #2563EB;
}

.c3d-crystal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
}

.c3d-crystal-text-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
}

.c3d-crystal-text-row input {
    width: 100%;
}

.c3d-crystal-count {
    min-width: 48px;
    font-size: 0.8em;
    color: #6B7280;
    text-align: right;
}

.c3d-crystal-bg-status,
.c3d-crystal-status {
    margin: 8px 0 0;
    font-size: 0.9em;
    color: #4B5563;
}

.c3d-crystal.is-busy .c3d-crystal-make {
    opacity: 0.7;
    cursor: progress;
}

.c3d-crystal-result {
    margin: 12px 0 0;
}

.c3d-crystal-image {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: 8px;
    background: #111827;
}

.c3d-crystal-result figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
}

.c3d-crystal-disclaimer {
    font-size: 0.8em;
    color: #6B7280;
}

.c3d-crystal-approve {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    font-weight: 600;
}

.c3d-crystal-total {
    margin: 10px 0 0;
    font-size: 1.05em;
    font-weight: 700;
}

@media (max-width: 480px) {
    .c3d-crystal-cards {
        grid-template-columns: 1fr 1fr;
    }

    .c3d-crystal-text-row {
        grid-template-columns: 1fr auto;
    }

    .c3d-crystal-text-row label {
        grid-column: 1 / -1;
    }
}

.c3d-crystal-card.is-sold-out,
.c3d-crystal-card:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.c3d-crystal-card.is-sold-out .c3d-crystal-card-price {
    color: #DC2626;
}

/* The choice cards and pills are buttons, so a theme's button lettering
   (capitals, wide spacing, its button font) would land on them and make the
   descriptions hard to read: they keep the page's plain text. The real
   action buttons (Choose your photo, Show my crystal) keep the theme's look. */
#c3d-crystal button.c3d-crystal-card,
#c3d-crystal button.c3d-crystal-pill {
    font: inherit;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: normal;
    text-shadow: none;
}

#c3d-crystal button.c3d-crystal-pill {
    font-size: 0.875em;
}

/* ==== The friendlier crystal page (the shop theme's colours only):
   "3 of 6 done" with a bar, each step's number turns into a green tick,
   a photo drop zone, a tick on the chosen card, rounded text boxes,
   "Show my crystal" with a sparkle and what's still needed, and on
   phones a bar with the price and the next step (product-crystal.js). */

.c3d-crystal-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
}
.c3d-crystal-head .c3d-crystal-title { margin: 0; }
.c3d-crystal-steps-count { flex: none; font-size: 13px; color: #6B7280; }
.c3d-crystal-steps-bar {
    display: block;
    height: 6px;
    margin: 0 0 16px;
    border-radius: 999px;
    background: #F3F4F6;
    overflow: hidden;
}
.c3d-crystal-steps-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--c3d-theme-accent, #111827);
    transition: width 0.25s ease;
}

/* A step that's done: its number turns into a green tick */
.c3d-crystal-num { position: relative; transition: background 0.2s ease; }
.c3d-crystal-step.is-done .c3d-crystal-num {
    background: #16A34A;
    color: transparent;
}
.c3d-crystal-step.is-done .c3d-crystal-num::after {
    content: "\2713";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

/* The chosen card wears a tick */
#c3d-crystal .c3d-crystal-card { position: relative; border-radius: 12px; }
#c3d-crystal .c3d-crystal-card.is-selected::after {
    content: "\2713";
    position: absolute;
    top: -7px;
    right: -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--c3d-theme-accent, #111827);
    color: var(--c3d-theme-accent-text, #FFFFFF);
    font-size: 12px;
    line-height: 1;
}

/* The photo: a drop zone until one is chosen */
.c3d-crystal-photo-row {
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1.5px dashed #D1D5DB;
    border-radius: 12px;
    background: #F9FAFB;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.c3d-crystal-photo-row:not(.has-photo):hover,
.c3d-crystal-photo-row.is-dragover {
    border-color: var(--c3d-theme-accent, #111827);
    background: color-mix(in srgb, var(--c3d-theme-accent, #111827) 5%, #FFFFFF);
}
/* A chosen photo: the picture large on top, its name, then small Crop /
   Replace buttons, and the check below */
.c3d-crystal-photo-row.has-photo {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-style: solid;
    border-color: #E5E7EB;
    background: #FFFFFF;
    text-align: center;
    cursor: default;
}
.c3d-crystal-photo-row.has-photo > .c3d-crystal-thumb {
    width: auto;
    height: auto;
    max-width: min(100%, 200px);
    max-height: 170px;
    object-fit: contain;
    background: #F3F4F6;
    border: 0;
    border-radius: 12px;
}
.c3d-crystal-filename {
    max-width: 100%;
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: #4B5563;
    word-break: break-all;
}
.c3d-crystal-filename[hidden],
.c3d-crystal-replace[hidden],
.c3d-crystal-photo-row.has-photo .c3d-crystal-choose { display: none; }
.c3d-crystal-photo-row.has-photo .c3d-crystal-photo-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; }
.c3d-crystal-photo-row > .c3d-crystal-check { flex: 1 1 100%; margin: 0; }
.c3d-crystal-photo-row.has-photo > .c3d-crystal-check { align-self: stretch; margin-top: 4px; text-align: left; }

/* The check inside the card: short coloured lines, not boxes */
.c3d-crystal-photo-row .c3d-crystal-msg {
    margin: 0 0 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 13px;
    line-height: 1.45;
}
.c3d-crystal-photo-row .c3d-crystal-msg.is-ok::before { content: "\2713\00A0"; }
.c3d-crystal-photo-row .c3d-crystal-msg.is-warn::before { content: "!\00A0"; font-weight: 700; }
.c3d-crystal-photo-row .c3d-crystal-msg.is-refuse::before { content: "\2715\00A0"; }
.c3d-crystal-photo-row .c3d-crystal-msg.is-info,
.c3d-crystal-photo-row .c3d-crystal-msg.is-busy { color: #4B5563; }
.c3d-crystal-photo-row .c3d-crystal-actions,
.c3d-crystal-photo-row .c3d-crystal-enhance { margin-top: 6px; }
.c3d-crystal-drop {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 220px;
    min-width: 0;
    margin: 0;
}
.c3d-crystal-photo-row.has-photo .c3d-crystal-drop { display: none; }
.c3d-crystal-drop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--c3d-theme-accent, #111827) 10%, transparent);
    color: var(--c3d-theme-accent, #111827);
}
.c3d-crystal-drop-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.c3d-crystal-drop-text strong { font-size: 15px; font-weight: 600; color: #111827; }
.c3d-crystal-drop-text span { font-size: 13px; color: #6B7280; }
/* "Choose your photo": a compact outlined button inside the zone */
.woocommerce div.product form.cart #c3d-crystal .button.c3d-crystal-choose,
#c3d-crystal .button.c3d-crystal-choose {
    float: none;
    min-height: 0;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid var(--c3d-theme-accent, #111827);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--c3d-theme-accent-dark, #111827);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}
/* "Crop" / "Replace": small outlined pills with an icon (themes draw every <button> big) */
.woocommerce div.product form.cart #c3d-crystal .button.c3d-crystal-mini,
#c3d-crystal .button.c3d-crystal-mini {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    float: none;
    min-height: 0;
    margin: 0;
    padding: 3px 10px;
    border: 1px solid #D1D5DB;
    border-radius: 999px;
    background: #FFFFFF;
    color: #4B5563;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    box-shadow: none;
}
#c3d-crystal .button.c3d-crystal-mini[hidden] { display: none; }
#c3d-crystal .button.c3d-crystal-mini::before { font-size: 13px; line-height: 1; }
.woocommerce div.product form.cart #c3d-crystal .button.c3d-crystal-recrop,
#c3d-crystal .button.c3d-crystal-recrop {
    border-color: color-mix(in srgb, var(--c3d-theme-accent, #111827) 45%, transparent);
    color: var(--c3d-theme-accent-dark, #111827);
}
#c3d-crystal .button.c3d-crystal-recrop::before { content: "\2702"; }
#c3d-crystal .button.c3d-crystal-replace::before { content: "\21BB"; }
.woocommerce div.product form.cart #c3d-crystal .button.c3d-crystal-mini:hover,
.woocommerce div.product form.cart #c3d-crystal .button.c3d-crystal-mini:focus-visible,
#c3d-crystal .button.c3d-crystal-mini:hover,
#c3d-crystal .button.c3d-crystal-mini:focus-visible {
    border-color: var(--c3d-theme-accent, #111827);
    background: #FFFFFF;
    color: var(--c3d-theme-accent-dark, #111827);
}
#c3d-crystal .button.c3d-crystal-choose:hover,
#c3d-crystal .button.c3d-crystal-choose:focus-visible {
    background: var(--c3d-theme-accent, #111827);
    color: var(--c3d-theme-accent-text, #FFFFFF);
}

/* Text: rounded boxes with a soft glow while typing */
#c3d-crystal .c3d-crystal-text {
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    background: #FFFFFF;
    color: #111827;
    font-family: inherit;
    font-size: 15px;
    box-shadow: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#c3d-crystal .c3d-crystal-text:focus {
    border-color: var(--c3d-theme-accent, #111827);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c3d-theme-accent, #111827) 18%, transparent);
    outline: 0;
}

/* "Show my crystal" with a sparkle; what's still needed as chips */
#c3d-crystal .c3d-crystal-make::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: -3px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.8 5.2L19 9l-5.2 1.8L12 16l-1.8-5.2L5 9l5.2-1.8zM19 14l.9 2.1L22 17l-2.1.9L19 20l-.9-2.1L16 17l2.1-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.8 5.2L19 9l-5.2 1.8L12 16l-1.8-5.2L5 9l5.2-1.8zM19 14l.9 2.1L22 17l-2.1.9L19 20l-.9-2.1L16 17l2.1-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.c3d-crystal-needed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 13px;
    color: #4B5563;
}
.c3d-crystal-needed[hidden] { display: none; }
.woocommerce div.product form.cart #c3d-crystal .c3d-crystal-needed-chip,
#c3d-crystal .c3d-crystal-needed-chip {
    float: none;
    min-height: 0;
    margin: 0;
    padding: 2px 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: #B45309;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
}
#c3d-crystal .c3d-crystal-needed-chip:hover,
#c3d-crystal .c3d-crystal-needed-chip:focus-visible {
    background: rgba(245, 158, 11, 0.24);
    color: #B45309;
}

/* Phones: the price and the next step stay on screen */
.c3d-crystal-mobilebar { display: none; }
@media (max-width: 640px) {
    .c3d-crystal-mobilebar.is-on {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #E5E7EB;
        background: #FFFFFF;
        box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.08);
        box-sizing: border-box;
    }
    body.c3d-has-mobilebar { padding-bottom: 76px; }
}
.c3d-crystal-mobilebar-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.c3d-crystal-mobilebar-price { font-size: 16px; font-weight: 700; color: #111827; }
.c3d-crystal-mobilebar-step { font-size: 12px; color: #6B7280; }
.c3d-crystal-mobilebar-step:empty { display: none; }
.c3d-crystal-mobilebar .c3d-crystal-mobilebar-btn {
    flex: none;
    min-height: 44px;
    margin: 0 0 0 auto;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--c3d-theme-accent, #111827);
    color: var(--c3d-theme-accent-text, #FFFFFF);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}
.c3d-crystal-mobilebar .c3d-crystal-mobilebar-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Cards and pills keep their own colours: a theme's button hover / focus /
   active colours (often white text) must not reach them, or the chosen
   card's text turns invisible. */
#c3d-crystal .c3d-crystal-card,
#c3d-crystal .c3d-crystal-card:hover,
#c3d-crystal .c3d-crystal-card:focus,
#c3d-crystal .c3d-crystal-card:active {
    background: #FFFFFF;
    color: #111827;
    text-decoration: none;
    text-transform: none;
}
#c3d-crystal .c3d-crystal-card.is-selected,
#c3d-crystal .c3d-crystal-card.is-selected:hover,
#c3d-crystal .c3d-crystal-card.is-selected:focus,
#c3d-crystal .c3d-crystal-card.is-selected:active {
    background: color-mix(in srgb, var(--c3d-theme-accent, #111827) 6%, #FFFFFF);
    color: #111827;
}
#c3d-crystal .c3d-crystal-card-name,
#c3d-crystal .c3d-crystal-card-price { color: #111827; }
#c3d-crystal .c3d-crystal-card-hint,
#c3d-crystal .c3d-crystal-card-people { color: #4B5563; }
#c3d-crystal .c3d-crystal-card.is-sold-out .c3d-crystal-card-price { color: #DC2626; }
#c3d-crystal .c3d-crystal-card-free { color: #15803D; }
#c3d-crystal .c3d-crystal-pill:not(.is-selected),
#c3d-crystal .c3d-crystal-pill:not(.is-selected):hover,
#c3d-crystal .c3d-crystal-pill:not(.is-selected):focus,
#c3d-crystal .c3d-crystal-pill:not(.is-selected):active {
    background: #FFFFFF;
    color: #111827;
}
#c3d-crystal .c3d-crystal-pill.is-selected,
#c3d-crystal .c3d-crystal-pill.is-selected:hover,
#c3d-crystal .c3d-crystal-pill.is-selected:focus,
#c3d-crystal .c3d-crystal-pill.is-selected:active {
    background: var(--c3d-theme-accent, #111827);
    color: var(--c3d-theme-accent-text, #FFFFFF);
}

/* Light bases: a small glow swatch, then the name and (if any) the price */
#c3d-crystal .c3d-crystal-light-card {
    display: grid;
    grid-template-columns: 22px 1fr;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
}
#c3d-crystal .c3d-crystal-light-card .c3d-crystal-glow { grid-row: 1 / span 2; }
#c3d-crystal .c3d-crystal-light-card .c3d-crystal-card-name,
#c3d-crystal .c3d-crystal-light-card .c3d-crystal-card-price { grid-column: 2; }
.c3d-crystal-glow {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #D1D5DB;
    background: #F3F4F6;
}
[data-glow="white"] .c3d-crystal-glow {
    background: #FFFFFF;
    border-color: #F59E0B;
    box-shadow: 0 0 6px 1px rgba(245, 158, 11, 0.45);
}
[data-glow="warm"] .c3d-crystal-glow {
    background: #F59E0B;
    border-color: #FFFFFF;
    box-shadow: 0 0 8px 2px rgba(245, 158, 11, 0.6);
}
[data-glow="colour"] .c3d-crystal-glow,
[data-glow="rotating"] .c3d-crystal-glow {
    border-color: #FFFFFF;
    background: conic-gradient(#DC2626, #F59E0B, #16A34A, #2563EB, #DC2626);
    box-shadow: 0 0 6px 1px rgba(37, 99, 235, 0.35);
}
@media (prefers-reduced-motion: no-preference) {
    [data-glow="rotating"].is-selected .c3d-crystal-glow { animation: c3d-crystal-spin 4s linear infinite; }
}
@keyframes c3d-crystal-spin { to { transform: rotate(360deg); } }

/* Line up the text: left / centre / right */
.c3d-crystal-align {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
}
.c3d-crystal-align-label {
    margin-right: 4px;
    font-size: 0.875em;
    color: #4B5563;
}
#c3d-crystal .c3d-crystal-align-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.c3d-crystal-align-btn svg { flex: none; }

/* Waiting (photo check, preview): a soft card with what's happening, a running
   clock, the moving bar and a changing friendly line, like the other products */
.c3d-crystal-wait {
    flex-basis: 100%;
    margin: 10px 0 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--c3d-theme-accent, #111827) 25%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--c3d-theme-accent, #111827) 5%, #FFFFFF);
    text-align: left;
}
.c3d-crystal-wait-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.c3d-crystal-wait-spark {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c3d-theme-accent, #111827);
    animation: c3d-crystal-pulse 1.6s ease-out infinite;
}
@keyframes c3d-crystal-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c3d-theme-accent, #111827) 50%, transparent); }
    70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--c3d-theme-accent, #111827) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c3d-theme-accent, #111827) 0%, transparent); }
}
.c3d-crystal-wait-label {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}
.c3d-crystal-wait-time {
    margin-left: auto;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--c3d-theme-accent-dark, #111827);
}
.c3d-crystal-wait-note {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #4B5563;
}
.c3d-crystal-wait-bar {
    position: relative;
    display: block;
    height: 6px;
    margin-top: 10px;
    border-radius: 3px;
    background: #E5E7EB;
    overflow: hidden;
}
.c3d-crystal-wait-bar span {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c3d-theme-accent, #111827) 35%, transparent), var(--c3d-theme-accent, #111827) 50%, var(--c3d-theme-accent-dark, #111827));
    animation: c3d-crystal-moving 1.4s ease-in-out infinite;
}
@keyframes c3d-crystal-moving {
    0%   { left: -40%; }
    100% { left: 100%; }
}
.c3d-crystal-wait-tip {
    display: block;
    min-height: 18px;
    margin-top: 8px;
    font-size: 13px;
    font-style: italic;
    color: var(--c3d-theme-accent-dark, #111827);
}
.c3d-crystal-wait-tip.is-in { animation: c3d-crystal-tip-in 0.4s ease-out; }
@keyframes c3d-crystal-tip-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .c3d-crystal-wait-spark, .c3d-crystal-wait-tip.is-in { animation: none; }
    .c3d-crystal-wait-bar span { animation: none; left: 0; width: 100%; opacity: 0.6; }
}

/* Buttons in the crystal's own look (the theme's colours, not its shapes):
   themes draw every .button their way (often square and in capitals). */
/* "Show my crystal" / "Update my preview": the main action, full width */
.woocommerce div.product form.cart #c3d-crystal .button.c3d-crystal-make,
#c3d-crystal .button.c3d-crystal-make {
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 20px;
    border: 0;
    border-radius: 12px;
    background: var(--c3d-theme-accent, #111827);
    color: var(--c3d-theme-accent-text, #FFFFFF);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12);
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
#c3d-crystal .button.c3d-crystal-make:hover,
#c3d-crystal .button.c3d-crystal-make:focus-visible {
    background: var(--c3d-theme-accent-dark, #111827);
    color: var(--c3d-theme-accent-text, #FFFFFF);
    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.18);
}
#c3d-crystal .button.c3d-crystal-make:disabled {
    opacity: 0.6;
    cursor: progress;
}
/* "Switch to Medium", "Switch to Close-up": rounded, filled for the suggestion, outlined otherwise */
.woocommerce div.product form.cart #c3d-crystal .button.c3d-crystal-action,
#c3d-crystal .button.c3d-crystal-action {
    float: none;
    min-height: 0;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid var(--c3d-theme-accent, #111827);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--c3d-theme-accent-dark, #111827);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}
#c3d-crystal .button.alt.c3d-crystal-action,
#c3d-crystal .button.c3d-crystal-action:hover,
#c3d-crystal .button.c3d-crystal-action:focus-visible {
    background: var(--c3d-theme-accent, #111827);
    color: var(--c3d-theme-accent-text, #FFFFFF);
}
#c3d-crystal .button.alt.c3d-crystal-action:hover,
#c3d-crystal .button.alt.c3d-crystal-action:focus-visible {
    background: var(--c3d-theme-accent-dark, #111827);
}
/* What to do next, inside the refusal: its own words as links */
.woocommerce div.product form.cart #c3d-crystal .c3d-crystal-msg .c3d-crystal-inline,
#c3d-crystal .c3d-crystal-msg .c3d-crystal-inline {
    display: inline;
    float: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--c3d-theme-accent-dark, #111827);
    font: inherit;
    font-weight: 600;
    text-align: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
}
#c3d-crystal .c3d-crystal-msg .c3d-crystal-inline:hover,
#c3d-crystal .c3d-crystal-msg .c3d-crystal-inline:focus-visible {
    color: var(--c3d-theme-accent, #111827);
    text-decoration-thickness: 2px;
}
/* "Choose another photo": a plain link */
#c3d-crystal .c3d-crystal-another {
    padding: 0;
    border: 0;
    background: none;
    color: var(--c3d-theme-accent-dark, #111827);
    font-size: 14px;
    text-decoration: underline;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
}
/* The small pills (way round, "See it lit", line up): the theme's capitals off too */
#c3d-crystal .c3d-crystal-pill {
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
    box-shadow: none;
}

/* ---- The crystal in 3D: the photo etched as a relief, turned across the front (crystal-3d-viewer.js) ---- */

.c3d-crystal-viewer {
    position: relative;
    max-width: 480px;
    margin: 12px 0 0;
    border-radius: 12px;
    overflow: hidden;
    background: #111827;
    touch-action: none;
    cursor: grab;
}

.c3d-crystal-viewer:active {
    cursor: grabbing;
}

.c3d-crystal-viewer[hidden],
.c3d-crystal-viewer-tools[hidden],
.c3d-crystal-view-3d[hidden] {
    display: none;
}

.c3d-crystal-viewer-canvas {
    display: block;
    width: 100%;
    height: auto;
}

.c3d-crystal-viewer-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 480px;
    margin: 8px 0 0;
}

.c3d-crystal-viewer-hint {
    font-size: 0.85em;
    color: #4B5563;
}

/* A size's regular price, crossed out next to its price. */
#c3d-crystal .c3d-crystal-card-was {
    margin-left: 4px;
    font-weight: 400;
    font-size: 0.9em;
    color: #6B7280;
    text-decoration: line-through;
}

/* A size's measurements, on their own line under its name. */
#c3d-crystal .c3d-crystal-card-dims {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    font-size: 0.85em;
    color: #4B5563;
}

/* "Enhance my photo" under the photo check. */
#c3d-crystal .c3d-crystal-enhance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 8px 0 0;
}

#c3d-crystal .c3d-crystal-enhance-hint {
    flex: 1 1 220px;
    font-size: 0.85em;
    color: #4B5563;
}

#c3d-crystal .c3d-crystal-enhance-hint.is-error {
    color: #DC2626;
}

/* Light bases with a photo of the real base: the photo on the card, and the chosen one shown larger */
#c3d-crystal .c3d-crystal-light-card.has-photo { grid-template-columns: 48px 1fr; }
#c3d-crystal .c3d-crystal-base-thumb {
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
}
.c3d-crystal-base-photo[hidden] { display: none; }
.c3d-crystal-base-photo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
}
.c3d-crystal-base-photo img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    flex: none;
}
.c3d-crystal-base-photo figcaption {
    font-size: 0.875em;
    color: #4B5563;
}

/* "Update my preview" hidden while the preview is up to date */
#c3d-crystal .c3d-crystal-make[hidden],
.woocommerce div.product form.cart #c3d-crystal .button.c3d-crystal-make[hidden] { display: none !important; }

/* Add to Cart pressed with a step left: the steps still to do (under the cart row) */
.c3d-crystal-todo {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid #F59E0B;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.08);
    color: #111827;
    font-size: 0.9375em;
}
.c3d-crystal-todo[hidden] { display: none; }
.c3d-crystal-todo ul { margin: 6px 0 0; padding: 0; list-style: none; }
.c3d-crystal-todo li { margin: 4px 0 0; }
.c3d-crystal-todo li::before { content: "\2192\00a0"; color: #B45309; }
.woocommerce div.product .c3d-crystal-todo button.c3d-crystal-todo-link,
.c3d-crystal-todo button.c3d-crystal-todo-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    min-height: 0;
    background: none;
    box-shadow: none;
    color: var(--c3d-theme-accent, #111827);
    font: inherit;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: underline;
    cursor: pointer;
}
.c3d-crystal-step.is-todo {
    outline: 2px solid #F59E0B;
    outline-offset: 4px;
    border-radius: 8px;
}

/* The fonts to choose from: each button in its own font */
.c3d-crystal-fonts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
}
#c3d-crystal .c3d-crystal-font-btn {
    font-size: 1em;
    text-transform: none;
    letter-spacing: normal;
}

/* Where the text goes: above or under the photo */
.c3d-crystal-positions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
}

/* "Turn it in 3D" / "See the picture": a clear button with an icon, in the shop's colour */
#c3d-crystal .c3d-crystal-view-btn,
.c3d-crystal-stage .c3d-crystal-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 8px 0 0;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--c3d-theme-accent, #111827);
    color: var(--c3d-theme-accent-text, #FFFFFF);
    font: inherit;
    font-size: 0.9375em;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#c3d-crystal .c3d-crystal-view-btn:hover,
#c3d-crystal .c3d-crystal-view-btn:focus-visible,
.c3d-crystal-stage .c3d-crystal-view-btn:hover,
.c3d-crystal-stage .c3d-crystal-view-btn:focus-visible {
    background: var(--c3d-theme-accent, #111827);
    color: var(--c3d-theme-accent-text, #FFFFFF);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.24);
}
#c3d-crystal .c3d-crystal-view-btn[hidden],
.c3d-crystal-stage .c3d-crystal-view-btn[hidden] { display: none; }
.c3d-crystal-view-icon { flex: none; }
.c3d-crystal-share-row[hidden] { display: none; }
.c3d-crystal-share-row { margin: 10px 0 0; }
#c3d-crystal a.c3d-crystal-share { text-decoration: none; background: #16A34A; color: #FFFFFF; }
#c3d-crystal a.c3d-crystal-share:hover, #c3d-crystal a.c3d-crystal-share:focus-visible { background: #15803D; color: #FFFFFF; }

/* A simpler text step: the lines (named inside), then one row of how it looks */
.c3d-crystal-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
#c3d-crystal .c3d-crystal-text-row,
#c3d-crystal .c3d-crystal-text-row label + input {
    grid-template-columns: 1fr auto;
}
@media (max-width: 640px) {
    #c3d-crystal .c3d-crystal-text-row { grid-template-columns: 1fr auto; }
}
.c3d-crystal-text-style[hidden] { display: none; }
.c3d-crystal-text-style {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 12px 0 0;
}
.c3d-crystal-text-style .c3d-crystal-align,
.c3d-crystal-text-style .c3d-crystal-positions,
.c3d-crystal-text-style .c3d-crystal-fonts {
    margin: 0;
}
#c3d-crystal .c3d-crystal-align-btn {
    padding-left: 10px;
    padding-right: 10px;
}
#c3d-crystal .c3d-crystal-font-select {
    min-height: 36px;
    max-width: 220px;
    padding: 4px 30px 4px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 999px;
    background-color: #FFFFFF;
    color: #111827;
    font-size: 0.9375em;
}

/* Photo tips: three short ticks in a row */
#c3d-crystal .c3d-crystal-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-size: 0.875em;
    color: #4B5563;
}
#c3d-crystal .c3d-crystal-tips li {
    margin: 0;
}
#c3d-crystal .c3d-crystal-tips li::before {
    content: "\2713";
    margin-right: 6px;
    color: #16A34A;
    font-weight: 700;
}
.c3d-crystal[data-type="closeup"] .c3d-crystal-tips .c3d-crystal-tip-standing { display: none; }
/* The words follow what the crystal takes: photos, scans, or both. */
.c3d-crystal[data-photos="people"] .c3d-crystal-tips .c3d-crystal-tip-scan:not(.c3d-crystal-tip-photo),
.c3d-crystal[data-photos="scan"] .c3d-crystal-tips .c3d-crystal-tip-photo:not(.c3d-crystal-tip-scan),
.c3d-crystal[data-photos="both"] .c3d-crystal-tips .c3d-crystal-tip-scan:not(.c3d-crystal-tip-photo),
.c3d-crystal[data-photos="scan"] .c3d-crystal-card-people,
.c3d-crystal[data-photos="scan"] .c3d-crystal-people-note { display: none !important; }

/* The photo check: clean rounded notes with an icon */
.c3d-crystal-photo-row .c3d-crystal-msg {
    position: relative;
    margin: 0 0 8px;
    padding: 10px 12px 10px 38px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #F9FAFB;
    color: #111827;
    font-size: 13px;
    line-height: 1.5;
}
.c3d-crystal-photo-row .c3d-crystal-msg::before {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.c3d-crystal-photo-row .c3d-crystal-msg.is-ok { border-color: rgba(22, 163, 74, 0.3); background: rgba(22, 163, 74, 0.06); color: #15803D; }
.c3d-crystal-photo-row .c3d-crystal-msg.is-ok::before { content: "\2713"; background: #16A34A; }
.c3d-crystal-photo-row .c3d-crystal-msg.is-warn { border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.07); color: #B45309; }
.c3d-crystal-photo-row .c3d-crystal-msg.is-warn::before { content: "!"; background: #F59E0B; }
.c3d-crystal-photo-row .c3d-crystal-msg.is-refuse { border-color: rgba(220, 38, 38, 0.3); background: rgba(220, 38, 38, 0.05); color: #DC2626; }
.c3d-crystal-photo-row .c3d-crystal-msg.is-refuse::before { content: "\2715"; background: #DC2626; }
.c3d-crystal-photo-row .c3d-crystal-msg.is-info,
.c3d-crystal-photo-row .c3d-crystal-msg.is-busy { color: #4B5563; }
.c3d-crystal-photo-row .c3d-crystal-msg.is-info::before,
.c3d-crystal-photo-row .c3d-crystal-msg.is-busy::before { content: "i"; background: #6B7280; }

/* How the crystal stands: under the photo, once there is one */
.c3d-crystal-photo-row:not(.has-photo) .c3d-crystal-orientation { display: none !important; }
.c3d-crystal-photo-row .c3d-crystal-orientation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    margin: 6px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #E5E7EB;
}
.c3d-crystal-photo-row .c3d-crystal-orientation[hidden] { display: none; }
.c3d-crystal-orientation-label {
    font-size: 0.9375em;
    font-weight: 600;
    color: #111827;
}
.c3d-crystal-orientation-btns {
    display: inline-flex;
    gap: 8px;
}
#c3d-crystal .c3d-crystal-way {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.c3d-crystal-way-icon {
    display: inline-block;
    border: 2px solid currentColor;
    border-radius: 3px;
}
.c3d-crystal-way-icon.is-tall { width: 11px; height: 16px; }
.c3d-crystal-way-icon.is-wide { width: 16px; height: 11px; }

/* The font picker: each font shown in itself */
.c3d-crystal-fontpick {
    position: relative;
    display: inline-block;
}
#c3d-crystal .c3d-crystal-fontpick-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    max-width: 240px;
    padding: 4px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 999px;
    background: #FFFFFF;
    color: #111827;
    font-size: 1.05em;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
}
#c3d-crystal .c3d-crystal-fontpick-btn:hover,
#c3d-crystal .c3d-crystal-fontpick-btn:focus-visible {
    border-color: var(--c3d-theme-accent, #111827);
    background: #FFFFFF;
    color: #111827;
}
.c3d-crystal-fontpick-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.c3d-crystal-fontpick-caret {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid #4B5563;
    border-bottom: 2px solid #4B5563;
    transform: rotate(45deg);
}
.c3d-crystal-fontpick-list[hidden] { display: none; }
.c3d-crystal-fontpick-list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-height: 280px;
    overflow: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.16);
}
.c3d-crystal-fontpick-list li {
    margin: 0;
    padding: 9px 12px;
    border-radius: 8px;
    color: #111827;
    font-size: 1.1em;
    line-height: 1.25;
    cursor: pointer;
    outline: none;
}
.c3d-crystal-fontpick-list li:hover,
.c3d-crystal-fontpick-list li:focus {
    background: #F3F4F6;
}
.c3d-crystal-fontpick-list li.is-selected {
    background: color-mix(in srgb, var(--c3d-theme-accent, #111827) 10%, transparent);
}

/* Text size: three "A"s, small to large */
.c3d-crystal-sizes-text {
    display: flex;
    align-items: center;
    gap: 6px;
}
#c3d-crystal .c3d-crystal-textsize-btn {
    min-width: 36px;
    padding-left: 8px;
    padding-right: 8px;
    font-weight: 700;
    line-height: 1;
}
#c3d-crystal .c3d-crystal-textsize-btn.is-small { font-size: 0.75em; }
#c3d-crystal .c3d-crystal-textsize-btn.is-medium { font-size: 0.9em; }
#c3d-crystal .c3d-crystal-textsize-btn.is-large { font-size: 1.1em; }

/* Some shop themes lay out the add-to-cart form as a row (flex) and give
   every button a fixed height and one line of text: the crystal designer was
   squeezed beside "Add to cart" and the size and light cards' text spilled
   over each other. It takes the form's full width, the cards grow with their
   text, and anything hidden stays hidden whatever the theme's display rule
   (the plain "Choose File" box, Crop and Replace before a photo). */
.woocommerce div.product form.cart .c3d-crystal,
#c3d-crystal {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#c3d-crystal button.c3d-crystal-card {
    height: auto;
    min-height: 0;
    max-height: none;
    white-space: normal;
    overflow: visible;
}

#c3d-crystal [hidden] {
    display: none !important;
}

/* Who is in the photo, with the price for more people than the size
   includes; "+ Someone was missed" when the check missed one. */
#c3d-crystal .c3d-crystal-people {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 8px 0 0;
    font-size: 0.9em;
    color: #111827;
}
#c3d-crystal .c3d-crystal-people-btns {
    display: inline-flex;
    gap: 6px;
}

/* The new crystal in a window: the 3D view (or picture), the price, and
   Approve / Edit (product-crystal.js moves the preview in and back). */
.c3d-crystal-stage[hidden] { display: none !important; }
.c3d-crystal-stage {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(17, 24, 39, 0.6);
    box-sizing: border-box;
}
.c3d-crystal-stage-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 16px;
    border-radius: 12px;
    background: #FFFFFF;
    color: #111827;
    box-sizing: border-box;
}
.c3d-crystal-stage-title {
    margin: 0 32px 10px 0;
    font-size: 1.15em;
    font-weight: 700;
}
.c3d-crystal-stage-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #F3F4F6;
    color: #111827;
    font-size: 22px;
    line-height: 36px;
    cursor: pointer;
}
.c3d-crystal-stage-body img { max-width: 100%; height: auto; }
.c3d-crystal-stage-price {
    margin: 10px 0 0;
    font-weight: 700;
}
.c3d-crystal-stage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
}
.c3d-crystal-stage-actions .button {
    flex: 1 1 140px;
    height: auto;
    min-height: 44px;
    white-space: normal;
}
body.c3d-stage-open { overflow: hidden; }
.c3d-crystal-stage .c3d-crystal-stage-approve,
.c3d-crystal-stage .c3d-crystal-stage-approve:hover,
.c3d-crystal-stage .c3d-crystal-stage-approve:focus {
    background: var(--c3d-theme-accent, #111827) !important;
    border-color: var(--c3d-theme-accent, #111827) !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

/* The shop's note about the photo, next to "Add your photo": to read, or a
   box to tick first (highlighted when the customer tries to skip it). */
#c3d-crystal .c3d-crystal-disclaimer-box {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid #E5E7EB;
    border-left: 4px solid var(--c3d-theme-accent, #111827);
    border-radius: 8px;
    background: #F9FAFB;
    color: #4B5563;
    font-size: 0.9em;
    line-height: 1.45;
}
#c3d-crystal .c3d-crystal-disclaimer-box.is-tick,
.c3d-crystal-stage .c3d-crystal-disclaimer-box.is-tick { cursor: pointer; }
#c3d-crystal .c3d-crystal-disclaimer-box input,
.c3d-crystal-stage .c3d-crystal-disclaimer-box input { margin-top: 3px; flex: 0 0 auto; }
#c3d-crystal .c3d-crystal-disclaimer-box.is-asked,
.c3d-crystal-stage .c3d-crystal-disclaimer-box.is-asked {
    border-color: #DC2626;
    border-left-color: #DC2626;
    background: rgba(220, 38, 38, 0.06);
}

/* A scan report's scans to tap, and "As it is" / "Smooth". */
#c3d-crystal .c3d-crystal-panels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0;
}
#c3d-crystal button.c3d-crystal-panel {
    height: auto;
    padding: 4px;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    background: #111827;
    line-height: 0;
    cursor: pointer;
}
#c3d-crystal button.c3d-crystal-panel:hover,
#c3d-crystal button.c3d-crystal-panel:focus-visible { border-color: var(--c3d-theme-accent, #111827); }
#c3d-crystal .c3d-crystal-panel canvas { display: block; max-width: 140px; height: auto; border-radius: 4px; }
#c3d-crystal .c3d-crystal-look {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 8px 0 0;
    font-size: 0.9em;
}
#c3d-crystal .c3d-crystal-look[hidden] { display: none !important; }
#c3d-crystal .c3d-crystal-look-btns { display: inline-flex; gap: 6px; }