
/* HomeBerry brand refresh – 26 October 2026
   Exclusive to body.storefront-homeberry; no shared retail theme changes. */
body.storefront-homeberry {
  --hb-ink:#252b34;
  --hb-plum:#292e37;
  --hb-pink:#d50052;
  --hb-pink-dark:#a90042;
  --hb-cream:#fbfaf8;
  --hb-blush:#fff0f4;
  --hb-line:#ede4e5;
  --brand:#d50052;
  --brand-dark:#a90042;
  --soft:#fff0f4;
  --line:#ede4e5;
  --text:#252b34;
  --muted:#68727c;
  background:#fbfaf8;
  color:#252b34;
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
}
body.storefront-homeberry :where(button,input,select,textarea){font-family:inherit}
body.storefront-homeberry .topbar{background:#272d36;color:#fff}
body.storefront-homeberry .topbar .header-returns-promise{background:#365b45;border-color:#71a07d}
body.storefront-homeberry .topbar-inner{font-size:12px;letter-spacing:.005em}
body.storefront-homeberry .site-header{
  background:rgba(255,255,255,.98);
  border-bottom:1px solid #ede4e5;
  box-shadow:0 4px 18px rgba(36,43,52,.045)
}
body.storefront-homeberry .header-row{
  grid-template-columns:minmax(220px,auto) minmax(260px,1fr) auto auto;
  align-items:center;
  gap:16px;
  padding:7px 0;
  min-height:93px
}
body.storefront-homeberry .logo-wrap{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  white-space:nowrap;
  text-decoration:none;
  color:#252b34
}
body.storefront-homeberry .hb-brand-symbol{
  display:block;position:relative;flex:0 0 72px;width:72px;height:70px;overflow:hidden;
  background:#fff;border-radius:10px
}
body.storefront-homeberry .hb-brand-symbol .logo-img{
  position:absolute;max-width:none!important;max-height:none!important;
  width:166px!important;height:166px!important;left:-47px;top:-23px;
  object-fit:contain!important;object-position:center
}
body.storefront-homeberry .hb-brand-name{
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  display:inline-flex;align-items:baseline;gap:0;
  font-weight:850;font-size:28px;letter-spacing:-.065em;line-height:1
}
body.storefront-homeberry .hb-brand-name span:first-child{color:#252b34}
body.storefront-homeberry .hb-brand-name span:last-child{color:#d50052}
body.storefront-homeberry .logo-wrap:focus-visible{outline:3px solid #d50052;outline-offset:5px;border-radius:6px}
body.storefront-homeberry .search{border:1.5px solid #d6d9dc;border-radius:12px;background:#fff}
body.storefront-homeberry .search:focus-within{border-color:#d50052;box-shadow:0 0 0 3px #f8d9e5}
body.storefront-homeberry .search input{color:#252b34}
body.storefront-homeberry .search button{
  background:#d50052;color:#fff;font-weight:800;border-radius:9px;margin:3px;
  min-height:40px;padding:0 21px
}
body.storefront-homeberry .search button:hover{background:#a90042}
body.storefront-homeberry .cart-btn{
  background:#d50052;border-color:#d50052;border-radius:12px;color:white;
  font-weight:850;box-shadow:0 5px 15px rgba(213,0,82,.12)
}
body.storefront-homeberry .cart-btn:hover{background:#a90042}
body.storefront-homeberry .header-contact strong{color:#b00046}
body.storefront-homeberry .nav-wrap{background:#fff;border-bottom:2px solid #f4d1df}
body.storefront-homeberry .nav a{border-radius:9px;color:#333944;font-weight:750}
body.storefront-homeberry .nav a:hover,
body.storefront-homeberry .nav a.active{background:#fff0f4;color:#a90042}
body.storefront-homeberry .nav .nav-bespoke{border-color:#d50052;color:#aa0041}
body.storefront-homeberry .temporary-notice{
  background:#fff8fa;border-bottom:1px solid #f1dbe4;color:#694553
}
body.storefront-homeberry .hb-editorial-hero{padding-top:26px}
body.storefront-homeberry .hb-hero-photo{
  border-radius:21px;background:#ece7e4;
  box-shadow:0 17px 40px rgba(36,43,52,.09)
}
body.storefront-homeberry .hb-hero-panel{
  background:rgba(255,255,255,.97);border:1px solid #f1e7e6;
  box-shadow:0 11px 38px rgba(25,31,41,.13);border-radius:19px
}
body.storefront-homeberry .hb-kicker,
body.storefront-homeberry .hb-heading>span,
body.storefront-homeberry .hb-guide-intro>span,
body.storefront-homeberry .eyebrow{color:#b50048;letter-spacing:.11em}
body.storefront-homeberry .hb-hero-panel h1,
body.storefront-homeberry .hb-heading h2,
body.storefront-homeberry .section-head h2,
body.storefront-homeberry .compact-product-title h1{
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  font-weight:800;
  color:#252b34;letter-spacing:-.052em
}
body.storefront-homeberry .hb-hero-panel h1{
  font-size:clamp(42px,4.6vw,64px);line-height:1.04
}
body.storefront-homeberry .hb-hero-panel p,
body.storefront-homeberry .section-head p{color:#5d6672}
body.storefront-homeberry .hb-text-link{color:#aa0041;text-decoration:underline;text-underline-offset:4px}
body.storefront-homeberry .btn,
body.storefront-homeberry .primary,
body.storefront-homeberry .secondary{border-radius:11px}
body.storefront-homeberry .btn-primary,
body.storefront-homeberry .primary,
body.storefront-homeberry .hero .btn-primary{
  background:#d50052;border-color:#d50052;color:#fff;font-weight:800
}
body.storefront-homeberry .btn-primary:hover,
body.storefront-homeberry .primary:hover{background:#a90042;border-color:#a90042}
body.storefront-homeberry .hb-promises-grid{
  background:#292f38;border-radius:15px;box-shadow:0 10px 25px rgba(36,43,52,.08)
}
body.storefront-homeberry .hb-promises-grid>div{border-color:rgba(255,255,255,.13)}
body.storefront-homeberry .hb-promises span{color:#dce0e5}
body.storefront-homeberry .category-card-main,
body.storefront-homeberry .card,
body.storefront-homeberry .product-card,
body.storefront-homeberry .panel-rich{
  border:1px solid #ece5e6;background:#fff;border-radius:14px;
  box-shadow:0 6px 20px rgba(36,43,52,.045)
}
body.storefront-homeberry .category-card-main{border-top:3px solid #d50052}
body.storefront-homeberry .category-card-main:hover,
body.storefront-homeberry .card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 27px rgba(36,43,52,.10)
}
body.storefront-homeberry .category-card-copy h3,
body.storefront-homeberry .card-body h3{color:#252b34}
body.storefront-homeberry .price{color:#ae0044}
body.storefront-homeberry .seo-hero,
body.storefront-homeberry .seo-copy,
body.storefront-homeberry .category-hero-card{border-color:#ece5e6}
body.storefront-homeberry .compact-product-title{
  border-color:#ece5e6;border-left:5px solid #d50052;background:#fff
}
body.storefront-homeberry .buy-panel{
  border:1.5px solid #ead5df;border-radius:15px!important;
  box-shadow:0 7px 25px rgba(36,43,52,.06)
}
body.storefront-homeberry .buy-panel .btn-primary,
body.storefront-homeberry .buy-panel .primary,
body.storefront-homeberry .buy-panel .buy-button{background:#d50052;border-color:#d50052;border-radius:11px}
body.storefront-homeberry .footer{background:#272d36;border-top:5px solid #d50052}
body.storefront-homeberry .footer-brand{
  display:inline-flex;align-items:center;justify-content:flex-start;
  max-width:146px
}
body.storefront-homeberry .footer-brand img{
  display:block;width:132px!important;height:132px!important;max-width:100%;
  object-fit:contain;border-radius:13px;background:#fff;padding:0;
  box-shadow:0 4px 14px rgba(0,0,0,.14)
}
body.storefront-homeberry :where(button,a,input,select):focus-visible{
  outline:3px solid #d50052;outline-offset:3px
}
@media(max-width:1000px) and (min-width:761px){
  body.storefront-homeberry .header-row{grid-template-columns:minmax(190px,auto) minmax(180px,1fr) auto;gap:12px}
  body.storefront-homeberry .header-contact{display:none}
  body.storefront-homeberry .hb-brand-name{font-size:25px}
  body.storefront-homeberry .hb-brand-symbol{flex-basis:64px;width:64px;height:64px}
  body.storefront-homeberry .hb-brand-symbol .logo-img{width:148px!important;height:148px!important;left:-42px;top:-20px}
}
@media(max-width:760px){
  body.storefront-homeberry .header-row{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"logo basket" "search search";gap:8px;
    padding:6px 0 10px;min-height:0
  }
  body.storefront-homeberry .hb-brand-symbol{flex-basis:54px;width:54px;height:54px}
  body.storefront-homeberry .hb-brand-symbol .logo-img{
    width:125px!important;height:125px!important;left:-36px;top:-17px
  }
  body.storefront-homeberry .hb-brand-name{font-size:23px;letter-spacing:-.075em}
  body.storefront-homeberry .logo-wrap{gap:2px}
  body.storefront-homeberry .cart-btn{min-height:43px;padding:9px 11px;font-size:12px}
  body.storefront-homeberry .search{height:46px}
  body.storefront-homeberry .search button{height:38px;min-height:38px;margin:3px}
  body.storefront-homeberry .hb-hero-panel h1{font-size:clamp(32px,9vw,43px);line-height:1.08}
  body.storefront-homeberry .hb-hero-panel{background:#fff;border-radius:0 0 16px 16px}
  body.storefront-homeberry .hb-hero-panel p{font-size:15px}
  body.storefront-homeberry .hb-hero-photo{border-radius:17px}
  body.storefront-homeberry .section-head h2,
  body.storefront-homeberry .hb-heading h2{font-size:clamp(28px,7.4vw,36px);line-height:1.13}
  body.storefront-homeberry .footer-brand img{width:118px!important;height:118px!important}
}
@media(max-width:355px){
  body.storefront-homeberry .hb-brand-name{font-size:21px}
  body.storefront-homeberry .hb-brand-symbol{flex-basis:48px;width:48px;height:48px}
  body.storefront-homeberry .hb-brand-symbol .logo-img{width:110px!important;height:110px!important;left:-32px;top:-14px}
}
@media(prefers-reduced-motion:reduce){
  body.storefront-homeberry .category-card-main,
  body.storefront-homeberry .card{transition:none}
}

/* Mobile polish: safe header gutters and four-card grid must not exceed 320px. */
@media(max-width:760px){
  body.storefront-homeberry .header-row{
    box-sizing:border-box;
    width:100%;
    padding-inline:12px;
  }
  body.storefront-homeberry .logo-wrap{min-width:0}
  body.storefront-homeberry .hb-space-grid{
    min-width:0;width:100%;grid-template-columns:minmax(0,1fr)
  }
  body.storefront-homeberry .hb-space-grid>.hb-space-card,
  body.storefront-homeberry .hb-space-grid>.hb-space-card:nth-child(1),
  body.storefront-homeberry .hb-space-grid>.hb-space-card:nth-child(2),
  body.storefront-homeberry .hb-space-grid>.hb-space-card:nth-child(3),
  body.storefront-homeberry .hb-space-grid>.hb-space-card:nth-child(4){
    min-width:0;width:100%;max-width:100%;box-sizing:border-box
  }
  body.storefront-homeberry .hb-space-grid>.hb-space-card>div{
    min-width:0;max-width:calc(100% - 34px);
  }
}
@media(max-width:355px){
  body.storefront-homeberry .header-row{padding-inline:10px}
  body.storefront-homeberry .hb-brand-name{font-size:19px}
  body.storefront-homeberry .cart-btn{font-size:11px;padding-inline:8px}
}

/* Consistent HomeBerry typography across category, product, town and checkout pages. */
body.storefront-homeberry h1,
body.storefront-homeberry h2,
body.storefront-homeberry h3,
body.storefront-homeberry .hb-space-card strong,
body.storefront-homeberry .hb-guide-intro strong,
body.storefront-homeberry .rescue-offer-banner strong {
  font-family:"Segoe UI",Arial,Helvetica,sans-serif!important;
  letter-spacing:-.035em;
}
body.storefront-homeberry .hb-category-page h1,
body.storefront-homeberry .hb-product-page h1{
  letter-spacing:-.045em;
  line-height:1.12;
}
body.storefront-homeberry .hb-local-context h2{color:#252b34}
body.storefront-homeberry .hb-category-page .category-hero-card,
body.storefront-homeberry .hb-product-page .compact-product-title{
  border-color:#eee4e7;
}

/* HomeBerry hero readability correction — 26 Oct 2026.
   Wider headline card + two balanced lines; retain mobile image-first layout. */
@media(min-width:761px){
  body.storefront-homeberry .hb-hero-panel{
    width:min(455px,calc(100% - 56px));
    padding:28px 30px 27px;
  }
  body.storefront-homeberry .hb-hero-panel h1{
    font-size:clamp(42px,3.6vw,48px);
    line-height:1.1;
    margin:11px 0 15px;
    letter-spacing:-.045em;
  }
}

/* HomeBerry hero structural fix · 26 Oct 2026.
   Keep editorial copy outside the photograph: no overlap, at any viewport. */
@media(min-width:901px){
  body.storefront-homeberry .hb-hero-photo{
    display:grid;
    grid-template-columns:minmax(0,41%) minmax(0,59%);
    align-items:stretch;
    isolation:isolate;
    height:560px;
    min-height:560px;
    background:#fff;
    border-radius:22px;
  }
  body.storefront-homeberry .hb-hero-photo:after{display:none}
  body.storefront-homeberry .hb-hero-photo>img{
    position:relative;
    inset:auto;
    grid-column:2;
    grid-row:1;
    display:block;
    width:100%;
    height:100%;
    min-width:0;
    object-fit:cover;
    object-position:63% center;
  }
  body.storefront-homeberry .hb-hero-panel{
    position:relative;
    grid-column:1;
    grid-row:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-sizing:border-box;
    left:auto;
    right:auto;
    bottom:auto;
    width:auto;
    max-width:none;
    height:100%;
    min-width:0;
    padding:clamp(26px,2.8vw,44px);
    background:#fff;
    border:none;
    border-radius:0;
    box-shadow:none;
    backdrop-filter:none;
  }
  body.storefront-homeberry .hb-hero-panel h1{
    font-size:clamp(34px,3.3vw,48px);
    line-height:1.1;
    letter-spacing:-.045em;
  }
  body.storefront-homeberry .hb-hero-panel p{font-size:15px}
}
@media(min-width:761px) and (max-width:900px){
  body.storefront-homeberry .hb-hero-photo{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    min-height:0;
    height:auto;
    background:#fff;
    overflow:hidden;
    border-radius:18px;
  }
  body.storefront-homeberry .hb-hero-photo>img{
    position:relative;
    inset:auto;
    display:block;
    width:100%;
    height:330px;
    flex:0 0 330px;
    object-fit:cover;
    object-position:68% center;
  }
  body.storefront-homeberry .hb-hero-photo:after{display:none}
  body.storefront-homeberry .hb-hero-panel{
    position:relative;
    box-sizing:border-box;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    transform:none;
    width:100%;
    max-width:none;
    height:auto;
    padding:30px 34px;
    background:#fff;
    border:0;
    border-radius:0;
    box-shadow:none;
    backdrop-filter:none;
  }
  body.storefront-homeberry .hb-hero-panel h1{
    font-size:42px;
    line-height:1.1;
  }
  body.storefront-homeberry .hb-hero-panel p{max-width:60ch}
}

/* Header mark fix 26 Oct: show the entire HB, not an oversized cropped wordmark. */
body.storefront-homeberry .hb-brand-symbol{
  display:flex;align-items:center;justify-content:center;
  overflow:visible;position:relative;
  background:#fff;
}
body.storefront-homeberry .hb-brand-symbol .logo-img{
  position:static!important;inset:auto!important;
  left:auto!important;top:auto!important;
  display:block!important;
  width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:6px;
}
