/* Additional home hero artwork. Layout and photo frames match the designed slides. */
@media (min-width:768px) {
  /* Keep rounded artwork clipped without scrolling the frame when a dot is focused. */
  #vroolDesktopBanner {overflow:clip;}
  #vroolDesktopBanner .vdt-sell-showcase .vdt-sell-note {top:-8px;right:0;font-size:clamp(18px,1.75vw,26px);line-height:1.15;white-space:normal;}
  #vroolDesktopBanner .vdt-sell-showcase .vdt-sell-note svg {width:clamp(36px,3.5vw,54px);height:clamp(36px,3.5vw,54px);margin-top:4px;}
  #vroolDesktopBanner :is(.vdt-share-photo,.vdt-closet-item,.vdt-sell-item,.vdt-card-product,.vfb-share-find,.vfb-pound-first,.vfb-pound-second) img,
  .vrail-promo .vrail-pc img {transition:opacity .18s ease;}
  #vroolDesktopBanner .vbr-changing img,.vrail-promo .vbr-changing img {opacity:0;}
  #vroolDesktopBanner .vbr-toggle {position:relative;display:grid;place-items:center;align-self:center;width:22px;height:22px;padding:0;margin:0 0 0 5px;border:1px solid #c9b5dc;border-radius:50%;background:#fcfaff;color:#8751a8;cursor:pointer;}
  #vroolDesktopBanner .vbr-toggle::before {content:'Ⅱ';font-size:10px;font-weight:800;line-height:1;}
  #vroolDesktopBanner .vbr-toggle[aria-pressed="true"]::before {content:'▶';font-size:8px;}
  #vroolDesktopBanner .vbr-toggle[hidden] {display:none;}
  #vroolDesktopBanner .vbr-toggle:focus-visible {outline:2px solid #8751a8;outline-offset:3px;}
  #vroolDesktopBanner .vbr-toggle-text {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
  #vroolDesktopBanner .vfb-slide {
    --vfb-bg:#fcfaff;--vfb-ink:#241d2e;--vfb-copy:#62596a;--vfb-purple:#8751a8;--vfb-soft:#a88abd;--vfb-border:#e5d9ef;
    display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:14px;
    box-sizing:border-box;padding:28px 38px;background:var(--vfb-bg);color:var(--vfb-ink);
  }
  #vroolDesktopBanner .vfb-slide svg {display:block;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  #vroolDesktopBanner .vfb-content {position:relative;z-index:2;min-width:0;align-self:center;padding-inline-end:3%;}
  #vroolDesktopBanner .vfb-kicker {display:inline-flex;align-items:center;gap:7px;max-width:100%;color:var(--vfb-purple);font-size:11px;font-weight:800;line-height:1.35;}
  #vroolDesktopBanner .vfb-kicker svg {width:17px;height:17px;}
  body#home #vroolDesktopBanner h2.vfb-heading {display:block;width:auto;margin:15px 0 12px;color:var(--vfb-ink);font-size:clamp(32px,3.05vw,48px);font-weight:850;line-height:1.06;overflow-wrap:break-word;}
  #vroolDesktopBanner .vfb-heading em {color:var(--vfb-purple);font-family:Georgia,serif;font-style:italic;font-weight:400;white-space:normal;}
  #vroolDesktopBanner .vfb-copy {max-width:390px;margin:0 0 20px;color:var(--vfb-copy);font-size:14px;font-weight:500;line-height:1.45;}
  #vroolDesktopBanner .vfb-cta {display:inline-flex;align-items:center;gap:11px;max-width:100%;padding-block-end:5px;border-block-end:1px solid #b89acb;color:var(--vfb-purple);font-size:16px;font-weight:750;line-height:1.3;}
  #vroolDesktopBanner .vfb-cta svg {width:18px;height:18px;transition:transform .18s ease;}
  #vroolDesktopBanner .vfb-slide:hover .vfb-cta svg {transform:translateX(3px);}
  #vroolDesktopBanner .vfb-slide:focus-visible {outline:3px solid var(--vfb-purple);outline-offset:-6px;}
  #vroolDesktopBanner .vfb-visual {position:relative;align-self:stretch;min-width:0;height:100%;isolation:isolate;}
  #vroolDesktopBanner .vfb-photo {position:absolute;box-sizing:border-box;overflow:hidden;border:5px solid #fff;border-radius:16px;background:#f0e7f6;box-shadow:0 12px 27px rgba(55,32,73,.13);}
  #vroolDesktopBanner .vfb-photo img {display:block;width:100%;height:100%;object-fit:cover;object-position:center top;}
  #vroolDesktopBanner .vfb-photo-fallback {display:grid;width:100%;height:100%;place-items:center;color:var(--vfb-purple);}
  #vroolDesktopBanner .vfb-photo-fallback svg {width:45%;height:45%;max-width:88px;max-height:88px;stroke-width:1.2;}
  #vroolDesktopBanner .vfb-photo-label {position:absolute;bottom:8px;inset-inline-start:8px;max-width:calc(100% - 16px);box-sizing:border-box;padding:5px 8px;border-radius:5px;background:#fff;color:#514358;font-size:10px;font-weight:800;line-height:1.2;overflow-wrap:break-word;}
  #vroolDesktopBanner .vfb-token {position:absolute;z-index:4;display:grid;place-items:center;box-sizing:border-box;width:51px;height:51px;border:1px solid var(--vfb-border);border-radius:50%;background:var(--vfb-bg);color:var(--vfb-purple);box-shadow:0 5px 14px rgba(55,32,73,.07);}
  #vroolDesktopBanner .vfb-token svg {width:25px;height:25px;}
  #vroolDesktopBanner .vfb-note {position:absolute;z-index:3;color:var(--vfb-soft);font-family:"Segoe Print","Bradley Hand",cursive;font-size:17px;font-weight:500;line-height:1.25;text-align:center;transform:rotate(-5deg);}
  /* People: two friends, a conversation and a shared connection. */
  #vroolDesktopBanner .vfb-network-main {top:11%;left:5%;width:66%;height:74%;transform:rotate(-6deg);}
  #vroolDesktopBanner .vfb-network-main img {object-position:center center;}
  #vroolDesktopBanner .vfb-network-friend {top:32%;right:2%;width:35%;height:59%;transform:rotate(7deg);z-index:2;}
  #vroolDesktopBanner .vfb-network-friend img {object-fit:cover;object-position:center 22%;}
  #vroolDesktopBanner .vfb-network-line {position:absolute;inset:4% 7% 10% 0;border:1px dashed #cbb4dd;border-radius:48%;transform:rotate(13deg);}
  #vroolDesktopBanner .vfb-network-chat {top:3%;right:12%;}
  #vroolDesktopBanner .vfb-network-heart {bottom:6%;left:1%;width:41px;height:41px;}
  #vroolDesktopBanner .vfb-network-heart svg {width:21px;height:21px;}
  #vroolDesktopBanner .vfb-network-note {bottom:-2%;left:14%;width:62%;font-size:15px;}
  /* Sharing: an outfit post and a favourite find, joined by a simple arrow. */
  #vroolDesktopBanner .vfb-share-main {top:5%;left:16%;width:49%;height:81%;transform:rotate(-6deg);}
  #vroolDesktopBanner .vfb-share-main img {object-position:center 20%;}
  #vroolDesktopBanner .vfb-share-find {right:2%;bottom:10%;width:34%;height:40%;transform:rotate(8deg);z-index:2;}
  #vroolDesktopBanner .vfb-share-token {top:14%;right:5%;}
  #vroolDesktopBanner .vfb-share-path {position:absolute;top:36%;right:12%;width:20%;height:20%;border-inline-end:1px dashed #bfa0d3;border-block-end:1px dashed #bfa0d3;border-end-end-radius:22px;transform:rotate(-9deg);}
  #vroolDesktopBanner .vfb-share-note {bottom:-1%;left:6%;width:88%;font-size:16px;}
  /* Play: full outfits on models, with portrait frames that retain the whole look. */
  #vroolDesktopBanner .vfb-play-chips {position:absolute;top:0;inset-inline:7%;display:flex;justify-content:center;gap:6px;color:var(--vfb-purple);}
  #vroolDesktopBanner .vfb-play-chips span {padding:5px 7px;border:1px solid var(--vfb-border);border-radius:5px;background:var(--vfb-bg);font-size:9px;font-weight:800;line-height:1.2;}
  #vroolDesktopBanner .vfb-play-first {top:14%;left:9%;width:auto;height:73%;aspect-ratio:2 / 3;transform:rotate(-7deg);}
  #vroolDesktopBanner .vfb-play-second {top:19%;right:6%;width:auto;height:73%;aspect-ratio:2 / 3;transform:rotate(7deg);}
  #vroolDesktopBanner .vfb-play-first img,#vroolDesktopBanner .vfb-play-second img {object-position:center center;}
  #vroolDesktopBanner .vfb-play-token {top:10%;left:43%;width:58px;height:48px;border-radius:16px;transform:rotate(-5deg);}
  #vroolDesktopBanner .vfb-play-token svg {width:34px;height:30px;}
  #vroolDesktopBanner .vfb-play-sparkle {position:absolute;top:7%;right:6%;width:23px;height:23px;color:var(--vfb-soft);transform:rotate(8deg);}
  #vroolDesktopBanner .vfb-play-sparkle svg {width:100%;height:100%;}
  #vroolDesktopBanner .vfb-play-note {bottom:-1%;left:12%;width:78%;}
  /* The £1 edit: a bright price sticker and a small fashion moodboard. */
  #vroolDesktopBanner .vfb-pound-finds {--vfb-bg:#f0e9ff;--vfb-ink:#271d3c;--vfb-copy:#5c4d73;--vfb-purple:#703eaa;--vfb-soft:#9b7bba;background:radial-gradient(ellipse at 80% 85%,#e4d7fa 0,transparent 60%),var(--vfb-bg);}
  #vroolDesktopBanner .vfb-pound-finds .vfb-kicker {letter-spacing:.12em;}
  #vroolDesktopBanner .vfb-pound-finds .vfb-copy {margin-block-end:12px;max-width:350px;}
  #vroolDesktopBanner .vfb-pound-brands {display:flex;flex-wrap:wrap;gap:5px;margin:0 0 18px;}
  #vroolDesktopBanner .vfb-pound-brands span {display:block;padding:5px 9px;border:1px solid #c6b2df;border-radius:20px;background:rgba(255,255,255,.58);color:var(--vfb-purple);font-size:10px;font-weight:800;letter-spacing:.04em;line-height:1;}
  #vroolDesktopBanner .vfb-pound-fees {display:block;margin-block-start:9px;color:var(--vfb-copy);font-size:9px;line-height:1.35;}
  #vroolDesktopBanner .vfb-pound-orbit {position:absolute;inset:9% 5% 8%;border:1px dashed #bba0d4;border-radius:50%;transform:rotate(-10deg);}
  #vroolDesktopBanner .vfb-pound-first {top:20%;left:3%;width:43%;height:70%;transform:rotate(-9deg);}
  #vroolDesktopBanner .vfb-pound-second {top:27%;right:2%;width:43%;height:70%;transform:rotate(9deg);}
  #vroolDesktopBanner .vfb-pound-price {position:absolute;z-index:3;top:-1%;left:31%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:140px;height:140px;border:1px solid #c6e47f;border-radius:50%;background:#e7ff9a;color:#29203b;box-shadow:0 6px 0 #ccb3ee,0 12px 25px rgba(55,32,73,.12);transform:rotate(9deg);}
  #vroolDesktopBanner .vfb-pound-price strong {font-size:78px;font-weight:900;letter-spacing:-.08em;line-height:.99;padding-inline-end:.08em;}
  #vroolDesktopBanner .vfb-pound-price span {font-size:9px;font-weight:850;letter-spacing:.18em;line-height:1.5;}
  #vroolDesktopBanner .vfb-pound-star {position:absolute;top:1%;left:4%;width:29px;height:29px;color:var(--vfb-purple);transform:rotate(-12deg);}
  #vroolDesktopBanner .vfb-pound-star svg {width:100%;height:100%;}
  html[data-vrool-theme="dark"] #vroolDesktopBanner .vfb-slide,
  body[data-theme="dark"] #vroolDesktopBanner .vfb-slide {--vfb-bg:#211b2c;--vfb-ink:#f2eafa;--vfb-copy:#c7bdd2;--vfb-purple:#c49cde;--vfb-soft:#b69ac9;--vfb-border:#554064;}
  html[data-vrool-theme="dark"] #vroolDesktopBanner .vfb-pound-finds,
  body[data-theme="dark"] #vroolDesktopBanner .vfb-pound-finds {background:radial-gradient(ellipse at 80% 85%,#413057 0,transparent 60%),var(--vfb-bg);}
  html[data-vrool-theme="dark"] #vroolDesktopBanner .vfb-pound-brands span,
  body[data-theme="dark"] #vroolDesktopBanner .vfb-pound-brands span {background:#382a46;border-color:#6f5186;}
  html[data-vrool-theme="dark"] #vroolDesktopBanner .vfb-photo,
  body[data-theme="dark"] #vroolDesktopBanner .vfb-photo {border-color:#e4ddeb;background:#382a46;}
  #vroolDesktopBanner[dir="rtl"] .vfb-content {direction:rtl;}
  #vroolDesktopBanner[dir="rtl"] .vfb-heading em {font-family:inherit;font-style:normal;}
  #vroolDesktopBanner[dir="rtl"] .vfb-cta svg {transform:rotate(180deg);}
  #vroolDesktopBanner[dir="rtl"] .vfb-slide:hover .vfb-cta svg {transform:rotate(180deg) translateX(3px);}
}
@media (min-width:768px) and (max-width:1200px) {
  #vroolDesktopBanner .vfb-slide {padding:22px 25px;gap:10px;grid-template-columns:minmax(0,48fr) minmax(0,52fr);}
  body#home #vroolDesktopBanner h2.vfb-heading {font-size:32px;margin:11px 0;}
  #vroolDesktopBanner .vfb-copy {font-size:12px;margin-block-end:15px;}
  #vroolDesktopBanner .vfb-cta {font-size:13px;gap:8px;}
  #vroolDesktopBanner .vfb-kicker {font-size:10px;gap:5px;}
  #vroolDesktopBanner .vfb-kicker svg {width:15px;height:15px;}
  #vroolDesktopBanner .vfb-note {font-size:13px;}
  #vroolDesktopBanner .vfb-token {width:41px;height:41px;}
  #vroolDesktopBanner .vfb-token svg {width:21px;height:21px;}
  #vroolDesktopBanner .vfb-play-token {width:49px;height:42px;}
  #vroolDesktopBanner .vfb-play-token svg {width:29px;height:25px;}
  #vroolDesktopBanner .vfb-pound-price {width:118px;height:118px;left:30%;}
  #vroolDesktopBanner .vfb-pound-price strong {font-size:65px;}
  #vroolDesktopBanner .vfb-pound-price span {font-size:8px;}
  #vroolDesktopBanner .vfb-pound-brands {margin-block-end:13px;gap:4px;}
  #vroolDesktopBanner .vfb-pound-brands span {padding:4px 7px;font-size:9px;}
}
@media (min-width:768px) and (max-width:950px) {
  #vroolDesktopBanner .vfb-slide {padding:20px 18px;gap:8px;}
  body#home #vroolDesktopBanner h2.vfb-heading {font-size:28px;}
  #vroolDesktopBanner .vfb-copy {font-size:11px;line-height:1.4;}
  #vroolDesktopBanner .vfb-cta {font-size:12px;gap:6px;}
  #vroolDesktopBanner .vfb-cta svg {width:15px;height:15px;}
  #vroolDesktopBanner .vfb-photo {border-width:3px;border-radius:16px;}
  #vroolDesktopBanner .vfb-photo-label {bottom:5px;inset-inline-start:5px;max-width:calc(100% - 10px);padding:4px 5px;font-size:8px;}
  #vroolDesktopBanner .vfb-network-heart,#vroolDesktopBanner .vfb-share-path,#vroolDesktopBanner .vfb-play-sparkle {display:none;}
  #vroolDesktopBanner .vfb-network-main {left:2%;width:70%;}
  #vroolDesktopBanner .vfb-network-friend {right:0;width:39%;height:54%;}
  #vroolDesktopBanner .vfb-network-chat {right:5%;}
  #vroolDesktopBanner .vfb-share-main {left:5%;width:61%;}
  #vroolDesktopBanner .vfb-share-find {right:0;width:38%;height:36%;}
  #vroolDesktopBanner .vfb-share-token {right:1%;}
  #vroolDesktopBanner .vfb-note {font-size:11px;bottom:0;}
  #vroolDesktopBanner .vfb-play-chips {inset-inline:0;gap:4px;}
  #vroolDesktopBanner .vfb-play-chips span {padding:4px 5px;font-size:8px;}
  #vroolDesktopBanner .vfb-play-first {top:18%;left:5%;height:64%;}
  #vroolDesktopBanner .vfb-play-second {top:23%;right:2%;height:64%;}
  #vroolDesktopBanner .vfb-pound-price {top:2%;left:30%;width:100px;height:100px;}
  #vroolDesktopBanner .vfb-pound-price strong {font-size:56px;}
  #vroolDesktopBanner .vfb-pound-price span {font-size:7px;}
  #vroolDesktopBanner .vfb-pound-first {top:24%;left:1%;width:45%;height:65%;}
  #vroolDesktopBanner .vfb-pound-second {top:31%;right:0;width:45%;height:65%;}
  #vroolDesktopBanner .vfb-pound-brands {margin-block-end:11px;gap:4px;}
  #vroolDesktopBanner .vfb-pound-brands span {padding:4px 6px;font-size:8px;}
  #vroolDesktopBanner .vfb-pound-fees {font-size:9px;}
  #vroolDesktopBanner .vfb-pound-star {width:22px;height:22px;}
}
@media (prefers-reduced-motion:reduce) {
  #vroolDesktopBanner .vfb-cta svg {transition:none;}
  #vroolDesktopBanner .vbr-toggle {display:none;}
  #vroolDesktopBanner .vbr-changing img,.vrail-promo .vbr-changing img {opacity:1;transition:none;}
}

/* Sharing artwork sits directly on the hero, including the dark appearance. */
@media (min-width:768px) {
  :is(html[data-vrool-theme="dark"] body#home,body#home[data-theme="dark"]) #vroolDesktopBanner .vdt-slide :is(.vdt-share-visual,.vdt-creator-visual),
  :is(html[data-vrool-theme="dark"] body#home,body#home[data-theme="dark"]) #vroolDesktopBanner .vdt-slide :is(.vdt-share-path,.vdt-creator-path) i {background:transparent!important;}
}

/* Draw only the decorative Sell & Earn heart; the note stays still. */
@media (prefers-reduced-motion:no-preference) {
  body#home .vshell-rail .vrail-promo-note > svg > path {
    stroke-dasharray:72 72;
    stroke-dashoffset:0;
    animation:vroolRailHeartDraw 6s ease-in-out;
  }
  /* Repeat while the existing image-pause control is available. */
  body#home:has(#vroolDesktopBanner [data-vbr-toggle]:not([hidden])) .vshell-rail .vrail-promo-note > svg > path {
    animation-iteration-count:infinite;
  }
  body#home:has(#vroolDesktopBanner [data-vbr-toggle][aria-pressed="true"]) .vshell-rail .vrail-promo-note > svg > path {
    animation:none;
    stroke-dasharray:none;
    stroke-dashoffset:0;
  }
  @keyframes vroolRailHeartDraw {
    0%,8% {stroke-dashoffset:72;}
    42%,88% {stroke-dashoffset:0;}
    100% {stroke-dashoffset:-72;}
  }
}