/* Badge --------------------------------------------------------------- */
.tm-plus-panel,
.tm-plus-grid-overlay {
    isolation: isolate;
}

.tm-plus-badge {
    --tm-plus-badge-bg: #1e87f0;
    --tm-plus-badge-color: #fff;
    position: absolute;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 32px);
    padding: 0.35em 0.75em;
    overflow: hidden;
    color: var(--tm-plus-badge-color);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--tm-plus-badge-bg);
    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
    pointer-events: none;
}

.tm-plus-badge--default { --tm-plus-badge-bg: #f1f3f5; --tm-plus-badge-color: #20252a; }
.tm-plus-badge--primary { --tm-plus-badge-bg: #1e87f0; }
.tm-plus-badge--secondary { --tm-plus-badge-bg: #7a4cf5; }
.tm-plus-badge--success { --tm-plus-badge-bg: #22a06b; }
.tm-plus-badge--warning { --tm-plus-badge-bg: #f2a900; --tm-plus-badge-color: #201b0a; }
.tm-plus-badge--danger { --tm-plus-badge-bg: #e63946; }
.tm-plus-badge--dark { --tm-plus-badge-bg: #16181b; }
.tm-plus-badge--light { --tm-plus-badge-bg: rgb(255 255 255 / 92%); --tm-plus-badge-color: #16181b; }

.tm-plus-badge--pill { border-radius: 999px; }
.tm-plus-badge--label { border-radius: 3px; }
.tm-plus-badge--ribbon { border-radius: 2px 2px 2px 0; }
.tm-plus-badge--ribbon::after {
    position: absolute;
    bottom: -5px;
    left: 0;
    border-width: 5px 5px 0 0;
    border-style: solid;
    border-color: color-mix(in srgb, var(--tm-plus-badge-bg), #000 25%) transparent transparent transparent;
    content: "";
}

.tm-plus-badge--top-left { top: 16px; left: 16px; }
.tm-plus-badge--top-center { top: 16px; left: 50%; transform: translateX(-50%); }
.tm-plus-badge--top-right { top: 16px; right: 16px; }
.tm-plus-badge--center-left { top: 50%; left: 16px; transform: translateY(-50%); }
.tm-plus-badge--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tm-plus-badge--center-right { top: 50%; right: 16px; transform: translateY(-50%); }
.tm-plus-badge--bottom-left { bottom: 16px; left: 16px; }
.tm-plus-badge--bottom-center { bottom: 16px; left: 50%; transform: translateX(-50%); }
.tm-plus-badge--bottom-right { right: 16px; bottom: 16px; }

.tm-plus-badge--animate-pulse { animation: tm-plus-badge-pulse 2.4s ease-in-out infinite; }
.tm-plus-badge--animate-float { animation: tm-plus-badge-float 3s ease-in-out infinite; }

@keyframes tm-plus-badge-pulse {
    0%, 100% { box-shadow: 0 8px 24px rgb(0 0 0 / 18%), 0 0 0 0 color-mix(in srgb, var(--tm-plus-badge-bg), transparent 55%); }
    50% { box-shadow: 0 8px 24px rgb(0 0 0 / 18%), 0 0 0 8px transparent; }
}

@keyframes tm-plus-badge-float {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -5px; }
}

/* Grid Overlay -------------------------------------------------------- */
.tm-plus-grid-overlay {
    display: block;
    width: 100%;
    min-height: 220px;
    color: #fff;
}

.tm-plus-grid-overlay--ratio-square { aspect-ratio: 1 / 1; }
.tm-plus-grid-overlay--ratio-landscape { aspect-ratio: 4 / 3; }
.tm-plus-grid-overlay--ratio-wide { aspect-ratio: 16 / 9; }
.tm-plus-grid-overlay--ratio-portrait { aspect-ratio: 3 / 4; }

.tm-plus-grid-overlay__media,
.tm-plus-grid-overlay__media > *,
.tm-plus-grid-overlay__media .el-image,
.tm-plus-grid-overlay__media img,
.tm-plus-grid-overlay__media video {
    width: 100%;
    height: 100%;
}

.tm-plus-grid-overlay__media {
    position: absolute;
    inset: 0;
}

.tm-plus-grid-overlay__media img,
.tm-plus-grid-overlay__media video {
    display: block;
    object-fit: cover;
    transition: transform 650ms cubic-bezier(.2, .7, .2, 1);
}

.tm-plus-grid-overlay--image-zoom:hover .tm-plus-grid-overlay__media img,
.tm-plus-grid-overlay--image-zoom:focus-visible .tm-plus-grid-overlay__media img {
    transform: scale(1.06);
}

.tm-plus-grid-overlay__content {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: flex;
    color: inherit;
}

.tm-plus-grid-overlay__content::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, rgb(8 11 16 / 88%) 100%);
    content: "";
}

.tm-plus-grid-overlay--dark .tm-plus-grid-overlay__content::before { background: rgb(10 12 16 / 76%); }
.tm-plus-grid-overlay--light { color: #17191d; }
.tm-plus-grid-overlay--light .tm-plus-grid-overlay__content::before { background: rgb(255 255 255 / 82%); }
.tm-plus-grid-overlay--primary .tm-plus-grid-overlay__content::before { background: rgb(30 135 240 / 84%); }
.tm-plus-grid-overlay--glass-dark .tm-plus-grid-overlay__content::before { background: rgb(10 12 16 / 48%); backdrop-filter: blur(10px); }
.tm-plus-grid-overlay--glass-light { color: #17191d; }
.tm-plus-grid-overlay--glass-light .tm-plus-grid-overlay__content::before { background: rgb(255 255 255 / 55%); backdrop-filter: blur(10px); }

.tm-plus-grid-overlay__body {
    position: relative;
    width: 100%;
    max-width: 42rem;
}

.tm-plus-grid-overlay--padding-small .tm-plus-grid-overlay__content { padding: 16px; }
.tm-plus-grid-overlay--padding-default .tm-plus-grid-overlay__content { padding: 28px; }
.tm-plus-grid-overlay--padding-large .tm-plus-grid-overlay__content { padding: 42px; }

.tm-plus-grid-overlay--position-top-left .tm-plus-grid-overlay__content { align-items: flex-start; justify-content: flex-start; text-align: left; }
.tm-plus-grid-overlay--position-top-center .tm-plus-grid-overlay__content { align-items: flex-start; justify-content: center; text-align: center; }
.tm-plus-grid-overlay--position-top-right .tm-plus-grid-overlay__content { align-items: flex-start; justify-content: flex-end; text-align: right; }
.tm-plus-grid-overlay--position-center-left .tm-plus-grid-overlay__content { align-items: center; justify-content: flex-start; text-align: left; }
.tm-plus-grid-overlay--position-center .tm-plus-grid-overlay__content { align-items: center; justify-content: center; text-align: center; }
.tm-plus-grid-overlay--position-center-right .tm-plus-grid-overlay__content { align-items: center; justify-content: flex-end; text-align: right; }
.tm-plus-grid-overlay--position-bottom-left .tm-plus-grid-overlay__content { align-items: flex-end; justify-content: flex-start; text-align: left; }
.tm-plus-grid-overlay--position-bottom-center .tm-plus-grid-overlay__content { align-items: flex-end; justify-content: center; text-align: center; }
.tm-plus-grid-overlay--position-bottom-right .tm-plus-grid-overlay__content { align-items: flex-end; justify-content: flex-end; text-align: right; }

.tm-plus-grid-overlay--hover .tm-plus-grid-overlay__content::before { opacity: 0; transition: opacity 350ms ease; }
.tm-plus-grid-overlay--hover .tm-plus-grid-overlay__body { opacity: 0; transition: opacity 350ms ease, transform 350ms ease; }
.tm-plus-grid-overlay--hover:hover .tm-plus-grid-overlay__content::before,
.tm-plus-grid-overlay--hover:focus-visible .tm-plus-grid-overlay__content::before,
.tm-plus-grid-overlay--hover:hover .tm-plus-grid-overlay__body,
.tm-plus-grid-overlay--hover:focus-visible .tm-plus-grid-overlay__body { opacity: 1; }
.tm-plus-grid-overlay--transition-slide-up .tm-plus-grid-overlay__body { transform: translateY(24px); }
.tm-plus-grid-overlay--transition-slide-down .tm-plus-grid-overlay__body { transform: translateY(-24px); }
.tm-plus-grid-overlay--transition-zoom .tm-plus-grid-overlay__body { transform: scale(.92); }
.tm-plus-grid-overlay--hover:hover .tm-plus-grid-overlay__body,
.tm-plus-grid-overlay--hover:focus-visible .tm-plus-grid-overlay__body { transform: none; }

/* WooCommerce Quantity Stepper --------------------------------------- */
.tm-plus-quantity--stepper .tm-plus-quantity {
    display: inline-grid;
    grid-template-columns: auto minmax(2.8rem, auto) auto;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgb(128 128 128 / 32%);
    border-radius: 5px;
    background: #fff;
}

.tm-plus-quantity--stepper .tm-plus-quantity .qty {
    width: 3.5rem;
    min-width: 0;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    appearance: textfield;
}

.tm-plus-quantity--stepper .tm-plus-quantity .qty::-webkit-inner-spin-button,
.tm-plus-quantity--stepper .tm-plus-quantity .qty::-webkit-outer-spin-button { margin: 0; appearance: none; }

.tm-plus-qty-button {
    display: inline-grid;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    place-items: center;
    border: 0;
    color: currentColor;
    font: inherit;
    font-size: 1.25rem;
    background: transparent;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease;
}

.tm-plus-qty-button:hover,
.tm-plus-qty-button:focus-visible { color: #fff; background: #1e87f0; outline: 0; }
.tm-plus-qty-button:disabled { opacity: .35; cursor: not-allowed; }
.tm-plus-quantity--size-small .tm-plus-qty-button { width: 2.25rem; min-height: 2.25rem; }
.tm-plus-quantity--size-large .tm-plus-qty-button { width: 3.25rem; min-height: 3.25rem; }
.tm-plus-quantity--size-large .tm-plus-quantity .qty { width: 4.25rem; }

@media (max-width: 639px) {
    .tm-plus-add-to-cart--sticky-mobile {
        position: sticky;
        z-index: 980;
        bottom: max(0px, env(safe-area-inset-bottom));
        padding: 12px;
        border-top: 1px solid rgb(128 128 128 / 20%);
        background: rgb(255 255 255 / 94%);
        box-shadow: 0 -10px 30px rgb(0 0 0 / 10%);
        backdrop-filter: blur(12px);
    }

    .tm-plus-add-to-cart--sticky-mobile form.cart { display: flex; gap: 8px; }
    .tm-plus-add-to-cart--sticky-mobile .single_add_to_cart_button { flex: 1; }
}

@media (hover: none) {
    .tm-plus-grid-overlay--hover .tm-plus-grid-overlay__content::before,
    .tm-plus-grid-overlay--hover .tm-plus-grid-overlay__body { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tm-plus-badge,
    .tm-plus-grid-overlay__body,
    .tm-plus-grid-overlay__content::before,
    .tm-plus-grid-overlay__media img,
    .tm-plus-grid-overlay__media video { animation: none !important; transition: none !important; }
}