/* Raining Berries – phone & tablet refinements (loaded after site.css) */

/* ---------- Home hero (phones) ---------- */
@media (max-width:600px){
  [data-banner]{background-image:var(--rb-hm) !important;background-position:center 62% !important;align-items:stretch !important;aspect-ratio:auto !important;min-height:min(calc(100svh - 120px),720px);height:auto}
  [data-banner] > div:first-child{background:linear-gradient(180deg,rgba(253,236,244,.78) 0%,rgba(253,236,244,.35) 24%,rgba(253,236,244,0) 40%,rgba(253,236,244,0) 74%,rgba(253,236,244,.55) 100%) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  [data-banner] [data-pad]{display:flex !important;flex-direction:column;padding-top:34px !important;padding-bottom:58px !important}
  [data-hero-text]{flex:1;justify-content:space-between !important;align-items:center !important;gap:24px !important}
  [data-hero-text] h1{font-size:clamp(46px,13.5vw,60px) !important}
  [data-hero-text] > div:last-child{width:100%;max-width:360px;display:grid !important;grid-template-columns:1fr 1fr;gap:10px !important}
  [data-hero-text] > div:last-child a{min-height:54px !important;padding:0 10px !important;font-size:12px !important;letter-spacing:.1em !important;background-color:#FFFFFF}
  [data-hero-text] > div:last-child a:first-child{background-color:#F21781}
}

/* ---------- General alignment on phones/tablets: headings are centred, so buttons follow ---------- */
@media (max-width:900px){
  main [style*="column"][style*="align-items:flex-start"], main [style*="column"][style*="align-items: flex-start"]{align-items:center !important}
  main a[style*="align-self:flex-start"], main a[style*="align-self: flex-start"]{align-self:center !important}
  main [style*="flex-wrap"]{justify-content:center}
  main [style*="column"]:has(> a[data-ph="App Store"]){align-items:center !important}
  main [data-rbif="f.open"] p{text-align:left !important}
  main [data-scope^="t|careerTraits"]{max-width:100%;text-align:center !important;justify-content:center}
  /* menu category tabs: keep left-scroll start */
  [data-menu-tabs] > div{justify-content:flex-start !important}
  /* forms: labels and fields stay left aligned */
  main form label, main form label span, main form p{text-align:left}
}

/* Button groups that stack on phones: full width and even */
@media (max-width:600px){
  main [style*="flex-wrap"] > a[style*="border-radius:999px"], main [style*="flex-wrap"] > a[style*="border-radius: 999px"]{flex:1 1 auto;min-width:calc(50% - 6px);white-space:nowrap;padding-left:14px !important;padding-right:14px !important;text-align:center}
}

/* ---------- Footer (phones) ---------- */
@media (max-width:900px){
  footer [data-stack]{grid-template-columns:1fr 1fr !important;column-gap:16px !important;row-gap:34px !important}
  footer [data-stack] > div:first-child{grid-column:1 / -1;align-items:center !important;text-align:center}
  footer [data-stack] > div:first-child > div{justify-content:center}
  footer [data-stack] > div:first-child > div > span{text-align:center}
  footer [data-stack] > div:not(:first-child){align-items:center;text-align:center}
  footer > div:last-of-type{justify-content:center !important;text-align:center}
  footer > div:last-of-type > span{justify-content:center}
}

/* ---------- Mobile menu panel ---------- */
@media (max-width:1239px){
  [data-rbif="menuOpen"] nav a.rbh5, [data-rbif="menuOpen"] nav > div[data-menu-link] > a.rbh5{font-size:clamp(30px,8.6vw,44px) !important;padding:10px 0 !important;border-bottom:1px solid rgba(206,14,104,.18) !important;line-height:1.05 !important}
  [data-rbif="menuOpen"] nav > div[data-menu-link]{border-bottom:0 !important}
  [data-rbif="menuOpen"] nav > div[data-menu-link] > div{padding:14px 0 6px;gap:12px 20px !important}
  .rb-social{display:flex;gap:12px;align-items:center}
  .rb-social a{width:48px;height:48px;border-radius:50%;background:#FFFFFF;display:inline-flex !important;align-items:center;justify-content:center;padding:0 !important;box-shadow:0 6px 16px rgba(206,14,104,.12)}
}
@media (hover:none){ .rbh5:hover{padding-left:0 !important} }
@media (max-width:900px){ main [data-scope^="d|seasonalDrinks"] h3, main [data-scope^="d|seasonalDrinks"] span{text-align:left !important} }
@media (max-width:1239px){ [data-rbif="menuOpen"] nav > div[data-menu-link] > div{display:grid !important;grid-template-columns:1fr 1fr} }
@media (max-width:900px){
  /* location cards: content reads left to right */
  main [data-on-click="pickLoc"] [style*="flex-wrap"]{justify-content:flex-start}
  /* EV specification rows: label above value */
  main [data-scope^="sp|evSpecs"]{grid-template-columns:1fr !important;gap:2px !important;text-align:left}
  main [data-scope^="sp|evSpecs"] span{text-align:left !important}
}
@media (max-width:600px){
  /* nutrition slider handwritten note: keep it inside the card */
  [data-nut-card] [style*="top:2%"], [data-nut-card] [style*="top: 2%"]{left:calc(50% + 8px) !important}
  [data-nut-card] [style*="Gochi"]{font-size:18px !important;max-width:7em !important}
}

/* ---------- Instagram feed (Smash Balloon) styled like the design's tile grid ---------- */
.rb-ig #sb_instagram{padding:0 !important;width:100% !important}
.rb-ig #sb_instagram #sbi_images{display:grid !important;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px !important;padding:0 !important;width:100% !important}
.rb-ig #sb_instagram .sbi_item{width:100% !important;padding:0 !important;margin:0 !important;border-radius:20px;overflow:hidden;aspect-ratio:1;box-shadow:0 10px 24px rgba(206,14,104,.10)}
.rb-ig #sb_instagram .sbi_item:nth-child(n+13){display:none !important}
.rb-ig #sb_instagram .sbi_photo_wrap,.rb-ig #sb_instagram .sbi_photo{height:100% !important;border-radius:20px}
.rb-ig #sb_instagram .sbi_photo img{width:100% !important;height:100% !important;object-fit:cover}
.rb-ig #sb_instagram .sbi_item:hover .sbi_photo img{transform:scale(1.04);transition:transform .5s ease}
.rb-ig #sb_instagram .sb_instagram_header,.rb-ig #sb_instagram #sbi_load,.rb-ig #sb_instagram .sbi_follow_btn{display:none !important}
@media (max-width:900px){ .rb-ig #sb_instagram #sbi_images{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px !important} .rb-ig #sb_instagram .sbi_item,.rb-ig #sb_instagram .sbi_photo_wrap,.rb-ig #sb_instagram .sbi_photo{border-radius:14px} }

/* Portal terms text */
.rb-terms-body{font-size:16px;line-height:1.7;color:#2A1620}
.rb-terms-body h2{margin:1.6em 0 .4em;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(20px,2vw,26px);color:#CE0E68}
.rb-terms-body p,.rb-terms-body ul{margin:0 0 1em}.rb-terms-body ul{padding-left:1.3em}.rb-terms-body li{margin:.25em 0}
.rb-terms-body a{color:#CE0E68;text-decoration:underline}
.rb-terms-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:#2A1620;text-align:left;cursor:pointer}
.rb-terms-check input{accent-color:#F21781;width:18px;height:18px;margin:1px 0 0;flex:none}
.rb-terms-check a{color:#CE0E68;font-weight:700;text-decoration:underline}

/* Questionnaire choice buttons */
.rb-fq-opt{position:relative;cursor:pointer}
.rb-fq-opt input{position:absolute;opacity:0;width:1px;height:1px}
.rb-fq-opt span{display:inline-flex;align-items:center;min-height:46px;padding:10px 20px;border-radius:999px;border:1.5px solid rgba(206,14,104,.35);background:#FFFFFF;color:#2A1620;font-weight:600;font-size:15px;line-height:1.3;transition:all .2s ease}
.rb-fq-opt:hover span{border-color:#F21781}
.rb-fq-opt input:checked + span{background:#F21781;border-color:#F21781;color:#FFFFFF}
.rb-fq-opt input:focus-visible + span{outline:2px solid #CE0E68;outline-offset:2px}
.rb-fq legend{text-align:left}
@media (max-width:900px){ .rb-fq > div{justify-content:flex-start !important} }
/* location page: centre the phone row like the address */
@media (max-width:900px){ main [data-stack] > [data-reveal] > div > div[style*="gap:10px"], main [data-stack] > [data-reveal] > div > div[style*="gap: 10px"]{justify-content:center} }
@media (max-width:900px){ .rb-contact{grid-template-columns:1fr !important} .rb-contact button[type=submit]{align-self:stretch !important} }
.rb-fq-wrap > div:first-child{row-gap:20px !important;column-gap:20px !important}
/* Instagram feed (Spotlight): full-width, rounded tiles to match the design */
.rb-ig{width:100%}
.rb-ig .spotlight-instagram-feed, .rb-ig [class*="spotlight"]{max-width:100% !important}
.rb-ig a[href*="instagram.com/p/"], .rb-ig a[href*="instagram.com/reel/"]{border-radius:20px;overflow:hidden}
@media (max-width:900px){ .rb-ig a[href*="instagram.com/p/"], .rb-ig a[href*="instagram.com/reel/"]{border-radius:14px} }
main p a:not([class]):not([style]), main li a:not([class]):not([style]){color:#CE0E68;text-decoration:underline;text-underline-offset:3px}
.rb-autolink{color:inherit;text-decoration:underline;text-decoration-color:rgba(206,14,104,.55);text-underline-offset:3px}.rb-autolink:hover{color:#CE0E68}
/* Spotlight Instagram grid styled like the design tiles */
.rb-ig .FeedHeader__root,.rb-ig .FeedLayout__col-footer{display:none !important}
.rb-ig .FeedLayout__root,.rb-ig .FeedLayout__wrapper{padding:0 !important;background:transparent !important}
.rb-ig .FeedGridLayout__grid{display:grid !important;grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:14px !important}
.rb-ig .FeedGridLayout__cell{border-radius:20px;overflow:hidden;box-shadow:0 10px 24px rgba(206,14,104,.10)}
.rb-ig .MediaTile__root img{transition:transform .5s ease}
.rb-ig .FeedGridLayout__cell:hover .MediaTile__root img{transform:scale(1.04)}
.rb-ig .MediaTile__type-icon{transform:scale(.7);transform-origin:top right;opacity:.9}
@media (max-width:900px){.rb-ig .FeedGridLayout__grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important}.rb-ig .FeedGridLayout__cell{border-radius:14px}}
/* Franchisee portal dashboard (same layout as the original portal, styled like the rest of the site) */
.rb-pl{display:flex;flex-direction:column}
.rb-pl-intro{text-align:center;padding:clamp(8px,2vw,20px) 0 clamp(40px,5vw,60px)}
.rb-pl-intro h2{margin:0 0 14px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1;font-size:clamp(30px,3.8vw,52px);color:#CE0E68}
.rb-pl-intro p{margin:0 0 4px;font-size:16px;line-height:1.55;color:#2A1620}
.rb-pl-quick{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:980px;margin:26px auto 0}
.rb-pl-qbtn,.rb-pl-stab{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:999px;border:1.7px solid #F21781;background:#FFFFFF;color:#CE0E68;font:inherit;font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .25s ease,color .25s ease}
.rb-pl-qbtn:hover,.rb-pl-stab:hover,.rb-pl-stab.is-on{background:#F21781;color:#FFFFFF}
.rb-pl-list{display:flex;flex-direction:column;gap:clamp(48px,6vw,80px)}
.rb-pl-cat{scroll-margin-top:calc(var(--rb-hh,88px) + 16px)}
.rb-pl-band{margin:0 0 clamp(20px,2.6vw,30px);padding:clamp(26px,3.4vw,42px) 0;background:#FDECF4;box-shadow:0 0 0 100vmax #FDECF4;clip-path:inset(0 -100vmax);color:#CE0E68;text-align:center;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1;font-size:clamp(30px,3.8vw,52px)}
.rb-pl-stabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 clamp(22px,3vw,34px)}
.rb-pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:clamp(14px,1.8vw,22px)}
.rb-pl-card{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:#FFFFFF;box-shadow:0 12px 32px rgba(206,14,104,.08);transition:transform .25s ease,box-shadow .25s ease}
.rb-pl-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(206,14,104,.14)}
.rb-pl-media{display:block;text-decoration:none}
.rb-pl-thumb{position:relative;aspect-ratio:16/11;background:#FDECF4 center/cover no-repeat;overflow:hidden}
.rb-pl-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.rb-pl-blank{display:flex;align-items:center;justify-content:center}
.rb-pl-tag{padding:9px 20px;border-radius:999px;background:#FFFFFF;color:#CE0E68;font-weight:900;font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.rb-pl-blank .rb-pl-play{display:none}
.rb-pl-play{position:absolute;left:50%;top:50%;z-index:2;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:rgba(242,23,129,.92);color:#FFFFFF;display:flex;align-items:center;justify-content:center}
.rb-pl-play svg{width:22px;height:22px}
.rb-pl-body{flex:1;display:flex;flex-direction:column;gap:14px;padding:18px 16px 16px}
.rb-pl-body h4{margin:0;flex:1;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;font-size:19px;color:#CE0E68}
.rb-pl-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid #FDECF4}
.rb-pl-kind{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#2A1620;opacity:.7}
.rb-pl-btn{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#CE0E68;text-decoration:none}
.rb-pl-arr{width:28px;height:28px;border-radius:50%;background:#F21781;color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;transition:transform .25s ease}
.rb-pl-arr svg{width:14px;height:14px}
.rb-pl-btn:hover .rb-pl-arr{transform:translateX(3px)}
.rb-pl-off{color:#2A1620;opacity:.5}
.rb-pl-empty{text-align:center;opacity:.7}
@media (max-width:700px){.rb-pl-qbtn,.rb-pl-stab{min-height:42px;padding:0 16px;font-size:12px}.rb-pl-stabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:0 16px}.rb-pl-stabs::-webkit-scrollbar{display:none}.rb-pl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.rb-pl-body h4{font-size:16px}.rb-pl-body{padding:14px 12px 12px}}
@media (max-width:420px){.rb-pl-grid{grid-template-columns:1fr}}