/* =====================================================================
   PARABAR CATALOG — v1.3.4 (Consolidated & Mobile-ready)
   - Cards: 2:3 image, mini thumbs inside (bottom-left)
   - Rows: "Categoria — Tipo" titles
   - Modal: overlay thumbs, stable layout, desc scroll
   - WA button: icon-only (desktop+mobile)
   ===================================================================== */

/* A11y */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important}

/* Shell */
.parabar-catalog{max-width:1200px;margin:24px auto 80px;padding:0 16px}

/* Grid */
.parabar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}

/* Card */
.parabar-card{border:1px solid #ddd;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:transform .12s ease;cursor:pointer}
.parabar-card:hover{transform:translateY(-2px)}

/* Card image (2:3, no crop) */
.parabar-thumb{position:relative;display:block;background:#fafafa;border-bottom:1px solid #eee;aspect-ratio:2/3}
.parabar-thumb>img{width:100%;height:100%;object-fit:contain;display:block}

/* Title */
.parabar-card-title{display:block;padding:10px 12px 12px;font-size:14px;line-height:1.3;font-weight:600;color:#111;text-decoration:none;min-height:44px;word-break:break-word}

/* Mini thumbs inside big image (bottom-left) */
.parabar-card-thumbs{position:absolute;left:8px;bottom:8px;z-index:2;display:flex;gap:6px;flex-wrap:nowrap;align-items:center;border-radius:8px;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.parabar-card-thumb--img,.parabar-card-thumb{width:40px;height:40px;border:1px solid #cfcfcf;border-radius:4px;flex:0 0 auto;object-fit:cover}

/* Row / Section titles */
.parabar-row-title{margin:10px 0 8px;padding:6px 2px;background:#fff;font-weight:700;font-size:16px;color:#111;position:relative;z-index:1}
.parabar-type-section{margin-top:18px}

/* Category/type chips */
.parabar-cat-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 14px}
.parabar-cat-buttons .parabar-sep,#parabar-typebar .parabar-sep{flex-basis:100%;height:1px;border:0;background:#e6e6e6;margin:8px 0}
.parabar-cat-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid #e2e2e2;border-radius:9999px;background:#fff;color:#111;text-decoration:none;font-weight:600;line-height:1;box-shadow:0 1px 0 rgba(0,0,0,.04) inset;transition:border-color .15s,box-shadow .15s,transform .05s,background .15s}
.parabar-cat-btn:hover{border-color:#cfd3d5;background:#fafafa;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.parabar-cat-btn:active{transform:translateY(1px)}
.parabar-cat-btn[aria-current="page"],.parabar-cat-btn.is-active{border-color:#111;background:#111;color:#fff;box-shadow:0 3px 14px rgba(0,0,0,.08)}

/* ===================== MODAL ===================== */

.parabar-modal[aria-hidden="true"]{display:none}
.parabar-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.52);backdrop-filter:saturate(120%) blur(2px);z-index:9998}
.parabar-modal-content{position:fixed;inset:6% 4%;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden;z-index:9999}
.parabar-close{position:absolute;top:8px;right:10px;background:#fff;border:1px solid #ddd;border-radius:999px;padding:6px 9px;font-size:16px;cursor:pointer;z-index:10000}

/* Desktop: two columns */
.parabar-modal-body{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;padding:18px;overflow:auto}

/* LEFT: image area */
.parabar-modal-image{position:relative;background:#f8f8f8;border:1px solid #eee;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-height:80vh}
.parabar-modal-image img{max-width:100%;max-height:75vh;object-fit:contain;display:block}

/* Thumbs overlay (inside image) */
.parabar-modal-image .parabar-modal-thumbs{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;gap:8px;flex-wrap:nowrap;padding:6px;background:rgba(255,255,255,.95);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.18);width:auto;max-width:calc(100% - 24px);overflow-x:auto;white-space:nowrap}
.parabar-modal-image .parabar-modal-thumbs .parabar-color-thumb{width:56px;height:56px;object-fit:cover;border:1px solid #ccc;border-radius:6px;flex:0 0 auto}
.parabar-modal-image .parabar-modal-thumbs .parabar-color-thumb[aria-current="true"]{outline:2px solid #111}

/* RIGHT: details */
.parabar-modal-details{display:flex;flex-direction:column;align-items:flex-start}
.parabar-modal-title{font-size:20px;font-weight:700;margin:0 0 8px}

/* Description: own scrollbar ALWAYS */
.parabar-modal-desc{font-size:15px;line-height:1.45;color:#333;margin:0 0 16px;display:block;overflow-y:auto;overflow-x:hidden;padding-right:6px;max-height:28vh;scrollbar-width:thin}
.parabar-modal-desc::-webkit-scrollbar{width:6px}
.parabar-modal-desc::-webkit-scrollbar-thumb{background:#ccc;border-radius:6px}
.parabar-modal-desc::-webkit-scrollbar-thumb:hover{background:#aaa}

/* WhatsApp button: icon-only (Media URL) */
.parabar-wa-btn{position:relative;display:inline-flex;align-items:center;color:transparent!important;font-size:0;line-height:0;border:none;background:transparent;padding:0;margin-top:10px}
.parabar-wa-btn::before{content:"";display:inline-block;width:180px;height:120px;background:url('https://mesasecadeirasparabar.com.br/wp-content/uploads/2025/10/Digital_Inline_Green.png') center/contain no-repeat;transition:transform .2s ease,filter .2s ease}
.parabar-wa-btn:hover::before{transform:scale(1.06);filter:brightness(1.1)}

/* ===================== Responsive ===================== */

@media (max-width:720px){
  /* Modal frame + body scroll */
  .parabar-modal-content{inset:2% 2%;border-radius:10px}
  .parabar-modal-body{display:block;max-height:90vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:12px}

  /* Image keeps overlay thumbs; reserve space below for the bar */
  .parabar-modal-image{position:relative;overflow:hidden;max-height:60vh;padding-bottom:72px}
  .parabar-modal-image img{width:100%;height:auto;max-height:57vh;object-fit:contain}
  .parabar-modal-image .parabar-modal-thumbs{left:50%;bottom:8px;transform:translateX(-50%);gap:6px;padding:6px 8px;max-width:calc(100% - 16px)}
  .parabar-modal-image .parabar-modal-thumbs .parabar-color-thumb{width:44px;height:44px;border-radius:6px}

  /* Details safely below image+thumbs */
  .parabar-modal-details{margin-top:10px;background:#fff;position:relative;z-index:2}
  .parabar-modal-title{font-size:18px;margin:0 0 6px}
  .parabar-modal-desc{font-size:14px;max-height:26vh}

  /* WA button visible on mobile, compact */
  .parabar-wa-btn::before{width:40px;height:40px}
  .parabar-close{top:6px;right:6px}
}

@media (max-width:420px){
  .parabar-modal-body{max-height:88vh}
  .parabar-modal-image{padding-bottom:64px}
  .parabar-modal-image img{max-height:53vh}
  .parabar-modal-image .parabar-modal-thumbs{bottom:6px;padding:5px;gap:5px}
  .parabar-modal-image .parabar-modal-thumbs .parabar-color-thumb{width:36px;height:36px}
  .parabar-modal-desc{max-height:24vh}
  .parabar-wa-btn::before{width:36px;height:36px}
}
.parabar-card:focus,
.parabar-cat-btn:focus,
#parabar-typebar:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(17,17,17,.25);
  border-radius: 6px;
}

/* ===== Modal variant strip: bridge to new JS classes ===== */
.parabar-modal-image .parabar-variant-strip{
  position:absolute;
  left:12px; bottom:12px; z-index:3;
  background:rgba(255,255,255,.95);
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  padding:6px;
  max-width:calc(100% - 24px);
  overflow:hidden;
}

.parabar-variant-strip .parabar-variant-scroller{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
}

/* Reset button defaults and force consistent sizing */
.parabar-variant-strip .parabar-variant-thumb{
  all:unset;                 /* kill default button styles (padding, font metrics) */
  display:block;
  width:56px; height:56px;   /* desktop size */
  border:1px solid #ccc;
  border-radius:6px;
  box-sizing:border-box;
  cursor:pointer;
  flex:0 0 auto;
  line-height:0;             /* avoid baseline misalignment */
}
.parabar-variant-strip .parabar-variant-thumb img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:6px;
}

/* Active/current thumb highlight (optional) */
.parabar-variant-strip .parabar-variant-thumb[aria-current="true"]{
  outline:2px solid #111;
  outline-offset:0;
}

/* Mobile parity: center the strip and scale down */
@media (max-width:720px){
  .parabar-modal-image .parabar-variant-strip{
    left:50%; bottom:8px; transform:translateX(-50%);
    padding:6px 8px; max-width:calc(100% - 16px);
  }
  .parabar-variant-strip .parabar-variant-thumb{ width:44px; height:44px; }
}
@media (max-width:420px){
  .parabar-modal-image .parabar-variant-strip{ bottom:6px; padding:5px; }
  .parabar-variant-strip .parabar-variant-thumb{ width:36px; height:36px; }
}

/* (Optional) Card mini-thumbs button reset too, if you use them */
.parabar-card-thumbs .parabar-card-thumb{
  all:unset; display:block; width:40px; height:40px;
  border:1px solid #cfcfcf; border-radius:4px; box-sizing:border-box; cursor:pointer; line-height:0;
}
.parabar-card-thumbs .parabar-card-thumb--img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:4px; }