/* ── WC Print Options v5 ──────────────────── */
#wcpo-app { font-family: inherit; color: inherit; margin-bottom: 20px; }
.wcpo-hidden { display: none !important; }

.wcpo-section { margin-bottom: 28px; border-top: 1px solid #e0e0e0; padding-top: 18px; }
.wcpo-step-header { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #111; margin-bottom: 16px; }
.wcpo-num { font-weight: 700; margin-right: 4px; }

/* Options rows */
.wcpo-size-options { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
.wcpo-options {display: flex;flex-wrap: wrap;gap: 14px;/* align-items: flex-end; */}

/* Option card */
.wcpo-option {display: flex;flex-direction: column;align-items: center;cursor: pointer;text-align: center;}

/* Base box */
.wcpo-box {
    border: 2px solid #cccccc;
    background: #f0f0f0;
    margin-bottom: 7px;
    position: relative;
    box-sizing: border-box;
    transition: box-shadow 0.18s;
}

/* Size box: W/H set by JS */
.wcpo-size-box { /* JS sets inline width + height */ }

/* ── Frame visual styles ──────────────────── */
.wcpo-option[data-group="frame"] .wcpo-box {
    width: 112px; height: 90px;
    background: #f0f0f0;
    border: 2px solid #bbb;
}

/* Unframed — flat light grey, thin border */
.wcpo-frame--unframed { background: #e8e8e8 !important; border-color: #bbb !important; }

/* White frame — white fill with thick dark outer border (simulates white frame moulding) */
.wcpo-frame--white_frame {
    background: #ffffff !important;
    border: 3px solid #888 !important;
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px #ccc;
}

/* Black frame — dark fill with thick black outer border */
.wcpo-frame--black_frame {
    background: #d0d0d0 !important;
    border: 3px solid #222 !important;
    box-shadow: inset 0 0 0 4px #d0d0d0, inset 0 0 0 6px #444;
}

/* Plexi — lighter grey with subtle sheen line */
.wcpo-frame--plexi {
    background: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 40%, #ddd 100%) !important;
    border-color: #aaa !important;
}

/* ── Border style boxes ───────────────────── */
.wcpo-border-box { width: 120px; height: 96px; border: 2px solid #333; background: #f5f5f5; overflow: hidden; }
.wcpo-border--full_bleed { background: #c8c8c8; border-color: #333; }
.wcpo-border--full_bleed::before { display: none; }
.wcpo-border--lift_mat { background: #f0f0f0; border-color: #555; }
.wcpo-border--lift_mat::before { content: ''; position: absolute; inset: 8px; background: #c0c0c0; }
.wcpo-border--mat_border { background: #f0f0f0; border-color: #aaa; }
.wcpo-border--mat_border::before { content: ''; position: absolute; inset: 12px; background: transparent; border: 1.5px solid #aaa; }

/* Plexi/other boxes */
.wcpo-option[data-group="plexi"] .wcpo-box { width: 108px; height: 88px; }

/* ── Vertical orientation: flip ALL option boxes tall ── */
/* (size boxes are flipped by JS; these are the fixed-size ones) */
#wcpo-app.wcpo-orient-vertical .wcpo-option[data-group="frame"] .wcpo-box { width: 90px; height: 112px; }
#wcpo-app.wcpo-orient-vertical .wcpo-option[data-group="plexi"] .wcpo-box { width: 88px; height: 108px; }
#wcpo-app.wcpo-orient-vertical .wcpo-border-box { width: 96px; height: 120px; }

/* Selected & hover */
.wcpo-option:hover .wcpo-box { box-shadow: 0 0 0 2px #888; }
.wcpo-option.selected .wcpo-box { box-shadow: 0 0 0 2.5px #111; }
.wcpo-option.selected .wcpo-box::after {
    content: '✓'; position: absolute; top: 3px; right: 5px;
    font-size: 10px; font-weight: 700; color: #111; line-height: 1; z-index: 2;
}

/* Labels */
.wcpo-option-label { font-size: 11px; font-weight: 500; color: #111; margin-bottom: 2px; letter-spacing: 0.02em; max-width: 86px; line-height: 1.3; word-break: break-word; }
.wcpo-option-price { font-size: 11px; color: #555; }

/* ── Custom size bar ──────────────────────── */
.wcpo-custom-size-bar {
    border-top: 1px solid #e0e0e0;
    padding: 18px 0 4px;
}
.wcpo-custom-size-inner { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.wcpo-custom-size-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #111;
}
.wcpo-custom-size-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 15px;
    color: #555;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: color 0.2s;
}
.wcpo-custom-size-btn:hover { color: #111; }

/* ── Total ─────────────────────────────────── */
.wcpo-total-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.wcpo-total-label { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: #111; }
.wcpo-total-price { font-size: 28px; font-weight: 600; color: #111; }

/* ── Add to Cart ──────────────────────────── */
.wcpo-add-to-cart {
    display: block !important; width: 100% !important;
    padding: 14px 20px !important; background: #111 !important; color: #fff !important;
    border: none !important; font-size: 12px !important; font-weight: 600 !important;
    letter-spacing: 0.14em !important; text-transform: uppercase !important;
    cursor: pointer; transition: background 0.2s; border-radius: 0 !important;
}
.wcpo-add-to-cart:hover { background: #333 !important; color: #fff !important; }

/* ── Modal overlay ─────────────────────────── */
.wcpo-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    z-index: 99999; display: flex; align-items: center; justify-content: center;
    padding: 20px;
}

.wcpo-modal {
    background: #fff; border-radius: 2px; padding: 44px 40px 36px;
    width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto;
    position: relative; box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}

.wcpo-modal-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; cursor: pointer;
    font-size: 18px; color: #888; line-height: 1; padding: 4px;
}
.wcpo-modal-close:hover { color: #111; }

.wcpo-modal-title {
    font-size: 26px; font-weight: 400; text-align: center; margin: 0 0 10px;
    font-family: Georgia, serif; color: #111;
}
.wcpo-modal-title em { font-style: italic; }
.wcpo-modal-title-underline { text-decoration: underline; font-style: normal; }

.wcpo-modal-subtitle { font-size: 13px; text-align: center; color: #444; margin: 0 0 8px; }

.wcpo-modal-features {
    list-style: none; padding: 0; margin: 0 0 22px; text-align: center;
}
.wcpo-modal-features li { font-size: 15px; color: #555; margin-bottom: 4px; }

/* Form fields */
.wcpo-modal-form { display: flex; flex-direction: column; gap: 0; }
.wcpo-form-group { border-bottom: 1px solid #ddd; margin-bottom: 0; }

.wcpo-input {
    width: 100%; border: none; outline: none; padding: 14px 0;
    font-size: 13px; color: #333; background: transparent;
    font-family: inherit; letter-spacing: 0.02em;
}
.wcpo-input::placeholder { color: #aaa; }

/* Select */
.wcpo-select-wrap { position: relative; }
.wcpo-select { appearance: none; cursor: pointer; color: #aaa; }
.wcpo-select:not([value=""]) { color: #333; }
.wcpo-select-arrow {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-size: 13px; color: #888; pointer-events: none;
}

/* Checkbox row */
.wcpo-checkbox-row { border-bottom: none; padding: 14px 0; }
.wcpo-checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: #555; cursor: pointer; }
.wcpo-checkbox { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; border: 2px solid #888; accent-color: #111; cursor: pointer; }
.wcpo-link { color: #555; text-decoration: underline; }

/* Sign Up / Submit button */
.wcpo-form-footer { display: flex; justify-content: flex-end; margin-top: 20px; }
.wcpo-signup-btn {
    background: #111; color: #fff; border: none; padding: 14px 34px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    cursor: pointer; transition: background 0.2s;
}
.wcpo-signup-btn:hover { background: #333; }
.wcpo-signup-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Custom size dimensions: two boxes with "x" between ── */
.wcpo-dimensions-row { border-bottom: none !important; padding: 14px 0; }
.wcpo-dimensions-label {
    display: block; font-size: 11px; color: #999; margin-bottom: 8px;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.wcpo-dimensions-inputs { display: flex; align-items: center; gap: 10px; }
.wcpo-dim-input {
    border: 1px solid #ddd !important;
    padding: 12px !important;
    text-align: center;
    width: 100%;
    -moz-appearance: textfield;
}
.wcpo-dim-input::-webkit-outer-spin-button,
.wcpo-dim-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.wcpo-dim-x { font-size: 14px; color: #888; font-weight: 600; flex-shrink: 0; }

/* ── Live frame/mat preview on the main product image ── */
/* JS toggles wcpo-fx-frame-* and wcpo-fx-mat-* classes on .woocommerce-product-gallery */
.woocommerce-product-gallery__image {
    display: block;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    transition: border .25s ease, padding .25s ease, background-color .25s ease, box-shadow .25s ease;
    margin: 0;
    padding: 0;
}

/* Frames — equal borders on all sides */
.wcpo-fx-frame-white   .woocommerce-product-gallery__image img {border: 20px solid #e9ecef;box-shadow: 0 0 0 1px #d8d8d8, 0 10px 30px rgba(0,0,0,.18);padding: 0 !important;background-color: transparent;}
.wcpo-fx-frame-black   .woocommerce-product-gallery__image img { border: 20px solid #1a1a1a; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 0 !important; background-color: transparent; }
.wcpo-fx-frame-plexi   .woocommerce-product-gallery__image img {box-shadow: 0 4px 18px rgba(0,0,0,.12);padding: 0 !important;background-color: transparent;}
.wcpo-fx-frame-default .woocommerce-product-gallery__image img { border: 12px solid #999999; padding: 0 !important; background-color: transparent; }
.wcpo-fx-frame-none    .woocommerce-product-gallery__image img { border: 0; padding: 0 !important; background-color: transparent; }

/* Mats (border step) — white space between the photo and the frame */
.wcpo-fx-mat-full_bleed  .woocommerce-product-gallery__image img { padding: 0 !important; background-color: transparent; }
.wcpo-fx-mat-lift_mat    .woocommerce-product-gallery__image img { padding: 24px !important; background-color: #fff; }
.wcpo-fx-mat-mat_border  .woocommerce-product-gallery__image img { padding: 36px !important; background-color: #fff; box-shadow: inset 0 0 0 1px #ccc; }

/* Responsive */
@media (max-width: 600px) {
    .wcpo-size-options { gap: 12px; }
    .wcpo-options { gap: 10px; }
    .wcpo-modal { padding: 36px 22px 28px; }
    .wcpo-option[data-group="frame"] .wcpo-box { width: 90px; height: 72px; }
    #wcpo-app.wcpo-orient-vertical .wcpo-option[data-group="frame"] .wcpo-box { width: 72px; height: 90px; }
}