/* Exact same selectors in the editor and storefront. */
.hero44-slot{container-type:inline-size;width:100%}
section.brandHero44{margin:0;padding:0;border:0;box-sizing:border-box;width:100%;max-width:100%;position:relative;isolation:isolate;overflow:hidden;border-radius:6px;min-height:270px;aspect-ratio:4/3;font-family:'GXJ Serif','Noto Serif TC',serif;color:#30281e;background:#eee5d6}
section.brandHero44:after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,250,235,.96) 0%,rgba(255,250,235,.82) 35%,rgba(255,250,235,.2) 72%,transparent)}
section.brandHero44>img.heroPhoto44,.crop38 section.brandHero44>img.heroPhoto44{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;margin:0;border:0;border-radius:0}
section.brandHero44>.heroContent44{position:relative;z-index:1;box-sizing:border-box;padding:var(--heroSafe44);width:78%;max-width:78%;background:transparent;border:0}
section.brandHero44 img.heroLogo44,.crop38 section.brandHero44 img.heroLogo44{display:block;position:static;width:132px;height:52px;max-width:100%;object-fit:contain;object-position:left center;background:transparent;border:0;border-radius:0;margin:0 0 7px;transform:none}
section.brandHero44 .heroName44{display:block;font:12px/1.5 system-ui,sans-serif;color:#6d5740;margin:0 0 7px}
section.brandHero44 h1.heroTitle44{font:700 27px/1.4 'GXJ Serif','Noto Serif TC',serif;letter-spacing:.2px;margin:7px 0 8px;max-width:230px;background:transparent;padding:0;border:0;overflow-wrap:anywhere;text-wrap:balance}
section.brandHero44 p.heroTagline44{font:15px/1.65 'GXJ Serif','Noto Serif TC',serif;margin:0;max-width:240px;background:transparent;padding:0;color:#604a34}
section.brandHero44 .brand-mark{background:transparent;border:0}
@container(min-width:600px){section.brandHero44{aspect-ratio:3/1;min-height:290px}section.brandHero44>.heroContent44{width:60%;max-width:60%}section.brandHero44 h1.heroTitle44{font-size:32px;max-width:320px}section.brandHero44 img.heroLogo44{width:156px;height:62px}}
/* Preview canvases keep real storefront dimensions, then fit inside the editor. */
.cropPhone38,.cropDesktop38{width:100%;height:auto;background:transparent;overflow:hidden;margin:12px 0 22px;position:relative}
.cropPhone38{max-width:362px}.hero44-canvas{position:absolute;top:0;left:0;transform-origin:top left}.crop38 .hero44-canvas img{border:0}

.crop38 .cropPhone38{width:min(362px,100%);max-width:362px;background:transparent}.crop38 .cropDesktop38{width:100%;background:transparent}