/* ======================================================================
   Baby & Kids preset — component decorations
   Scoped to [data-mt24-preset="baby"].
   ====================================================================== */

[data-mt24-preset="baby"] {

    /* Buttons: pillowy, gently lift on hover. */
    .mt24-btn {
        font-weight: 600;
        border-radius: var(--mt24-radius-lg);
        padding: 12px 24px;
    }
    .mt24-btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--mt24-shadow-md);
    }
    /* When the button is glued to an input (header search, coupon field,
       any input-group), the lift breaks alignment with its sibling. Keep
       the shadow boost but kill the translate — the button stays flush. */
    .mt24-search-form .mt24-btn:hover,
    .mt24-input-group .mt24-btn:hover,
    .input-group .mt24-btn:hover {
        transform: none;
    }

    /* Product card: pillow-rounded image + soft shadow on hover. */
    .mt24-prod-card,
    .mt24-product-card {
        border-radius: var(--mt24-radius-lg);
        overflow: hidden;
        background: var(--mt24-bg);
        transition: box-shadow var(--mt24-duration) var(--mt24-ease),
                    transform var(--mt24-duration) var(--mt24-ease);
    }
    .mt24-prod-card:hover,
    .mt24-product-card:hover {
        box-shadow: var(--mt24-shadow-lg);
        transform: translateY(-3px);
    }
    .mt24-prod-card__image,
    .mt24-product-card__image {
        border-radius: 0;
    }

    /* Badges: very rounded, slight color softening to match the pastels. */
    .mt24-badge {
        border-radius: var(--mt24-radius-full);
        padding: 4px 12px;
        font-weight: 700;
    }

    /* Section headers: friendly heart-y dot accent. */
    .mt24-section-header__title {
        position: relative;
        display: inline-block;
    }
    .mt24-section-header__title::after {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-left: 8px;
        border-radius: 50%;
        background: var(--mt24-primary);
        vertical-align: middle;
        opacity: 0.7;
    }

    /* Inputs: rounded pill style. */
    .mt24-input {
        border-radius: var(--mt24-radius-lg);
        padding: 12px 16px;
    }
    /* But when the input shares an input-group with an adjacent button,
       restore the flattened inner edges from the base — the preset's
       single-class .mt24-input rule above otherwise wins by source order
       and both elements keep their full radius, so the pair reads as two
       pills colliding instead of one attached unit. */
    .mt24-input-group > .mt24-input,
    .mt24-input-group > .mt24-input-group__input,
    .mt24-input-group > input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .mt24-input-group > .mt24-btn,
    .mt24-input-group > .mt24-input-group__btn,
    .mt24-input-group > button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    /* Category cards (when present): soft pastel placeholders if no image. */
    .ui-block--category_grid .mt24-category-card {
        border-radius: var(--mt24-radius-xl);
        overflow: hidden;
    }

    /* Newsletter: rounded pill bar. */
    .ui-block--newsletter .mt24-input,
    .ui-block--newsletter .mt24-btn {
        border-radius: var(--mt24-radius-full);
    }

    /* Price: rounded weight, friendly color. */
    .mt24-price--current {
        font-weight: 700;
    }

    /* Hero overlay text gets a soft drop shadow so light pastel text
       stays legible over busy product photos. */
    .mt24-hero-banner__title,
    .mt24-hero-banner__subtitle {
        text-shadow: 0 2px 12px rgba(0,0,0,0.25);
    }
}