/* ==========================================================================
   Evara London — product detail
   Restyles the ecommerce plugin's tp-product-details-* markup. The structure
   and JS hooks are left intact so cart, variation and stock logic keep working.
   ========================================================================== */

/* ---------- title + rating ---------- */

.ev-pdp__form .tp-product-details-title,
.ev-pdp__form h1,
.ev-pdp__form h2,
.ev-pdp__form h3 {
    font-family: var(--ev-font-display) !important;
    font-weight: 400;
    color: var(--ev-white);
    font-size: clamp(24px, 3vw, 40px);
    letter-spacing: .04em;
    margin-bottom: 14px;
}

.ev-pdp__form .tp-product-details-rating-wrapper { gap: 10px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.ev-pdp__form .tp-product-details-rating svg,
.ev-pdp__form .tp-product-details-rating i { color: var(--ev-gold-bright); }
.ev-pdp__form .tp-product-details-rating-wrapper a { color: rgba(255, 255, 255, .6); }

/* ---------- price ---------- */

.ev-pdp__form .tp-product-details-price-block {
    margin: 14px 0 18px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.ev-pdp__form .tp-product-details-price,
.ev-pdp__form .new-price {
    font-family: var(--ev-font-accent) !important;
    font-size: clamp(26px, 2.8vw, 34px);
    color: var(--ev-gold) !important;
    font-weight: 400;
}

.ev-pdp__form .old-price,
.ev-pdp__form del {
    font-family: var(--ev-font-accent) !important;
    font-size: 19px;
    color: rgba(253, 224, 191, .45) !important;
    text-decoration: line-through;
}

.ev-pdp__save-flag { margin: 0 0 6px; }

.ev-pdp__save {
    display: inline-block;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 6px 12px;
    background: var(--ev-gold-bright);
    color: var(--ev-navy);
}

/* ---------- description: serif, per the design ---------- */

.ev-pdp__form .tp-product-details-description,
.ev-pdp__form .tp-product-details-description p {
    font-family: var(--ev-font-accent) !important;
    font-size: 16px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .76);
}

/* ---------- stock line ---------- */

.ev-pdp__form .tp-product-details-inventory {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.ev-pdp__form .tp-product-details-inventory .tp-product-stock { color: var(--ev-gold); }

/* ---------- variation swatches ---------- */

.ev-pdp__form .tp-product-details-variation-title,
.ev-pdp__form .tp-product-details-action-title,
.ev-pdp__form label {
    font-family: var(--ev-font-body) !important;
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ev-gold);
    margin-bottom: 10px;
}

.ev-pdp__form .tp-product-variation-item button,
.ev-pdp__form .tp-color-variation-btn,
.ev-pdp__form .bb-product-attribute-swatch {
    background: transparent;
    border: 1px solid rgba(163, 152, 115, .45);
    border-radius: 0;
    color: var(--ev-cream);
    padding: 11px 20px;
    font-size: 12px;
    letter-spacing: .08em;
}

.ev-pdp__form .tp-product-variation-item button.active,
.ev-pdp__form .bb-product-attribute-swatch.active {
    border-color: var(--ev-gold-bright);
    color: var(--ev-gold-bright);
}

/* ---------- buttons ---------- */

.ev-pdp__form .tp-product-details-add-to-cart-btn {
    background: var(--ev-gold) !important;
    border: 1px solid var(--ev-gold) !important;
    border-radius: 0 !important;
    color: var(--ev-navy) !important;
    font-family: var(--ev-font-body);
    font-size: 11px;
    letter-spacing: var(--ev-tracking-label);
    text-transform: uppercase;
    padding: 16px 30px;
    font-weight: 400;
}

.ev-pdp__form .tp-product-details-add-to-cart-btn:hover {
    background: var(--ev-gold-bright) !important;
    border-color: var(--ev-gold-bright) !important;
}

.ev-pdp__form .tp-product-details-buy-now-btn {
    background: transparent !important;
    border: 1px solid var(--ev-gold) !important;
    border-radius: 0 !important;
    color: var(--ev-gold) !important;
    font-size: 11px;
    letter-spacing: var(--ev-tracking-label);
    text-transform: uppercase;
    padding: 16px 30px;
    font-weight: 400;
}

.ev-pdp__form .tp-product-details-buy-now-btn:hover {
    background: var(--ev-gold) !important;
    color: var(--ev-navy) !important;
}

/* ---------- wishlist / compare ---------- */



.ev-pdp__form .tp-product-details-action-sm-btn {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ev-pdp__form .tp-product-details-action-sm-btn:hover { color: var(--ev-gold-bright); }
.ev-pdp__form .tp-product-details-action-sm-btn svg { width: 16px; height: 16px; }

/* ---------- assurance bullets ---------- */

.ev-pdp__assure { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ev-pdp__assure li { font-size: 13px; color: rgba(255, 255, 255, .7); display: flex; gap: 10px; }
.ev-pdp__assure li::before { content: "\2726"; color: var(--ev-gold); }

/* ==========================================================================
   Reviews — the plugin ships light-theme form controls; force the dark palette
   ========================================================================== */

#product-review,
.product-review-container { color: var(--ev-cream); }

#product-review h3,
#product-review h4,
.product-review-container h3 { font-family: var(--ev-font-display); color: var(--ev-white); }

#product-review p:not([class*="ev-"]),
.product-review-container p:not([class*="ev-"]),
#product-review label:not([class*="ev-"]) { color: rgba(255, 255, 255, .72); }

#product-review .form-control,
.product-review-container .form-control,
#product-review textarea,
.product-review-container textarea,
#product-review input[type="text"],
#product-review input[type="email"] {
    background: rgba(11, 23, 49, .55) !important;
    border: 1px solid rgba(163, 152, 115, .35) !important;
    border-radius: 0 !important;
    color: var(--ev-cream) !important;
}

#product-review .form-control::placeholder,
.product-review-container textarea::placeholder { color: rgba(253, 224, 191, .4) !important; }

#product-review .form-control:focus,
.product-review-container textarea:focus { border-color: var(--ev-gold) !important; box-shadow: none !important; }

#product-review .btn,
.product-review-container .btn,
#product-review button[type="submit"],
.product-review-container button[type="submit"] {
    background: var(--ev-gold) !important;
    border: 1px solid var(--ev-gold) !important;
    border-radius: 0 !important;
    color: var(--ev-navy) !important;
    font-size: 11px;
    letter-spacing: var(--ev-tracking-label);
    text-transform: uppercase;
    padding: 13px 30px;
}

#product-review .alert,
.product-review-container .alert,
#product-review .alert-info,
.product-review-container .alert-info,
#product-review .image-upload-info {
    background: rgba(11, 23, 49, .7) !important;
    border: 1px solid rgba(163, 152, 115, .4) !important;
    color: rgba(255, 255, 255, .7) !important;
    border-radius: 0 !important;
}

#product-review .text-danger,
.product-review-container .text-danger { color: #e0a3a0 !important; }

#product-review .form-rating-stars svg,
#product-review .bb-product-rating svg,
.product-review-container svg { color: var(--ev-gold-bright); }

#product-review [class*="upload"],
.product-review-container [class*="upload"] {
    border-color: rgba(163, 152, 115, .4) !important;
    color: rgba(255, 255, 255, .6) !important;
}

/* ==========================================================================
   Product page corrections
   ========================================================================== */

/* ---------- details copy: readable, not a grey whisper ---------- */

.ev-tabs__panel,
.ev-tabs__panel .ck-content {
    font-family: var(--ev-font-accent) !important;
    font-size: 17px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .82) !important;
    max-width: 78ch;
    margin-inline: auto;        /* sit under the centred heading */
    text-align: left;           /* prose stays left-read, block is centred */
}

/* evara.css sets font-family on bare <p>, which beats anything inherited from
   the parent — so the serif has to be declared on the paragraph itself. */
.ev-tabs__panel .ck-content p,
.ev-tabs__panel .ck-content li,
.ev-tabs__panel .ck-content span,
.ev-tabs__panel .ck-content div {
    font-family: var(--ev-font-accent) !important;
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .82) !important;
}

.ev-tabs__panel .ck-content li { margin-bottom: 8px; }

.ev-tabs__panel .ck-content strong,
.ev-tabs__panel .ck-content b {
    color: var(--ev-white) !important;
    font-weight: 500;
}

/* the pasted copy uses bare <p><strong> as sub-headings */
.ev-tabs__panel .ck-content h2,
.ev-tabs__panel .ck-content h3,
.ev-tabs__panel .ck-content h4 {
    font-family: var(--ev-font-display) !important;
    font-size: 20px;
    color: var(--ev-white) !important;
    margin: 32px 0 12px;
    letter-spacing: .04em;
}

.ev-tabs__panel .ck-content em,
.ev-tabs__panel .ck-content i { color: var(--ev-cream) !important; }
.ev-tabs__panel .ck-content ul { padding-left: 22px; margin: 0 0 18px; }
.ev-tabs__panel .ck-content li { margin-bottom: 8px; }

/* the source copy is padded with empty paragraphs — collapse them */
.ev-tabs__panel .ck-content p:empty { display: none; }
.ev-tabs__panel .ck-content br + br { display: none; }

/* ---------- tighten the vertical rhythm on the product page ---------- */

.ev-pdp ~ .ev-tabs, .ev-tabs { margin-top: clamp(32px, 3.5vw, 56px); }
body.ev-pdp-page .ev-section { padding-block: clamp(36px, 4.5vw, 64px); }
.ev-tabs__panel { padding: 24px 0 0; }

/* ==========================================================================
   Reviews — bring the plugin form fully onto the Evara palette
   ========================================================================== */

#product-review .ev-reviews__title,
#product-review h3, #product-review h4 {
    font-family: var(--ev-font-display) !important;
    font-size: clamp(20px, 2vw, 28px);
    color: var(--ev-white) !important;
    letter-spacing: .05em;
    margin-bottom: 8px;
}

/* Fallback typography for the plugin's own review markup. Scoped away from the
   `ev-` classes so the Evara review design is not flattened by this blanket. */
#product-review p:not([class*="ev-"]),
#product-review span:not([class*="ev-"]),
#product-review label:not([class*="ev-"]),
.product-review-container p:not([class*="ev-"]),
.product-review-container span:not([class*="ev-"]),
.product-review-container label:not([class*="ev-"]) {
    font-family: var(--ev-font-body) !important;
    font-size: 13px;
    color: rgba(255, 255, 255, .66) !important;
}

#product-review label:not([class*="ev-"]) { letter-spacing: .18em; text-transform: uppercase; font-size: 10px; color: var(--ev-gold) !important; }

/* required markers + the login prompt shouldn't shout in red */
#product-review .text-danger, .product-review-container .text-danger,
#product-review .required, #product-review [style*="color: red"] { color: var(--ev-gold-bright) !important; }

/* star rating */
#product-review .form-rating-stars,
#product-review .bb-product-rating { color: var(--ev-gold-bright) !important; }
#product-review .form-rating-stars svg, #product-review .form-rating-stars i,
#product-review .bb-product-rating svg { color: var(--ev-gold-bright) !important; fill: currentColor; }

/* textarea */
#product-review textarea, #product-review .form-control {
    min-height: 150px;
    padding: 16px 18px !important;
    font-family: var(--ev-font-accent) !important;
    font-size: 16px !important;
    color: var(--ev-cream) !important;
}

/* upload tile */
#product-review .image-upload,
#product-review [class*="upload-box"],
#product-review label[for*="image"] {
    border: 1px dashed rgba(163, 152, 115, .45) !important;
    background: rgba(11, 23, 49, .35) !important;
    color: rgba(255, 255, 255, .6) !important;
    padding: 14px !important;
}

/* info strip */
#product-review .image-upload-info, #product-review .alert-info {
    background: rgba(11, 23, 49, .5) !important;
    border: 1px solid rgba(163, 152, 115, .3) !important;
    color: rgba(255, 255, 255, .62) !important;
    font-size: 12px !important;
    padding: 12px 16px !important;
}

#product-review .alert-info svg, #product-review .alert-info i { color: var(--ev-gold) !important; }

/* submit */
#product-review button[type="submit"], #product-review .btn-primary {
    background: var(--ev-gold) !important;
    border: 1px solid var(--ev-gold) !important;
    color: var(--ev-navy) !important;
    font-size: 11px !important;
    letter-spacing: .28em !important;
    text-transform: uppercase;
    padding: 15px 40px !important;
    font-weight: 400 !important;
}

#product-review button[type="submit"]:hover, #product-review .btn-primary:hover {
    background: var(--ev-gold-bright) !important;
    border-color: var(--ev-gold-bright) !important;
}

/* empty state */
#product-review .no-reviews, #product-review .text-center {
    font-family: var(--ev-font-accent) !important;
    font-size: 17px !important;
    color: rgba(255, 255, 255, .5) !important;
}

/* ==========================================================================
   Reviews — editorial chrome around the plugin form
   ========================================================================== */

/* Full container width, as the design lays it out. */
.ev-reviews { max-width: none; margin-inline: 0; }

.ev-reviews__score { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 6px 0 0; }
.ev-reviews__avg { font-family: var(--ev-font-accent); font-size: 34px; color: var(--ev-gold); line-height: 1; }
.ev-reviews__count { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); }

.ev-reviews__body {
    margin-top: clamp(26px, 3vw, 44px);
    border: 1px solid rgba(163, 152, 115, .3);
    padding: clamp(24px, 3.4vw, 48px);
    background: rgba(11, 23, 49, .3);
}

/* the plugin's own heading is redundant under ours */
.ev-reviews__body > h3:first-child,
.ev-reviews__body .tp-product-details-reviews > h3:first-child { display: none; }

.ev-reviews__body form { display: block; }

/* rating row reads as one line */
.ev-reviews__body .form-rating-stars { display: inline-flex; gap: 4px; vertical-align: middle; }
.ev-reviews__body .form-rating-stars svg,
.ev-reviews__body .form-rating-stars i { width: 18px; height: 18px; color: var(--ev-gold-bright) !important; }

/* textarea gets room to breathe */
.ev-reviews__body textarea,
.ev-reviews__body .form-control {
    min-height: 150px !important;
    background: rgba(5, 13, 31, .55) !important;
    border: 1px solid rgba(163, 152, 115, .32) !important;
    padding: 18px 20px !important;
    font-family: var(--ev-font-accent) !important;
    font-size: 16px !important;
    line-height: 1.7;
    color: var(--ev-cream) !important;
}

.ev-reviews__body textarea::placeholder { color: rgba(253, 224, 191, .35) !important; font-style: italic; }

/* upload tile: a proper dashed panel, not a cramped square */
.ev-reviews__body [class*="upload"] {
    border: 1px dashed rgba(163, 152, 115, .4) !important;
    background: rgba(5, 13, 31, .4) !important;
    color: rgba(255, 255, 255, .55) !important;
    min-width: 120px;
    min-height: 92px;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px !important;
    font-size: 11px !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: border-color .3s ease, color .3s ease;
}

.ev-reviews__body [class*="upload"]:hover { border-color: var(--ev-gold) !important; color: var(--ev-cream) !important; }
.ev-reviews__body [class*="upload"] svg { width: 20px; height: 20px; color: var(--ev-gold) !important; }

/* helper strip */
.ev-reviews__body .image-upload-info,
.ev-reviews__body .alert-info {
    background: transparent !important;
    border: 0 !important;
    border-left: 2px solid rgba(163, 152, 115, .5) !important;
    padding: 6px 0 6px 14px !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, .5) !important;
    font-style: italic;
}

/* login prompt reads as a note, not an error */
.ev-reviews__body .text-danger,
.ev-reviews__body [class*="login"] {
    color: var(--ev-gold) !important;
    font-size: 12px !important;
    letter-spacing: .1em;
}

/* submit */
.ev-reviews__body button[type="submit"] {
    margin-top: 6px;
    min-width: 200px;
}

/* empty state */
.ev-reviews__body .text-center:last-child {
    font-family: var(--ev-font-accent) !important;
    font-size: 17px !important;
    color: rgba(255, 255, 255, .45) !important;
    padding-top: 20px;
    border-top: 1px solid rgba(163, 152, 115, .2);
    margin-top: 28px;
}

/* ==========================================================================
   Product detail — updated design (framed gallery, service grid, craft band)
   Appended after the original block, so these rules intentionally win.
   ========================================================================== */

/* ---------- breadcrumb ---------- */
.ev-crumbs { background: var(--ev-navy); padding: clamp(20px, 3vw, 36px) 0 0; }
.ev-crumbs .ev-container { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ev-crumbs a, .ev-crumbs span {
    font-family: var(--ev-font-body); font-size: 10.5px; letter-spacing: .24em;
    text-transform: uppercase; color: rgba(255, 255, 255, .42);
}
.ev-crumbs a:hover { color: var(--ev-gold-bright); }
.ev-crumbs__here { color: var(--ev-cream); }

.ev-pdp-main { background: var(--ev-navy); padding: clamp(24px, 3vw, 44px) 0 clamp(36px, 4vw, 60px); }

/* ---------- gallery: the frame sits outside the image ---------- */
.ev-pdp__stage {
    border: 1px solid rgba(163, 152, 115, .45);
    background: transparent;
    padding: 10px;
    aspect-ratio: auto;
    overflow: visible;
}
.ev-pdp__stage img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; }

.ev-pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.ev-pdp__thumb {
    width: auto; height: auto; padding: 5px;
    border: 1px solid rgba(163, 152, 115, .4);
    background: none; cursor: pointer; overflow: visible;
    transition: border-color .3s ease;
}
.ev-pdp__thumb img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; }
.ev-pdp__thumb.is-active, .ev-pdp__thumb:hover { border-color: var(--ev-gold-bright); }

/* ---------- summary ---------- */
/* The design lays the whole summary column out as one flex stack with a 20px
   gap. Ours is nested (summary > form > cart form), so each level repeats the
   gap rather than collapsing to zero between the wrappers. */
.ev-pdp__summary { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

.ev-pdp__form {
    margin: 0; padding: 0; border-block: 0; width: 100%;
    display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
}

.ev-pdp__form-el {
    width: 100%;
    display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
}

.ev-pdp__head { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; width: 100%; }
.ev-pdp__eyebrow {
    margin: 0; font-family: var(--ev-font-body); font-size: 10.5px;
    letter-spacing: .32em; text-transform: uppercase; color: var(--ev-gold);
}
.ev-pdp__eyebrow span { opacity: .6; }
.ev-pdp__title {
    margin: 0; font-family: var(--ev-font-display); font-weight: 400;
    font-size: clamp(28px, 3.6vw, 46px); line-height: 1.2;
    letter-spacing: .04em; color: var(--ev-white);
}

.ev-pdp__rating { display: flex; align-items: center; gap: 12px; margin: 0; }
.ev-pdp__rating-text { font-size: 12.5px; font-weight: 300; color: rgba(255, 255, 255, .5); }
.ev-pdp__rating-text a { color: rgba(255, 255, 255, .5); border-bottom: 1px solid rgba(163, 152, 115, .4); }
.ev-pdp__rating-text a:hover { color: var(--ev-gold-bright); border-bottom-color: var(--ev-gold-bright); }

/* star bar — the inner span is the filled portion */
.ev-stars {
    position: relative; display: inline-block; line-height: 1;
    font-size: 14px; letter-spacing: .2em; white-space: nowrap;
    color: rgba(255, 255, 255, .22);
}
.ev-stars::before { content: "\2605\2605\2605\2605\2605"; }
.ev-stars > span {
    position: absolute; top: 0; left: 0; bottom: 0;
    overflow: hidden; white-space: nowrap; color: var(--ev-gold-bright);
}
.ev-stars > span::before { content: "\2605\2605\2605\2605\2605"; }
.ev-stars--lg { font-size: 17px; letter-spacing: .28em; }

.ev-pdp__price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0; }
.ev-pdp__price-now { font-family: var(--ev-font-accent); font-size: clamp(24px, 2.6vw, 32px); color: var(--ev-cream); }
.ev-pdp__price-was,
.ev-pdp__price del {
    font-family: var(--ev-font-body); font-size: 14px; font-weight: 300;
    color: rgba(255, 255, 255, .35); text-decoration: line-through;
}
.ev-pdp__save {
    font-family: var(--ev-font-body); font-size: 10px; letter-spacing: .2em;
    text-transform: uppercase; padding: 5px 10px;
    background: var(--ev-gold-bright); color: var(--ev-navy);
}

.ev-pdp__hr { display: block; width: 100%; height: 1px; background: rgba(163, 152, 115, .28); }

.ev-pdp__intro {
    margin: 0; max-width: 560px;
    font-family: var(--ev-font-accent); font-size: 19px; font-weight: 300;
    line-height: 1.8; color: rgba(255, 255, 255, .68);
}
.ev-pdp__intro p { margin: 0 0 10px; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
.ev-pdp__intro p:last-child { margin-bottom: 0; }

/* ---------- variation swatches ---------- */
.ev-pdp__swatches { display: flex; flex-direction: column; gap: 12px; margin: 0; width: 100%; }
.ev-pdp__swatches .form-label,
.ev-pdp__swatches label {
    font-family: var(--ev-font-body); font-size: 10.5px; letter-spacing: .24em;
    text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 8px;
}

/* ---------- buy row ---------- */
.ev-pdp__buy { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; width: 100%; margin-top: 0; }

.ev-qty { display: inline-flex; align-items: center; border: 1px solid rgba(163, 152, 115, .45); border-radius: 0; background: transparent; }
.ev-qty__btn {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0; position: static; top: auto; transform: none;
    width: 46px; height: 50px; cursor: pointer; user-select: none;
    font-size: 18px; line-height: 1; color: var(--ev-cream);
    background: transparent; border: 0; transition: color .25s ease;
}
.ev-qty__btn:hover { color: var(--ev-gold-bright); }
.ev-qty__input {
    width: 52px; height: 50px; text-align: center;
    background: transparent; border: 0; outline: none;
    font-family: var(--ev-font-body); font-size: 14px; color: var(--ev-white);
    -moz-appearance: textfield; appearance: textfield;
}
.ev-qty__input::-webkit-outer-spin-button,
.ev-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ev-pdp__form button.ev-pdp__add {
    flex: 1 1 200px; text-align: center;
    background: var(--ev-gold); border: 1px solid var(--ev-gold); color: var(--ev-navy);
    font-family: var(--ev-font-display); font-size: 14px; letter-spacing: .16em;
    text-transform: uppercase; padding: 15px 28px; cursor: pointer;
    transition: background .4s ease, color .4s ease;
}
.ev-pdp__form button.ev-pdp__add:hover { background: transparent; color: var(--ev-cream); border-color: var(--ev-gold); }

.ev-pdp__wish {
    width: 50px; height: 50px; flex: 0 0 50px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(163, 152, 115, .45); background: transparent;
    color: var(--ev-cream); cursor: pointer; transition: border-color .3s ease, color .3s ease;
}
.ev-pdp__wish:hover, .ev-pdp__wish.active { border-color: var(--ev-gold-bright); color: var(--ev-gold-bright); }

.ev-pdp__form button.ev-pdp__buy-now {
    width: 100%; text-align: center; margin-top: 0;
    border: 1px solid rgba(163, 152, 115, .55); background: transparent;
    font-family: var(--ev-font-display); font-size: 14px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ev-white); padding: 15px 28px; cursor: pointer;
    transition: background .4s ease, color .4s ease;
}
.ev-pdp__form button.ev-pdp__buy-now:hover { background: var(--ev-cream); color: var(--ev-navy); border-color: var(--ev-cream); }

.ev-pdp__minor { margin-top: 0; }
.ev-pdp__form button.ev-pdp__minor-btn {
    background: transparent; border: 0; padding: 0; cursor: pointer;
    font-family: var(--ev-font-body); font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.ev-pdp__form button.ev-pdp__minor-btn:hover { color: var(--ev-gold-bright); background: transparent; }

/* ---------- service grid ---------- */
.ev-service {
    margin-top: 6px; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px; background: rgba(163, 152, 115, .28); border: 1px solid rgba(163, 152, 115, .28);
}
.ev-service__cell { background: var(--ev-navy); padding: 18px 16px; display: flex; flex-direction: column; gap: 9px; }
.ev-service__cell svg { color: var(--ev-gold); }
.ev-service__title {
    font-family: var(--ev-font-display); font-size: 12px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ev-cream);
}
.ev-service__text { font-family: var(--ev-font-body); font-size: 11.5px; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, .5); }

/* ---------- trust row ---------- */
.ev-trust { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ev-trust__item {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ev-font-body); font-size: 11px; letter-spacing: .16em;
    text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.ev-trust__item svg { color: var(--ev-gold); flex-shrink: 0; }

/* ---------- craft & composition band ---------- */
.ev-band {
    --ev-band-image: none;
    background-image: linear-gradient(180deg, rgba(5, 13, 31, .86), rgba(5, 13, 31, .94)), var(--ev-band-image);
    background-color: var(--ev-navy);
    background-size: cover; background-position: center;
    border-top: 2px solid var(--ev-bronze); border-bottom: 2px solid var(--ev-bronze);
    padding: clamp(40px, 5vw, 80px) var(--ev-gutter);
}
.ev-band__inner { max-width: 1080px; margin: 0 auto; }
.ev-band .ev-head { margin-bottom: clamp(22px, 2.4vw, 32px); }

.ev-tabs { margin-top: 0; }
.ev-tabs__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; border-bottom: 1px solid rgba(163, 152, 115, .32); }
.ev-tabs__btn {
    padding: 13px 22px; font-family: var(--ev-font-display); font-size: 12.5px;
    letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
    border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    background: none; cursor: pointer; transition: color .3s ease, border-color .3s ease;
}
.ev-tabs__btn:hover { color: var(--ev-cream); }
.ev-tabs__btn.is-active { color: var(--ev-gold-bright); border-bottom-color: var(--ev-gold-bright); }

.ev-tabs__panel { padding: clamp(24px, 3vw, 36px) 0 0; }

.ev-tabs__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(24px, 3vw, 56px); align-items: start; }

/* No transition on max-height: the panel starts hidden, and a transition
   begun while `display:none` stays pending and pins the computed value. */
.ev-tabs__prose { position: relative; overflow: hidden; max-height: 320px; }
.ev-tabs__prose.is-open { max-height: 4000px; }
/* Only drawn when the copy is actually clipped. It used to be painted
   unconditionally, so a description short enough to fit — one line, very
   often — sat under a gradient to nowhere and read as blurred or half-faded.
   evara.js adds is-clipped when the text really does overflow. */
.ev-tabs__fade { display: none; }
.ev-tabs__prose.is-clipped .ev-tabs__fade { display: block; }
.ev-tabs__prose.is-open .ev-tabs__fade { display: none; }

.ev-tabs__fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
    background: linear-gradient(180deg, rgba(5, 13, 31, 0), rgba(5, 13, 31, .96));
    pointer-events: none;
}
/* Hidden outright rather than faded: an opacity transition started while the
   panel is display:none stays pending and never resolves. */
.ev-tabs__prose.is-open .ev-tabs__fade { display: none; }

.ev-tabs__prose .ck-content,
.ev-tabs__plain { display: flex; flex-direction: column; gap: 16px; }
.ev-tabs__prose .ck-content p,
.ev-tabs__plain p {
    margin: 0; font-family: var(--ev-font-accent); font-size: 18px; font-weight: 300;
    line-height: 1.85; color: rgba(255, 255, 255, .7);
}
.ev-tabs__prose .ck-content p:first-child {
    font-size: 20px; font-weight: 400; font-style: italic; line-height: 1.7; color: var(--ev-cream);
}

.ev-tabs__more {
    display: block; margin: clamp(22px, 2.4vw, 32px) auto 0;
    border: 1px solid rgba(163, 152, 115, .5); background: transparent;
    padding: 11px 26px; cursor: pointer;
    font-family: var(--ev-font-body); font-size: 11px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--ev-cream);
    transition: border-color .3s ease, color .3s ease;
}
.ev-tabs__more:hover { border-color: var(--ev-gold-bright); color: var(--ev-gold-bright); }
.ev-tabs__more[hidden] { display: none; }

/* at a glance */
.ev-glance {
    display: flex; flex-direction: column; gap: 14px;
    border-left: 1px solid rgba(163, 152, 115, .3);
    padding-left: clamp(18px, 2vw, 28px);
}
.ev-glance__label {
    margin: 0; font-family: var(--ev-font-body); font-size: 10.5px;
    letter-spacing: .28em; text-transform: uppercase; color: var(--ev-gold);
}
.ev-glance__list {
    margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px;
    font-family: var(--ev-font-body); font-size: 12.5px; font-weight: 300;
}
.ev-glance__list dt { color: rgba(255, 255, 255, .45); letter-spacing: .1em; }
.ev-glance__list dd { margin: 0; color: rgba(255, 255, 255, .8); }

/* card rows for the other tabs */
.ev-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(24px, 3vw, 54px); }
.ev-cards__cell { display: flex; flex-direction: column; gap: 12px; }
.ev-cards__cell h3 {
    margin: 0; font-family: var(--ev-font-display); font-size: 15px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ev-cream);
}
.ev-cards__cell h3::after { content: ""; display: block; height: 1px; margin-top: 12px; background: rgba(163, 152, 115, .3); }
.ev-cards__cell p {
    margin: 0; font-family: var(--ev-font-accent); font-size: 18px; font-weight: 300;
    line-height: 1.8; color: rgba(255, 255, 255, .66);
}

/* ---------- availability line ----------
   The "12 products available" / "In stock" line above Add to Bag is hidden;
   a stock count is not something the shop wants to advertise. Out-of-stock
   and backorder warnings keep showing, since those change what the shopper
   can do. The plugin's variation switch rewrites this box with the same
   classes, so the rule holds after a swatch change too. */
.number-items-available .text-success { display: none; }
.number-items-available:not(:has(.text-danger, .text-warning)) { display: none; }

/* ---------- assurance strip ---------- */
.ev-assure { background: var(--ev-navy); border-bottom: 1px solid rgba(163, 152, 115, .28); }
.ev-assure__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(20px, 2.6vw, 40px); padding: clamp(30px, 3.4vw, 48px) 0;
}
.ev-assure__cell { display: flex; gap: 14px; align-items: flex-start; }
.ev-assure__cell svg { color: var(--ev-gold); flex-shrink: 0; }
.ev-assure__cell > div { display: flex; flex-direction: column; gap: 6px; }
.ev-assure__title {
    font-family: var(--ev-font-display); font-size: 13px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ev-cream);
}
.ev-assure__text { font-family: var(--ev-font-body); font-size: 12px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, .55); }

.ev-assure__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px 24px; padding: 0 0 clamp(26px, 3vw, 38px);
}
/* With the four cells removed in Theme Options, the foot is the first thing
   in the strip and needs its own top padding, or it hugs the rule above. */
.ev-assure__foot:first-child { padding-top: clamp(26px, 3vw, 38px); }
.ev-assure__stat { font-family: var(--ev-font-accent); font-size: 18px; font-style: italic; color: rgba(255, 255, 255, .6); }
.ev-assure__pay { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-assure__pay span {
    border: 1px solid rgba(163, 152, 115, .4); padding: 7px 13px;
    font-family: var(--ev-font-body); font-size: 10.5px; letter-spacing: .2em;
    text-transform: uppercase; color: rgba(255, 255, 255, .6);
}

@media (max-width: 700px) {
    .ev-pdp__thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .ev-pdp__buy { gap: 10px; }
    .ev-pdp__form button.ev-pdp__add { flex: 1 1 100%; order: 3; }
    .ev-glance { border-left: 0; border-top: 1px solid rgba(163, 152, 115, .3); padding-left: 0; padding-top: 22px; }
}

/* ==========================================================================
   Gallery — hover zoom and lightbox
   ========================================================================== */

.ev-pdp__stage { position: relative; cursor: zoom-in; }

/* The frame stays put; only this inner box clips the scaled image. */
.ev-pdp__stage-inner { overflow: hidden; display: block; }
.ev-pdp__stage-inner img {
    width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block;
    transform-origin: center center;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
}
.ev-pdp__stage.is-zooming .ev-pdp__stage-inner img { transition: transform .12s linear; }

.ev-pdp__zoom-hint {
    position: absolute; right: 20px; bottom: 20px; z-index: 2;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(163, 152, 115, .5);
    background: rgba(5, 13, 31, .72);
    color: var(--ev-cream);
    opacity: 0; transition: opacity .3s ease, border-color .3s ease;
    pointer-events: none;
}
.ev-pdp__stage:hover .ev-pdp__zoom-hint { opacity: 1; }

@media (hover: none) {
    .ev-pdp__stage { cursor: pointer; }
    .ev-pdp__zoom-hint { opacity: 1; }
}

/* ---------- lightbox ---------- */
.ev-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(16px, 4vw, 56px);
    background: rgba(5, 13, 31, .96);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.ev-lightbox.is-open { opacity: 1; visibility: visible; }

.ev-lightbox__frame {
    position: relative;
    max-width: min(1100px, 100%); max-height: 100%;
    padding: 10px;
    border: 1px solid rgba(163, 152, 115, .45);
    background: var(--ev-navy);
}
.ev-lightbox__frame img {
    display: block;
    max-width: 100%; max-height: calc(100vh - clamp(112px, 8vw, 152px));
    width: auto; height: auto; object-fit: contain;
}

.ev-lightbox__btn {
    position: absolute;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid rgba(163, 152, 115, .5);
    background: rgba(5, 13, 31, .82);
    color: var(--ev-cream);
    cursor: pointer;
    transition: border-color .3s ease, color .3s ease;
}
.ev-lightbox__btn:hover { border-color: var(--ev-gold-bright); color: var(--ev-gold-bright); }
.ev-lightbox__close { top: -1px; right: -1px; }
.ev-lightbox__prev { left: clamp(-56px, -4vw, -22px); top: 50%; transform: translateY(-50%); }
.ev-lightbox__next { right: clamp(-56px, -4vw, -22px); top: 50%; transform: translateY(-50%); }

.ev-lightbox__count {
    position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
    font-family: var(--ev-font-body); font-size: 11px; letter-spacing: .22em;
    text-transform: uppercase; color: rgba(255, 255, 255, .5);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (max-width: 720px) {
    .ev-lightbox__prev { left: 6px; }
    .ev-lightbox__next { right: 6px; }
    .ev-lightbox__close { top: 6px; right: 6px; }
}

/* The search trigger is a Shofy button dropped into the Evara icon row; it
   arrives with the theme's own reset, so restate the circle treatment. */
.ev-icon-btn.tp-search-open-btn,
button.tp-search-open-btn.ev-icon-btn {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(163, 152, 115, .42) !important;
    border-radius: 50% !important;
    background: transparent !important;
    padding: 0 !important;
    color: var(--ev-cream) !important;
    transition: border-color .3s ease, color .3s ease;
}
.ev-icon-btn.tp-search-open-btn:hover { border-color: var(--ev-gold-bright) !important; color: var(--ev-gold-bright) !important; }
.ev-icon-btn.tp-search-open-btn svg { stroke: currentColor; }

/* The stepper is shared by the product page, the mini-cart and the cart table.
   Shofy positions its +/- absolutely and rounds the wrapper, so both are
   restated globally rather than only inside `.ev-pdp__form`. */
.ev-qty,
.tp-product-quantity.ev-qty {
    border-radius: 0 !important;
    overflow: visible;
    width: auto;
}
.ev-qty .ev-qty__btn,
.ev-qty .tp-cart-minus,
.ev-qty .tp-cart-plus {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ev-cream) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    cursor: pointer;
    user-select: none;
}
.ev-qty .ev-qty__btn:hover { color: var(--ev-gold-bright) !important; }
.ev-qty .ev-qty__input {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: center;
    color: var(--ev-cream) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   Text variation swatches (ring size, length, anything non-visual)

   The ecommerce plugin styles these at

       .bb-product-attribute-swatch-list.text-swatch li .bb-product-attribute-text-display

   which is four selectors deep, and its rule for the *colour* swatches — where
   this element is an overlay sitting on top of a circle — sets position
   absolute with translate(-50%, -50%). Applied to a text swatch, the label is
   dragged out of its own box: what rendered was a blank white square with the
   size sitting invisibly outside it.

   The selectors below deliberately mirror the plugin's own depth and add the
   form scope on top, because anything shorter loses the cascade to it. That is
   the whole reason this block is written the long way round.
   ========================================================================== */

.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li {
    margin: 0;
}

.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li label {
    display: block;
    margin: 0;
    cursor: pointer;
}

.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li .bb-product-attribute-text-display,
.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li .bb-product-attribute-swatch-display {
    position: static;
    transform: none;
    inset-inline-start: auto;
    top: auto;
    width: auto;
    height: auto;
    min-width: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background-color: transparent;
    border: 1px solid rgba(163, 152, 115, .45);
    border-radius: 0;
    color: var(--ev-cream);
    padding: 11px 14px;
    font-size: 12px;
    letter-spacing: .08em;
    overflow: visible;
    transition: border-color .2s ease, color .2s ease;
}

.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li .bb-product-attribute-text-display:hover {
    border-color: rgba(212, 175, 122, .8);
}

/* Selected. The plugin marks it with a folded corner and a white tick drawn in
   --primary-color; neither reads on navy, so both are removed and the state is
   shown in gold, as everywhere else on this form. */
.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="radio"]:checked ~ .bb-product-attribute-text-display,
.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="checkbox"]:checked ~ .bb-product-attribute-text-display {
    background-color: rgba(212, 175, 122, .12);
    border-color: var(--ev-gold-bright);
    color: var(--ev-gold-bright);
}

.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li .bb-product-attribute-text-display::before,
.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li .bb-product-attribute-text-display::after,
.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="radio"]:checked ~ .bb-product-attribute-text-display::before,
.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="radio"]:checked ~ .bb-product-attribute-text-display::after,
.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="checkbox"]:checked ~ .bb-product-attribute-text-display::before,
.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="checkbox"]:checked ~ .bb-product-attribute-text-display::after {
    content: none;
}

/* A combination that cannot be bought should say so, not just refuse clicks. */
.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li.disabled .bb-product-attribute-text-display,
.ev-pdp__form .bb-product-attribute-swatch-list.text-swatch li.out-of-stock .bb-product-attribute-text-display {
    opacity: .38;
    text-decoration: line-through;
    cursor: not-allowed;
}

.ev-pdp__form .bb-product-attribute-swatch-title {
    font-size: 11px;
    letter-spacing: var(--ev-tracking-label, .14em);
    text-transform: uppercase;
    color: rgba(253, 224, 191, .7);
    margin: 0 0 10px;
}

/* ==========================================================================
   Product options (engraving, chain length, gift wrap)

   These come from the ecommerce plugin's renderer wearing Bootstrap's form
   classes, which paint a white field. On the navy summary column that reads as
   a hole punched in the page, and text typed into it was black on white while
   every other field on the site is cream on navy.

   Scoped to #product-option, the container the plugin wraps all of them in,
   because the per-option classes are not consistent: a text field arrives as
   .option-field .product-option-7 while a dropdown arrives as
   .variant-radio .product-option. The container is the one stable handle.
   ========================================================================== */

.ev-pdp__form #product-option .form-group {
    margin-bottom: 18px;
}

.ev-pdp__form #product-option .product-option-item-label label,
.ev-pdp__form #product-option label.form-label {
    display: block;
    font-size: 11px;
    letter-spacing: var(--ev-tracking-label, .14em);
    text-transform: uppercase;
    color: rgba(253, 224, 191, .7);
    margin-bottom: 8px;
}

.ev-pdp__form #product-option .extra-price {
    color: var(--ev-gold-bright);
}

.ev-pdp__form #product-option input[type="text"],
.ev-pdp__form #product-option input[type="number"],
.ev-pdp__form #product-option textarea,
.ev-pdp__form #product-option select,
.ev-pdp__form #product-option .form-control,
.ev-pdp__form #product-option .form-select {
    display: block;
    width: 100%;
    background-color: rgba(255, 255, 255, .04);
    border: 1px solid rgba(163, 152, 115, .45);
    border-radius: 0;
    color: var(--ev-cream);
    padding: 12px 14px;
    font-family: inherit;
    font-size: 13px;
    box-shadow: none;
}

.ev-pdp__form #product-option select,
.ev-pdp__form #product-option .form-select {
    /* Bootstrap's caret is a dark SVG and vanishes on navy. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d4af7a' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    appearance: none;
    padding-right: 38px;
}

.ev-pdp__form #product-option input:focus,
.ev-pdp__form #product-option textarea:focus,
.ev-pdp__form #product-option select:focus,
.ev-pdp__form #product-option .form-control:focus,
.ev-pdp__form #product-option .form-select:focus {
    outline: none;
    border-color: rgba(212, 175, 122, .8);
    background-color: rgba(255, 255, 255, .06);
    box-shadow: none;
}

.ev-pdp__form #product-option input::placeholder,
.ev-pdp__form #product-option textarea::placeholder {
    color: rgba(253, 224, 191, .38);
}

/* A dropdown's own list is painted by the OS and needs its own background,
   or it inherits white-on-white. */
.ev-pdp__form #product-option select option {
    background-color: #0d1a34;
    color: var(--ev-cream);
}

/* Checkboxes and radios — the paid add-ons. Only these go inline; the flex
   must not reach the text fields or the label ends up beside the input. */
.ev-pdp__form #product-option .form-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
    padding-left: 0;
}

.ev-pdp__form #product-option input[type="checkbox"],
.ev-pdp__form #product-option input[type="radio"] {
    display: inline-block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin: 0;
    padding: 0;
    accent-color: var(--ev-gold, #a39873);
    background-color: transparent;
    border: 1px solid rgba(163, 152, 115, .6);
    cursor: pointer;
}

.ev-pdp__form #product-option input[type="radio"] {
    border-radius: 50%;
}

.ev-pdp__form #product-option .form-check .form-check-label,
.ev-pdp__form #product-option .form-check label {
    display: inline;
    font-size: 13px;
    text-transform: none;
    letter-spacing: .02em;
    color: rgba(253, 224, 191, .88);
    margin: 0;
    cursor: pointer;
}

/* ==========================================================================
   Visual swatches carrying a photograph

   With "use image from product variation" switched on, each swatch shows a
   picture of that variation rather than a flat colour. The plugin draws them
   at 25px, which is right for a colour dot and useless for a photograph — at
   that size a necklace is unreadable mush.

   The selectors mirror the plugin's own depth and add the form scope, because
   anything shorter loses the cascade to it.
   ========================================================================== */

.ev-pdp__form .bb-product-attribute-swatch-list.visual-swatch {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ev-pdp__form .bb-product-attribute-swatch-list.visual-swatch li {
    margin: 0;
}

.ev-pdp__form .bb-product-attribute-swatch-list.visual-swatch li .bb-product-attribute-swatch-display,
.ev-pdp__form .bb-product-attribute-swatch-list.visual-swatch li .bb-product-attribute-text-display {
    width: 48px;
    height: 48px;
    border-radius: 50%;

    /* The image arrives as an inline background, so it must fill the circle
       rather than tile at its natural size. */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 1px solid rgba(163, 152, 115, .4);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ev-pdp__form .bb-product-attribute-swatch-list.visual-swatch li .bb-product-attribute-swatch-display:hover {
    border-color: rgba(212, 175, 122, .85);
}

/* Selected: a gold ring set off the edge, so it reads against a busy photo
   in a way a border alone would not. */
.ev-pdp__form .bb-product-attribute-swatch-list.visual-swatch li:not(.disabled) input[type="radio"]:checked ~ .bb-product-attribute-swatch-display,
.ev-pdp__form .bb-product-attribute-swatch-list.visual-swatch li:not(.disabled) input[type="checkbox"]:checked ~ .bb-product-attribute-swatch-display {
    border-color: var(--ev-gold-bright);
    box-shadow: 0 0 0 2px var(--ev-navy), 0 0 0 3px var(--ev-gold-bright);
}

/* The plugin crosses out an unavailable swatch using --primary-color, which
   does not read here; the strike is redrawn in the house tone. */
.ev-pdp__form .bb-product-attribute-swatch-list.visual-swatch li.disabled .bb-product-attribute-swatch-display {
    opacity: .35;
    cursor: not-allowed;
}

.ev-pdp__form .bb-product-attribute-swatch-list.visual-swatch.disabled label::before,
.ev-pdp__form .bb-product-attribute-swatch-list.visual-swatch.disabled label::after,
.ev-pdp__form .bb-product-attribute-swatch-list.visual-swatch li.disabled label::before,
.ev-pdp__form .bb-product-attribute-swatch-list.visual-swatch li.disabled label::after {
    background-color: rgba(253, 224, 191, .7);
}

/* ---------- product video ---------- */
.ev-pdp__video { margin-top: 14px; }

.ev-pdp__video-el,
.ev-pdp__video-frame {
    width: 100%;
    display: block;
    border: 1px solid rgba(163, 152, 115, .3);
    border-radius: 4px;
    background: rgba(5, 13, 31, .6);
}

.ev-pdp__video-el { height: auto; }

/* 16:9 without relying on aspect-ratio inside an iframe wrapper. */
.ev-pdp__video-frame { position: relative; padding-top: 56.25%; overflow: hidden; }
.ev-pdp__video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The rail standing alone, on a piece whose long copy has not been written
   yet. auto-fit would stretch a single child the full width of the band and
   leave the terms marooned from their values. */
.ev-tabs__split--glance { grid-template-columns: minmax(0, 420px); }