/* =====================================================================
   Imperial Stitch Purchase Options — classic / minimal restyle
   Monochrome, thin lines, centred button text, 4px radius.
   ===================================================================== */
.isp-purchase-options {
    --isp-ink: #1a1a1a;        /* primary dark (near-black) */
    --isp-ink-2: #333;         /* hover for the dark CTA    */
    --isp-muted: #8a8a8a;      /* grey text on hover        */
    --isp-soft: #666;          /* secondary label text      */
    --isp-line: #d9d9d9;       /* thin borders              */
    --isp-line-strong: #b7b7b7;
    --isp-bg: #ffffff;
    --isp-bg-soft: #fafafa;
    --isp-radius: 4px;         /* the "5px" classic corner  */
    --isp-req: #b3261e;
    --isp-accent: #213067;     /* hover + selected highlight */
    --isp-accent-dark: #18244d;
    --isp-cta: #FFC107;        /* Add to Cart (yellow)      */
    --isp-cta-dark: #e6ac00;   /* Add to Cart hover         */
    --isp-cta-text: #1a1a1a;   /* text on the yellow CTA    */

    margin: 24px 0;
    max-width: 640px;
    color: var(--isp-ink);
    font-family: inherit;
}

.isp-purchase-options * { box-sizing: border-box; }

.isp-section-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 14px 0;
    color: var(--isp-ink);
}

.isp-required { color: var(--isp-req); }

/* ---------- Step 1: purchase type radios ---------- */
.isp-radio-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 6px;
}

.isp-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
    color: var(--isp-ink);
}

.isp-radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.isp-radio-custom {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--isp-line-strong);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: border-color .15s ease;
}

.isp-radio-label:hover .isp-radio-custom { border-color: var(--isp-accent); }

.isp-radio-label input[type="radio"]:checked + .isp-radio-custom { border-color: var(--isp-accent); }

.isp-radio-label input[type="radio"]:checked + .isp-radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    background: var(--isp-accent);
    border-radius: 50%;
}

.isp-radio-text em {
    font-style: normal;
    font-weight: 500;
    color: var(--isp-soft);
}

/* ---------- Step 2 ---------- */
.isp-change-selection {
    background: var(--isp-bg);
    border: 1px solid var(--isp-line);
    border-radius: 5px;               /* requested: 5px corners */
    color: var(--isp-soft);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 8px 14px;
    margin-bottom: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .15s ease, border-color .15s ease;
}
.isp-change-selection:hover { color: var(--isp-accent); border-color: var(--isp-accent); }

.isp-panel { display: none; }
.isp-panel.is-active { display: block; }

.isp-field-group { margin-bottom: 22px; }

.isp-field-group > label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--isp-ink);
}

/* ---------- Option buttons (jacket, size, trouser, waist, vest) ---------- */
.isp-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.isp-option-btn {
    /* centred text is the key fix */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    background: var(--isp-bg);
    border: 1px solid var(--isp-line);
    border-radius: var(--isp-radius);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--isp-ink);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
    min-width: 58px;
    line-height: 1.2;
}

/* hover = navy (#213067) fill */
.isp-option-btn:hover {
    background: var(--isp-accent);
    border-color: var(--isp-accent);
    color: #fff;
}

.isp-option-btn.is-selected {
    background: var(--isp-accent);
    border-color: var(--isp-accent);
    color: #fff;
}
.isp-option-btn.is-selected:hover { color: #fff; }

.isp-button-grid { max-width: 470px; }

/* ---------- Custom tailoring measurement grid ---------- */
.isp-measurement-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 24px;
}

.isp-measurement-grid input[type="number"] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--isp-line);
    border-radius: var(--isp-radius);
    font-size: 14px;
    color: var(--isp-ink);
    background: var(--isp-bg);
}
.isp-measurement-grid input[type="number"]:focus {
    border-color: var(--isp-ink);
    outline: none;
}

/* ---------- Custom Tailoring measurement guide popover ---------- */
.isp-guide-hint {
    font-size: 12px;
    color: var(--isp-soft);
    margin: 0 0 14px 0;
    letter-spacing: .02em;
}

/* the field group must anchor the absolutely-positioned guide */
.isp-custom-tailoring .isp-field-group { position: relative; }

.isp-field-guide {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    width: 250px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid var(--isp-line);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(20, 30, 60, .16);
    padding: 14px;
    z-index: 60;
    display: none;
    pointer-events: none; /* purely informational; never blocks typing */
}
.isp-field-guide.is-visible { display: block; }

/* little caret pointing down to the field */
.isp-field-guide::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #fff;
    filter: drop-shadow(0 1px 0 var(--isp-line));
}

.isp-field-guide-img {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.isp-field-guide-img svg {
    width: 120px;
    height: auto;
    max-height: 130px;
}
.isp-field-guide-img img {
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    border-radius: 5px;
    display: block;
}
.isp-field-guide-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--isp-accent);
    margin-bottom: 5px;
}
.isp-field-guide-text {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--isp-soft);
}

/* ---------- Send-measurements panel ---------- */
.isp-panel-note {
    font-size: 13px;
    color: var(--isp-soft);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.isp-contact-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

/* classic outlined contact buttons — accent border, accent hover fill */
.isp-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--isp-accent);
    border-radius: var(--isp-radius);
    background: var(--isp-bg);
    color: var(--isp-accent);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background .15s ease, color .15s ease;
}
.isp-contact-btn:hover {
    background: var(--isp-accent);
    color: #fff;
}

/* WhatsApp — classic WhatsApp green */
.isp-contact-wa {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}
.isp-contact-wa:hover {
    background: #1da851;
    border-color: #1da851;
    color: #fff;
}
.isp-contact-ico { flex-shrink: 0; display: block; }

/* textarea + send note */
.isp-textarea-group label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.isp-textarea-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--isp-line);
    border-radius: var(--isp-radius);
    min-height: 100px;
    resize: vertical;
    font-size: 14px;
    font-family: inherit;
    color: var(--isp-ink);
}
.isp-textarea-group textarea:focus { border-color: var(--isp-ink); outline: none; }

.isp-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 10px 22px;
    border: 1px solid var(--isp-accent);
    border-radius: var(--isp-radius);
    background: var(--isp-bg);
    color: var(--isp-accent);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background .15s ease, color .15s ease;
}
.isp-btn-outline:hover { background: var(--isp-accent); color: #fff; }

.isp-note-status { margin-top: 10px; font-size: 13px; }
.isp-note-status .success { color: #1e7e34; }
.isp-note-status .error { color: var(--isp-req); }

/* ---------- Vest block ---------- */
.isp-vest-block {
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid var(--isp-line);
}

/* ---------- Order bar: price / qty / add to cart ---------- */
.isp-order-bar {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--isp-line);
}

.isp-price-summary {
    margin-bottom: 18px;
}
.isp-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    color: var(--isp-soft);
    padding: 4px 0;
}
/* When JS marks a row hidden, this must win over the display:flex above. */
.isp-price-row[hidden] {
    display: none !important;
}
.isp-price-row.isp-price-total {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--isp-line);
    color: var(--isp-ink);
    font-size: 18px;
    font-weight: 700;
}

.isp-cart-controls {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
}

/* quantity stepper */
.isp-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--isp-line);
    border-radius: var(--isp-radius);
    overflow: hidden;
    flex-shrink: 0;
}
.isp-qty-btn {
    width: 42px;
    background: var(--isp-bg);
    border: none;
    color: var(--isp-ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.isp-qty-btn:hover { color: var(--isp-accent); background: var(--isp-bg-soft); }
.isp-qty-input {
    width: 54px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--isp-line);
    border-right: 1px solid var(--isp-line);
    font-size: 15px;
    color: var(--isp-ink);
    -moz-appearance: textfield;
}
.isp-qty-input::-webkit-outer-spin-button,
.isp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* primary add to cart — yellow */
.isp-add-to-cart {
    flex: 1 1 auto;
    min-width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--isp-cta);
    color: var(--isp-cta-text);
    border: 1px solid var(--isp-cta);
    border-radius: var(--isp-radius);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: background .15s ease, border-color .15s ease;
}
.isp-add-to-cart:hover { background: var(--isp-cta-dark); border-color: var(--isp-cta-dark); }
.isp-add-to-cart:disabled { opacity: .6; cursor: default; }

.isp-add-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(26,26,26,.35);
    border-top-color: var(--isp-cta-text);
    border-radius: 50%;
    animation: isp-spin .7s linear infinite;
}
@keyframes isp-spin { to { transform: rotate(360deg); } }

.isp-cart-status {
    margin-top: 14px;
    font-size: 13px;
    min-height: 18px;
}
.isp-cart-status .isp-ok { color: #1e7e34; }
.isp-cart-status .isp-err { color: var(--isp-req); }
.isp-cart-status a {
    color: var(--isp-ink);
    font-weight: 600;
    text-decoration: underline;
    margin-left: 6px;
}

.isp-variable-note {
    margin-top: 14px;
    font-size: 12px;
    color: var(--isp-soft);
    line-height: 1.5;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    .isp-measurement-grid { grid-template-columns: 1fr; }
    .isp-contact-buttons { flex-direction: column; }
    .isp-contact-btn { width: 100%; }
    .isp-option-btn { flex: 1 1 60px; }
    .isp-cart-controls { flex-direction: column; }
    .isp-qty { align-self: flex-start; }
    .isp-add-to-cart { width: 100%; }
}