/*
Theme Name: Divyanjana Custom Garments
Theme URI: https://divyanjana.example
Template: storefront
Description: Child theme for Divyanjana — custom family-matching garments with design & fabric selection built in. Requires the free "Storefront" parent theme and WooCommerce.
Version: 1.0
Author: Divyanjana
Text Domain: divyanjana
*/

:root{
  --dj-primary:#8B4A62;   /* rose mauve - brand accent */
  --dj-secondary:#D9B48F; /* warm fabric tan */
  --dj-dark:#2E2823;
  --dj-cream:#FBF6F1;
  --dj-line:#E7DACB;
}

body{ background:var(--dj-cream); color:var(--dj-dark); }
a{ color:var(--dj-primary); }
.site-header{ background:#fff; border-bottom:1px solid var(--dj-line); }
.woocommerce ul.products li.product .price{ color:var(--dj-primary); font-weight:600; }
.button, button, input[type="submit"]{
  background:var(--dj-primary)!important; color:#fff!important; border-radius:6px!important; border:none!important;
}
.button:hover, button:hover{ background:#6f3a4e!important; }

/* ---------- Family collection grid ---------- */
.dj-family-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px; padding:32px 0;
}
.dj-family-card{
  background:#fff; border:1px solid var(--dj-line); border-radius:10px;
  overflow:hidden; text-align:center; transition:transform .15s ease;
}
.dj-family-card:hover{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.08); }
.dj-family-card img{ width:100%; height:260px; object-fit:cover; }
.dj-family-card h3{ margin:14px 0 4px; font-size:1.05rem; }
.dj-family-card a.dj-customize-btn{
  display:inline-block; margin:10px 0 18px; padding:8px 18px;
  background:var(--dj-primary); color:#fff; border-radius:20px; font-size:.85rem; text-decoration:none;
}

/* ---------- Customizer block (design + fabric picker) ---------- */
.dj-customizer{ border:1px solid var(--dj-line); border-radius:10px; padding:20px; margin:24px 0; background:#fff; }
.dj-customizer h4{ margin:0 0 10px; font-size:1rem; color:var(--dj-dark); }
.dj-swatches{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.dj-swatch{
  width:64px; height:64px; border-radius:8px; cursor:pointer; border:2px solid transparent;
  background-size:cover; background-position:center; position:relative;
}
.dj-swatch.selected{ border-color:var(--dj-primary); box-shadow:0 0 0 2px var(--dj-secondary); }
.dj-swatch span{
  position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:.7rem; color:var(--dj-dark);
}
.dj-fabric-swatch{ border-radius:50%; }
.dj-selection-summary{ font-size:.9rem; padding:10px; background:var(--dj-cream); border-radius:6px; }