/* ============================================================
   A P J Furniture & Interior — shared site stylesheet
   Concept A: "Showroom Light" — bright modern furniture-boutique
   Palette: cream / terracotta / sage / brass-gold
   ============================================================ */

:root{
  --bg: #F7F3EC;
  --ink: #2B2622;
  --muted: #8A8276;
  --sage: #7C8A6E;
  --terracotta: #C1633D;
  --gold: #B8924A;
  --card: #FFFFFF;
  --line: #E7E0D2;
  --green: #28A745;
}

*{ box-sizing: border-box; margin:0; padding:0; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

a{ color: inherit; }
img{ max-width:100%; display:block; }

/* ---------- Top utility strip ---------- */
.top-strip{
  background: var(--ink); color: rgba(247,243,236,0.7);
  font-size: 0.78rem; padding: 7px 6vw; text-align:right;
  letter-spacing: 0.3px;
}
.top-strip b{ color: var(--gold); }

/* ---------- Header / Nav ---------- */
header.site-header{
  background: var(--bg);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.header-row{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap: wrap; gap: 16px; max-width: 1200px; margin: 0 auto;
  padding: 22px 6vw 18px;
}
.brand-mark{ display:flex; align-items:center; gap:14px; }
.brand-mark .icon{
  width:42px;height:42px; border-radius:50%; border:none;
  background: var(--terracotta);
  display:flex;align-items:center;justify-content:center;
  font-family: 'Fraunces', Georgia, serif; font-weight:600; font-size:18px;
  color: white; flex-shrink:0; transform:none;
}
.brand-mark .icon span{ transform:none; }
.brand-name{ font-family: 'Fraunces', Georgia, serif; font-size: 1.4rem; letter-spacing: 0.2px; color: var(--ink); }
.brand-tag{ font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; margin-top: 2px; }

.contact-pill{ display:flex; gap:10px; align-items:center; }
.contact-pill a{
  text-decoration:none; color: var(--ink); background: transparent; border: 1.5px solid var(--ink);
  padding: 10px 20px; font-size: 0.83rem; font-weight:600; border-radius: 999px; letter-spacing: 0.2px;
}
.contact-pill a.outline{ background: var(--terracotta); color: white; border-color: var(--terracotta); }

nav.main-nav{
  background: transparent; border-top: 1px solid var(--line);
}
nav.main-nav ul{
  list-style:none; display:flex; gap: 4px; max-width: 1200px; margin: 0 auto;
  padding: 0 6vw; flex-wrap: wrap;
}
nav.main-nav a{
  display:block; padding: 14px 18px; text-decoration:none; color: var(--muted);
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.2px; border-bottom: 3px solid transparent;
}
nav.main-nav a:hover{ color: var(--ink); }
nav.main-nav a.active{ color: var(--ink); border-bottom-color: var(--terracotta); }

/* ---------- Page hero (sub-pages) ---------- */
.page-hero{
  max-width: 1200px; margin: 0 auto; padding: 46px 6vw 6px;
}
.page-hero .eyebrow{
  font-size: 0.78rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--sage); font-weight: 700; margin-bottom: 12px;
}
.page-hero h1{
  font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 2.7rem); line-height:1.1;
  max-width: 760px; color: var(--ink);
}
.page-hero p{ margin-top: 16px; max-width: 620px; color: var(--muted); font-size: 1.02rem; }
.meta-strip{
  display:flex; gap: 28px; margin-top: 24px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--muted);
}
.meta-strip b{ color: var(--ink); font-family:'Fraunces', serif; font-weight:600; }

/* ---------- Category tiles (home) ---------- */
.category-grid{
  max-width: 1200px; margin: 0 auto; padding: 18px 6vw 60px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 24px;
}
.category-tile{
  background: var(--card); border: none; border-radius: 12px; overflow:hidden;
  text-decoration:none; color: var(--ink); display:flex; flex-direction:column;
  box-shadow: 0 10px 24px -18px rgba(43,38,34,0.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.category-tile:hover{ transform: translateY(-4px); box-shadow: 0 16px 30px -16px rgba(43,38,34,0.3); }
.category-tile .thumb{ aspect-ratio: 1/1; overflow:hidden; background:#EFE9DC; }
.category-tile .thumb img{ width:100%; height:100%; object-fit:cover; }
.category-tile .label{ padding: 16px 18px; }
.category-tile .label h3{ font-size: 1rem; font-weight:600; color: var(--ink); }
.category-tile .label span{ font-size: 0.78rem; color: var(--muted); }

/* ---------- Section heading (used on products/about) ---------- */
.section-block{ max-width: 1200px; margin: 0 auto; padding: 40px 6vw 10px; }
.section-block h2{
  font-family: 'Fraunces', Georgia, serif; font-weight:500; font-style:italic;
  font-size: 1.6rem; color: var(--ink);
  padding-bottom: 10px; border-bottom: 2px solid var(--gold); display:inline-block;
}
.section-block .count{ font-size: 0.85rem; color: var(--muted); margin-left: 8px; font-style:normal; }

/* ---------- Product / photo cards ---------- */
.catalog{
  max-width: 1200px; margin: 0 auto; padding: 18px 6vw 50px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px;
}
.card{
  background: var(--card); border: none; border-radius: 12px; overflow:hidden; position: relative;
  box-shadow: 0 10px 24px -18px rgba(43,38,34,0.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 16px 30px -16px rgba(43,38,34,0.3); }
.card-img{ width:100%; aspect-ratio: 1/1; overflow:hidden; background:#EFE9DC; }
.card-img img{ width:100%; height:100%; object-fit: cover; }
.card-body{ padding: 16px 18px 18px; }
.card-body h3{ font-size: 0.95rem; font-weight: 600; color: var(--ink); line-height: 1.3; min-height: 2.5em; }
.price-tag{ display:inline-flex; align-items:center; gap:6px; margin-top: 10px; font-family: 'Fraunces', Georgia, serif; color: var(--terracotta); font-size: 1.12rem; font-weight: 600; }
.price-tag .unit{ font-size: 0.68rem; color: var(--muted); font-family: 'Inter', sans-serif; font-weight: 400; }
.card-footer{ display:flex; gap: 8px; margin-top: 16px; }
.card-footer a{ flex:1; text-align:center; text-decoration:none; font-size: 0.78rem; font-weight: 600; padding: 10px 0; letter-spacing: 0.2px; border-radius: 999px; }
.card-footer .whatsapp{ background: var(--green); color: white; }
.card-footer .call{ background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.card::before{ content:none; }

/* ---------- About page ---------- */
.about-copy{ max-width: 1200px; margin: 0 auto; padding: 8px 6vw 10px; display:grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.about-copy p{ color: #5a5246; margin-bottom: 14px; }
.why-list{ list-style:none; }
.why-list li{ position:relative; padding-left: 24px; margin-bottom: 13px; color: #5a5246; }
.why-list li::before{ content:'—'; position:absolute; left:0; color: var(--terracotta); font-weight:bold; }
.fact-card{ background: var(--card); border-radius: 12px; padding: 24px; height: fit-content; box-shadow: 0 10px 24px -18px rgba(43,38,34,0.22); }
.fact-card h3{ font-family: 'Fraunces', Georgia, serif; color: var(--ink); margin-bottom: 14px; font-size: 1.1rem; }
.fact-row{ display:flex; justify-content:space-between; font-size: 0.88rem; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.fact-row b{ color: var(--ink); }
@media (max-width: 800px){ .about-copy{ grid-template-columns: 1fr; } }

.infra-grid{ max-width: 1200px; margin: 0 auto; padding: 10px 6vw 60px; display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 24px; }
.infra-grid figure{ background: var(--card); border-radius: 12px; overflow:hidden; box-shadow: 0 10px 24px -18px rgba(43,38,34,0.22); }
.infra-grid img{ aspect-ratio: 4/3; object-fit:cover; width:100%; }
.infra-grid figcaption{ padding: 14px 16px; font-size: 0.88rem; font-weight:600; color: var(--ink); }

/* ---------- Contact page ---------- */
.contact-wrap{ max-width: 1200px; margin: 0 auto; padding: 10px 6vw 60px; display:grid; grid-template-columns: 1.2fr 1fr; gap: 30px; }
@media (max-width: 800px){ .contact-wrap{ grid-template-columns: 1fr; } }
.contact-form{ background: var(--card); border-radius: 14px; padding: 30px; box-shadow: 0 10px 24px -18px rgba(43,38,34,0.22); }
.contact-form h2{ font-family: 'Fraunces', Georgia, serif; color: var(--ink); margin-bottom: 6px; font-size: 1.35rem; }
.contact-form .sub{ color: var(--muted); font-size: 0.88rem; margin-bottom: 22px; }
.contact-form label{ display:block; font-size: 0.82rem; font-weight:600; color: var(--ink); margin-bottom: 6px; margin-top: 16px; }
.contact-form input, .contact-form textarea{
  width:100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg);
  font-family: inherit; font-size: 0.92rem; color: var(--ink);
}
.contact-form textarea{ resize: vertical; min-height: 100px; }
.contact-form button{
  margin-top: 24px; background: var(--terracotta); color: white; border:none; padding: 14px 30px;
  font-size: 0.92rem; font-weight:700; letter-spacing: 0.2px; cursor:pointer; border-radius: 999px;
}
.contact-form button:hover{ background: #a8502f; }
.contact-form .note{ margin-top: 14px; font-size: 0.78rem; color: var(--muted); }

.reach-card{ background: var(--ink); color: var(--bg); border-radius: 14px; padding: 30px; height: fit-content; }
.reach-card h3{ font-family: 'Fraunces', Georgia, serif; margin-bottom: 18px; font-size: 1.2rem; color: white; }
.reach-row{ display:flex; gap: 12px; margin-bottom: 16px; font-size: 0.92rem; align-items:flex-start; }
.reach-row .tag{ color: var(--gold); font-weight:bold; flex-shrink:0; width: 18px; }
.reach-card a.cta{
  display:block; text-align:center; margin-top: 20px; padding: 13px 0; text-decoration:none;
  font-weight:700; font-size: 0.9rem; border-radius: 999px;
}
.reach-card a.whatsapp{ background: var(--green); color:white; margin-bottom: 10px; }
.reach-card a.call{ border: 1.5px solid rgba(247,243,236,0.4); color: var(--bg); }

/* ---------- Footer ---------- */
footer.site-footer{
  background: var(--ink); color: rgba(247,243,236,0.65);
  padding: 32px 6vw; text-align:center; font-size: 0.82rem;
}
footer.site-footer b{ color: var(--bg); font-family:'Fraunces', serif; }
footer.site-footer .links{ margin-top: 10px; }
footer.site-footer .links a{ color: rgba(247,243,236,0.65); text-decoration:none; margin: 0 8px; font-size: 0.8rem; }
footer.site-footer .links a:hover{ color: var(--gold); }

/* ---------- Category list (Our Products index) ---------- */
.cat-grid{
  max-width: 1200px; margin: 0 auto; padding: 30px 6vw 50px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 30px;
}
.cat-block h3{
  font-family: 'Fraunces', Georgia, serif; font-weight:500; font-size: 1.05rem; color: var(--ink);
  padding-bottom: 9px; margin-bottom: 13px; border-bottom: 2px solid var(--gold);
}
.cat-list{ list-style:none; }
.cat-list li{ margin-bottom: 10px; }
.cat-list a{ text-decoration:none; color: #5a5246; font-size: 0.92rem; line-height: 1.4; }
.cat-list a:hover{ color: var(--terracotta); text-decoration: underline; }
.cat-block details{ margin-top: 4px; }
.cat-block summary{
  list-style:none; cursor:pointer; color: var(--terracotta); font-size: 0.85rem;
  font-weight:600; text-decoration: underline; text-underline-offset: 2px;
}
.cat-block summary::-webkit-details-marker{ display:none; }
.cat-block details[open] summary{ margin-bottom: 10px; }
.view-all-wrap{ max-width: 1200px; margin: 0 auto; padding: 0 6vw 60px; }
.view-all-btn{
  display:inline-block; border: 1.5px solid var(--terracotta); color: var(--terracotta);
  text-decoration:none; padding: 12px 26px; font-size: 0.88rem; font-weight:600; border-radius: 999px;
}
.view-all-btn:hover{ background: var(--terracotta); color: white; }
@media (max-width: 900px){ .cat-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .cat-grid{ grid-template-columns: 1fr; gap: 26px; } }

@media (max-width: 540px){
  .header-row{ flex-direction:column; align-items:flex-start; }
  .catalog, .category-grid{ grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 16px; }
}