:root {
    /* ── Biophilic Minimalism tokens (DESIGN.md) ── */
    --bcmy-paper: #FAF8F4;            /* warm off-white page bg */
    --bcmy-paper-raised: #FFFFFF;     /* cards, inputs, elevated */
    --bcmy-ink: #2B2723;              /* primary text */
    --bcmy-ink-soft: #6B6259;         /* secondary text, placeholders */
    --bcmy-line: #E5DFD4;             /* borders, dividers */
    --bcmy-wood-light: #E8DCC8;       /* section fills, card bg */
    --bcmy-wood: #C9B391;             /* secondary accents, hovers */
    --bcmy-wood-deep: #8A7355;        /* active states, strong accents */
    --bcmy-wood-ink: #5C4A33;         /* text on wood */
    --bcmy-terracotta: #C4673D;       /* primary CTA */
    --bcmy-terracotta-hover: #A8532F; /* CTA hover */
    --bcmy-terracotta-tint: #F3E2D7;  /* soft fills, selected */
    --bcmy-leaf: #0A8200;             /* plant/status accents */
    --bcmy-leaf-deep: #005B03;        /* deep foliage */
    --bcmy-leaf-tint: #E4EBDD;        /* plant-tinted backgrounds */
    --bcmy-success: #0A8200;          /* success/active (leaf) */
    --bcmy-error: #C4673D;            /* errors (terracotta, soft) */
    --bcmy-error-tint: #F3E2D7;
    --bcmy-focus: #C4673D;            /* focus ring (terracotta) */
    --bcmy-radius-btn: 6px;
    --bcmy-radius-card: 8px;
    --bcmy-radius-input: 6px;
    --bcmy-radius-small: 4px;
    --bcmy-radius-pill: 2px;
}

/* ── Designer Layout ──────────────────────────────────────────── */
/* Brand: BCMY Biophilic Minimalism (see DESIGN.md) — old sage var(--bcmy-wood-deep) retired. */
/* Base: system-ui for readability, consistent with theme's font fallback */


.bcmy-designer {
    max-width: 1080px;
    margin: 0 auto;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.bcmy-designer-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.bcmy-designer-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bcmy-designer-sidebar {
    flex: 0 0 auto;
    width: 280px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    position: sticky;
    top: 20px;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--bcmy-line) transparent;
    background: #FAF8F4;
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    padding: 18px;
}

.bcmy-designer-sidebar::-webkit-scrollbar {
    width: 6px;
}

.bcmy-designer-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.bcmy-designer-sidebar::-webkit-scrollbar-thumb {
    background: var(--bcmy-line);
    border-radius: var(--bcmy-radius-pill);
}

.bcmy-designer-sidebar h3 {
    margin: 0 0 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--bcmy-ink-soft);
    letter-spacing: -0.01em;
}

/* ── Sidebar Tabs (Appearance / Text) ──────────────────────────── */
.bcmy-sidebar-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: transparent;
    padding: 3px;
}

.bcmy-sidebar-tab {
    flex: 1;
    padding: 9px 0;
    border: none;
    background: var(--bcmy-wood);
    font-size: 13px;
    font-weight: 500;
    color: #FAF8F4;
    cursor: pointer;
    border-radius: var(--bcmy-radius-pill);
    transition: background 150ms ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bcmy-sidebar-tab--active {
    background: var(--bcmy-wood-deep);
    color: #FAF8F4;
    font-weight: 600;
}

.bcmy-sidebar-tab:hover:not(.bcmy-sidebar-tab--active) {
    background: var(--bcmy-wood-deep);
}

/* ── Canvas Container ─────────────────────────────────────────── */
.bcmy-designer-canvas-container {
    position: relative;
    overflow: hidden;
    border: 0px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    background: var(--bcmy-paper-raised);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 200ms ease;
}

.bcmy-designer-canvas-container:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ── Canvas Zoom ─────────────────────────────────────────────── */
.bcmy-canvas-zoom {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--bcmy-ink-soft);
    padding: 8px 12px;
    background: var(--bcmy-paper);
    border-radius: var(--bcmy-radius-input);
}

.bcmy-canvas-zoom label {
    font-weight: 600;
    white-space: nowrap;
    font-size: 12px;
}

.bcmy-canvas-zoom input[type="range"] {
    flex: 1;
    max-width: 180px;
    accent-color: var(--bcmy-wood-deep);
}

.bcmy-canvas-zoom small {
    font-size: 11px;
    color: var(--bcmy-ink-soft);
}

#bcmy-designer-preview-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
}

#bcmy-designer-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}

/* ── Actions ──────────────────────────────────────────────────── */
.bcmy-designer-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.bcmy-btn {
    padding: 10px 22px;
    border: none;
    border-radius: var(--bcmy-radius-card);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 180ms ease, opacity 180ms ease, transform 100ms ease, box-shadow 180ms ease;
    white-space: nowrap;
}

.bcmy-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.bcmy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bcmy-btn-primary {
    background: var(--bcmy-terracotta);
    color: #fff;
    box-shadow: 0 1px 2px rgba(196, 103, 61, 0.2);
}

.bcmy-btn-primary:hover:not(:disabled) {
    background: var(--bcmy-terracotta-hover);
    box-shadow: 0 2px 8px rgba(196, 103, 61, 0.3);
}

.bcmy-btn-secondary {
    background: var(--bcmy-paper);
    color: var(--bcmy-ink-soft);
    border: 1px solid var(--bcmy-line);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.bcmy-btn-secondary:hover:not(:disabled) {
    background: var(--bcmy-paper);
    border-color: var(--bcmy-ink-soft);
}

.bcmy-btn-cart {
    background: var(--bcmy-wood-ink);
    color: #fff;
    box-shadow: 0 1px 2px rgba(98, 115, 76, 0.2);
}

.bcmy-btn-cart:hover:not(:disabled) {
    background: var(--bcmy-ink);
    box-shadow: 0 2px 8px rgba(98, 115, 76, 0.3);
}

/* ── Zone Inputs ──────────────────────────────────────────────── */
.bcmy-zone-field {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bcmy-paper);
}

.bcmy-zone-field:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.bcmy-zone-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bcmy-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bcmy-zone-label .bcmy-required-star {
    color: var(--bcmy-error);
    margin-left: 2px;
}

.bcmy-zone-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
    box-sizing: border-box;
    color: var(--bcmy-ink);
}

.bcmy-zone-input:focus {
    outline: none;
    border-color: var(--bcmy-wood-deep);
    box-shadow: 0 0 0 3px rgba(138, 115, 85, 0.18);
    background: var(--bcmy-paper-raised);
}

.bcmy-zone-input--changed {
    border-color: var(--bcmy-wood-ink);
    background: var(--bcmy-wood-light);
}

/* ── Image Dropzone ───────────────────────────────────────────── */
.bcmy-image-dropzone {
    position: relative;
    border: 2px dashed var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
    background: var(--bcmy-wood-light);
}

.bcmy-image-dropzone:hover,
.bcmy-image-dropzone.bcmy-dragover {
    border-color: var(--bcmy-wood-deep);
    background: var(--bcmy-wood-light);
    box-shadow: 0 0 0 4px rgba(138, 115, 85, 0.08);
}

.bcmy-image-dropzone.bcmy-has-image {
    border-style: solid;
    border-color: var(--bcmy-wood-deep);
    background: var(--bcmy-paper);
    padding: 0;
    cursor: default;
    border-radius: var(--bcmy-radius-card);
    overflow: hidden;
}

.bcmy-dropzone-icon {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    background: var(--bcmy-line);
    border-radius: 50%;
    position: relative;
    transition: background-color 180ms ease;
}

.bcmy-image-dropzone:hover .bcmy-dropzone-icon {
    background: var(--bcmy-terracotta);
}

.bcmy-dropzone-icon::before {
    content: "+";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    font-weight: 300;
    color: var(--bcmy-ink-soft);
    line-height: 1;
}

.bcmy-image-dropzone:hover .bcmy-dropzone-icon::before {
    color: #fff;
}

.bcmy-dropzone-text {
    font-size: 13px;
    color: var(--bcmy-ink-soft);
    margin: 0;
    font-weight: 500;
}

.bcmy-dropzone-hint {
    font-size: 11px;
    color: var(--bcmy-ink-soft);
    margin: 4px 0 0 0;
}

.bcmy-uploaded-preview {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--bcmy-radius-input);
}

.bcmy-image-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 14px;
    line-height: 26px;
    cursor: pointer;
    padding: 0;
    text-align: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color 150ms ease, transform 100ms ease;
}

.bcmy-image-remove-btn:hover {
    background: rgba(220, 38, 38, 0.85);
    transform: scale(1.1);
}

.bcmy-image-dropzone input[type="file"] {
    display: none;
}

/* ── Template Picker ──────────────────────────────────────────── */
.bcmy-template-picker {
    max-width: 1080px;
    margin: 0 auto;
}

.bcmy-template-picker h2 {
    margin: 0 0 16px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--bcmy-ink);
    letter-spacing: -0.02em;
}

.bcmy-template-search {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.bcmy-template-search input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    font-size: 14px;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.bcmy-template-search input:focus {
    outline: none;
    border-color: var(--bcmy-wood-deep);
    box-shadow: 0 0 0 3px rgba(138, 115, 85, 0.15);
}

.bcmy-template-search select {
    padding: 10px 14px;
    border: 1.5px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    font-size: 14px;
    background: var(--bcmy-paper-raised);
    cursor: pointer;
    transition: border-color 180ms ease;
}

.bcmy-template-search select:focus {
    outline: none;
    border-color: var(--bcmy-wood-deep);
}

/* Orientation pills — one orientation per view, no mixed-orientation lists. */
.bcmy-orientation-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.bcmy-orientation-tab {
    padding: 8px 18px;
    border: 1.5px solid var(--bcmy-line);
    border-radius: 999px;
    background: var(--bcmy-paper-raised);
    font-size: 13px;
    font-weight: 600;
    color: var(--bcmy-ink);
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.bcmy-orientation-tab:hover {
    border-color: var(--bcmy-wood-deep);
}

.bcmy-orientation-tab.is-active {
    background: var(--bcmy-wood-deep);
    border-color: var(--bcmy-wood-deep);
    color: #fff;
}

.bcmy-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* Fixed column count per orientation: 3 per row for landscape (3×4 rows),
   4 per row for portrait/square (4×3 rows) — 12 templates per page. */
.bcmy-template-grid.bcmy-grid-landscape {
    grid-template-columns: repeat(3, 1fr);
}

.bcmy-template-grid.bcmy-grid-portrait,
.bcmy-template-grid.bcmy-grid-square {
    grid-template-columns: repeat(4, 1fr);
}

/* ── Product picker grid (Path-3) ────────────────────────────────
   Matches the YOOtheme shop/category card grid (e.g. /by-paper-material/):
   square image, clean join side-by-side (no card border), minimalist title
   + price. Products render server-side via designerProducts() and a new
   product auto-appears once a compatible template is assigned. */
.bcmy-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
/* Higher specificity than .bcmy-template-card so the picker cards drop the
   base card border/radius/background (by-paper-material has none). */
.bcmy-product-grid .bcmy-product-card {
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    transition: none;
    transform: none;
}
.bcmy-product-grid .bcmy-product-card:hover {
    border-color: transparent;
    box-shadow: none;
    transform: none;
}
.bcmy-product-grid .bcmy-product-card .bcmy-template-card-img {
    aspect-ratio: 1 / 1;
    border-radius: 0;
    display: block;
}
.bcmy-product-grid .bcmy-product-card .bcmy-template-card-body {
    padding: 15px 0 0;
    background: transparent;
}
.bcmy-product-grid .bcmy-product-card .bcmy-template-card-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--bcmy-ink);
    margin: 0 0 2px;
}
.bcmy-product-grid .bcmy-product-card .bcmy-product-card-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--bcmy-wood-deep);
    margin: 0;
}
@media (max-width: 992px) {
    .bcmy-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .bcmy-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .bcmy-product-grid {
        grid-template-columns: 1fr;
    }
}

.bcmy-template-card {
    border: 2px solid var(--bcmy-line);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 150ms ease;
    background: var(--bcmy-paper-raised);
}

.bcmy-template-card:hover {
    border-color: var(--bcmy-wood-deep);
    box-shadow: 0 4px 16px rgba(138, 115, 85, 0.15);
    transform: translateY(-3px);
}

.bcmy-template-card.bcmy-selected {
    border-color: var(--bcmy-wood-ink);
    box-shadow: 0 0 0 3px rgba(98, 115, 76, 0.2);
}

.bcmy-template-card-img {
    width: 100%;
    aspect-ratio: 89 / 51;
    object-fit: cover;
    display: block;
    background: var(--bcmy-paper);
}

/* Orientation-aware thumbnails: the card stays the same width, but portrait
   and square templates keep their own aspect ratio so the full design is
   visible instead of being cropped into the landscape box. */
.bcmy-template-card.bcmy-card-portrait .bcmy-template-card-img {
    aspect-ratio: 54 / 89;
}

.bcmy-template-card.bcmy-card-square .bcmy-template-card-img {
    aspect-ratio: 1 / 1;
}

.bcmy-template-card-body {
    padding: 12px 14px;
    background: var(--bcmy-paper);
}

.bcmy-template-card-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--bcmy-ink);
}

.bcmy-template-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.bcmy-template-card-tag {
    font-size: 11px;
    padding: 3px 8px;
    background: var(--bcmy-wood-light);
    color: var(--bcmy-wood-ink);
    border-radius: var(--bcmy-radius-small);
    font-weight: 500;
}

.bcmy-template-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.bcmy-template-pagination button {
    padding: 8px 14px;
    border: 1.5px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    background: var(--bcmy-paper-raised);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.bcmy-template-pagination button:hover:not(:disabled) {
    border-color: var(--bcmy-wood-deep);
    color: var(--bcmy-wood-deep);
    background: var(--bcmy-wood-light);
}

.bcmy-template-pagination button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.bcmy-template-pagination .bcmy-pagination-current {
    padding: 8px 14px;
    font-weight: 700;
    color: var(--bcmy-wood-deep);
}

/* ── Loading & Messages ───────────────────────────────────────── */
.bcmy-loading {
    text-align: center;
    padding: 48px 24px;
    color: var(--bcmy-ink-soft);
    grid-column: 1 / -1;
    font-size: 14px;
}

.bcmy-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--bcmy-ink-soft);
    grid-column: 1 / -1;
    font-size: 14px;
}

.bcmy-notice {
    padding: 12px 16px;
    border-radius: var(--bcmy-radius-card);
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.5;
    animation: bcmy-slideDown 200ms ease;
}

@keyframes bcmy-slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.bcmy-notice--success {
    background: var(--bcmy-wood-light);
    color: var(--bcmy-leaf-deep);
    border: 1px solid var(--bcmy-leaf);
}

.bcmy-notice--error {
    background: var(--bcmy-error-tint);
    color: var(--bcmy-terracotta-hover);
    border: 1px solid var(--bcmy-error-tint);
}

.bcmy-designer-sidebar .bcmy-notice {
    position: sticky;
    top: 0;
    z-index: 10;
}

.bcmy-zone-error {
    border-color: var(--bcmy-error) !important;
    background: var(--bcmy-error-tint) !important;
    animation: bcmy-shake 300ms ease;
}

@keyframes bcmy-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.bcmy-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--bcmy-line);
    border-top-color: var(--bcmy-wood-deep);
    border-radius: 50%;
    animation: bcmy-spin 0.6s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

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

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .bcmy-designer-layout {
        flex-direction: column;
    }

    .bcmy-designer-sidebar {
        width: 100%;
    }

    .bcmy-template-grid,
    .bcmy-template-grid.bcmy-grid-landscape,
    .bcmy-template-grid.bcmy-grid-portrait,
    .bcmy-template-grid.bcmy-grid-square {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .bcmy-designer-actions {
        flex-direction: column;
    }

    .bcmy-btn {
        width: 100%;
        text-align: center;
    }
}

/* ── Background Color Picker ──────────────────────────────────── */
.bcmy-bg-color-section {
    border-bottom: none !important;
}

.bcmy-bg-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}

.bcmy-bg-cat-tab {
    padding: 5px 12px;
    border: 1.5px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-input);
    background: var(--bcmy-paper-raised);
    font-size: 11px;
    font-weight: 600;
    color: var(--bcmy-ink-soft);
    cursor: pointer;
    transition: all 180ms ease;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bcmy-bg-cat-tab:hover {
    border-color: var(--bcmy-wood-deep);
    color: var(--bcmy-wood-deep);
    background: var(--bcmy-wood-light);
}

.bcmy-bg-cat-tab.active {
    background: var(--bcmy-terracotta);
    color: #fff;
    border-color: var(--bcmy-wood-deep);
}

/* ── Collapsible Sections ─────────────────────────────────────── */
.bcmy-collapsible-section {
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    margin-bottom: 8px;
    overflow: hidden;
}
.bcmy-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bcmy-wood-light);
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--bcmy-wood-ink);
    border-bottom: 1px solid transparent;
    transition: background 150ms ease;
}
.bcmy-collapsible-header:hover { background: var(--bcmy-wood); }
.bcmy-collapsible-header.bcmy-expanded { border-bottom-color: var(--bcmy-line); }
.bcmy-collapsible-arrow {
    font-size: 10px;
    transition: transform 200ms ease;
    display: inline-block;
}
.bcmy-collapsible-header.bcmy-expanded .bcmy-collapsible-arrow {
    transform: rotate(90deg);
}
.bcmy-collapsible-body {
    display: none;
    padding: 10px 12px;
    background: var(--bcmy-paper-raised);
}
.bcmy-collapsible-body.bcmy-expanded { display: block; }

/* ── Swatch Grid Module ───────────────────────────────────────── */
.bcmy-swatch-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
}
.bcmy-swatch {
    aspect-ratio: 1;
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-small);
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    transition: border-color 150ms ease, transform 100ms ease;
}
.bcmy-swatch:hover { border-color: var(--bcmy-wood); transform: scale(1.08); }
.bcmy-swatch--active {
    border-color: var(--bcmy-terracotta) !important;
    border-width: 2px !important;
}
.bcmy-swatch-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    text-shadow: 0 0 3px rgba(0,0,0,.6);
    pointer-events: none;
}
.bcmy-cat-dropdown {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-input);
    font-size: 11px;
    margin-bottom: 6px;
}
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bcmy-bg-swatch {
    border-radius: var(--bcmy-radius-small);
    border: 1px solid var(--bcmy-line);
    cursor: pointer;
    transition: border-color 180ms ease, transform 120ms ease, box-shadow 180ms ease;
    box-sizing: border-box;
    display: block;
}

.bcmy-bg-swatch:hover {
    border-color: var(--bcmy-wood-deep);
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bcmy-bg-swatch--selected {
    border-color: var(--bcmy-terracotta) !important;
    border-width: 2px !important;
}

.bcmy-bg-swatch--none {
    background: repeating-linear-gradient(45deg, transparent, transparent 3px, var(--bcmy-line) 3px, var(--bcmy-line) 5px);
    border-radius: var(--bcmy-radius-card);
}

/* ── Font Select ──────────────────────────────────────────────── */
.bcmy-font-select,
#bcmy-global-font-select {
    margin-top: 6px;
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    font-size: 13px;
    background: var(--bcmy-paper-raised);
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.bcmy-font-select:focus,
#bcmy-global-font-select:focus {
    outline: none;
    border-color: var(--bcmy-wood-deep) !important;
    box-shadow: 0 0 0 3px rgba(138, 115, 85, 0.15);
}

/* ── Font Mode Radio ──────────────────────────────────────────── */
.bcmy-font-mode-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--bcmy-ink-soft);
    cursor: pointer;
    margin-bottom: 4px;
}

.bcmy-font-mode-label input[type="radio"] {
    accent-color: var(--bcmy-wood-deep);
    margin: 0;
}

/* ── Background Grid (Gradients & Patterns) ───────────────────── */
.bcmy-bg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.bcmy-bg-grid-item {
    position: relative;
    border: 2px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1.75;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.bcmy-bg-grid-item:hover {
    border-color: var(--bcmy-wood);
}

.bcmy-bg-grid-item--selected {
    border-color: var(--bcmy-wood-deep);
    box-shadow: 0 0 0 2px rgba(196, 103, 61, 0.2);
}

.bcmy-bg-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bcmy-bg-rotate-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: var(--bcmy-radius-input);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 14px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 180ms ease, background-color 150ms ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.bcmy-bg-grid-item:hover .bcmy-bg-rotate-btn {
    opacity: 1;
}

.bcmy-bg-rotate-btn:hover {
    background: rgba(98, 115, 76, 0.85);
}

/* ── Logo Scale Slider ────────────────────────────────────────── */
.bcmy-logo-scale input[type="range"] {
    -webkit-appearance: none;
    height: 4px;
    border-radius: var(--bcmy-radius-pill);
    background: var(--bcmy-line);
}
.bcmy-logo-scale input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: var(--bcmy-radius-card);
    background: var(--bcmy-terracotta);
    cursor: pointer;
    transition: transform 100ms ease;
}
.bcmy-logo-scale input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* ── Side Tabs (Front | Back) ──────────────────────────────────── */
.bcmy-side-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--bcmy-line);
}

.bcmy-side-tab {
    padding: 9px 22px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--bcmy-ink-soft);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 180ms ease, border-color 180ms ease;
    letter-spacing: -0.01em;
}

.bcmy-side-tab:hover {
    color: var(--bcmy-ink-soft);
}

.bcmy-side-tab--active {
    color: var(--bcmy-wood-deep);
    border-bottom-color: var(--bcmy-wood-deep);
}

/* ── Step Indicators ──────────────────────────────────────────── */
.bcmy-picker-steps {
    display: flex;
    gap: 0;
    align-items: center;
    margin-bottom: 28px;
    padding: 16px 20px;
    background: var(--bcmy-paper);
    border-radius: 12px;
    border: 1px solid var(--bcmy-paper);
}

.bcmy-picker-step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bcmy-ink-soft);
    transition: color 200ms ease;
}

.bcmy-picker-step-num {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--bcmy-line);
    color: var(--bcmy-ink-soft);
    flex-shrink: 0;
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.bcmy-picker-step-indicator--active {
    color: var(--bcmy-ink-soft);
}

.bcmy-picker-step-indicator--active .bcmy-picker-step-num {
    background: var(--bcmy-terracotta);
    color: #fff;
    box-shadow: 0 2px 8px rgba(196, 103, 61, 0.3);
}

.bcmy-picker-step-indicator--done {
    color: var(--bcmy-wood-ink);
}

.bcmy-picker-step-indicator--done .bcmy-picker-step-num {
    background: var(--bcmy-wood-ink);
    color: #fff;
}

.bcmy-picker-step-arrow {
    font-size: 18px;
    color: var(--bcmy-line);
    margin: 0 14px;
    font-weight: 300;
}

/* ── Back / Skip Buttons ──────────────────────────────────────── */
.bcmy-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 9px 16px;
    background: var(--bcmy-paper);
    border: 1.5px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    font-size: 13px;
    font-weight: 600;
    color: var(--bcmy-ink-soft);
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.bcmy-back-btn:hover {
    background: var(--bcmy-paper);
    border-color: var(--bcmy-ink-soft);
    color: var(--bcmy-ink);
}

.bcmy-skip-back-btn {
    display: block;
    margin-top: 24px;
    padding: 14px 20px;
    background: none;
    border: 2px dashed var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    font-size: 14px;
    font-weight: 600;
    color: var(--bcmy-ink-soft);
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.bcmy-skip-back-btn:hover {
    border-color: var(--bcmy-wood-deep);
    color: var(--bcmy-wood-deep);
    background: var(--bcmy-wood-light);
}

/* ── Mobile Fallback ──────────────────────────────────────────── */
.bcmy-mobile-warning {
    display: none;
    text-align: center;
    padding: 80px 32px;
    max-width: 440px;
    margin: 0 auto;
}

.bcmy-mobile-warning h2 {
    font-size: 20px;
    margin-bottom: 12px;
    color: var(--bcmy-ink);
    font-weight: 700;
}

.bcmy-mobile-warning p {
    color: var(--bcmy-ink-soft);
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .bcmy-designer-layout {
        display: none !important;
    }
    .bcmy-mobile-warning {
        display: block;
    }
}

/* ── Name sections (Company Info / Personal Info) ──────────────── */
#bcmy-name-sections {
    margin-bottom: 12px;
}

#bcmy-add-more-names {
    width: 100%;
    margin-top: 12px;
}

/* ── Page wrapper: compact title + tighter top for the designer page ── */
/* The designer shortcode lives inside the YOOtheme article; scope the page
   chrome so "Design Your Card" renders smaller and sits closer to the top,
   matching the design mockup (smaller title, less top padding). */
article:has(.bcmy-designer) .uk-article-title,
article:has(.bcmy-designer) h1.uk-article-title,
article:has(.bcmy-designer) .uk-article > h1 {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.3;
}

article:has(.bcmy-designer) .uk-margin-medium,
article:has(.bcmy-designer) > .uk-container > .uk-margin-medium,
article:has(.bcmy-designer) .uk-article > .uk-margin-medium {
    margin-top: 8px !important;
}

/* The designer layout itself gets a smaller top gap to the title */
.bcmy-designer {
    padding-top: 4px;
}


/* ── My Designs + Design Names (account pages) ── */
/* Scoped under body.woocommerce-account: beats the pages' inline <style>
   blocks (bare class selectors) by specificity, and avoids clobbering the
   designer page or any other page that reuses these class names. */

/* Box-model reset within the two account pages */
body.woocommerce-account .bcmy-my-designs *,
body.woocommerce-account .bcmy-name-list *,
body.woocommerce-account .bcmy-order-mode * {
    box-sizing: border-box;
}

/* ── Shared button family (account-page sizes + Biophilic colors) ── */
body.woocommerce-account .bcmy-btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--bcmy-radius-btn);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
body.woocommerce-account .bcmy-btn:focus-visible {
    outline: 2px solid var(--bcmy-terracotta);
    outline-offset: 2px;
}
body.woocommerce-account .bcmy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
body.woocommerce-account .bcmy-btn-primary {
    background: var(--bcmy-terracotta);
    color: #fff;
    border-color: var(--bcmy-terracotta);
}
body.woocommerce-account .bcmy-btn-primary:hover:not(:disabled) {
    background: var(--bcmy-terracotta-hover);
    border-color: var(--bcmy-terracotta-hover);
}
body.woocommerce-account .bcmy-btn-secondary {
    background: var(--bcmy-paper-raised);
    color: var(--bcmy-wood-deep);
    border-color: var(--bcmy-wood-deep);
}
body.woocommerce-account .bcmy-btn-secondary:hover:not(:disabled) {
    background: var(--bcmy-wood-light);
    border-color: var(--bcmy-wood-deep);
    color: var(--bcmy-wood-deep);
}
body.woocommerce-account .bcmy-btn-danger {
    background: var(--bcmy-terracotta-tint);
    color: var(--bcmy-terracotta-hover);
    border-color: var(--bcmy-terracotta-tint);
}
body.woocommerce-account .bcmy-btn-danger:hover:not(:disabled) {
    background: var(--bcmy-terracotta-tint);
    border-color: var(--bcmy-terracotta);
    color: var(--bcmy-terracotta-hover);
}

/* ── My Designs page ──────────────────────────────────────────── */
body.woocommerce-account .bcmy-my-designs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    max-width: 1080px;
    margin: 0 auto;
}

body.woocommerce-account .bcmy-my-designs-note {
    grid-column: 1 / -1;
    padding: 12px 16px;
    margin-bottom: 0;
    background: var(--bcmy-wood-light);
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    font-size: 13px;
    line-height: 1.6;
    color: var(--bcmy-wood-ink);
}
body.woocommerce-account .bcmy-my-designs-note a {
    color: var(--bcmy-terracotta);
    font-weight: 600;
}

body.woocommerce-account .bcmy-my-design-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    background: var(--bcmy-paper-raised);
    align-items: stretch;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
body.woocommerce-account .bcmy-my-design-card:hover {
    border-color: var(--bcmy-wood);
    box-shadow: 0 4px 12px rgba(138, 115, 85, 0.12);
}
/* Featured (main template) card */
body.woocommerce-account .bcmy-my-design-card:has(.bcmy-star-badge) {
    background: var(--bcmy-wood-light);
    border-color: var(--bcmy-wood);
}

body.woocommerce-account .bcmy-design-thumb {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-small);
    background: var(--bcmy-paper);
}
body.woocommerce-account .bcmy-design-thumb-placeholder {
    width: 100%;
    aspect-ratio: 160 / 92;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bcmy-paper);
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-small);
    font-size: 12px;
    color: var(--bcmy-ink-soft);
}

body.woocommerce-account .bcmy-design-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

body.woocommerce-account .bcmy-design-label {
    font-weight: 600;
    font-size: 15px;
    color: var(--bcmy-ink);
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    padding: 2px 0;
    word-break: break-word;
}
body.woocommerce-account .bcmy-design-label:hover {
    border-bottom-color: var(--bcmy-terracotta);
    color: var(--bcmy-terracotta);
}

body.woocommerce-account .bcmy-design-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--bcmy-ink-soft);
}

body.woocommerce-account .bcmy-design-status {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: var(--bcmy-radius-pill);
}
body.woocommerce-account .bcmy-status-draft {
    background: var(--bcmy-paper);
    color: var(--bcmy-ink-soft);
    border: 1px solid var(--bcmy-line);
}
body.woocommerce-account .bcmy-status-ordered {
    background: var(--bcmy-leaf-tint);
    color: var(--bcmy-leaf-deep);
}

body.woocommerce-account .bcmy-star-badge {
    background: var(--bcmy-terracotta-tint);
    color: var(--bcmy-terracotta);
    font-weight: 600;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--bcmy-radius-pill);
}

body.woocommerce-account .bcmy-design-group-count {
    background: var(--bcmy-wood-light);
    color: var(--bcmy-wood-ink);
    font-weight: 500;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--bcmy-radius-pill);
}

body.woocommerce-account .bcmy-design-date {
    margin-left: auto;
    color: var(--bcmy-ink-soft);
}

body.woocommerce-account .bcmy-design-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

body.woocommerce-account .bcmy-star-btn {
    background: var(--bcmy-paper);
    color: var(--bcmy-wood-ink);
    border-color: var(--bcmy-line);
}
body.woocommerce-account .bcmy-star-btn:hover:not(:disabled) {
    background: var(--bcmy-wood-light);
    border-color: var(--bcmy-wood);
    color: var(--bcmy-wood-ink);
}
body.woocommerce-account .bcmy-star-btn.bcmy-star-active {
    background: var(--bcmy-terracotta-tint);
    color: var(--bcmy-terracotta);
    border-color: var(--bcmy-terracotta);
}

body.woocommerce-account .bcmy-design-proofs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}
body.woocommerce-account .bcmy-design-proof-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--bcmy-wood-deep);
    text-decoration: underline;
}
body.woocommerce-account .bcmy-design-proof-link:hover {
    color: var(--bcmy-terracotta);
}

/* ── Design Names page — directory state ─────────────────────── */
body.woocommerce-account .bcmy-name-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 900px;
}

body.woocommerce-account .bcmy-name-list-intro {
    margin: 0;
    padding: 14px 16px;
    background: var(--bcmy-paper);
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    color: var(--bcmy-ink-soft);
    font-size: 14px;
    line-height: 1.6;
}

/* Star prompt (directory onboarding) */
body.woocommerce-account .bcmy-star-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bcmy-wood-light);
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
}
body.woocommerce-account .bcmy-star-prompt p {
    margin: 0;
    color: var(--bcmy-wood-ink);
    font-size: 14px;
}

body.woocommerce-account .bcmy-name-form {
    padding: 16px;
    background: var(--bcmy-paper-raised);
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
}
body.woocommerce-account .bcmy-name-form h3 {
    margin: 0 0 12px;
    font-size: 16px;
    color: var(--bcmy-ink);
}

body.woocommerce-account .bcmy-name-form-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

body.woocommerce-account .bcmy-name-section {
    flex: 1;
    min-width: 220px;
    padding: 12px;
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    background: var(--bcmy-paper);
}
body.woocommerce-account .bcmy-name-section legend {
    padding: 0 4px;
    font-weight: 600;
    font-size: 13px;
    color: var(--bcmy-wood-ink);
}
body.woocommerce-account .bcmy-name-section label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--bcmy-ink-soft);
}
body.woocommerce-account .bcmy-name-section input {
    padding: 8px 10px;
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-input);
    font-size: 14px;
    color: var(--bcmy-ink);
    background: var(--bcmy-paper-raised);
}
body.woocommerce-account .bcmy-name-section input:focus {
    outline: none;
    border-color: var(--bcmy-terracotta);
    box-shadow: 0 0 0 3px var(--bcmy-terracotta-tint);
}

body.woocommerce-account .bcmy-name-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

body.woocommerce-account .bcmy-name-directory {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.woocommerce-account .bcmy-name-empty {
    margin: 0;
    color: var(--bcmy-ink-soft);
    font-size: 14px;
}

body.woocommerce-account .bcmy-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bcmy-paper-raised);
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
}
body.woocommerce-account .bcmy-name-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.woocommerce-account .bcmy-name-row-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--bcmy-ink);
}
body.woocommerce-account .bcmy-name-row-person,
body.woocommerce-account .bcmy-name-row-company {
    font-size: 13px;
    color: var(--bcmy-ink-soft);
    word-break: break-word;
}
body.woocommerce-account .bcmy-name-row-actions {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

/* ── Design Names page — order state ─────────────────────────── */
body.woocommerce-account .bcmy-order-intro {
    margin: 0 0 20px;
    padding: 14px 16px;
    background: var(--bcmy-paper);
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    color: var(--bcmy-ink-soft);
    font-size: 14px;
    line-height: 1.6;
}

body.woocommerce-account .bcmy-order-mode {
    padding: 20px;
    background: var(--bcmy-paper-raised);
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    margin-bottom: 20px;
}

/* Main template collapsible (multi-star) */
body.woocommerce-account .bcmy-main-template-group {
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    margin-bottom: 16px;
    background: var(--bcmy-paper-raised);
    overflow: hidden;
}
body.woocommerce-account .bcmy-main-template-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bcmy-wood-light);
    color: var(--bcmy-wood-ink);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
body.woocommerce-account .bcmy-main-template-summary::-webkit-details-marker {
    display: none;
}
body.woocommerce-account .bcmy-main-template-summary::before {
    content: '▸';
    color: var(--bcmy-wood-deep);
    transition: transform 150ms ease;
}
body.woocommerce-account .bcmy-main-template-group[open] .bcmy-main-template-summary::before {
    transform: rotate(90deg);
}
body.woocommerce-account .bcmy-main-template-title {
    color: var(--bcmy-wood-ink);
    font-size: 15px;
}
body.woocommerce-account .bcmy-main-template-label {
    padding: 2px 6px;
    border-radius: var(--bcmy-radius-small);
    color: var(--bcmy-ink-soft);
    font-size: 13px;
    font-weight: 500;
    cursor: text;
}
body.woocommerce-account .bcmy-main-template-label:hover {
    background: var(--bcmy-paper);
}

/* Order head: "Main template" line (terracotta star) */
body.woocommerce-account .bcmy-order-star-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: var(--bcmy-wood-light);
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    color: var(--bcmy-wood-ink);
    font-size: 14px;
}
body.woocommerce-account .bcmy-order-star-line::before {
    content: '★';
    color: var(--bcmy-terracotta);
    font-size: 15px;
}
body.woocommerce-account .bcmy-order-star-line strong {
    font-weight: 600;
    color: var(--bcmy-wood-ink);
}
body.woocommerce-account .bcmy-order-star-line a {
    margin-left: 4px;
    color: var(--bcmy-terracotta);
    font-weight: 600;
    text-decoration: underline;
}

body.woocommerce-account .bcmy-order-spec {
    margin-bottom: 16px;
}
body.woocommerce-account .bcmy-order-spec h3 {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--bcmy-ink);
}
body.woocommerce-account .bcmy-order-spec-text {
    margin: 8px 0 0;
    padding: 12px 14px;
    background: var(--bcmy-paper);
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    color: var(--bcmy-ink);
}
body.woocommerce-account .bcmy-order-spec-note {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--bcmy-ink-soft);
}

body.woocommerce-account .bcmy-order-names {
    margin-bottom: 16px;
}

body.woocommerce-account .bcmy-order-names-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bcmy-wood-light);
    border: 1px solid var(--bcmy-line);
    border-bottom: none;
    border-radius: var(--bcmy-radius-card) var(--bcmy-radius-card) 0 0;
}
body.woocommerce-account .bcmy-order-names-head h3 {
    margin: 0;
    color: var(--bcmy-wood-ink);
    font-size: 15px;
}
body.woocommerce-account .bcmy-order-add-name {
    background: var(--bcmy-wood-deep);
    color: #fff;
    border-color: var(--bcmy-wood-deep);
}
body.woocommerce-account .bcmy-order-add-name:hover:not(:disabled) {
    background: var(--bcmy-wood-ink);
    border-color: var(--bcmy-wood-ink);
    color: #fff;
}

body.woocommerce-account .bcmy-order-table-scroll {
    overflow-x: auto;
    border: 1px solid var(--bcmy-line);
    border-top: none;
    border-radius: 0 0 var(--bcmy-radius-card) var(--bcmy-radius-card);
}
body.woocommerce-account .bcmy-order-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    background: var(--bcmy-paper-raised);
    font-size: 14px;
}
body.woocommerce-account .bcmy-order-table th,
body.woocommerce-account .bcmy-order-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--bcmy-line);
}
body.woocommerce-account .bcmy-order-table thead th {
    background: var(--bcmy-paper);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bcmy-ink-soft);
}
body.woocommerce-account .bcmy-order-table tbody tr:last-child td {
    border-bottom: none;
}
body.woocommerce-account .bcmy-order-table .bcmy-order-section-head th {
    padding: 8px 12px;
    background: var(--bcmy-wood-light);
    color: var(--bcmy-wood-ink);
    font-size: 13px;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid var(--bcmy-line);
}
body.woocommerce-account .bcmy-order-table .bcmy-order-name-row:hover td {
    background: var(--bcmy-paper);
}

body.woocommerce-account .bcmy-order-name-check-wrap {
    display: inline-flex;
    align-items: center;
}
body.woocommerce-account .bcmy-order-name-check {
    width: 16px;
    height: 16px;
    accent-color: var(--bcmy-terracotta);
    cursor: pointer;
}

body.woocommerce-account .bcmy-order-details-cell {
    vertical-align: top;
}
body.woocommerce-account .bcmy-order-details-name {
    margin-bottom: 2px;
}
body.woocommerce-account .bcmy-order-name-label {
    font-weight: 600;
    color: var(--bcmy-ink);
}
body.woocommerce-account .bcmy-order-name-person {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--bcmy-ink-soft);
    word-break: break-word;
}

body.woocommerce-account .bcmy-order-details-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}
body.woocommerce-account .bcmy-order-qty-label {
    font-size: 13px;
    color: var(--bcmy-ink-soft);
    white-space: nowrap;
}
body.woocommerce-account .bcmy-order-name-qty {
    min-width: 100px;
    padding: 6px 8px;
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-input);
    font-size: 13px;
    background: var(--bcmy-paper-raised);
    color: var(--bcmy-ink);
}
body.woocommerce-account .bcmy-order-name-qty:focus {
    outline: none;
    border-color: var(--bcmy-terracotta);
    box-shadow: 0 0 0 3px var(--bcmy-terracotta-tint);
}

body.woocommerce-account .bcmy-order-preview-btn {
    background: var(--bcmy-paper-raised);
    color: var(--bcmy-wood-deep);
    border-color: var(--bcmy-wood);
    white-space: nowrap;
}
body.woocommerce-account .bcmy-order-preview-btn:hover:not(:disabled) {
    background: var(--bcmy-wood-light);
    border-color: var(--bcmy-wood-deep);
    color: var(--bcmy-wood-deep);
}
body.woocommerce-account .bcmy-order-name-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}
body.woocommerce-account .bcmy-order-name-preview .bcmy-nl-preview-img {
    width: 100%;
    max-width: 360px;
    height: auto;
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-input);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

body.woocommerce-account .bcmy-order-details-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
body.woocommerce-account .bcmy-order-delete-btn {
    background: var(--bcmy-terracotta-tint);
    color: var(--bcmy-terracotta-hover);
    border-color: var(--bcmy-terracotta-tint);
}
body.woocommerce-account .bcmy-order-delete-btn:hover:not(:disabled) {
    background: var(--bcmy-terracotta-tint);
    border-color: var(--bcmy-terracotta);
    color: var(--bcmy-terracotta-hover);
}

body.woocommerce-account .bcmy-order-names-empty {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--bcmy-ink-soft);
}

body.woocommerce-account .bcmy-order-name-form {
    margin-top: 16px;
    padding: 16px;
    background: var(--bcmy-paper-raised);
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-card);
}
body.woocommerce-account .bcmy-order-name-form h3 {
    margin: 0 0 12px;
    font-size: 16px;
    color: var(--bcmy-ink);
}

body.woocommerce-account .bcmy-order-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}
body.woocommerce-account .bcmy-order-checkout {
    padding: 10px 20px;
    font-size: 14px;
}

/* ── Mobile (≤ 640px) ────────────────────────────────────────── */
@media (max-width: 640px) {
    body.woocommerce-account .bcmy-my-designs {
        grid-template-columns: 1fr;
    }
    body.woocommerce-account .bcmy-design-actions {
        flex-direction: column;
    }
    body.woocommerce-account .bcmy-design-actions .bcmy-btn {
        width: 100%;
    }
    body.woocommerce-account .bcmy-order-table th,
    body.woocommerce-account .bcmy-order-table td {
        padding: 8px 8px;
        font-size: 13px;
    }
    body.woocommerce-account .bcmy-order-details-qty {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    body.woocommerce-account .bcmy-order-name-preview .bcmy-nl-preview-img {
        max-width: 200px;
    }
    body.woocommerce-account .bcmy-order-actions {
        justify-content: stretch;
    }
    body.woocommerce-account .bcmy-order-checkout {
        width: 100%;
    }
    body.woocommerce-account .bcmy-name-row {
        flex-direction: column;
        align-items: flex-start;
    }
    body.woocommerce-account .bcmy-name-row-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    body.woocommerce-account .bcmy-name-section {
        min-width: 100%;
    }
}

/* ── Email capture (§11.4b): sticky bar + exit prompt ─────────────── */
/* Bar = transactional only (keep-my-design). The marketing opt-in lives in
   the exit prompt, which has room for it. Tokens only — no new palette. */

.bcmy-ec-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reserve room so the pinned bar never covers the designer's bottom
   controls (or the theme footer) at the end of the scroll. */
body.bcmy-ec-bar-open {
    padding-bottom: 56px;
}

.bcmy-ec-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99990;
    background: var(--bcmy-paper-raised);
    border-top: 1px solid var(--bcmy-line);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    color: var(--bcmy-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    transform: translateY(100%);
    transition: transform 220ms ease;
}

.bcmy-ec-bar.bcmy-ec-bar--in {
    transform: translateY(0);
}

.bcmy-ec-bar__inner {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 40px 8px 16px;
}

.bcmy-ec-bar__copy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    min-width: 0;
}

.bcmy-ec-bar__headline {
    font-size: 13px;
    font-weight: 600;
}

.bcmy-ec-bar__micro {
    font-size: 12px;
    color: var(--bcmy-ink-soft);
}

.bcmy-ec-bar__micro--error {
    color: var(--bcmy-error);
    font-weight: 600;
}

.bcmy-ec-bar__form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.bcmy-ec-input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--bcmy-line);
    border-radius: var(--bcmy-radius-input);
    background: var(--bcmy-paper);
    color: var(--bcmy-ink);
    font-family: inherit;
    font-size: 14px;
    min-width: 0;
}

.bcmy-ec-input:focus {
    outline: 2px solid var(--bcmy-focus);
    outline-offset: 1px;
    border-color: var(--bcmy-focus);
}

.bcmy-ec-bar .bcmy-ec-input {
    width: 220px;
}

.bcmy-ec-bar .bcmy-btn {
    padding: 8px 16px;
    font-size: 13px;
}

.bcmy-ec-bar__close {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: var(--bcmy-radius-small);
    background: transparent;
    color: var(--bcmy-ink-soft);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.bcmy-ec-bar__close:hover,
.bcmy-ec-bar__close:focus-visible {
    color: var(--bcmy-ink);
    background: var(--bcmy-wood-light);
}

.bcmy-ec-bar__close:focus-visible {
    outline: 2px solid var(--bcmy-focus);
    outline-offset: 1px;
}

/* ── Exit prompt (dialog) ─────────────────────────────────────────── */

.bcmy-ec-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, visibility 160ms ease;
}

.bcmy-ec-modal.bcmy-ec-modal--in {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bcmy-ec-modal__card {
    position: relative;
    width: 100%;
    max-width: 460px;
    padding: 24px;
    border-radius: 10px;
    background: var(--bcmy-paper-raised);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    color: var(--bcmy-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    transform: translateY(8px);
    transition: transform 160ms ease;
}

.bcmy-ec-modal.bcmy-ec-modal--in .bcmy-ec-modal__card {
    transform: translateY(0);
}

.bcmy-ec-modal__title {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.3;
}

.bcmy-ec-modal__body {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--bcmy-ink-soft);
}

.bcmy-ec-modal__field {
    display: block;
    margin-bottom: 12px;
}

.bcmy-ec-modal__label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
}

.bcmy-ec-modal .bcmy-ec-input {
    width: 100%;
}

.bcmy-ec-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--bcmy-ink-soft);
    cursor: pointer;
}

.bcmy-ec-check input[type="checkbox"] {
    margin: 2px 0 0;
    flex: 0 0 auto;
}

.bcmy-ec-modal__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.bcmy-ec-modal__x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--bcmy-radius-small);
    background: transparent;
    color: var(--bcmy-ink-soft);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.bcmy-ec-modal__x:hover,
.bcmy-ec-modal__x:focus-visible {
    color: var(--bcmy-ink);
    background: var(--bcmy-wood-light);
}

.bcmy-ec-modal__x:focus-visible {
    outline: 2px solid var(--bcmy-focus);
    outline-offset: 1px;
}

.bcmy-ec-msg {
    margin: 10px 0 0;
    font-size: 12px;
    min-height: 15px;
    color: var(--bcmy-ink-soft);
}

.bcmy-ec-msg--error {
    color: var(--bcmy-error);
    font-weight: 600;
}

.bcmy-ec-msg--success {
    color: var(--bcmy-leaf);
    font-weight: 600;
}

.bcmy-ec-success {
    color: var(--bcmy-leaf);
}

@media (max-width: 720px) {
    .bcmy-ec-bar__inner {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 40px 10px 16px;
    }

    .bcmy-ec-bar__copy {
        display: block;
        flex: 1 1 100%;
    }

    .bcmy-ec-bar__headline,
    .bcmy-ec-bar__micro {
        display: block;
    }

    .bcmy-ec-bar__form {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .bcmy-ec-bar .bcmy-ec-input {
        flex: 1 1 auto;
        width: auto;
    }

    body.bcmy-ec-bar-open {
        padding-bottom: 104px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcmy-ec-bar,
    .bcmy-ec-modal,
    .bcmy-ec-modal__card {
        transition: none;
    }

    .bcmy-ec-modal__card,
    .bcmy-ec-modal.bcmy-ec-modal--in .bcmy-ec-modal__card {
        transform: none;
    }
}