html{--sikit-header-height:60px;}.grecaptcha-badge{visibility:hidden;}.fx-scroll-top-btn{background-color:#d60027;border-radius:5px;width:40px;height:40px;&::before{content:'\e807';font:16px / 1 "wf";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}}.fx-scroll-top-btn svg{display:none;}dialog[open]{pointer-events:none;}dialog[open] > *{pointer-events:auto;}dialog::backdrop{background:rgba(0,0,0,.3);pointer-events:none;}#main-content{overflow-x:hidden;}.desktop-only{display:none;}@media (min-width:768px){.desktop-only{display:block;}.mobile-only{display:none;}html{--sikit-header-height:100px}}.team-sponsor-logo{padding-inline:20px;}.team-sponsor > div:nth-child(2) > div:first-child,.team-sponsor > div:nth-child(2) > div:nth-child(3){border-right:1px solid #E1E1E6;}@container parent (min-width:500px){.team-sponsor > div:nth-child(2) > div:nth-child(2){border-right:1px solid #E1E1E6;}}@container parent (min-width:800px){.team-sponsor > div:nth-child(2) > div:not(:last-child){border-right:1px solid #E1E1E6;}}.footer-bottom-menu:not(:last-child)::after{content:"|";padding-left:4px;scale:1.3;}.team-sponsor-logo{position:relative;}.wf-breadcrumb-bg{position:relative;overflow:visible;}.wf-breadcrumb-bg::before{content:"";position:absolute;top:0;left:50%;width:100vw;height:300px;transform:translateX(-50%);background-image:url('/static-assets/images/misc/wfbreadcrumbbg.png?w=1366&h=300');background-repeat:no-repeat;background-position:center;background-size:cover;z-index:-1;}.wf-breadcrumb-bg::after{content:"";background:url("/static-assets/images/misc/ball-pattern.webp?v=1.01") center/contain no-repeat;width:60px;left:calc(var(--container-offset) * -1 + -8px);aspect-ratio:1;top:300px;position:absolute;}@media (min-width:768px){.wf-breadcrumb-bg::after{width:150px;}}.swiper-pagination-bullet-active{width:40px;}.si::after{content:"";display:inline-block;width:71px;height:27px;background:url(https://wf.surface.fan-os.net/static-assets/images/misc/powered-logo.svg) no-repeat center / contain;}.header [data-frame-name="frame_top_row"]{border-bottom:1px solid hsl(var(--border_main_default));}.header [data-frame-name="frame_navigation_1"],.header [data-frame-name="frame_navigation_4"],.header [data-frame-name="frame_navigation_7"]{position:relative;margin-right:16px;}.header [data-frame-name="frame_navigation_1"]::after,.header [data-frame-name="frame_navigation_4"]::after,.header [data-frame-name="frame_navigation_7"]::after{width:2px;height:20px;background-color:hsl(var(--border_main_default));content:"";display:block;position:absolute;top:50%;transform:translateY(-50%);right:0;z-index:1000;}.header [data-frame-name="frame_logo_mobile"]{position:relative;isolation:isolate;}.header [data-frame-name="frame_logo_mobile"]::after{width:calc(100% + var(--container-offset));height:100%;background-color:hsl(var(--background_main_card_2)/0.2);content:"";display:block;position:absolute;top:0;left:calc(-16px);z-index:-1;opacity:0;}.m-header-link{border-bottom:2px solid hsl(var(--border_main_default));}.header [data-frame-name="frame_navigation_7"]{width:max-content;}.header [data-frame-name="frame_navigation_7"] a{width:max-content;}.tickets-signup{flex-direction:row-reverse;}.tickets-signup:not(:last-child){background-color:hsl(var(--background_button_sec_default)) !important;}.wac-icon.icon_wf_icon_insta::before{color:transparent !important;background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);--webkit-background-clip:text;--webkit-text-fill-color:transparent;background-clip:text;}.wac-icon.icon_wf_icon_linkedin::before{color:hsl(201,100%,36%);}.wac-icon.icon_wf_icon_x{color:hsl(240,4%,17%)}.wac-icon.icon_wf_icon_facebook::before{color:#3E6DC1;}.wac-icon.icon_wf_icon_youtube::before{color:hsl(357,100%,53%);}@media (min-width:640px){.header [data-frame-name="frame_logo_mobile"]::after{display:none;}.header .header-wrapper{position:relative;isolation:isolate;}.header .header-wrapper::after{width:calc(100px + var(--container-offset));height:100%;background-color:hsl(var(--background_main_card_2)/0.2);content:"";display:block;position:absolute;top:0;left:calc(-16px);z-index:-1;border-right:1px solid hsl(var(--border_main_default))}}@media (min-width:768px){.header .header-wrapper::after{width:calc(150px + var(--container-offset));}.desktop-link{position:relative;}.desktop-link::after{content:"";display:block;width:0%;height:2px;background-color:hsl(var(--border_main_prim));position:absolute;bottom:0;left:0;z-index:1000;transition:width 0.3s ease-in-out;}.desktop-link:hover::after{width:100%;}[data-frame-name="frame_navigation_6"] .desktop-link[data-active="true"]{font-weight:700;}[data-frame-name="frame_navigation_6"] .desktop-link[data-active="true"]::after{content:"";display:block;width:50%;height:2px;background-color:hsl(var(--border_main_prim));position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:1000;}[data-frame-name="frame_large_devices"]{margin-left:60px;}}.cardLink:hover .hoverText{color:var(--background_prim_container-hex);}.hoverIcon{transition:transform 0.2s ease;}.cardLink:hover .hoverIcon{transform:translate(4px,-4px);}.detailBorder{position:relative;}.detailBorder::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:85vw;border-bottom:1px solid #E1E1E6;}@media (max-width:767px){.detailBorder::after{width:90vw;}}.cms-article-body em{font-style:normal !important;}.waf-newsletter-banner{position:relative;width:100%;overflow:hidden;background-color:#0d1d41;background-image:url("https://wf.surface.fan-os.net/static-assets/images/misc/newsletter-pattern-m.png");background-size:cover;background-position:center;background-repeat:no-repeat;box-sizing:border-box;padding:48px 20px;isolation:isolate;}.waf-newsletter-banner::before{content:"NEWSLETTER";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:"Poppins",sans-serif;font-weight:800;font-size:48px;line-height:1;letter-spacing:0.04em;color:rgba(255,255,255,0.07);white-space:nowrap;pointer-events:none;z-index:0;}.newsletter-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;max-width:520px;margin:0 auto;}.newsletter-plane{position:absolute;z-index:-1;pointer-events:none;}.newsletter-plane img{display:none;}.newsletter-plane-left{top:0;left:0;width:80px;height:62px;background-image:url("https://wf.surface.fan-os.net/static-assets/images/misc/plane-top.png");background-size:contain;background-position:center;background-repeat:no-repeat;}.newsletter-plane-right{right:12px;bottom:8px;width:80px;height:78px;background-image:url("https://wf.surface.fan-os.net/static-assets/images/misc/plane-bottom.png");background-size:contain;background-position:center;background-repeat:no-repeat;}.newsletter-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background-color:#bd0010;flex-shrink:0;}.newsletter-icon .icon{font-size:24px;color:#ffffff;line-height:1;}.newsletter-head{width:100%;}.newsletter-title{margin:0;text-align:center;color:#ffffff;font-family:"Poppins",sans-serif;font-weight:700;font-size:28px;line-height:34px;}.newsletter-body{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;}.newsletter-form{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;}.newsletter-input-group{display:flex;align-items:center;justify-content:space-between;width:100%;height:48px;box-sizing:border-box;background-color:#ffffff;border:1px solid #ffffff;padding:0 4px 0 16px;overflow:hidden;}.newsletter-input-group .newsletter-input{flex:1 1 auto;min-width:0;height:100%;padding:0;border:none;border-radius:0;background:transparent;font-family:"Poppins",sans-serif;font-weight:500;font-size:12px;color:#333333;outline:none;}.newsletter-input-group .newsletter-input::placeholder{color:#aaaaae;}.newsletter-input-group .newsletter-input[aria-invalid="true"]{color:#bd0010;}.newsletter-divider{display:none;}.newsletter-input-group .newsletter-btn{display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;height:40px;padding:0 16px;border:none;border-radius:0;background-color:#ea0a2c;color:#ffe9ed;font-family:"Poppins",sans-serif;font-weight:700;font-size:12px;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap;cursor:pointer;}.newsletter-input-group .newsletter-btn:disabled{opacity:0.6;cursor:not-allowed;}.newsletter-input-group .newsletter-btn .icon{font-size:14px;color:#ffffff;line-height:1;}.newsletter-input-group .newsletter-btn-icon{width:16px;height:16px;object-fit:contain;}.newsletter-field-row{display:flex;flex-direction:column;gap:6px;width:100%;}.newsletter-field-label{font-family:"Poppins",sans-serif;font-weight:500;font-size:12px;color:#ffffff;}.newsletter-input,.newsletter-textarea,.newsletter-select{width:100%;box-sizing:border-box;height:48px;padding:0 16px;border:1px solid #ffffff;border-radius:0;background-color:#ffffff;font-family:"Poppins",sans-serif;font-weight:500;font-size:12px;color:#333333;}.newsletter-textarea{height:96px;padding:12px 16px;resize:vertical;}.newsletter-input::placeholder,.newsletter-textarea::placeholder{color:#aaaaae;}.newsletter-input[aria-invalid="true"],.newsletter-textarea[aria-invalid="true"],.newsletter-select[aria-invalid="true"]{border-color:#bd0010;}.newsletter-radio-group{display:flex;flex-direction:column;gap:8px;width:100%;border:none;padding:0;margin:0;color:#ffffff;font-family:"Poppins",sans-serif;font-size:12px;}.newsletter-radio-group legend{font-weight:500;padding:0;margin:0 0 4px;}.newsletter-radio-group label{display:flex;align-items:center;gap:8px;cursor:pointer;}.newsletter-button-wrapper{display:flex;align-items:center;justify-content:center;width:100%;}.newsletter-button-wrapper .newsletter-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border:none;border-radius:0;background-color:#bd0010;color:#ffffff;font-family:"Poppins",sans-serif;font-weight:700;font-size:12px;letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;}.newsletter-button-wrapper .newsletter-btn:disabled{opacity:0.6;cursor:not-allowed;}.newsletter-button-wrapper .newsletter-btn .icon{font-size:14px;color:#ffffff;line-height:1;}.newsletter-button-wrapper .newsletter-btn-icon{width:16px;height:16px;object-fit:contain;}.newsletter-consent{display:flex;flex-direction:column;gap:4px;width:100%;max-width:480px;}.newsletter-consent label{display:flex;align-items:flex-start;justify-content:center;gap:8px;cursor:pointer;}.newsletter-consent input[type="checkbox"]{width:20px;height:20px;margin-top:1px;flex-shrink:0;appearance:none;-webkit-appearance:none;border:1.5px solid #ffffff;border-radius:4px;background:transparent;cursor:pointer;}.newsletter-consent input[type="checkbox"]:checked{background-color:transparent;border-color:#ffffff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:10px 8px;}.newsletter-consent span{font-family:"Poppins",sans-serif;font-weight:400;font-size:10px;line-height:14px;color:#ffffff;text-align:left;}.newsletter-consent a,.newsletter-consent .newsletter-privacy-link{color:#ea0a2c;text-decoration:underline;font-weight:500;}.newsletter-consent a:hover,.newsletter-consent .newsletter-privacy-link:hover{opacity:0.85;}.newsletter-field-error{display:block;margin-left:28px;font-family:"Poppins",sans-serif;font-size:11px;color:#ff8a94;}.newsletter-message{font-family:"Poppins",sans-serif;font-size:12px;color:#ffffff;text-align:center;}.newsletter-message-success{color:#7fe0a0;}.newsletter-message-error{color:#ff8a94;}@media (min-width:1024px){.waf-newsletter-banner{padding:56px 24px;background-image:url("https://wf.surface.fan-os.net/static-assets/images/misc/newsletter-pattern.png");}.waf-newsletter-banner::before{content:"Newsletter";font-size:88px;letter-spacing:0;text-transform:none;}.newsletter-wrapper{max-width:486px;gap:20px;}.newsletter-plane-left{top:-12px;left:24px;width:140px;height:110px;}.newsletter-plane-right{right:32px;bottom:16px;width:120px;height:116px;}.newsletter-title{font-size:32px;line-height:38px;}.newsletter-input-group .newsletter-btn{font-size:14px;}.newsletter-consent span{font-size:12px;line-height:16px;}}@media (min-width:768px){.h1_bold_custom{font:var(--h1_bold-font-weight,700) var(--h1_bold-font-size,1.75rem) / var(--h1_bold-line-height,2.125rem) var(--h1_bold-font-family,Poppins,system-ui,-apple-system,sans-serif);letter-spacing:var(--h1_bold-letter-spacing,normal);}}.fanos-cookie-consent-dialog{--cc-bg:#fff;--cc-fg:#1a1a1a;--cc-accent:#e21a2c;--cc-accent-hover:#c2121f;--cc-accent-fg:#fff;--cc-radius:4px;--cc-gutter:24px;position:fixed;inset:auto 0 0 0;z-index:9999;display:block;width:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--cc-bg);color:var(--cc-fg);box-shadow:0 -1px 12px rgb(0 0 0 / 8%);}.fanos-cookie-consent-dialog:not([open]){display:none;}.fanos-cookie-consent-container{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px var(--cc-gutter);min-height:56px;}.fanos-cookie-consent-title,.fanos-cookie-consent-reject-btn{display:none;}.fanos-cookie-consent-desc{margin:0;text-align:left;font-size:15px;line-height:1.45;font-weight:400;color:var(--cc-fg);}.fanos-cookie-consent-actions{display:flex;flex-shrink:0;gap:8px;}.fanos-cookie-consent-btn{appearance:none;border:0;border-radius:var(--cc-radius);padding:13px 26px;font:inherit;font-size:15px;font-weight:500;line-height:1;cursor:pointer;transition:background-color 0.2s ease;}.fanos-cookie-consent-accept-btn{background:var(--cc-accent);color:var(--cc-accent-fg);}.fanos-cookie-consent-accept-btn:hover{background:var(--cc-accent-hover);}.fanos-cookie-consent-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px;}@media (max-width:640px){.fanos-cookie-consent-container{flex-direction:column;align-items:stretch;gap:12px;padding:16px;}.fanos-cookie-consent-actions{justify-content:center;}.fanos-cookie-consent-accept-btn{width:100%;}}.socialIconLink .wac-icon{padding-top:15%;}[data-component-id="4608230b-3951-4180-80dd-bc9fc51e24e9"]{position:relative;}[data-component-id="4608230b-3951-4180-80dd-bc9fc51e24e9"]::after{content:"";display:block;width:90vw;border-bottom:1px solid #E1E1E6;margin:0 auto;}@media (min-width:768px){[data-molecule-id="699b286f-08d6-44b9-8ef4-cefff72ade8d"] .large-devices{position:relative;}[data-molecule-id="699b286f-08d6-44b9-8ef4-cefff72ade8d"] .large-devices [data-frame-name="frame_text"]{position:absolute;left:50%;transform:translateX(-50%);width:max-content;}[data-molecule-id="699b286f-08d6-44b9-8ef4-cefff72ade8d"] .large-devices [data-frame-name="frame_navigation_2"]{justify-content:flex-end;margin-left:auto;}}@media (max-width:767px){.waf-newsletter-banner{padding:100px 20px;}}.fltr-sidepanel.fltr-sidepanel--closed{visibility:hidden;pointer-events:none;opacity:0;}.fltr-sidepanel.fltr-sidepanel--open{visibility:visible;pointer-events:auto;opacity:1;}.fltr-sidepanel__backdrop:not(.fltr-sidepanel__backdrop--open){display:none;}.player-profile.pps-root{display:flex;flex-direction:column;width:100%;}.player-profile .pps-formatSection{width:100%;clear:both;float:none;}@media (max-width:1023px){.logo-mobile img{max-height:3.2rem;width:auto;height:auto;object-fit:contain;}}.mc-scorecard-tab__fow .mc-table__cell{white-space:nowrap !important;}.mc-scorecard-tab__fow .mc-scorecard-tab__fow-score,.mc-scorecard-tab__fow .mc-scorecard-tab__fow-wicket,.mc-scorecard-tab__fow .mc-scorecard-tab__fow-player{display:inline !important;white-space:nowrap !important;}@media (max-width:1023px){.home-photo-content .icon_wf_icon_photo,.photos-template .icon_wf_icon_photo.wac-icon{width:1rem;height:1rem;font-size:1rem;line-height:1;}}
.hero-banner-top-desktop {
  aspect-ratio: 1905/671;
}
.hero-banner-bottom-desktop {
  aspect-ratio: 1905/671;
}
.hero-banner-top-mobile {
  aspect-ratio: 357/458;
}
.hero-banner-bottom-mobile {
  aspect-ratio: 357/126;
}
.swiper-pagination-bullet {
  width: 7px;
  height: 6px;
  &.swiper-pagination -bullet-active {
    width: 32px;
  }
}
.desktop-only {
  display:none;
}
@media (min-width:768px) {
  .desktop-only {
    display:block;
  }
  .mobile-only {
    display:none;
  }
}
.squad-template .template-body {
  overflow: visible;
}
.custom-button-class button {
  width: 48px;
  height: 48px;
}
.home-showcase .custom-button-class {
  position: absolute;
}
.home-showcase .custom-button-left {
  left: calc(var(--container-offset) - 24px);
}
.home-showcase .custom-button-right {
  right: calc(var(--container-offset) - 24px);
}
.photos-template {
  position: relative;
  &::before, &::after {
    content: '';
    position: absolute;
    width: 11%;
    aspect-ratio: 0.87;
    background-size: contain;
    background-repeat: no-repeat;
  }
  &::before {
    top: 0;
    left: 0;
    background-image: url('/static-assets/images/misc/photos-1.png');
    background-position: top;
  }
  &::after {
    right: 0;
    bottom: 0;
    background-image: url('/static-assets/images/misc/photos-2.png');
    background-position: bottom;
  }
  @media (max-width: 767px) {
    &::before, &::after {
      width: 25%;
    }
  }
}
/* shop section css start */ .shop-section {
  padding-block: 40px;
}
.shop-section .section-header {
  margin-bottom: 28px;
}
.shop-section .section-header p {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 5px;
  color: #0d1d41;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
}
.shop-section .shop-list {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-inline: 16px;
  margin-bottom: 28px;
}
.shop-section .shop-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 0 80%;
  scroll-snap-align: start;
}
.shop-section .thumbnail-section {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: #F7F7FC;
  display: flex;
}
.shop-section .thumbnail-section .thubmbnail {
  width: 80%;
  height: auto;
  margin: auto;
}
.shop-section .thumbnail-section .btn-site {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  padding: 10px 16px;
  background-color: #ea0a2c;
  color: #ffe9ed;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: uppercase;
  border: none;
}
.shop-section .shop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.shop-section .shop-content .label {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 3px;
  color: #4f4f53;
  text-transform: uppercase;
  margin: 0;
}
.shop-section .shop-content .title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  color: #111115;
  margin: 0;
}
.shop-section .shop-content .price {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0;
  color: #bd0010;
  margin: 0;
}
/* View more wrapper — centered horizontally */ .shop-section > div:last-child {
  display: flex;
  justify-content: center;
}
/* View more link — outline style (btn-site outside .thumbnail-section) */ .shop-footer {
  position: relative;
  isolation: isolate;
  display:flex;
  align-items: center;
  flex-wrap:no-wrap;
  container-name: section-header;
}
.shop-footer-wrap {
  display: flex;
  align-items: center;
  &::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #AAAAAE;
  }
  &::before {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #AAAAAE;
  }
}
.shop-view-more {
  border: 1px solid #aaaaae;
  color: #0d1d41;
  background-color: transparent;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 12px 16px;
  height: 48px;
  gap: 4px;
  position: relative;
  isolation: isolate;
}
.shop-view-more {
  position: relative;
  z-index: 0;
  &::after {
    content: '\e817';
    font-family: "wf";
    font-size: 20px;
  }
}
.shop-view-more::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #AAAAAE;
  clip-path: circle(0% at 50% 100%);
  transition: clip-path 0.45s ease;
  z-index: -1;
}
.shop-view-more:hover::before {
  clip-path: circle(150% at 50% 100%);
}
.shop-view-more:hover {
  border-color: transparent;
  color: white;
}
.shop-view-more span {
  transition: color 0.45s ease;
}
.shop-view-more:hover span {
  color: white;
}
@media (min-width: 768px) {
  .shop-section {
    position: relative;
    isolation: isolate;
    padding: 68px var(--container-offset);
    &::before, &::after {
      content: '';
      position: absolute;
      width: 25%;
      aspect-ratio: 2/3;
      background-size: contain;
      background-repeat: no-repeat;
      z-index: -1;
      pointer-events: none;
    }
    &::before {
      top: 0;
      left: 0;
      background-image: url('/static-assets/images/misc/shop-pattern.png');
      background-position: top;
    }
    &::after {
      right: 0;
      bottom: 0;
      background-image: url('/static-assets/images/misc/shop-pattern.png');
      transform: rotate(180deg);
    }
  }
  .shop-section .section-header p {
    font-size: 48px;
    line-height: 58px;
    color: #252c37;
  }
  .shop-section .shop-list {
    gap: 16px;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .shop-section .shop-card {
    flex: 1 1 0%;
  }
  .shop-section .thumbnail-section .btn-site {
    transform: translate(-50%, 16px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  }
  .shop-section .shop-card:hover .thumbnail-section .btn-site {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
  }
  .shop-section .shop-content .label {
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 5px;
  }
  .shop-section .shop-content .title {
    font-size: 16px;
    line-height: 19px;
  }
  .shop-section .shop-content .price {
    font-size: 14px;
    line-height: 17px;
  }
}
/* shop section css end */ @container parent (max-width:767px) {
  .squad-template .template-body {
    margin-inline: calc(var(--container-offset) * -1);
    width:calc(100% + var(--container-offset) * 2 );
    .swiper {
      padding-inline: var(--container-offset);
    }
  }
}
/* team-standings plugin css started */ /* team-standings — ported from the wf_standings_listing Figma export. * * Delivery: this file is NOT imported by the TSX. `plugins/scripts/generate-plugin-styles.ts` * concatenates it into PLUGIN_STYLES and `PluginStyleHost` injects it into <head> * only on pages that render this plugin. Run `pnpm generate:plugin-styles` after * editing (or `pnpm generate:plugin-styles:watch` while iterating). * * Three deliberate departures from the export, because it injects globally: * 1. Every rule is scoped under `.standings`. The export's bare `*`, `html`, `body`, * `img` and `button` resets would otherwise reset the entire page. * 2. `:root` custom properties moved onto `.standings`. * 3. The export swapped whole DOM trees at 1024px via matchMedia. React can't * do that without a hydration mismatch, so one DOM carries both designs and * these media queries pick. Base rules = the mweb (375) design, * `min-width:1024px` = the desktop (1366) design. */ /* Two roots, because the filter modal is portaled to <body> and therefore lives outside `.standings`: the page surface and the modal each need the variables. */ .standings, .standings-filter {
  /* Colours are design tokens, consumed as `hsl(var(--<token>))` — the generator emits each backend token key as HSL components (plus a `--<key>-hex` twin), so the bare var is not a usable colour on its own. Nothing colour-shaped is declared locally any more. The former --standings-red and --standings-ripple were the same colour used two ways (a fill and a sweep);
  both are now `background_prim_container`. */ --standings-font-ui: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Alias the ported filter UI uses. */ --standings-font: var( --standings-font-ui );
  --standings-font-display: "Inter", system-ui, -apple-system, sans-serif;
}
.standings {
  position: relative;
  width: 100%;
  overflow-x: clip;
  /* Transparent on purpose: the breadcrumb template above bleeds its background ~230px down behind this plugin. A white root would paint straight over it. Any surface colour belongs on the table, not on the plugin root. */ background: transparent;
  /* The FILTER button takes its font from the `:where(button) {
    font: inherit
  }
  ` reset, so the surface root has to name one — without this it inherited the host page's stack. `.standings-filter` declares it too, for the portaled drawer;
  team-stats declares it on `.player-stats`. */ font-family: var(--standings-font-ui);
  -webkit-font-smoothing: antialiased;
}
.standings *, .standings *::before, .standings *::after, .standings-filter *, .standings-filter *::before, .standings-filter *::after {
  box-sizing: border-box;
}
.standings img, .standings-filter img {
  display: block;
  max-width: 100%;
}
/* `:where()` so the reset contributes NO extra specificity. Scoped as `.standings button` it would be (0,1,1) and silently beat every single-class button rule below — the FILTER outline and the close button's red plate all set `border`/`color`/`background`. */ .standings :where(button), .standings-filter :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Breakpoint helpers — one DOM, two designs. Explicit per element type so a toggled <span> keeps `text-align` (a flexed span would not). Scoped with `.standings ` so they outrank the single-class layout rules below — `.standings-form` also sets `display`, and source order alone would let it win. */ .standings .standings-cell--desktop {
  display: none;
}
.standings .standings-text--desktop {
  display: none;
}
.standings .standings-cell--mobile {
  display: flex;
}
.standings .standings-text--mobile {
  display: block;
}
/* ------------------------------------------------------------- hero band --- */ /* Plain block in normal flow. It paints nothing and positions nothing — the navy comes from the breadcrumb template above, whose `::before` bleeds down behind this header. The padding IS the gap from the header to the table: 16px on mobile, 32px from 768px up (see the min-width: 768px block). */ .standings-hero {
  width: 100%;
  padding-bottom: 16px;
}
/* The content column comes from the HOST, not from this plugin. `--container-offset` is published by the app's `.px-container-offset` via `@container parent` queries and inherits down to here, stepping 1rem → 610 → 750 → 1000 → 1200 → 1500 as the viewport grows. Consuming it keeps this plugin on exactly the same column as the breadcrumb and every other template;
hardcoding the 1170px Figma width did not, and drifted 330px narrow at >=1536. NOTE: the `100%` inside that calc resolves against the element USING it, so it may only be applied to a full-width element. The 16px fallback is the mobile gutter, for any host that does not publish the variable. */ .standings-hero-inner {
  width: 100%;
  padding-inline: var(--container-offset, 16px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
/* Upper-case at every width — STANDINGS, matching PHOTOS / SCHEDULE. */ .standings-title {
  margin: 0;
  width: 100%;
  font-family: var(--standings-font-ui);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: hsl(var(--core_neu_00));
  text-align: center;
  text-transform: uppercase;
}
/* ================================ BUTTONS =============================== */ /* Figma models the hover as a 250px ellipse (opacity 0 → 1) sweeping over the button in 300ms;
reproduced here as a clipped, scaling circle. Figma strokes are drawn INSIDE the box, so the 1px border is subtracted from the declared padding to land on the exact Figma box size. */ .standings-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  isolation: isolate;
  text-transform: uppercase;
  transition: color 0.3s ease-in, border-color 0.3s ease-in;
}
.standings-button::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  /* Figma draws this as a fixed 250px ellipse, which is fine for the 110px desktop pill it was measured on. But the FILTER button is `width: 100%` below the hero's row breakpoint — ~343px on a phone, ~720px on a tablet — and a 250px circle then covers only the middle of it, so hovering painted a red blob between the label and the icon instead of filling the button. `max()` keeps the export's 250px wherever the button is narrower than that, and grows the circle to cover anything wider. */ width: max( 250px, 105% );
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}
.standings-button > * {
  position: relative;
  z-index: 1;
}
.standings-button:hover::before, .standings-button:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.standings-button:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}
/* Button labels never wrap. The export relies on Poppins' exact metrics — "RESET FILTER" needs 100.1px in a 105px slot, i.e. 4.9px of slack — so the moment Poppins is substituted (it 502s in local dev) or a tenant configures a longer label, the label breaks onto a second line and the 48px button grows. See `.standings-filter-button` for how the row buys that width back. */ .standings-button__label {
  white-space: nowrap;
}
.standings-button__icon {
  display: flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.standings-button__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* --- FILTER: outline / style 3 — 110×48 (full width on mweb) ------------- */ .standings-button--filter {
  width: 100%;
  justify-content: space-between;
  padding: 11px 15px;
  /* 1 + 11 + 24 + 11 + 1 = 48 tall */ border: 1px solid hsl(var(--core_neu_00));
  color: hsl(var(--core_neu_00));
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
}
.standings-button--filter::before {
  background: hsl(var(--background_prim_container));
}
.standings-button--filter:hover {
  border-color: hsl(var(--background_prim_container));
}
/* From 768 the header is a row — title left, FILTER right — matching team-stats, so the two pages behave identically on tablets. The export put this at 1024;
below that the header stays stacked and the button is full width. The remaining 1024 rules (hero height, 32px title, the 1170px content column) are the page-column concerns and stay where they were. */ @media ( min-width: 768px ) {
  /* 32px header-to-table gap from tablet up;
  mobile keeps the 16px base. */ .standings-hero {
    padding-bottom: 32px;
  }
  .standings-hero-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .standings-title {
    width: fit-content;
    text-align: left;
  }
  .standings-button--filter {
    width: auto;
    min-width: 110px;
    justify-content: center;
    font-size: 16px;
  }
}
/* =============================== FILTER MODAL =========================== Figma "Filter Modal / Default" 377×619, presented as a right-side drawer at that width stretched to the full viewport height;
the options list is the only scrolling region, so the header and the action buttons stay put at any viewport height. Full width below 768px. Portaled to <body>, outside `.standings`, so it is never clipped by the surface's `overflow-x: clip`. */ .standings-filter {
  font-family: var(--standings-font);
}
/* Scoped `.standings-filter .standings-filter-backdrop`, not the bare class: the scrim is a <button>, and `.standings-filter button {
  background: none
}
` above has higher specificity (class + element) than a lone class — it would blank it out. */ .standings-filter .standings-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgb(17 17 21 / 50%);
  opacity: 0;
  cursor: default;
  transition: opacity 0.3s ease-out;
}
.standings-filter .standings-filter-backdrop.is-open {
  opacity: 1;
}
.standings-filter-panel {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  width: 100%;
  /* dvh, not vh: on mobile Safari the address bar would otherwise push the action buttons below the fold. */ height: 100dvh;
  display: flex;
  flex-direction: column;
  background: hsl(var(--background_main_container));
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  will-change: transform;
}
.standings-filter-panel.is-open {
  transform: translateX(0);
}
/* ---------- Filter Header — 377×52, #0D1D41 ----------------------------- */ .standings-filter-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  /* 10 + 32 + 10 = 52 */ background: hsl(var(--background_sec_surface));
}
.standings-filter-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  color: hsl(var(--core_neu_00));
}
/* Close Button — 32px circle, #EA0A2C, hover sweeps to #FFFFFF */ .standings-filter-close {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
  background: hsl(var(--background_prim_container));
  color: hsl(var(--text_button_prim_default));
  transition: color 0.3s ease-in;
}
.standings-filter-close::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: hsl(var(--core_neu_00));
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}
.standings-filter-close:hover::before, .standings-filter-close:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.standings-filter-close:hover, .standings-filter-close:focus-visible {
  color: hsl(var(--background_prim_container));
}
/* 32×32 at 1:1 — never let it shrink, the ✕ glyph must stay 11px like the asset */ .standings-filter-close svg {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}
.standings-filter-close:focus-visible {
  outline: 2px solid hsl(var(--core_neu_00));
  outline-offset: 2px;
}
/* ---------- Filter Options — the scrolling region ----------------------- */ .standings-filter-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* One dropdown row — 377×71 closed (63px content + 8px gap), the hairline on the boundary exactly as Figma's centre-aligned 1px stroke sits on y=71. */ .standings-filter-group {
  position: relative;
  padding: 0 16px 8px;
}
.standings-filter-group::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: hsl(var(--border_main_default));
}
.standings-filter-group__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px 14px 16px;
  /* 14 + 35 + 14 = 63 */ text-align: left;
}
.standings-filter-group__toggle:focus-visible {
  outline: 2px solid hsl(var(--background_sec_surface));
  outline-offset: -2px;
}
.standings-filter-group__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.standings-filter-group__label {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  color: hsl(var(--core_neu_900));
}
.standings-filter-group__value {
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  color: hsl(var(--text_main_prim));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.standings-filter-group__chevron {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: hsl(var(--core_neu_900));
  transition: transform 0.3s ease-out;
}
.standings-filter-group__toggle[aria-expanded="true"] .standings-filter-group__chevron {
  transform: rotate(180deg);
}
/* Options list. Figma's open-state frames were not exported — styled from the modal's own type ramp: 14/17, #111115, selected = 700 #BD0010. */ .standings-filter-options-wrap {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease-out, visibility 0s linear 0.3s;
}
.standings-filter-group.is-open .standings-filter-options-wrap {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.3s ease-out, visibility 0s;
}
.standings-filter-options {
  overflow: hidden;
  min-height: 0;
}
.standings-filter-option {
  display: block;
  width: 100%;
  padding: 12px 24px 12px 16px;
  /* label aligns with the headline above */ text-align: left;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: hsl(var(--core_neu_900));
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.standings-filter-option:hover {
  background: hsl(var(--background_main_card));
}
.standings-filter-option[aria-checked="true"] {
  font-weight: 700;
  color: hsl(var(--text_main_prim));
}
.standings-filter-option:focus-visible {
  outline: 2px solid hsl(var(--background_sec_surface));
  outline-offset: -2px;
}
/* ---------- Action Buttons — 377×88 ------------------------------------- */ .standings-filter-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 16px;
  /* 20 + 48 + 20 = 88 */ background: hsl(var(--background_main_container));
}
/* The export splits the row into exact halves (`flex: 1 1 0`). RESET FILTER is the wider label AND carries a 24px icon, so the halves leave it almost no slack. `flex: 1 1 auto` divides the SURPLUS evenly instead of the total: each button first takes the width its own content needs, then they share what's left. With Poppins the result is within a few px of the export's halves;
without it, the row redistributes instead of wrapping. */ .standings-filter-button {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
}
/* Apply Filters — filled #EA0A2C, hover sweeps to #D80026 */ .standings-filter-button--apply {
  padding: 12px 16px;
  /* 12 + 24 + 12 = 48, no border */ background: hsl( var(--background_prim_container) );
  color: hsl(var(--text_button_prim_default));
}
.standings-filter-button--apply::before {
  background: hsl(var(--background_button_prim_hover));
}
/* Reset Filter — outline #0D1D41, hover sweeps to #162C58 */ .standings-filter-button--reset {
  padding: 11px 15px;
  /* 1 + 11 + 24 + 11 + 1 = 48 */ border: 1px solid hsl(var(--background_sec_surface));
  color: hsl(var(--background_sec_surface));
}
.standings-filter-button--reset::before {
  background: hsl(var(--background_sec_container));
}
.standings-filter-button--reset:hover, .standings-filter-button--reset:focus-visible {
  color: hsl(var(--core_neu_00));
}
@media (min-width: 768px) {
  .standings-filter-panel {
    width: 377px;
    /* Figma frame width */ max-width: 100dvw;
  }
  .standings-filter-button {
    font-size: 16px;
  }
}
/* Guard the action row on very narrow phones — the two labels are long */ @media ( max-width: 359px ) {
  .standings-filter-actions {
    gap: 8px;
  }
  .standings-filter-button--apply {
    padding-left: 8px;
    padding-right: 8px;
  }
  .standings-filter-button--reset {
    padding-left: 7px;
    padding-right: 7px;
  }
}
/* -------------------------------------------------------------- templates --- */ /* Page mode only — `.standings-container` lives in the non-widget branch of Component.tsx, so the widget never renders it and needs no `:not()` guard. The bottom padding stops the table butting into whatever follows on /standings;
the widget provides its own spacing via `.standings-widget-panel`. */ .standings-container {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Host content column — see the note on `.standings-hero-inner`. */ padding: 0 var(--container-offset, 16px) 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.standings-table-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* --------------------------------------------------------- standing table --- */ .standings-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: hsl(var(--core_neu_00));
}
.standings-table-head {
  width: 100%;
  padding: 10px 0;
  gap: 2px;
  display: flex;
  align-items: center;
  background: hsl(var(--core_neu_900));
  color: hsl(var(--core_neu_00));
}
.standings-table-body {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.standings-row {
  width: 100%;
  height: 50px;
  gap: 2px;
  display: flex;
  align-items: center;
  color: hsl(var(--core_neu_900));
}
.standings-row.is-alt {
  background: hsl(var(--background_main_container));
}
.standings-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.standings-row-team {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
}
.standings-row-stats {
  display: flex;
  align-items: center;
  flex: none;
  width: 191px;
  gap: 4px;
  justify-content: flex-start;
}
.standings-pos {
  width: 35px;
  flex: none;
}
.standings-team {
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
}
.standings-stat {
  width: 35px;
  flex: none;
}
/* The TEAM header cell hugs a fixed 90px in both exports, unlike its data cell. */ .standings-team-head {
  flex: none;
  width: 90px;
}
/* Figma sets stat values to a fixed 16px box so columns cannot jitter between rows;
NRR is the one column that hugs its (wider) content. */ .standings-value {
  width: 16px;
}
.standings-value.is-hug {
  width: auto;
}
/* The export fills the POS cell to 100% for the 2nd–4th qualifying rows. */ .standings-pos-value {
  width: 16px;
}
.standings-pos-value.is-fill {
  width: 100%;
}
.standings-team-combo {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  height: 50px;
}
/* The box stays 50x50 so the row layout is unchanged;
the badge inside is 44px tall and centred, leaving 3px above and below. Width follows the badge's own aspect ratio. At the full 50px the badge filled its row edge to edge and the logos in two stacked rows touched. */ .standings-team-logo {
  position: relative;
  width: 50px;
  height: 50px;
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.standings-team-logo img {
  width: auto;
  height: 44px;
  /* `.standings img` caps width at 100% (50px). A badge wide enough to hit that cap would otherwise squash;
  `contain` letterboxes it instead. */ object-fit: contain;
}
/* Full-height badge back on the desktop page table. Rows there are 66px against a 50px badge box, so they already have 16px of separation and the inset is not needed. Gated at 1024, not 768: the row only grows at the desktop breakpoint, so 768-1023 still has 50px rows and keeps the 44px badge. The widget is excluded at every width — it renders the condensed 50px rows even at 1366. */ @media ( min-width: 1024px ) {
  .standings:not(.is-widget) .standings-team-logo img {
    height: 100%;
  }
}
.standings-text {
  font-family: var(--standings-font-ui);
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  color: inherit;
}
.standings-text.is-bold {
  font-weight: 700;
}
.standings-text.is-left {
  text-align: left;
}
.standings-team-name {
  width: fit-content;
  font-family: var(--standings-font-ui);
  font-weight: 700;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  color: inherit;
  white-space: nowrap;
}
.standings-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
}
.standings-form-result {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.standings-form-result span {
  width: fit-content;
  font-family: var(--standings-font-ui);
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  color: hsl(var(--core_neu_00));
  text-align: center;
}
.standings-form-result.is-win {
  background: hsl(var(--background_alert_success));
}
.standings-form-result.is-loss {
  background: hsl(var(--background_alert_error));
}
/* Anything that is neither a win nor a loss: abandoned, drawn, tied, no result. Grey rather than a third signal colour — it is the absence of a result, not a third kind of one. */ .standings-form-result.is-neutral {
  background: hsl(var(--core_neu_350));
}
.standings-empty {
  width: 100%;
  padding: 40px 16px;
  font-family: var(--standings-font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: hsl(var(--core_sec_250));
  text-align: center;
}
/* ---------------------------------------------------------------- skeleton --- */ .standings-skeleton {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.standings-skeleton-head {
  height: 47px;
  background: hsl(var(--core_neu_900));
}
.standings-skeleton-row {
  height: 50px;
  margin-top: 2px;
  background: rgb(17 17 21 / 8%);
}
.standings-skeleton-row:nth-child(even) {
  background: rgb(17 17 21 / 12%);
}
@media (prefers-reduced-motion: no-preference) {
  .standings-skeleton-row {
    animation: standings-pulse 1.4s ease-in-out infinite;
  }
}
@keyframes standings-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
/* ===================== TABLET 768–1023 — the mweb design, wider ============ The compact table reads better than 9 desktop columns here, but stop it stretching edge to edge and let the stat columns share the extra width instead of dumping all of it into the team column. Nothing here applies at the 375 design width, so the mweb measurements stay exact. */ @media ( min-width: 768px ) and (max-width: 1023.98px) {
  /* 40px below the table from tablet up;
  mobile keeps the 28px base. */ .standings-container {
    padding-bottom: 40px;
  }
  /* No `max-width: 720px` here any more. The host's `--container-offset` already yields a 750px column at this breakpoint, and capping the element broke the calc: `100%` would have resolved against 720px instead of the viewport, so the padding came out wrong and the table sat 62px narrower than the breadcrumb. */ /* Tablet metrics for the /standings 720px content column. Scoped away from widget mode for the same reason as the 1024 block: a fixed 240px group_1 inside the 350px docked panel leaves ~110px for five stat columns, so the table overflowed between 768 and 1023. The widget keeps the mweb metrics at every width. */ .standings:not( .is-widget ) .standings-row-team {
    flex: 0 0 240px;
  }
  .standings:not(.is-widget) .standings-row-stats {
    flex: 1 1 auto;
    width: auto;
  }
  .standings:not(.is-widget) .standings-stat {
    flex: 1 1 0;
    width: auto;
  }
}
/* ======================== DESKTOP >=1024 — the 1366 design ================= */ @media ( min-width: 1024px ) {
  .standings .standings-cell--desktop {
    display: flex;
  }
  .standings .standings-text--desktop {
    display: block;
  }
  .standings .standings-cell--mobile {
    display: none;
  }
  .standings .standings-text--mobile {
    display: none;
  }
  .standings:not(.is-widget) .standings-hero-inner {
    /* Full width + the host offset as padding — same column as the breadcrumb. The old `width: 1170px;
    margin-inline: auto` pinned the header to the 1366 design width and stopped tracking the host at every other size. */ width: 100%;
    min-height: 48px;
    padding-block: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .standings:not(.is-widget) .standings-title {
    width: fit-content;
    font-size: 32px;
    line-height: 38px;
  }
  .standings:not(.is-widget) .standings-container {
    /* Keep the host offset — the shorthand would otherwise zero it. */ padding: 0 var(--container-offset, 16px) 40px;
    gap: 40px;
  }
  .standings:not(.is-widget) .standings-table-wrap {
    align-items: stretch;
    /* The column is owned by `.standings-container` above, which carries `--container-offset`. A second padding here would double the inset. */
  }
  .standings:not(.is-widget) .standings-table {
    align-items: stretch;
  }
  .standings:not(.is-widget) .standings-table-head, .standings:not(.is-widget) .standings-row {
    height: auto;
    padding: 8px 20px;
    gap: 0;
    justify-content: space-between;
  }
  .standings:not(.is-widget) .standings-row.is-alt {
    background: transparent;
  }
  .standings:not(.is-widget) .standings-row.is-hl {
    background: hsl(var(--background_sec_container));
    color: hsl(var(--core_neu_00));
  }
  .standings:not(.is-widget) .standings-row-team {
    flex: none;
    width: 350px;
    gap: 10px;
  }
  .standings:not(.is-widget) .standings-row-stats {
    flex: 1 1 auto;
    width: auto;
    gap: 0;
  }
  .standings:not(.is-widget) .standings-stat {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .standings:not(.is-widget) .standings-form {
    width: 141px;
  }
  .standings:not(.is-widget) .standings-form-head {
    flex: none;
    width: 141px;
    justify-content: flex-start;
  }
  .standings:not(.is-widget) .standings-text {
    font-size: 12px;
    line-height: 14px;
  }
  .standings:not(.is-widget) .standings-team-name {
    font-size: 12px;
    line-height: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .standings-button, .standings-button::before, .standings-filter-panel, /* scoped to match the backdrop's base rule above, or this would lose to it */ .standings-filter .standings-filter-backdrop, .standings-filter-close, .standings-filter-close::before, .standings-filter-options-wrap, .standings-filter-group__chevron {
    transition: none;
  }
}
/* ========================= HOMEPAGE WIDGET (display_mode: widget) ========= The same condensed table the page renders below 1024px, in two containers: < 768px an inline block — heading, table, "View All" >= 768px docked off the right edge;
a rotated tab is the only visible part until clicked, then it slides in. Geometry matches the live site: 350px wide, 388px tall, 25x120 tab, `right` transitioned over 0.5s ease-in-out. */ .standings.is-widget {
  /* The page surface clips horizontally to stop the hero bleeding. The docked panel lives at `right: -350px`, i.e. deliberately outside the box, so the clip has to go in widget mode or the panel is invisible. */ overflow-x: visible;
  width: auto;
  background: none;
}
/* dp_2/black. Mobile only — the >=768 block hides this and the tab becomes the heading, so no breakpoint guard is needed here. `--standings-navy` is already #0d1d41, the spec's --text-main-sec. */ .standings-widget-title {
  margin: 0 0 28px;
  font-family: var(--standings-font-ui);
  font-weight: 900;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 5px;
  color: hsl(var(--background_sec_surface));
  text-align: center;
  text-transform: uppercase;
}
/* Mobile only. The widget sits inline in the homepage flow between other modules, so it owns its own breathing room on all four sides: 40px top — above the STANDINGS heading 16px sides — the same gutter as the /standings body (`.standings-container`) 40px bottom — below the VIEW ALL button Without the vertical padding the widget butts straight into whatever section sits above and below it on the homepage. The docked desktop panel resets all of this to 0: it is already inset by being a 350px panel, and the live site runs its table flush to the edges. */ .standings-widget-panel {
  padding: 40px 16px;
}
.standings-widget-body {
  width: 100%;
}
/* VIEW ALL sits on a full-width hairline, the button knocking a hole in it. Widget + mobile only by construction: this element is rendered only by WidgetShell, and is `display: none` from 768px up. `margin-top`, not `padding-top` — the line is centred with `top: 50%`, and asymmetric padding would put 50% of the box above the button's own centre. */ .standings-widget-foot {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.standings-widget-foot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: hsl(var(--core_neu_400));
}
.standings-widget-link {
  /* Positioned so it paints over the hairline, and opaque so the rule reads as stopping at the button's edges rather than striking through the label. */ position: relative;
  background: hsl(var(--core_neu_00));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border: 1px solid hsl(var(--background_sec_surface));
  color: hsl(var(--background_sec_surface));
  font-family: var(--standings-font-ui);
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.standings-widget-link:hover, .standings-widget-link:focus-visible {
  background: hsl(var(--background_sec_surface));
  color: hsl(var(--core_neu_00));
}
/* The tab only exists in the docked presentation. */ .standings-widget-tab {
  display: none;
}
/* No home-team highlight anywhere in widget mode — inline on mobile or docked on desktop. `is-hl` is still on the row (the data layer is untouched);
it is simply never painted here. The /standings page keeps its own highlight from 1024px up, in the `min-width: 1024px` block. */ /* Widget mode keeps the mweb table metrics, so it also needs an mweb-era piece the >=1024 block owns: the header's TEAM cell hugs 90px on mweb;
inside a 350px panel that plus POS pushes the stat headers onto a second line, so it flexes here. */ .standings.is-widget .standings-team-head {
  flex: 1 1 auto;
  width: auto;
}
/* ---- >= 768px: dock it -------------------------------------------------- */ @media ( min-width: 768px ) {
  .standings-widget {
    position: fixed;
    /* Above homepage sections. The live widget uses `3`, which is only enough because it sits in that page's own stacking order;
    dropped into an arbitrary homepage the tab was being covered. Kept BELOW the filter drawer's scrim (90) and panel (100) so an open drawer still wins. */ z-index: 80;
    top: 50%;
    right: -350px;
    width: 350px;
    transform: translateY(-50%);
    transition: right 0.5s ease-in-out;
  }
  .standings-widget.is-open {
    right: 0;
  }
  .standings-widget-panel {
    width: 350px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0;
    background: hsl(var(--core_neu_00));
    box-shadow: 0 0 24px rgb(0 0 0 / 18%);
  }
  /* Hangs off the panel's left edge, so it travels with the panel rather than needing its own fixed position — when the panel is parked at -350px the tab is the only thing inside the viewport. */ /* The design spec is written for the button in its UPRIGHT form — `min/max-height: 48px`, `padding: 12px 16px`. This tab is that button rotated a quarter turn, so the two axes swap: the spec's 48px height is the tab's WIDTH, and its 12px/16px block/inline padding becomes 16px/12px here. Height is left to the content (padding + label + gap + chevron);
  the fixed 120px it used to carry would clip the larger 16px label. Position is unchanged — still hanging off the panel's left edge and centred vertically, with `left` tracking the new width so it stays flush. */ .standings-widget-tab {
    position: absolute;
    left: -48px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: hsl(var(--background_prim_container));
    /* #ffe9ed — the plugin already carries this as "text on a filled red button", which is exactly what --text-button_prim-default is. */ color: hsl( var(--text_button_prim_default) );
    border: 0;
    cursor: pointer;
  }
  .standings-widget-tab-label {
    /* `writing-mode`, NOT `transform: rotate(-90deg)`. A transform rotates the painted glyphs but leaves the LAYOUT box horizontal, so a ~70px-wide "Standings" still claims 70px of width inside a 25px column and lands on top of the chevron. `vertical-rl` rotates the box itself, so flex sizes it correctly;
    the extra 180deg turn makes it read bottom-to-top. */ writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-family: var(--standings-font-ui);
    /* button/lg. In vertical writing the line box runs across the tab, so the 24px line-height is what the 48px width minus 2x12px padding is sized to hold. */ font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
  }
  /* The chevron does NOT flip on open — it keeps its resting orientation in both states, so there is nothing to transition either. */ .standings-widget-tab-icon {
    display: flex;
  }
  .standings-widget-tab:focus-visible {
    outline: 2px solid hsl(var(--core_neu_00));
    outline-offset: -4px;
  }
  /* The heading is the tab on desktop — no second title inside the panel. */ .standings-widget-title {
    display: none;
  }
  /* No "View All" CTA in the docked panel — the whole widget is one click from the full table already, and the button competes with the tab. Mobile keeps it, since there is no tab there. */ .standings-widget-foot {
    display: none;
  }
  /* Pin the CONDENSED column set at every width in widget mode. The base rules already hide `-d` cells;
  the 1024 breakpoint flips them on for the page, so widget mode simply never lets that happen. TIED, N/R and FORM stay out, and team short codes stay in — matching the mweb table exactly. */ .standings.is-widget .standings-cell--desktop {
    display: none;
  }
  .standings.is-widget .standings-text--desktop {
    display: none;
  }
  .standings.is-widget .standings-text--mobile {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  .standings-widget, .standings-widget-link {
    transition: none;
  }
}
/* team-standings plugin css ended */ .si-molecule-fixture-match-score__innings-latest {
  align-items: center;
}
.standings-row-stats:first-of-type .standings-cell.standings-stat:last-of-type .standings-text {
  font: var(--body_xs_bold) !important;
}
.news-videos-section [data-body-index="5"] {
  grid-area: 3 / 9 / 5 / 12;
}
@media (max-width: 1023px) {
  [data-molecule-id="2be88332-62b1-42be-8f79-0d0f2cabf207"] {
    padding-right: 3%;
    padding-top: 2%;
    padding-bottom: 2%;
    width: fit-content;
  }
  [data-molecule-id="9aa5c5fd-d542-4d81-a958-4b8f547a8d2c"] {
    padding-right: 4%;
    padding-top: 2%;
    padding-bottom: 2%;
    width: fit-content;
  }
  #f0ecae19-8de0-5092-97a4-cb5a7e47af4c .icon_wf_play {
    padding-top: 6%;
  }
}
[data-component-id="e3ac6467-e401-4ee7-bcdc-158e9306c1ef"] {
padding-inline: calc(40px + var(--container-offset));
}
[data-atom-id="d3678f25-6c0f-554b-9779-7592197192da"] {
position: relative;
  overflow: visible;
  width: 80px;
  height: 80px;
  padding: 20px;
  isolation: isolate;
  border: 1px solid #E1E1E6;
  background-color: rgba(0, 0, 0, 0.30);
  &::before {
    content: '';
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50% ,-50%);
    background-color: #FFF;
    width: 40px;
    height: 40px;
    border-radius: 50vmax;
    z-index: -1;
  }
}
[data-atom-id="9bc71f24-23e6-4d5f-8228-19e873a7a88b"] {
position: relative;
  overflow: visible;
  width: 80px;
  height: 80px;
  padding: 20px;
  isolation: isolate;
  border: 1px solid #E1E1E6;
  background-color: rgba(0, 0, 0, 0.30);
  &::before {
    content: '';
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50% ,-50%);
    background-color: #FFF;
    width: 40px;
    height: 40px;
    border-radius: 50vmax;
    z-index: -1;
  }
}
[data-atom-id="f0ecae19-8de0-5092-97a4-cb5a7e47af4c"] {
position: relative;
  overflow: visible;
  width: 80px;
  height: 80px;
  padding: 20px;
  isolation: isolate;
  border: 1px solid #E1E1E6;
  background-color: rgba(0, 0, 0, 0.30);
  &::before {
    content: '';
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50% ,-50%);
    background-color: #FFF;
    width: 40px;
    height: 40px;
    border-radius: 50vmax;
    z-index: -1;
  }
}
[data-component-id="97a09f03-efc6-429d-ada9-bc0a4b5b384a"] .si-molecule-fixture-match-score__team-wrap--team-a {
border-right: 1px solid hsl(var(--border_main_default));
}
[data-component-id="97a09f03-efc6-429d-ada9-bc0a4b5b384a"] .si-molecule-fixture-match-score__team-wrap--team-b {
border-left: 1px solid hsl(var(--border_main_default));
}
[data-component-id="97a09f03-efc6-429d-ada9-bc0a4b5b384a"] .si-molecule-fixture-match-score__team-wrap {
align-content: center;
}
[data-component-id="97a09f03-efc6-429d-ada9-bc0a4b5b384a"] .si-molecule_score {
border-top:1px solid hsl(var(--border_main_default)) !important;
  height:150px;
}
[data-component-id="97a09f03-efc6-429d-ada9-bc0a4b5b384a"] .fixtures-meta > * {
display: flex;
}
[data-component-id="97a09f03-efc6-429d-ada9-bc0a4b5b384a"] .fixtures-meta > *:not(:last-child)::after {
content:"|";
  margin-left: 4px;
  color:hsl(var(--border_main_default));
  font-size: 10px;
}
[data-component-id="97a09f03-efc6-429d-ada9-bc0a4b5b384a"] .si-molecule-fixture-match-score__score-single {
flex-direction:column;
  gap:4px;
}
[data-component-id="97a09f03-efc6-429d-ada9-bc0a4b5b384a"] .si-molecule-fixture-match-score__score-multiple > div:not(:last-child) {
padding-bottom: 8px;
  position: relative;
  .si-molecule-fixture-match-score__score--innings-old{
    color: hsl(var(--text_main_disable));
  }
  &::after {
    content:"";
    width: 80%;
    position: absolute;
    bottom: 4px;
    height: 1px;
    background-color: rgba(0,0,0,.5);
  }
}
[data-component-id="226eeea1-67c7-42c6-9298-e28a16f99d96"] .button-outline {
position: relative;
  z-index: 0;
}
[data-component-id="226eeea1-67c7-42c6-9298-e28a16f99d96"] .button-outline::before {
content: "";
  position: absolute;
  inset: 0;
  background: #AAAAAE;
  /* the reveal color */ clip-path: circle(0% at 50% 100%);
  transition: clip-path 0.45s ease;
  z-index: -1;
}
[data-component-id="226eeea1-67c7-42c6-9298-e28a16f99d96"] .button-outline:hover::before {
clip-path: circle(150% at 50% 100%);
}
[data-component-id="226eeea1-67c7-42c6-9298-e28a16f99d96"] .button-outline:hover {
border-color: transparent;
  color: white;
}
[data-component-id="226eeea1-67c7-42c6-9298-e28a16f99d96"] .button-outline span {
transition: color 0.45s ease;
}
[data-component-id="226eeea1-67c7-42c6-9298-e28a16f99d96"] .button-outline:hover span {
color: white;
}
[data-component-id="226eeea1-67c7-42c6-9298-e28a16f99d96"] .button-outline:not(:first-child) {
margin-left:16px;
  &::after {
    content:"";
    width:18px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(-100%);
    background-color: #AAAAAE;
    z-index: 2;
  }
}
[data-molecule-id="a4dbc722-85f5-467d-a14f-8549b5ac1198"] {
position: relative;
  isolation: isolate;
  display:flex;
  flex-wrap:no-wrap;
  container-name: section-header;
  @container (max-width:460px) {
    &:has(>.button-outline:nth-child(2)) {
      flex-wrap:wrap !important;
      gap:12px;
      &::after {
        display: none;
      }
      &::before {
        display: none;
      }
      .button-outline::after {
        display: none;
      }
      .button-outline:not(:first-child) {
        margin-left: 0;
      }
    }
  }
  &::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #AAAAAE;
  }
  &::before {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #AAAAAE;
  }
}
[data-atom-id="ce9787f4-8c06-425a-a042-31828cbefe9b"] {
position: relative;
  overflow: visible;
  width: 78px;
  height: 78px;
  padding: 20px;
  isolation: isolate;
  background-color: rgba(0, 0, 0, 0.30);
  &::before {
    content: '';
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50% ,-50%);
    background-color: #FFF;
    width: 38px;
    height: 38px;
    border-radius: 50vmax;
    z-index: -1;
  }
}
[data-template-id="dcf0a8c4-c54e-4058-a073-08ec6a43336c"] .photos-template {
position: relative;
  ::before {
    width: 11%;
    aspect-ratio: .87;
    top: 0;
    left: var(--space-3-neg);
    position: absolute;
    background: url(/static-assets/images/cssimages/pattern/ball-pattern.webp) top / contain no-repeat;
  }
}
[data-template-id="dcf0a8c4-c54e-4058-a073-08ec6a43336c"] .template-body {
counter-reset: card;
}
[data-template-id="dcf0a8c4-c54e-4058-a073-08ec6a43336c"] .template-body > [data-body-index] {
counter-increment: card;
}
[data-component-id="1dfc72f9-c324-4430-b688-529e572567de"] {
position:relative;
  overflow:hidden;
}
[data-component-id="1dfc72f9-c324-4430-b688-529e572567de"]:hover .home-photo-content {
transform: translateY(0%);
  z-index: 1;
}
[data-component-id="1dfc72f9-c324-4430-b688-529e572567de"] .home-photo-content::after {
content: counter(card, decimal-leading-zero);
  position: absolute;
  line-height: 1;
  right: 25px;
  bottom: 0;
  overflow: hidden;
  color: var(--text-main-prim, #bd00107d);
  text-align: center;
  font-family: var(--typeface-display, Poppins);
  font-size: 175px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 6.714px;
  z-index: -1;
  pointer-events: none;
}
[data-component-id="aa690628-08eb-45a5-b781-3cb678b2d7c7"] {
isolation: isolate;
}
[data-molecule-id="b0423b43-f1de-4f6c-b0c4-fdb5c8d8b236"] {
position: relative;
  overflow: visible;
  width: 80px;
  height: 80px;
  padding: 20px;
  isolation: isolate;
  border: 1px solid #E1E1E6;
  background-color: rgba(0, 0, 0, 0.30);
  &::before {
    content: '';
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50% ,-50%);
    background-color: #FFF;
    width: 40px;
    height: 40px;
    border-radius: 50vmax;
    z-index: -1;
  }
}
[data-component-id="4b4a2268-128f-4513-b4ed-e76b41e91055"] {
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(110%);
  transition:300ms transform;
}
[data-template-id="d3a1dce6-071d-48ce-91ac-3eb8247eb4f8"] {
.swiper-button-container {
    width: calc(100% + 60px);
    left: -30px;
  }
}
[data-component-id="72558fd7-8d0b-49a5-8e98-8e3e6b36fc67"] {
border: 0.5px solid #E1E1E6;
}
[data-molecule-id="d32e094a-1e13-4851-8a4e-706586e115e9"] {
position: relative;
  &::before {
    content: "";
    background: linear-gradient(3.77deg, #29292C 29.86%, rgba(41, 41, 44, 0) 85.28%);
    height: 30%;
    width: 100%;
    pointer-events: none;
    z-index: var(--z-default);
    top: auto;
    bottom: 0;
    position: absolute;
  }
}
[data-molecule-id="34fb9c19-f0ee-4483-a300-e7e07b61890b"] {
display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-component-id="6dfaa539-07da-422e-8742-8de1dad0ff70"] {
border-top-width: 0px !important;
  border-bottom-width: 0px !important;
}
[data-component-id="4ab8f793-412a-4681-b5c8-47e375234689"] .button-outline-light {
position: relative;
  z-index: 0;
}
[data-component-id="4ab8f793-412a-4681-b5c8-47e375234689"] .button-outline-light::before {
content: "";
  position: absolute;
  inset: 0;
  background: #EA0A2C;
  /* the reveal color */ clip-path: circle(0% at 50% 100%);
  transition: clip-path 0.45s ease;
  z-index: -1;
}
[data-component-id="4ab8f793-412a-4681-b5c8-47e375234689"] .button-outline-light:hover::before {
clip-path: circle(150% at 50% 100%);
}
[data-component-id="4ab8f793-412a-4681-b5c8-47e375234689"] .button-outline-light:hover {
border-color: transparent;
  color: white;
}
[data-component-id="4ab8f793-412a-4681-b5c8-47e375234689"] .button-outline-light span {
transition: color 0.45s ease;
}
[data-component-id="4ab8f793-412a-4681-b5c8-47e375234689"] .button-outline-light:hover span {
color: white;
}
[data-component-id="4ab8f793-412a-4681-b5c8-47e375234689"] .button-outline-light:not(:first-child) {
margin-left:16px;
  &::after {
    content:"";
    width:18px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(-100%);
    background-color: hsl(var(--background_main_surface));
    z-index: 2;
  }
}
[data-molecule-id="470a8dde-f94d-4cc2-a1fd-237b2c5d9b66"] {
position: relative;
  isolation: isolate;
  display:flex;
  flex-wrap:no-wrap;
  container-name: section-header;
  @container (max-width:460px) {
    &:has(>.button-outline:nth-child(2)) {
      flex-wrap:wrap !important;
      gap:12px;
      &::after {
        display: none;
      }
      &::before {
        display: none;
      }
      .button-outline::after {
        display: none;
      }
      .button-outline:not(:first-child) {
        margin-left: 0;
      }
    }
  }
  &::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: hsl(var(--background_main_surface));;
  }
  &::before {
    content: '';
    width: 100%;
    height: 1px;
    background-color: hsl(var(--background_main_surface));;
  }
}