/* ============================================================
   shopin.city — il "+" sulla card prodotto
   Caricato per ultimo.

   Il bottone lungo sotto la card è sparito: l'aggiunta si fa dal
   cerchio in basso a destra della foto, dove il pollice arriva
   senza spostare la mano. In alto a destra resta il logo del
   negozio, in alto a sinistra lo sconto e il cuore.
   ============================================================ */

.card-add,
.card-buy > .card-add { display: none !important; }

/* --------------------------------------------------- il "+" */

.card-plus {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #08090E;
    font-size: 1.55rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    transition: transform .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}

.card-plus span { display: block; margin-top: -3px; }

.card-plus:hover {
    background: var(--blue);
    color: #fff;
    transform: scale(1.08);
}

.card-plus:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Aperto il pannello taglie, il "+" diventa una "x". */
.card-plus[aria-expanded="true"] {
    background: var(--blue);
    color: #fff;
    transform: rotate(45deg);
}

/* Mentre la richiesta è in volo. */
.card-plus.wn-loading,
.card-plus[data-attach-loading].oc-loading {
    opacity: .6;
    pointer-events: none;
}

/* ------------------------------------- cuore e logo negozio */

/* Il cuore si sposta in alto a sinistra: in basso a destra ora
   c'è il "+", e due cerchi nello stesso angolo si coprirebbero. */
.product-card .wish-btn {
    top: auto;
    bottom: auto;
    left: 8px;
    right: auto;
    top: 8px;
    width: 32px;
    height: 32px;
    opacity: 1;
    transform: none !important;
}

/* Con lo sconto il cuore scende sotto l'etichetta. */
.product-card:has(.badge-sale) .wish-btn { top: 42px; }

.product-card .wish-btn svg { width: 16px; height: 16px; }

/* Il logo del negozio resta in alto a destra, ben visibile. */
.product-card-mono {
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

.product-card-mono.has-logo .shop-mono-img { padding: 4px; }

/* ------------------------------ pannello taglie sotto la card */

.card-buy { margin-top: 8px; }
.card-sizes { margin-top: 0; }

@media (max-width: 460px) {
    .card-plus { width: 36px; height: 36px; font-size: 1.4rem; }
    .product-card-mono { width: 32px; height: 32px; }
    .product-card .wish-btn { width: 28px; height: 28px; }
    .product-card .wish-btn svg { width: 14px; height: 14px; }
}