/* SILVGLO Clean Final 4.1.3 — hero/banner rendering on mobile.
 * The same source image as desktop remains the fallback. Optional mobile crops
 * and focal position can be edited separately in WordPress Design Studio.
 */
@media (min-width:768px) and (max-width:1024px) {
  .sv4-home-hero:before {inset:0 0 0 28%;background-position:60% 36%;}
  .sv4-editorial-hero:before, .sv4-commerce-hero:before {inset:0 0 0 30%;background-position:60% 40%;}
  .sv4-home-hero-copy {width:min(56%,540px);}
  .sv4-editorial-hero-inner>div {max-width:53%;}
  .sv4-commerce-hero>.sv4-shell {position:relative;}
}

@media (max-width:767px) {
  /* One consistent image-above-copy layout avoids the landscape photo being
     almost completely cropped on portrait phones. */
  .sv4-home-hero,
  .sv4-editorial-hero,
  .sv4-commerce-hero {
    position:relative;
    isolation:isolate;
    display:flex;
    align-items:stretch;
    flex-direction:column;
    min-height:var(--sv413-height,470px)!important;
    height:auto!important;
    background:#faf8f4;
    overflow:hidden;
  }
  .sv4-home-hero:before,
  .sv4-editorial-hero:before,
  .sv4-commerce-hero:before {
    content:"";
    position:absolute;
    inset:0 0 auto 0!important;
    height:var(--sv413-photo-height,62%);
    width:100%;
    z-index:-2;
    background-image:var(--sv413-mobile-photo, var(--sv4-hero-photo, var(--sv4-editorial-image, var(--sv4-commerce-image))))!important;
    background-size:var(--sv413-fit, cover)!important;
    background-position:var(--sv413-focus-x,60%) var(--sv413-focus-y,35%)!important;
    background-repeat:no-repeat!important;
    background-color:#eee9e2;
    transform:none;
  }
  .sv4-home-hero:after,
  .sv4-editorial-hero:after,
  .sv4-commerce-hero:after {
    content:"";
    position:absolute;
    inset:0!important;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(250,248,244,0) 0%,
      rgba(250,248,244,0) 36%,
      rgba(250,248,244,.60) 53%,
      rgba(250,248,244,.96) 69%,
      #faf8f4 77%)!important;
  }
  /* Home hero: keep a photographic top and leave enough room for CTA. */
  .sv4-home-hero>.sv4-home-hero-inner {
    display:flex;
    align-items:flex-end!important;
    min-height:var(--sv413-height,560px)!important;
    height:auto;
    padding-block:0;
    position:relative;
    z-index:1;
  }
  .sv4-home-hero .sv4-home-hero-copy {
    width:100%!important;
    max-width:100%;
    padding: max(205px, calc(var(--sv413-height,560px) * .44)) 0 26px!important;
    margin:0;
    position:relative;
  }
  .sv4-home-hero h1 {font-size:clamp(35px,9vw,52px)!important;line-height:1.08;}
  .sv4-home-hero p {font-size:16px;line-height:1.55;max-width:100%;}
  /* Shop and About Us: use the same structure, independently configurable. */
  .sv4-editorial-hero>.sv4-editorial-hero-inner {
    display:flex;
    align-items:flex-end!important;
    min-height:var(--sv413-height,470px)!important;
    height:auto;
    z-index:1;
    position:relative;
  }
  .sv4-editorial-hero .sv4-editorial-hero-inner>div {
    width:100%;
    max-width:100%!important;
    padding: max(180px, calc(var(--sv413-height,470px) * .43)) 0 28px!important;
    margin:0;
  }
  .sv4-editorial-hero h1 {font-size:clamp(35px,8.6vw,46px)!important;line-height:1.12;}
  .sv4-editorial-hero p {font-size:16px;line-height:1.6;}
  /* Cart and Checkout: responsive banner above the functional WooCommerce form. */
  .sv4-commerce-hero>.sv4-shell {
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;
    min-height:var(--sv413-height,380px)!important;
    height:auto;
    padding: max(166px, calc(var(--sv413-height,380px) * .43)) 0 25px!important;
    z-index:1;
    position:relative;
  }
  .sv4-commerce-hero h1 {font-size:clamp(34px,8.8vw,46px)!important;line-height:1.13;margin:0 0 12px;}
  .sv4-commerce-hero p {font-size:16px;line-height:1.6;margin:0;max-width:100%;}
  .sv4-home-hero .sv4-eyebrow,
  .sv4-editorial-hero .sv4-eyebrow,
  .sv4-commerce-hero .sv4-eyebrow {font-size:11px;line-height:1.5;}
}
@media (max-width:359px) {
  .sv4-home-hero .sv4-home-hero-copy {padding-top:190px!important;}
  .sv4-editorial-hero .sv4-editorial-hero-inner>div {padding-top:175px!important;}
  .sv4-commerce-hero>.sv4-shell {padding-top:155px!important;}
}