/* =============================================================
   PARITAS CERAMICA — tiles.css
   Product listing: filter bar, product cards with barcode,
   3D tile viewer and enquiry modal.
   ============================================================= */

/* ---------- SHOP LAYOUT: sidebar + product column ---------- */
.shop{display:grid;grid-template-columns:290px 1fr;gap:56px;align-items:start}

/* toolbar above the grid */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--divider)}
.shop-toolbar h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.result-count{font-family:var(--font-ui);font-size:var(--fs-small);opacity:.65}

/* ---------- SIDEBAR ---------- */
.filters{position:sticky;top:104px;background:var(--paper);border:1px solid var(--divider);
  border-radius:18px;padding:8px 24px 14px;box-shadow:0 18px 44px -34px rgba(18,52,65,.4)}

.filters-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 0 16px;border-bottom:1px solid var(--divider)}
.filters-title{display:flex;align-items:center;gap:9px}
.filters-title .ico{color:var(--accent)}
.filters-head .title{font-family:var(--font-label);font-size:18px;letter-spacing:.22em;
  text-transform:uppercase;opacity:.7}
.clear-btn{font-family:var(--font-ui);font-size:18px;color:var(--accent);cursor:pointer;
  padding:5px 12px;border-radius:20px;background:var(--pale-lime);
  transition:background .25s var(--ease),color .25s var(--ease)}
.clear-btn:hover{background:var(--accent);color:#fff}

/* group */
.filter-group{padding:22px 0;border-bottom:1px solid var(--divider)}
.filter-group:last-of-type{border-bottom:0;padding-bottom:8px}
.filter-group > .legend{display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-family:var(--font-label);font-size:18px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.filter-group > .legend .ico{color:var(--accent);opacity:1}
.filter-list{display:grid;gap:2px}

/* option row */
.check{position:relative;display:flex;align-items:center;gap:12px;
  padding:10px 12px;margin-inline:-12px;border-radius:11px;cursor:pointer;
  font-family:var(--font-ui);font-size:18px;line-height:1;
  transition:background .22s var(--ease),color .22s var(--ease),opacity .22s var(--ease)}
.check:hover{background:var(--surface-b)}
.check:has(input:checked),.check.on{background:var(--pale-lime)}
.check input{position:absolute;opacity:0;width:0;height:0}

/* the box */
.check .box{position:relative;width:20px;height:20px;flex:none;border-radius:6px;
  border:1.5px solid rgba(18,52,65,.28);background:#fff;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.check:hover .box{border-color:var(--accent)}
.check .box::after{content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.3);opacity:0;
  transition:opacity .18s var(--ease),transform .2s var(--ease)}
.check input:checked + .box{background:var(--accent);border-color:var(--accent)}
.check input:checked + .box::after{opacity:1;transform:rotate(45deg) scale(1)}
.check input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:3px}

.check .label{flex:1;transition:font-weight .2s var(--ease)}
.check input:checked ~ .label,.check.on .label{font-weight:600}

/* count pill */
.check .tally{min-width:24px;height:22px;padding:0 7px;border-radius:11px;
  display:grid;place-items:center;background:var(--surface-b);
  font-size:18px;opacity:.7;font-variant-numeric:tabular-nums;
  transition:background .22s var(--ease),color .22s var(--ease),opacity .22s var(--ease)}
.check input:checked ~ .tally,.check.on .tally{background:var(--accent);color:#fff;opacity:1}
.check.is-empty{opacity:.35}
.check.is-empty:hover{background:transparent}

/* mobile filter trigger + drawer chrome (hidden on desktop) */
.filters-trigger{display:none;align-items:center;gap:10px;height:50px;padding:0 22px;
  border:1px solid var(--divider);border-radius:var(--r-pill);background:var(--paper);
  font-family:var(--font-ui);font-size:18px;cursor:pointer}
.filters-trigger .ico{color:var(--accent)}
.filters-trigger .badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--accent);color:#fff;font-size:18px;display:grid;place-items:center}
.filters-scrim{display:none}
.filters-close{display:none}

/* ---------- PRODUCT GRID ---------- */
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);margin-top:56px}
.tile-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--divider);
  border-radius:var(--r-card);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.tile-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px -34px rgba(18,52,65,.45)}
.tile-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-b)}
.tile-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.tile-card:hover .tile-media img{transform:scale(1.05)}
.tile-badge{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.92);color:var(--primary);border-radius:20px;padding:6px 13px;
  font-family:var(--font-label);font-size:18px;letter-spacing:.16em;text-transform:uppercase}
.tile-body{padding:24px;display:flex;flex-direction:column;gap:16px;flex:1}
.tile-body h3{font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.2em}
.tile-specs{display:grid;gap:7px;font-family:var(--font-ui);font-size:var(--fs-small);opacity:.8}
.tile-specs div{display:flex;justify-content:space-between;gap:16px}
.tile-specs .k{opacity:.6}

/* barcode block */
.barcode{margin-top:auto;padding-top:16px;border-top:1px solid var(--divider);display:grid;gap:6px}
.barcode canvas{width:100%;height:44px;color:var(--primary)}
.barcode .code{font-family:var(--font-ui);font-size:18px;letter-spacing:.22em;
  text-align:center;opacity:.7}

/* card actions */
.tile-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 24px 24px}
.tile-actions .btn{min-width:0;width:100%;height:50px;padding:0 14px;font-size:18px;gap:8px}
.btn.tiny-outline{--bg:transparent;--fg:var(--primary);--bd:var(--divider)}
.btn.tiny-outline:hover{--bg:var(--primary);--fg:#fff;--bd:var(--primary);opacity:1}
.tile-actions svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}

.empty-note{text-align:center;padding:80px 0;opacity:.7;font-size:var(--fs-small)}

/* ---------- MODAL SHELL (shared by viewer + enquiry) ---------- */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  background:rgba(10,22,28,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.modal.open{opacity:1;visibility:visible}
.modal-panel{position:relative;width:100%;max-width:760px;max-height:88vh;overflow:auto;
  background:var(--surface-a);border-radius:var(--r-card);padding:40px;
  transform:translateY(12px);transition:transform .4s var(--ease)}
.modal.open .modal-panel{transform:none}
.modal-close{position:absolute;right:18px;top:18px;width:46px;height:46px;border-radius:50%;
  background:var(--surface-b);display:grid;place-items:center;color:var(--primary);
  transition:transform .3s var(--ease)}
.modal-close:hover{transform:scale(.88)}
.modal-close svg{width:15px;height:15px;fill:currentColor}
.modal-head{display:grid;gap:6px;margin-bottom:28px;padding-right:56px}
.modal-head h3{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.modal-head .sub{font-family:var(--font-ui);font-size:var(--fs-small);opacity:.7}

/* ---------- 3D VIEWER ---------- */
.viewer-stage{height:min(52vh,380px);display:grid;place-items:center;perspective:1100px;
  background:linear-gradient(180deg,var(--surface-b),var(--surface-a));
  border-radius:var(--r-img);cursor:grab;touch-action:none;overflow:hidden}
.viewer-stage.grabbing{cursor:grabbing}
.viewer-stage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tile-3d{position:relative;width:210px;height:210px;transform-style:preserve-3d;
  transition:transform .08s linear;will-change:transform}
.tile-3d .face{position:absolute;inset:0;background-size:cover;background-position:center;
  border:1px solid rgba(18,52,65,.18)}
/* a tile is a thin slab: 210 x 210 x 12px */
.tile-3d .top   {transform:translateZ(6px)}
.tile-3d .bottom{transform:translateZ(-6px) rotateY(180deg);filter:brightness(.72)}
.tile-3d .edge  {background:linear-gradient(180deg,#dfe8ee,#b9c9d4);background-image:none}
.tile-3d .left  {width:12px;left:-6px;transform:rotateY(-90deg) translateZ(105px)}
.tile-3d .right {width:12px;right:-6px;transform:rotateY(90deg) translateZ(105px)}
.tile-3d .top-e {height:12px;top:-6px;transform:rotateX(90deg) translateZ(105px)}
.tile-3d .bot-e {height:12px;bottom:-6px;transform:rotateX(-90deg) translateZ(105px)}
.viewer-hint{margin-top:18px;text-align:center;font-family:var(--font-ui);font-size:18px;opacity:.6}
.viewer-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---------- ENQUIRY MODAL ---------- */
.enq-card{display:grid;gap:8px;padding:22px;background:var(--paper);
  border:1px solid var(--divider);border-radius:var(--r-img);margin-bottom:26px}
.enq-card .name{font-family:var(--font-head);font-size:1.45rem;font-weight:300}
.enq-card .code{font-family:var(--font-ui);font-size:18px;letter-spacing:.18em;opacity:.7}
.enq-card .spec{font-family:var(--font-ui);font-size:var(--fs-small);opacity:.75}
.enq-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.enq-actions .btn{width:100%;min-width:0}
.enq-note{margin-top:20px;font-family:var(--font-ui);font-size:18px;opacity:.65;line-height:1.7em}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
  .shop{grid-template-columns:250px 1fr;gap:40px}
  .tile-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .tile-grid{grid-template-columns:repeat(2,1fr)}

  /* sidebar becomes a slide-in drawer */
  .shop{grid-template-columns:1fr;gap:0}
  .filters-trigger{display:inline-flex}
  .filters{position:fixed;top:0;left:0;bottom:0;z-index:130;width:min(340px,86vw);
    background:var(--paper);padding:16px 24px 40px;overflow-y:auto;
    border:0;border-radius:0;
    transform:translateX(-102%);transition:transform .42s var(--ease);
    box-shadow:0 0 60px rgba(10,22,28,.18);display:block}
  body.filters-open .filters{transform:none}
  .filters-scrim{display:block;position:fixed;inset:0;z-index:125;background:rgba(10,22,28,.55);
    opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
  body.filters-open .filters-scrim{opacity:1;visibility:visible}
  .filters-close{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
    background:var(--surface-b);color:var(--primary);cursor:pointer}
  .filters-close svg{width:14px;height:14px;fill:currentColor}
  .filters-head{padding-top:4px}
}
@media (max-width:768px){
  .tile-grid{grid-template-columns:1fr;gap:32px;margin-top:32px}
  .shop-toolbar{padding-bottom:18px}
  .modal-panel{padding:28px 22px}
  .enq-actions{grid-template-columns:1fr}
  .viewer-stage{height:300px}
  .tile-3d{width:160px;height:160px}
  .tile-3d .left,.tile-3d .right{transform:rotateY(-90deg) translateZ(80px)}
  .tile-3d .right{transform:rotateY(90deg) translateZ(80px)}
  .tile-3d .top-e{transform:rotateX(90deg) translateZ(80px)}
  .tile-3d .bot-e{transform:rotateX(-90deg) translateZ(80px)}
}

/* ---------- icon alignment inside cards / sidebar ---------- */
.tile-specs .k{display:inline-flex;align-items:center;gap:7px}
.tile-specs .k .ico{color:var(--accent);opacity:.85}
.filter-group > .legend{display:flex;align-items:center;gap:9px}
.filter-group > .legend .ico{color:var(--accent)}
.barcode{position:relative}
.tile-actions .btn .ico{stroke-width:2}

/* ---------- 18px MINIMUM adjustments ---------- */
/* count pills grow to hold 18px numerals */
.check .tally{min-width:34px;height:30px;padding:0 10px;border-radius:15px}
.check{padding:12px 12px;font-size:var(--fs-body)}
.check .box{width:22px;height:22px}
.check .box::after{left:7px;top:3px}

/* card + badge chrome */
.tile-badge{padding:8px 16px;letter-spacing:.1em}
.tile-specs{font-size:var(--fs-small)}
.barcode .code{letter-spacing:.12em;font-size:var(--fs-small)}
.filters-trigger{height:56px;font-size:var(--fs-body)}
.filters-trigger .badge{min-width:26px;height:26px;border-radius:13px;padding:0 8px}
.clear-btn{padding:7px 16px;border-radius:24px}
.tile-actions .btn{height:56px;font-size:var(--fs-body);padding:0 16px}
.enq-card .code,.enq-card .spec{letter-spacing:.08em}

/* ---------- catalogue picker inside each card ---------- */
.cat-picker{display:grid;gap:8px;margin-top:auto;padding-top:4px}
.cat-label{font-family:var(--font-label);font-size:var(--fs-small);letter-spacing:.1em;
  text-transform:uppercase;opacity:.6}
.cat-picker .form-input{height:54px}