/* Material samples and a lighter typographic rhythm. */



:root{font-family:"Segoe UI",Arial,sans-serif}



body{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}



h1,h2,h3,h4{font-family:"Segoe UI",Arial,sans-serif;font-weight:600;letter-spacing:-.025em;line-height:1.2}



button,input,select,textarea{font-family:inherit;font-weight:400}



.btn,.calc,nav a,.nav a,label,.price b,.sum b,.total strong{font-weight:500}



.card h3{font-weight:600;letter-spacing:-.02em}



p,.card-seo{line-height:1.7}



.color-swatches{display:flex;flex-wrap:wrap;gap:9px;height:auto;min-height:38px;margin:0 0 18px;overflow:visible}



.color-swatches .color-dot{position:relative;display:block;width:36px;height:36px;padding:0;flex:0 0 36px;border-radius:4px;border:1px solid #cfd4d1;background-image:var(--finish-image);background-size:cover;background-position:center;box-shadow:none;cursor:default;transition:transform .18s ease,box-shadow .18s ease;z-index:1}



.color-dot:hover,.color-dot:focus-visible{transform:scale(1.16);z-index:5;box-shadow:0 5px 12px #17202720;outline:2px solid #52645d;outline-offset:3px}



.color-dot .finish-tooltip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);padding:6px 9px;border-radius:4px;background:#172027;color:#fff;font-size:11px;font-weight:500;line-height:1.3;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}



.color-dot:first-child .finish-tooltip{left:0;transform:none}



.color-dot:last-child .finish-tooltip{left:auto;right:0;transform:none}



.color-dot:hover .finish-tooltip,.color-dot:focus-visible .finish-tooltip{opacity:1}



.finish-native{display:none!important}



.finish-picker{position:relative;width:100%;margin-top:8px;font-weight:400}



.finish-trigger,.finish-option{background-color:#fff;background-image:var(--finish-image);background-size:cover;background-position:center;color:var(--finish-ink);font:500 14px/1.4 "Segoe UI",Arial,sans-serif;text-align:left}



.finish-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:12px 16px;border:1px solid #cbd2d7;border-radius:9px;cursor:pointer}



.finish-trigger span:first-child,.finish-option span:first-child{text-shadow:0 1px 2px #00000020}



.finish-trigger:focus-visible,.finish-option:focus-visible{outline:2px solid #52645d;outline-offset:3px}



.finish-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:50;max-height:310px;overflow:auto;padding:6px;background:#fff;border:1px solid #dce1df;border-radius:10px;box-shadow:0 12px 30px #17202720}



.finish-list[hidden]{display:none}



.finish-option{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:43px;border:1px solid transparent;border-radius:5px;padding:10px 12px;margin:2px 0;background-image:none;color:#172027;cursor:pointer}



.finish-option:hover,.finish-option:focus,.finish-option[aria-selected="true"]{background-image:var(--finish-image);color:var(--finish-ink);border-color:#cbd2d7}



.finish-check{visibility:hidden}



.finish-option[aria-selected="true"] .finish-check{visibility:visible}



@media(max-width:640px){.color-swatches{gap:8px}.color-swatches .color-dot{width:32px;height:32px;flex-basis:32px}.finish-list{max-height:260px}}



@media(prefers-reduced-motion:reduce){.color-swatches .color-dot,.finish-tooltip{transition:none}}







/* Expanding material rail: the chosen square makes room by moving its neighbours. */



.color-swatches{flex-wrap:nowrap;align-items:center;gap:6px;height:106px;min-height:106px;margin:0 0 12px;padding-top:22px}



.color-swatches .color-dot{flex:1 1 36px;width:auto;max-width:36px;height:auto;aspect-ratio:1;min-width:0;border-radius:5px;cursor:pointer;transform:none;transition:flex-basis .32s ease,max-width .32s ease,box-shadow .22s ease}



.color-swatches .color-dot.is-expanded{flex:0 0 34%;max-width:78px;transform:none;z-index:5;outline:2px solid #52645d;outline-offset:3px;box-shadow:0 6px 16px #17202722}



.color-swatches .color-dot:hover,.color-swatches .color-dot:focus-visible{transform:none}



.color-swatches .color-dot.is-expanded .finish-tooltip{opacity:1}



.color-swatches .color-dot .finish-tooltip{font-size:11px;white-space:normal;width:max-content;max-width:100px;text-align:center}



@media(max-width:640px){.color-swatches{gap:4px;height:92px;min-height:92px}.color-swatches .color-dot{flex-basis:28px;max-width:28px}.color-swatches .color-dot.is-expanded{flex-basis:34%;max-width:70px}}



@media(prefers-reduced-motion:reduce){.color-swatches .color-dot{transition:none}}






.color-swatches{position:relative}


.swatch-close{position:absolute;right:0;top:0;width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid #d3d8d6;border-radius:50%;background:#fff;color:#172027;font:400 22px/1 Arial,sans-serif;cursor:pointer;z-index:10;box-shadow:0 2px 6px #17202712}


.swatch-close[hidden]{display:none}


.swatch-close:hover{background:#172027;color:#fff}


.swatch-close:focus-visible{outline:2px solid #52645d;outline-offset:3px}


.color-dot:nth-last-child(2) .finish-tooltip{left:auto;right:0;transform:none}




/* Let each complete product photograph determine the card height. */

.card .media,#urunler .media,#productGrid .media,#featuredGrid .media{display:block;aspect-ratio:auto;height:auto;align-self:start;background:transparent}

.card .media img,#featuredGrid .media img,.card:hover .media img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;transform:none}

.detail-main-img img{height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}


/* A clear next step from each product to dimensions and ordering. */
.card .calc{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;margin-top:18px;padding:13px 18px;border:1px solid #203b35;border-radius:8px;background:#203b35;color:#fff;font-size:14px;font-weight:500;line-height:1.4;text-decoration:none;transition:background .18s ease,box-shadow .18s ease}
.card .calc:hover{background:#2d5047;border-color:#2d5047;color:#fff;box-shadow:0 5px 14px #203b351c}
.card .calc:focus-visible{outline:2px solid #203b35;outline-offset:4px}
.card .calc .order-arrow{font-size:21px;font-weight:400;line-height:1;transition:transform .18s ease}
.card .calc:hover .order-arrow{transform:translateX(3px)}
@media(max-width:640px){.card .calc{padding:12px 10px;font-size:13px;gap:6px}.card .calc .order-arrow{font-size:18px}}
@media(prefers-reduced-motion:reduce){.card .calc,.card .calc .order-arrow{transition:none}}