/* ==========================================================================
   Lamp Configurator — v1.4
   Fixed 660px height — no scrolling needed.
   Square image: object-fit contain, sized by stage height not width.
   ========================================================================== */

.lc-wrap {
    --lc-bg:          #F7F5F1;
    --lc-surface:     #FFFFFF;
    --lc-border:      #E8E4DC;
    --lc-border-sel:  #1C1C1C;
    --lc-text:        #1C1C1C;
    --lc-text-muted:  #8A8278;
    --lc-accent:      #C17F52;
    --lc-step-color:  #C8BEB4;
    --lc-radius:      14px;
    --lc-radius-sm:   9px;
    --lc-shadow:      0 8px 48px rgba(28,28,28,0.11);
    --lc-transition:  0.2s cubic-bezier(0.4,0,0.2,1);
    --lc-font-display:'Cormorant Garamond', Georgia, serif;
    --lc-font-body:   'Jost', system-ui, sans-serif;

    font-family: var(--lc-font-body);
    color: var(--lc-text);
    box-sizing: border-box;
}

.lc-wrap *, .lc-wrap *::before, .lc-wrap *::after { box-sizing: inherit; }

/* ── Grid — fixed height so nothing scrolls ───────────────────────────────── */
.lc-wrap {
    display: grid;
    grid-template-columns: 1fr 420px;
    grid-template-areas: "visual options";
    /* Single value to tune if your theme header changes page height */
    height: 660px;
    max-width: 1120px;
    margin: 0 auto;
    border-radius: var(--lc-radius);
    overflow: hidden;
    box-shadow: var(--lc-shadow);
}

.lc-visual  { grid-area: visual; }
.lc-options { grid-area: options; }

/* ── Left panel ───────────────────────────────────────────────────────────── */
.lc-visual {
    background: #EDEBE5;
    display: flex;
    flex-direction: column;
    /* height is inherited from the grid row (660px) */
}

/* Stage fills all space above the price bar */
.lc-image-stage {
    flex: 1;
    min-height: 0;          /* critical: lets flex child shrink below content size */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
}

/* ── Square image box — sized by HEIGHT, not width ───────────────────────── */
/* Price bar = 55px, so stage height ≈ 660-55 = 605px, minus 48px padding = ~557px.
   We constrain the box to that height; because aspect-ratio:1/1 and
   width:auto, the width follows to make a perfect square. */
.lc-img-box {
    /* Height fills the stage (flex layout gives us this for free) */
    height: 100%;
    /* Width auto + aspect-ratio = square */
    width: auto;
    aspect-ratio: 1 / 1;
    /* But never wider than the container */
    max-width: 100%;
    position: relative;
    background: #EDEBE5;
    border-radius: 6px;
    overflow: hidden;
    /* Flex-shrink so it doesn't overflow */
    flex-shrink: 0;
}

.lc-placeholder-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--lc-text-muted);
    text-align: center;
    pointer-events: none;
}

.lc-placeholder-state p {
    font-size: 0.70rem;
    font-weight: 300;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin: 0;
}

.lc-product-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;        /* full image, no crop */
    object-position: center;
    transition: opacity 0.3s ease;
}

.lc-product-img.lc-fading { opacity: 0; }

.lc-img-loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
}

.lc-img-loading.lc-active { display: flex; }

.lc-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(28,28,28,0.12);
    border-top-color: var(--lc-text);
    border-radius: 50%;
    animation: lc-spin 0.7s linear infinite;
}

@keyframes lc-spin { to { transform: rotate(360deg); } }

/* ── Random / Surprise Me button ─────────────────────────────────────────── */
.lc-random-btn {
    position: absolute;
    bottom: 32px;
    right: 20px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 10px;
    background: rgba(28,28,28,0.72);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 100px;
    cursor: pointer;
    font-family: var(--lc-font-body);
    font-size: 0.63rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    transition: background var(--lc-transition), transform 0.15s ease, box-shadow var(--lc-transition);
    white-space: nowrap;
}

.lc-random-btn:hover {
    background: var(--lc-accent);
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(193,127,82,0.35);
}

.lc-random-btn:active {
    transform: translateY(0) scale(0.97);
}

/* Spin the icon during randomisation */
.lc-random-btn.lc-spinning svg {
    animation: lc-random-spin 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes lc-random-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Day/Night toggle — floats over the bottom of the image stage ─────────── */
.lc-time-toggle {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 3px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(255,255,255,0.95);
    border-radius: 100px;
    padding: 3px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 2px 14px rgba(0,0,0,0.10);
    white-space: nowrap;
}

.lc-time-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 16px;
    border: none;
    border-radius: 100px;
    background: transparent;
    cursor: pointer;
    font-family: var(--lc-font-body);
    font-size: 0.67rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(28,28,28,0.5);
    transition: all var(--lc-transition);
}

.lc-time-btn--active {
    background: #fff;
    color: var(--lc-text);
    box-shadow: 0 1px 6px rgba(0,0,0,0.10);
}

.lc-time-btn:hover:not(.lc-time-btn--active) { color: var(--lc-text); }

/* ── Price bar ────────────────────────────────────────────────────────────── */
.lc-price-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    border-top: 1px solid rgba(28,28,28,0.07);
    flex-shrink: 0;
    /* roughly 55px tall */
}

.lc-price-label {
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--lc-text-muted);
}

.lc-price-value {
    font-family: var(--lc-font-display);
    font-size: 1.9rem;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* ── Right options column ─────────────────────────────────────────────────── */
.lc-options {
    background: var(--lc-surface);
    border-left: 1px solid var(--lc-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;       /* fills the grid row */
}

/* Header — fixed size */
.lc-options-header {
    padding: 20px 28px 14px;
    border-bottom: 1px solid var(--lc-border);
    flex-shrink: 0;
}

.lc-heading {
    font-family: var(--lc-font-display);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0 0 3px;
    line-height: 1.1;
}

.lc-subheading {
    font-size: 0.61rem;
    font-weight: 300;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--lc-text-muted);
    margin: 0;
}

/* Four sections — share the remaining height equally */
.lc-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 28px;
    border-bottom: 1px solid var(--lc-border);
}

.lc-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.60rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin: 0 0 9px;
    flex-shrink: 0;
}

.lc-step {
    font-family: var(--lc-font-display);
    font-size: 0.76rem;
    font-weight: 300;
    color: var(--lc-step-color);
}

.lc-selected-label {
    margin-left: auto;
    font-family: var(--lc-font-display);
    font-size: 0.92rem;
    font-style: italic;
    font-weight: 400;
    color: var(--lc-accent);
    letter-spacing: 0;
    text-transform: none;
}

/* ── Part swatches ────────────────────────────────────────────────────────── */
.lc-swatches { display: flex; flex-wrap: wrap; gap: 8px; }

.lc-swatch {
    width: 68px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-align: center;
    transition: transform var(--lc-transition);
}

.lc-swatch:hover { transform: translateY(-2px); }

.lc-swatch-img-wrap {
    width: 68px;
    height: 68px;
    border-radius: var(--lc-radius-sm);
    border: 2px solid transparent;
    background: var(--lc-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--lc-transition), box-shadow var(--lc-transition);
}

.lc-swatch-img-wrap img { width:100%; height:100%; object-fit:contain; padding:3px; }

.lc-swatch--active .lc-swatch-img-wrap {
    border-color: var(--lc-border-sel);
    box-shadow: 0 0 0 1px var(--lc-border-sel);
}

.lc-swatch-name {
    display: block;
    margin-top: 4px;
    font-size: 0.55rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--lc-text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-swatch--active .lc-swatch-name { color: var(--lc-text); font-weight: 500; }

/* ── Colour dots ──────────────────────────────────────────────────────────── */
.lc-colors { display: flex; flex-wrap: wrap; gap: 9px; }

.lc-color-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    outline: none;
    position: relative;
    transition: transform var(--lc-transition), border-color var(--lc-transition), box-shadow var(--lc-transition);
}

.lc-color-dot:hover { transform: scale(1.1); }

.lc-color-dot--active {
    border-color: var(--lc-border-sel);
    box-shadow: 0 0 0 3px var(--lc-surface), 0 0 0 5px var(--lc-border-sel);
    transform: scale(1.05);
}

.lc-color-dot::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--lc-text);
    color: #fff;
    font-size: 0.54rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 3px 7px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.lc-color-dot:hover::after { opacity: 1; }

/* ── CTA row ──────────────────────────────────────────────────────────────── */
.lc-cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px 8px;
    flex-shrink: 0;
}

.lc-qty-control {
    display: flex;
    align-items: center;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.lc-qty-btn {
    width: 34px;
    height: 40px;
    border: none;
    background: var(--lc-bg);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 300;
    color: var(--lc-text);
    font-family: var(--lc-font-body);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--lc-transition);
}

.lc-qty-btn:hover { background: var(--lc-border); }

.lc-qty-value {
    min-width: 32px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 500;
}

.lc-add-to-cart {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    background: var(--lc-text);
    color: #fff;
    border: none;
    border-radius: var(--lc-radius-sm);
    cursor: pointer;
    font-family: var(--lc-font-body);
    font-size: 0.67rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition: background var(--lc-transition), transform 0.1s ease;
}

.lc-add-to-cart:hover  { background: var(--lc-accent); transform: translateY(-1px); }
.lc-add-to-cart:active { transform: translateY(0); }
.lc-add-to-cart.lc-loading { opacity: 0.7; pointer-events: none; }
.lc-add-to-cart.lc-success  { background: #2A6E3F; }

/* ── Notice ───────────────────────────────────────────────────────────────── */
.lc-notice {
    margin: 0 28px 4px;
    padding: 7px 12px;
    border-radius: var(--lc-radius-sm);
    font-size: 0.69rem;
    opacity: 0;
    transition: opacity var(--lc-transition);
    flex-shrink: 0;
}

.lc-notice.lc-notice--visible { opacity: 1; }
.lc-notice--error   { background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; }
.lc-notice--success { background:#F0FDF4; border:1px solid #BBF7D0; color:#166534; }
.lc-notice--info    { background:#FFFBEB; border:1px solid #FDE68A; color:#92400E; }

/* ── Cart bar (bottom of right column) ───────────────────────────────────── */
.lc-cart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 28px 14px;
    border-top: 1px solid var(--lc-border);
    flex-shrink: 0;
}

.lc-cart-bar-label {
    font-size: 0.60rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--lc-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.lc-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--lc-text);
    color: #fff;
    font-size: 0.59rem;
    font-weight: 600;
    transition: transform 0.2s ease;
}

.lc-cart-count.lc-bump { transform: scale(1.4); }

.lc-view-cart-btn {
    font-family: var(--lc-font-body);
    font-size: 0.60rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lc-text-muted);
    text-decoration: none;
    transition: color var(--lc-transition);
    display: none;
}

.lc-view-cart-btn.lc-visible { display: inline; }
.lc-view-cart-btn:hover { color: var(--lc-accent); }

/* ── Entrance animation ───────────────────────────────────────────────────── */
.lc-visual, .lc-options { animation: lc-in 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.lc-options { animation-delay: 0.07s; }

@keyframes lc-in {
    from { opacity:0; transform:translateY(7px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
    .lc-wrap {
        grid-template-columns: 1fr;
        grid-template-areas: "visual" "options";
        height: auto;
    }
    .lc-visual { height: auto; min-height: 50vw; }
    .lc-image-stage { padding: 20px; padding-bottom: 120px; } /* room for 2 stacked buttons */
    .lc-img-box { height: auto; width: min(100%, 400px); }
    .lc-options { height: auto; overflow: visible; }
    .lc-section { flex: none; padding-top: 14px; padding-bottom: 14px; }

    /* Vertical stack — toggle on bottom, Surprise Me above it.
       Both centred so they never clip on any phone width. */
    .lc-time-toggle {
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
    }
    .lc-random-btn {
        /* Sits directly above the toggle (toggle ≈ 36px tall + 16px gap) */
        bottom: 68px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    .lc-random-btn:hover {
        transform: translateX(-50%) translateY(-1px);
    }
}