/* Homepage sections (template degroot-inc-Homepage.php, retail + wholesale). Brand: teal #1599AF, green #8CAF30, plum #743F77, slate #636B6E. */
.retail-home { --rh-teal:#1599AF; --rh-green:#8CAF30; --rh-plum:#743F77; --rh-slate:#636B6E; --rh-ink:#2b3436; --rh-paper:#fff; --rh-radius:6px; }
.retail-home .innerwrapper { padding-bottom: 56px; }
.retail-home section { margin-top: 56px; }

/* intro */
.retail-home .rh-intro { display:flex; align-items:center; gap:40px; margin-top:28px; }
.retail-home .rh-intro-art { width:96px; flex:0 0 auto; }
.retail-home .rh-eyebrow { margin:0 0 8px; color:var(--rh-green); font-size:.8em; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.retail-home .rh-intro h2 { margin:0; color:var(--rh-slate); font-weight:300; font-size:2.1em; line-height:1.25; max-width:720px; }
.retail-home .rh-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }
.retail-home .rh-btn { display:inline-block; padding:0 28px; height:48px; line-height:48px; border-radius:var(--rh-radius); font-size:1em; font-weight:500; text-decoration:none; transition:transform .15s, box-shadow .15s, background-color .15s; }
.retail-home .rh-btn:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.retail-home .rh-btn-teal { background:var(--rh-teal); color:#fff; }
.retail-home .rh-btn-teal:hover { background:#1289a0; }
.retail-home .rh-btn-outline { border:1.5px solid var(--rh-green); color:var(--rh-green); line-height:45px; background:transparent; }
.retail-home .rh-btn-outline:hover { background:var(--rh-green); color:#fff; }

/* section headers */
.retail-home .rh-section-head { position:relative; margin-bottom:26px; }
.retail-home .rh-script { display:block; font-family:"grafolita-script", sans-serif; color:var(--rh-green); font-size:2.4em; line-height:1; margin-bottom:-6px; }
.retail-home .rh-section-head h2 { margin:0; color:var(--rh-ink); font-weight:300; font-size:2.1em; }
.retail-home .rh-more { position:absolute; right:0; bottom:8px; color:var(--rh-teal); font-weight:600; text-decoration:none; }
.retail-home .rh-more:hover { text-decoration:underline; }

/* category cards */
.retail-home .rh-cat-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.retail-home .rh-cat { display:block; background:var(--rh-paper); border-radius:var(--rh-radius); overflow:hidden; text-decoration:none; color:var(--rh-ink); box-shadow:0 1px 3px rgba(0,0,0,.06); transition:transform .2s, box-shadow .2s; }
.retail-home .rh-cat:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(21,153,175,.18); }
.retail-home .rh-cat-img { display:block; aspect-ratio:4/3; background:#dfe8ea center/cover no-repeat; transition:transform .4s; }
.retail-home .rh-cat:hover .rh-cat-img { transform:scale(1.04); }
.retail-home .rh-cat-body { display:block; padding:18px 20px 20px; }
.retail-home .rh-cat-name { display:block; font-size:1.3em; font-weight:600; }
.retail-home .rh-cat-tag { display:block; color:var(--rh-slate); margin-top:4px; }
.retail-home .rh-cat-count { display:block; margin-top:12px; color:var(--rh-teal); font-weight:600; font-size:.9em; }

/* promise tiles */
.retail-home .rh-promise { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.retail-home .rh-tile { display:flex; flex-direction:column; padding:30px 28px; border-radius:var(--rh-radius); color:#fff; text-decoration:none; min-height:230px; position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s; }
.retail-home .rh-tile:after { content:""; position:absolute; right:-40px; bottom:-40px; width:170px; height:170px; border-radius:50%; background:rgba(255,255,255,.12); }
.retail-home .rh-tile:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.16); }
.retail-home .rh-tile-green { background:var(--rh-green); }
.retail-home .rh-tile-teal { background:var(--rh-teal); }
.retail-home .rh-tile-plum { background:var(--rh-plum); }
.retail-home .rh-tile-kicker { font-size:.78em; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.retail-home .rh-tile-title { font-size:1.7em; font-weight:300; margin:8px 0 10px; line-height:1.15; }
.retail-home .rh-tile-text { line-height:1.55; opacity:.95; flex:1; }
.retail-home .rh-tile-link { margin-top:18px; font-weight:600; }

/* new products */
.retail-home .rh-prod-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.retail-home .rh-prod { display:block; text-decoration:none; color:var(--rh-ink); }
.retail-home .rh-prod-img { display:block; aspect-ratio:1; border-radius:var(--rh-radius); background:#fff center/cover no-repeat; box-shadow:0 1px 3px rgba(0,0,0,.06); transition:transform .2s, box-shadow .2s; }
.retail-home .rh-prod:hover .rh-prod-img { transform:translateY(-4px); box-shadow:0 14px 30px rgba(21,153,175,.18); }
.retail-home .rh-prod-cat { display:block; margin-top:14px; color:var(--rh-green); font-size:.78em; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.retail-home .rh-prod-name { display:block; margin-top:4px; font-size:1.1em; font-weight:600; }
.retail-home .rh-prod:hover .rh-prod-name { color:var(--rh-teal); }

/* tablet / phone */
@media only screen and (max-width: 62.18em) {
  .retail-home .rh-cat-grid, .retail-home .rh-promise { grid-template-columns:repeat(2, 1fr); }
  .retail-home .rh-prod-grid { grid-template-columns:repeat(2, 1fr); }
}
@media only screen and (max-width: 48em) {
  .retail-home section { margin-top:40px; }
  .retail-home .rh-intro { flex-direction:column; align-items:flex-start; gap:18px; }
  .retail-home .rh-intro-art { width:64px; }
  .retail-home .rh-intro h2, .retail-home .rh-section-head h2 { font-size:1.6em; }
  .retail-home .rh-btn { width:100%; text-align:center; }
  .retail-home .rh-cat-grid, .retail-home .rh-promise { grid-template-columns:1fr; gap:16px; }
  .retail-home .rh-prod-grid { gap:16px; }
  .retail-home .rh-more { position:static; display:inline-block; margin-top:8px; }
}

/* wholesale additions */
.retail-home .rh-btn-outline-plum { border:1.5px solid var(--rh-plum); color:var(--rh-plum); line-height:45px; background:transparent; cursor:pointer; }
.retail-home .rh-btn-outline-plum:hover { background:var(--rh-plum); color:#fff; }
.retail-home .rh-prod-price { display:block; margin-top:6px; color:var(--rh-slate); font-weight:500; }
.retail-home .rh-prod-price del { opacity:.6; margin-right:6px; }
.wholesale-home #catalogmodal { margin-top:24px; }