/* ==========================================================================
   COOL BUTTONS — the snowflake floating cart + the "add to cart" button.
   Loaded after style.css and only overrides it. Remove this file's <link>
   (and the cart-bump lines in js/app.js, optional) to go back to the old look.
   ========================================================================== */

/* ---------- Floating cart: a snowflake instead of a circle ---------- */
.cart-link {
    /* chunky six-armed snowflake silhouette (arms + a solid centre for the cart icon) */
    --snow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cg stroke='black' stroke-width='20' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cg%3E%3Cpath d='M0 0V-82'/%3E%3Cpath d='M0 -50L-24 -74M0 -50L24 -74'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cpath d='M0 0V-82'/%3E%3Cpath d='M0 -50L-24 -74M0 -50L24 -74'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cpath d='M0 0V-82'/%3E%3Cpath d='M0 -50L-24 -74M0 -50L24 -74'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cpath d='M0 0V-82'/%3E%3Cpath d='M0 -50L-24 -74M0 -50L24 -74'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cpath d='M0 0V-82'/%3E%3Cpath d='M0 -50L-24 -74M0 -50L24 -74'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cpath d='M0 0V-82'/%3E%3Cpath d='M0 -50L-24 -74M0 -50L24 -74'/%3E%3C/g%3E%3C/g%3E%3Ccircle r='40' fill='black'/%3E%3C/svg%3E");
    width: 74px;
    height: 74px;
    padding: 0;
    gap: 0;
    justify-content: center;
    background: none;
    border: 0;
    box-shadow: none;
    bottom: 22px;
    inset-inline-end: 16px;
    filter: drop-shadow(0 8px 10px rgba(12, 35, 64, 0.4));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.cart-link:hover {
    background: none;
    transform: scale(1.08);
    filter: drop-shadow(0 10px 14px rgba(0, 105, 113, 0.55));
}
.cart-link:focus-visible {
    outline: none;
    filter: drop-shadow(0 0 3px #ffa41c) drop-shadow(0 0 3px #ffa41c);
}
.cart-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, #1d4f8f 0%, #0c2340 55%, #006971 120%);
    -webkit-mask: var(--snow-mask) center / contain no-repeat;
    mask: var(--snow-mask) center / contain no-repeat;
    animation: cart-spin 36s linear infinite;
}
.cart-icon-svg { width: 28px; height: 28px; color: #fff; }
.cart-badge { top: -9px; inset-inline-end: -13px; }

/* the "Cart (3)" label becomes a tooltip on desktop */
@media (min-width: 481px) {
    .cart-link .cart-count-label {
        position: absolute;
        bottom: calc(100% + 4px);
        inset-inline-end: 0;
        padding: 6px 14px;
        border-radius: 999px;
        background: #0c2340;
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
        opacity: 0;
        transform: translateY(4px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .cart-link:hover .cart-count-label,
    .cart-link:focus-visible .cart-count-label { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
    .cart-link { width: 66px; height: 66px; bottom: 30px; inset-inline-end: 12px; background: none; border: 0; }
    .cart-link:hover { background: none; }
    .cart-icon-svg { width: 26px; height: 26px; }
}

/* a little hop when something is added */
.cart-link--bump { animation: cart-bump 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes cart-bump {
    0% { transform: scale(1) rotate(0); }
    35% { transform: scale(1.28) rotate(-14deg); }
    70% { transform: scale(0.95) rotate(6deg); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes cart-spin { to { transform: rotate(360deg); } }

/* ---------- Add to cart button ---------- */
.add-to-cart-btn {
    position: relative;
    overflow: hidden;
    gap: 10px;
    border-radius: 999px;
    color: #0c2340;
    font-weight: 900;
    letter-spacing: 0.01em;
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 60%) no-repeat 160% 0 / 250% 100%,
        linear-gradient(135deg, #ffd166 0%, #ffa41c 62%, #ff7a2f 135%);
    box-shadow: 0 6px 16px rgba(255, 164, 28, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.add-to-cart-btn::before {
    content: "";
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3Zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2Zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2ZM7.17 14.75l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat,
        #0c2340;
    transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.add-to-cart-btn:hover {
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 60%) no-repeat 160% 0 / 250% 100%,
        linear-gradient(135deg, #ffdd8a 0%, #ffb23a 62%, #ff8a45 135%);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(255, 164, 28, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    animation: add-shine 0.9s ease;
}
.add-to-cart-btn:hover::before { transform: rotate(-12deg) scale(1.12); }
.add-to-cart-btn:active { transform: translateY(0) scale(0.97); }
.add-to-cart-btn:focus-visible { outline: 3px solid #0c2340; outline-offset: 3px; }
@keyframes add-shine { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
@media (max-width: 480px) {
    .add-to-cart-btn { gap: 6px; padding: 8px 8px; font-size: 12.5px; white-space: nowrap; }
    .add-to-cart-btn::before { width: 22px; height: 22px; background-size: 13px 13px, auto; }
}

/* the quantity control that replaces the button once an item is in the cart */
.product-card__action .qty-control--full {
    border: 2px solid transparent;
    padding: 3px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #ffd166, #ffa41c 60%, #ff7a2f) border-box;
    box-shadow: 0 4px 12px rgba(255, 164, 28, 0.25);
}
.product-card__action .qty-btn {
    width: 38px;
    height: 38px;
    color: #0c2340;
    font-weight: 900;
    background: #fff3d6;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.product-card__action .qty-btn[data-action="increase"] { background: linear-gradient(135deg, #ffd166, #ffa41c); }
.product-card__action .qty-btn:hover { transform: scale(1.08); filter: brightness(0.97); }
.product-card__action .qty-btn:active { transform: scale(0.94); }
.product-card__action .qty-value { font-size: 17px; font-weight: 900; color: #0c2340; }

@media (prefers-reduced-motion: reduce) {
    .cart-link::before, .cart-link--bump, .add-to-cart-btn:hover { animation: none; }
    .cart-link, .add-to-cart-btn, .add-to-cart-btn::before { transition: none; }
}