/* ==========================================================================
   BUILD SETU™ SELLER PAGE
   FULLY DYNAMIC THEME
   ========================================================================== */

*,
*::before,
*::after{
  box-sizing:border-box;
}

/* ==========================================================================
   DYNAMIC DERIVED COLORS
   ========================================================================== */

:root{
  --seller-brand-faint:
    color-mix(
      in srgb,
      var(--seller-brand) 6%,
      var(--seller-white)
    );

  --seller-brand-soft-mix:
    color-mix(
      in srgb,
      var(--seller-brand) 11%,
      var(--seller-white)
    );

  --seller-brand-soft-strong:
    color-mix(
      in srgb,
      var(--seller-brand) 17%,
      var(--seller-white)
    );

  --seller-brand-border:
    color-mix(
      in srgb,
      var(--seller-brand) 28%,
      var(--seller-white)
    );

  --seller-brand-shadow:
    color-mix(
      in srgb,
      var(--seller-brand) 24%,
      transparent
    );

  --seller-brand-overlay:
    color-mix(
      in srgb,
      var(--seller-brand-dark) 82%,
      transparent
    );

  --seller-white-soft:
    color-mix(
      in srgb,
      var(--seller-white) 92%,
      transparent
    );

  --seller-white-border:
    color-mix(
      in srgb,
      var(--seller-white) 27%,
      transparent
    );

  --seller-text-soft:
    color-mix(
      in srgb,
      var(--seller-text) 72%,
      var(--seller-white)
    );
}

/* ==========================================================================
   PAGE
   ========================================================================== */

body{
  background:
    radial-gradient(
      circle at top left,
      var(--seller-brand-soft-strong),
      transparent 31%
    ),
    radial-gradient(
      circle at top right,
      var(--seller-brand-soft-mix),
      transparent 27%
    ),
    var(--seller-page-bg);
  color:var(--seller-text);
}

.seller-premium-wrap{
  width:100%;
  max-width:1040px;
  margin:0 auto;
  padding:12px 12px 116px;
}

/* ==========================================================================
   PROFILE COVER
   ========================================================================== */

.seller-channel-profile{
  position:relative;
  overflow:hidden;
  padding:28px 18px 20px;
  border:1px solid var(--seller-brand-border);
  border-radius:var(--seller-radius-lg);
  background:
    radial-gradient(
      circle at 92% 8%,
      var(--seller-white-border),
      transparent 26%
    ),
    radial-gradient(
      circle at 8% 100%,
      color-mix(
        in srgb,
        var(--seller-white) 17%,
        transparent
      ),
      transparent 29%
    ),
    linear-gradient(
      135deg,
      var(--seller-brand),
      var(--seller-brand-dark)
    );
  color:var(--seller-header-text);
  box-shadow:
    var(--seller-shadow-lg),
    0 16px 36px var(--seller-brand-shadow);
}

.seller-channel-profile::before{
  content:"";
  position:absolute;
  width:176px;
  height:176px;
  top:-94px;
  right:-57px;
  border-radius:50%;
  background:color-mix(
    in srgb,
    var(--seller-white) 11%,
    transparent
  );
  pointer-events:none;
}

.seller-channel-profile::after{
  content:"";
  position:absolute;
  width:116px;
  height:116px;
  bottom:-67px;
  left:-37px;
  border-radius:50%;
  background:color-mix(
    in srgb,
    var(--seller-white) 9%,
    transparent
  );
  pointer-events:none;
}

.seller-channel-main{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:17px;
}

/* ==========================================================================
   AVATAR
   ========================================================================== */

.seller-channel-avatar{
  width:108px;
  height:108px;
  flex:0 0 108px;
  padding:4px;
  overflow:hidden;
  border-radius:50%;
  background:linear-gradient(
    145deg,
    var(--seller-white),
    color-mix(
      in srgb,
      var(--seller-brand-light) 45%,
      var(--seller-white)
    )
  );
  box-shadow:
    0 13px 31px rgba(0,0,0,.22),
    0 0 0 1px var(--seller-white-border);
}

.seller-channel-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  border:3px solid var(--seller-white);
  border-radius:50%;
  background:var(--seller-white);
}

/* ==========================================================================
   PROFILE INFO
   ========================================================================== */

.seller-channel-info{
  flex:1;
  min-width:0;
}

.seller-channel-name-row{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
}

.seller-channel-name{
  min-width:0;
  margin:0;
  color:var(--seller-header-text);
  font-size:28px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.45px;
  overflow-wrap:anywhere;
  text-shadow:0 2px 8px rgba(0,0,0,.13);
}

.seller-channel-verified{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--seller-white);
  color:var(--seller-brand);
  box-shadow:0 5px 14px rgba(0,0,0,.14);
}

.seller-channel-verified .svg-icon{
  width:19px;
  height:19px;
}

.seller-channel-handle{
  margin-top:7px;
  color:color-mix(
    in srgb,
    var(--seller-header-text) 94%,
    transparent
  );
  font-size:14px;
  line-height:1.4;
  font-weight:700;
  overflow-wrap:anywhere;
}

.seller-channel-meta{
  margin-top:5px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  color:color-mix(
    in srgb,
    var(--seller-header-text) 83%,
    transparent
  );
  font-size:13px;
  line-height:1.5;
  font-weight:650;
}

.seller-meta-dot{
  color:color-mix(
    in srgb,
    var(--seller-header-text) 55%,
    transparent
  );
}

.seller-meta-verified{
  color:color-mix(
    in srgb,
    var(--seller-success) 35%,
    var(--seller-white)
  );
  font-weight:850;
}

/* ==========================================================================
   DESCRIPTION
   ========================================================================== */

.seller-channel-description{
  position:relative;
  z-index:2;
  margin-top:19px;
  padding:13px 14px;
  border:1px solid var(--seller-white-border);
  border-radius:15px;
  background:color-mix(
    in srgb,
    var(--seller-white) 12%,
    transparent
  );
  color:color-mix(
    in srgb,
    var(--seller-header-text) 95%,
    transparent
  );
  font-size:13px;
  line-height:1.65;
  font-weight:650;
  overflow-wrap:anywhere;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

.seller-description-text,
.seller-description-full{
  color:inherit;
}

.seller-description-more{
  display:inline;
  margin:0 0 0 3px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--seller-header-text);
  font:inherit;
  font-weight:900;
  cursor:pointer;
}

/* ==========================================================================
   TRUST LINE
   ========================================================================== */

.seller-channel-trust-line{
  position:relative;
  z-index:2;
  margin-top:13px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  color:color-mix(
    in srgb,
    var(--seller-header-text) 87%,
    transparent
  );
  font-size:12px;
  line-height:1.5;
  font-weight:750;
}

.seller-channel-trust-line .svg-icon{
  color:color-mix(
    in srgb,
    var(--seller-warning) 42%,
    var(--seller-white)
  );
}

.seller-trust-separator{
  color:color-mix(
    in srgb,
    var(--seller-header-text) 48%,
    transparent
  );
}

/* ==========================================================================
   PROFILE ACTIONS
   ========================================================================== */

.seller-channel-actions{
  position:relative;
  z-index:4;
  margin:-10px 10px 0;
  padding:16px;
  border:1px solid var(--seller-card-border);
  border-radius:0 0 var(--seller-radius-lg) var(--seller-radius-lg);
  background:var(--seller-white-soft);
  box-shadow:var(--seller-shadow-md);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.seller-channel-action-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}

.seller-channel-action-btn{
  min-width:0;
  min-height:48px;
  padding:9px 8px;
  border:1px solid var(--seller-brand-border);
  border-radius:999px;
  background:var(--seller-brand-soft-mix);
  color:var(--seller-brand-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-decoration:none;
  font-family:inherit;
  font-size:13px;
  line-height:1;
  font-weight:850;
  cursor:pointer;
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.seller-channel-action-btn:hover{
  border-color:var(--seller-button-bg);
  background:var(--seller-button-bg);
  color:var(--seller-button-text);
  box-shadow:0 9px 21px var(--seller-brand-shadow);
}

.seller-channel-action-btn:active{
  transform:scale(.975);
}

.seller-channel-action-btn .svg-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
}

/* ==========================================================================
   SOCIAL LINKS
   ========================================================================== */

.seller-channel-links{
  margin-top:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
}

.seller-channel-link{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--seller-brand-border);
  border-radius:50%;
  background:var(--seller-brand-soft-mix);
  color:var(--seller-brand-dark);
  text-decoration:none;
  box-shadow:var(--seller-shadow-sm);
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.seller-channel-link:hover{
  border-color:var(--seller-button-bg);
  background:var(--seller-button-bg);
  color:var(--seller-button-text);
}

.seller-channel-link:active{
  transform:scale(.94);
}

/* ==========================================================================
   CONTACT DETAILS
   ========================================================================== */

.seller-channel-contact-details{
  margin-top:14px;
  overflow:hidden;
  border:1px solid var(--seller-card-border);
  border-radius:16px;
  background:var(--seller-card-bg);
}

.seller-channel-contact-details summary{
  min-height:50px;
  padding:13px 15px;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--seller-text);
  font-size:14px;
  font-weight:850;
  cursor:pointer;
  list-style:none;
  user-select:none;
}

.seller-channel-contact-details summary::-webkit-details-marker{
  display:none;
}

.seller-channel-contact-details summary .svg-icon{
  color:var(--seller-link);
}

.seller-channel-contact-details summary::after{
  content:"+";
  width:28px;
  height:28px;
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--seller-brand-soft-mix);
  color:var(--seller-link);
  font-size:20px;
  line-height:1;
  font-weight:500;
}

.seller-channel-contact-details[open] summary{
  border-bottom:1px solid var(--seller-card-border);
}

.seller-channel-contact-details[open] summary::after{
  content:"−";
}

.seller-channel-contact-list{
  padding:12px;
  display:grid;
  gap:9px;
}

.seller-channel-contact-item{
  min-width:0;
  padding:12px;
  display:flex;
  align-items:flex-start;
  gap:11px;
  border:1px solid transparent;
  border-radius:13px;
  background:var(--seller-surface);
  color:var(--seller-text);
  text-decoration:none;
  transition:
    border-color .18s ease,
    background-color .18s ease;
}

a.seller-channel-contact-item:hover{
  border-color:var(--seller-brand-border);
  background:var(--seller-brand-soft-mix);
}

.seller-channel-contact-item > .svg-icon{
  margin-top:3px;
  flex:0 0 auto;
  color:var(--seller-link);
}

.seller-channel-contact-item span{
  min-width:0;
  display:block;
}

.seller-channel-contact-item small{
  display:block;
  margin-bottom:2px;
  color:var(--seller-muted);
  font-size:11px;
  line-height:1.3;
  font-weight:700;
}

.seller-channel-contact-item strong{
  display:block;
  color:var(--seller-text);
  font-size:13px;
  line-height:1.5;
  font-weight:750;
  overflow-wrap:anywhere;
}

/* ==========================================================================
   LISTING SECTION
   ========================================================================== */

.seller-channel-listings{
  margin-top:22px;
  overflow:hidden;
  border:1px solid var(--seller-card-border);
  border-radius:var(--seller-radius-lg);
  background:var(--seller-card-bg);
  box-shadow:var(--seller-shadow-md);
}

.seller-channel-tabs{
  min-height:62px;
  padding:0 16px;
  display:flex;
  align-items:flex-end;
  gap:22px;
  border-bottom:1px solid var(--seller-card-border);
  background:linear-gradient(
    180deg,
    var(--seller-brand-soft-mix),
    var(--seller-card-bg)
  );
}

.seller-channel-tab{
  position:relative;
  height:62px;
  padding:0 3px;
  border:0;
  background:transparent;
  color:var(--seller-muted);
  font-family:inherit;
  font-size:17px;
  font-weight:850;
  cursor:default;
}

.seller-channel-tab.active{
  color:var(--seller-brand-dark);
}

.seller-channel-tab.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:4px;
  border-radius:5px 5px 0 0;
  background:linear-gradient(
    90deg,
    var(--seller-brand),
    var(--seller-brand-dark)
  );
}

.seller-channel-total{
  margin-left:auto;
  margin-bottom:18px;
  padding:6px 10px;
  border:1px solid var(--seller-brand-border);
  border-radius:999px;
  background:var(--seller-card-bg);
  color:var(--seller-brand-dark);
  font-size:12px;
  font-weight:850;
}

/* ==========================================================================
   LISTING ROWS
   ========================================================================== */

.seller-video-list{
  display:grid;
  grid-template-columns:1fr;
}

.seller-video-item{
  padding:15px;
  display:grid;
  grid-template-columns:40% minmax(0,60%);
  gap:14px;
  border-bottom:1px solid var(--seller-card-border);
  background:var(--seller-card-bg);
  transition:
    background-color .18s ease,
    box-shadow .18s ease;
}

.seller-video-item:last-child{
  border-bottom:0;
}

.seller-video-item:hover{
  background:var(--seller-brand-faint);
}

/* ==========================================================================
   LISTING IMAGE
   ========================================================================== */

.seller-video-thumb{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  border:1px solid var(--seller-card-border);
  border-radius:13px;
  background:var(--seller-surface-2);
  text-decoration:none;
  box-shadow:var(--seller-shadow-sm);
}

.seller-video-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  background:var(--seller-surface-2);
  transition:transform .28s ease;
}

.seller-video-thumb:hover img{
  transform:scale(1.035);
}

.seller-video-price{
  position:absolute;
  left:7px;
  bottom:7px;
  max-width:calc(100% - 14px);
  padding:6px 9px;
  border:1px solid var(--seller-white-border);
  border-radius:7px;
  background:linear-gradient(
    135deg,
    var(--seller-brand),
    var(--seller-brand-dark)
  );
  color:var(--seller-button-text);
  font-size:12px;
  line-height:1.1;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 7px 16px rgba(0,0,0,.20);
}

.seller-video-view-icon{
  position:absolute;
  top:7px;
  right:7px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--seller-white-border);
  border-radius:50%;
  background:var(--seller-brand-overlay);
  color:var(--seller-button-text);
  box-shadow:0 7px 16px rgba(0,0,0,.19);
}

/* ==========================================================================
   LISTING CONTENT
   ========================================================================== */

.seller-video-content{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.seller-video-title-row{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:5px;
}

.seller-video-title{
  min-width:0;
  flex:1;
  color:var(--seller-text);
  text-decoration:none;
  font-size:16px;
  line-height:1.36;
  font-weight:900;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.seller-video-title:hover{
  color:var(--seller-link);
}

.seller-video-menu-btn{
  width:28px;
  height:32px;
  flex:0 0 28px;
  padding:4px;
  border:0;
  border-radius:50%;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  cursor:pointer;
}

.seller-video-menu-btn:hover{
  background:var(--seller-brand-soft-mix);
}

.seller-video-menu-btn span{
  width:3px;
  height:3px;
  display:block;
  border-radius:50%;
  background:var(--seller-muted);
}

.seller-video-meta{
  margin-top:6px;
  color:var(--seller-brand-dark);
  font-size:12px;
  line-height:1.4;
  font-weight:750;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.seller-video-description{
  margin-top:6px;
  color:var(--seller-muted);
  font-size:12px;
  line-height:1.48;
  font-weight:550;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ==========================================================================
   LISTING ACTIONS
   ========================================================================== */

.seller-video-actions{
  margin-top:auto;
  padding-top:10px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.seller-video-action{
  min-height:34px;
  padding:7px 10px;
  border:1px solid var(--seller-brand-border);
  border-radius:999px;
  background:var(--seller-brand-soft-mix);
  color:var(--seller-brand-dark);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-decoration:none;
  font-size:11px;
  line-height:1;
  font-weight:850;
  white-space:nowrap;
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.seller-video-action:hover{
  border-color:var(--seller-button-bg);
  background:var(--seller-button-bg);
  color:var(--seller-button-text);
}

.seller-video-action:active{
  transform:scale(.96);
}

.seller-video-action .svg-icon{
  width:15px;
  height:15px;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.seller-channel-empty{
  margin:35px auto;
  max-width:430px;
  padding:35px 20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:var(--seller-muted);
}

.seller-channel-empty-icon{
  width:68px;
  height:68px;
  margin-bottom:14px;
  border:1px solid var(--seller-brand-border);
  border-radius:50%;
  background:var(--seller-brand-soft-mix);
  color:var(--seller-link);
  display:flex;
  align-items:center;
  justify-content:center;
}

.seller-channel-empty strong{
  color:var(--seller-text);
  font-size:18px;
  font-weight:900;
}

.seller-channel-empty span{
  margin-top:7px;
  font-size:13px;
  line-height:1.6;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
   
.seller-channel-action-btn:focus-visible,
.seller-channel-link:focus-visible,
.seller-video-action:focus-visible,
.seller-video-title:focus-visible,
.seller-video-thumb:focus-visible,
.seller-description-more:focus-visible,
.seller-channel-contact-details summary:focus-visible{
  outline:3px solid var(--seller-brand-soft-strong);
  outline-offset:3px;
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media(min-width:640px){

  .seller-premium-wrap{
    padding:18px 18px 122px;
  }

  .seller-channel-profile{
    padding:34px 26px 23px;
  }

  .seller-channel-avatar{
    width:124px;
    height:124px;
    flex-basis:124px;
  }

  .seller-channel-name{
    font-size:34px;
  }

  .seller-channel-description{
    max-width:760px;
  }

  .seller-channel-actions{
    margin-left:18px;
    margin-right:18px;
    padding:18px;
  }

  .seller-channel-action-grid{
    max-width:690px;
  }

  .seller-channel-contact-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .seller-video-item{
    grid-template-columns:280px minmax(0,1fr);
    gap:19px;
    padding:18px;
  }

  .seller-video-title{
    font-size:18px;
  }

  .seller-video-meta,
  .seller-video-description{
    font-size:13px;
  }

  .seller-video-action{
    font-size:12px;
  }
}

/* ==========================================================================
   DESKTOP
   ========================================================================== */

@media(min-width:900px){

  .seller-premium-wrap{
    padding-top:24px;
  }

  .seller-channel-profile{
    padding:42px 34px 28px;
  }

  .seller-channel-avatar{
    width:145px;
    height:145px;
    flex-basis:145px;
  }

  .seller-channel-name{
    font-size:39px;
  }

  .seller-channel-handle{
    font-size:15px;
  }

  .seller-channel-meta{
    font-size:14px;
  }

  .seller-channel-actions{
    margin-left:28px;
    margin-right:28px;
  }

  .seller-channel-listings{
    margin-top:28px;
  }

  .seller-video-item{
    grid-template-columns:330px minmax(0,1fr);
  }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media(max-width:520px){

  .seller-premium-wrap{
    padding:8px 9px 114px;
  }

  .seller-channel-profile{
    padding:23px 14px 18px;
    border-radius:21px;
  }

  .seller-channel-main{
    align-items:flex-start;
    gap:12px;
  }

  .seller-channel-avatar{
    width:88px;
    height:88px;
    flex-basis:88px;
    padding:3px;
  }

  .seller-channel-name{
    font-size:22px;
    line-height:1.22;
  }

  .seller-channel-verified{
    width:21px;
    height:21px;
    flex-basis:21px;
  }

  .seller-channel-verified .svg-icon{
    width:17px;
    height:17px;
  }

  .seller-channel-handle{
    margin-top:5px;
    font-size:12px;
  }

  .seller-channel-meta{
    margin-top:3px;
    gap:4px;
    font-size:11px;
  }

  .seller-channel-description{
    margin-top:15px;
    padding:11px 12px;
    font-size:12px;
  }

  .seller-channel-trust-line{
    margin-top:11px;
    font-size:11px;
  }

  .seller-channel-actions{
    margin:-7px 7px 0;
    padding:13px 11px;
    border-radius:0 0 20px 20px;
  }

  .seller-channel-action-grid{
    gap:6px;
  }

  .seller-channel-action-btn{
    min-height:43px;
    gap:5px;
    padding:8px 5px;
    font-size:11px;
  }

  .seller-channel-action-btn .svg-icon{
    width:16px;
    height:16px;
    flex-basis:16px;
  }

  .seller-channel-links{
    margin-top:11px;
    gap:7px;
  }

  .seller-channel-link{
    width:38px;
    height:38px;
  }

  .seller-channel-contact-details{
    margin-top:12px;
    border-radius:14px;
  }

  .seller-channel-contact-details summary{
    min-height:47px;
    padding:11px 12px;
    font-size:12px;
  }

  .seller-channel-listings{
    margin-top:18px;
    border-radius:20px;
  }

  .seller-channel-tabs{
    min-height:56px;
    padding:0 13px;
  }

  .seller-channel-tab{
    height:56px;
    font-size:15px;
  }

  .seller-channel-total{
    margin-bottom:15px;
    padding:5px 8px;
    font-size:10px;
  }

  .seller-video-item{
    grid-template-columns:43% minmax(0,57%);
    gap:10px;
    padding:12px 10px;
  }

  .seller-video-thumb{
    aspect-ratio:16/11;
    border-radius:10px;
  }

  .seller-video-title{
    font-size:13px;
    line-height:1.35;
  }

  .seller-video-menu-btn{
    width:22px;
    height:27px;
    flex-basis:22px;
  }

  .seller-video-meta{
    margin-top:4px;
    font-size:10px;
  }

  .seller-video-description{
    margin-top:4px;
    font-size:10px;
    -webkit-line-clamp:1;
  }

  .seller-video-price{
    left:5px;
    bottom:5px;
    padding:4px 6px;
    font-size:9px;
  }

  .seller-video-view-icon{
    top:5px;
    right:5px;
    width:26px;
    height:26px;
  }

  .seller-video-actions{
    gap:4px;
    padding-top:7px;
  }

  .seller-video-action{
    min-height:29px;
    padding:5px 6px;
    gap:3px;
    font-size:9px;
  }

  .seller-video-action .svg-icon{
    width:12px;
    height:12px;
  }
}

/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media(max-width:380px){

  .seller-channel-avatar{
    width:77px;
    height:77px;
    flex-basis:77px;
  }

  .seller-channel-name{
    font-size:19px;
  }

  .seller-channel-action-btn{
    min-height:41px;
  }

  .seller-channel-action-btn span{
    font-size:10px;
  }

  .seller-video-item{
    grid-template-columns:42% minmax(0,58%);
    gap:8px;
  }

  .seller-video-action span{
    display:none;
  }

  .seller-video-action{
    width:29px;
    height:29px;
    padding:5px;
    border-radius:50%;
  }
}

/* ==========================================================================
   COLOR-MIX FALLBACK
   ========================================================================== */

@supports not (
  color:color-mix(in srgb, #000000 50%, #ffffff)
){
  :root{
    --seller-brand-faint:var(--seller-brand-soft);
    --seller-brand-soft-mix:var(--seller-brand-light);
    --seller-brand-soft-strong:var(--seller-brand-light);
    --seller-brand-border:var(--seller-card-border);
    --seller-brand-shadow:rgba(15,23,42,.16);
    --seller-brand-overlay:var(--seller-brand-dark);
    --seller-white-soft:var(--seller-card-bg);
    --seller-white-border:rgba(255,255,255,.25);
    --seller-text-soft:var(--seller-muted);
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media(prefers-reduced-motion:reduce){

  .seller-channel-action-btn,
  .seller-channel-link,
  .seller-video-thumb img,
  .seller-video-action,
  .seller-video-item{
    transition:none;
  }
}

/* ==========================================================================
   FINAL LISTING CARD FOOTER LAYOUT
   ========================================================================== */

.seller-video-item{
  display:block;
  margin:12px;
  padding:0;
  overflow:hidden;
  border:1px solid var(--seller-card-border);
  border-radius:18px;
  background:var(--seller-card-bg);
  box-shadow:var(--seller-shadow-sm);
}

.seller-video-item:last-child{
  border-bottom:1px solid var(--seller-card-border);
}

.seller-video-main{
  display:grid;
  grid-template-columns:40% minmax(0,60%);
  gap:14px;
  padding:14px;
  background:var(--seller-card-bg);
}

.seller-video-content{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.seller-video-menu-btn{
  display:none !important;
}

.seller-video-actions{
  width:100%;
  margin:0;
  padding:10px 12px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  border-top:1px solid var(--seller-card-border);
  background:var(--seller-brand-faint);
}

.seller-video-action{
  width:100%;
  min-width:0;
  min-height:40px;
  padding:8px 6px;
  border:1px solid var(--seller-brand-border);
  border-radius:12px;
  background:var(--seller-brand-soft-mix);
  color:var(--seller-brand-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  white-space:nowrap;
}

.seller-video-action:hover{
  border-color:var(--seller-button-bg);
  background:var(--seller-button-bg);
  color:var(--seller-button-text);
}

@media(max-width:520px){

  .seller-video-item{
    margin:10px;
    border-radius:16px;
  }

  .seller-video-main{
    grid-template-columns:42% minmax(0,58%);
    gap:10px;
    padding:11px;
  }

  .seller-video-actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    padding:9px;
  }

  .seller-video-action{
    min-height:36px;
    padding:7px 3px;
    border-radius:10px;
    font-size:10px;
  }

  .seller-video-action .svg-icon{
    width:13px;
    height:13px;
    flex:0 0 13px;
  }
}

@media(max-width:380px){

  .seller-video-action{
    width:100%;
    height:auto;
    border-radius:9px;
  }

  .seller-video-action span{
    display:inline !important;
    font-size:9px;
  }
}