.pecta-hotspots {
    position: relative;
    width: 100%;
    max-width: 100%;
    line-height: 1.35;
    overflow: visible;
}

.pecta-hotspots *,
.pecta-hotspots *::before,
.pecta-hotspots *::after {
    box-sizing: border-box;
}

.pecta-hotspots__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.pecta-hotspots__layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Hotspot */
.pecta-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: auto;
}

.pecta-hotspot.is-open { z-index: 50; }

.pecta-hotspots .pecta-hotspot__trigger {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    display: block !important;
    width: max(42px, var(--hotspot-size)) !important;
    height: max(42px, var(--hotspot-size)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 1 !important;
    cursor: pointer;
}

.pecta-hotspot__dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--hotspot-color);
    border: 3px solid #fff;
    box-shadow: 0 2px 9px rgba(0,0,0,.30);
    z-index: 2;
}

.pecta-hotspot__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--hotspot-color);
    opacity: .6;
}

.pecta-hotspot--ripple .pecta-hotspot__ring { animation: pectaRipple 2s infinite; }
.pecta-hotspot--pulse .pecta-hotspot__dot { animation: pectaPulse 1.7s infinite; }
.pecta-hotspot--glow .pecta-hotspot__dot { animation: pectaGlow 1.8s infinite; }
.pecta-hotspot--none .pecta-hotspot__ring { display: none; }

@keyframes pectaRipple {
    0% { transform: translate(-50%,-50%) scale(.7); opacity: .8; }
    70%,100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
}
@keyframes pectaPulse {
    0%,100% { transform: translate(-50%,-50%) scale(1); }
    50% { transform: translate(-50%,-50%) scale(1.16); }
}
@keyframes pectaGlow {
    0%,100% { box-shadow: 0 2px 9px rgba(0,0,0,.3), 0 0 0 0 color-mix(in srgb,var(--hotspot-color) 0%,transparent); }
    50% { box-shadow: 0 2px 9px rgba(0,0,0,.3), 0 0 0 9px color-mix(in srgb,var(--hotspot-color) 26%,transparent); }
}

.pecta-hotspots .pecta-hotspot__trigger:focus-visible {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 2px;
}

/* Popup */
.pecta-hotspot__popup {
    position: absolute;
    width: var(--pecta-card-width,230px);
    background: #fff;
    border: 1px solid rgba(12,26,47,.11);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(12,26,47,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    overflow: hidden;
    z-index: 40;
}

.pecta-hotspot.is-open .pecta-hotspot__popup {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.pecta-hotspot.pos-right .pecta-hotspot__popup { left: calc(50% + 24px); top: 50%; transform: translateY(-50%) translateX(6px); }
.pecta-hotspot.pos-right.is-open .pecta-hotspot__popup { transform: translateY(-50%); }
.pecta-hotspot.pos-left .pecta-hotspot__popup { right: calc(50% + 24px); top: 50%; transform: translateY(-50%) translateX(-6px); }
.pecta-hotspot.pos-left.is-open .pecta-hotspot__popup { transform: translateY(-50%); }
.pecta-hotspot.pos-top .pecta-hotspot__popup { left: 50%; bottom: calc(50% + 24px); transform: translateX(-50%) translateY(-6px); }
.pecta-hotspot.pos-top.is-open .pecta-hotspot__popup { transform: translateX(-50%); }
.pecta-hotspot.pos-bottom .pecta-hotspot__popup { left: 50%; top: calc(50% + 24px); transform: translateX(-50%) translateY(6px); }
.pecta-hotspot.pos-bottom.is-open .pecta-hotspot__popup { transform: translateX(-50%); }

/* Product card */
.pecta-product-card {
    background: #fff;
    color: #0c1a2f;
}

.pecta-product-card__media {
    position: relative;
    aspect-ratio: var(--pecta-card-ratio,1 / 1);
    background: #fff;
    overflow: hidden;
}

.pecta-hotspots .pecta-product-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.pecta-hotspots .pecta-product-card__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain;
    padding: 13px;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/*
 * Action icon reset is intentionally strict. WooCommerce themes often apply
 * button padding/min-width rules that turn a round icon into an oval.
 */
.pecta-hotspots .pecta-product-card__action,
.pecta-hotspots button.pecta-product-card__action,
.pecta-hotspots a.pecta-product-card__action {
    all: unset;
    box-sizing: border-box !important;
    position: absolute !important;
    z-index: 6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--pecta-action-size,38px) !important;
    height: var(--pecta-action-size,38px) !important;
    min-width: var(--pecta-action-size,38px) !important;
    min-height: var(--pecta-action-size,38px) !important;
    max-width: var(--pecta-action-size,38px) !important;
    max-height: var(--pecta-action-size,38px) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: var(--pecta-action-bg,#fdc210) !important;
    color: var(--pecta-action-color,#0c1a2f) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.15) !important;
    line-height: 1 !important;
    font-size: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease !important;
}

.pecta-hotspots .pecta-product-card__action--circle { border-radius: 999px !important; }
.pecta-hotspots .pecta-product-card__action--rounded { border-radius: 10px !important; }
.pecta-hotspots .pecta-product-card__action--square { border-radius: 0 !important; }

.pecta-hotspots .pecta-product-card__action--top-right { top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; }
.pecta-hotspots .pecta-product-card__action--top-left { top: 10px !important; left: 10px !important; right: auto !important; bottom: auto !important; }
.pecta-hotspots .pecta-product-card__action--bottom-right { bottom: 10px !important; right: 10px !important; top: auto !important; left: auto !important; }
.pecta-hotspots .pecta-product-card__action--bottom-left { bottom: 10px !important; left: 10px !important; top: auto !important; right: auto !important; }

.pecta-hotspots .pecta-product-card__action:hover,
.pecta-hotspots .pecta-product-card__action:focus-visible {
    transform: translateY(-1px) !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.20) !important;
}

.pecta-hotspots .pecta-product-card__action:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}

.pecta-hotspots .pecta-product-card__action svg,
.pecta-hotspots .pecta-product-card__action .pecta-action-svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 52% !important;
    height: 52% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    fill: currentColor !important;
    stroke: none !important;
    overflow: visible !important;
    pointer-events: none !important;
}

.pecta-hotspots .pecta-product-card__action svg path {
    fill: currentColor !important;
    stroke: none !important;
}

.pecta-hotspots .pecta-product-card__action.is-loading {
    opacity: .72 !important;
    pointer-events: none !important;
}

.pecta-hotspots .pecta-product-card__action.is-added {
    transform: scale(1) !important;
}

.pecta-action-svg--spinner { animation: pectaSpin .75s linear infinite; }
@keyframes pectaSpin { to { transform: rotate(360deg); } }

.pecta-product-card__body { padding: 12px 14px 14px; }

.pecta-product-card__category {
    font-size: 11px;
    color: #697386;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pecta-hotspots .pecta-product-card__category a {
    color: inherit !important;
    text-decoration: none !important;
}

.pecta-hotspots .pecta-product-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.7em;
    color: #0c1a2f !important;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none !important;
    box-shadow: none !important;
}

.pecta-product-card__price {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #0c1a2f;
}
.pecta-product-card__price del { opacity: .55; font-weight: 400; }
.pecta-product-card__price ins { text-decoration: none; }

.pecta-product-card__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-top: 1px solid #eef0f2;
    color: #697386;
    font-size: 11px;
}

.pecta-hotspots .pecta-product-card__nav button {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    color: #0c1a2f !important;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 20px !important;
    line-height: 1 !important;
}
.pecta-hotspots .pecta-product-card__nav button:hover { background: #e8eaed !important; }

@media(max-width:767px){
    .pecta-hotspot__popup { width: min(var(--pecta-card-width,230px),70vw); }
    .pecta-hotspots .pecta-hotspot__trigger { width: max(46px,var(--hotspot-size)) !important; height: max(46px,var(--hotspot-size)) !important; }
}

@media(prefers-reduced-motion:reduce){
    .pecta-hotspot__ring,
    .pecta-hotspot__dot,
    .pecta-action-svg--spinner { animation: none !important; }
    .pecta-hotspot__popup { transition: none; }
}