/* Werbeschwaggos DTF Shop – Modern Visual Redesign v1.9.8
   Nur Optik. Keine Funktionslogik. */

:root{
  --wsdtf-yellow:#ffd400;
  --wsdtf-yellow-2:#ffe866;
  --wsdtf-black:#070707;
  --wsdtf-ink:#111111;
  --wsdtf-muted:#6f7280;
  --wsdtf-line:rgba(17,17,17,.10);
  --wsdtf-soft:#f6f6f1;
  --wsdtf-card:#ffffff;
  --wsdtf-radius:24px;
  --wsdtf-radius-lg:34px;
  --wsdtf-shadow:0 24px 70px rgba(0,0,0,.12);
  --wsdtf-shadow-soft:0 14px 40px rgba(0,0,0,.08);
}

.wsdtf-shop,
.wsdtf-shop *{
  box-sizing:border-box;
}

.wsdtf-shop{
  width:min(1420px, calc(100vw - 28px));
  margin:30px auto 46px;
  color:var(--wsdtf-ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  position:relative;
}

.wsdtf-shop:before{
  content:"";
  position:absolute;
  inset:-24px -18px auto -18px;
  height:420px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 16% 10%, rgba(255,212,0,.32), transparent 34%),
    radial-gradient(circle at 90% 24%, rgba(0,0,0,.10), transparent 28%),
    linear-gradient(135deg, #fffdf1 0%, #f7f7f2 52%, #ffffff 100%);
  border-radius:42px;
}

.wsdtf-hero{
  position:relative;
  overflow:hidden;
  min-height:240px;
  padding:42px;
  border-radius:var(--wsdtf-radius-lg);
  background:
    linear-gradient(135deg, rgba(8,8,8,.98) 0%, rgba(21,21,21,.96) 52%, rgba(255,212,0,.94) 100%);
  color:#fff;
  box-shadow:var(--wsdtf-shadow);
  isolation:isolate;
}

.wsdtf-hero:before{
  content:"";
  position:absolute;
  inset:-120px -140px auto auto;
  width:420px;
  height:420px;
  border-radius:50%;
  background:rgba(255,255,255,.20);
  filter:blur(8px);
  z-index:-1;
}

.wsdtf-hero:after{
  content:"DTF";
  position:absolute;
  right:34px;
  bottom:-52px;
  color:rgba(255,255,255,.10);
  font-size:168px;
  line-height:.8;
  font-weight:1000;
  letter-spacing:-.08em;
  z-index:-1;
}

.wsdtf-hero h1{
  margin:0;
  max-width:780px;
  font-size:clamp(2.2rem, 5.2vw, 5.4rem);
  line-height:.92;
  letter-spacing:-.07em;
  font-weight:1000;
}

.wsdtf-hero p{
  margin:20px 0 0;
  max-width:690px;
  color:rgba(255,255,255,.80);
  font-size:clamp(1rem, 1.2vw, 1.2rem);
  line-height:1.55;
}

.wsdtf-rollbadge{
  position:absolute;
  top:34px;
  right:34px;
  min-width:168px;
  padding:18px 20px;
  border-radius:22px;
  color:#111;
  background:linear-gradient(135deg, #ffd400, #ffea80);
  box-shadow:0 18px 42px rgba(255,212,0,.28);
  transform:rotate(2deg);
}

.wsdtf-rollbadge strong{
  display:block;
  font-size:1.18rem;
  font-weight:1000;
  letter-spacing:-.03em;
}

.wsdtf-rollbadge span{
  display:block;
  margin-top:3px;
  font-size:.9rem;
  font-weight:800;
  opacity:.75;
}

.wsdtf-guide{
  margin:24px 0;
  padding:28px;
  border:1px solid rgba(255,212,0,.36);
  border-radius:var(--wsdtf-radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,252,224,.92)),
    radial-gradient(circle at 0 0, rgba(255,212,0,.24), transparent 32%);
  box-shadow:var(--wsdtf-shadow-soft);
}

.wsdtf-guide-head{
  display:grid;
  gap:8px;
}

.wsdtf-guide-badge{
  width:max-content;
  padding:7px 12px;
  border-radius:999px;
  background:#111;
  color:#ffd400;
  font-weight:1000;
  font-size:.76rem;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.wsdtf-guide h2{
  margin:0;
  font-size:clamp(1.35rem, 2vw, 2.15rem);
  letter-spacing:-.045em;
  font-weight:1000;
}

.wsdtf-guide p{
  margin:0;
  max-width:920px;
  color:#4e5059;
  line-height:1.55;
}

.wsdtf-guide-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  margin-top:22px;
}

.wsdtf-guide-card{
  position:relative;
  min-height:150px;
  padding:20px;
  border:1px solid var(--wsdtf-line);
  border-radius:22px;
  background:rgba(255,255,255,.74);
  box-shadow:0 10px 28px rgba(0,0,0,.045);
  overflow:hidden;
}

.wsdtf-guide-card:before{
  content:"";
  position:absolute;
  width:84px;
  height:84px;
  right:-34px;
  top:-34px;
  border-radius:50%;
  background:rgba(255,212,0,.30);
}

.wsdtf-guide-card strong{
  display:block;
  margin-bottom:8px;
  font-weight:1000;
  letter-spacing:-.02em;
}

.wsdtf-guide-card p{
  color:#60636e;
  font-size:.94rem;
}

.wsdtf-guide-check{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:18px;
  padding:14px;
  border-radius:18px;
  background:#111;
  color:#fff;
}

.wsdtf-guide-check b{
  color:#ffd400;
  margin-right:4px;
}

.wsdtf-guide-check span{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.84);
  font-size:.9rem;
  font-weight:800;
}

.wsdtf-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 390px;
  gap:24px;
  align-items:start;
}

.wsdtf-left{
  display:grid;
  gap:24px;
}

.wsdtf-panel,
.wsdtf-summary{
  border:1px solid var(--wsdtf-line);
  border-radius:var(--wsdtf-radius-lg);
  background:rgba(255,255,255,.92);
  box-shadow:var(--wsdtf-shadow-soft);
  backdrop-filter:blur(12px);
}

.wsdtf-panel{
  padding:26px;
}

.wsdtf-panel-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:20px;
}

.wsdtf-panel-head h2,
.wsdtf-summary h2{
  margin:0;
  font-size:clamp(1.35rem, 2vw, 2.15rem);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:1000;
}

.wsdtf-small{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#f5f2dc;
  color:#5e5422;
  font-size:.86rem;
  font-weight:900;
}

.wsdtf-small:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ffd400;
  box-shadow:0 0 0 5px rgba(255,212,0,.20);
}

.wsdtf-add,
.wsdtf-cart,
.wsdtf-confirm-accept,
.wsdtf-confirm-cancel{
  border:0;
  border-radius:18px;
  font-weight:1000;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}

.wsdtf-add{
  padding:13px 18px;
  background:#111;
  color:#ffd400;
  box-shadow:0 12px 26px rgba(0,0,0,.16);
}

.wsdtf-add:hover,
.wsdtf-cart:hover,
.wsdtf-confirm-accept:hover{
  transform:translateY(-2px);
}

.wsdtf-motifs{
  display:grid;
  gap:16px;
}

.wsdtf-motif{
  position:relative;
  border:1px solid rgba(17,17,17,.10);
  border-radius:26px;
  padding:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,250,247,.96));
  box-shadow:0 12px 34px rgba(0,0,0,.06);
  overflow:hidden;
}

.wsdtf-motif:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:#ffd400;
}

.wsdtf-motif-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

.wsdtf-motif-top strong{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:1.02rem;
  font-weight:1000;
  letter-spacing:-.02em;
}

.wsdtf-motif-no{
  display:inline-grid;
  place-items:center;
  min-width:30px;
  height:30px;
  padding:0 9px;
  border-radius:999px;
  background:#111;
  color:#ffd400;
  font-size:.86rem;
}

.wsdtf-remove{
  width:36px;
  height:36px;
  border:0;
  border-radius:999px;
  background:#f1f1ec;
  color:#111;
  cursor:pointer;
  font-size:1.25rem;
  font-weight:900;
}

.wsdtf-remove:hover{
  background:#111;
  color:#ffd400;
}

.wsdtf-fields{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr 130px;
  gap:12px;
  align-items:end;
}

.wsdtf-fields label,
.wsdtf-summary label{
  display:grid;
  gap:7px;
  color:#232323;
  font-weight:900;
  font-size:.88rem;
  letter-spacing:-.01em;
}

.wsdtf-fields input,
.wsdtf-fields select,
.wsdtf-summary select{
  width:100%;
  min-height:48px;
  border:1px solid rgba(17,17,17,.13);
  border-radius:16px;
  padding:0 14px;
  background:#fff;
  color:#111;
  font:inherit;
  font-weight:800;
  outline:none;
  transition:border .16s ease, box-shadow .16s ease, transform .16s ease;
}

.wsdtf-fields input:focus,
.wsdtf-fields select:focus,
.wsdtf-summary select:focus{
  border-color:#ffd400;
  box-shadow:0 0 0 5px rgba(255,212,0,.22);
}

.wsdtf-field-file input{
  padding-top:12px;
  font-weight:800;
}

.wsdtf-hide{
  display:none !important;
}

.wsdtf-motif-foot{
  display:grid;
  grid-template-columns:136px 1fr;
  gap:16px;
  align-items:center;
  margin-top:16px;
}

.wsdtf-thumb{
  width:136px;
  height:136px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(17,17,17,.12);
  border-radius:24px;
  background:
    linear-gradient(45deg, #e9e9e9 25%, transparent 25%),
    linear-gradient(-45deg, #e9e9e9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e9e9e9 75%),
    linear-gradient(-45deg, transparent 75%, #e9e9e9 75%),
    #fff;
  background-size:20px 20px;
  background-position:0 0, 0 10px, 10px -10px, -10px 0;
  color:#777;
  font-size:.82rem;
  font-weight:900;
  text-align:center;
}

.wsdtf-thumb img{
  max-width:100%;
  max-height:100%;
  display:block;
  object-fit:contain;
}

.wsdtf-size-result{
  margin-bottom:8px;
  font-size:1rem;
}

.wsdtf-size-result span{
  color:#747783;
}

.wsdtf-size-result b{
  color:#111;
}

.wsdtf-filemeta{
  color:#737681;
  line-height:1.4;
  font-size:.92rem;
}

.wsdtf-warn{
  margin-top:10px;
  min-height:24px;
  font-size:.9rem;
  font-weight:900;
}

.wsdtf-warn-good,
.wsdtf-warn-mid,
.wsdtf-warn-bad{
  display:inline-flex;
  padding:8px 11px;
  border-radius:999px;
}

.wsdtf-warn-good{background:#eaf8ef;color:#116a32;}
.wsdtf-warn-mid{background:#fff7d5;color:#6e5700;}
.wsdtf-warn-bad{background:#ffecec;color:#9e1d1d;}

.wsdtf-note,
.wsdtf-fineprint{
  margin:16px 0 0;
  color:#737681;
  line-height:1.5;
  font-size:.94rem;
}

.wsdtf-preview-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}

.wsdtf-preview-toolbar span{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:10px 13px;
  border:1px solid rgba(17,17,17,.08);
  border-radius:999px;
  background:#f8f8f4;
  color:#4f5158;
  font-size:.9rem;
}

.wsdtf-preview-toolbar b{
  color:#111;
}

.wsdtf-preview-wrap{
  position:relative;
  height:min(72vh, 780px);
  min-height:520px;
  overflow:auto;
  border:1px solid rgba(17,17,17,.12);
  border-radius:28px;
  background:#fbfbfb;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

.wsdtf-svg{
  display:block;
  width:100%;
  min-height:100%;
}

.wsdtf-empty-preview{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:30px;
  color:#777b86;
  text-align:center;
  font-weight:900;
}

.wsdtf-render-progress{
  display:none;
  margin-bottom:14px;
  padding:14px;
  border-radius:18px;
  background:#111;
  color:#fff;
}

.wsdtf-progress-visible{
  display:block;
}

.wsdtf-render-progress-top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
  font-size:.9rem;
}

.wsdtf-render-progress-track{
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.14);
}

.wsdtf-render-progress-track span{
  display:block;
  height:100%;
  border-radius:999px;
  background:#ffd400;
  transition:width .2s ease;
}

.wsdtf-summary{
  position:sticky;
  top:18px;
  padding:26px;
  overflow:hidden;
}

.wsdtf-summary:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:8px;
  background:linear-gradient(90deg, #111, #ffd400);
}

.wsdtf-summary h2{
  margin-top:4px;
}

.wsdtf-summary label{
  margin-top:18px;
}

.wsdtf-pricebox{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.wsdtf-pricebox > div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:15px;
  border-radius:18px;
  background:#f7f7f2;
  color:#575a63;
}

.wsdtf-pricebox b{
  color:#111;
  font-size:1.02rem;
}

.wsdtf-total{
  background:#111 !important;
  color:#fff !important;
  margin-top:2px;
  padding:20px 16px !important;
}

.wsdtf-total b{
  color:#ffd400 !important;
  font-size:clamp(1.45rem, 2vw, 2rem);
  letter-spacing:-.04em;
}

.wsdtf-status{
  margin-top:16px;
  padding:14px;
  border-radius:18px;
  background:#fff8cf;
  color:#5c4b00;
  font-weight:900;
  line-height:1.45;
}

.wsdtf-cart{
  width:100%;
  margin-top:16px;
  padding:18px 22px;
  background:linear-gradient(135deg, #111 0%, #000 56%, #ffd400 180%);
  color:#ffd400;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  font-size:1.05rem;
}

.wsdtf-cart:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

.wsdtf-brandbar{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:18px;
  padding:14px;
  border-radius:20px;
  background:#111;
  color:#fff;
}

.wsdtf-brandmark{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:15px;
  background:#ffd400;
  color:#111;
  font-weight:1000;
  font-size:1.5rem;
}

.wsdtf-brandbar strong{
  font-size:.96rem;
  line-height:1.12;
  letter-spacing:-.03em;
}

.wsdtf-bg-compare,
.wsdtf-bg-confirm-wrap{
  margin-top:14px;
}

.wsdtf-bg-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.wsdtf-bg-compare > div{
  min-height:140px;
  border-radius:18px;
  border:1px solid rgba(17,17,17,.10);
  background:#fff;
  overflow:hidden;
}

.wsdtf-bg-compare img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.wsdtf-confirm-modal[hidden]{
  display:none;
}

.wsdtf-confirm-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:grid;
  place-items:center;
  padding:22px;
}

.wsdtf-confirm-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(10px);
}

.wsdtf-confirm-box{
  position:relative;
  width:min(560px, 100%);
  padding:32px;
  border-radius:32px;
  background:#fff;
  box-shadow:0 30px 100px rgba(0,0,0,.32);
}

.wsdtf-confirm-x{
  position:absolute;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
  border:0;
  border-radius:999px;
  background:#f2f2ef;
  font-size:1.25rem;
  font-weight:1000;
  cursor:pointer;
}

.wsdtf-confirm-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:20px;
  background:#ffd400;
  color:#111;
  font-size:2rem;
  font-weight:1000;
}

.wsdtf-confirm-box h3{
  margin:0;
  font-size:2rem;
  line-height:1;
  letter-spacing:-.05em;
}

.wsdtf-confirm-box p{
  color:#62656f;
  line-height:1.55;
}

.wsdtf-confirm-list{
  display:grid;
  gap:10px;
  margin:18px 0;
}

.wsdtf-confirm-list span{
  padding:12px 14px;
  border-radius:16px;
  background:#f7f7f2;
  font-weight:900;
}

.wsdtf-confirm-actions{
  display:flex;
  gap:12px;
}

.wsdtf-confirm-cancel,
.wsdtf-confirm-accept{
  flex:1;
  padding:15px 16px;
}

.wsdtf-confirm-cancel{
  background:#f0f0ec;
  color:#111;
}

.wsdtf-confirm-accept{
  background:#111;
  color:#ffd400;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}

html.wsdtf-modal-open{
  overflow:hidden;
}

/* WooCommerce Cart/Checkout DTF meta polish */
.wc-block-components-product-metadata,
.woocommerce-cart-form .variation,
.woocommerce-checkout-review-order-table .variation{
  font-size:.92rem;
}

@media (max-width:1180px){
  .wsdtf-grid{
    grid-template-columns:1fr;
  }
  .wsdtf-summary{
    position:relative;
    top:auto;
  }
  .wsdtf-fields{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:820px){
  .wsdtf-shop{
    width:min(100% - 18px, 1420px);
    margin-top:14px;
  }
  .wsdtf-hero{
    padding:28px;
    min-height:unset;
  }
  .wsdtf-rollbadge{
    position:relative;
    top:auto;
    right:auto;
    margin-top:22px;
    width:max-content;
  }
  .wsdtf-guide-grid{
    grid-template-columns:1fr;
  }
  .wsdtf-panel,
  .wsdtf-summary,
  .wsdtf-guide{
    padding:20px;
    border-radius:26px;
  }
  .wsdtf-fields{
    grid-template-columns:1fr;
  }
  .wsdtf-motif-foot{
    grid-template-columns:1fr;
  }
  .wsdtf-thumb{
    width:100%;
    height:190px;
  }
  .wsdtf-preview-wrap{
    min-height:420px;
    height:64vh;
  }
  .wsdtf-confirm-actions{
    flex-direction:column;
  }
}

@media (max-width:520px){
  .wsdtf-hero h1{
    font-size:2.55rem;
  }
  .wsdtf-hero:after{
    font-size:104px;
  }
  .wsdtf-preview-toolbar span{
    width:100%;
    justify-content:space-between;
  }
}

/* Premium WOW Overlays v1.9.9 */
.wsdtf-shop{width:min(1480px,calc(100vw - 28px));margin-top:24px}
.wsdtf-shop:before{height:560px;background:radial-gradient(circle at 12% 10%,rgba(255,212,0,.46),transparent 28%),radial-gradient(circle at 92% 12%,rgba(255,212,0,.25),transparent 24%),linear-gradient(135deg,#fffbe8 0%,#f8f8f3 55%,#fff 100%)}
.wsdtf-hero{min-height:330px;border-radius:42px;padding:52px;background:linear-gradient(135deg,rgba(0,0,0,.98) 0%,rgba(10,10,10,.98) 48%,rgba(255,212,0,.22) 100%);box-shadow:0 34px 110px rgba(0,0,0,.18)}
.wsdtf-hero:before{background:linear-gradient(90deg,rgba(255,255,255,.065) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 78%)}
.wsdtf-hero:after{content:"WERBESCHWAGGOS";left:42px;right:42px;bottom:-18px;font-size:clamp(3rem,9vw,9.5rem);letter-spacing:-.095em;color:rgba(255,255,255,.055)}
.wsdtf-hero h1{font-size:clamp(2.6rem,5.8vw,6.4rem);letter-spacing:-.085em;max-width:920px}
.wsdtf-panel,.wsdtf-summary,.wsdtf-guide{border-radius:38px;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);box-shadow:0 18px 60px rgba(0,0,0,.10)}
.wsdtf-panel{padding:28px}.wsdtf-grid{grid-template-columns:minmax(0,1fr) 410px;gap:26px}
.wsdtf-motif{border-radius:30px;padding:20px;box-shadow:0 16px 44px rgba(0,0,0,.075)}
.wsdtf-motif:before{background:linear-gradient(#ffd400,#111);width:7px}
.wsdtf-fields input,.wsdtf-fields select,.wsdtf-summary select{border-radius:18px;min-height:50px}
.wsdtf-preview-wrap{border-radius:32px;min-height:550px;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 34px rgba(0,0,0,.05)}
.wsdtf-cart{background:linear-gradient(135deg,#050505,#111 60%,#493c00 100%);box-shadow:0 20px 50px rgba(0,0,0,.25);font-size:1.06rem}
.wsdtf-total{background:#050505!important}.wsdtf-total b{font-size:clamp(1.55rem,2vw,2.15rem)}
@media (max-width:1180px){.wsdtf-grid{grid-template-columns:1fr}}


/* === Werbeschwaggos Premium Polish v2.0.0: Hero + Uploadbereich === */

/* Page headline "DTF Shop" should feel like section label, not default WP title */
.wsdtf-shop{
  --wsdtf-premium-black:#050505;
  --wsdtf-premium-yellow:#ffd400;
  --wsdtf-premium-cream:#fff8d6;
  --wsdtf-premium-grey:#f3f3ef;
}

/* HERO: less muddy, more Werbeschwaggos, readable and premium */
.wsdtf-hero{
  min-height:360px !important;
  padding:58px 58px 48px !important;
  border-radius:44px !important;
  background:
    radial-gradient(circle at 83% 34%, rgba(255,212,0,.56), transparent 23%),
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.16), transparent 22%),
    linear-gradient(135deg, #030303 0%, #0a0a0a 46%, #1b1a10 72%, #f6d64d 140%) !important;
  box-shadow:0 36px 110px rgba(0,0,0,.20) !important;
}

.wsdtf-hero:before{
  opacity:.92 !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.055) 1px,transparent 1px) !important;
  background-size:46px 46px !important;
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.65) 48%,transparent 84%) !important;
}

.wsdtf-hero:after{
  content:"WERBESCHWAGGOS" !important;
  left:52px !important;
  bottom:-30px !important;
  font-size:clamp(3.4rem,8.6vw,9.4rem) !important;
  color:rgba(255,255,255,.072) !important;
  text-shadow:none !important;
}

.wsdtf-hero h1{
  position:relative !important;
  max-width:780px !important;
  color:#fff !important;
  font-size:clamp(2.8rem,5.3vw,6.0rem) !important;
  line-height:.88 !important;
  letter-spacing:-.085em !important;
  text-shadow:0 18px 52px rgba(0,0,0,.55) !important;
  z-index:2 !important;
}

.wsdtf-hero h1::first-line{
  color:#fff;
}

.wsdtf-hero p{
  position:relative !important;
  z-index:2 !important;
  max-width:660px !important;
  color:rgba(255,255,255,.86) !important;
  font-size:clamp(1.05rem,1.2vw,1.22rem) !important;
  line-height:1.58 !important;
  text-shadow:0 12px 30px rgba(0,0,0,.45) !important;
}

.wsdtf-rollbadge{
  top:36px !important;
  right:36px !important;
  width:188px !important;
  padding:20px 18px !important;
  border-radius:24px !important;
  background:linear-gradient(135deg,#ffd400 0%,#fff0a1 100%) !important;
  box-shadow:0 22px 54px rgba(255,212,0,.30), inset 0 1px 0 rgba(255,255,255,.65) !important;
  transform:rotate(1.8deg) !important;
}

/* Section header: create a proper premium shop heading */
.wsdtf-panel-head{
  padding:0 2px 4px !important;
  align-items:center !important;
}

.wsdtf-panel-head h2{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  font-size:clamp(1.75rem,2.7vw,3rem) !important;
  letter-spacing:-.075em !important;
}

.wsdtf-panel-head h2:before{
  content:"";
  width:12px;
  height:44px;
  border-radius:999px;
  background:#ffd400;
  box-shadow:0 10px 24px rgba(255,212,0,.35);
}

/* Add button: more refined */
.wsdtf-add{
  min-height:56px !important;
  padding:0 24px !important;
  border-radius:22px !important;
  background:linear-gradient(135deg,#050505 0%,#151515 100%) !important;
  color:#ffd400 !important;
  box-shadow:0 18px 44px rgba(0,0,0,.18) !important;
}

.wsdtf-add:hover{
  color:#050505 !important;
  background:linear-gradient(135deg,#ffd400 0%,#ffe98a 100%) !important;
  box-shadow:0 18px 46px rgba(255,212,0,.30) !important;
}

/* Upload panel/card: clear, premium, less "standard form" */
.wsdtf-panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.86)),
    radial-gradient(circle at 100% 0%,rgba(255,212,0,.12),transparent 30%) !important;
  border:1px solid rgba(0,0,0,.08) !important;
}

.wsdtf-motif{
  border-radius:34px !important;
  padding:26px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,250,246,.96)) !important;
  border:1px solid rgba(0,0,0,.085) !important;
  box-shadow:0 22px 62px rgba(0,0,0,.085) !important;
}

.wsdtf-motif:before{
  width:8px !important;
  background:linear-gradient(180deg,#ffd400 0%,#ffd400 52%,#050505 100%) !important;
}

.wsdtf-motif-top{
  margin-bottom:20px !important;
}

.wsdtf-motif-top strong{
  font-size:1.22rem !important;
  letter-spacing:-.04em !important;
}

.wsdtf-motif-no{
  min-width:34px !important;
  height:34px !important;
  margin-left:4px !important;
  background:#050505 !important;
  color:#ffd400 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}

/* Delete button: centered X + yellow hover */
.wsdtf-remove{
  display:grid !important;
  place-items:center !important;
  width:56px !important;
  height:40px !important;
  padding:0 !important;
  border-radius:999px !important;
  background:#efefea !important;
  color:#111 !important;
  font-size:0 !important;
  line-height:1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75) !important;
}

.wsdtf-remove::before{
  content:"×";
  display:block;
  font-size:23px;
  line-height:1;
  font-weight:1000;
  transform:translateY(-1px);
}

.wsdtf-remove:hover{
  background:#ffd400 !important;
  color:#050505 !important;
  box-shadow:0 14px 34px rgba(255,212,0,.35) !important;
  transform:translateY(-1px) scale(1.03) !important;
}

/* Field layout stronger and cleaner */
.wsdtf-fields{
  gap:16px !important;
}

.wsdtf-fields label{
  color:#151515 !important;
  font-size:.92rem !important;
  font-weight:1000 !important;
  letter-spacing:-.018em !important;
}

.wsdtf-fields input,
.wsdtf-fields select{
  min-height:56px !important;
  border-radius:20px !important;
  border:1px solid rgba(0,0,0,.11) !important;
  background:#fff !important;
  box-shadow:0 6px 18px rgba(0,0,0,.035) !important;
}

.wsdtf-fields input:hover,
.wsdtf-fields select:hover{
  border-color:rgba(0,0,0,.22) !important;
}

.wsdtf-fields input:focus,
.wsdtf-fields select:focus{
  border-color:#ffd400 !important;
  box-shadow:0 0 0 5px rgba(255,212,0,.24),0 10px 24px rgba(0,0,0,.06) !important;
}

.wsdtf-field-file input{
  padding-top:15px !important;
}

/* Thumbnail more product-like */
.wsdtf-motif-foot{
  grid-template-columns:162px 1fr !important;
  gap:22px !important;
  margin-top:20px !important;
}

.wsdtf-thumb{
  width:162px !important;
  height:162px !important;
  border-radius:28px !important;
  border:1px solid rgba(0,0,0,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 30px rgba(0,0,0,.06) !important;
}

.wsdtf-thumb span,
.wsdtf-thumb{
  font-weight:1000 !important;
}

.wsdtf-size-result{
  padding:12px 16px !important;
  width:max-content !important;
  max-width:100% !important;
  border-radius:999px !important;
  background:#050505 !important;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(0,0,0,.16) !important;
}

.wsdtf-size-result span{
  color:#ffd400 !important;
  font-weight:1000 !important;
}

.wsdtf-size-result b{
  color:#fff !important;
}

.wsdtf-filemeta{
  margin-top:10px !important;
  font-size:.98rem !important;
  color:#666b76 !important;
}

.wsdtf-note{
  margin-top:20px !important;
  padding:14px 16px !important;
  border-radius:20px !important;
  background:rgba(255,212,0,.12) !important;
  border:1px solid rgba(255,212,0,.28) !important;
  color:#4f4f4f !important;
}

@media (max-width:820px){
  .wsdtf-hero{padding:34px 28px !important;min-height:300px !important}
  .wsdtf-motif{padding:22px !important}
  .wsdtf-motif-foot{grid-template-columns:1fr !important}
  .wsdtf-thumb{width:100% !important;height:190px !important}
  .wsdtf-remove{width:48px !important;height:40px !important}
}


/* v2.0.1 hero cleanup: remove large grey background word */
.wsdtf-hero:after{content:none !important; display:none !important;}


/* v2.1.2 Live Preview Fix */
.wsdtf-svg image,
.wsdtf-svg use {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline !important;
}
.wsdtf-svg g:hover rect {
  stroke: #ffd400 !important;
  stroke-opacity: .95 !important;
  stroke-width: 1.1 !important;
}


/* v2.2.0 Final Launch – Browser/Cart/Mobile Hardening */
.wsdtf-wc-page-fallback{
  width:min(1200px, calc(100vw - 28px));
  margin:32px auto;
}
.wsdtf input[type="file"]{
  max-width:100%;
}
.wsdtf-svg{
  touch-action: pan-y pinch-zoom;
}
@media (max-width: 980px){
  .wsdtf-shop,
  .wsdtf{
    width:min(100%, calc(100vw - 18px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .wsdtf-hero{
    grid-template-columns:1fr !important;
    padding:26px 20px !important;
    min-height:auto !important;
  }
  .wsdtf-hero h1{
    font-size:clamp(42px, 12vw, 78px) !important;
    line-height:.88 !important;
    letter-spacing:-.07em !important;
  }
  .wsdtf-rollbadge{
    position:relative !important;
    right:auto !important;
    top:auto !important;
    width:max-content !important;
    max-width:100% !important;
    transform:none !important;
    margin-top:18px !important;
  }
  .wsdtf-layout,
  .wsdtf-grid,
  .wsdtf-main,
  .wsdtf-columns,
  .wsdtf-config{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  .wsdtf-price,
  .wsdtf-sidebar,
  .wsdtf-summary,
  .wsdtf-live-price{
    position:relative !important;
    top:auto !important;
    width:100% !important;
    max-width:none !important;
  }
  .wsdtf-motif{
    padding:18px !important;
  }
  .wsdtf-motif-row,
  .wsdtf-fields,
  .wsdtf-upload-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .wsdtf input,
  .wsdtf select,
  .wsdtf textarea,
  .wsdtf button{
    min-height:48px;
    font-size:16px !important;
  }
  .wsdtf-preview-wrap,
  .wsdtf-preview,
  .wsdtf-svg-wrap{
    max-height:70vh !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .wsdtf-svg{
    min-width:320px;
  }
}
@media (max-width: 540px){
  .wsdtf-shop,
  .wsdtf{
    width:100% !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .wsdtf-hero{
    border-radius:24px !important;
  }
  .wsdtf-hero h1{
    font-size:clamp(38px, 15vw, 58px) !important;
  }
  .wsdtf-guide,
  .wsdtf-card,
  .wsdtf-panel,
  .wsdtf-motif,
  .wsdtf-live-price{
    border-radius:22px !important;
  }
  .wsdtf-guide-grid{
    grid-template-columns:1fr !important;
  }
  .wsdtf-actions,
  .wsdtf-buttons{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .wsdtf-add,
  .wsdtf-btn,
  .wsdtf button{
    width:100% !important;
  }
}

/* v2.2.1 Safe SVG + direct cart/checkout rendering */
.wsdtf-wc-direct .woocommerce{width:100%;}

/* v2.2.2 Mixed nesting: motivübergreifende Reihenfüllung */

/* v2.2.3 MaxRects nesting: freie Rechtecke werden konsequent gefüllt */

/* v2.2.4 DHL address helper in internal tracking flow */

/* v2.2.5 DTF service visible in tracking/DHL workflow */

/* v2.2.6 Einzel-Upload-Staging und technische Fehlerbenachrichtigung */

/* v2.2.7: Race-condition Fix für parallele Einzel-Uploads, idempotente Upload-Wiederholung */

/* v2.2.8: Produktionsmail link-first, sichere Downloads statt toter wp-content-PNG-Links */