:root{
    --ink:#0e1220;
    --ink-soft:#4a5068;
    --line:#e6e8f0;
    --paper:#ffffff;
    --bg:#f7f8fc;
    --brand:#1dbf73;
    --brand-dark:#169c5f;
    --accent:#7b2ff7;
    --accent-2:#ff5b83;
    --star:#ffb800;
    --radius:14px;
    --shadow:0 10px 30px -12px rgba(20,20,50,.15);
    --font-head:'Poppins',sans-serif;
    --font-body:'Inter',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
 
  /* ---------- Promo strip ---------- */
  .promo{background:linear-gradient(90deg,#eef1ff,#f6ecff);border-bottom:1px solid var(--line)}
  .promo-inner{display:flex;align-items:center;gap:14px;padding:12px 0;flex-wrap:wrap}
  .promo-ico{width:34px;height:34px;border-radius:8px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
  .promo-text{font-size:14px;color:var(--ink-soft)}
  .promo-text b{color:var(--ink)}
  .btn-promote{margin-left:auto;background:var(--brand);color:#fff;border:none;padding:9px 18px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer}

  /* ---------- Breadcrumb ---------- */
  .crumb{padding:16px 0 8px;font-size:13px;color:var(--ink-soft);display:flex;;align-items:center}
  .crumb span{    margin-left: 6px;margin-right: 3px;}
  .crumb a{color:var(--ink-soft)}
  .crumb a:hover{color:var(--accent)}
  .crumb .cur{color:var(--ink);font-weight:600}
  .edit-gig{font-size:13px;font-weight:600;color:var(--accent);border:1px solid var(--line);padding:6px 12px;border-radius:8px}

  /* ---------- Layout grid ---------- */
  .gig-grid{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:start;padding-bottom:40px}
  @media(max-width:960px){.gig-grid{grid-template-columns:1fr}}

  /* ---------- Title / seller mini ---------- */
  .gig-title{font-size:26px;font-weight:600;margin-bottom:14px;max-width:640px}
  .seller-mini{display:flex;align-items:center;gap:10px;margin-bottom:18px}
  .seller-mini img{width:36px;height:36px;border-radius:50%;object-fit:cover}
  .seller-mini .name{font-weight:600;font-size:14px}
  .seller-mini .lvl{font-size:12px;color:var(--ink-soft)}
  .rating{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--ink)}
  .rating .stars{color:var(--star)}
  .rating .count{color:var(--ink-soft);font-weight:400}
  .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-soft)}

  /* ---------- Gallery ---------- */
  .gallery{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
  .gallery-main{
    aspect-ratio:16/9;
    background:linear-gradient(135deg,#7b2ff7 0%,#ff5b83 55%,#ffb800 100%);
    color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;overflow:hidden;
  }
  .gallery-main img { height: 100%; width: 100%; object-fit: cover;}
button.thumb img { height: 100%; width: 100%; object-fit: cover; }
  .gallery-main .tag{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);padding:5px 14px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
  .gallery-main h2{font-size:clamp(28px,4vw,44px);line-height:1.05;max-width:520px}
  .gallery-main .sub{margin-top:10px;font-size:14px;opacity:.9;max-width:420px}
  .gnav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:rgba(255,255,255,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;font-size: 20px;color:var(--ink);border:none}
  .gnav.prev{left:14px}.gnav.next{right:14px}
  .gdots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
  .gdots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5)}
  .gdots span.active{background:#fff;width:18px;border-radius:3px}
  .thumbs{display:flex;gap:8px;margin-top:10px}
  .thumbs div{flex:1;aspect-ratio:1;border-radius:8px;background:#eee;border:2px solid transparent;cursor:pointer;overflow:hidden}
  .thumbs div.active{border-color:var(--accent)}

  .gdots { display:flex; gap:6px; justify-content:center; margin-top:8px; }
.gdot { width:8px; height:8px; border-radius:50%; background:#ccc; cursor:pointer; }
.gdot.active { background:#000; }

  /* ---------- About gig ---------- */
  .section{padding:28px 0;border-top:1px solid var(--line)}
  .section h3{font-size:19px;margin-bottom:14px}
  .prose p{color:var(--ink-soft);margin-bottom:12px;font-size:14.5px}
  .prose b{color:var(--ink)}
  .feature-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin:14px 0 22px}
  .feature-list li{font-size:14px;color:var(--ink-soft);padding-left:22px;position:relative}
  .feature-list li:before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700}
  @media(max-width:560px){.feature-list{grid-template-columns:1fr}}
  .meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px}
  @media(max-width:700px){.meta-grid{grid-template-columns:1fr 1fr}}
  .meta-grid h4{font-size:13px;margin-bottom:8px;color:var(--ink)}
  .meta-grid .chips{display:flex;flex-wrap:wrap;gap:6px}
  .meta-grid .chips span{font-size:12px;background:var(--paper);border:1px solid var(--line);padding:5px 10px;border-radius:7px;color:var(--ink-soft)}
  p.au-contact {padding: 0;margin: 0;font-size: 14px;}
  /* ---------- Seller card (about-the-seller block) ---------- */
  .seller-card{border-top:1px solid var(--line);padding:28px 0;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:start}
  @media(max-width:700px){.seller-card{grid-template-columns:1fr}}
  .seller-card .avatar{width:64px;height:64px;border-radius:50%;object-fit:cover}
  .seller-card h4{font-size:16px;margin-bottom:4px}
  .seller-card .online{display:inline-block;font-size:11px;background:#e7fbef;color:var(--brand-dark);padding:2px 8px;border-radius:6px;margin-left:8px;vertical-align:middle}
  .stats-row{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap;    margin-bottom: 14px;}
  .stats-row div{font-size:12.5px;color:var(--ink-soft)}
  .stats-row b{display:block;color:var(--ink);font-size:14px}
  .btn-outline{border:1px solid var(--ink);padding:9px 22px;border-radius:8px;font-weight:600;font-size:14px;background:none;cursor:pointer;height:fit-content}
.seller-bio {    border: 1px solid #ddd;    padding: 20px;}
.seller-bio p, .seller-bio b, .seller-bio div {    color: #666;}
.stats-row div {
    width: 48%;
}
  /* ---------- Portfolio ---------- */
  .portfolio-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper);box-shadow:var(--shadow);display:grid;grid-template-columns:280px 1fr;max-width:640px}
  @media(max-width:560px){.portfolio-card{grid-template-columns:1fr}}
  .portfolio-card .thumb{background:linear-gradient(135deg,#7b2ff7,#ff5b83);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:13px;text-align:center;padding:14px}
  .portfolio-card .info{padding:16px}
  .portfolio-card .info .date{font-size:11px;color:var(--ink-soft)}
  .portfolio-card .info h4{font-size:15px;margin:4px 0 6px}
  .portfolio-card .info p{font-size:13px;color:var(--ink-soft);margin-bottom:10px}
  .portfolio-card .info .row{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:10px}
  .portfolio-strip{display:flex;gap:8px;margin-top:14px}
  .portfolio-strip div{width:64px;height:64px;border-radius:8px;background:#eee;flex:none}
  .portfolio-strip .more{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-soft);font-weight:600;background:var(--paper);border:1px dashed var(--line)}

  /* ---------- Compare packages ---------- */
  .pkg-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:10px}
  .pkg-table th,.pkg-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:center}
  .pkg-table td:first-child,.pkg-table th:first-child{text-align:left;font-weight:600;color:var(--ink-soft);width:34%}
  .pkg-table thead th{background:var(--paper)}
  .pkg-table thead .price{font-size:20px;font-weight:700;display:block}
  .pkg-table thead .plan{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);display:block;margin-top:2px}
  .pkg-table .check{color:var(--brand);font-weight:700}
  .pkg-table .dash{color:#c7c9d6}
  .pkg-table .select-btn{background:var(--ink);color:#fff;border:none;padding:8px 20px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer}
  .pkg-scroll{overflow-x:auto}
  @media(max-width:700px){.pkg-table{min-width:640px}}

  /* ---------- FAQ ---------- */
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-q{width:100%;text-align:left;background:none;border:none;padding:16px 4px;font-size:14.5px;font-weight:600;display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:var(--ink)}
  .faq-q:after{content:"+";font-size:20px;color:var(--ink-soft);transition:transform .2s}
  .faq-item.open .faq-q:after{content:"–"}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:13.5px;color:var(--ink-soft)}
  .faq-item.open .faq-a{max-height:200px;padding-bottom:16px}

  /* ---------- Reviews ---------- */
  .review-summary{display:flex;align-items:center;gap:10px;margin-bottom:20px}
  .review-summary .big{font-size:22px;font-weight:700}
  .review-item{border-top:1px solid var(--line);padding:20px 0;display:flex;gap:14px}
  .review-item img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none}
  .review-item .name{font-weight:600;font-size:14px}
  .review-item .subline{font-size:12px;color:var(--ink-soft);margin:2px 0 8px}
  .review-item p{font-size:13.5px;color:var(--ink-soft)}
  .star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
  .star-input input { display: none; }
  .star-input label { font-size: 24px; color: #ccc; cursor: pointer; }
  .star-input input:checked ~ label,
  .star-input label:hover,
  .star-input label:hover ~ label { color: gold; }

  /* ---------- Related tags ---------- */
  .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
  .tags span{font-size:12.5px;border:1px solid var(--line);padding:6px 12px;border-radius:999px;color:var(--ink-soft);background:var(--paper)}

  /* ---------- More from seller ---------- */
  .more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:16px}
  @media(max-width:900px){.more-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.more-grid{grid-template-columns:1fr}}
  .mini-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
  .mini-card .thumb{aspect-ratio:4/3;background:linear-gradient(135deg,#0e1220,#3a3f63);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;text-align:center;padding:12px}
  .mini-card .body{padding:12px}
  .mini-card .body h5{font-size:13px;margin-bottom:6px;font-weight:500;line-height:1.3}
  .mini-card .from{font-size:13px;font-weight:700;margin-top:6px}

  /* ---------- Sidebar (pricing box) ---------- */
  .price-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);position:sticky;top:20px}
  .price-tabs{display:flex;border-bottom:1px solid var(--line)}
  .price-tabs button{flex:1;padding:14px 0;background:none;border:none;font-weight:600;font-size:13.5px;color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent}
  .price-tabs button.active{color:var(--ink);border-color:var(--ink)}
  .price-body{padding:20px}
  .price-body .amount{font-size:24px;font-weight:700;margin-bottom:2px}
  .price-body .save{font-size:12px;color:var(--brand-dark);margin-bottom:12px}
  .price-body .pname{font-weight:600;font-size:14px;margin-bottom:6px}
  .price-body .pdesc{font-size:13px;color:var(--ink-soft);margin-bottom:14px}
  .price-body .facts{display:flex;gap:16px;font-size:12.5px;color:var(--ink-soft);margin-bottom:16px}
  .btn-continue{width:100%;background:var(--ink);color:#fff;border:none;padding:13px;border-radius:9px;font-weight:600;font-size:14.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
  .btn-contact{width:100%;border:1px solid var(--line);background:none;padding:11px;border-radius:9px;font-weight:600;font-size:13.5px;margin-top:10px;cursor:pointer}
  .hourly-card{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;gap:10px;align-items:center}
  .hourly-card img{width:34px;height:34px;border-radius:50%}
  .hourly-card .txt{font-size:12.5px}
  .hourly-card .txt b{display:block;font-size:13.5px}
  .hourly-card a{color:var(--accent);font-weight:600;font-size:12px}

 

  .section h3 .req{font-weight:400}

.price-box {
    overflow: hidden;
}

.price-body {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.price-body.changing {
    opacity: 0;
    transform: translateX(-30px);
}
h3.author-title {
    font-size: 16px;
    color: #666;
    font-weight: 500;
}