/* Scoped to new flavor content; the existing Divi header/footer remain theme-owned. */
.dff-wrap { width:min(1120px, calc(100% - 48px)); margin-inline:auto; }
.dff-collection { color:#344229; font-family:"tradegothic-lt-std",Arial,sans-serif; font-size:18px; line-height:1.6; }
.dff-collection { position:relative; z-index:2; background:#efefef; padding:72px 0 80px; text-align:center; }
/* The original fact section overlapped the old product header by 25rem.
   When this new section intervenes, give the facts their own normal flow. */
.product-dahi-content .dff-collection + .did-you-know-section { margin-top:0; padding-top:96px!important; min-height:0; }
.dff-collection h2 { font-family:"lulo-one",serif; font-size:40px; line-height:48px; font-style:normal; font-weight:800; color:rgb(76,128,31); padding:0; margin:0 0 16px; }
.dff-intro { margin:0 0 38px; padding:0; }
.dff-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.dff-card { flex:0 1 calc((100% - 48px)/3); min-width:0; background:white; border-top:4px solid var(--dff-accent); border-radius:4px; }
.dff-card-link { display:flex; flex-direction:column; align-items:center; height:100%; padding:24px 20px 28px; color:inherit; }
.dff-card-link img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; margin:0 0 20px; transition:transform .2s ease; }
.dff-card-link:hover img { transform:translateY(-4px); }
.dff-card h3 { font-family:"priori-serif",Georgia,serif; font-size:32px; font-weight:800; line-height:1.1; color:#4c801f; margin:0 0 10px; padding:0; }
.dff-card-size { display:block; margin-bottom:20px; font-size:16px; }
.dff-button { display:inline-flex; justify-content:center; align-items:center; background:#4c801f; color:white!important; min-height:46px; padding:12px 25px; font:700 14px/1.4 Arial,sans-serif; letter-spacing:.6px; border-radius:3px; text-decoration:none; }
.dff-card .dff-button { margin-top:auto; }
.dff-button:hover { background:#345c12; }
.dff-collection a:focus-visible, .dff-original-product a:focus-visible { outline:3px solid #fdb522; outline-offset:5px; }
@media (max-width:767px) {
  .dff-wrap { width:calc(100% - 36px); }
  .dff-collection { padding:48px 0; }
  .dff-grid { gap:18px; }
  .dff-card { flex-basis:calc((100% - 18px)/2); }
  .dff-card-link { padding:18px 12px 22px; }
  .dff-card h3 { font-size:27px; }
  .dff-card .dff-button { font-size:12px; padding:10px 14px; }
  .product-dahi-content .dff-collection + .did-you-know-section { padding-top:56px!important; }

}
@media (max-width:420px) {
  .dff-card { flex-basis:100%; max-width:340px; }
  .dff-card-link img { max-width:260px; }
}
@media (prefers-reduced-motion:reduce) { .dff-card-link img { transition:none; transform:none!important; } }

/* Product pages inherit ALL original Whole Milk typography, backgrounds,
   section geometry, dividers and nutrition layout from the child theme.
   Only five-item navigation and longer-title wrapping extend the original layout. */
.dff-original-product .product-name-title { display:flex; align-items:center; justify-content:center; gap:20px; }
.dff-original-product .product-name-title > span { min-width:0; }
.dff-original-product .product-name-title > img { flex-shrink:0; }
.dff-original-product .dff-variant-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; }
.dff-original-product .dff-variant-row .dff-variant-column { flex:0 0 20%; width:20%; margin-right:0; }
.dff-original-product .dff-variant-row a { display:inline-block; cursor:pointer; }
.dff-original-product .dff-variant-row .product-variant-icon { transition:transform .3s ease; }
.dff-original-product .dff-variant-row a:is(:hover, :focus-visible) .product-variant-icon { transform:scale(1.2); }
.dff-original-product .dff-variant-row a:is(:hover, :focus-visible) .product-variant-icon.current { transform:scale(1.02); }
@media (max-width:768px) {
  .dff-original-product .product-name-title { gap:8px; }
  .dff-original-product .dff-variant-row .dff-variant-column { flex:0 0 25%; width:25%!important; }
  .dff-original-product .dff-variant-row .dff-variant-column.dff-current-variant { flex-basis:100%; width:100%!important; order:-1; }
}
@media (prefers-reduced-motion:reduce) {
  .dff-original-product .dff-variant-row a:is(:hover, :focus-visible) .product-variant-icon { transition:none; transform:none!important; }
}