/* Wrapper (mostly unchanged) */
.pin-it-image-wrapper {
    position: relative;
    display: inline-block; /* Keeps image flow like the example */
    line-height: 0; /* Prevent extra space below image */
    max-width: 100%; /* Ensure wrapper doesn't overflow */
    vertical-align: top; /* Good practice for inline-block alignment */
}

.pin-it-image-wrapper img {
     max-width: 100%;
     height: auto;
     display: block; /* Prevent extra space below image */
}

/* --- The Pin Button --- */
.wpi-pin-button {
    /* Positioning */
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;

    /* Box Model & Appearance */
    background-color: #cb2027 !important; /* Darker Pinterest red */
    color: white !important;
    border: none; /* Remove default border */
    border-radius: 16px; /* Rounded corners */
    padding: 8px 14px; /* Adjust padding (more horizontal) */
    cursor: pointer;
    text-decoration: none; /* Remove underline */
    box-sizing: border-box;
    background-image: none !important;

    /* --- Flexbox for SIDE-BY-SIDE Layout --- */
    display: inline-flex !important; /* FORCE inline-flex display */
    align-items: center; /* Vertically center icon and text */
    justify-content: center; /* Horizontally center if needed */
    flex-direction: row; /* Explicitly ensure horizontal flow */
    flex-wrap: nowrap; /* Prevent wrapping */
    gap: 7px; /* Space BETWEEN icon and text */

    /* Text Styling */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1; /* Critical: keep line height tight */
    white-space: nowrap; /* Prevent text breaking */

    /* Hover/Visibility */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.2s ease, visibility 0s linear 0.2s, transform 0.2s ease !important;
}

/* Hover State */
.pin-it-image-wrapper:hover .wpi-pin-button {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s !important; /* Ensure transition applies immediately on hover */
}

.wpi-pin-button:hover{
    background-color: #cb2027 !important; /* Darker Pinterest red */
    color: white !important;
}

/* --- Icon Span --- */
.wpi-pin-icon-wrap {
    display: inline-flex; /* Make span behave like an inline flex container */
    align-items: center; /* Vertically center SVG inside */
    justify-content: center; /* Horizontally center SVG inside */
    line-height: 0; /* Prevent line-height issues */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Icon SVG */
.wpi-pin-icon-wrap svg {
    width: 20px; /* Icon dimensions */
    height: 20px;
    fill: currentColor; /* Inherit white color */
    display: block; /* Prevents extra space under SVG */
    vertical-align: middle; /* Helps alignment */
}

/* --- Text Span --- */
.wpi-pin-text-wrap {
    display: inline-block; /* Simple inline block for text */
    line-height: 1; /* Match button's line height */
    vertical-align: middle; /* Align vertically with icon */
    flex-shrink: 0; /* Prevent text from shrinking weirdly */
    font-size: 17px;;
}

/* --- Debugging --- */
/* Uncomment these lines temporarily if it's STILL stacking */
/*
.wpi-pin-button,
.wpi-pin-icon-wrap,
.wpi-pin-text-wrap {
    outline: 1px dotted lime !important;
}
*/