/* ============================================================
   The Giftery — Gift Lists redesign
   Design tokens + components (find / single list / manage / add-to-list)
   Loaded contextually via functions.php (see tg_enqueue_giftlists_assets).
   ============================================================ */

:root{
  --font:'Nunito Sans', Arial, Helvetica, sans-serif;
  --tg-primary:#39A2DA; --tg-primary-hover:#2F8FBF; --tg-primary-soft:#E8F4FB;
  --tg-ink:#1D2129; --tg-body:#333; --tg-muted:#6B7280; --tg-border:#E4E7EC;
  --tg-page:#F7F9FB; --tg-card:#fff; --tg-danger:#CE0000;
  --tg-r-card:12px; --tg-r-input:10px; --tg-r-pill:999px;
  --tg-sh-1:0 1px 2px rgba(16,24,40,.06); --tg-sh-2:0 4px 16px rgba(16,24,40,.10);
  --tg-wedding:#7C3AED; --tg-birthday:#F59E0B; --tg-graduation:#10B981;
  --tg-house:#EF4444; --tg-baby:#38BDF8; --tg-other:#6B7280;
}

/* ---------- Event badges ---------- */
.tg-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 11px;border-radius:var(--tg-r-pill);text-transform:capitalize;line-height:1.2}
.tg-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tg-b-wedding{color:var(--tg-wedding);background:rgba(124,58,237,.10)}
.tg-b-birthday{color:var(--tg-birthday);background:rgba(245,158,11,.12)}
.tg-b-graduation{color:var(--tg-graduation);background:rgba(16,185,129,.12)}
.tg-b-house{color:var(--tg-house);background:rgba(239,68,68,.10)}
.tg-b-baby{color:var(--tg-baby);background:rgba(56,189,248,.12)}
.tg-b-other{color:var(--tg-other);background:rgba(107,114,128,.12)}

/* ---------- Progress ---------- */
.tg-progress{height:8px;border-radius:8px;background:var(--tg-border);overflow:hidden}
.tg-progress > span{display:block;height:100%;border-radius:8px;background:var(--tg-primary)}
.tg-progress-row{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--tg-muted);margin-bottom:6px}
.tg-progress-row b{color:var(--tg-ink)}

/* ---------- Buttons ---------- */
.tg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font-family:var(--font);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--tg-r-input);padding:0 22px;height:46px;transition:.18s ease}
.tg-btn-primary{background:var(--tg-primary);color:#fff}
.tg-btn-primary:hover{background:var(--tg-primary-hover)}
.tg-btn-ghost{background:#fff;color:var(--tg-primary);border:1.5px solid var(--tg-primary)}
.tg-btn-ghost:hover{background:var(--tg-primary-soft)}
.tg-btn-sm{height:38px;padding:0 16px;font-size:12px}
.tg-btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ---------- Segmented pill control (List privacy etc.) ---------- */
.tg-seg{display:flex;background:var(--tg-page);border:1px solid var(--tg-border);border-radius:var(--tg-r-input);padding:4px;gap:4px;width:100%}
.tg-seg input{display:none}
.tg-seg label{position:static !important;top:auto !important;left:auto !important;transform:none !important;white-space:nowrap;font-size:13px !important;font-weight:700;color:var(--tg-muted);flex:1;text-align:center;padding:9px 10px;border-radius:8px;cursor:pointer;transition:.15s ease;margin:0;line-height:1.2;opacity:1}
.tg-seg input:checked+label{background:#fff;color:var(--tg-primary);box-shadow:var(--tg-sh-1)}

/* ============================================================
   FIND / DISCOVER page  (find-giftlists)
   ============================================================ */
/* Search results card grid (populated via AJAX into .wl-table-search) */
.wl-table-search.tg-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px;border:0;background:transparent}
/* View All lists: turn the table into cards */
table.view_all_wishlists.tg-lists-grid,
.view_all_wishlists.tg-lists-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border:0}

.tg-list-card{background:var(--tg-card);border:1px solid var(--tg-border);border-radius:var(--tg-r-card);box-shadow:var(--tg-sh-1);overflow:hidden;transition:.2s ease}
.tg-list-card:hover{transform:translateY(-3px);box-shadow:var(--tg-sh-2)}
.tg-list-card .tg-cover{position:relative;height:150px;overflow:hidden;display:grid;place-items:center;font-weight:800;color:#fff;font-size:44px}
.tg-list-card .tg-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tg-list-card .tg-cover .tg-badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);box-shadow:var(--tg-sh-1);z-index:2}
.tg-list-card .tg-cover .tg-privacy{position:absolute;top:12px;right:12px;background:rgba(29,33,41,.7);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:var(--tg-r-pill);z-index:2}

/* Legibility over any cover photograph: a soft scrim plus a shadow on the initials, so a
   light upload (ours or the owner's) does not swallow white text. */
.tg-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,16,24,.05),rgba(12,16,24,.34));pointer-events:none;z-index:0}
.tg-cover .tg-initial{position:relative;z-index:1;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.tg-list-card .tg-body{padding:16px 16px 18px}
.tg-list-card h4{margin:0 0 6px;font-size:17px;font-weight:800}
.tg-list-card .tg-owner{font-size:12.5px;color:var(--tg-muted);margin:0 0 12px}
.tg-list-card .tg-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--tg-muted);margin-bottom:12px}
.tg-list-card .tg-meta .tg-date{font-weight:700;color:var(--tg-ink)}

/* Load more. The anchor itself carries .tg-load-more; the parent theme's
   .load-more/.load-more-btn/.load-more-icon classes stay on it so the icon and its
   hover rotation keep working. The theme colours the icon/label grey at (0,2,0) and
   (0,3,0), so the overrides below use matching selectors (this stylesheet loads
   later, so equal specificity wins). */
.tg-load-more{margin-top:26px;padding:12px 24px;border:1.5px solid var(--tg-primary);border-radius:var(--tg-r-pill);text-decoration:none}
.tg-load-more:hover{background:var(--tg-primary-soft)}
.tg-load-more .load-more-text{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--tg-primary)}
.tg-load-more .load-more-icon,
.tg-load-more:hover .load-more-icon{color:var(--tg-primary)}
.tg-load-more:hover .load-more-text{color:var(--tg-primary-hover)}

/* ============================================================
   SINGLE LIST page  (single-custom_wishlists)
   ============================================================ */
.single_wishlist{max-width:1240px;margin:0 auto;padding:32px 20px}
.single_wishlist .list_info{background:#fff;border:1px solid var(--tg-border);border-radius:var(--tg-r-card);box-shadow:var(--tg-sh-2);overflow:hidden;margin-bottom:24px}
.single_wishlist .list_info .tg-hero{position:relative;min-height:240px;display:grid;grid-template-columns:340px 1fr}
.single_wishlist .list_info .tg-hero-cover{position:relative;background:linear-gradient(135deg,#6D28D9,#2F8FBF);overflow:hidden;display:grid;place-items:center}
.single_wishlist .list_info .tg-hero-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.single_wishlist .list_info .tg-hero-cover .tg-initial{z-index:1;font-size:60px;font-weight:800;color:#fff}
.single_wishlist .list_info .tg-hero-cover .tg-badge{position:absolute;top:16px;left:16px;background:rgba(255,255,255,.94);box-shadow:var(--tg-sh-1);z-index:2}
.single_wishlist .list_info .tg-hero-cover .tg-coverctrl{position:absolute;left:14px;bottom:14px;z-index:5;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:var(--tg-ink);font-size:12px;font-weight:700;padding:7px 13px;border-radius:999px;cursor:pointer;box-shadow:var(--tg-sh-1)}
.single_wishlist .list_info .tg-hero-info{display:flex;flex-direction:column;justify-content:center;padding:28px 32px;background:linear-gradient(120deg,#7C3AED,#39A2DA);color:#fff}
.single_wishlist .list_info .tg-hero-info h2{margin:0 0 6px;font-size:30px;font-weight:800;text-transform:none;text-align:left;padding:0;color:#fff;background:transparent}
.single_wishlist .list_info .tg-hero-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;opacity:.95;margin-bottom:16px}
.single_wishlist .list_info .tg-hero-meta span{display:inline-flex;align-items:center;gap:6px}
.single_wishlist .list_info .tg-share{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.single_wishlist .list_info .tg-share a,.single_wishlist .list_info .tg-share button,.single_wishlist .list_info .tg-share .share-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:12px;font-weight:700;padding:7px 13px;border-radius:999px;text-decoration:none;font-family:var(--font);cursor:pointer}
.single_wishlist .list_info .tg-share a:hover,.single_wishlist .list_info .tg-share button:hover,.single_wishlist .list_info .tg-share .share-btn:hover{background:#fff;color:var(--tg-primary)}
.single_wishlist .list_info .tg-share .tg-share-primary{background:#fff;border-color:#fff;color:var(--tg-primary);font-weight:800}
.single_wishlist .list_info .tg-share .tg-share-primary:hover{background:var(--tg-primary-soft);color:var(--tg-primary)}

/* Prototype parity: the hero bar is capped at 440px */
.tg-summary{max-width:440px}

/* Owner banner under the hero */
.tg-owner-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--tg-primary-soft);border:1px solid var(--tg-border);border-radius:var(--tg-r-card);padding:15px 18px;margin:0 0 22px;font-size:13.5px;color:var(--tg-ink)}
.tg-owner-banner .tg-minirow{display:flex;gap:8px;flex-wrap:wrap}
.tg-owner-banner .tg-mini-dark{background:var(--tg-ink);color:#fff;border-color:var(--tg-ink)}
.tg-owner-banner .tg-mini-dark:hover{background:#000;color:#fff;border-color:#000}

/* Product grid inside single wishlist */
#wishlist_table.shop_table{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border:0}
#wishlist_table.shop_table .wishlist_list_item{display:flex;flex-direction:column;border:1px solid var(--tg-border);border-radius:var(--tg-r-card);box-shadow:var(--tg-sh-1);overflow:hidden;margin:0;padding:0;background:var(--tg-card)}
#wishlist_table.shop_table .wishlist_list_item .image_thumb.product-thumbnail{width:100%}
#wishlist_table.shop_table .wishlist_list_item .image_thumb.product-thumbnail img{width:100%;height:200px;object-fit:cover}
#wishlist_table.shop_table .wishlist_list_item .name_type.product-info{width:100%;padding:14px}
#wishlist_table.shop_table .wishlist_list_item .product_name{font-size:15px;font-weight:800;line-height:1.3;width:100%}
#wishlist_table.shop_table .wishlist_list_item .product_price{font-size:17px;font-weight:800}
#wishlist_table.shop_table .wishlist_list_item .info_vendor_cats{width:100%}
#wishlist_table.shop_table .wishlist_list_item .info_qty_purchases{width:100%;padding:0}
#wishlist_table.shop_table .wishlist_list_item .product_purchases{width:100%}
#wishlist_table.shop_table .wishlist_list_item input.wishlist_buy_item.maybe_buy_item.button{width:100%;background:var(--tg-primary);color:#fff;height:40px;line-height:40px;font-size:12px;padding:0;text-transform:uppercase;letter-spacing:.05em}

/* Per-item progress, variation line and purchased-by block (prototype parity) */
#wishlist_table.shop_table .wishlist_list_item .tg-progress-row{margin:0 0 6px}
#wishlist_table.shop_table .wishlist_list_item .tg-progress{margin:0 0 12px}
#wishlist_table.shop_table .wishlist_list_item .tg-variation{display:block;font-size:12.5px;color:var(--tg-muted);margin:2px 0 6px}
#wishlist_table.shop_table .wishlist_list_item .tg-purchaser{margin-top:12px;padding-top:12px;border-top:1px dashed var(--tg-border)}
#wishlist_table.shop_table .wishlist_list_item .tg-purchaser-title{margin:0 0 8px;font-size:12px;font-weight:800;color:var(--tg-ink);text-transform:none}
#wishlist_table.shop_table .wishlist_list_item .tg-purchaser-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tg-ink);margin:0 0 6px}
.tg-av{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--tg-primary-soft);color:var(--tg-primary);display:grid;place-items:center;font-size:11px;font-weight:800}

/* Expired list notice (replaces the bare "list expired" string) */
.tg-list-expired{margin:0 0 24px;padding:26px 24px;border:1px solid var(--tg-border);border-radius:var(--tg-r-card);background:var(--tg-page);text-align:center}
.tg-list-expired h3{margin:12px 0 6px;font-size:19px;font-weight:800;color:var(--tg-ink);text-transform:none}
.tg-list-expired p{margin:0 0 12px;color:var(--tg-muted);font-size:14px}
.tg-list-expired .tg-list-expired-date{font-weight:700;color:var(--tg-ink);margin-bottom:14px}
.tg-list-expired .tg-btn{margin-top:4px}

/* ============================================================
   MY ACCOUNT — MANAGE LISTS
   ============================================================ */
.myaccount_list_wrapper{max-width:1240px;margin:0 auto}

.your_wishlists .tg-lists-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px;border:0;background:transparent}
.tg-manage-card .tg-cover{position:relative;height:120px;overflow:hidden;display:grid;place-items:center;font-weight:800;color:#fff;font-size:30px}
.tg-manage-card .tg-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tg-manage-card .tg-cover .tg-badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);box-shadow:var(--tg-sh-1);z-index:2}
.tg-manage-card .tg-body{padding:16px}
.tg-manage-card h4{margin:0;font-size:16px;font-weight:800;flex:1 1 auto}

/* Prototype parity: count line with the create button above the grid, then the title and
   privacy on one row, then the event line. */
.tg-manage-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:4px 0 0}
.tg-manage-count{font-size:13.5px;font-weight:700;color:var(--tg-muted)}
.tg-manage-card .tg-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.tg-manage-card .tg-sub{margin:0 0 10px;font-size:12.5px;color:var(--tg-muted)}
.tg-create-card .tg-create-sub{font-size:13px;color:var(--tg-muted);font-weight:600}

/* ============================================================
   FIND / DISCOVER — hero, form cards, chips
   ============================================================ */
.tg-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

.tg-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px;align-items:start}
.tg-find-section.tg-form-card{margin-top:0;background:var(--tg-card);border:1px solid var(--tg-border);border-radius:var(--tg-r-card);box-shadow:var(--tg-sh-1);padding:22px}
.tg-form-card h3{display:flex;align-items:center;gap:9px;margin:0 0 16px;font-size:17px;font-weight:800;color:var(--tg-ink)}
.tg-badge-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--tg-primary)}
.tg-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Event chips above the View All grid */
.tg-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.tg-chip{font-family:var(--font);font-size:12.5px;font-weight:700;color:var(--tg-ink);background:#fff;border:1px solid var(--tg-border);border-radius:var(--tg-r-pill);padding:7px 15px;cursor:pointer;transition:.15s ease}
.tg-chip:hover{border-color:var(--tg-primary);color:var(--tg-primary)}
.tg-chip.is-active{background:var(--tg-primary);border-color:var(--tg-primary);color:#fff}
.tg-empty{grid-column:1/-1;margin:0;padding:26px;text-align:center;color:var(--tg-muted);border:1px dashed var(--tg-border);border-radius:var(--tg-r-card)}

/* Loading states. One indicator serves the three find-page interactions that fetch lists
   (AJAX search, the event chips, Load More). Where the grid's contents are being replaced it
   is an overlay over the cards rather than a row above them, so the grid keeps its height and
   nothing moves while the request is in flight. It carries no scrim colour on purpose: the
   same overlay serves the View All grid on the page background and the search results inside
   a white card. */
.tg-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tg-lists-grid,.tg-results-grid{position:relative}
/* min-height so the ring still has room when the grid is empty, which is the state of the
   search results before anything has been searched for: an overlay inset into a zero-height
   grid would otherwise have no space to sit in. */
.tg-loading{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;min-height:120px;margin:0;padding:0}
.tg-loading::before{content:"";flex:0 0 auto;width:26px;height:26px;border:3px solid var(--tg-primary-soft);border-top-color:var(--tg-primary);border-radius:50%;animation:tg-giftlist-spin .6s linear infinite}

/* The region being replaced or appended to is inert while the request is in flight. Only its
   cards are dimmed, so the indicator above them stays crisp. */
.tg-lists-grid.is-loading,
.tg-results-grid.is-loading{pointer-events:none}
.tg-lists-grid.is-loading>*:not(.tg-loading),
.tg-results-grid.is-loading>*:not(.tg-loading){opacity:.55;transition:opacity .15s ease}

/* Load More: the anchor swaps its refresh icon for the spinner in place, so it does not move. */
.tg-load-more.is-loading{pointer-events:none;opacity:.75}
.tg-load-more.is-loading .load-more-icon{display:none}
.tg-load-more.is-loading .load-more-content::before{content:"";display:inline-block;vertical-align:middle;width:14px;height:14px;margin-right:8px;border:2px solid var(--tg-primary-soft);border-top-color:var(--tg-primary);border-radius:50%;animation:tg-giftlist-spin .6s linear infinite}

@keyframes tg-giftlist-spin{to{transform:rotate(360deg)}}

/* Reduced motion: the ring stays, static, with both coloured edges visible instead of spinning. */
@media (prefers-reduced-motion:reduce){
  .tg-loading::before,
  .tg-load-more.is-loading .load-more-content::before{animation:none;border-top-color:var(--tg-primary-soft);border-left-color:var(--tg-primary)}
}

/* The search submit is an input, and a replaced element cannot carry the ::before ring the
   anchor uses, so it dims instead and stops accepting a second submit. */
input#searchsubmit.is-loading{opacity:.7;pointer-events:none}
.tg-search-tip{margin:10px 0 0;font-size:12.5px;color:var(--tg-muted)}

/* Form fields inside the cards, following the prototype's field/input design */
.tg-form-card .form-row{margin:0 0 14px}
.tg-form-card label{display:block;font-size:12.5px;font-weight:700;color:var(--tg-ink);margin:0 0 6px}
.tg-form-card abbr.required{border:0;color:var(--tg-primary);text-decoration:none;font-weight:800}
.tg-form-card input[type="text"],.tg-form-card input[type="password"],.tg-form-card input[type="date"],.tg-form-card select{width:100%;height:44px;padding:0 12px;font-family:var(--font);font-size:13.5px;color:var(--tg-ink);background:#fff;border:1px solid var(--tg-border);border-radius:var(--tg-r-input);outline:none;transition:.15s ease}
.tg-form-card input[type="text"]:focus,.tg-form-card input[type="password"]:focus,.tg-form-card input[type="date"]:focus,.tg-form-card select:focus{border-color:var(--tg-primary);box-shadow:0 0 0 3px rgba(57,162,218,.15)}
.tg-form-card input[type="submit"]{font-family:var(--font);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--tg-primary);border:0;border-radius:var(--tg-r-input);height:44px;padding:0 22px;cursor:pointer;transition:.18s ease}
.tg-form-card input[type="submit"]:hover{background:var(--tg-primary-hover)}
.tg-form-card input[type="submit"][disabled]{opacity:.5;cursor:not-allowed}
.tg-form-card .woocommerce-input-wrapper{display:block}

@media (max-width:900px){
  .tg-form-grid{grid-template-columns:1fr}
  .tg-field-row{grid-template-columns:1fr}
}
.tg-stats{display:flex;gap:16px;margin:12px 0;font-size:12px;color:var(--tg-muted)}
.tg-stats b{color:var(--tg-ink);font-size:15px;display:block}
.tg-manage-actions{display:flex;gap:8px;flex-wrap:wrap}
.tg-mini{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--tg-ink);border:1px solid var(--tg-border);background:#fff;padding:7px 12px;border-radius:var(--tg-r-input);cursor:pointer;text-decoration:none;font-family:var(--font);transition:.15s ease}
.tg-mini:hover{border-color:var(--tg-primary);color:var(--tg-primary)}
.tg-mini.tg-danger:hover{border-color:var(--tg-danger);color:var(--tg-danger)}

/* Expired lists stay usable for their owner: greyed card, chip, Renew action */
.tg-manage-card.is-expired .tg-cover{filter:grayscale(.65);opacity:.8}
.tg-manage-card.is-expired .tg-body{background:var(--tg-page)}
.tg-chip-expired{display:inline-flex;align-items:center;background:rgba(206,0,0,.08);color:var(--tg-danger);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:4px 9px;border-radius:var(--tg-r-pill);cursor:help}
.tg-mini.tg-renew{border-color:var(--tg-primary);color:var(--tg-primary);background:var(--tg-primary-soft)}
.tg-mini.tg-renew:hover{background:var(--tg-primary);color:#fff}
.tg-create-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:34px;border:2px dashed var(--tg-border);border-radius:var(--tg-r-card);color:var(--tg-muted);background:rgba(255,255,255,.5);text-decoration:none;transition:.15s ease;text-align:center}
.tg-create-card:hover{border-color:var(--tg-primary);color:var(--tg-primary);background:var(--tg-primary-soft)}
.tg-create-card .tg-plus{width:46px;height:46px;border-radius:50%;background:var(--tg-primary-soft);color:var(--tg-primary);display:grid;place-items:center;font-size:22px;font-weight:800}

/* ---- Plugin IgniteWoo Add-to-List modal restyled on-brand (keeps plugin JS contract) ---- */
.ign-wl-modal .ign-wl-modal-dialog{max-width:560px;margin:10vh auto}
.ign-wl-modal .ign-wl-modal-content{border:0;border-radius:14px;box-shadow:var(--tg-sh-2);overflow:hidden}
.ign-wl-modal .ign-wl-modal-header{border-bottom:1px solid var(--tg-border);padding:18px 22px;display:flex;flex-direction:row-reverse;justify-content:space-between;gap:12px;align-items:center}
.ign-wl-modal .ign-wl-modal-title{margin:0;font-size:18px;font-weight:800;text-transform:none;text-align:left;line-height:1.2}
.ign-wl-modal .ign-wl-modal-header .close{background:none;border:0;font-size:26px;line-height:1;color:var(--tg-muted);opacity:1}
.ign-wl-modal .ign-wl-modal-body{padding:22px}
.ign-wl-modal .wl_form_wrap .form-row{margin-bottom:16px}
.ign-wl-modal .wl_form_wrap label{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--tg-muted);margin-bottom:7px}
.ign-wl-modal .wl_form_wrap input[type=text],.ign-wl-modal .wl_form_wrap input[type=tel],.ign-wl-modal .wl_form_wrap input[type=password],.ign-wl-modal .wl_form_wrap input[type=email],.ign-wl-modal .wl_form_wrap input[type=date],.ign-wl-modal .wl_form_wrap input.input-text,.ign-wl-modal .wl_form_wrap select{width:100%;height:47px;border:1px solid var(--tg-border);border-radius:var(--tg-r-input);padding:0 14px;font-family:var(--font);font-size:14.5px;color:var(--tg-ink);background:#fff;box-shadow:none}
.ign-wl-modal .wl_form_wrap .wishlist_new_wrap,.ign-wl-modal .wl_form_wrap .wishlist_existing_ul{margin:8px 0}
.ign-wl-modal .wl_form_wrap .wishlist_radio_toggle{float:none;margin-right:6px}
.ign-wl-modal .ign-wl-modal-footer{border-top:1px solid var(--tg-border);background:var(--tg-page);padding:16px 22px;display:flex;justify-content:flex-end;gap:10px}
.ign-wl-modal #wishlist_add_button,.ign-wl-modal #wishlist_close_button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--tg-r-input);height:38px;padding:0 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;font-family:var(--font);background:var(--tg-primary);color:#fff}
.ign-wl-modal #wishlist_close_button{background:#fff;color:var(--tg-primary);border:1.5px solid var(--tg-primary)}
.ign-wl-modal .wl_result_wrap{padding:12px 22px}
.ign-wl-modal .wl_result_wrap .woocommerce-message,.ign-wl-modal .wl_result_wrap .woocommerce-error{border-radius:var(--tg-r-input)}

/* Product-page "Add to Gift List" button (plugin .wishlist_button) */
.wishlist_button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--tg-primary-soft);color:var(--tg-primary);border:1.5px solid var(--tg-primary);border-radius:var(--tg-r-input);height:46px;padding:0 22px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:.18s ease;font-family:var(--font);margin-top:10px;box-shadow:none}
.wishlist_button:hover{background:var(--tg-primary);color:#fff}
.wishlist_button.link{background:none;border:0;color:var(--tg-primary);height:auto;padding:0;text-transform:none;letter-spacing:0}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .wl-table-search.tg-results-grid{grid-template-columns:repeat(2,1fr)}
  .view_all_wishlists.tg-lists-grid{grid-template-columns:repeat(2,1fr)}
  #wishlist_table.shop_table{grid-template-columns:repeat(2,1fr)}
  .your_wishlists .tg-lists-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .single_wishlist .list_info .tg-hero{grid-template-columns:1fr}
  .single_wishlist .list_info .tg-hero-cover{min-height:180px}
}
@media (max-width:640px){
  .wl-table-search.tg-results-grid{grid-template-columns:1fr}
  .view_all_wishlists.tg-lists-grid{grid-template-columns:1fr}
  #wishlist_table.shop_table{grid-template-columns:1fr}
  .your_wishlists .tg-lists-grid{grid-template-columns:1fr}
}

/* Owner single-list copy-link (was inline <style> in single-custom_wishlists.php) */
.single_wishlist .copy_link label{display:none;font-size:17px}
.single_wishlist .copy_link span{font-weight:400}

/* Find Gift Lists page template (page-find-giftlists.php) */
.tg-find-hero{padding:8px 0 4px}
.tg-find-title{margin:0 0 6px;font-size:34px;font-weight:800;color:var(--tg-ink)}
.tg-find-intro{margin:0;color:var(--tg-muted);font-size:15px;max-width:760px}
.tg-find-section{margin-top:34px}
.tg-find-heading{margin:0 0 14px;font-size:20px;font-weight:800;color:var(--tg-ink)}

/* Add-to-list modal: inline variation notice + success confirmation */
.tg-wl-notice{display:inline-block;margin:8px 0 0;font-style:normal;font-size:12.5px;font-weight:700;color:var(--tg-danger)}
.ign-wl-modal .wl_result_wrap.tg-wl-success{padding:28px 22px;text-align:center}
/* Fallback tick for the plugin's raw message: the rebuilt panel brings its own. */
.ign-wl-modal .wl_result_wrap.tg-wl-success:not(.tg-wl-panel)::before{content:'\2713';display:grid;place-items:center;width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:rgba(16,185,129,.12);color:#10B981;font-size:26px;font-weight:800}
.ign-wl-modal .wl_result_wrap.tg-wl-success .woocommerce-message{margin:0;border:0;background:transparent;padding:0;text-align:center}

/* Add-to-list modal: plugin-rendered new-list tab (existing vs new list + inline create) */
/* The plugin wraps both tabs in one bare, unclassed <ul>, so the UA rule
   (padding-left:40px / margin:1em 0) has to be undone here; the li reset below
   is not enough on its own. */
.ign-wl-modal .wl_form_wrap ul{padding:0;margin:0;list-style:none}
.ign-wl-modal .wl_form_wrap .wishlist_existing_li,
.ign-wl-modal .wl_form_wrap #wishlist_new_li{list-style:none;margin:0 0 16px;padding:0}
.ign-wl-modal .wl_form_wrap .wishlist_h3_title{margin:0 0 10px;font-size:14px;font-weight:800;text-transform:none;letter-spacing:0;color:var(--tg-ink);line-height:1.3}
.ign-wl-modal .wl_form_wrap .wishlist_radio_label{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:800;text-transform:none;letter-spacing:0;color:var(--tg-ink);cursor:pointer}
.ign-wl-modal .wl_form_wrap .wishlist_radio_label input{float:none;margin:0}
.ign-wl-modal .wl_form_wrap #wishlists_list{margin:0}
.ign-wl-modal .wl_form_wrap .wishlist_new_wrap{margin-top:12px}
.ign-wl-modal .wl_form_wrap .wishlist_field_label{margin:0 0 6px;font-size:12.5px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--tg-muted)}
.ign-wl-modal .wl_form_wrap .wishlist_type_label{margin:14px 0 8px;font-size:12.5px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--tg-muted)}
.ign-wl-modal .wl_form_wrap .wishlist_type_btn{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:9px 11px;border:1px solid var(--tg-border);border-radius:var(--tg-r-input);font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--tg-ink);cursor:pointer;transition:.15s ease}
.ign-wl-modal .wl_form_wrap .wishlist_type_btn:hover{border-color:var(--tg-primary);background:var(--tg-primary-soft)}
.ign-wl-modal .wl_form_wrap .wishlist_type_btn em{font-style:normal;font-size:12px;color:var(--tg-muted)}
.ign-wl-modal .wl_form_wrap .wishlist_type_btn input{float:none;margin:0}

/* Add-to-list modal: prototype parity (product strip, list rows, qty stepper, success).
   The rows are built by assets/js/giftlists.js over the plugin's list <select>, which stays
   in the DOM as the value holder and is hidden here, so the plugin's submit still works. */
.ign-wl-modal .tg-modal-product{display:flex;gap:14px;align-items:center;padding:16px 22px;background:var(--tg-page);border-bottom:1px solid var(--tg-border)}
.ign-wl-modal .tg-modal-thumb{width:64px;height:64px;flex:0 0 auto;border-radius:10px;overflow:hidden;background:var(--tg-border)}
.ign-wl-modal .tg-modal-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ign-wl-modal .tg-modal-name{font-weight:800;font-size:14.5px;line-height:1.3;color:var(--tg-ink)}
.ign-wl-modal .tg-modal-variation{font-size:12px;color:var(--tg-muted);margin:2px 0}
.ign-wl-modal .tg-modal-price{font-weight:800;font-size:15px;color:var(--tg-ink)}
.ign-wl-modal .tg-modal-price del{font-weight:600;color:var(--tg-muted)}
/* Right padding keeps the cards clear of the native scrollbar gutter; the left
   stays at 2px so rows sit flush with the body content edge. */
.ign-wl-modal .tg-modal-rows{display:flex;flex-direction:column;gap:10px;max-height:260px;overflow-y:auto;padding:2px 12px 2px 2px;margin:0 0 16px}
.ign-wl-modal .tg-modal-opt{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1.5px solid var(--tg-border);border-radius:12px;background:#fff;cursor:pointer;transition:.15s ease}
.ign-wl-modal .tg-modal-opt:hover{border-color:var(--tg-primary)}
.ign-wl-modal .tg-modal-opt.is-selected{border-color:var(--tg-primary);box-shadow:0 0 0 3px var(--tg-primary-soft)}
.ign-wl-modal .tg-modal-ph{position:relative;display:grid;place-items:center;width:52px;height:52px;flex:0 0 auto;border-radius:10px;overflow:hidden;background-size:cover;background-position:center}
.ign-wl-modal .tg-modal-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ign-wl-modal .tg-modal-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,16,24,.05),rgba(12,16,24,.3))}
.ign-wl-modal .tg-modal-ph .tg-modal-fi{position:relative;z-index:1;color:#fff;font-weight:800;font-size:16px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.ign-wl-modal .tg-modal-meta{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.35}
.ign-wl-modal .tg-modal-nm{font-weight:800;font-size:14px;color:var(--tg-ink)}
.ign-wl-modal .tg-modal-ct{font-size:12px;color:var(--tg-muted)}
.ign-wl-modal .tg-modal-opt .tg-badge{flex:0 0 auto}
.ign-wl-modal .tg-modal-create{border-style:dashed}
.ign-wl-modal .tg-modal-create .tg-modal-nm{color:var(--tg-muted)}
.ign-wl-modal .tg-modal-create.is-selected .tg-modal-nm{color:var(--tg-ink)}
.ign-wl-modal .tg-modal-plus{background:var(--tg-primary-soft);color:var(--tg-primary);font-size:20px;font-weight:800}
.ign-wl-modal .tg-modal-plus::after{display:none}
.ign-wl-modal .tg-modal-qty{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.ign-wl-modal .tg-modal-qty-label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--tg-muted)}
.ign-wl-modal .tg-step{display:inline-flex;align-items:center;border:1px solid var(--tg-border);border-radius:var(--tg-r-input);overflow:hidden}
.ign-wl-modal .tg-step-btn{width:38px;height:44px;padding:0;border:0;background:#fff;color:var(--tg-muted);font-size:18px;line-height:1;cursor:pointer}
.ign-wl-modal .tg-step-btn:hover{color:var(--tg-primary)}
/* Specificity note: the .wl_form_wrap input[type=text] rule above sets width/height/padding,
   so the stepper input is addressed with an extra class to win back its own size. */
.ign-wl-modal .wl_form_wrap .tg-step .tg-qty-input{width:52px;height:44px;padding:0;border:0;border-left:1px solid var(--tg-border);border-right:1px solid var(--tg-border);border-radius:0;background:#fff;text-align:center;font-family:var(--font);font-size:15px;color:var(--tg-ink);box-shadow:none}
.ign-wl-modal .tg-modal-qty-hint{font-size:12px;color:var(--tg-muted)}
/* .tg-sr-only is a general utility now (see the loading states block): listing it here too
   would repeat the same declarations. */
.ign-wl-modal .wl_form_wrap #wishlists_list.tg-modal-native{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ign-wl-modal .tg-modal-success{padding:6px 0 2px}
.ign-wl-modal .tg-modal-tick{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:rgba(16,185,129,.12);color:var(--tg-graduation);font-size:28px;font-weight:800;line-height:1}
.ign-wl-modal .tg-modal-success h3{margin:0 0 6px;font-size:20px;font-weight:800;text-align:center;color:var(--tg-ink)}
.ign-wl-modal .tg-modal-success p{margin:0 0 18px;text-align:center;font-size:14px;color:var(--tg-muted)}
.ign-wl-modal .tg-modal-success-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}