/**
 * Albi Wishlist — wishlist.css (Task 11)
 *
 * Ported from the prototype at docs/superpowers/specs/2026-05-28-albi-wishlist-prototype/.
 * Reuses the theme's global :root tokens from base.css (--red, --red-deep, --red-soft,
 * --red-line, --ink-1..5, --line-1..3, --bg, --bg-2, --bg-3). Hardcoded fallbacks are kept
 * so the plugin degrades gracefully if loaded without the theme.
 *
 * Prototype-token -> theme-token map:
 *   --albi-red       #DC2626  -> --red
 *   --albi-red-hover #B91C1C  -> --red-deep
 *   --albi-red-soft  #fdecec  -> --red-soft (#FEF2F2)
 *   --ink            #1a1a1a  -> --ink-1 / --ink-2
 *   --ink-2          #6b6b6b  -> --ink-4
 *   --ink-3          #9a9a9a  -> --ink-5
 *   --border         #e8e8e8  -> --line-1
 *   --border-strong  #d4d4d4  -> --line-3
 *   --bg-tint        #fafafa  -> --bg-2
 *   #f0f0f0 / segmented        -> --bg-3
 *   --ok #0f7a3a, --warn #b75a00 : no exact theme token, use prototype literals.
 *
 * Sections:
 *   (A) Global heart button (unscoped)
 *   (B) View toggle behaviour
 *   (C) Scoped .albi-wishlist page styles
 *   (D) Responsive
 */

/* =========================================================================
   (A) GLOBAL heart button — used on product/shop/taxonomy/front-page, NOT scoped.
   ========================================================================= */
.albi-wl-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line-3,#d4d4d4);border-radius:8px;background:#fff;color:var(--ink-4,#6b6b6b);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.albi-wl-btn svg{display:block}
.albi-wl-btn .heart-filled{display:none}
.albi-wl-btn.is-saved{color:var(--red,#DC2626);border-color:var(--red,#DC2626);background:var(--red-soft,#FEF2F2)}
.albi-wl-btn.is-saved .heart-outline{display:none}
.albi-wl-btn.is-saved .heart-filled{display:block}
.albi-wl-btn:hover{color:var(--red,#DC2626);border-color:var(--red,#DC2626)}
.albi-wl-btn:focus-visible{outline:2px solid var(--red,#DC2626);outline-offset:2px}

/* --- Heart overlay on storefront product cards (archive / home / related) --- */
/* Archive (content-product.php): heart inside .product-media wrapper */
.albi-product-card .product-media{position:relative}
.albi-product-card .product-media .albi-wl-btn,
/* Home (template-parts/home/product-card.php): heart is a child of .product (position:relative) */
.albi-home .product>.albi-wl-btn,
/* Related (single-product/related.php): heart is a child of .card (position:relative) */
.albi-pdp .rel-grid .card>.albi-wl-btn{
  position:absolute;top:8px;right:8px;width:34px;height:34px;z-index:2;
  background:rgba(255,255,255,.95);box-shadow:0 1px 2px rgba(0,0,0,.1);
}
/* Home card has 14px padding around the media — nudge heart to sit inside the image corner */
.albi-home .product>.albi-wl-btn{top:22px;right:22px}

/* =========================================================================
   (B) VIEW TOGGLE behaviour — grid default; data-view="list" flips to list.
   ========================================================================= */
.albi-wishlist .albi-wl-list{display:none}
.albi-wishlist[data-view="list"] .albi-wl-grid,
.albi-wl-views[data-view="list"] .albi-wl-grid{display:none}
.albi-wishlist[data-view="list"] .albi-wl-list,
.albi-wl-views[data-view="list"] .albi-wl-list{display:block}

/* =========================================================================
   (C) SCOPED page styles — everything under .albi-wishlist
   ========================================================================= */
.albi-wishlist{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink-1,#1a1a1a);
  background:var(--bg,#fff);
  max-width:1240px;
  margin:0 auto;
  padding:0 0 40px;
}
.albi-wishlist *,
.albi-wishlist *::before,
.albi-wishlist *::after{box-sizing:border-box}
.albi-wishlist button{font-family:inherit}

/* --- shared button primitives (ported from primitives.jsx) --------------- */
.albi-wishlist .albi-wl-btn-primary{
  appearance:none;border:1px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;letter-spacing:.1px;font-size:14px;
  background:var(--red,#DC2626);color:#fff;padding:11px 16px;border-radius:8px;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
  text-decoration:none;
}
.albi-wishlist .albi-wl-btn-primary:hover{background:var(--red-deep,#B91C1C)}
.albi-wishlist .albi-wl-btn-primary:disabled,
.albi-wishlist .albi-wl-btn-primary[disabled]{opacity:.45;cursor:not-allowed}
.albi-wishlist .albi-wl-btn-primary:focus-visible{outline:2px solid var(--red,#DC2626);outline-offset:2px}

.albi-wishlist .albi-wl-btn-secondary{
  appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;letter-spacing:.1px;font-size:14px;
  background:#fff;color:var(--ink-1,#1a1a1a);padding:10px 16px;border-radius:8px;
  border:1px solid var(--line-3,#d4d4d4);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
  text-decoration:none;
}
.albi-wishlist .albi-wl-btn-secondary:hover{border-color:var(--ink-5,#9a9a9a);background:var(--bg-2,#fafafa)}
.albi-wishlist .albi-wl-btn-secondary:focus-visible{outline:2px solid var(--red,#DC2626);outline-offset:2px}

.albi-wishlist .albi-wl-btn-ghost{
  appearance:none;border:1px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-weight:600;font-size:13px;
  background:transparent;color:var(--ink-4,#6b6b6b);padding:6px 8px;border-radius:6px;
  transition:background .15s ease,color .15s ease;
  text-decoration:none;
}
.albi-wishlist .albi-wl-btn-ghost:hover{color:var(--ink-1,#1a1a1a);background:var(--bg-3,#f4f4f4)}
.albi-wishlist .albi-wl-btn-ghost:focus-visible{outline:2px solid var(--red,#DC2626);outline-offset:2px}

.albi-wishlist .albi-wl-btn-full{width:100%}

/* --- page header (breadcrumb + title + subtitle + per-list actions) ------ */
.albi-wl-header{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:20px 32px 14px;
  border-bottom:1px solid var(--line-1,#e8e8e8);
}
.albi-wl-header-main{min-width:0}
.albi-wl-breadcrumb{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:13px;color:var(--ink-4,#6b6b6b);
}
.albi-wl-breadcrumb .is-current{color:var(--ink-1,#1a1a1a);font-weight:600}
.albi-wl-breadcrumb-sep{color:var(--ink-5,#9a9a9a)}
.albi-wl-title{margin:10px 0 4px;font-size:30px;font-weight:800;letter-spacing:-.4px;line-height:1.15;color:var(--ink-1,#1a1a1a)}
.albi-wl-subtitle{color:var(--ink-4,#6b6b6b);font-size:14px}
.albi-wl-subtitle-count{font-weight:600;color:var(--ink-1,#1a1a1a)}
.albi-wl-subtitle-sep,
.albi-wl-subtitle-name{color:var(--ink-5,#9a9a9a)}
.albi-wl-header-actions{display:flex;gap:8px;flex-shrink:0}
.albi-wl-rename,
.albi-wl-delete-list{
  appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;font-size:13px;
  background:#fff;color:var(--ink-1,#1a1a1a);padding:7px 12px;border-radius:8px;
  border:1px solid var(--line-3,#d4d4d4);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.albi-wl-rename:hover,
.albi-wl-delete-list:hover{border-color:var(--ink-5,#9a9a9a);background:var(--bg-2,#fafafa)}
.albi-wl-delete-list{color:var(--red,#DC2626);border-color:var(--red-line,#FECACA)}
.albi-wl-delete-list:hover{background:var(--red-soft,#FEF2F2);border-color:var(--red,#DC2626)}

/* --- tab strip ----------------------------------------------------------- */
.albi-wl-tabs{
  display:flex;gap:4px;align-items:center;
  border-bottom:1px solid var(--line-1,#e8e8e8);
  padding:0 32px;
}
.albi-wl-tab{
  border:none;background:transparent;cursor:pointer;
  padding:14px 16px;font-size:14px;
  color:var(--ink-4,#6b6b6b);font-weight:500;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  transition:color .15s ease,border-color .15s ease;
}
.albi-wl-tab:hover{color:var(--ink-1,#1a1a1a)}
.albi-wl-tab.is-active,
.albi-wl-tab[aria-selected="true"]{
  color:var(--ink-1,#1a1a1a);font-weight:700;
  border-bottom-color:var(--red,#DC2626);
}
.albi-wl-tab-name{display:inline-flex;align-items:center}
.albi-wl-tab-count{
  font-size:11px;padding:1px 7px;border-radius:999px;
  background:var(--bg-3,#f0f0f0);color:var(--ink-4,#6b6b6b);font-weight:700;
}
.albi-wl-tab.is-active .albi-wl-tab-count,
.albi-wl-tab[aria-selected="true"] .albi-wl-tab-count{
  background:var(--red-soft,#fdecec);color:var(--red,#DC2626);
}
.albi-wl-tab-new{
  border:1px dashed var(--line-3,#d4d4d4);background:transparent;
  border-radius:6px;padding:6px 10px;margin-left:8px;font-size:13px;
  color:var(--ink-4,#6b6b6b);cursor:pointer;white-space:nowrap;
  transition:border-color .15s ease,color .15s ease;
}
.albi-wl-tab-new:hover{border-color:var(--red,#DC2626);color:var(--red,#DC2626)}

/* --- badges (ported from Badge primitive) -------------------------------- */
.albi-wl-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 8px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.2px;line-height:1;
  background:var(--bg-3,#f4f4f4);color:var(--ink-1,#1a1a1a);border:1px solid var(--line-1,#e8e8e8);
}
.albi-wl-badge-sale{background:var(--red,#DC2626);color:#fff;border-color:var(--red,#DC2626)}
.albi-wl-badge-b2b{background:#0f172a;color:#fff;border-color:#0f172a}
/* compact b2b badge inside a tab */
.albi-wl-tab .albi-wl-badge-b2b{padding:1px 6px;font-size:10px}

/* --- sticky toolbar ------------------------------------------------------ */
.albi-wl-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 32px;border-bottom:1px solid var(--line-1,#e8e8e8);background:#fff;
  position:sticky;top:0;z-index:2;
}
.albi-wl-toolbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.albi-wl-toolbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.albi-wl-toolbar-sep{color:var(--line-3,#d4d4d4)}
.albi-wl-selectall-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-4,#6b6b6b);cursor:pointer}
.albi-wl-selectall{width:16px;height:16px;accent-color:var(--red,#DC2626);cursor:pointer}
.albi-wl-count strong{color:var(--ink-1,#1a1a1a)}
.albi-wl-remove,
.albi-wl-move{
  appearance:none;border:1px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;font-size:13px;
  background:transparent;color:var(--ink-4,#6b6b6b);padding:6px 8px;border-radius:6px;
  transition:background .15s ease,color .15s ease;
}
.albi-wl-remove:hover{color:var(--red,#DC2626);background:var(--red-soft,#FEF2F2)}
.albi-wl-move:hover{color:var(--ink-1,#1a1a1a);background:var(--bg-3,#f4f4f4)}

.albi-wl-sort-label{display:inline-flex;align-items:center}
.albi-wl-sort{
  appearance:auto;cursor:pointer;
  font-weight:600;font-size:13px;color:var(--ink-1,#1a1a1a);
  background:#fff;padding:7px 10px;border-radius:8px;
  border:1px solid var(--line-3,#d4d4d4);
}
.albi-wl-sort:focus-visible{outline:2px solid var(--red,#DC2626);outline-offset:2px}

/* segmented view control */
.albi-wl-view{display:inline-flex;padding:2px;background:var(--bg-3,#f0f0f0);border-radius:8px;gap:0}
.albi-wl-view button{
  width:36px;height:32px;border:none;background:transparent;border-radius:6px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--ink-4,#6b6b6b);transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.albi-wl-view button[aria-pressed="true"]{
  background:#fff;color:var(--ink-1,#1a1a1a);box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.albi-wl-view button:focus-visible{outline:2px solid var(--red,#DC2626);outline-offset:2px}

.albi-wl-total-wrap{font-size:13px;color:var(--ink-4,#6b6b6b);white-space:nowrap}
.albi-wl-total{color:var(--ink-1,#1a1a1a);font-weight:700}

/* toolbar "Dodaj u košaricu" — primary button (styled via .albi-wl-btn-primary); keep it from shrinking */
.albi-wl-addcart{flex-shrink:0;white-space:nowrap}

/* --- views wrapper ------------------------------------------------------- */
.albi-wl-views{padding:22px 32px 0}

/* --- grid ---------------------------------------------------------------- */
.albi-wl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* --- card ---------------------------------------------------------------- */
.albi-wl-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line-1,#e8e8e8);border-radius:12px;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
/* selected: support both the .is-selected class (Task 13) and the :has() fallback */
.albi-wl-card.is-selected,
.albi-wl-card:has(.albi-wl-select:checked){
  border-color:var(--red,#DC2626);
  box-shadow:0 0 0 3px rgba(220,38,38,.08);
}
.albi-wl-card.is-oos{opacity:.7}

.albi-wl-card-select{position:absolute;top:10px;left:10px;z-index:2}
.albi-wl-select{width:18px;height:18px;accent-color:var(--red,#DC2626);cursor:pointer}
.albi-wl-select:disabled{cursor:not-allowed}

.albi-wl-card-badges{position:absolute;top:8px;right:8px;z-index:2;display:flex;gap:6px;align-items:flex-start}
.albi-wl-item-remove{
  width:28px;height:28px;border-radius:50%;border:none;
  background:rgba(255,255,255,.95);box-shadow:0 1px 2px rgba(0,0,0,.1);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--ink-4,#6b6b6b);transition:color .15s ease,background .15s ease;
}
.albi-wl-item-remove:hover{color:var(--red,#DC2626);background:#fff}
.albi-wl-item-remove:focus-visible{outline:2px solid var(--red,#DC2626);outline-offset:2px}

.albi-wl-card-media{display:block;padding:12px 12px 6px;background:#fff}
.albi-wl-card-media img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:8px;background:var(--bg-2,#fafafa);
}

.albi-wl-card-body{padding:4px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.albi-wl-card-brand{font-size:10px;color:var(--ink-5,#9a9a9a);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.albi-wl-card-name{
  font-size:13px;font-weight:600;line-height:1.3;color:var(--ink-1,#1a1a1a);min-height:34px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.albi-wl-card-name:hover{color:var(--red,#DC2626)}
.albi-wl-card-price{margin-top:2px}
.albi-wl-card-actions{display:flex;gap:6px;margin-top:6px;align-items:center}
.albi-wl-card-actions .albi-wl-item-addcart{flex:1}

/* constrain the theme's large .albi-price block inside compact wishlist cards/rows */
.albi-wishlist .albi-price{font-weight:700;line-height:1}
.albi-wishlist .albi-price__integer{font-size:18px}
.albi-wishlist .albi-price__comma{font-size:15px}
.albi-wishlist .albi-price__decimal{font-size:11px}
.albi-wishlist .albi-price__suffix{font-size:10px;margin-left:4px}

/* --- qty stepper --------------------------------------------------------- */
.albi-wl-qty{
  display:inline-flex;align-items:stretch;height:30px;
  border:1px solid var(--line-3,#d4d4d4);border-radius:8px;overflow:hidden;
}
.albi-wl-qty-minus,
.albi-wl-qty-plus{
  width:30px;border:none;background:#fff;cursor:pointer;
  font-size:16px;color:var(--ink-4,#6b6b6b);line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease;
}
.albi-wl-qty-minus:hover,
.albi-wl-qty-plus:hover{background:var(--bg-3,#f4f4f4);color:var(--ink-1,#1a1a1a)}
.albi-wl-qty-value{
  min-width:34px;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:14px;padding:0 8px;
  border-left:1px solid var(--line-1,#e8e8e8);border-right:1px solid var(--line-1,#e8e8e8);
}

/* --- list view ----------------------------------------------------------- */
.albi-wl-list{border:1px solid var(--line-1,#e8e8e8);border-radius:12px;overflow:hidden;background:#fff}
.albi-wl-list-header,
.albi-wl-row{
  display:grid;grid-template-columns:36px 80px 1fr 180px 130px 200px;
  gap:16px;align-items:center;
}
.albi-wl-list-header{
  padding:12px 20px;border-bottom:1px solid var(--line-1,#e8e8e8);background:var(--bg-2,#fafafa);
  font-size:11px;color:var(--ink-4,#6b6b6b);text-transform:uppercase;letter-spacing:.6px;font-weight:700;
}
.albi-wl-list-header .albi-wl-col-select{justify-self:center}
.albi-wl-list-header .albi-wl-col-actions{text-align:right}

.albi-wl-row{padding:14px 20px;border-bottom:1px solid var(--line-1,#e8e8e8);background:#fff;transition:background .15s ease}
.albi-wl-row:last-child{border-bottom:none}
.albi-wl-row.is-selected,
.albi-wl-row:has(.albi-wl-select:checked){background:var(--red-soft,#fdecec)}
.albi-wl-row.is-oos{opacity:.7}
.albi-wl-row .albi-wl-col-select{justify-self:center}

.albi-wl-col-image img{
  display:block;width:64px;height:64px;object-fit:contain;border-radius:8px;background:var(--bg-2,#fafafa);
}
.albi-wl-col-product{min-width:0}
.albi-wl-row-meta{display:flex;gap:6px;align-items:center;margin-bottom:3px;flex-wrap:wrap}
.albi-wl-row-sku{font-size:10px;color:var(--ink-5,#9a9a9a);font-family:'JetBrains Mono',ui-monospace,monospace}
.albi-wl-row-name{display:block;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink-1,#1a1a1a)}
.albi-wl-row-name:hover{color:var(--red,#DC2626)}
.albi-wl-row-sub{font-size:12px;color:var(--ink-4,#6b6b6b);margin-top:2px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.albi-wl-row-brand{color:var(--ink-4,#6b6b6b)}
.albi-wl-row-dot-sep{color:var(--ink-5,#9a9a9a)}
.albi-wl-stock{display:inline-flex;align-items:center;gap:6px}
.albi-wl-stock-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#bbb}
.albi-wl-stock-ok{background:#0f7a3a}
.albi-wl-stock-warn{background:#b75a00}
.albi-wl-stock-out{background:#bbb}
.albi-wl-stock-label{font-weight:600}
/* tone the label color to match the dot tone */
.albi-wl-stock:has(.albi-wl-stock-ok) .albi-wl-stock-label{color:#0f7a3a}
.albi-wl-stock:has(.albi-wl-stock-warn) .albi-wl-stock-label{color:#b75a00}
.albi-wl-stock:has(.albi-wl-stock-out) .albi-wl-stock-label{color:var(--ink-5,#9a9a9a)}
.albi-wl-col-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center}

/* =========================================================================
   Empty state
   ========================================================================= */
.albi-wl-empty{padding:56px 32px 80px;display:flex;flex-direction:column;align-items:center}
.albi-wl-empty-hero{
  width:100px;height:100px;border-radius:24px;
  background:linear-gradient(135deg,var(--red-soft,#fdecec),#fff);
  border:1px solid var(--line-1,#e8e8e8);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
  transform:rotate(-6deg);color:var(--red,#DC2626);
}
.albi-wl-empty-title{margin:0 0 8px;font-size:24px;font-weight:800;letter-spacing:-.3px;text-align:center;color:var(--ink-1,#1a1a1a)}
.albi-wl-empty-desc{margin:0 0 26px;color:var(--ink-4,#6b6b6b);font-size:14px;line-height:1.55;max-width:520px;text-align:center}
.albi-wl-empty-ctas{display:flex;gap:8px;margin-bottom:36px;flex-wrap:wrap;justify-content:center}
.albi-wl-empty-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:980px}
.albi-wl-tip{padding:18px;border:1px solid var(--line-1,#e8e8e8);border-radius:12px;background:#fff}
.albi-wl-tip-num{
  width:32px;height:32px;border-radius:8px;background:var(--red-soft,#fdecec);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
  color:var(--red,#DC2626);font-weight:800;font-size:14px;
}
.albi-wl-tip-title{font-size:14px;font-weight:700;margin-bottom:4px;color:var(--ink-1,#1a1a1a)}
.albi-wl-tip-desc{font-size:13px;color:var(--ink-4,#6b6b6b);line-height:1.5}

/* =========================================================================
   Guest state
   ========================================================================= */
.albi-wl-guest{padding:24px 32px 56px;display:grid;grid-template-columns:1fr 380px;gap:24px}
.albi-wl-guest-main{min-width:0}
.albi-wl-guest-banner{
  padding:14px 16px;margin-bottom:16px;
  background:#fff;border:1px solid var(--red,#DC2626);border-radius:10px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.albi-wl-guest-banner-icon{
  width:36px;height:36px;border-radius:8px;background:var(--red-soft,#fdecec);
  display:flex;align-items:center;justify-content:center;color:var(--red,#DC2626);flex-shrink:0;
}
.albi-wl-guest-banner-text{flex:1;min-width:160px;font-size:13px;color:var(--ink-1,#1a1a1a);display:flex;flex-wrap:wrap;gap:0 6px;align-items:baseline}
.albi-wl-guest-banner-text strong{font-weight:700}
.albi-wl-guest-banner-text span{color:var(--ink-4,#6b6b6b)}
.albi-wl-guest-count{font-weight:700}
.albi-wl-noscript{margin:0 0 16px;color:var(--ink-4,#6b6b6b);font-size:14px}

/* guest grid: 2-up (cards reuse the .albi-wl-card grid styles above) */
.albi-wl-guest .albi-wl-grid{grid-template-columns:repeat(2,1fr)}

.albi-wl-guest-benefits{
  padding:24px;border:1px solid var(--line-1,#e8e8e8);border-radius:14px;
  background:var(--bg-2,#fafafa);height:fit-content;
}
.albi-wl-guest-benefits-title{margin:0 0 12px;font-size:16px;font-weight:800;color:var(--ink-1,#1a1a1a)}
.albi-wl-guest-benefits-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.albi-wl-guest-benefits-list li{display:flex;gap:12px}
.albi-wl-benefit-num{
  width:24px;height:24px;border-radius:6px;background:var(--red,#DC2626);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0;
}
.albi-wl-benefit-title{font-size:13px;font-weight:700;color:var(--ink-1,#1a1a1a)}
.albi-wl-benefit-desc{font-size:12px;color:var(--ink-4,#6b6b6b)}
.albi-wl-guest-benefits-divider{height:1px;background:var(--line-1,#e8e8e8);margin:18px 0}
.albi-wl-guest-benefits .albi-wl-btn-ghost{margin-top:8px;width:100%}

/* =========================================================================
   Public share page (/wishlist/s/<token>) — read-only cards + viewer add-to-cart.
   Reuses .albi-wishlist tokens; .albi-wl-card base gives border/radius/flex.
   ========================================================================= */
.albi-wl-share-page{padding-top:24px}

/* head: title + "Dodaj sve u košaricu" on one row */
.albi-wl-share-head{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:0 32px 18px;margin-bottom:6px;
  border-bottom:1px solid var(--line-1,#e8e8e8);
}
.albi-wl-share-head h1{
  margin:0;font-size:28px;font-weight:800;letter-spacing:-.4px;line-height:1.15;
  color:var(--ink-1,#1a1a1a);min-width:0;
}
.albi-wl-share-addall{flex-shrink:0;white-space:nowrap}

/* grid: reuse the catalog grid columns */
.albi-wl-share-grid{padding:22px 32px 0}

/* read-only card */
.albi-wl-share-card{padding-bottom:12px}
.albi-wl-share-card__media{display:block;padding:12px 12px 6px;background:#fff}
.albi-wl-share-card__media img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:8px;background:var(--bg-2,#fafafa);
}
.albi-wl-share-card .albi-wl-card__brand{
  font-size:10px;color:var(--ink-5,#9a9a9a);text-transform:uppercase;letter-spacing:.6px;font-weight:700;
  padding:0 12px;margin-top:4px;
}
.albi-wl-share-card .albi-wl-card__name{
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13px;font-weight:600;line-height:1.3;color:var(--ink-1,#1a1a1a);min-height:34px;
  padding:0 12px;margin-top:4px;text-decoration:none;
}
.albi-wl-share-card .albi-wl-card__name:hover{color:var(--red,#DC2626)}
.albi-wl-share-card .albi-wl-card__price{padding:0 12px;margin-top:6px}
.albi-wl-share-card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px 0;margin-top:auto;
}
.albi-wl-share-qty{font-size:13px;font-weight:600;color:var(--ink-4,#6b6b6b);white-space:nowrap}
.albi-wl-share-add{flex:1;min-width:0}

/* invalid / revoked link message */
.albi-wl-share-invalid{
  max-width:560px;margin:64px auto;padding:0 24px;text-align:center;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink-1,#1a1a1a);
}
.albi-wl-share-invalid h1{margin:0 0 10px;font-size:26px;font-weight:800;letter-spacing:-.3px}
.albi-wl-share-invalid p{margin:0;color:var(--ink-4,#6b6b6b);font-size:15px;line-height:1.55}

/* =========================================================================
   (D) RESPONSIVE
   ========================================================================= */
@media (max-width:1024px){
  .albi-wl-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:768px){
  .albi-wl-header,
  .albi-wl-tabs,
  .albi-wl-toolbar{padding-left:16px;padding-right:16px}
  .albi-wl-views{padding-left:16px;padding-right:16px}
  .albi-wl-empty{padding-left:16px;padding-right:16px}
  .albi-wl-guest{padding-left:16px;padding-right:16px}
  .albi-wl-share-head,
  .albi-wl-share-grid{padding-left:16px;padding-right:16px}

  .albi-wl-grid{grid-template-columns:repeat(2,1fr)}

  /* tabs: horizontal scroll instead of overflowing the viewport */
  .albi-wl-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .albi-wl-tabs::-webkit-scrollbar{display:none}

  /* header stacks */
  .albi-wl-header{flex-direction:column;align-items:flex-start;gap:12px}
  .albi-wl-header-actions{width:100%}

  /* toolbar wraps; the two groups stack full width */
  .albi-wl-toolbar-left,
  .albi-wl-toolbar-right{width:100%;justify-content:flex-start}

  /* list rows collapse to a stacked layout (no fixed column grid) */
  .albi-wl-list-header{display:none}
  .albi-wl-row{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "select image"
      "select product"
      "select price"
      "select qty"
      "select actions";
    gap:6px 12px;align-items:start;
  }
  .albi-wl-row .albi-wl-col-select{grid-area:select;justify-self:start;align-self:start}
  .albi-wl-row .albi-wl-col-image{grid-area:image}
  .albi-wl-row .albi-wl-col-product{grid-area:product}
  .albi-wl-row .albi-wl-col-price{grid-area:price}
  .albi-wl-row .albi-wl-col-qty{grid-area:qty}
  .albi-wl-row .albi-wl-col-actions{grid-area:actions;justify-content:flex-start}

  /* empty tips stack */
  .albi-wl-empty-tips{grid-template-columns:1fr}

  /* guest single column */
  .albi-wl-guest{grid-template-columns:1fr}
  .albi-wl-guest .albi-wl-grid{grid-template-columns:1fr}
}

@media (max-width:480px){
  .albi-wl-grid{grid-template-columns:1fr}
  .albi-wl-title{font-size:24px}
}

/* =========================================================================
   (E) "Pošalji ponudu" offer modal — full-screen overlay + centered panel.
   Mirrors the theme's inquiry modal look. NOT scoped under .albi-wishlist
   because the modal renders in wp_footer, outside the page wrapper.
   ========================================================================= */
/* Honeypot: hidden off-screen (NOT display:none — bots filter that). The theme
   defines this rule too, but only on product pages; the wishlist page needs its
   own copy since the modal renders in wp_footer here. */
.albi-wl-modal .albi-bis-hp{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0 !important;overflow:hidden !important;pointer-events:none}

.albi-wl-modal{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.albi-wl-modal[hidden]{display:none}
.albi-wl-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.5)}
.albi-wl-modal-panel{
  position:relative;z-index:1;
  width:100%;max-width:480px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:#fff;border-radius:14px;padding:22px 24px 24px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  color:var(--ink-1,#1a1a1a);
}
.albi-wl-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.albi-wl-modal-title{margin:0;font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--ink-1,#1a1a1a)}
.albi-wl-modal-close{
  flex-shrink:0;appearance:none;border:none;background:transparent;cursor:pointer;
  width:32px;height:32px;border-radius:8px;margin:-4px -6px 0 0;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-4,#6b6b6b);transition:background .15s ease,color .15s ease;
}
.albi-wl-modal-close:hover{background:var(--bg-3,#f4f4f4);color:var(--ink-1,#1a1a1a)}
.albi-wl-modal-close:focus-visible{outline:2px solid var(--red,#DC2626);outline-offset:2px}

.albi-wl-offer-form{display:flex;flex-direction:column;gap:14px}
.albi-wl-offer-intro{margin:0;font-size:13px;line-height:1.5;color:var(--ink-4,#6b6b6b)}

.albi-wl-offer-buyer{
  display:flex;flex-direction:column;gap:8px;
  padding:14px 16px;border:1px solid var(--line-1,#e8e8e8);border-radius:10px;
  background:var(--bg-2,#fafafa);
}
.albi-wl-offer-buyer-row{display:flex;gap:12px;align-items:baseline;font-size:13px}
.albi-wl-offer-buyer-label{flex:0 0 64px;color:var(--ink-4,#6b6b6b);font-weight:600}
.albi-wl-offer-buyer-value{color:var(--ink-1,#1a1a1a);font-weight:600;word-break:break-word;min-width:0}
.albi-wl-offer-buyer-mono{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.4px;font-weight:500}

.albi-wl-offer-field{display:flex;flex-direction:column;gap:6px}
.albi-wl-offer-field-label{font-size:13px;font-weight:600;color:var(--ink-1,#1a1a1a)}
.albi-wl-offer-msg{
  width:100%;resize:vertical;min-height:88px;
  font-family:inherit;font-size:14px;line-height:1.45;color:var(--ink-1,#1a1a1a);
  padding:10px 12px;border:1px solid var(--line-3,#d4d4d4);border-radius:8px;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.albi-wl-offer-msg:focus{outline:none;border-color:var(--red,#DC2626);box-shadow:0 0 0 3px rgba(220,38,38,.1)}

.albi-wl-offer-captcha{min-height:0}
.albi-wl-offer-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}

/* Share-owner modal (built inline in JS; reuses .albi-wl-modal/panel/backdrop). */
.albi-wl-share-body{display:flex;flex-direction:column;gap:14px}
.albi-wl-share-url{
  width:100%;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;letter-spacing:.2px;
  color:var(--ink-1,#1a1a1a);padding:10px 12px;border:1px solid var(--line-3,#d4d4d4);border-radius:8px;
  background:var(--bg-2,#fafafa);
}
.albi-wl-share-url:focus{outline:none;border-color:var(--red,#DC2626);box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.albi-wl-share-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.albi-wl-share-actions .albi-wl-share-revoke{margin-right:auto}

@media (max-width:480px){
  .albi-wl-modal-panel{padding:18px 18px 20px}
  .albi-wl-offer-actions{flex-direction:column-reverse}
  .albi-wl-offer-actions .albi-wl-btn-primary,
  .albi-wl-offer-actions .albi-wl-btn-secondary{width:100%}
  .albi-wl-share-actions{flex-direction:column}
  .albi-wl-share-actions .albi-wl-share-revoke{margin-right:0;order:3}
  .albi-wl-share-actions .albi-wl-btn-primary,
  .albi-wl-share-actions .albi-wl-btn-secondary{width:100%}
}