/* Box-focused visual refresh. Original offer and review components retained. */
.sf-visual-refresh figure{margin:0}
.sf-visual-refresh a:focus-visible,.sf-visual-refresh button:focus-visible{outline:3px solid #00a8c2;outline-offset:4px}
.sf-visual-refresh .banner{background:radial-gradient(ellipse at 85% 20%,#1a4562 0,transparent 60%),#101d3a;padding:40px 0 48px}
.sf-visual-refresh .banner-left{float:none;width:100%;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'copy media';column-gap:44px;align-items:start}
.sf-hero-copy{grid-area:copy;display:flex;flex-direction:column;min-width:0}
.sf-visual-refresh .banner-heading{grid-area:heading;float:none;margin:0 0 24px;font-size:44px;line-height:1.13;letter-spacing:-1.2px;font-weight:700}
.sf-visual-refresh .banner-strip{grid-area:offer;max-width:100%;margin:0 0 12px}
.sf-visual-refresh .banner-point{grid-area:points;margin:8px 0 14px}
.sf-visual-refresh .banner-point li{font-size:18px;line-height:25px;padding-top:6px;padding-bottom:6px}
.sf-visual-refresh .sf-hero-copy>.btn-box{position:static;float:none;margin:16px 0 0;width:100%;max-width:100%}
.sf-visual-refresh .sf-hero-copy>.banner-list{position:static;inset:auto;float:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:28px 0 0;padding:18px 0 0;width:100%;max-width:100%;border-top:1px solid #54647c;text-align:center}
.sf-visual-refresh .banner-list li{position:static;float:none;width:auto;min-width:0;padding:0 12px;border:0;border-right:1px solid #54647c;font-size:13px;line-height:1.5}
.sf-visual-refresh .banner-list li:last-child{border:0}
.sf-visual-refresh .banner-list li span{display:inline-block;margin-top:4px;margin-right:3px;font-size:25px;line-height:1.15;vertical-align:baseline}
.sf-hero-media{grid-area:media;min-width:0;align-self:start;padding-top:3px}
.sf-hero-stage{aspect-ratio:4/5;overflow:hidden;border-radius:20px;background:#edf2f4;border:1px solid rgba(255,255,255,.25);box-shadow:0 18px 45px rgba(0,0,0,.16)}
.sf-hero-stage img,.sf-hero-stage video{display:block;width:100%;height:100%;object-fit:contain}
.sf-hero-stage [hidden]{display:none!important}
.sf-hero-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.sf-hero-thumb{font:inherit;cursor:pointer;display:grid;grid-template-columns:47px minmax(0,1fr);align-items:center;gap:8px;border:1px solid #61798c;background:#1d314b;color:#e6f2f6;border-radius:10px;padding:6px;text-align:left;font-size:11px;line-height:1.25;font-weight:600;min-width:0}
.sf-hero-thumb img{display:block;width:47px;height:46px;object-fit:cover;border-radius:6px}
.sf-hero-thumb[aria-pressed=true]{background:#e7faff;color:#142657;border-color:#55d6e8;box-shadow:0 0 0 1px #55d6e8}
.sf-hero-caption{font-size:12px;line-height:1.4;color:#c7d9e5;margin-top:12px;text-align:center;letter-spacing:.1px}
.sf-visual-refresh .s1-top{padding:0 0 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'photo heading' 'photo first' 'photo second';column-gap:40px;align-items:start}
.sf-visual-refresh .s1-top>.common-heading{grid-area:heading;font-size:39px;line-height:1.16;letter-spacing:-.8px;padding-bottom:25px}
.sf-visual-refresh .s1-top>.common-text{float:none;font-size:18px;line-height:1.6;margin-top:18px}
.sf-visual-refresh .s1-top>.common-text.sf-overview-first{grid-area:first}
.sf-visual-refresh .s1-top>.common-text.sf-overview-second{grid-area:second}
.sf-overview-photo{grid-area:photo;align-self:center;min-width:0}
.sf-overview-photo img{display:block;width:100%;height:auto;border-radius:18px}
.sf-overview-photo figcaption{margin-top:13px;color:#546476;font-size:13px;text-align:left;line-height:1.4}
.sf-visual-refresh .s1-mid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);grid-template-areas:'photo features' 'photo cta';gap:24px 36px;padding:30px;background:#142747;margin-top:20px}
.sf-detail-photo{grid-area:photo;align-self:center;min-width:0}
.sf-detail-photo img{display:block;width:100%;height:auto;max-height:490px;object-fit:contain;border-radius:14px}
.sf-visual-refresh .s1-mid-list{grid-area:features;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 10px;float:none}
.sf-visual-refresh .s1-mid-list li{float:none;width:auto;margin:0}
.sf-visual-refresh .s1-mid-list li:after{display:none}
.sf-visual-refresh .s1-mid-list li img{max-width:64px}
.sf-visual-refresh .s1-mid>.btn-box{grid-area:cta;margin:0 auto;width:100%;max-width:464px}
.sf-visual-refresh .s1-mid>.clearall{display:none}
.sf-visual-refresh .s2-slide-img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover}
.sf-visual-refresh .s2-slide-col{overflow:visible}
.sf-visual-refresh .s4-gift-box{padding:0;border-radius:20px;overflow:hidden;box-shadow:0 12px 35px rgba(12,30,60,.12)}
.sf-visual-refresh .s4-gift-box-inner{padding:32px;border:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:'heading photo' 'text photo' 'cta photo';gap:20px 32px;align-items:start}
.sf-visual-refresh .gift-head{grid-area:heading;font-size:38px;line-height:1.12;letter-spacing:-.5px}
.sf-visual-refresh .gift-box-text{grid-area:text;margin:0;padding:0;font-size:17px;line-height:1.6}
.sf-gift-photo{grid-area:photo;align-self:center;min-width:0}
.sf-gift-photo img{display:block;width:100%;height:auto;border-radius:13px}
.sf-visual-refresh .s4-gift-box-inner>.btn-box{grid-area:cta;width:100%;margin-top:0;max-width:470px}
.sf-visual-refresh .section7{background:linear-gradient(145deg,#142b4d,#161b3f)}
.sf-kit-photo{max-width:970px;margin:26px auto 0!important;overflow:hidden;border-radius:20px;background:#ecdbc3;box-shadow:0 20px 50px rgba(0,0,0,.16)}
.sf-kit-photo img{display:block;width:100%;height:auto}
.sf-kit-caption{font-size:13px;line-height:1.5;color:#dbe8f4;margin-top:14px;letter-spacing:0}
.sf-visual-refresh .logo{display:block;width:190px;max-width:190px;height:auto;max-height:48px;object-fit:contain}
.sf-visual-refresh .ftr-logo{width:190px;max-width:190px;height:auto;max-height:70px;object-fit:contain}
.sf-visual-refresh .btn-box .btn-top-text{float:none}
.sf-visual-refresh .btn-box a.commonBtn{display:flex;align-items:center;justify-content:center;gap:10px;float:none;min-height:66px;height:auto;line-height:1.25;padding:15px 10px;font-size:clamp(16px,1.6vw,22px)}
.sf-visual-refresh .btn-box .btn-arrw{width:24px;height:auto;flex:none;margin:0}
.sf-visual-refresh .rev-slider .slick-disabled{opacity:.35}
@media(min-width:768px) and (max-width:1023px){
 .sf-visual-refresh .banner-left{column-gap:26px}.sf-visual-refresh .banner-heading{font-size:33px}.sf-visual-refresh .banner-point li{font-size:15px;line-height:22px}.sf-hero-thumb{grid-template-columns:1fr;text-align:center}.sf-hero-thumb img{margin:auto}.sf-visual-refresh .s1-top{column-gap:25px}.sf-visual-refresh .s1-top>.common-heading{font-size:29px}.sf-visual-refresh .s1-top>.common-text{font-size:16px}.sf-visual-refresh .s1-mid{gap:20px;padding:24px}.sf-visual-refresh .s1-mid-list{grid-template-columns:repeat(4,minmax(0,1fr))}.sf-visual-refresh .s4-gift-box-inner{padding:24px;column-gap:24px}.sf-visual-refresh .gift-head{font-size:30px}
}
@media(max-width:767px){
 .sf-visual-refresh .logo{width:128px;max-width:128px;max-height:40px}.sf-hero-copy{display:contents}
 .sf-visual-refresh .btn-box a.commonBtn{font-size:clamp(15px,4.3vw,19px);min-height:62px}.sf-visual-refresh .btn-box .btn-arrw{width:20px}
 .sf-visual-refresh .banner{padding:25px 0 30px}.sf-visual-refresh .banner-left{display:flex;flex-direction:column;gap:0}.sf-visual-refresh .banner-heading{order:0;font-size:34px;line-height:1.14;letter-spacing:-.6px;text-align:center;margin:0 0 22px}.sf-hero-media{order:1;width:100%;max-width:440px;align-self:center;padding:0;margin:0 0 24px}.sf-hero-stage{max-width:360px;margin:0 auto;border-radius:16px}.sf-hero-thumbs{gap:7px}.sf-hero-thumb{grid-template-columns:37px minmax(0,1fr);gap:6px;padding:5px;font-size:10px}.sf-hero-thumb img{width:37px;height:40px}.sf-hero-caption{font-size:11px}.sf-visual-refresh .banner-strip{order:2;width:100%;margin:0 0 10px}.sf-visual-refresh .banner-point{order:3;margin:7px 0}.sf-visual-refresh .banner-point li{font-size:16px;line-height:23px;padding-top:6px;padding-bottom:6px}.sf-visual-refresh .sf-hero-copy>.btn-box{order:4;display:block!important;width:100%;margin-top:22px}.sf-visual-refresh .sf-hero-copy>.banner-list{order:5;display:grid;margin-top:24px}.sf-visual-refresh .banner-list li{width:auto;font-size:12px;padding:0 7px}.sf-visual-refresh .banner-list li span{font-size:26px}.sf-visual-refresh .banner .btn-top-text{font-size:12px}.sf-visual-refresh .banner .btn-top-text:before,.sf-visual-refresh .banner .btn-top-text:after{width:17px}
 .sf-visual-refresh .s1-top{display:flex;flex-direction:column;padding:0 0 24px;gap:0}.sf-visual-refresh .s1-top>.common-heading{order:0;font-size:31px;line-height:1.15;padding-bottom:25px;text-align:center;background-position:center bottom}.sf-overview-photo{order:1;margin:24px 0 2px!important}.sf-overview-photo figcaption{text-align:center;font-size:12px}.sf-visual-refresh .s1-top>.common-text{order:2;font-size:17px;line-height:1.6;text-align:left}.sf-visual-refresh .s1-mid{display:flex;flex-direction:column;padding:20px;gap:26px;margin-top:16px}.sf-detail-photo{width:100%;max-width:280px;align-self:center}.sf-detail-photo img{max-height:320px;width:100%;object-fit:contain}.sf-visual-refresh .s1-mid-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 6px}.sf-visual-refresh .s1-mid-list li p{font-size:12px;line-height:17px}.sf-visual-refresh .s1-mid-list li img{height:45px;width:auto}.sf-visual-refresh .s1-mid>.btn-box{display:none}
 .sf-visual-refresh .s4-gift-box{margin-top:32px}.sf-visual-refresh .s4-gift-box-inner{display:flex;flex-direction:column;padding:24px 20px;gap:20px}.sf-visual-refresh .gift-head{order:0;font-size:32px;text-align:center}.sf-gift-photo{order:1;width:100%}.sf-visual-refresh .gift-box-text{order:2;font-size:17px;line-height:1.6}.sf-visual-refresh .s4-gift-box-inner>.btn-box{order:3;display:block!important}.sf-kit-photo{margin-top:22px!important;border-radius:13px}.sf-kit-caption{font-size:12px;padding:0 8px}.sf-visual-refresh .s7-incld-head{font-size:23px;line-height:1.3;padding:12px}.sf-visual-refresh .section7{padding-top:40px}
}
@media(prefers-reduced-motion:reduce){.sf-visual-refresh *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Grey-only media revision */
.sf-visual-refresh .sf-grey-flight-choices{gap:20px}
.sf-visual-refresh .sf-grey-flight-choices>.s4-col{width:calc(50% - 10px)}
.sf-visual-refresh .sf-text-review{justify-content:center}
.sf-visual-refresh .sf-text-review>.rev-rgt-slide{float:none;width:100%;max-width:800px;margin-left:auto;margin-right:auto}

/* ---- SELL-1343 QA: mobile fixes (items 2-7) ---- */
@media(max-width:767px){
  /* 2. breathing room between the header bar and the hero headline */
  .sf-visual-refresh .banner{padding-top:44px}

  /* 3. feature icon grid was cramped */
  .sf-visual-refresh .s1-mid-list{gap:28px 14px}

  /* 4. divider rules kept their 70px desktop width outside the hero, pushing the line to wrap */
  .sf-visual-refresh .btn-top-text{white-space:nowrap}
  .sf-visual-refresh .btn-top-text:before,
  .sf-visual-refresh .btn-top-text:after{width:17px}

  /* 5. shipping + guarantee badges on one line under the CTA */
  .sf-visual-refresh .btn-btm-text{flex-wrap:nowrap;justify-content:center}
  .sf-visual-refresh .btn-btm-text span{white-space:nowrap;font-size:clamp(10px,2.9vw,13px);padding:0 6px}
  .sf-visual-refresh .btn-btm-text span img{width:18px;height:auto;margin:-3px 5px 0 0}

  /* 6. CTA label on one line */
  .sf-visual-refresh .btn-box a.commonBtn{font-size:clamp(13px,3.8vw,19px);white-space:nowrap}

  /* 7. box contents: 2x2 grid so all four items align regardless of label length */
  .sf-visual-refresh ul.s7-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .sf-visual-refresh ul.s7-list li,
  .sf-visual-refresh ul.s7-list li:first-child,
  .sf-visual-refresh ul.s7-list li:last-child{float:none;width:auto;margin:25px 0 0}
}

/* SELL-1343 #3: at phone widths 4 columns leave ~66px per label, so "Long Battery
   Life" and "EPP Anti-Fall Material" break over 3 lines. Extra gap did not help —
   the column count was the constraint. */
@media(max-width:479px){
  .sf-visual-refresh .s1-mid-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
}

/* SELL-1343 #2: black-friday-banner.css claims the generic `.banner` class with
   padding:0!important. Its own banner lives in a shadow root, so that rule only
   ever lands on this hero and flattened it. Re-assert the hero's padding. */
.sf-visual-refresh .banner{padding:40px 0 48px!important}
@media(max-width:767px){
  .sf-visual-refresh .banner{padding:44px 0 30px!important}
}

/* ---- SELL-1343 QA round 2 ---- */

/* G5/M6/T2: "Hurry! Only N Left At This Price" was left-aligned inside the 470px
   CTA box and the two 70px rules pushed "Price" onto a second line. Flex row:
   the rules shrink, the sentence never wraps and stays centred over the button. */
.sf-visual-refresh .btn-top-text {
  float: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* the words are separated by   in the markup, so no flex gap here -
     the spacing survives even when this stylesheet does not reach the page */
  gap: 0;
  white-space: nowrap;
}
.sf-visual-refresh .btn-top-text:before,
.sf-visual-refresh .btn-top-text:after {
  flex: 0 1 auto;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  /* M5: the base rule caps these icons at 64px wide while the phone rule asks for
     a 45px height, so a 100x51 source rendered 64x45 - squashed. */
  .sf-visual-refresh .s1-mid-list li img { max-width: none; }

  /* M7: the arrows sat over the review copy at top:50%. Park them under it. */
  .sf-visual-refresh .rev-slider { padding-bottom: 58px; }
  .sf-visual-refresh .rev-slider .slick-prev,
  .sf-visual-refresh .rev-slider .slick-next {
    top: auto;
    bottom: 0;
    margin-top: 0;
    transform: none;
  }
  .sf-visual-refresh .rev-slider .slick-prev { left: calc(50% - 56px); right: auto; }
  .sf-visual-refresh .rev-slider .slick-next { left: calc(50% + 16px); right: auto; }
}

/* T2: at 768-1023px the two-column hero and gift box left the copy column too
   narrow - the offer strip, CTA sub-line and spec row all crammed. Use the same
   single-column stack the phone layout uses. */
@media (min-width: 768px) and (max-width: 1023px) {
  .sf-visual-refresh .banner-left { display: flex; flex-direction: column; gap: 0; }
  .sf-hero-copy { display: contents; }
  .sf-visual-refresh .banner-heading { order: 0; text-align: center; margin: 0 0 22px; }
  .sf-hero-media { order: 1; width: 100%; max-width: 520px; align-self: center; margin: 0 0 26px; }
  .sf-hero-stage { max-width: 440px; margin: 0 auto; }
  .sf-hero-thumb { grid-template-columns: 47px minmax(0, 1fr); text-align: left; }
  .sf-hero-thumb img { margin: 0; }
  .sf-visual-refresh .banner-strip { order: 2; width: 100%; margin: 0 0 10px; }
  .sf-visual-refresh .banner-point { order: 3; margin: 8px 0; }
  .sf-visual-refresh .sf-hero-copy > .btn-box { order: 4; display: block !important; width: 100%; max-width: 520px; margin: 22px auto 0; }
  .sf-visual-refresh .sf-hero-copy > .banner-list { order: 5; display: grid; margin-top: 24px; }

  .sf-visual-refresh .s4-gift-box-inner { display: flex; flex-direction: column; gap: 20px; }
  .sf-visual-refresh .gift-head { order: 0; text-align: center; }
  .sf-gift-photo { order: 1; width: 100%; max-width: 560px; align-self: center; }
  .sf-visual-refresh .gift-box-text { order: 2; }
  .sf-visual-refresh .s4-gift-box-inner > .btn-box { order: 3; display: block !important; margin: 0 auto; }
}

/* M2: the burger was pinned at a fixed top offset, so it rode high in the 63px
   mobile header - far enough to spill out above it. Its containing block is
   .header .container, which collapses to zero height because everything in it
   floats, so a percentage top had nothing to resolve against. Give the
   container the header's height, then centre against it. */
@media (max-width: 1024px) {
  .sf-visual-refresh .header .container {
    height: 100%;
  }
  .sf-visual-refresh .mob-mnu-ic {
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }
}