/* ============================================================
   AngelofYou — Override & Complementary Fixes v3
   ============================================================ */

/* Ensure images never overflow */
img { max-width: 100%; height: auto; }

/* Clean up Magento default spacing */
.column.main { padding-top: 0; }

/* Product page gallery */
.gallery-placeholder { border-radius: var(--radius-md); overflow: hidden; }
.fotorama__stage { border-radius: var(--radius-md); }

/* Remove default Magento grey backgrounds */
.page-main { padding-top: 0; }

/* Clean up form inputs globally */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    font-family: var(--font-body);
    font-size: 0.95rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    transition: border-color var(--transition-fast);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(201,149,107,0.1);
}

/* Clean up messages / notices */
.message.success { color: #2e7d32; background: #e8f5e9; border-radius: var(--radius-sm); padding: 14px 20px; margin-bottom: 16px; }
.message.error { color: #c62828; background: #ffebee; border-radius: var(--radius-sm); padding: 14px 20px; margin-bottom: 16px; }

/* Modal popup cleanup */
modal-popup .modal-inner-wrap { border-radius: var(--radius-lg); overflow: hidden; }

/* Page sections spacing */
.cms-home .page-main { padding-top: 0; }

/* Product list item - clean up extra actions */
.product-item .product-item-actions { display: none; }

/* ============================================================
   Mobile Search Icon Fix
   Show search icon on mobile, hide search input by default
   ============================================================ */
@media only screen and (max-width: 767px) {
    .block-search .label {
        display: inline-block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        clip: auto !important;
        margin: 0 !important;
        border: 0 !important;
        padding: 10px !important;
        cursor: pointer !important;
        z-index: 10 !important;
    }
    .block-search .control { display: none !important; }
    .block-search .label.active + .control,
    .block-search.active .control {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100 !important;
        background: #fff !important;
        padding: 15px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }
    .block-search .label::before { font-size: 24px !important; color: #666 !important; }
    .block-search .label:hover::before { color: #333 !important; }
}

/* ============================================================
   Hero Banner — Inline Style Overrides (Responsive)
   CMS block uses inline styles; these class-based rules
   ensure proper responsive behavior on all screen sizes.
   ============================================================ */

.cms-home .hero-banner {
    min-height: 420px !important;
    height: auto !important;
}

.cms-home .hero-banner > div {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    padding: 80px 24px !important;
    max-width: 100% !important;
}

.cms-home .hero-banner h1 {
    font-size: clamp(1.8rem, 6vw, 3.25rem) !important;
    line-height: 1.2 !important;
}

.cms-home .hero-banner p:first-of-type {
    font-size: clamp(10px, 2.5vw, 12px) !important;
}

.cms-home .hero-banner p:nth-of-type(2) {
    font-size: clamp(14px, 3vw, 16px) !important;
}

.cms-home .hero-banner .hero-btns,
.cms-home .hero-banner div[style*="flex"] {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.cms-home .hero-banner a[style*="border-radius:30px"],
.cms-home .hero-banner a[style*="border-radius: 30px"] {
    padding: 12px 28px !important;
    font-size: 11px !important;
}

/* ============================================================
   Category Grid — Responsive Override
   CMS block uses inline 3-column grid
   ============================================================ */

.cms-home div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
}

.cms-home div[style*="grid-template-columns:repeat(3,1fr)"] > a {
    min-width: 0 !important;
}

/* ============================================================
   USP Grid — 4 column responsive override
   ============================================================ */
.cms-home div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* ============================================================
   Instagram Grid — 5 column responsive override
   ============================================================ */
.cms-home div[style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(5, 1fr) !important;
}

/* ============================================================
   Navigation — Show on desktop
   ============================================================ */
@media (min-width: 768px) {
    .nav-sections-item-content[aria-hidden="true"] {
        display: block !important;
    }
}

/* ============================================================
   MOBILE RESPONSIVE OVERRIDES
   ============================================================ */

/* Tablet: 768px and below */
@media (max-width: 768px) {
    .cms-home .hero-banner {
        min-height: 320px !important;
    }
    .cms-home .hero-banner > div {
        padding: 50px 20px !important;
    }
    .cms-home .hero-banner h1 {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
    }

    /* Override 3-col grid → 1-col on tablet */
    .cms-home div[style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* Override 4-col grid → 2-col on tablet */
    .cms-home div[style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Override 5-col grid → 3-col on tablet */
    .cms-home div[style*="grid-template-columns:repeat(5,1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Phone: 480px and below */
@media (max-width: 480px) {
    .cms-home .hero-banner {
        min-height: 280px !important;
    }
    .cms-home .hero-banner > div {
        padding: 40px 16px !important;
    }
    .cms-home .hero-banner h1 {
        font-size: clamp(1.3rem, 6vw, 1.5rem) !important;
    }

    .cms-home div[style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
    }

    .cms-home div[style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .cms-home div[style*="grid-template-columns:repeat(5,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cms-home div[style*="padding:80px 20px"] {
        padding: 50px 15px !important;
    }
    .cms-home div[style*="padding:80px 20px"] h3 {
        font-size: 18px !important;
    }
}