/*
Theme Name: ListHub
Theme URI: https://example.com/listhub
Author: ListHub
Author URI: https://example.com
Description: A free classified ads directory theme with home, post-ad, and success page templates.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: listhub
*/



  /* ===== Shared / Home page styles ===== */

  :root{
    /* ---- palette v2: mixed jewel tones (forest, terracotta, navy, gold) ---- */
    --text: #23301F;
    --accent: #B5502E;       /* terracotta — primary CTA/link */
    --accent-dark: #8A3D22;
    --accent-deep: #5C2A17;
    --forest: #2F4A3C;       /* secondary — headings/icons */
    --forest-deep: #1E332A;
    --navy: #23395B;         /* tertiary — ad titles/highlights */
    --gold: #C9A227;         /* highlight — badges/dividers */
    --muted: #565B4F;
    --alert: #7A2436;
    --bg-page-1: #FFFFFF;
    --bg-page-2: #FFFFFF;
    --white: #FFFFFF;

    --font-body: "EB Garamond", Georgia, "Times New Roman", serif;
    /* ---- type scale (used everywhere instead of one-off px values) ---- */
    --fs-badge: 12px;
    --fs-2xs: 13px;   /* ad meta, footer */
    --fs-xs: 14px;    /* captions, category links, secondary nav */
    --fs-sm: 16px;    /* buttons */
    --fs-body: 17px;  /* base copy, form fields */
    --fs-md: 19px;    /* ad titles, CTA button, H3 sub-headings */
    --fs-lg: 22px;    /* logo, H2 section headings */
    --fs-xl: 27px;    /* H1 hero heading */

    /* ---- spacing scale (4px base unit) ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 16px;

    --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
    --shadow-card: 0 1px 2px rgba(47,74,60,.07), 0 4px 14px rgba(47,74,60,.08);
    --shadow-card-hover: 0 6px 20px rgba(47,74,60,.15);
    --surface: #FFFFFF;
    --border-soft: #E4D9B9;
    --gap-grid: 6px;
    --content-max: 1096px; /* ~80% of 1366px capture */
    --ease: cubic-bezier(.2,.7,.3,1);
  }

  /* ---------- unified heading hierarchy (home page) ----------
     H1 = 24px (page title, once per page)
     H2 = 20px (major section headings)
     H3 = 18px (sub-headings inside a section, e.g. category groups)
  */

  *{ box-sizing: border-box; }
  html{ scroll-behavior:smooth; }
  input, select, button, textarea{ font-family: inherit; }
  body{
    margin:0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--text);
    background: var(--bg-page-2);
  }
  a{ color: var(--accent); text-decoration:none; transition: color .15s var(--ease); }
  a:hover{ text-decoration: underline; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
    outline: 2px solid var(--accent); outline-offset: 2px;
  }

  .wrap{ max-width: var(--content-max); margin: 0 auto; padding: var(--space-5) var(--space-4) 0; }

  /* ---------- header ---------- */
  header.site-header{
    display:flex; align-items:center; justify-content:space-between;
    gap: var(--space-4); padding: var(--space-4) 0 var(--space-6); margin-bottom: var(--space-2); flex-wrap:wrap;
    border-bottom: 1px solid var(--border-soft);
  }
  .logo{ display:flex; align-items:center; gap: var(--space-3); }
  .logo-mark{
    width:44px; height:44px; border-radius: var(--radius-md);
    background: linear-gradient(135deg,var(--forest),var(--accent));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size: var(--fs-lg);
    box-shadow: 0 4px 12px rgba(47,74,60,.35);
    transition: transform .2s var(--ease);
  }
  .logo:hover .logo-mark{ transform: rotate(-6deg) scale(1.05); }
  .logo-text{ font-weight:700; font-size: var(--fs-lg); color: var(--text); letter-spacing:.2px; }
  .logo-text span{ color: var(--accent); }
  .header-nav{ font-size: var(--fs-xs); color: var(--muted); text-align:right; }
  .header-nav .links{ margin-top: var(--space-1); font-size: var(--fs-body); font-weight:600; }
  .header-nav .links a{
    margin-left: var(--space-3); padding-bottom:2px; border-bottom:2px solid transparent;
    transition: border-color .15s var(--ease);
  }
  .header-nav .links a:hover{ border-color: var(--accent); text-decoration:none; }

  /* ---------- layout grid ---------- */
  .layout{
    display:grid;
    grid-template-columns: 200px minmax(0,1fr);
    gap: var(--space-7);
    align-items:start;
  }

  /* ---------- sidebar ---------- */
  .sidebar{ position:sticky; top: var(--space-4); }
  .btn{
    display:block; width:100%; text-align:center;
    background: var(--accent); color: var(--white);
    border:none; border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4); font: 600 var(--fs-sm) var(--font-body);
    cursor:pointer; box-shadow: 0 2px 8px rgba(181,80,46,.28);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
  }
  .btn + .btn{ margin-top: var(--space-2); }
  .btn:hover{
    background: var(--accent-dark); text-decoration:none;
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(181,80,46,.38);
  }
  .btn:active{ transform: translateY(0); }

  .sidebox{
    margin-top: var(--space-5); background: var(--surface); border:1px solid var(--border-soft);
    border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-card);
  }
  .sidebox h3{
    font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.06em;
    color: var(--muted); margin: 0 0 var(--space-3);
  }
  .search-box .field{ position:relative; margin-bottom: var(--space-3); }
  .search-box .field svg{
    position:absolute; left: var(--space-3); top:50%; transform:translateY(-50%);
    width:16px; height:16px; color: var(--muted); pointer-events:none;
  }
  .search-box input[type="search"]{
    width:100%; padding: var(--space-2) var(--space-3) var(--space-2) 32px; font-size: var(--fs-body); color: var(--text);
    border:1px solid #d8cfa9; border-radius: 6px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  }
  .search-box input[type="search"]:focus{
    border-color: var(--accent); outline:none;
    box-shadow: 0 0 0 3px rgba(181,80,46,.15);
  }
  .search-box select{
    width:100%; padding: var(--space-2) 30px var(--space-2) var(--space-3); font-size: var(--fs-body); color: var(--text);
    border:1px solid #d8cfa9; border-radius:6px; background:#fff;
    appearance:none; -webkit-appearance:none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323301F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat; background-position: right 9px center; background-size:15px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  }
  .search-box select:focus{
    border-color: var(--accent); outline:none;
    box-shadow: 0 0 0 3px rgba(181,80,46,.15);
  }

  .new-sites h3{ text-align:left; }
  .new-sites ul{ list-style:none; margin:0; padding:0; }
  .new-sites li{ margin-bottom: var(--space-2); font-size: var(--fs-xs); }
  .new-sites li a{ font-weight:600; }
  .new-sites li.dim a{ font-weight:400; color: var(--text); }
  .new-sites li a:hover{ padding-left:3px; }

  /* ---------- main content ---------- */
  main{ min-width:0; }
  .intro{
    background: var(--surface); border:1px solid var(--border-soft);
    border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-7);
    box-shadow: var(--shadow-card); position:relative; overflow:hidden;
  }
  .intro::before{
    content:""; position:absolute; inset:0 0 auto 0; height:4px;
    background: linear-gradient(90deg, var(--forest), var(--gold), var(--accent));
  }
  .intro h1{ font-size: var(--fs-xl); font-weight:700; line-height:1.4; margin:0 0 var(--space-4); color:var(--accent-deep); }
  .intro h2{ font-size: var(--fs-lg); font-weight:700; color: var(--forest-deep); margin: var(--space-6) 0 var(--space-3); }
  .intro > p{ margin:0 0 var(--space-3); color: var(--text); }
  .intro ul{ margin:0 0 var(--space-2); padding-left:0; list-style:none; }
  .intro li{
    margin-bottom: var(--space-2); padding-left:24px; position:relative;
  }
  .intro li strong{ color: var(--forest-deep); }
  .intro li::before{
    content:"✓"; position:absolute; left:0; top:0;
    color: var(--accent); font-weight:700;
  }
  .cta-line{ margin: var(--space-5) 0 0; }
  .cta-btn{
    display:inline-flex; align-items:center; gap: var(--space-2);
    background: linear-gradient(135deg,var(--accent),var(--gold));
    color:#fff; font-weight:700; font-size: var(--fs-md);
    padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm);
    box-shadow: 0 4px 14px rgba(181,80,46,.35);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  }
  .cta-btn:hover{
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(181,80,46,.42);
    text-decoration:none;
  }
  .cta-btn svg{ width:14px; height:14px; transition: transform .15s var(--ease); }
  .cta-btn:hover svg{ transform: translateX(3px); }

  /* category grid */
  .categories-intro{ margin-bottom: var(--space-7); }
  .categories-intro h2{ font-size: var(--fs-lg); font-weight:700; color: var(--accent-deep); margin:0 0 var(--space-3); }
  .categories-intro p{ margin:0; color: var(--text); }
  .categories{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-7);
  }
  .cat-group{
    background: var(--surface); border:1px solid var(--border-soft);
    border-radius: var(--radius-md); padding: var(--space-5);
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s var(--ease), transform .2s var(--ease);
  }
  .cat-group:hover{ box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
  .cat-group h3{
    display:flex; align-items:center; gap: var(--space-2);
    font-size: var(--fs-md); font-weight:600; color: var(--forest-deep); margin:0 0 var(--space-3);
    padding-bottom: var(--space-2); border-bottom:1px solid var(--border-soft);
  }
  .cat-group h3:not(:first-child){ margin-top: var(--space-5); }
  .cat-group h3 .folder-chip{
    width:22px; height:22px; border-radius:6px; flex:none;
    background: linear-gradient(135deg,#E6EDE3,#CFE0C7);
    display:flex; align-items:center; justify-content:center;
  }
  .cat-group h3 .folder{ width:12px; height:12px; color: var(--forest); }
  .cat-group ul{ list-style:none; margin:0; padding:0; }
  .cat-group li{ margin-bottom: var(--space-2); }
  .cat-group li a{
    color: var(--text); font-size: var(--fs-xs); display:inline-block;
    transition: color .15s var(--ease), transform .15s var(--ease);
  }
  .cat-group li a:hover{ color: var(--accent); transform: translateX(2px); text-decoration:none; }

  /* featured ads */
  .featured{
    background: var(--surface); border:1px solid var(--border-soft);
    border-radius: var(--radius-lg); padding: var(--space-6);
    margin-bottom: var(--space-7);
    box-shadow: var(--shadow-card);
  }
  .featured-heading{ display:flex; align-items:center; gap: var(--space-2); margin-bottom: var(--space-2); }
  .featured-heading h2{ margin:0; font-size: var(--fs-lg); font-weight:700; color: var(--text); }
  .badge{
    background: var(--alert); color:#fff; font-size: var(--fs-badge); font-weight:700;
    letter-spacing:.08em; padding:3px 7px; border-radius:4px;
  }
  .ad-card{
    display:flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom:1px solid var(--border-soft);
    border-radius: var(--radius-sm); transition: background .15s var(--ease);
  }
  .ad-card:last-child{ border-bottom:none; }
  .ad-card:hover{ background: var(--bg-page-1); }
  .ad-thumb{
    width:64px; height:64px; border-radius: var(--radius-md); flex:none;
    background: repeating-linear-gradient(45deg,#f3f4f6,#f3f4f6 6px,#e5e7eb 6px,#e5e7eb 12px);
  }
  .ad-title{ font-weight:700; color: var(--navy); font-size: var(--fs-md); margin:0 0 var(--space-1); }
  .ad-title a{ color:inherit; }
  .ad-meta{ color: var(--muted); font-size: var(--fs-2xs); margin:0; }

  /* ---------- browse ads (archive-listing.php) ---------- */
  .ad-grid{
    background: var(--surface); border:1px solid var(--border-soft);
    border-radius: var(--radius-lg); padding: var(--space-6);
    box-shadow: var(--shadow-card); margin-bottom: var(--space-6);
  }
  .ad-card-link{ text-decoration:none; color:inherit; }
  .ad-card-link:hover .ad-title{ color: var(--accent); }
  .ad-thumb img{ width:100%; height:100%; object-fit:cover; border-radius: var(--radius-md); }
  .ad-price{ font-weight:700; color: var(--accent-deep); font-size: var(--fs-body); margin: var(--space-1) 0 0; }
  .pagination{ display:flex; justify-content:center; gap: var(--space-2); flex-wrap:wrap; }
  .pagination a, .pagination span{
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    border:1px solid var(--border-input); font-size: var(--fs-xs); color: var(--text);
  }
  .pagination .current{ background: var(--accent); color:#fff; border-color: var(--accent); }
  .pagination a:hover{ border-color: var(--accent); text-decoration:none; }
  .empty-state{
    text-align:center; background: var(--surface); border:1px solid var(--border-soft);
    border-radius: var(--radius-lg); padding: var(--space-7); box-shadow: var(--shadow-card);
  }
  .empty-state p{ color: var(--muted); margin-bottom: var(--space-4); }

  /* ---------- single ad detail (single-listing.php) ---------- */
  .ad-detail{
    background: var(--surface); border:1px solid var(--border-soft);
    border-radius: var(--radius-lg); padding: var(--space-6);
    box-shadow: var(--shadow-card);
  }
  .ad-gallery{ display:flex; gap: var(--space-3); flex-wrap:wrap; margin-bottom: var(--space-5); }
  .ad-gallery-item{ border-radius: var(--radius-md); overflow:hidden; }
  .ad-gallery-item img{ display:block; width:100%; height:auto; }
  .ad-gallery-item.main{ flex-basis:100%; }
  .ad-gallery-item:not(.main){ flex:1 1 140px; max-width:180px; }
  .ad-detail-head h1{ font-size: var(--fs-xl); font-weight:700; color: var(--forest-deep); margin:0 0 var(--space-2); }
  .ad-detail-price{ font-size: var(--fs-lg); font-weight:700; color: var(--accent-deep); margin:0 0 var(--space-2); }
  .ad-condition-tag{ display:inline-block; font-size: var(--fs-2xs); font-weight:600; color: var(--forest-deep); background: var(--bg-page-1); border:1px solid var(--border-soft); border-radius:20px; padding:3px 10px; margin-top: var(--space-2); }
  .ad-detail-body{ display:grid; grid-template-columns: 2fr 1fr; gap: var(--space-6); margin-top: var(--space-6); }
  .ad-description h2, .ad-contact-card h2{ font-size: var(--fs-md); font-weight:700; color: var(--forest-deep); margin:0 0 var(--space-3); }
  .ad-tags{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top: var(--space-5); }
  .ad-tag-chip{ font-size: var(--fs-2xs); color: var(--muted); background: var(--bg-page-1); border:1px solid var(--border-soft); border-radius:20px; padding:3px 10px; }
  .ad-contact-card{
    background: var(--bg-page-1); border:1px solid var(--border-soft); border-radius: var(--radius-md);
    padding: var(--space-5); align-self:start;
  }
  .ad-contact-card p{ font-size: var(--fs-xs); margin:0 0 var(--space-2); word-break:break-word; }
  .ad-id-tag{ color: var(--muted); margin-top: var(--space-4); }
  .back-link{ margin-top: var(--space-6); }
  .back-link a{ font-size: var(--fs-xs); font-weight:600; }

  @media (max-width: 720px){
    .ad-detail-body{ grid-template-columns: 1fr; }
  }

  /* footer */
  footer{
    border-top:1px solid var(--border-soft); margin-top: var(--space-5); padding: var(--space-4) 0 var(--space-7);
    font-size: var(--fs-2xs); color: var(--muted); text-align:center;
  }
  footer a{ color: var(--muted); text-decoration:underline; }

  /* responsive: breakpoints noted in the DNA report were 479/480px;
     added 768/992 steps for a workable fluid layout in between */
  @media (max-width: 992px){
    .categories{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  @media (max-width: 768px){
    .layout{ grid-template-columns: 1fr; }
    .sidebar{ order:2; position:static; }
    main{ order:1; }
  }
  @media (max-width: 480px){
    .categories{ grid-template-columns: 1fr; }
    header.site-header{ flex-direction:column; align-items:flex-start; }
    .header-nav{ text-align:left; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }

  /* ===== Post Free Ad page styles ===== */

  :root{
    /* ---- palette v2: mixed jewel tones (forest, terracotta, navy, gold) ---- */
    --text: #23301F;
    --accent: #B5502E;       /* terracotta — primary CTA/link */
    --accent-dark: #8A3D22;
    --accent-deep: #5C2A17;
    --forest: #2F4A3C;       /* secondary — headings/icons */
    --forest-deep: #1E332A;
    --navy: #23395B;         /* tertiary — ad titles/highlights */
    --gold: #C9A227;         /* highlight — badges/dividers */
    --muted: #565B4F;
    --alert: #7A2436;
    --bg-page-1: #FFFFFF;
    --bg-page-2: #FFFFFF;
    --white: #FFFFFF;

    --font-body: "EB Garamond", Georgia, "Times New Roman", serif;
    /* ---- type scale (matches homepage) ---- */
    --fs-badge: 12px;
    --fs-2xs: 13px;
    --fs-xs: 14px;
    --fs-sm: 16px;
    --fs-body: 17px;
    --fs-md: 19px;
    --fs-lg: 22px;
    --fs-xl: 27px;

    /* ---- spacing scale (4px base unit, matches homepage) ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 16px;

    --shadow-card: 0 1px 2px rgba(47,74,60,.07), 0 4px 14px rgba(47,74,60,.08);
    --shadow-card-hover: 0 6px 20px rgba(47,74,60,.15);
    --surface: #FFFFFF;
    --border-soft: #E4D9B9;
    --border-input: #d8cfa9;
    --content-max: 1096px;
    --ease: cubic-bezier(.2,.7,.3,1);
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior:smooth; }
  input, select, button, textarea{ font-family: inherit; }
  body{
    margin:0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--text);
    background: var(--bg-page-2);
  }
  a{ color: var(--accent); text-decoration:none; transition: color .15s var(--ease); }
  a:hover{ text-decoration: underline; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline: 2px solid var(--accent); outline-offset: 2px;
  }

  .wrap{ max-width: var(--content-max); margin: 0 auto; padding: var(--space-5) var(--space-4) 0; }

  /* ---------- header (shared with homepage) ---------- */
  header.site-header{
    display:flex; align-items:center; justify-content:space-between;
    gap: var(--space-4); padding: var(--space-4) 0 var(--space-6); margin-bottom: var(--space-2); flex-wrap:wrap;
    border-bottom: 1px solid var(--border-soft);
  }
  .logo{ display:flex; align-items:center; gap: var(--space-3); }
  .logo-mark{
    width:44px; height:44px; border-radius: var(--radius-md);
    background: linear-gradient(135deg,var(--forest),var(--accent));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size: var(--fs-lg);
    box-shadow: 0 4px 12px rgba(47,74,60,.35);
    transition: transform .2s var(--ease);
  }
  .logo:hover .logo-mark{ transform: rotate(-6deg) scale(1.05); }
  .logo-text{ font-weight:700; font-size: var(--fs-lg); color: var(--text); letter-spacing:.2px; }
  .logo-text span{ color: var(--accent); }
  .header-nav{ font-size: var(--fs-xs); color: var(--muted); text-align:right; }
  .header-nav .links{ margin-top: var(--space-1); font-size: var(--fs-body); font-weight:600; }
  .header-nav .links a{
    margin-left: var(--space-3); padding-bottom:2px; border-bottom:2px solid transparent;
    transition: border-color .15s var(--ease);
  }
  .header-nav .links a:hover{ border-color: var(--accent); text-decoration:none; }
  .header-nav .links a.current{ border-color: var(--accent); color: var(--accent); }

  /* ---------- page intro ---------- */
  main{ max-width: 760px; margin: 0 auto; padding-bottom: var(--space-7); }
  .page-intro{ text-align:center; margin-bottom: var(--space-7); }
  .page-intro h1{ font-size: var(--fs-xl); font-weight:700; color: var(--accent-deep); margin:0 0 var(--space-2); }
  .page-intro p{ color: var(--muted); font-size: var(--fs-md); margin:0; }
  .page-intro .reassure{
    display:flex; justify-content:center; gap: var(--space-5); flex-wrap:wrap;
    margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--forest-deep);
  }
  .page-intro .reassure span{ display:flex; align-items:center; gap:6px; }
  .page-intro .reassure svg{ width:14px; height:14px; color: var(--accent); flex:none; }

  .form-error-banner{
    max-width: 760px; margin: 0 auto var(--space-5);
    background:#FBEAE5; border:1px solid #E4A08C; color: var(--accent-deep);
    border-radius: var(--radius-md); padding: var(--space-4);
    font-size: var(--fs-xs); font-weight:600;
  }

  /* ---------- form section cards ---------- */
  form{ display:flex; flex-direction:column; gap: var(--space-7); }
  .form-section{
    background: var(--surface); border:1px solid var(--border-soft);
    border-radius: var(--radius-lg); padding: var(--space-6);
    box-shadow: var(--shadow-card);
  }
  .section-head{ display:flex; align-items:baseline; gap: var(--space-3); margin-bottom: var(--space-5); }
  .section-head .num{
    font-size: var(--fs-xs); font-weight:700; color:#fff; background: var(--forest);
    width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    flex:none; font-style:normal;
  }
  .section-head h2{ font-size: var(--fs-lg); font-weight:600; color: var(--forest-deep); margin:0; }
  .section-head p{ margin: 2px 0 0; font-size: var(--fs-xs); color: var(--muted); font-style:normal; }

  .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .field-group{ margin-bottom: var(--space-4); }
  .field-group:last-child{ margin-bottom:0; }
  .field-group label{
    display:block; font-size: var(--fs-xs); font-weight:600; color: var(--forest-deep);
    margin-bottom: var(--space-1); letter-spacing:.02em;
  }
  .field-group .hint{ font-weight:400; color: var(--muted); }
  .field-group .optional-tag{
    font-size: var(--fs-2xs); font-weight:400; color: var(--muted);
  }

  input[type="text"], input[type="tel"], input[type="email"], input[type="url"],
  input[type="number"], select, textarea{
    width:100%; padding: var(--space-3); font-size: var(--fs-body); color: var(--text);
    border:1px solid var(--border-input); border-radius: var(--radius-sm); background:#fff;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  }
  textarea{ resize:vertical; min-height:110px; line-height:1.6; }
  input:focus, select:focus, textarea:focus{
    border-color: var(--accent); outline:none;
    box-shadow: 0 0 0 3px rgba(181,80,46,.15);
  }
  select{
    appearance:none; -webkit-appearance:none; padding-right:36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323301F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat; background-position: right 12px center; background-size:15px;
  }

  .price-field{ position:relative; }
  .price-field .prefix{
    position:absolute; left: var(--space-3); top:50%; transform:translateY(-50%);
    color: var(--muted); font-size: var(--fs-body); pointer-events:none;
  }
  .price-field input{ padding-left: 28px; }

  /* image dropzone */
  .dropzone{
    border:2px dashed var(--border-input); border-radius: var(--radius-md);
    padding: var(--space-6); text-align:center; color: var(--muted);
    background: #FCFAF3; transition: border-color .15s var(--ease), background .15s var(--ease);
    cursor:pointer;
  }
  .dropzone:hover, .dropzone.drag{ border-color: var(--accent); background:#FBF3EE; }
  .dropzone svg{ width:30px; height:30px; color: var(--accent); margin-bottom: var(--space-2); }
  .dropzone strong{ color: var(--forest-deep); font-weight:600; }
  .dropzone .sub{ font-size: var(--fs-xs); margin-top:4px; }
  .dropzone input[type="file"]{ display:none; }
  .file-list{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top: var(--space-3); }
  .file-chip{
    display:flex; align-items:center; gap:6px; background: var(--bg-page-1);
    border:1px solid var(--border-soft); border-radius: 20px; padding:4px 10px 4px 4px;
    font-size: var(--fs-xs); color: var(--text);
  }
  .file-chip .thumb{
    width:22px; height:22px; border-radius:50%; flex:none;
    background: repeating-linear-gradient(45deg,#f3f4f6,#f3f4f6 4px,#e5e7eb 4px,#e5e7eb 8px);
  }

  .tags-hint{ font-size: var(--fs-2xs); color: var(--muted); margin-top: var(--space-1); }

  .field-label-row{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom: var(--space-1);
  }
  .field-label-row label{ margin-bottom:0; }

  .link-icon-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; flex:none;
    background: var(--bg-page-1); color: var(--accent);
    border:1px solid var(--border-input); border-radius: var(--radius-sm);
    cursor:pointer;
    transition: background .15s var(--ease), border-color .15s var(--ease);
  }
  .link-icon-btn svg{ width:14px; height:14px; }
  .link-icon-btn:hover{ background:#FCFAF3; border-color: var(--accent); }

  .link-popup{
    position:relative; margin-top: var(--space-3);
    background: var(--bg-page-1); border:1px solid var(--border-soft);
    border-radius: var(--radius-md); padding: var(--space-4);
  }
  .link-popup .field-group{ margin-bottom: var(--space-3); }
  .link-popup-actions{
    display:flex; justify-content:flex-end; gap: var(--space-2);
  }
  .link-popup-cancel, .link-popup-submit{
    font-size: var(--fs-xs); font-weight:600; border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-4); cursor:pointer;
    transition: background .15s var(--ease), border-color .15s var(--ease);
  }
  .link-popup-cancel{
    background:#fff; color: var(--muted); border:1px solid var(--border-input);
  }
  .link-popup-cancel:hover{ border-color: var(--accent); color: var(--forest-deep); }
  .link-popup-submit{
    background: var(--accent); color:#fff; border:1px solid var(--accent);
  }
  .link-popup-submit:hover{ background: var(--accent-deep); }

  /* submit */
  .submit-row{
    display:flex; align-items:center; justify-content:space-between; gap: var(--space-4);
    flex-wrap:wrap; padding-top: var(--space-2);
  }
  .submit-row p{ font-size: var(--fs-xs); color: var(--muted); margin:0; max-width:340px; }
  .submit-btn{
    display:inline-flex; align-items:center; gap: var(--space-2);
    background: linear-gradient(135deg,var(--accent),var(--gold));
    color:#fff; font-weight:700; font-size: var(--fs-md); border:none; cursor:pointer;
    padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm);
    box-shadow: 0 4px 14px rgba(181,80,46,.35);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  }
  .submit-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(181,80,46,.42); }
  .submit-btn svg{ width:16px; height:16px; }

  /* footer */
  footer{
    border-top:1px solid var(--border-soft); margin-top: var(--space-5); padding: var(--space-4) 0 var(--space-7);
    font-size: var(--fs-2xs); color: var(--muted); text-align:center; max-width: var(--content-max); margin-left:auto; margin-right:auto;
  }
  footer a{ color: var(--muted); text-decoration:underline; }

  @media (max-width: 620px){
    .grid-2{ grid-template-columns: 1fr; }
    .form-section{ padding: var(--space-5); }
    .submit-row{ flex-direction:column; align-items:stretch; text-align:center; }
    .submit-btn{ justify-content:center; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }

  /* ===== Ad Posted Success page styles ===== */

  :root{
    /* ---- palette v2: mixed jewel tones (forest, terracotta, navy, gold) ---- */
    --text: #23301F;
    --accent: #B5502E;       /* terracotta — primary CTA/link */
    --accent-dark: #8A3D22;
    --accent-deep: #5C2A17;
    --forest: #2F4A3C;       /* secondary — headings/icons */
    --forest-deep: #1E332A;
    --navy: #23395B;         /* tertiary — ad titles/highlights */
    --gold: #C9A227;         /* highlight — badges/dividers */
    --muted: #565B4F;
    --alert: #7A2436;
    --success: #2F6B3F;
    --success-deep: #1E4A2A;
    --bg-page-1: #FFFFFF;
    --bg-page-2: #FFFFFF;
    --white: #FFFFFF;

    --font-body: "EB Garamond", Georgia, "Times New Roman", serif;
    --fs-badge: 12px;
    --fs-2xs: 13px;
    --fs-xs: 14px;
    --fs-sm: 16px;
    --fs-body: 17px;
    --fs-md: 19px;
    --fs-lg: 22px;
    --fs-xl: 27px;
    --fs-2xl: 33px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 48px;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 16px;

    --shadow-card: 0 1px 2px rgba(47,74,60,.07), 0 4px 14px rgba(47,74,60,.08);
    --shadow-card-hover: 0 6px 20px rgba(47,74,60,.15);
    --surface: #FFFFFF;
    --border-soft: #E4D9B9;
    --border-input: #d8cfa9;
    --content-max: 1096px;
    --ease: cubic-bezier(.2,.7,.3,1);
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior:smooth; }
  input, select, button, textarea{ font-family: inherit; }
  body{
    margin:0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--text);
    background: var(--bg-page-2);
  }
  a{ color: var(--accent); text-decoration:none; transition: color .15s var(--ease); }
  a:hover{ text-decoration: underline; }
  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--accent); outline-offset: 2px;
  }

  .wrap{ max-width: var(--content-max); margin: 0 auto; padding: var(--space-5) var(--space-4) 0; }

  /* ---------- header (shared with homepage) ---------- */
  header.site-header{
    display:flex; align-items:center; justify-content:space-between;
    gap: var(--space-4); padding: var(--space-4) 0 var(--space-6); margin-bottom: var(--space-2); flex-wrap:wrap;
    border-bottom: 1px solid var(--border-soft);
  }
  .logo{ display:flex; align-items:center; gap: var(--space-3); }
  .logo-mark{
    width:44px; height:44px; border-radius: var(--radius-md);
    background: linear-gradient(135deg,var(--forest),var(--accent));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size: var(--fs-lg);
    box-shadow: 0 4px 12px rgba(47,74,60,.35);
    transition: transform .2s var(--ease);
  }
  .logo:hover .logo-mark{ transform: rotate(-6deg) scale(1.05); }
  .logo-text{ font-weight:700; font-size: var(--fs-lg); color: var(--text); letter-spacing:.2px; }
  .logo-text span{ color: var(--accent); }
  .header-nav{ font-size: var(--fs-xs); color: var(--muted); text-align:right; }
  .header-nav .links{ margin-top: var(--space-1); font-size: var(--fs-body); font-weight:600; }
  .header-nav .links a{
    margin-left: var(--space-3); padding-bottom:2px; border-bottom:2px solid transparent;
    transition: border-color .15s var(--ease);
  }
  .header-nav .links a:hover{ border-color: var(--accent); text-decoration:none; }
  .header-nav .links a.current{ border-color: var(--accent); color: var(--accent); }

  /* ---------- success card ---------- */
  main{ max-width: 640px; margin: 0 auto; padding: var(--space-8) 0 var(--space-8); }

  .success-card{
    background: var(--surface); border:1px solid var(--border-soft);
    border-radius: var(--radius-lg); padding: var(--space-8) var(--space-7);
    box-shadow: var(--shadow-card); text-align:center;
    animation: cardIn .5s var(--ease);
  }
  @keyframes cardIn{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
  }

  .check-badge{
    width:76px; height:76px; margin: 0 auto var(--space-5);
    border-radius:50%;
    background: linear-gradient(135deg, var(--success), var(--forest));
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 18px rgba(47,74,60,.35);
    animation: badgePop .6s var(--ease);
  }
  @keyframes badgePop{
    0%{ transform: scale(.4); opacity:0; }
    60%{ transform: scale(1.08); opacity:1; }
    100%{ transform: scale(1); }
  }
  .check-badge svg{ width:38px; height:38px; color:#fff; }
  .check-badge svg path{
    stroke-dasharray: 30; stroke-dashoffset: 30;
    animation: drawCheck .4s .35s var(--ease) forwards;
  }
  @keyframes drawCheck{ to{ stroke-dashoffset:0; } }

  .eyebrow{
    display:inline-block; font-size: var(--fs-2xs); font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color: var(--success-deep); background:#EAF3EC;
    border:1px solid #CFE4D3; border-radius:20px; padding:4px 12px; margin-bottom: var(--space-4);
  }

  h1.success-title{
    font-size: var(--fs-2xl); font-weight:700; color: var(--forest-deep); margin:0 0 var(--space-2);
  }
  h1.success-title .highlight{
    font-style:normal; color: var(--accent);
  }
  .success-sub{
    color: var(--muted); font-size: var(--fs-md); margin:0 0 var(--space-6); line-height:1.6;
  }

  .ad-summary{
    text-align:left; background:#FCFAF3; border:1px solid var(--border-soft);
    border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-6);
  }
  .ad-summary .row{
    display:flex; justify-content:space-between; gap: var(--space-4);
    padding: var(--space-2) 0; font-size: var(--fs-sm);
    border-bottom: 1px dashed var(--border-soft);
  }
  .ad-summary .row:last-child{ border-bottom:none; }
  .ad-summary .row .k{ color: var(--muted); flex:none; }
  .ad-summary .row .v{ color: var(--text); font-weight:600; text-align:right; }
  .ad-summary .row .v.id{ color: var(--navy); font-family: monospace, var(--font-body); letter-spacing:.03em; }
  .ad-summary .row .v.live{ color: var(--success-deep); display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; }
  .ad-summary .row .v.live::before{
    content:""; width:8px; height:8px; border-radius:50%; background: var(--success);
    box-shadow: 0 0 0 3px rgba(47,107,63,.2);
    animation: pulseDot 1.6s ease-in-out infinite;
  }
  @keyframes pulseDot{
    0%,100%{ box-shadow: 0 0 0 3px rgba(47,107,63,.2); }
    50%{ box-shadow: 0 0 0 6px rgba(47,107,63,.08); }
  }

  .share-row{
    display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-7);
    background:#fff; border:1px solid var(--border-input); border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  }
  .share-row input{
    flex:1; border:none; background:transparent; font-size: var(--fs-xs); color: var(--muted);
    font-family: monospace, var(--font-body); outline:none; min-width:0;
  }
  .copy-btn{
    flex:none; background: var(--forest); color:#fff; border:none; border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3); font-size: var(--fs-2xs); font-weight:700; cursor:pointer;
    display:flex; align-items:center; gap:6px; transition: background .15s var(--ease);
  }
  .copy-btn:hover{ background: var(--forest-deep); }
  .copy-btn svg{ width:13px; height:13px; }
  .copy-btn.copied{ background: var(--success-deep); }

  .action-row{
    display:flex; gap: var(--space-3); flex-wrap:wrap; justify-content:center; margin-bottom: var(--space-6);
  }
  .btn{
    display:inline-flex; align-items:center; gap: var(--space-2);
    font-weight:700; font-size: var(--fs-sm); border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-6); cursor:pointer; border:none;
    transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  }
  .btn svg{ width:15px; height:15px; }
  .btn-primary{
    background: linear-gradient(135deg,var(--accent),var(--gold)); color:#fff;
    box-shadow: 0 4px 14px rgba(181,80,46,.35);
  }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(181,80,46,.42); }
  .btn-secondary{
    background:#fff; color: var(--forest-deep); border:1px solid var(--border-input);
  }
  .btn-secondary:hover{ background:#FCFAF3; text-decoration:none; }

  .next-steps{
    text-align:left; border-top:1px solid var(--border-soft); padding-top: var(--space-5);
  }
  .next-steps h3{
    font-size: var(--fs-sm); font-weight:700; color: var(--forest-deep); margin:0 0 var(--space-3);
    text-transform:uppercase; letter-spacing:.05em; font-style:normal;
  }
  .next-steps ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap: var(--space-3); }
  .next-steps li{ display:flex; gap: var(--space-3); font-size: var(--fs-sm); color: var(--text); }
  .next-steps li svg{ width:18px; height:18px; color: var(--accent); flex:none; margin-top:2px; }
  .next-steps li strong{ color: var(--forest-deep); }

  footer{
    border-top:1px solid var(--border-soft); margin-top: var(--space-5); padding: var(--space-4) 0 var(--space-7);
    font-size: var(--fs-2xs); color: var(--muted); text-align:center; max-width: var(--content-max); margin-left:auto; margin-right:auto;
  }
  footer a{ color: var(--muted); text-decoration:underline; }

  @media (max-width: 620px){
    .success-card{ padding: var(--space-7) var(--space-5); }
    .action-row{ flex-direction:column; }
    .btn{ justify-content:center; width:100%; }
    .ad-summary .row{ flex-direction:column; gap:2px; }
    .ad-summary .row .v{ text-align:left; }
    .ad-summary .row .v.live{ justify-content:flex-start; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }