/* ==========================================================================
   Evara London — mini-cart drawer, cart page and checkout summary
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mini-cart slide-out
   -------------------------------------------------------------------------- */

.cartmini__area,
.cartmini__wrapper,
.tp-cartmini-area,
.tp-cartmini-wrapper {
    background: var(--ev-navy) !important;
    border-left: 1px solid rgba(163, 152, 115, .35) !important;
    color: var(--ev-cream) !important;
}

.cartmini__top,
.cartmini__shipping,
.cartmini__checkout,
.tp-cartmini-top,
.tp-cartmini-checkout {
    background: transparent !important;
    border-color: rgba(163, 152, 115, .25) !important;
}

.cartmini__top-title h4,
.tp-cartmini-title,
.cartmini__title {
    font-family: var(--ev-font-display) !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    letter-spacing: .22em !important;
    text-transform: uppercase;
    color: var(--ev-cream) !important;
}

.cartmini__close-btn,
.tp-cartmini-close-btn {
    background: transparent !important;
    border: 1px solid rgba(163, 152, 115, .4) !important;
    border-radius: 0 !important;
    color: var(--ev-cream) !important;
    width: 32px; height: 32px;
}

.cartmini__close-btn:hover { border-color: var(--ev-gold) !important; color: var(--ev-gold-bright) !important; }

.cartmini__widget-item,
.tp-cartmini-widget-item {
    background: transparent !important;
    border-bottom: 1px solid rgba(163, 152, 115, .18) !important;
    padding-block: 18px !important;
}

.cartmini__thumb img,
.tp-cartmini-thumb img { border: 1px solid rgba(163, 152, 115, .3); border-radius: 0 !important; }

.cartmini__title a,
.tp-cartmini-title a,
.cartmini__content h5 a {
    font-family: var(--ev-font-display) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ev-cream) !important;
}

.cartmini__title a:hover { color: var(--ev-gold-bright) !important; }
.cartmini__price, .tp-cartmini-price { font-family: var(--ev-font-accent) !important; font-size: 15px !important; color: var(--ev-gold) !important; }

/* quantity stepper inside the drawer */
.cartmini__quantity,
.tp-product-quantity.cartmini-quantity,
.cartmini__widget-item .tp-product-quantity {
    border: 1px solid rgba(163, 152, 115, .4) !important;
    background: rgba(11, 23, 49, .5) !important;
    border-radius: 0 !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: stretch;
    overflow: hidden;
}

.cartmini__widget-item .tp-cart-minus,
.cartmini__widget-item .tp-cart-plus { flex: 0 0 34px !important; width: 34px !important; height: 100% !important; }
.cartmini__widget-item .tp-cart-input { flex: 0 0 44px !important; width: 44px !important; height: 100% !important; line-height: 38px !important; }

.cartmini__del, .cartmini__widget-item .remove {
    color: rgba(253, 224, 191, .55) !important;
    background: transparent !important;
    border: 0 !important;
}

.cartmini__del:hover { color: var(--ev-gold-bright) !important; }

/* totals + actions */
.cartmini__checkout-title h4,
.cartmini__checkout-title span,
.cartmini__total {
    font-family: var(--ev-font-body) !important;
    font-size: 12px !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7) !important;
}

.cartmini__checkout-title span:last-child,
.cartmini__total-price { font-family: var(--ev-font-accent) !important; font-size: 17px !important; color: var(--ev-gold) !important; }

.cartmini__checkout-btn a,
.cartmini__checkout-btn .tp-btn,
.tp-cartmini-checkout-btn a {
    display: block;
    border-radius: 0 !important;
    font-family: var(--ev-font-body) !important;
    font-size: 11px !important;
    letter-spacing: .28em !important;
    text-transform: uppercase;
    padding: 15px 20px !important;
    text-align: center;
    margin-bottom: 10px;
}

.cartmini__checkout-btn a:first-child {
    background: var(--ev-gold) !important;
    border: 1px solid var(--ev-gold) !important;
    color: var(--ev-navy) !important;
}

.cartmini__checkout-btn a:last-child {
    background: transparent !important;
    border: 1px solid rgba(163, 152, 115, .55) !important;
    color: var(--ev-gold) !important;
}

.cartmini__empty, .cartmini__empty p {
    color: rgba(255, 255, 255, .5) !important;
    font-family: var(--ev-font-accent) !important;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Cart page: quantity input was rendering as a white box
   -------------------------------------------------------------------------- */

.ev-cart__qty .ev-input,
.ev-cart__table input[type="number"],
.ev-cart__table input[type="text"] {
    background: rgba(5, 13, 31, .6) !important;
    border: 1px solid rgba(163, 152, 115, .4) !important;
    border-radius: 0 !important;
    color: var(--ev-cream) !important;
    height: 46px;
    width: 84px;
    text-align: center;
    font-family: var(--ev-font-body) !important;
    font-size: 15px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.ev-cart__table input::-webkit-outer-spin-button,
.ev-cart__table input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ev-cart__qty .ev-input:focus { outline: none; border-color: var(--ev-gold) !important; }

/* coupon field matches */
.ev-cart__coupon .ev-input {
    background: rgba(5, 13, 31, .6) !important;
    border: 1px solid rgba(163, 152, 115, .4) !important;
    color: var(--ev-cream) !important;
    height: 46px;
}

.ev-cart__coupon .ev-btn { height: 46px; padding-block: 0; display: flex; align-items: center; }

/* totals: one type family, gold only on the grand total */
.ev-cart__totals dt,
.ev-cart__totals dd {
    font-family: var(--ev-font-body) !important;
    font-size: 13px;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .78) !important;
}

.ev-cart__grand dt,
.ev-cart__grand dd {
    font-family: var(--ev-font-accent) !important;
    font-size: 19px !important;
    letter-spacing: 0;
}

.ev-cart__grand dd { color: var(--ev-gold) !important; }

/* --------------------------------------------------------------------------
   Checkout: the order summary panel ships light
   -------------------------------------------------------------------------- */

.checkout-page .checkout-order-summary,
.checkout-page .order-summary,
.checkout-page .checkout-sidebar,
.checkout-page .bg-white,
.checkout-page [class*="summary"] {
    background: rgba(11, 23, 49, .55) !important;
    border: 1px solid rgba(163, 152, 115, .3) !important;
    border-radius: 0 !important;
    color: var(--ev-cream) !important;
}

.checkout-page .list-group-item,
.checkout-page .shipping-method-item,
.checkout-page [class*="shipping"] .form-check {
    background: rgba(5, 13, 31, .5) !important;
    border: 1px solid rgba(163, 152, 115, .25) !important;
    border-radius: 0 !important;
    color: var(--ev-cream) !important;
    margin-bottom: 8px;
}

.checkout-page .list-group-item.active,
.checkout-page .form-check-input:checked ~ * { color: var(--ev-gold-bright) !important; }

.checkout-page .text-muted,
.checkout-page small,
.checkout-page label { color: rgba(255, 255, 255, .7) !important; }

.checkout-page .fw-bold,
.checkout-page strong,
.checkout-page .total-text { color: var(--ev-white) !important; }

.checkout-page img { border: 1px solid rgba(163, 152, 115, .25); }

/* the store row at the top of the summary */
.checkout-page [class*="store"] { background: rgba(163, 152, 115, .1) !important; color: var(--ev-cream) !important; }


/* ==========================================================================
   Wishlist
   ========================================================================== */

.ev-wishlist td { vertical-align: middle; }
.ev-wishlist__thumb img { width: 90px; height: 90px; object-fit: cover; border: 1px solid rgba(163,152,115,.3); display: block; }

.ev-wishlist__name {
    display: block;
    font-family: var(--ev-font-display);
    font-size: 14px;
    letter-spacing: .06em;
    color: var(--ev-white);
    margin-bottom: 6px;
}

.ev-wishlist__name:hover { color: var(--ev-gold-bright); }

.ev-wishlist__sku,
.ev-wishlist__stock {
    display: block;
    font-family: var(--ev-font-body);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ev-wishlist__sku { color: rgba(255,255,255,.45); }
.ev-wishlist__stock { color: var(--ev-gold); margin-top: 4px; }
.ev-wishlist__stock.is-out { color: rgba(224,163,160,.8); }

.ev-wishlist__price { font-family: var(--ev-font-accent); font-size: 17px; color: var(--ev-gold); }
.ev-wishlist__form { margin: 0; }
.ev-wishlist__form .ev-btn { white-space: nowrap; padding: 13px 26px; }

/* Now a submit button rather than a link, so the browser's own button styling
   has to be cleared for it to look the way it did. */
.ev-wishlist__remove-form { display: inline; margin: 0; }

.ev-wishlist__remove {
    font-size: 22px; line-height: 1; color: rgba(253,224,191,.5);
    background: none; border: 0; padding: 4px 8px;
    font-family: inherit; cursor: pointer;
    transition: color .25s ease;
}

.ev-wishlist__remove:hover { color: var(--ev-gold-bright); }

.ev-wishlist__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: clamp(24px, 3vw, 40px);
}

/* share icons the plugin injects */
.ev-wishlist__share a,
.ev-wishlist__share .social-share-item {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(163,152,115,.4) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ev-gold) !important;
    margin-left: 6px;
}

.ev-wishlist__share a:hover { border-color: var(--ev-gold) !important; background: var(--ev-gold) !important; color: var(--ev-navy) !important; }

/* ---------- shared quantity stepper (wishlist, cart) ---------- */

.ev-qty {
    display: inline-flex;
    align-items: stretch;
    height: 46px;
    border: 1px solid rgba(163, 152, 115, .45);
    background: rgba(11, 23, 49, .5);
    overflow: hidden;
}

.ev-qty__btn {
    flex: 0 0 40px;
    width: 40px;
    border: 0;
    background: transparent;
    color: var(--ev-gold);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .25s ease, color .25s ease;
}

.ev-qty__btn:hover { background: rgba(163, 152, 115, .15); color: var(--ev-gold-bright); }

.ev-qty__input {
    flex: 0 0 56px;
    width: 56px;
    border: 0;
    border-inline: 1px solid rgba(163, 152, 115, .3);
    background: transparent;
    color: var(--ev-cream);
    text-align: center;
    font-family: var(--ev-font-body);
    font-size: 15px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.ev-qty__input:focus { outline: none; }
.ev-qty__input::-webkit-outer-spin-button,
.ev-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


/* --------------------------------------------------------------------------
   Mini-cart stepper — the markup is .cartmini__area .tp-product-quantity,
   NOT nested inside .cartmini__widget-item, so scope from the drawer itself.
   -------------------------------------------------------------------------- */

.cartmini__area .tp-product-quantity {
    display: inline-flex !important;
    align-items: stretch !important;
    width: auto !important;
    height: 40px !important;
    margin: 10px 0 !important;
    border: 1px solid rgba(163, 152, 115, .45) !important;
    background: rgba(11, 23, 49, .6) !important;
    border-radius: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
}

.cartmini__area .tp-cart-minus,
.cartmini__area .tp-cart-plus {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ev-gold) !important;
    cursor: pointer;
    font-size: 0;
}

.cartmini__area .tp-cart-minus:hover,
.cartmini__area .tp-cart-plus:hover { background: rgba(163, 152, 115, .15) !important; }

.cartmini__area .tp-cart-minus svg,
.cartmini__area .tp-cart-plus svg {
    display: block !important;
    width: 13px !important;
    height: 13px !important;
    overflow: visible;
}

.cartmini__area .tp-cart-minus svg path,
.cartmini__area .tp-cart-plus svg path { stroke: currentColor !important; stroke-width: 2.2 !important; }

.cartmini__area .tp-cart-input,
.cartmini__area input[type="number"],
.cartmini__area input[type="text"] {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    border: 0 !important;
    border-left: 1px solid rgba(163, 152, 115, .3) !important;
    border-right: 1px solid rgba(163, 152, 115, .3) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ev-cream) !important;
    font-family: var(--ev-font-body) !important;
    font-size: 14px !important;
    line-height: 40px !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
    appearance: textfield;
}

.cartmini__area .tp-cart-input:focus { outline: none !important; box-shadow: none !important; }
.cartmini__area input::-webkit-outer-spin-button,
.cartmini__area input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* drawer buttons */
.cartmini__area .tp-btn {
    border-radius: 0 !important;
    font-family: var(--ev-font-body) !important;
    font-size: 11px !important;
    letter-spacing: .26em !important;
    text-transform: uppercase;
    padding: 15px 20px !important;
    background: var(--ev-gold) !important;
    border: 1px solid var(--ev-gold) !important;
    color: var(--ev-navy) !important;
}

.cartmini__area .tp-btn-border {
    background: transparent !important;
    border: 1px solid rgba(163, 152, 115, .55) !important;
    color: var(--ev-gold) !important;
}


/* the drawer row: thumb fixed, content takes the rest, or the stepper
   (34+48+34) cannot fit in the 112px the content column was getting */
.cartmini__widget-item {
    display: flex !important;
    align-items: flex-start;
    gap: 14px;
}

.cartmini__thumb { flex: 0 0 72px !important; width: 72px !important; }
.cartmini__thumb img { width: 72px !important; height: 72px !important; object-fit: cover; display: block; }

.cartmini__content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    padding-right: 22px;          /* clear of the remove ×  */
}

.cartmini__area .tp-product-quantity { max-width: 100%; }


/* Shofy sets .cartmini__content .tp-product-quantity { width: 75px } at the
   same specificity as a .cartmini__area rule, so go one level deeper and
   pin a min-width the stepper cannot be squeezed below. */
.cartmini__area .cartmini__content .tp-product-quantity,
.cartmini__wrapper .cartmini__content .tp-product-quantity {
    width: auto !important;
    min-width: 116px !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

/* ==========================================================================
   Checkout — the radio circles, and the logo that appears twice
   ========================================================================== */

/* The shipping and payment radios were coming out as clipped ovals with the
   selected colour bleeding past the edge. The blanket `border-radius: 0`
   applied to the checkout panels was landing on the inputs as well, and
   Bootstrap draws the selected dot as a background image sized to a circle it
   no longer was. Sized and rounded explicitly here, with the dot drawn as a
   gradient so it cannot be a fraction out. */
.checkout-page .form-check-input[type="radio"],
.checkout-page input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: .18em;
    padding: 0;
    border: 1px solid rgba(163, 152, 115, .6) !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.checkout-page .form-check-input[type="radio"]:hover,
.checkout-page input[type="radio"]:hover {
    border-color: var(--ev-gold-bright) !important;
}

/* The dot sits inside the ring rather than over it. */
.checkout-page .form-check-input[type="radio"]:checked,
.checkout-page input[type="radio"]:checked {
    border-color: var(--ev-gold-bright) !important;
    background-image: radial-gradient(circle at 50% 50%, var(--ev-gold-bright) 0 40%, transparent 42%) !important;
}

.checkout-page .form-check-input[type="radio"]:focus-visible,
.checkout-page input[type="radio"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(212, 175, 122, .28) !important;
}

/* Keep the label off the ring so nothing overlaps it. */
.checkout-page .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.checkout-page .form-check .form-check-input {
    float: none;
    margin-left: 0;
}

/* The checkout template prints the shop logo again above the form, under the
   theme header that already shows it. One is enough. */
.checkout-page .checkout-logo { display: none !important; }

/* What the customer chose when they saved the piece — "Yellow Gold · Chain
   length: 18 inches" — sitting under the name on the wishlist. */
.ev-wishlist__choice {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--ev-gold);
}