/* ============================================================
   Titto – Keyring Customizer  (scoped: kc-*)
   ============================================================ */

/* Kunstler Script is not on Google Fonts: the file is self-hosted in wwwroot/fonts/. */
@font-face {
    font-family: "Kunstler Script";
    /* Only the .ttf is shipped - listing missing .woff2/.woff made every visit 404 twice first. */
    src: url("/fonts/KunstlerScript.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --kc-accent: #1a1a1a;
    --kc-gold: #b08d3c;
    --kc-gold-soft: #faf5e9;
    --kc-ink: #2a2418;
    --kc-muted: #8a7a5c;
    --kc-faint: #b3a688;
    --kc-line: #e2d8c3;
    --kc-cream: #fffdf9;
    --kc-stage-bg: #f4eee2;
    --kc-champagne: #f3e6c4;
    --kc-serif: "Cormorant Garamond", Georgia, serif;
    --kc-sans: "Montserrat", system-ui, sans-serif;
    --kc-radius-sm: 8px;
    --kc-radius-md: 10px;
    --kc-radius-lg: 20px;
    --kc-ease: 0.2s ease;
    --kc-swatch-size: 28px;
}

/* ── Page layout ─────────────────────────────────────────── */
.kc-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    padding: 24px 0 48px;
    margin: 0 auto;
    font-family: var(--kc-sans);
    color: var(--kc-ink);
}

@media (min-width: 769px) {
    .kc-layout {
        grid-template-columns: minmax(300px, 380px) 1fr;
    }
}

/* ── Control panel ───────────────────────────────────────── */
.kc-panel {
    background: var(--kc-cream);
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius-lg);
    padding: 17px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0 20px 50px -25px rgba(60, 40, 10, .25);
}

.kc-panel__heading {
    font: 500 34px/1.1 var(--kc-serif);
    letter-spacing: .02em;
    color: var(--kc-ink);
    margin: 0;
}

.kc-rule {
    width: 28px;
    height: 1px;
    background: var(--kc-gold);
    margin: -12px 0 0;
}

.kc-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kc-label {
    font: 500 11px/1.2 var(--kc-sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kc-muted);
}

    .kc-label small {
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        color: var(--kc-faint);
        margin-left: .4em;
    }

.kc-label__value {
    color: var(--kc-ink);
    margin-left: .4em;
}

/* ── Color swatches ──────────────────────────────────────── */
.kc-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.kc-swatch {
    width: var(--kc-swatch-size);
    height: var(--kc-swatch-size);
    padding: 0;
    border: 0;
    border-radius: 10%;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
    transition: transform var(--kc-ease), box-shadow var(--kc-ease);
}

    .kc-swatch:hover {
        transform: scale(1.08);
    }

.kc-swatch--active {
    box-shadow: 0 0 0 2px var(--kc-cream), 0 0 0 3.5px var(--kc-gold);
}

.kc-swatch--white {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}

    .kc-swatch--white.kc-swatch--active {
        box-shadow: 0 0 0 2px var(--kc-cream), 0 0 0 3.5px var(--kc-gold);
    }

/* ── Text input ──────────────────────────────────────────── */
.kc-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0;
    font: 400 15px var(--kc-sans);
    letter-spacing: .2em;
    border: 0;
    border-bottom: 1px solid var(--kc-gold);
    border-radius: 0;
    background: transparent;
    color: var(--kc-ink);
}

    .kc-input::placeholder {
        color: var(--kc-faint);
    }

/* ── Font dropdown ───────────────────────────────────────── */
.kc-select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font: 400 15px var(--kc-sans);
    color: var(--kc-ink);
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius-md);
    background: #fff;
    transition: border-color var(--kc-ease);
}

    .kc-input:focus-visible,
    .kc-select:focus-visible {
        outline: none;
        border-color: var(--kc-gold);
        box-shadow: 0 1px 0 0 var(--kc-gold);
    }

/* ── Letter case ─────────────────────────────────────────── */
.kc-case {
    display: flex;
    gap: 8px;
}

.kc-case__btn {
    flex: 1;
    padding: 10px 0;
    font: 500 14px var(--kc-sans);
    color: var(--kc-ink);
    background: #fff;
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius-sm);
    cursor: pointer;
    transition: border-color var(--kc-ease), background var(--kc-ease);
}

    .kc-case__btn:hover {
        border-color: var(--kc-gold);
    }

.kc-case__btn--active {
    border-color: var(--kc-gold);
    background: var(--kc-gold-soft);
}

.kc-case__btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ── Price row ───────────────────────────────────────────── */
.kc-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font: 500 12px var(--kc-sans);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.kc-price__note {
    margin: 4px 0 0;
    font: 400 12px var(--kc-sans);
    color: #777;
    text-align: right;
}

    .kc-price strong {
        font-size: 1.2rem;
        letter-spacing: 0;
        text-transform: none;
        color: var(--kc-ink);
    }
#engrave-text {
    font-display: swap;
    transition: none; /* no animation on every letter */
    will-change: contents;
}
/* ── Add to bag button ───────────────────────────────────── */
.kc-add-btn {
    width: 100%;
    padding: 16px 0;
    font: 500 12px var(--kc-sans);
    letter-spacing: .2em;
    text-transform: uppercase;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--kc-ease), color var(--kc-ease), transform .1s;
}

    .kc-add-btn:hover {
        background: var(--kc-gold);
        color: #fff;
    }

    .kc-add-btn:active {
        transform: scale(.98);
    }

    .kc-swatch:focus-visible,
    .kc-case__btn:focus-visible,
    .kc-add-btn:focus-visible {
        outline: 2px solid var(--kc-gold);
        outline-offset: 3px;
    }

/* ── Preview column ──────────────────────────────────────── */
.kc-preview {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kc-3d-wrap {
    width: 100%;
    border-radius: 24px;
    box-shadow: inset 0 0 0 1px rgba(160, 130, 70, .18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 16px;
    box-sizing: border-box;
}

/* ── Product stage (base photo + overlays) ───────────────── */
.kc-stage {
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 1137 / 1280;
    user-select: none;
    transition: transform .25s ease-out;
    will-change: transform;
}

.kc-stage--tilting {
    transition: transform .08s linear;
}

.kc-stage::after { /* soft ground shadow */
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3%;
    width: 38%;
    height: 4%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0, 0, 0, .18), transparent 70%);
    filter: blur(6px);
    pointer-events: none;
}

.kc-stage__base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.kc-stage__glare { /* light sweep that follows the mouse */
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .55), transparent 45%);
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity .3s ease;
}

.kc-stage--tilting .kc-stage__glare {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .kc-stage,
    .kc-stage--tilting {
        transition: none;
    }
}

/* Insert geometry (only used if you add the photo circle back to the markup) */
.kc-insert {
    position: absolute;
    left: calc(372 / 1137 * 100%);
    top: calc(907 / 1280 * 100%);
    width: calc(348 / 1137 * 100%);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
    touch-action: none;
}

.kc-insert--has-photo {
    cursor: grab;
}

.kc-insert--dragging {
    cursor: grabbing;
}

.kc-insert img.kc-insert__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 50%;
    display: none;
    pointer-events: none;
}

.kc-insert--has-photo img.kc-insert__photo {
    display: block;
}

/* Tag plate: centre (838.8, 705.6), 493x172 in the 1137x1280 image, rotated 38.2deg */
.kc-tag {
    position: absolute;
    left: calc(838.8 / 1137 * 100%);
    top: calc(705.6 / 1280 * 100%);
    width: calc(493 / 1137 * 100%);
    height: calc(172 / 1280 * 100%);
    transform: translate(-50%, -50%) rotate(38.2deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    pointer-events: none;
}

.kc-tag__name {
    display: block;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
    background: none; /* text colour only - no plate/box behind the name */
    text-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 -1px 0 rgba(0, 0, 0, .25); /* engraved look */
    transition: color var(--kc-ease);
}

.kc-tag__name--light {
    text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}

/* ── Hint text ───────────────────────────────────────────── */
.kc-hint {
    margin: 0;
    font: italic 12px/1.5 var(--kc-sans);
    letter-spacing: .03em;
    color: #9a8b6b;
    text-align: center;
}