/* landing.css - Quill landing page styles */

/* =========================================
   1. GLOBAL & HEADER
   ========================================= */
.container { max-width:1180px; margin:0 auto; padding:0 20px; }

/* Header layout */
.quill-site-header { background:#fff; border-bottom:1px solid rgba(11,18,32,0.04); position:sticky; top:0; z-index:1000; }
.quill-header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; }

/* Branding */
.quill-branding { display:flex; align-items:center; gap:12px; }
.quill-site-title { font-weight:700; color:#047c78; text-decoration:none; }
.custom-logo-link img { height:56px; width:auto; display:block; }

/* Nav */
.quill-primary-nav { flex:1; display:flex; justify-content:center; }
.quill-menu { list-style:none; margin:0; padding:0; display:flex; gap:20px; align-items:center; }
.quill-menu li { margin:0; }
.quill-menu li a { display:inline-block; padding:8px 6px; color:#0b1220; text-decoration:none; font-weight:600; }
.quill-menu li a:hover { color:#0ea5a4; }

/* Header tools */
.quill-header-tools { display:flex; align-items:center; gap:12px; }
.quill-mini-cart { display:inline-flex; align-items:center; gap:8px; color:#047c78; text-decoration:none; font-weight:600; }
.quill-cart-icon { font-size:18px; }
.quill-cart-count { background:rgba(11,18,32,0.06); padding:4px 8px; border-radius:999px; font-weight:700; }

/* Mobile toggle */
.quill-mobile-toggle { display:none; border:0; background:transparent; padding:6px; cursor:pointer; font-size:20px; }
.quill-mobile-menu { display:none; background:#fff; border-top:1px solid rgba(11,18,32,0.04); }
.quill-mobile-menu-list { list-style:none; margin:0; padding:12px 0; display:flex; flex-direction:column; gap:8px; }
.quill-mobile-menu-list li a { padding:10px 0; border-bottom:1px solid rgba(11,18,32,0.03); }


/* =========================================
   2. HERO SECTION (Fixed Readability)
   ========================================= */
.quill-hero { position:relative; min-height:550px; display:flex; align-items:center; overflow:hidden; background:#fafafa; }
.quill-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center center; z-index:0; }

.quill-hero-inner { position:relative; z-index:2; display:grid; grid-template-columns: 1fr 420px; gap:40px; align-items:center; padding:64px 0; }

/* FIX: Added background to text so it is readable over the image */
.hero-left {
    background: rgba(255, 255, 255, 0.85); /* Semi-transparent white */
    backdrop-filter: blur(10px); /* Modern blur effect */
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.hero-left .hero-kicker { display:inline-block; font-weight:700; color:#047c78; margin-bottom:8px; letter-spacing: 1px; text-transform: uppercase; font-size: 14px;}
.hero-title { font-family: Georgia, serif; font-size: clamp(36px, 5vw, 54px); margin:0 0 18px; color:#071124; line-height:1.1; }
.hero-sub { color:#475569; font-size:18px; margin:0 0 25px; line-height: 1.6; }

.hero-ctas { display:flex; gap:12px; }
.btn { display:inline-block; padding:12px 24px; border-radius:50px; text-decoration:none; font-weight:600; transition: transform 0.2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background:#008f8f; color:#fff; box-shadow:0 10px 20px rgba(0, 143, 143, 0.3); }
.btn-outline { background:transparent; border:2px solid #008f8f; color:#008f8f; }

/* Hero right image (Optional if you want it) */
.hero-right img { width:100%; max-width:420px; border-radius:12px; box-shadow:0 30px 60px rgba(11,18,32,0.15); display: none; /* Hidden by default as per screenshot style */ } 


/* =========================================
   3. CATEGORIES GRID
   ========================================= */
.quill-categories { padding:60px 0; }
.quill-section-head { text-align:left; margin-bottom:30px; }
.quill-section-head h2 { margin:0; font-size:32px; color:#071124; font-family: Georgia, serif; }

.quill-cats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:30px; }

.cat-card { display:block; background:#fff; border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; border:1px solid #eee; transition:all 0.3s ease; }
.cat-card:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.1); border-color: transparent; }

.cat-media { background:#f9f9f9; padding:20px; display:flex; align-items:center; justify-content:center; min-height:180px; }
.cat-media img { max-width:100%; max-height:140px; object-fit:contain; transition: transform 0.3s; }
.cat-card:hover .cat-media img { transform: scale(1.05); }

.cat-body { padding:20px; text-align: center; }
.cat-body h3 { margin:0; font-size:18px; color: #333; }


/* =========================================
   4. PROMO & TABS
   ========================================= */
.quill-promo { padding:30px 0; border-top:1px solid #eee; border-bottom:1px solid #eee; margin: 40px auto; }
.promo-inner { display:flex; gap:24px; justify-content:space-between; align-items:center; }
.promo-item { display:flex; flex-direction:column; text-align: center; width: 33%; }
.promo-item strong { color: #008f8f; font-size: 16px; margin-bottom: 5px; }

.quill-browse { padding:10px 0 40px; text-align:center; }
.tabs { display:inline-flex; gap:15px; flex-wrap:wrap; justify-content: center; }
.tab { padding:12px 24px; border-radius:50px; border:1px solid #ddd; text-decoration:none; color:#555; font-weight:600; font-size: 14px; transition: all 0.2s; }
.tab:hover { border-color: #008f8f; color: #008f8f; }
.tab.active { background:#008f8f; color:#fff; border-color:#008f8f; }


/* =========================================
   5. MODERN PRODUCT GRID (Consolidated)
   ========================================= */
.quill-products { padding:0 0 80px; }

/* 1. Grid Container */
ul.products, 
.products.columns-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none !important;
}

/* 2. Product Card */
ul.products li.product,
.products.columns-4 li.product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 15px;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left; /* Aligns text left like Amazon */
    overflow: hidden;
}

/* Hover Effect */
ul.products li.product:hover,
.products.columns-4 li.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: transparent;
}

/* 3. Images */
ul.products li.product a img,
.products.columns-4 li.product-card img {
    width: 100%;
    height: 260px; /* Fixed height */
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;
    background: #f4f4f4;
}

/* 4. Title */
ul.products li.product .woocommerce-loop-product__title,
.product-title {
    font-size: 16px !important;
    font-family: Georgia, serif;
    font-weight: 600;
    line-height: 1.4;
    color: #111;
    margin-bottom: 8px;
    min-height: 44px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 5. Price */
ul.products li.product .price,
.price-wrap {
    font-size: 18px;
    color: #008f8f;
    font-weight: 700;
    display: block;
    margin-bottom: 15px;
}
ul.products li.product .price del { color: #999; font-size: 14px; margin-right: 8px; font-weight: normal; }

/* 6. Button */
ul.products li.product .button,
.product-body .button {
    background-color: #008f8f;
    color: #fff !important;
    padding: 10px 0;
    width: 100%;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: block;
    transition: background 0.2s;
    margin-top: auto;
}
ul.products li.product .button:hover { background-color: #006666; }

/* 7. Sale Badge */
ul.products li.product .onsale {
    position: absolute;
    top: 25px;
    left: 25px;
    background: #ff6b6b;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 50px;
    z-index: 5;
    min-height: auto;
    line-height: normal;
}


/* =========================================
   6. RESPONSIVE / MOBILE
   ========================================= */

/* Tablet & Smaller Laptops */
@media (max-width: 1024px) {
    .quill-hero-inner { grid-template-columns: 1fr; text-align: center; padding: 40px 0; }
    .hero-left { margin: 0 20px; } /* Adds spacing on tablet */
    .quill-cats-grid { grid-template-columns: repeat(3, 1fr); }
    ul.products, .products.columns-4 { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile */
@media (max-width: 768px) {
    .quill-primary-nav { display:none; }
    .quill-mobile-toggle { display:inline-flex; }
    .quill-mobile-menu[aria-hidden="false"] { display:block; }

    /* Fix Grid Columns */
    .quill-cats-grid { grid-template-columns: repeat(2,1fr); gap: 15px; }
    ul.products, .products.columns-4 { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    
    /* Fix Hero Font Size */
    .hero-title { font-size: 32px; }
    .hero-left { padding: 25px; }
}

/* Small Mobile */
@media (max-width: 480px) {
    .promo-inner { flex-direction: column; gap: 20px; }
    .promo-item { width: 100%; }
    
    ul.products, .products.columns-4 { grid-template-columns: repeat(1, 1fr); }
    .quill-cats-grid { grid-template-columns: repeat(2,1fr); }
}