/* Revision 2.3.0 — material-accurate filter artwork.
   Every option in the Our Products sidebar now shows a rendered sample of what
   it filters: a tile face for colour, a stone chip for a collection, a scaled
   plan for a size, a lit surface for a finish. */

/* ---------------------------------------------------------------------------
   Shared frame
   ------------------------------------------------------------------------ */
.aps-filter-options .aps-option-visual{
  position:relative;
  display:grid!important;
  place-items:center;
  width:64px!important;
  height:44px!important;
}

/* The "All" row gets a quiet rule rather than a sample. */
.aps-option-all .aps-option-visual:before{content:none!important}
.aps-option-visual-all i{
  display:block;
  width:30px;
  height:1px;
  background:linear-gradient(90deg,transparent,#7d7772 22%,#7d7772 78%,transparent);
}
.aps-filter-option:has(input:checked) .aps-option-visual-all i{background:linear-gradient(90deg,transparent,#f1a492 22%,#f1a492 78%,transparent)}

/* ---------------------------------------------------------------------------
   Colour — a lit tile face built from the term's own two tones
   ------------------------------------------------------------------------ */
.aps-color-swatch{background:none!important;border:0!important;box-shadow:none!important}
.aps-color-swatch:before,
.aps-color-swatch:after{content:none!important;display:none!important}

.aps-color-swatch i{
  position:relative;
  display:block;
  width:54px;
  height:34px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.26);
  border-radius:1.5px;
  background-color:var(--aps-tone,#8b817a);
  background-image:
    /* sheen across the upper-left corner */
    linear-gradient(128deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 34%,transparent 58%),
    /* mineral mottling */
    radial-gradient(120% 90% at 78% 82%,var(--aps-tone-deep,#6f665f) 0%,transparent 62%),
    radial-gradient(60% 70% at 22% 26%,rgba(255,255,255,.16) 0%,transparent 70%),
    /* fine grain */
    repeating-linear-gradient(58deg,rgba(0,0,0,.05) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,var(--aps-tone,#8b817a),var(--aps-tone-deep,#6f665f));
  box-shadow:
    inset 0 1px rgba(255,255,255,.3),
    inset 0 -1px rgba(0,0,0,.24),
    0 6px 14px rgba(0,0,0,.26);
}

/* A hairline joint, so the chip reads as tile rather than paint. */
.aps-color-swatch i:after{
  position:absolute;
  right:0;
  bottom:9px;
  left:0;
  height:1px;
  background:rgba(0,0,0,.14);
  box-shadow:0 1px rgba(255,255,255,.14);
  content:"";
}

.aps-filter-option:hover .aps-color-swatch i{border-color:rgba(241,164,146,.42)}
.aps-filter-option:has(input:checked) .aps-color-swatch i{
  border-color:#f1a492!important;
  box-shadow:inset 0 1px rgba(255,255,255,.34),0 0 0 2px rgba(241,164,146,.18),0 7px 16px rgba(0,0,0,.3)!important;
}

/* ---------------------------------------------------------------------------
   Collection — real face photo when one exists, material chip when it doesn't
   ------------------------------------------------------------------------ */
.aps-collection-thumb{
  width:58px!important;
  height:42px!important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  border-radius:2px;
  background-color:#242424;
  background-position:center;
  background-size:cover;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 5px 14px rgba(0,0,0,.26);
}

.aps-collection-chip{
  position:relative;
  display:block!important;
  width:58px!important;
  height:42px!important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  border-radius:2px;
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 5px 14px rgba(0,0,0,.26);
}
.aps-collection-chip i{position:absolute;display:block}

/* Volcanic: dense dark mineral, scattered inclusions. */
.aps-material-volcanic{
  background-color:#4a423d;
  background-image:
    radial-gradient(70% 60% at 30% 25%,rgba(255,255,255,.14),transparent 70%),
    radial-gradient(90% 80% at 76% 84%,#332d29,transparent 66%),
    repeating-linear-gradient(52deg,rgba(0,0,0,.16) 0 1px,transparent 1px 5px);
}
.aps-material-volcanic i{border-radius:50%;background:rgba(226,216,205,.34)}
.aps-material-volcanic i:nth-child(1){top:9px;left:12px;width:5px;height:4px}
.aps-material-volcanic i:nth-child(2){top:24px;left:31px;width:7px;height:5px;background:rgba(226,216,205,.22)}
.aps-material-volcanic i:nth-child(3){top:14px;left:41px;width:4px;height:4px;background:rgba(0,0,0,.3)}

/* Terrazzo: warm cream ground with visible stone fragments. */
.aps-material-terrazzo{
  background-color:#e3d6bb;
  background-image:
    radial-gradient(60% 60% at 26% 30%,rgba(255,255,255,.5),transparent 70%),
    radial-gradient(80% 80% at 78% 78%,rgba(160,142,114,.34),transparent 68%);
}
.aps-material-terrazzo i{background:rgba(122,106,86,.5)}
.aps-material-terrazzo i:nth-child(1){top:8px;left:10px;width:9px;height:6px;border-radius:40% 60% 55% 45%;transform:rotate(-14deg)}
.aps-material-terrazzo i:nth-child(2){top:22px;left:27px;width:11px;height:7px;border-radius:55% 45% 40% 60%;background:rgba(96,84,68,.42);transform:rotate(9deg)}
.aps-material-terrazzo i:nth-child(3){top:12px;left:39px;width:7px;height:7px;border-radius:50%;background:rgba(158,140,112,.55)}

/* Limestone: soft neutral with quiet horizontal grain. */
.aps-material-limestone{
  background-color:#b9b6ae;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.34),transparent 46%),
    repeating-linear-gradient(2deg,rgba(255,255,255,.16) 0 2px,transparent 2px 7px),
    radial-gradient(85% 75% at 70% 80%,rgba(112,108,100,.4),transparent 70%);
}
.aps-material-limestone i{height:1px;background:rgba(255,255,255,.42)}
.aps-material-limestone i:nth-child(1){top:13px;left:7px;width:26px}
.aps-material-limestone i:nth-child(2){top:25px;left:20px;width:30px;background:rgba(90,86,80,.3)}
.aps-material-limestone i:nth-child(3){top:32px;left:9px;width:18px}

/* Breccia: bright ground broken by angular fragments. */
.aps-material-breccia{
  background-color:#e6dcc4;
  background-image:
    radial-gradient(70% 65% at 32% 28%,rgba(255,255,255,.55),transparent 72%),
    radial-gradient(90% 85% at 80% 82%,rgba(168,150,120,.38),transparent 68%);
}
.aps-material-breccia i{background:rgba(146,128,101,.42)}
.aps-material-breccia i:nth-child(1){top:6px;left:8px;width:14px;height:10px;clip-path:polygon(0 30%,60% 0,100% 55%,35% 100%)}
.aps-material-breccia i:nth-child(2){top:20px;left:26px;width:18px;height:13px;clip-path:polygon(10% 0,100% 25%,80% 100%,0 70%);background:rgba(120,104,82,.34)}
.aps-material-breccia i:nth-child(3){top:9px;left:38px;width:12px;height:9px;clip-path:polygon(0 40%,55% 0,100% 70%,40% 100%);background:rgba(178,160,130,.5)}

/* Sedimentary: layered bands, the Tenia signature. */
.aps-material-sedimentary{
  background-color:#8e8c88;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.3),transparent 40%),
    repeating-linear-gradient(6deg,rgba(255,255,255,.14) 0 3px,rgba(0,0,0,.07) 3px 6px),
    radial-gradient(90% 80% at 74% 82%,rgba(72,70,67,.42),transparent 70%);
}
.aps-material-sedimentary i{height:1px;background:rgba(255,255,255,.4);transform:rotate(6deg)}
.aps-material-sedimentary i:nth-child(1){top:12px;left:5px;width:34px}
.aps-material-sedimentary i:nth-child(2){top:22px;left:14px;width:38px;background:rgba(60,58,55,.34)}
.aps-material-sedimentary i:nth-child(3){top:31px;left:8px;width:26px}

/* Veined: a single continuous vein across a light ground. */
.aps-material-veined{
  background-color:#e9e6df;
  background-image:
    radial-gradient(80% 70% at 30% 26%,#fff,transparent 72%),
    radial-gradient(90% 80% at 80% 84%,rgba(150,150,145,.3),transparent 70%);
}
.aps-material-veined i{background:rgba(120,122,124,.5)}
.aps-material-veined i:nth-child(1){top:4px;left:6px;width:1.5px;height:34px;transform:rotate(28deg)}
.aps-material-veined i:nth-child(2){top:14px;left:24px;width:1px;height:24px;transform:rotate(20deg);background:rgba(120,122,124,.32)}
.aps-material-veined i:nth-child(3){top:8px;left:38px;width:1px;height:18px;transform:rotate(36deg);background:rgba(120,122,124,.26)}

.aps-filter-option:hover .aps-collection-thumb,
.aps-filter-option:hover .aps-collection-chip{border-color:rgba(241,164,146,.42)}
.aps-filter-option:has(input:checked) .aps-collection-thumb,
.aps-filter-option:has(input:checked) .aps-collection-chip{
  border-color:#f1a492;
  box-shadow:0 0 0 2px rgba(241,164,146,.16),0 7px 18px rgba(0,0,0,.28);
}

/* ---------------------------------------------------------------------------
   Size — a scaled plan with a dimension rule, numerals follow the page language
   ------------------------------------------------------------------------ */
.aps-size-diagram .aps-size-plate{
  fill:rgba(255,255,255,.06);
  stroke:#b3aca6;
  stroke-width:1.2;
}
.aps-size-diagram .aps-size-rule{
  fill:none;
  stroke:#6f6a66;
  stroke-width:.8;
}
.aps-size-diagram text{
  fill:#aaa39e;
  font-family:inherit;
  font-size:6.5px;
  text-anchor:middle;
}
.aps-filter-option:hover .aps-size-diagram .aps-size-plate{stroke:#d6cec7;fill:rgba(255,255,255,.09)}
.aps-filter-option:has(input:checked) .aps-size-diagram .aps-size-plate{stroke:#f1a492;fill:rgba(241,164,146,.14)}
.aps-filter-option:has(input:checked) .aps-size-diagram .aps-size-rule{stroke:#f1a492}
.aps-filter-option:has(input:checked) .aps-size-diagram text{fill:#f1a492}

/* ---------------------------------------------------------------------------
   Finish — the difference between matte and glossy is how light behaves
   ------------------------------------------------------------------------ */
.aps-finish-mark{
  position:relative;
  display:block!important;
  width:56px!important;
  height:38px!important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  border-radius:1.5px;
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 5px 14px rgba(0,0,0,.24);
}
.aps-finish-mark i{position:absolute;display:block}

.aps-finish-mark.is-glossy{
  background:linear-gradient(132deg,#343434 0 38%,#e2e0dd 45%,#6a6663 52%,#2f2f2f 100%);
}
.aps-finish-mark.is-glossy i:nth-child(1){top:5px;right:7px;width:19px;height:1.5px;background:rgba(255,255,255,.92);transform:rotate(-42deg)}
.aps-finish-mark.is-glossy i:nth-child(2){top:11px;right:4px;width:9px;height:1px;background:rgba(255,255,255,.7);transform:rotate(-42deg)}
.aps-finish-mark.is-glossy i:nth-child(3){bottom:6px;left:8px;width:14px;height:1px;background:rgba(255,255,255,.34);transform:rotate(-42deg)}

.aps-finish-mark.is-matt{
  background:
    radial-gradient(80% 70% at 34% 30%,rgba(255,255,255,.1),transparent 70%),
    linear-gradient(160deg,#5c5854,#413e3b);
}
.aps-finish-mark.is-matt i{width:2px;height:2px;border-radius:50%;background:#7a746f}
.aps-finish-mark.is-matt i:nth-child(1){top:9px;left:11px;box-shadow:9px 5px #736e6a,24px -1px #6f6a66,33px 12px #787370,15px 18px #6a6561}
.aps-finish-mark.is-matt i:nth-child(2){top:24px;left:7px;box-shadow:22px -4px #79736e,39px 1px #6c6763}
.aps-finish-mark.is-matt i:nth-child(3){top:15px;left:44px;box-shadow:-6px 10px #736e6a}

.aps-filter-option:hover .aps-finish-mark{border-color:rgba(241,164,146,.42)}
.aps-filter-option:has(input:checked) .aps-finish-mark{
  border-color:#f1a492;
  box-shadow:0 0 0 2px rgba(241,164,146,.16),0 7px 18px rgba(0,0,0,.28);
}

/* ---------------------------------------------------------------------------
   Style scenes — inherited from 2.2.17, tightened for the new frame
   ------------------------------------------------------------------------ */
.aps-style-scene{
  width:60px!important;
  height:42px!important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:2px;
  background:linear-gradient(145deg,#343434,#252525);
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 5px 14px rgba(0,0,0,.22);
}
.aps-style-scene svg{display:block;width:100%;height:100%}

/* ---------------------------------------------------------------------------
   Panel summary keeps the translated current value readable
   ------------------------------------------------------------------------ */
.aps-filter-accordion summary b[data-aps-current]{
  overflow:hidden;
  max-width:11ch;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:767px){
  .aps-filter-options .aps-option-visual{width:58px!important;height:40px!important}
  .aps-color-swatch i{width:48px;height:30px}
  .aps-collection-thumb,.aps-collection-chip{width:52px!important;height:38px!important}
  .aps-finish-mark{width:50px!important;height:34px!important}
  .aps-style-scene{width:54px!important;height:38px!important}
}

@media (prefers-reduced-motion:reduce){
  .aps-filter-option,.aps-color-swatch i,.aps-collection-chip,.aps-finish-mark{transition:none!important}
}