/* ============================================================
   EXTRA SECTIONS — additive homepage sections + legal/guide pages
   Matches the existing dark navy / cyan (#00d4ff) / gold (#d4af37)
   theme already used in style.css. Kept in its own file so the
   original stylesheet never has to be touched.
   ============================================================ */

/* ---------- shared section heading ---------- */
.xsec{
    padding:70px 6%;
}
.xsec-head{
    text-align:center;
    max-width:700px;
    margin:0 auto 45px;
}
.xsec-head h2{
    color:#00d4ff;
    font-size:36px;
    font-weight:700;
}
.xsec-head p{
    color:#9fb3c8;
    margin-top:10px;
    font-size:16px;
    line-height:1.6;
}
.xsec-cta{
    display:block;
    width:fit-content;
    margin:40px auto 0;
    padding:13px 30px;
    background:transparent;
    border:1px solid #00d4ff;
    color:#00d4ff;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
    transition:.25s;
}
.xsec-cta:hover{
    background:#00d4ff;
    color:#04101f;
}

/* alternating background bands, same tones already used on the page */
.xsec-a{ background:#081b3a; }
.xsec-b{ background:linear-gradient(135deg,#0f172a,#1e3a5f,#0f172a); }

/* ---------- 3. Shop by Category ---------- */
.category-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
    max-width:1200px;
    margin:0 auto;
}
@media(max-width:900px){
    .category-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:480px){
    .category-grid{ grid-template-columns:repeat(2,1fr); }
}
.category-card{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    padding:26px 12px;
    text-align:center;
    text-decoration:none;
    transition:.3s;
}
.category-card:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.1);
    border-color:#00d4ff;
}
.category-card .cat-icon{
    font-size:34px;
    display:block;
    margin-bottom:12px;
}
.category-card span.cat-label{
    color:#fff;
    font-weight:600;
    font-size:15px;
}

/* ---------- 4 & 5. Best Sellers / New Arrivals (reuse .product-card hooks) ---------- */
.home-shop .product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:24px;
    max-width:1300px;
    margin:0 auto;
}
.home-shop .product-card{
    background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px !important;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:none !important;
}
.home-shop .product-card:hover{
    transform:translateY(-6px);
    border-color:#00d4ff;
}
.home-shop .product-card img{
    width:100%;
    height:180px;
    object-fit:cover;
}
.home-shop .product-card h2{
    color:#fff !important;
    font-size:18px !important;
    margin:16px 16px 4px !important;
}
.home-shop .product-card .description{
    color:#9fb3c8 !important;
    font-size:13.5px !important;
    margin:0 16px !important;
}
.home-shop .product-card .price-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:14px 16px !important;
}
.home-shop .product-card .price{
    color:#d4af37 !important;
    font-size:20px !important;
    margin:0 !important;
}
.home-shop .product-card button{
    margin:0 16px 16px !important;
    background:#00b4d8 !important;
    color:#04101f !important;
    border-radius:8px !important;
    font-size:14px !important;
    padding:11px !important;
}
.home-shop .product-card button:hover{
    background:#00d4ff !important;
}
.new-badge{
    position:absolute;
    top:12px;
    left:12px;
    background:#d4af37;
    color:#04101f;
    font-size:11px;
    font-weight:700;
    padding:4px 10px;
    border-radius:20px;
    letter-spacing:.3px;
    z-index:2;
}
.home-shop .product-card{ position:relative; }

/* ---------- 6 & 7. Pet Care / Aquarium Services cards ---------- */
.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:24px;
    max-width:1200px;
    margin:0 auto;
}
.service-card{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.15);
    border-radius:15px;
    padding:28px 24px;
    transition:.3s;
}
.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 10px 25px rgba(0,212,255,.3);
}
.service-card h3{
    color:#fff;
    font-size:19px;
    margin-bottom:10px;
}
.service-card p{
    color:#9fb3c8;
    font-size:14px;
    line-height:1.6;
}

/* ---------- 8. Find Your Perfect Pet ---------- */
.pet-finder{
    max-width:800px;
    margin:0 auto;
    text-align:center;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.15);
    border-radius:20px;
    padding:55px 30px;
}
.pet-finder h2{
    color:#00d4ff;
    font-size:32px;
    margin-bottom:14px;
}
.pet-finder p{
    color:#cbd5e1;
    font-size:16px;
    margin-bottom:28px;
    line-height:1.6;
}
.pet-finder-btn{
    display:inline-block;
    padding:15px 34px;
    background:#d4af37;
    color:#04101f;
    border:none;
    border-radius:30px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}
.pet-finder-btn:hover{
    background:#e8c452;
    transform:translateY(-2px);
}

/* ---------- 10. Pet Care Guide ---------- */
.guide-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
    max-width:1200px;
    margin:0 auto;
}
.guide-card{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:18px;
    text-decoration:none;
    transition:.25s;
}
.guide-card:hover{
    border-color:#00d4ff;
    background:rgba(255,255,255,.1);
}
.guide-card .g-icon{ font-size:26px; }
.guide-card span.g-label{
    color:#fff;
    font-weight:600;
    font-size:14.5px;
}

/* ---------- 14. Newsletter ---------- */
.newsletter{
    background:#08142e;
    text-align:center;
    padding:70px 6%;
}
.newsletter h2{
    color:#00d4ff;
    font-size:30px;
    margin-bottom:10px;
}
.newsletter p{
    color:#9fb3c8;
    margin-bottom:26px;
}
.newsletter-form{
    display:flex;
    gap:10px;
    max-width:440px;
    margin:0 auto;
    flex-wrap:wrap;
    justify-content:center;
}
.newsletter-form input{
    flex:1;
    min-width:220px;
    padding:14px 16px;
    border-radius:30px;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:14px;
}
.newsletter-form input::placeholder{ color:#8fa3b8; }
.newsletter-form button{
    padding:14px 26px;
    border:none;
    border-radius:30px;
    background:#00b4d8;
    color:#04101f;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}
.newsletter-form button:hover{ background:#00d4ff; }

/* ---------- mega-menu: widen for the added 3rd "Explore" column ---------- */
.dropdown .mega-menu{
    width:600px !important;
    grid-template-columns:1fr 1fr 1fr !important;
}
@media (max-width:1100px){
    .dropdown .mega-menu{
        width:420px !important;
        grid-template-columns:1fr 1fr !important;
    }
}

/* ---------- footer legal links ---------- */
.footer-legal{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 18px;
    margin:18px 0;
    padding:0;
}
.footer-legal a{
    color:#9fb3c8;
    font-size:13px;
    text-decoration:none;
}
.footer-legal a:hover{ color:#00d4ff; }

/* ---------- guide article pages ---------- */
.guide-article{
    max-width:820px;
    margin:0 auto;
    padding:150px 6% 80px;
    color:#cbd5e1;
    line-height:1.8;
}
.guide-article-head{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:6px;
}
.guide-article-icon{ font-size:44px; }
.guide-article-head h1{
    color:#00d4ff;
    font-size:32px;
    margin:0;
}
.guide-article-intro{
    color:#9fb3c8;
    font-size:16px;
    margin:14px 0 10px;
}
.guide-article h2{
    color:#fff;
    font-size:20px;
    margin:30px 0 10px;
}
.guide-article p, .guide-article li{
    color:#cbd5e1;
    font-size:15px;
}
.guide-article ul{ padding-left:22px; margin-bottom:14px; }
.guide-back{
    display:block;
    text-align:center;
    margin-top:18px;
    color:#9fb3c8;
    text-decoration:none;
    font-size:14px;
}
.guide-back:hover{ color:#00d4ff; }

/* ---------- legal / guide detail pages ---------- */
.legal-page{
    max-width:820px;
    margin:0 auto;
    padding:150px 6% 80px;
    color:#cbd5e1;
    line-height:1.8;
}
.legal-page h1{
    color:#00d4ff;
    font-size:36px;
    margin-bottom:8px;
}
.legal-page .legal-updated{
    color:#8fa3b8;
    font-size:13px;
    margin-bottom:36px;
}
.legal-page h2{
    color:#fff;
    font-size:21px;
    margin:34px 0 12px;
}
.legal-page p, .legal-page li{
    color:#cbd5e1;
    font-size:15px;
    margin-bottom:10px;
}
.legal-page ul{ padding-left:22px; }
.legal-note{
    background:rgba(212,175,55,.1);
    border:1px solid rgba(212,175,55,.4);
    color:#e8c452;
    padding:14px 18px;
    border-radius:10px;
    font-size:13.5px;
    margin-bottom:30px;
}

/* ---------- responsive ---------- */
@media (max-width:700px){
    .xsec{ padding:50px 5%; }
    .xsec-head h2{ font-size:28px; }
    .pet-finder{ padding:40px 20px; }
    .pet-finder h2{ font-size:26px; }
    .newsletter-form{ flex-direction:column; }
    .newsletter-form input, .newsletter-form button{ width:100%; }
}