/*
 * Colour page styles (single-tile-colour.php).
 * Place in: /css/tile-colour.css
 * Loaded by the template with a filemtime version, so edits show without clearing caches by hand.
 * Values that depend on the page (collection grid columns, banner images, the
 * rectified/trimming switch) stay inline in the template.
 */



/* Define --css variables here */
:root {
  --single-tile--max--width:1600px;
  --single-tile--section--border--radius:10px;
  --single-tile--section--margin--bottom:2vw;
  --single-tile--section--background:#eeeeee;
  --single-tile--section--color:#222;
  --single-tile--section--link--color:#676767;
  --single-tile--section--font--size--small:13px;
  --single-tile--section--padding--top:4vw;
  --single-tile--section--padding:2vw;
  --single-tile--button--border--radius:0px;
  --single-tile--section--letter--spacing:0.05em;
  --single-tile--section--bold--font--family: 'Futura PT W01 Demi';
  --single-tile--section--medium--font--family: 'Futura PT W01 Medium';
}

.single-tile-contents .section, .glance-panel, .single-tile .accordion-section.section{
    max-width:var(--single-tile--max--width) !important;
    width: 80%;
    margin: var(--single-tile--section--padding--top) auto;
    padding:0;
}

.single-tile .accordion-section.section {padding:var(--single-tile--section--padding--top) 0;}
.single-tile .range-accordion h4 {
    text-align: left;
    border:none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: var(--single-tile--section--padding);
    padding-top: 1vw;
}

.single-tile-contents a {
    color: var(--single-tile--section--link--color);
}


.glance-favourite-button a {
    color: #000;}
 
.swatch-outlines.section {
    display: grid;
    grid-template-columns: 50% auto;
    gap: 24px;
    align-items: start;
    transition: all 0.5s ease-in-out;
    
}
.section-split-left , .section-split-right{
    float: unset;
    width: unset;
    margin-left: unset;
        
}

.single-tile-contents .colour-specs, .single-tile-contents .pt-apps-section, .single-tile-contents .pt-bespoke, .glance-panel-container, .pt-estimator, .pt-io-panel, .technical-data {
    padding:var(--single-tile--section--padding) var(--single-tile--section--padding) var(--single-tile--section--padding--top) var(--single-tile--section--padding);
    background:var(--single-tile--section--background);
    color:var(--single-tile--section--color);
    border-radius:var(--single-tile--section--border--radius);
    margin-bottom:var(--single-tile--section--margin--bottom);
}

.pt-variant-dialog {border-radius: 1vw;}



.colour-specs .pt-sizes-table td{color:var(--single-tile--section--color);}


@media screen and (max-width: 760px) {
    .swatch-outlines.section {display: flex;flex-direction: column;width:100%;}
    .section-split-left , .section-split-right{width:100%;}
    .single-tile-contents .section, .glance-panel, .single-tile .accordion-section.section{width: 98%;}
}





.tile-values div {font-size: 41px;}
span.tile-label {display: block; position: absolute; top: 79px; width: 100%; font-size: var(--single-tile--section--font--size--small); font-family: 'Futura PT W01 Book'; letter-spacing: var(--single-tile--section--letter--spacing); line-height: normal; white-space: nowrap;}

/* Main swatch carries width/height attributes (no layout shift); keep its shape */
.single-tile-swatch img {height: auto;}
.single-tile-swatch img {border-radius: var(--single-tile--section--border--radius);}

.range-menu .order-button div div{display:flex;}
.range-menu .order-button a.btn {padding: 0 10px;}
/* Sizes & finishes tables (scoped; overrides the theme's generic table styles) */
.colour-specs .pt-sizes-table {width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; margin: 0 0 24px;}
.colour-specs .pt-sizes-table tr {background: none !important;}
.colour-specs .pt-sizes-table caption.screen-reader-text {position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;}
.colour-specs .pt-sizes-table th, .colour-specs .pt-sizes-table td { width: auto !important; min-width: 0 !important; max-width: none !important; text-transform: none !important; background: none !important; padding: 10px 14px; text-align: left; vertical-align: middle; white-space: nowrap; border: 0; border-bottom: 1px solid rgba(0,0,0,0.2); background-clip: padding-box !important;}
.colour-specs .pt-sizes-table thead th {font-weight: normal; font-family: var(--single-tile--section--bold--font--family); letter-spacing: var(--single-tile--section--letter--spacing); border-bottom: 1px solid rgba(0,0,0,0.3); padding-top: 0;}
.colour-specs .pt-sizes-table .pt-sizes-table-finish {font-family: var(--single-tile--section--bold--font--family); letter-spacing: var(--single-tile--section--letter--spacing); font-weight:normal; vertical-align: top;  border-bottom-color: transparent;}
.colour-specs .pt-sizes-table tbody + tbody > tr:first-child > * {border-top: 20px solid transparent;}
.colour-specs .pt-sizes-table tbody > tr:last-child > td {border-bottom-color: rgba(0,0,0,0.2);}
.colour-specs .pt-sizes-table tbody tr:hover > td {background: rgba(0,0,0,0.08) !important;}
.colour-specs .pt-sizes-table--compact td {padding-top: 8px; padding-bottom: 8px;}

@media screen and (max-width: 760px) {
	.colour-specs .pt-sizes-table {font-size: var(--single-tile--section--font--size--small);}
	.colour-specs .pt-sizes-table th, .colour-specs .pt-sizes-table td {padding: 8px 10px;}
}
.size-outlines {width: 100%; text-align: left;}
.size-outlines svg {display: block; width: 100%; height: auto; overflow: visible;}
.size-outlines rect {fill: rgba(0,0,0,0.2); stroke: rgba(255,255,255,0.2); stroke-width: 1px; vector-effect: non-scaling-stroke;}
.size-outlines text {fill: #fff; font-family: inherit; letter-spacing: 0.05em;}
.size-outlines [hidden] {display: none;}
.size-outlines [data-tip] {cursor: default;}
.size-outlines .size-outline:hover rect {fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.6);}
.size-outlines-tip {pointer-events: none; font-size: var(--single-tile--section--font--size--small); white-space: nowrap; letter-spacing: 0.05em;}
/* Specifying questions */
.pt-specifying-item {margin: 0 0 22px;}
.pt-specifying-item h4 {margin: 0 0 6px; text-align: left; text-transform: none;}
.pt-specifying-item p {margin: 0 0 6px;}
.pt-specifying-item ul {margin: 0 0 0 1.2em; padding: 0;}
.pt-specifying-item li {margin: 0 0 4px;}

/* Applications guide */
.pt-apps-table {width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 12px;}
.pt-apps-table tr {background: none !important;}
.pt-apps-table caption.screen-reader-text {position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;}
.pt-apps-table th, .pt-apps-table td {text-transform: none !important; background: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 9px 14px; border: 0; border-bottom: 1px solid rgba(0,0,0,0.08); white-space: nowrap; text-align: left; vertical-align: middle;}
.pt-apps-table thead th {border-bottom: 1px solid rgba(0,0,0,0.3); padding-top: 0;}
.pt-apps-table thead th[data-finish], .pt-apps-table td {text-align: center;}
.pt-apps-table tbody th[scope="row"] {font-weight: normal;}
.pt-apps-table .pt-apps-group th, .pt-apps-table thead th, .range-accordion table.ptv th{font-weight: normal; font-family: var(--single-tile--section--bold--font--family); letter-spacing: var(--single-tile--section--letter--spacing); padding-top: 22px; border-bottom-color: rgba(0,0,0,0.2);}
.pt-apps-table td.is-yes {font-size: 17px !important;}
.pt-apps-table td.is-no {color: rgba(0,0,0,0.3) !important;} /* dash on the light section background */
.pt-apps-table tbody tr:not(.pt-apps-group):hover > * {background: rgba(0,0,0,0.08) !important;}
.pt-apps-table .screen-reader-text {position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);}
.pt-apps-note {font-size: var(--single-tile--section--font--size--small); opacity: 0.6; margin: 0;}
@media screen and (max-width: 760px) {
	.pt-apps-table {font-size: var(--single-tile--section--font--size--small);}
	.pt-apps-table th, .pt-apps-table td {padding: 8px 10px;}
}

/* Made to measure (bespoke) cards */
.pt-bespoke-cards {list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--single-tile--section--padding);}
.pt-bespoke-card {margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left;}
.pt-bespoke-image {position: relative; display: block; width: 100%; aspect-ratio: 6 / 5; padding: 0; margin: 0 0 14px; border: 0; background: rgba(255,255,255,0.05); cursor: pointer; overflow: hidden;}
.pt-bespoke-image img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;}
.pt-bespoke-image:hover img, .pt-bespoke-image:focus-visible img {transform: scale(1.04);}
.pt-bespoke-image:focus-visible {outline: 2px solid #fff; outline-offset: 2px;}
a.stand-button.pt-bespoke-cta, a.stand-button.pt-bespoke-more, .pt-bespoke-view {
    line-height: 30px;
    display: block;
    padding: 0 1em;
    border: 1px solid #000;
    text-decoration: none;
    letter-spacing:var(--single-tile--section--letter--spacing);
    text-transform: uppercase;
    font-size: var(--single-tile--section--font--size--small);border-radius:var(--single-tile--button--border--radius);}
a.stand-button.pt-bespoke-cta{border-color: var( --single-tile--section--link--color);color: var( --single-tile--section--link--color);}
.pt-bespoke-view {position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,0.65); color: #fff; border: none;letter-spacing: 0.15em;}
.pt-bespoke-image.is-loading .pt-bespoke-view::after {content: '…';}
.pt-bespoke-title {margin: 0 0 6px; font-size: 18px; text-transform: none;}
.pt-bespoke-lead {margin: 0 0 8px; font-weight: 600;}
.pt-bespoke-text {margin: 0 0 6px; flex: 1 0 auto;}
.pt-bespoke-note {margin: 0 0 10px; font-size: var(--single-tile--section--font--size--small); opacity: 0.6;}
.pt-bespoke-actions {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;}
.pt-bespoke-actions .stand-button {color:var(--single-tile--section--color); width: auto;}


@media screen and (max-width: 760px) {
	.pt-bespoke-cards {grid-template-columns: 1fr; gap: 32px;}
}
/* Finish buttons: sized for the narrow glance column; wrap onto centred rows */
.glance-panel {
    position: relative;
    left: unset;
    top: auto;
    transform: translate(0, 0);
    margin:-130px auto 0 auto;
    
}

.glance-panel h1{margin: 0;}
.glance-panel-container {background: rgba(255, 255, 255, 1); padding:40px var(--single-tile--section--padding) var(--single-tile--section--padding--top) var(--single-tile--section--padding);}
.glance-order-button {max-width: 550px;    margin: auto;}

@media screen and (max-width: 760px) {
	.glance-panel {width: 98%;margin:-110px auto 0 auto;}
}

.pt-finish-buttons {display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px 26px; margin: 24px auto 0px; padding: 0;}
.pt-finish-btn {position: relative; flex: 1 1 128px; max-width: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; padding: 10px 12px; font: inherit; font-family: "Futura PT W01 Book", sans-serif; font-size: 15px; line-height: 1.3; letter-spacing: 0.01em; text-transform: none; text-align: center; color: #000; background: #f6f6f6; border: 1px solid #e2e2e2; border-radius: var(--single-tile--button--border--radius); cursor: pointer; width: auto; min-width: 0; transition: background-color .15s, border-color .15s;}
.pt-finish-name {display: block; font-weight: normal; font-family: var(--single-tile--section--bold--font--family); letter-spacing: var(--single-tile--section--letter--spacing); font-size: 16px;}
.pt-finish-use {display: block;}
.pt-finish-btn:hover {background: #eee; border-color: #ccc;}
.pt-finish-btn[aria-pressed="true"] {background: #ddd; border-color: #999;}
.pt-finish-btn:focus-visible {outline: 2px solid #000; outline-offset: 3px;}
/* Divider between buttons on the same row only (the script marks the first button of each row) */
.pt-finish-buttons:not(.is-single) .pt-finish-btn::before {content: ''; position: absolute; left: -15px; top: 0; bottom: 0; border-left: 1px solid #ccc; pointer-events: none;}
.pt-finish-buttons:not(.is-single) .pt-finish-btn.is-row-start::before {display: none;}
/* One finish: same text, read as text */
.pt-finish-btn.is-text {flex: 0 1 auto; max-width: none; padding: 0; border: 0; background: none; cursor: default; font-size: 16px;}
[data-finish-view][hidden], [data-finish][hidden], [data-finishes][hidden], .pt-filter-group[hidden], .finish-filter-note[hidden] {display: none !important;}
.range-menu .range-menu-title {font-family: 'Futura PT W01 Light', sans-serif; color: #000; line-height: 40px; float: left; text-align: left; margin: 0 0 0 20px; display: inline-block; text-transform: capitalize; font-size: 33px; letter-spacing: 0.1em;}

/* Specification clause */
.pt-clauses {margin: 8px 0 0; text-align: left;}
.pt-clauses-title {margin: 0 0 4px; text-transform: none; text-align: left;}
.pt-clauses-intro {margin: 0 0 16px; font-size: var(--single-tile--section--font--size--small); opacity: 0.7;}
.pt-clause {    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--single-tile--section--padding);
    margin: var(--single-tile--section--padding) 0;
    border-radius: var(--single-tile--section--border--radius);}
.pt-clause-head {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px;}
.pt-clause-head h4 {margin: 0; text-transform: none; text-align: left;}
.pt-clause-copy {font: inherit; font-size: var(--single-tile--section--font--size--small); border-radius:var(--single-tile--button--border--radius); letter-spacing: var(--single-tile--section--letter--spacing); text-transform: uppercase; padding: 6px 14px; border: 1px solid #fff; background: none; color: #fff; cursor: pointer; white-space: nowrap; width: auto;}
.pt-clause-copy:hover, .pt-clause-copy.is-copied {background: #fff; color: #000;}
.brochure-shadow {border-radius: var(--single-tile--section--border--radius); overflow: hidden;}
.pt-clause-buttons {display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;}
.pt-clause-pdf {font: inherit; font-size: var(--single-tile--section--font--size--small); letter-spacing: var(--single-tile--section--letter--spacing); border-radius:var(--single-tile--button--border--radius); text-transform: uppercase; padding: 6px 14px; background: #fff; color: #000; cursor: pointer; width: auto;}
.pt-clause-pdf:hover {background: transparent; color: #fff;}
.pt-clause-pdf[disabled], .pt-clause-pdf[aria-busy="true"] {opacity: 0.6; cursor: wait;}
.pt-sheet-cards-intro {margin: 24px 0 10px;}
.tile-introduction{max-width: 800px;}
.paragraph-content, .call-to-action p {max-width: 1000px;}
.tile-introduction a {white-space: nowrap;}
.pt-clause-lines {margin: 0; line-height: 2;}
.pt-clause-lines div {display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,0.08);}
.pt-clause-lines dt {opacity: 0.6; margin: 0;}
.pt-clause-lines dd {margin: 0; overflow-wrap: anywhere;}
.pt-clause[hidden] {display: none !important;}
.pt-clause-pick {display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: var(--single-tile--section--font--size--small);}
.pt-clause-pick label {opacity: 0.7; letter-spacing: var(--single-tile--section--letter--spacing); text-transform: uppercase; font-size: var(--single-tile--section--font--size--small);}
.pt-clause-select {font: inherit; font-size: var(--single-tile--section--font--size--small); padding: 6px 30px 6px 10px; color: #fff; background-color: transparent; border: 1px solid rgba(255,255,255,0.4); border-radius: 0; width: auto; min-width: 180px;}
.pt-clause-select option {color: #000;}

/* Quantity & weight estimator: theme the reusable app for this dark section */
.pt-estimator {--pte-fg: #222; --pte-muted: rgba(0,0,0,0.6); --pte-border: rgba(0,0,0,0.3); --pte-accent: #999; --pte-accent-fg: #000; margin: 20px 0 0;}
.pt-estimator input, .pt-estimator select {color: #222 !important; background: transparent !important; box-shadow: none;}
.pte-modes button{border-radius:0;}
/* Inside to outside: light panel like the estimator (.pt-io-panel shares the section styles above) */
.pt-io-panel {margin: 20px 0 0;}
.pt-io-grid {display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: start; margin: 0 0 12px; text-align: left;}
.pt-io-side {border: 1px solid rgba(0,0,0,0.2); padding: 18px 20px; border-radius:var(--single-tile--section--border--radius);}
.pt-io-side h3 {margin: 0 0 2px; text-transform: none; text-align: left; color: var(--single-tile--section--color);}
.pt-io-arrow {align-self: center; font-size: 28px; opacity: 0.5;}
.pt-io-finish {margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(0,0,0,0.1);}
.pt-io-finish-name {margin: 0; font-weight: 600;}
.pt-io-finish-name span {font-weight: normal; opacity: 0.7; margin-left: 6px;}
.pt-io-use {margin: 0; font-size: var(--single-tile--section--font--size--small); opacity: 0.7;}
.pt-io-sizes {list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px;}
.pt-io-sizes li {margin: 0; padding: 4px 10px; font-size: var(--single-tile--section--font--size--small); border: 1px solid rgba(0,0,0,0.25); white-space: nowrap;}
.pt-io-sizes li.is-shared, .pt-io-key-swatch {background: var(--single-tile--section--color); color: #fff; border-color: var(--single-tile--section--color);}
.pt-io-key {font-size: var(--single-tile--section--font--size--small); color: rgba(0,0,0,0.7); margin: 0; text-align: left;}
.pt-io-key-swatch {display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: 6px;}
@media screen and (max-width: 760px) {
	.pt-io-grid {grid-template-columns: 1fr; gap: 12px;}
	.pt-io-arrow {transform: rotate(90deg); justify-self: center;}
}
@media screen and (max-width: 760px) {
	.pt-clause {padding: 14px;}
	.pt-clause-lines div {grid-template-columns: 1fr; gap: 0;}
}

/* Gallery: CSS-column masonry. DOM order is kept for PhotoSwipe; columns fill top to bottom. */
.pt-gallery-section h2{display:none;}
.pt-gallery {list-style: none !important; margin: 20px 0 0 !important; padding: 0 !important; column-count: 3; column-gap: var(--single-tile--section--padding); display: block !important;}
.pt-gallery li {display: block !important; float: none !important; width: auto !important; max-width: none !important; height: auto !important; margin: 0 0 var(--single-tile--section--padding) !important; padding: 0 !important; break-inside: avoid; page-break-inside: avoid; position: relative; overflow: hidden;}
.pt-gallery li::before {display: none !important;}
.pt-gallery a {display: block; line-height: 0; border-radius:var(--single-tile--section--border--radius); overflow:hidden;}
.pt-gallery img {display: block; width: 100% !important;  height: auto !important; max-width: none !important; margin: 0 !important; object-fit: cover; transition: transform 0.5s ease, opacity 0.3s ease;}
.pt-gallery li:hover img, .pt-gallery a:focus-visible img {transform: scale(1.03);}
.pt-gallery a:focus-visible {outline: 2px solid #fff; outline-offset: -2px;}
.pt-gallery figcaption {position: absolute !important; left: 0; right: 0; bottom: 0; top: auto !important; margin: 0 !important; padding: 28px 14px 10px !important; color: #fff !important; font-size: var(--single-tile--section--font--size--small); line-height: 1.35; letter-spacing: var(--single-tile--section--letter--spacing); text-align: left; pointer-events: none; transition: opacity 0.3s ease; width: auto !important; height: auto !important;}
.pt-gallery li.is-swatch {background: none;}
@media (hover: hover) {
	.pt-gallery figcaption {opacity: 0;}
	.pt-gallery li:hover figcaption, .pt-gallery li:focus-within figcaption {opacity: 1;}
}
.pt-gallery[data-count="1"] {column-count: 1; max-width: 900px;}
.pt-gallery[data-count="2"] {column-count: 2;}
@media screen and (max-width: 1100px) { .pt-gallery {column-count: 2;} }
@media screen and (max-width: 480px) { .pt-gallery {column-gap: 8px;} .pt-gallery li {margin-bottom: 8px !important;} .pt-gallery figcaption {font-size: 11px; padding: 20px 8px 6px !important;} }

/* Similar colours (hub data) */
.pt-similar {list-style: none; margin: 16px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px;}
.pt-similar-card {margin: 0; padding: 0; text-align: left;}
.pt-similar-card a {display: block; color: inherit; text-decoration: none;}
.pt-similar-card img {display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0 0 10px;}
.pt-similar-card a:hover img, .pt-similar-card a:focus-visible img {opacity: 0.85;}
.pt-similar-name {font-family: var(--single-tile--section--medium--font--family); letter-spacing: var(--single-tile--section--letter--spacing); display: block; letter-spacing: 0.05em;}
.pt-similar-range {display: block; font-size: var(--single-tile--section--font--size--small); opacity: 0.7; margin: 2px 0 6px;}
.pt-similar-specs, .pt-similar-shared {margin: 0 0 4px; font-size: var(--single-tile--section--font--size--small); line-height: 1.4;}
.pt-similar-shared {opacity: 0.7;}
@media screen and (max-width: 760px) {
	.pt-similar {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px;}
}

.range-accordion > h3, h3.accordian-style, h3.ui-state-default:after {line-height: 70px;}
.range-accordion h4{font-family: var(--single-tile--section--medium--font--family);}
.range-accordion table.ptv{width:100%;}

/* Range menu: page sub-menu (text on desktop, icons on mobile). Order sample is styled like the other links. */
.range-menu .range-menu-title {display: none;}
.pt-range-nav {margin: auto;}
.pt-range-nav ul {display: flex; justify-content: center; align-items: center; gap: 4px; list-style: none; margin: auto; padding: 0;}
.pt-range-nav li {margin: 0; padding: 0; list-style: none;}
.pt-range-nav-order, .pt-range-nav-order div {display: block; margin: 0; padding: 0;}
.pt-range-nav a {display: flex; align-items: center; gap: 8px; width: auto; height: 50px; margin: 0; padding: 0 12px; color: #000 !important; background: none !important; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; text-decoration: none; font-family: inherit; font-size: var(--single-tile--section--font--size--small); line-height: 1; letter-spacing: var(--single-tile--section--letter--spacing); text-transform: uppercase; white-space: nowrap;}
.pt-range-nav a:hover, .pt-range-nav a:focus-visible, .pt-range-nav a[aria-current] {border-bottom-color: #000;}
.pt-range-nav .fa {font-size: 16px; line-height: 1;}
@media screen and (max-width: 760px) {
	
	
	.pt-range-nav ul {gap: 0;}
	.pt-range-nav li {flex: 1 1 0; text-align: center;}
	.pt-range-nav a {flex-direction: column; justify-content: center; gap: 3px; height: 50px; padding: 0 4px; font-size: 10px; letter-spacing: 0.05em;}
	.pt-range-nav .fa {font-size: 20px;}
}


/* --------------------------------------------------------------------------
 * Added 26 Oct 2026 (were inline styles in the template, plus new CTAs)
 * ----------------------------------------------------------------------- */

/* Template buttons: Order free sample, View … in our showroom, Discuss your project,
   View … Tiles, Review sample order. !important matches the old inline style's strength. */
a.stand-button.pt-btn {padding: 0 20px !important; border: 1px solid var(--single-tile--section--link--color) !important; border-radius:var(--single-tile--button--border--radius); line-height:40px; display:inline-block;    text-transform: uppercase;
    font-size: var(--single-tile--section--font--size--small);
    font-family: 'Futura PT W01 Demi';
    letter-spacing: 0.15em;
    text-decoration: none;}
    .glance-panel .order-button .btn {font-size: smaller;}
a.stand-button.pt-project-link{border:1px solid #fff !important; color:#fff;}    
.glance-showroom-button a.stand-button.pt-btn{border:unset !important;}
/* "View {colour} in our showroom" under Order free sample */
.glance-showroom-button {margin-top: 12px;}

/* "Discuss your project" under the specification clause */
.pt-project-cta {margin-top: 32px;}

/* Environmental certification logos */
.pt-cert-logo {width: 100px;}

/* Edit link (admins) */
.pt-edit-link {transform: translateX(-50%);}


.single-tile .nav-down{bottom: -50px !important;}

/* ?debug output (admins) */
.pt-debug {background: #fff; color: #000; padding: 20px; font-size: var(--single-tile--section--font--size--small); max-height: 600px; overflow: auto;}

/* Grout disclaimer under the specification clause */
.pt-clause-note {margin: 10px 0 0; font-size: 12px; opacity: 0.7;}

/* Decorative Options, inside Sizes & Finishes: decors/special pieces table, then their images */
.pt-pieces {margin-top: var(--single-tile--section--padding--top);}
.pt-pieces h2 {text-align: center;}
.pt-pieces-images {list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--single-tile--section--padding) 6vw;}
.pt-pieces-images li {list-style: none; margin: 0; padding: 0; flex: 0 1 340px; text-align: center;}
.pt-pieces-images li::before {display: none;}
.pt-pieces-images a {display: block; line-height: 0;}
.pt-pieces-images img {display: block; width: 100%; height: auto;}
.pt-pieces-images figcaption {position: static !important; margin: 8px 0 0; padding: 0; background: none; font-size: var(--single-tile--section--font--size--small); line-height: 1.4; letter-spacing: var(--single-tile--section--letter--spacing); text-transform: uppercase; color: var(--single-tile--section--color); opacity: 0.8;}
@media screen and (max-width: 760px) {
	.pt-pieces-images {gap: 16px;}
	.pt-pieces-images li {flex-basis: calc(50% - 8px);}
	.single-tile .brochure-shadow{width: 170px; margin: 4vw 2vw;}
}
.pt-layouts-intro {max-width: 800px; margin: 0 auto 8px; text-align: center;}



/* Other versions of the colour (Ash ↔ Ash Arrow, Slim…), under Decorative Options: same row as the piece images */
.pt-variants {margin-top: var(--single-tile--section--padding);}
.pt-variant-card > a {display: block; line-height: 0;}
.pt-variant-card figcaption {line-height: 1.4; text-transform: none; opacity: 1;}
.pt-variant-card img {border-radius: var(--single-tile--section--border--radius); transition: opacity 0.2s;}
.pt-variant-card a:hover img, .pt-variant-card a:focus-visible img {opacity: 0.85;}
.pt-variant-name {display: block; margin: 0; font-size: var(--single-tile--section--font--size--small); letter-spacing: var(--single-tile--section--letter--spacing); text-transform: uppercase;}
.pt-variant-finishes {display: block; font-size: var(--single-tile--section--font--size--small); opacity: 0.7;}
.pt-variant-link {display: inline-block; line-height:initial !important; background: none; margin-top: 6px; font-size: var(--single-tile--section--font--size--small); color: var(--single-tile--section--link--color); text-decoration: underline; text-underline-offset: 3px;}
/* Bespoke cards: copy wrapper (image + body), "not available" note, table designer CTA */
.pt-bespoke-body {display: flex; flex-direction: column; flex: 1 0 auto; width: 100%;}
.pt-bespoke-unavailable {font-style: italic;} /* end of the card paragraph */
.pt-bespoke-alt {font-style: normal; white-space: nowrap; color: var(--single-tile--section--link--color); text-decoration: underline; text-underline-offset: 3px;}
a.stand-button.pt-bespoke-design {line-height: 30px; display: block; padding: 0 1em; border: 1px solid #000; text-decoration: none; letter-spacing: var(--single-tile--section--letter--spacing); text-transform: uppercase; font-size: var(--single-tile--section--font--size--small); border-radius: var(--single-tile--button--border--radius); color: var(--single-tile--section--color); width: auto;}

/* One suitable product (e.g. vanities only): it leads full width, image beside the copy; the other two follow side by side */
.pt-bespoke-cards--featured {grid-template-columns: repeat(2, minmax(0, 1fr));}
.pt-bespoke-cards--featured .pt-bespoke-card.is-suitable {grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--single-tile--section--padding); align-items: center;}
.pt-bespoke-cards--featured .pt-bespoke-card.is-suitable .pt-bespoke-image {margin: 0;}
.pt-bespoke-cards--featured .pt-bespoke-card.is-suitable .pt-bespoke-title {font-size: 24px; letter-spacing:unset;}
@media screen and (max-width: 760px) {
	.pt-bespoke-cards--featured {grid-template-columns: 1fr;}
	.pt-bespoke-cards--featured .pt-bespoke-card.is-suitable {grid-template-columns: 1fr;}
}

/* Request Information modal (bespoke cards): the Cognito form page in a frame */
.pt-enquiry-modal {width: min(760px, 94vw); height: min(860px, 90vh); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--single-tile--section--border--radius); background: #fff; color: var(--single-tile--section--color); overflow: hidden;}
.pt-enquiry-modal[open] {display: flex; flex-direction: column;}
.pt-enquiry-modal::backdrop {background: rgba(0, 0, 0, 0.6);}
.pt-enquiry-head {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.pt-enquiry-title {margin: 0; font-family: var(--single-tile--section--bold--font--family); letter-spacing: var(--single-tile--section--letter--spacing);}
.pt-enquiry-close {width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: none; font-size: 30px; line-height: 1; color: inherit; cursor: pointer;}
.pt-enquiry-frame {flex: 1 1 auto; width: 100%; border: 0;}
html.pt-modal-open {overflow: hidden;} /* page behind doesn't scroll */
@media screen and (max-width: 760px) {
	.pt-enquiry-modal {width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0;} /* full screen on phones */
}

/* Stone / concrete / wood colours: marble pairings inside each bespoke card */
.pt-bespoke-pair {margin: 0 0 8px; font-size: var(--single-tile--section--font--size--small);}
.pt-bespoke-marble {color: var(--single-tile--section--link--color); text-decoration: underline; text-underline-offset: 3px;}
.pt-bespoke-selection {white-space: nowrap;}
/* "Shown in another colour." hidden to keep the bespoke cards simple (still in the markup) */
.pt-bespoke-note {display: none;}
/* Top banner photo: a real <img> filling .top-banner (was a CSS background).
   The theme's banner-zoom animation stays on .top-banner, so the photo zooms with it.
   The theme's jQuery sets the full-screen height inline (style="height: …px",
   from $(window).height()); the template's inline script sets the same value
   before the theme runs, so nothing shifts (a mismatch made refreshes creep
   down the page). 100vh / 100svh is only the no-JavaScript fallback. */
.top-banner {position: relative; overflow: hidden; background-image: none !important; height: 100vh; height: 100svh;}
.top-banner img.pt-banner-img {position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center;}
/* Banner: until the photo has loaded (class added and removed by the template's script),
   the theme's banner-zoom animation waits and the photo is hidden; then the animation
   runs from the start with the photo fully drawn. Without JavaScript nothing is hidden. */
.top-banner {background-color: #2a2a2a;}
.top-banner.pt-banner-wait {animation: none !important;}
.top-banner.pt-banner-wait img.pt-banner-img {opacity: 0;}
/* Refresh part-way down the page crept ~100px further each time: the browser's
   scroll anchoring "compensates" for something above the viewport changing height
   after the scroll position is restored. Off on colour pages. */
html, body {overflow-anchor: none;}
/* Enquiry modal: the bespoke card photo or the colour banner photo under the heading (same file, already loaded), 16:9 */
.pt-enquiry-modal img.pt-enquiry-banner {display: block; flex: none; width: 100%; height: auto; max-width: none; aspect-ratio: 16 / 9; object-fit: cover; margin: 0;}
.pt-enquiry-modal img.pt-enquiry-banner[hidden] {display: none;}
@media screen and (max-width: 760px) {
	.pt-enquiry-modal img.pt-enquiry-banner {max-height: 28vh;} /* leave room for the form on phones */
}
/* Same colour in other ranges (Sizes & Finishes, #other-ranges): same cards as the variants */
.pt-other-ranges {margin-top: var(--single-tile--section--padding--top);}
.pt-variant-range {display: block; font-size: var(--single-tile--section--font--size--small); opacity: 0.7;}