/*
 * V.Bloom main stylesheet.
 * Defines the shared layout, colors, components, responsive behavior,
 * product catalog, gallery and customer-facing interface styles.
 * Maintained by Hemat Ullah Hemat.
 */

/* Global colors, spacing and shared design variables. */
:root{--green:#123b2d;--green2:#1f5a43;--cream:#f8f5ed;--gold:#c69b55;--ink:#17231e;--muted:#718078;--line:#e7e9e5;--white:#fff;--radius:10px;--shadow:0 18px 55px rgba(16,42,31,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{max-width:100%;overflow-x:hidden}body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:#fff;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}button,input,textarea{font:inherit}button{cursor:pointer}img{max-width:100%;height:auto}.container{width:min(1160px,calc(100% - 32px));margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(20,50,38,.08)}.nav-wrap{height:76px;display:flex;align-items:center;gap:26px}.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:22px;letter-spacing:-.04em;min-width:0}.brand img{width:36px;height:36px;object-fit:contain;flex:0 0 auto}.nav{display:flex;gap:22px;margin-left:auto}.nav a{font-size:13px;font-weight:650;color:#425149}.nav a:hover{color:var(--green)}.nav-actions{display:flex;align-items:center;gap:8px;margin-left:10px;flex:0 0 auto}.icon-btn,.menu-btn{border:1px solid var(--line);background:#fff;width:38px;height:38px;border-radius:8px;display:grid;place-items:center;position:relative;color:var(--green)}.icon-btn b{position:absolute;right:-5px;top:-5px;background:var(--gold);color:#fff;border-radius:50%;min-width:17px;height:17px;font-size:10px;display:grid;place-items:center}.menu-btn{display:none}

/* Homepage hero section and primary call-to-action styling. */
.hero{min-height:650px;position:relative;display:flex;align-items:center;overflow:hidden;background:var(--green);color:#fff}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,36,26,.9),rgba(10,36,26,.45)),url('../images/home.jpg') center/cover}.hero-content{position:relative;padding:110px 0;max-width:700px}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:800;color:var(--gold);margin-bottom:16px}.hero h1,.page-hero h1{font-size:clamp(44px,7vw,76px);line-height:.98;letter-spacing:-.055em;margin:0 0 22px}.hero h1 em{color:#d8c18d;font-style:normal}.hero p{font-size:17px;line-height:1.8;max-width:580px;color:rgba(255,255,255,.82)}.hero-actions{display:flex;gap:10px;margin-top:30px}.btn{border:0;border-radius:8px;padding:13px 18px;font-weight:750;display:inline-flex;gap:9px;align-items:center;justify-content:center;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--green);color:#fff}.hero .btn.primary{background:#fff;color:var(--green)}.btn.ghost{border:1px solid rgba(255,255,255,.35);color:#fff;background:transparent}.btn.dark{background:#182c23;color:#fff}.btn.small{padding:9px 12px;font-size:12px}.btn.full{width:100%}

/* Shared homepage content sections, cards and product presentation. */
.section{padding:92px 0}.section.soft{background:var(--cream)}.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.image-card{height:500px;border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}.image-card img{width:100%;height:100%;object-fit:cover}.section h2{font-size:clamp(34px,5vw,54px);line-height:1.02;letter-spacing:-.045em;margin:0 0 18px}.section p{color:var(--muted);line-height:1.8}.checks{display:grid;gap:10px;margin:25px 0 28px;font-size:14px}.center{text-align:center;max-width:650px;margin:0 auto 40px}.service-grid,.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-grid article{background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px;box-shadow:0 8px 30px rgba(0,0,0,.03)}.service-grid svg{color:var(--gold);margin-bottom:22px}.service-grid h3{margin:0 0 8px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}.text-link{font-weight:750;color:var(--green);display:flex;gap:6px}.product-card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}.product-image{height:310px;background:#f3f0e8;position:relative}.product-image img{width:100%;height:100%;object-fit:cover}.product-image span{position:absolute;left:12px;top:12px;background:#fff;padding:7px 9px;border-radius:8px;font-size:10px;font-weight:800}.product-info{padding:20px}.product-info h3{margin:0 0 9px;font-size:18px}.product-info p{font-size:13px;margin:0 0 18px}.price-row{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* Page headers, ordering layout and customer order form components. */
.page-hero{background:var(--cream);padding:75px 0 65px}.page-hero h1{font-size:clamp(40px,6vw,64px)}.order-layout,.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:25px}.cart-list{display:grid;gap:12px}.cart-item{display:grid;grid-template-columns:92px 1fr auto;gap:15px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:12px}.cart-item img{width:92px;height:92px;border-radius:8px;object-fit:cover}.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}.qty button{border:0;background:#fff;width:30px;height:30px}.qty span{width:30px;text-align:center;font-weight:700}.delivery-note{margin-top:15px;padding:18px;border-radius:8px;background:var(--cream);display:flex;gap:13px;align-items:center}.delivery-note svg{color:var(--gold)}.delivery-note small{display:block;color:var(--muted);margin-top:3px}.order-form-card,.tracking-card{border:1px solid var(--line);border-radius:8px;padding:25px;background:#fff;box-shadow:var(--shadow)}.order-form-card h2{font-size:25px}.order-form-card form{display:grid;gap:13px}.order-form-card label{font-size:12px;font-weight:750;color:#4d5b54;display:grid;gap:7px}.order-form-card input,.order-form-card textarea,.tracking-card input,.search-row input{border:1px solid #dfe4e0;border-radius:8px;padding:12px 13px;outline:none;background:#fff}.order-form-card input:focus,.order-form-card textarea:focus,.tracking-card input:focus{border-color:var(--green)}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.payment{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:8px}.payment label{display:flex;align-items:center;gap:8px}.disabled{opacity:.55}.narrow{max-width:720px}.tracking-card form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}.tracking-card{margin:auto}.status-card{margin-top:20px;padding:20px;border:1px solid var(--line);border-radius:8px}.status-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:25px 0}.status-step{padding:12px;border-radius:8px;background:#f2f4f1;text-align:center;font-size:11px;font-weight:750}.status-step.active{background:#dfeee5;color:var(--green)}

/* Contact information and footer sections. */
.contact-grid{align-items:start}.contact-info{display:grid;gap:12px}.contact-info>div{padding:24px;border:1px solid var(--line);border-radius:8px}.contact-info svg{color:var(--gold)}.contact-info h3{margin:12px 0 3px}.footer{background:#102b21;color:#dce7e1;padding:70px 0 0}.footer-grid{display:grid;grid-template-columns:1.4fr .7fr 1fr;gap:50px;padding-bottom:50px}.footer p,.footer a{color:#aebfb6;line-height:1.8;font-size:13px}.footer-grid>div{display:flex;flex-direction:column;gap:5px}.footer h4{color:#fff;margin:0 0 10px}.footer-brand{color:#fff}.inline-form{display:flex;gap:7px}.inline-form input{min-width:0;flex:1;border:0;border-radius:8px;padding:12px}.copyright{border-top:1px solid rgba(255,255,255,.1);padding:18px;text-align:center;font-size:11px;color:#8ea39a}

/* Modal, search, notification and receipt components. */
.modal{display:none;position:fixed;inset:0;background:rgba(5,18,13,.62);z-index:100;align-items:center;justify-content:center;padding:18px}.modal.open{display:flex}.modal-card{background:#fff;border-radius:8px;width:min(680px,100%);max-height:90vh;overflow:auto;padding:28px;position:relative;box-shadow:0 30px 100px rgba(0,0,0,.3)}.modal-close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:28px}.search-row{display:flex;gap:8px}.search-row input{flex:1}.fab-update{position:fixed;right:18px;bottom:18px;z-index:60;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px;padding:14px 16px;width:270px}.fab-update strong,.fab-update span{display:block}.fab-update span{font-size:11px;color:var(--muted);margin-top:4px}.top-update{height:28px;background:#d9ad49;color:#18261f;text-align:center;font-size:11px;font-weight:800;padding:6px;position:sticky;top:0;z-index:55}.receipt-card{width:min(760px,100%)}.receipt-actions{display:flex;gap:8px;margin-top:20px}.whatsapp{background:#1e9c55;color:#fff}.form-msg{font-size:12px;margin:0}.success{color:#157443}.error{color:#b22b2b}

/* Tablet and medium-screen responsive layout adjustments. */
@media(max-width:980px){.nav{position:fixed;top:76px;left:16px;right:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;display:none;flex-direction:column;box-shadow:var(--shadow);z-index:60}.nav a{padding:12px 14px;border-radius:8px}.nav a:hover{background:#f4f7f5}.nav.open{display:flex}.menu-btn{display:grid}.split,.order-layout,.contact-grid,.footer-grid{grid-template-columns:1fr}.service-grid,.product-grid{grid-template-columns:1fr 1fr}.hero{min-height:560px}.section{padding:64px 0}.image-card{height:340px}.tracking-card form{grid-template-columns:1fr}.status-steps{grid-template-columns:1fr 1fr}.section-head{gap:12px;flex-wrap:wrap}}

/* Mobile layout adjustments for navigation, cards, forms and receipt actions. */
@media(max-width:640px){.container{width:min(100% - 20px,1160px)}.nav-wrap{height:68px;gap:8px}.nav{top:68px;left:10px;right:10px}.nav-actions{margin-left:auto}.nav-actions .icon-btn:nth-child(3){display:none}.hero-content{padding:72px 0 48px;max-width:100%}.hero h1{font-size:clamp(34px,10vw,44px)}.hero p{font-size:14px}.hero-actions{flex-direction:column;align-items:stretch}.service-grid,.product-grid{grid-template-columns:1fr}.product-image{height:250px}.two{grid-template-columns:1fr}.cart-item{grid-template-columns:70px 1fr}.cart-item img{width:70px;height:70px}.cart-item .qty{grid-column:2}.inline-form{flex-direction:column}.receipt-actions{flex-direction:column}.footer-grid{gap:24px;padding-bottom:30px}.brand span{white-space:nowrap}}

/* Product catalog cards, image gallery and search result styling. */
.catalog-grid{display:grid;gap:22px;margin-bottom:50px}.catalog-card{display:grid;grid-template-columns:1fr 1fr;gap:35px;border:1px solid var(--line);border-radius:8px;padding:20px;background:#fff;box-shadow:0 10px 35px rgba(16,42,31,.05)}.gallery{display:grid;grid-template-columns:1fr 74px;gap:10px}.gallery-main{width:100%;height:450px;object-fit:cover;border-radius:8px;transition:.18s}.thumbs{display:grid;gap:10px}.thumbs button{border:1px solid var(--line);padding:0;background:#fff;border-radius:8px;overflow:hidden;height:75px}.thumbs img{width:100%;height:100%;object-fit:cover}.catalog-copy{padding:18px 5px}.catalog-copy h2{font-size:34px}.benefits{display:grid;gap:7px;margin-top:22px;font-size:13px;color:var(--muted)}.benefits b{color:var(--ink);margin-bottom:4px}.search-result{display:block;padding:12px;border-bottom:1px solid var(--line);font-weight:700}.search-result:hover{background:var(--cream)}

/* Responsive product catalog and gallery layout. */
@media(max-width:900px){.catalog-card{grid-template-columns:1fr}.gallery-main{height:380px}}@media(max-width:560px){.gallery{grid-template-columns:1fr}.thumbs{grid-template-columns:repeat(3,1fr)}.thumbs button{height:80px}.gallery-main{height:330px}.catalog-copy h2{font-size:28px}}



/* Developer credit - responsive V.Bloom branding */
.copyright {
    text-align: center;
    padding: 18px 15px;
}

.copyright p {
    margin: 5px 0;
}

.developer-credit {
    font-size: 13px;
    color: #d5e2d9;
    line-height: 1.7;
}

.developer-credit span {
    color: #d8bd78;
    font-weight: 600;
    letter-spacing: 0.2px;
}

@media (max-width: 600px) {
    .copyright {
        padding: 16px 12px;
    }

    .developer-credit {
        font-size: 12px;
        overflow-wrap: anywhere;
    }
}