*{
  box-sizing:border-box}
body{
  margin:0;
  background:#faf7f2;
  color:#26231f;
  font-family:Arial,Helvetica,sans-serif}
button,input,select{
  font:inherit}
button,a,select{
  cursor:pointer}
button{
  color:inherit}
a{
  color:inherit;
  text-decoration:none}
header{
  height:84px;
  background:white;
  border-bottom:1px solid #e9dfd2;
  display:flex;
  align-items:center;
  padding:0 5%;
  gap:58px}
.logo{
  font-size:29px;
  font-weight:900;
  letter-spacing:-2px}
.logo i{
  color:#ff8e25;
  font-style:normal}
nav{
  display:flex;
  gap:30px;
  font-size:14px}
nav a:first-child{
  font-weight:700}
.saved{
  margin-left:auto;
  background:none;
  border:1px solid #e5d9c9;
  border-radius:var(--ui-radius);
  padding:11px 17px}
.wrap{
  max-width:1440px;
  margin:auto;
  padding:32px 5%}
.hero{
  background:#fff0dc;
  border-radius:var(--ui-radius);
  min-height:360px;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  position:relative}
.hero-copy{
  padding:46px 46px;
  z-index:1}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:11px;
  font-weight:bold;
  color:#9b470c}
.hero h1{
  font-size:53px;
  line-height:1.06;
  letter-spacing:-2.4px;
  margin:19px 0}
.hero p{
  color:#6d5f52;
  font-size:15px;
  line-height:1.7;
  max-width:340px}
.primary{
  display:inline-block;
  background:#ff8e25;
  color:white;
  border:0;
  padding:14px 21px;
  border-radius:var(--ui-radius);
  font-size:13px}
.hero-art{
  position:relative;
  background:radial-gradient(ellipse at center,#ffe0b2,transparent 65%);
  display:flex;
  align-items:center;
  justify-content:center}
.hero-art svg{
  width:95%;
  height:350px;
  filter:drop-shadow(0 25px 15px #7b3d192b)}
.intro{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:40px 0 22px}
h2{
  font-size:27px;
  letter-spacing:-.8px;
  margin:0 0 8px}
.muted{
  font-size:13px;
  color:#74685c}
.search{
  width:310px;
  background:white;
  border:1px solid #e5d9c9;
  border-radius:var(--ui-radius);
  padding:13px 15px}
.categories{
  display:flex;
  gap:9px;
  margin-bottom:28px;
  overflow:auto}
.chip{
  white-space:nowrap;
  background:white;
  border:1px solid #e5d9c9;
  border-radius:var(--ui-radius);
  padding:11px 18px;
  font-size:12px}
.chip.active{
  background:#26231f;
  color:white;
  border-color:#26231f}
.catalog{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:30px}
.sidebar{
  padding:7px 22px 0 0;
  border-right:1px solid #e5d9c9}
.filter-title{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  font-weight:bold;
  margin-bottom:25px}
.textbtn{
  border:0;
  background:none;
  color:#9b470c;
  padding:0;
  font-size:11px}
.filter-group{
  padding-bottom:22px;
  margin-bottom:23px;
  border-bottom:1px solid #e5d9c9}
.filter-group h3{
  font-size:12px;
  margin:0 0 16px}
.check{
  display:flex;
  gap:9px;
  align-items:center;
  font-size:12px;
  margin:13px 0;
  color:#74685c}
.check input{
  accent-color:#a64b0b}
input[type=range]{
  width:100%;
  accent-color:#a64b0b}
.range-labels{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#74685c}
.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  font-size:12px;
  color:#74685c}
.toolbar select{
  border:0;
  background:transparent;
  color:#493c30;
  font-size:12px}
.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px}
.card{
  border:1px solid #e9dfd2;
  background:white;
  border-radius:var(--ui-radius);
  overflow:hidden;
  transition:transform .2s,box-shadow .2s}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px #7d4a1718}
.image{
  background:#f3eee6;
  height:205px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center}
.image svg{
  width:85%;
  height:170px;
  filter:drop-shadow(0 12px 9px #4b311d25)}
.heart{
  position:absolute;
  right:12px;
  top:12px;
  border:0;
  border-radius:50%;
  background:white;
  width:29px;
  height:29px;
  font-size:18px;
  z-index:1}
.heart.on{
  color:#9b470c;
  background:#ffe0b7}
.card-body{
  padding:18px}
.brand{
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:9px;
  color:#806b58}
.card h3{
  font-size:15px;
  margin:8px 0}
.desc{
  font-size:11px;
  color:#74685c;
  margin:0 0 18px}
.card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between}
.price{
  font-size:17px;
  font-weight:bold}
.detail{
  font-size:11px;
  border:1px solid #e5d9c9;
  background:white;
  border-radius:var(--ui-radius);
  padding:8px 10px}
.empty{
  padding:60px;
  text-align:center;
  grid-column:1/-1;
  color:#74685c}
footer{
  margin-top:55px;
  border-top:1px solid #e5d9c9;
  padding:26px 0;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#74685c}
dialog{
  border:0;
  border-radius:var(--ui-radius);
  padding:32px;
  width:min(520px,90vw);
  box-shadow:0 30px 100px #0003}
dialog::backdrop{
  background:#26231fb8}
dialog .image{
  border-radius:var(--ui-radius);
  margin:20px 0}
dialog p{
  font-size:14px;
  color:#6d5f52;
  line-height:1.7}
.close{
  float:right;
  background:none;
  border:0;
  font-size:24px}
dialog ul{
  font-size:13px;
  line-height:2;
  color:#695744}
.demo{
  font-size:10px;
  color:#74685c}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:1px solid #a64b0b;
  outline-offset:3px}
@media(min-width:1600px){
  .wrap{
  padding-left:40px;
  padding-right:40px}
}
@media(max-width:1000px){
  .hero h1{
  font-size:42px}
.hero-copy{
  padding:35px}
.grid{
  grid-template-columns:repeat(2,1fr)}
nav{
  gap:16px}
header{
  gap:30px}
}
@media(max-width:650px){
  header{
  height:70px;
  padding:0 6%}
nav{
  display:none}
.wrap{
  padding:20px 6%}
.hero{
  grid-template-columns:1fr}
.hero-copy{
  padding:29px}
.hero h1{
  font-size:42px}
.hero-art{
  height:230px}
.hero-art svg{
  height:250px}
.intro{
  display:block}
.search{
  width:100%;
  margin-top:18px}
.catalog{
  grid-template-columns:1fr}
.sidebar{
  border:0;
  padding:0;
  display:flex;
  gap:20px;
  flex-wrap:wrap}
.filter-title{
  width:100%;
  margin-bottom:0}
.filter-group{
  margin:0;
  padding:0;
  border:0;
  flex:1}
.filter-group h3{
  margin:8px 0}
.check{
  margin:8px 0}
.sidebar .filter-group:last-child{
  display:none}
.grid{
  gap:12px}
.image{
  height:155px}
.image svg{
  height:130px}
.card-body{
  padding:13px}
.card h3{
  font-size:13px}
.desc{
  line-height:1.5;
  min-height:30px}
.card-bottom{
  align-items:start;
  gap:8px;
  flex-direction:column}
.toolbar{
  margin-top:15px}
footer{
  gap:20px;
  line-height:1.5}
}

.brand-logo{
  display:block;
  width:130px;
  height:auto;
  aspect-ratio:638/325;
  object-fit:contain}
footer .brand-logo{
  width:120px}
@media(max-width:650px){
  header .brand-logo{
  width:110px}
}

:root{
  --brand:#ff8e25;
  --brand-dark:#9b470c;
  --ink:#26231f;
  --paper:#faf7f2;
  --line:#e5d9c9;
  --tint:#fff0dc}

html{
  scroll-behavior:smooth;
  scroll-padding-top:24px}

header{
  background:#fff;
  box-shadow:0 2px 12px #68421c05}

.hero{
  background:linear-gradient(115deg,#fff4e5 5%,#ffead0 56%,#ffc37e 100%);
  border:1px solid #f0dcc1}

.hero-art{
  background:radial-gradient(ellipse at center,#ffb15e75,transparent 67%)}

.hero h1{
  color:var(--ink)}

.primary{
  color:var(--ink);
  font-weight:700;
  box-shadow:0 5px 16px #c968191c;
  transition:background .2s,transform .2s}

.primary:hover{
  background:#ffad61;
  transform:translateY(-2px)}

.chip{
  transition:background .18s,border-color .18s}

.chip:hover:not(.active){
  background:#fff0dc;
  border-color:#e3ac73}

.chip.active{
  box-shadow:inset 0 -3px 0 #ff8e25}

.image{
  background:radial-gradient(ellipse at 50% 42%,#fffdf9,#f1e9de)}

.heart:hover{
  background:#ffe0b7;
  color:#9b470c}

.detail{
  transition:background .18s,border-color .18s}

.detail:hover{
  background:#fff0dc;
  border-color:#e3ac73;
  color:#8e3e07}

.textbtn:hover{
  text-decoration:underline}

.search:focus{
  border-color:#a64b0b}

.price{
  color:#30261e}

.card:hover{
  border-color:#e3ba8d}

footer{
  border-top:1px solid #efb67d}

::selection{
  background:#ffcf9f;
  color:#26231f}


.categories{
  flex-wrap:wrap;
  overflow:visible}
.chip{
  white-space:normal;
  text-align:left;
  line-height:1.4;
  padding:11px 14px}
.sidebar{
  width:210px}
.catalog{
  grid-template-columns:210px 1fr}
.filter-select{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--ui-radius);
  background:white;
  padding:12px 9px;
  font-size:12px;
  color:#493c30}
.sidebar .filter-group:last-child{
  display:block}
.catalog-heading{
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#9b470c;
  margin-bottom:12px}
.image{
  background:#fff;
  height:220px;
  border-bottom:1px solid #f1e9de}
.product-photo{
  width:88%;
  height:88%;
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .25s}
.card:hover .product-photo{
  transform:scale(1.04)}
.image img{
  filter:none}
.card .brand{
  line-height:1.5;
  display:block;
  letter-spacing:.6px}
.card h3{
  font-size:20px;
  letter-spacing:-.5px;
  overflow-wrap:anywhere}
.desc{
  font-size:12px;
  line-height:1.55;
  min-height:38px;
  margin-bottom:16px}
.source-label{
  font-size:10px;
  color:#806b58}
.card-bottom{
  gap:12px}
.hero-art .product-photo{
  height:310px;
  width:85%;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 14px 12px #65422216)}
.hero p{
  max-width:420px}
.hero h1{
  font-size:49px}
.hero .eyebrow{
  line-height:1.6}
.hero-art{
  min-height:340px}
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  margin-top:30px;
  font-size:12px;
  color:#74685c}
.pagination button{
  padding:10px 15px;
  border:1px solid var(--line);
  background:white;
  border-radius:var(--ui-radius)}
.pagination button:disabled{
  opacity:.4;
  cursor:default}
.catalog-note{
  font-size:11px;
  color:#74685c;
  line-height:1.7;
  margin-top:20px}
.detail-photo{
  height:300px!important;
  border:1px solid #eee5d9}
.detail-photo img{
  height:92%;
  width:92%;
  object-fit:contain;
  cursor:zoom-in}
.model-label{
  font-size:12px;
  color:#9b470c;
  letter-spacing:.7px;
  margin-bottom:8px}
.official-link{
  display:inline-block;
  margin-top:14px}
.modal-category{
  font-size:11px!important;
  color:#806b58!important}
dialog{
  max-height:90vh;
  overflow:auto}
dialog h2{
  font-size:25px}
.photo-link{
  display:block;
  width:100%;
  height:100%;
  text-align:center;
  padding:10px}
.photo-link img{
  width:100%;
  height:100%;
  object-fit:contain}
.sidebar .filter-group{
  padding-bottom:20px;
  margin-bottom:20px}
.stat-line{
  font-size:11px;
  letter-spacing:.5px;
  color:#8e3e07;
  margin-top:19px}
.error-message{
  background:#fff0dc;
  border:1px solid #e5d9c9;
  padding:25px;
  border-radius:var(--ui-radius);
  grid-column:1/-1;
  line-height:1.7}
.image-fallback{
  font-size:12px;
  color:#806b58}
.saved{
  white-space:nowrap}
.search{
  max-width:100%}
@media(max-width:1000px){
  .catalog{
  grid-template-columns:185px 1fr}
.sidebar{
  width:185px}
.hero h1{
  font-size:40px}
.hero-copy{
  padding:30px}
}
@media(max-width:650px){
  .catalog{
  grid-template-columns:1fr}
.sidebar{
  width:100%;
  display:block}
.sidebar .filter-title{
  margin-bottom:14px}
.sidebar .filter-group{
  display:inline-block;
  width:100%;
  margin-bottom:12px;
  padding:0}
.sidebar .filter-group h3{
  margin-bottom:8px}
.sidebar .catalog-note{
  display:none}
.hero-art{
  min-height:240px;
  height:240px}
.hero-art .product-photo{
  height:230px}
.hero-copy{
  padding:27px}
.hero h1{
  font-size:39px}
.card h3{
  font-size:16px}
.image{
  height:180px}
.desc{
  font-size:11px;
  min-height:50px}
.categories{
  gap:7px}
.chip{
  font-size:11px;
  padding:9px 11px}
.detail{
  font-size:10px}
.pagination{
  gap:10px}
.toolbar{
  gap:10px}
.hero p{
  font-size:14px}
}

.image{
  background:radial-gradient(ellipse at center,#fcf9f4,#f3eee6)}
.product-photo,.hero-art .product-photo{
  mix-blend-mode:normal}

.hero{
  min-height:450px;
  isolation:isolate}
.hero-copy{
  align-self:center;
  padding-top:43px;
  padding-bottom:43px}
.hero-art{
  min-height:450px;
  display:block;
  overflow:hidden;
  touch-action:pan-y}
.hero-feature-label{
  position:absolute;
  top:28px;
  left:50%;
  transform:translateX(-50%);
  font-size:9px;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:#8e4d1d;
  white-space:nowrap;
  z-index:2}
.hero-stage{
  position:absolute;
  inset:38px 0 65px}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(60px) scale(.92) rotate(4deg);
  transition:opacity .7s ease,transform .85s cubic-bezier(.2,.7,.2,1);
  pointer-events:none}
.hero-slide.is-active{
  opacity:1;
  transform:translateX(0) scale(1) rotate(0)}
.hero-product{
  position:absolute;
  inset:0 0 90px;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:hero-float 6s ease-in-out infinite}
.hero-art .hero-product .product-photo{
  height:100%;
  width:77%;
  max-height:245px;
  object-fit:contain;
  filter:drop-shadow(0 20px 13px #743e2528);
  mix-blend-mode:normal}
.hero-product-caption{
  position:absolute;
  bottom:3px;
  text-align:center;
  width:100%;
  padding:0 16px}
.hero-product-caption>span{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1.3px;
  color:#8e4d1d}
.hero-product-caption strong{
  display:block;
  font-size:24px;
  letter-spacing:-.8px;
  color:#32271c;
  margin-top:7px}
.hero-product-caption p{
  max-width:none!important;
  margin:5px 0 0;
  color:#806047;
  font-size:12px;
  line-height:1.4}
.hero-slider-controls{
  position:absolute;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:11px;
  align-items:center;
  z-index:3;
  white-space:nowrap}
.hero-slide-count{
  font-size:9px;
  color:#7f5c3f;
  letter-spacing:1px;
  margin-left:3px;
  font-variant-numeric:tabular-nums}
@keyframes hero-float{
  0%,100%{
  transform:translateY(0) rotate(-1deg)}
50%{
  transform:translateY(-10px) rotate(1deg)}
}
@keyframes hero-orbit{
  to{
  transform:rotate(360deg)}
}
@keyframes hero-progress{
  from{
  width:0}
to{
  width:100%}
}
@media(max-width:1000px){
  .hero-slide-count{
  display:none}
.hero-slider-controls{
  gap:9px}
}
@media(max-width:650px){
  .hero{
  min-height:0}
.hero-copy{
  padding:28px 27px 12px}
.hero-art{
  min-height:375px;
  height:375px}
.hero-feature-label{
  top:14px}
.hero-stage{
  inset:35px 0 61px}
.hero-art .hero-product .product-photo{
  max-height:205px;
  width:75%}
.hero-product-caption strong{
  font-size:22px}
.hero-slider-controls{
  bottom:17px}
.hero-slide-count{
  display:block}
}
@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
.hero-slide{
  transition:none;
  transform:none}
}

.hero-slide{
  transform:none;
  transition:opacity 1.1s cubic-bezier(.45,0,.55,1)}
.hero-slide.is-active{
  transform:none}
.hero-product{
  animation:none}
.hero-stage{
  inset:38px 0 30px}
@media(max-width:650px){
  .hero-stage{
  inset:35px 0 23px}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide{
  transition:none}
}
.hero-slide .hero-feature-label{
  top:-10px;
  font-size:11px;
  letter-spacing:2px;
  text-align:center;
  width:calc(100% - 32px);
  white-space:normal;
  line-height:1.5}
.hero-product-caption strong{
  font-size:34px;
  letter-spacing:-1px;
  margin:0}
.hero-product-caption{
  bottom:17px}
@media(max-width:650px){
  .hero-slide .hero-feature-label{
  top:-21px;
  font-size:10px}
.hero-product-caption strong{
  font-size:30px}
.hero-product-caption{
  bottom:12px}
}

header{
  gap:30px}
.order-open{
  margin-left:auto;
  white-space:nowrap;
  border:0;
  border-radius:var(--ui-radius);
  background:#26231f;
  color:white;
  padding:12px 15px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.4px;
  display:flex;
  align-items:center;
  gap:9px}
.order-open span{
  background:#ff8e25;
  color:#26231f;
  min-width:22px;
  padding:4px 5px;
  border-radius:var(--ui-radius);
  font-size:10px}
.saved{
  margin-left:0}
.add-order-row{
  display:flex;
  gap:9px;
  margin-top:17px;
  padding-top:16px;
  border-top:1px solid #eee2d2;
  align-items:end}
.qty-label{
  font-size:9px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#796553;
  display:grid;
  gap:4px}
.product-qty{
  width:55px;
  height:36px;
  border:1px solid #dfd0bd;
  border-radius:var(--ui-radius);
  padding:7px;
  background:#fffdf9;
  color:#26231f;
  font-size:12px}
.add-order{
  flex:1;
  height:36px;
  border:1px solid #ff8e25;
  border-radius:var(--ui-radius);
  background:#ff8e25;
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  color:#26231f;
  transition:background .2s}
.add-order:hover{
  background:#ffac60}
.order-toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translate(-50%,15px);
  background:#26231f;
  color:#fff6e9;
  padding:14px 22px;
  border-radius:var(--ui-radius);
  font-size:13px;
  box-shadow:0 7px 30px #0002;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  z-index:100;
  width:max-content;
  max-width:90vw}
.order-toast.visible{
  opacity:1;
  transform:translate(-50%,0)}
#order-dialog{
  width:min(960px,94vw);
  padding:32px;
  max-height:90vh;
  overflow:auto}
#order-heading{
  margin-top:12px;
  font-size:29px}
.order-intro{
  margin:10px 0 25px!important;
  font-size:13px!important}
.order-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px}
.order-layout h3{
  font-size:14px;
  margin:0 0 16px}
.order-summary{
  background:#faf7f2;
  border:1px solid #eee3d4;
  border-radius:var(--ui-radius);
  padding:18px;
  align-self:start}
.order-summary-head{
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:10px}
#order-unit-count{
  font-size:11px;
  color:#806b58;
  margin-bottom:10px}
#order-items{
  max-height:450px;
  overflow:auto}
.order-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 0;
  border-top:1px solid #e7dcca}
.order-item img{
  object-fit:contain;
  width:64px;
  height:64px;
  flex-shrink:0}
.order-item-info{
  min-width:0;
  flex:1}
.order-item-info strong{
  display:block;
  font-size:13px;
  overflow-wrap:anywhere}
.order-item-info>span{
  display:block;
  font-size:10px;
  line-height:1.5;
  color:#806b58;
  margin:4px 0 8px}
.order-item-info label{
  font-size:10px;
  color:#806b58}
.order-item-info input{
  width:65px;
  padding:6px;
  border:1px solid #dfd0bd;
  border-radius:var(--ui-radius);
  background:white;
  font-size:12px;
  margin-left:7px}
.remove-order{
  align-self:start;
  background:none;
  border:0;
  font-size:21px;
  color:#8e4d1d;
  padding:0 2px}
.order-empty{
  padding:25px 0;
  font-size:13px}
.order-empty p{
  font-size:12px!important}
.order-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px}
.order-fields label{
  font-size:11px;
  color:#695744;
  display:flex;
  flex-wrap:wrap;
  gap:4px}
.order-fields label>span{
  color:#9b470c}
.order-fields input,.order-fields textarea{
  width:100%;
  border:1px solid #dfd0bd;
  border-radius:var(--ui-radius);
  padding:10px;
  font-size:13px;
  background:#fffdf9;
  color:#26231f;
  resize:vertical}
.full-field{
  grid-column:1/-1}
.order-destination{
  font-size:10px;
  color:#806b58;
  margin:18px 0 13px;
  line-height:1.7}
.order-destination strong{
  display:block;
  color:#493c30;
  font-size:12px}
.order-send{
  width:100%;
  font-size:11px;
  letter-spacing:.4px}
.order-mail-note{
  font-size:10px!important;
  line-height:1.6!important;
  margin:12px 0 0!important}
#order-status{
  font-size:12px!important;
  color:#8e3e07!important;
  line-height:1.6!important}
button:disabled{
  cursor:not-allowed;
  opacity:.4}
@media(max-width:1000px){
  header{
  gap:16px}
nav{
  gap:16px}
nav a{
  font-size:12px}
.order-open{
  padding:10px;
  font-size:10px}
}
@media(max-width:650px){
  header{
  gap:10px}
.order-open{
  margin-left:auto;
  padding:8px;
  font-size:8px;
  gap:5px;
  letter-spacing:0}
.order-open span{
  min-width:19px;
  font-size:9px}
.saved{
  font-size:10px;
  padding:8px 9px}
.order-layout{
  grid-template-columns:1fr;
  gap:24px}
#order-dialog{
  padding:22px 18px}
.add-order-row{
  gap:7px;
  flex-wrap:wrap}
.qty-label{
  width:100%}
.product-qty{
  width:100%}
.add-order{
  width:100%;
  flex:auto}
.order-item{
  gap:8px}
.order-item img{
  width:55px;
  height:55px}
#order-items{
  max-height:300px}
.order-fields{
  gap:11px}
.order-fields label{
  font-size:10px}
.order-toast{
  font-size:12px;
  padding:12px 15px}
}

.datasheet-options{
  margin-top:18px;
  color:#795b42;
  font-size:12px;
  line-height:1.7}
.datasheet-options summary{
  cursor:pointer;
  color:#9b470c}
.datasheet-options ul{
  padding-left:18px!important;
  font-size:11px!important;
  line-height:1.7!important}
.datasheet-options a{
  text-decoration:underline;
  overflow-wrap:anywhere}

.showcase-hero{
  grid-template-columns:.43fr .57fr;
  min-height:560px;
  border-radius:var(--ui-radius);
  border:1px solid #513019;
  background:radial-gradient(ellipse at 76% 48%,#78370f24,transparent 62%),#100f0e;
  box-shadow:0 22px 45px #33211017;
  overflow:hidden}
.showcase-hero:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,#ff8e25,transparent 65%);
  z-index:4}
.showcase-hero .hero-copy{
  padding:48px 0 48px 46px;
  align-self:center;
  z-index:3}
.showcase-hero .hero-copy .eyebrow{
  color:#ffb065;
  font-size:10px;
  letter-spacing:1.8px;
  line-height:1.6}
.showcase-hero .hero-copy .eyebrow:before{
  content:'';
  display:inline-block;
  width:22px;
  height:2px;
  background:#ff8e25;
  vertical-align:middle;
  margin-right:10px}
.showcase-hero h1{
  color:#fff8ed;
  font-size:clamp(38px,4.15vw,58px);
  font-weight:750;
  line-height:1.07;
  letter-spacing:-2.7px;
  margin:24px 0 21px}
.showcase-hero h1 span{
  color:#ff8e25}
.showcase-hero .hero-copy>p{
  color:#c4b7a7;
  font-size:14px;
  line-height:1.85;
  max-width:355px;
  margin-bottom:28px}
.showcase-hero .primary{
  background:#ff8e25;
  color:#21150a;
  border:1px solid #ffab5d;
  box-shadow:0 7px 28px #ff8e2530;
  padding:15px 22px;
  font-size:12px;
  font-weight:700}
.showcase-hero .primary:hover{
  background:#ffae62;
  box-shadow:0 9px 35px #ff8e2540}
.showcase-hero .stat-line{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #b9875938;
  color:#c7b49f;
  font-size:10px;
  letter-spacing:.6px;
  max-width:355px}
.showcase-hero .hero-art{
  min-height:560px;
  background:none;
  overflow:hidden}
.showcase-hero .hero-stage{
  inset:0}
.showcase-hero .hero-slide{
  transform:none;
  transition:opacity 1.2s cubic-bezier(.45,0,.55,1)}
.showcase-hero .hero-slide.is-active{
  transform:none}
.showcase-hero .hero-slide .hero-feature-label{
  top:33px;
  left:50%;
  color:#ffb065;
  letter-spacing:2.2px;
  font-size:10px;
  width:calc(100% - 50px);
  line-height:1.5}
.showcase-hero .hero-product{
  inset:56px -15px 81px;
  animation:none}
.showcase-hero .hero-scene{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  filter:none;
  mix-blend-mode:normal;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 96%,transparent)}
.showcase-hero .hero-product-caption{
  bottom:31px;
  padding:0 16px}
.showcase-hero .hero-product-caption strong{
  font-size:26px;
  font-weight:650;
  letter-spacing:-.9px;
  line-height:1.3;
  color:#fff4e6;
  text-shadow:0 2px 16px #0008}
.showcase-hero .hero-product-caption strong:before{
  content:'';
  display:block;
  width:27px;
  height:2px;
  background:#ff8e25;
  margin:0 auto 13px}
@media(max-width:1100px){
  .showcase-hero .hero-copy{
  padding-left:33px}
.showcase-hero h1{
  font-size:43px;
  letter-spacing:-2px}
.showcase-hero .hero-copy>p{
  font-size:13px;
  max-width:310px}
.showcase-hero .hero-product-caption strong{
  font-size:22px}
.showcase-hero .hero-slide .hero-feature-label{
  font-size:9px;
  letter-spacing:1.7px}
.showcase-hero .stat-line{
  font-size:9px;
  line-height:1.8;
  max-width:280px}
}
@media(max-width:850px) and (min-width:651px){
  .showcase-hero{
  grid-template-columns:.45fr .55fr}
.showcase-hero h1{
  font-size:36px}
.showcase-hero .hero-copy{
  padding-left:27px}
.showcase-hero .hero-product-caption strong{
  font-size:19px}
.showcase-hero .hero-product{
  inset:80px -18px 110px}
}
@media(max-width:650px){
  .showcase-hero{
  grid-template-columns:1fr;
  min-height:0;
  border-radius:var(--ui-radius)}
.showcase-hero .hero-copy{
  padding:29px 27px 14px}
.showcase-hero h1{
  font-size:38px;
  letter-spacing:-2px;
  margin:20px 0 17px;
  line-height:1.07}
.showcase-hero .hero-copy .eyebrow{
  font-size:8px;
  letter-spacing:1.25px}
.showcase-hero .hero-copy>p{
  font-size:13px;
  line-height:1.7;
  max-width:100%;
  margin-bottom:22px}
.showcase-hero .primary{
  padding:13px 18px;
  font-size:11px}
.showcase-hero .stat-line{
  max-width:100%;
  margin-top:23px;
  padding-top:16px;
  font-size:9px;
  letter-spacing:.3px}
.showcase-hero .hero-art{
  min-height:365px;
  height:365px}
.showcase-hero .hero-product{
  inset:37px -15px 63px}
.showcase-hero .hero-slide .hero-feature-label{
  top:15px;
  font-size:9px;
  letter-spacing:1.6px}
.showcase-hero .hero-product-caption{
  bottom:19px}
.showcase-hero .hero-product-caption strong{
  font-size:21px;
  letter-spacing:-.6px}
.showcase-hero .hero-product-caption strong:before{
  margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){
  .showcase-hero .hero-slide{
  transition:none}
}


.full-width-hero.showcase-hero{
  display:block;
  width:100%;
  min-height:620px;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#100f0e;
  position:relative;
  isolation:isolate;
  overflow:hidden}
.full-width-hero.showcase-hero:before{
  display:none}
.full-width-hero .hero-copy{
  position:relative;
  z-index:4;
  width:39%;
  max-width:500px;
  margin-left:max(5vw,calc((100% - 1296px)/2));
  padding:107px 0 100px;
  align-self:auto}
.full-width-hero .hero-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  background:none;
  z-index:1;
  overflow:hidden}
.full-width-hero .hero-stage{
  position:absolute;
  inset:0}
.full-width-hero .hero-slide{
  isolation:isolate;
  overflow:hidden}
.hero-scene-backdrop{
  position:absolute;
  inset:-60px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  filter:blur(38px) brightness(.43);
  transform:scale(1.08);
  pointer-events:none;
  z-index:0}
.full-width-hero .hero-slide:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#100f0ef5 0%,#100f0edb 25%,#100f0e75 43%,#100f0e00 62%),linear-gradient(0deg,#100f0e75,transparent 26%);
  pointer-events:none;
  z-index:2}
.hero-visual{
  position:absolute;
  top:0;
  bottom:0;
  right:max(0px,calc((100% - 1440px)/2));
  width:60%;
  max-width:850px;
  z-index:1}
.full-width-hero .hero-product{
  inset:48px -5px 76px;
  animation:none}
.full-width-hero .hero-scene{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  mix-blend-mode:lighten;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 94%,transparent)}
.full-width-hero .hero-slide .hero-feature-label{
  top:29px;
  left:50%;
  z-index:3;
  color:#ffc084}
.full-width-hero .hero-product-caption{
  bottom:29px;
  z-index:3}
.full-width-hero .hero-copy>p{
  max-width:360px}
.full-width-hero .stat-line{
  max-width:360px}
.catalog-wrap{
  padding-top:1px}
.catalog-wrap .intro{
  margin-top:42px}
@media(min-width:1600px){
  .full-width-hero{
  min-height:660px!important}
.full-width-hero .hero-copy{
  padding-top:125px;
  padding-bottom:120px}
}
@media(max-width:1000px) and (min-width:651px){
  .full-width-hero.showcase-hero{
  min-height:570px}
.full-width-hero .hero-copy{
  width:39%;
  margin-left:5%;
  padding:98px 0 88px}
.full-width-hero h1{
  font-size:38px}
.full-width-hero .hero-product{
  inset:61px -12px 84px}
.full-width-hero .hero-slide .hero-feature-label{
  font-size:9px;
  top:38px}
.full-width-hero .hero-product-caption strong{
  font-size:20px}
}
@media(max-width:650px){
  .full-width-hero.showcase-hero{
  min-height:730px}
.full-width-hero .hero-copy{
  width:auto;
  max-width:none;
  margin:0;
  padding:31px 6% 0}
.full-width-hero h1{
  font-size:39px;
  letter-spacing:-2px;
  max-width:360px}
.full-width-hero .hero-copy>p{
  max-width:390px;
  font-size:13px;
  margin-bottom:21px}
.full-width-hero .stat-line{
  max-width:390px;
  margin-top:22px;
  padding-top:15px}
.full-width-hero .hero-art{
  position:absolute;
  inset:0;
  height:100%;
  min-height:0}
.hero-visual{
  top:auto;
  bottom:0;
  right:0;
  width:100%;
  max-width:none;
  height:365px}
.full-width-hero .hero-product{
  inset:37px -8px 61px}
.full-width-hero .hero-slide .hero-feature-label{
  top:14px;
  font-size:9px}
.full-width-hero .hero-product-caption{
  bottom:18px}
.full-width-hero .hero-product-caption strong{
  font-size:21px}
.hero-scene-backdrop{
  background-position:center bottom;
  background-size:auto 82%;
  filter:blur(32px) brightness(.42)}
.full-width-hero .hero-slide:after{
  background:linear-gradient(180deg,#100f0ef8 0%,#100f0eef 24%,#100f0ea6 42%,#100f0e00 66%)}
.catalog-wrap .intro{
  margin-top:32px}
}
@media(max-width:370px){
  .full-width-hero.showcase-hero{
  min-height:760px}
.full-width-hero h1{
  font-size:35px}
.hero-visual{
  height:350px}
}

.full-width-hero .hero-visual{
  z-index:3}
@media(min-width:1600px){
  .full-width-hero .hero-copy{
  margin-left:calc((100% - 1360px)/2)}
}
.full-width-hero .hero-scene{
  mix-blend-mode:normal;
  mask-image:none;
  -webkit-mask-image:none}
.full-width-hero.showcase-hero{
  background:#100f0e}

/* Product crossfade with eased opacity and no horizontal movement. */
.full-width-hero .hero-stage{
  overflow:hidden}

.full-width-hero .hero-track{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  transform:none;
  transition:none}

.full-width-hero .hero-track .hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  visibility:visible;
  transform:none;
  transition:opacity 1200ms cubic-bezier(.45,0,.55,1);
  animation:none;
  pointer-events:none}
.full-width-hero .hero-track .hero-slide.is-active{
  opacity:1}

@media(prefers-reduced-motion:reduce){
  .full-width-hero .hero-track .hero-slide{
  transition:none}
}


/* Soft studio lighting and grounded product shadows, inspired by the reference. */
.card>.image,dialog .detail-photo{
  
 isolation:isolate;
  overflow:hidden;
  
 background:radial-gradient(ellipse at 25% 27%,#ede3d3 0%,transparent 48%),radial-gradient(ellipse at 72% 86%,#e5e1da 0%,transparent 60%),linear-gradient(145deg,#c7c2b9 0%,#d2cec7 52%,#bdbab3 100%);
  
 border:0;
  border-radius:var(--ui-radius);
  
}

.card>.image{
  margin:12px 12px 0;
  height:220px}

.card>.image:before,dialog .detail-photo:before{
  
 content:'';
  position:absolute;
  z-index:0;
  pointer-events:none;
  
 left:19%;
  right:15%;
  bottom:11%;
  height:17%;
  
 background:radial-gradient(ellipse,#443a2d52 0%,#55463428 38%,transparent 72%);
  
 filter:blur(9px);
  transform:rotate(-7deg);
  
}

.card>.image .product-photo,dialog .detail-photo .product-photo{
  
 position:relative;
  z-index:1;
  width:82%;
  height:82%;
  object-fit:contain;
  
 filter:drop-shadow(7px 13px 7px #362d2340) drop-shadow(1px 3px 2px #31291e24);
  
}

.card>.image .heart{
  z-index:3;
  background:#ffffffeb;
  box-shadow:0 2px 8px #342a1d0c}

dialog .detail-photo{
  height:300px}

dialog .detail-photo .photo-link{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px}

@media(max-width:650px){
  .card>.image{
  height:180px;
  margin:8px 8px 0;
  border-radius:var(--ui-radius)}
dialog .detail-photo{
  height:260px}
}


/* Full-bleed studio plate shares the cutouts' orange backlight and floor. */
.full-width-hero.showcase-hero{
  
 background-color:#100f0e;
  
 background-image:linear-gradient(90deg,#100f0ed9 0%,#100f0e85 30%,transparent 59%),url('assets/hero/orange-studio-backdrop-1600.webp');
  
 background-image:linear-gradient(90deg,#100f0ed9 0%,#100f0e85 30%,transparent 59%),image-set(url('assets/hero/orange-studio-backdrop-1600.webp') 1x,url('assets/hero/orange-studio-backdrop.webp') 2x);
  
 background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  
}

.full-width-hero .hero-slide:after{
  background:none}

@media(max-width:650px){
  
 .full-width-hero.showcase-hero{
  
  background-image:linear-gradient(180deg,#100f0e 0%,#100f0e 45%,#100f0eaa 55%,transparent 72%),url('assets/hero/orange-studio-backdrop-960.webp');
  
  background-size:100% 100%,auto 365px;
  background-position:center,74% bottom;
  
 }

}

@media(max-width:370px){
  .full-width-hero.showcase-hero{
  background-size:100% 100%,auto 350px}
}


.full-width-hero .hero-copy #catalog-stats{
  font-size:19px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:0;
  text-transform:none;
  color:#fff}

.full-width-hero #catalog-stats .catalog-product-count{
  color:#ff8e25;
  font-weight:750}

@media(max-width:650px){
  .full-width-hero .hero-copy #catalog-stats{
  font-size:17px}
}


/* High-contrast product highlight, also available to keyboard navigation. */
.card{
  transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,border-color .25s ease}

.card:is(:hover,:focus-within){
  background:#26231f;
  border-color:#ff8e25;
  transform:translateY(-6px);
  box-shadow:0 16px 35px #26231f30}

.card:is(:hover,:focus-within) h3{
  color:#fff}

.card:is(:hover,:focus-within) .brand{
  color:#ffac60}

.card:is(:hover,:focus-within) :is(.desc,.source-label,.qty-label){
  color:#e4d9cb}

.card:is(:hover,:focus-within) .detail{
  background:#ff8e25;
  color:#26231f;
  border-color:#ff8e25}

.card:is(:hover,:focus-within) .add-order-row{
  border-top-color:#ffffff30}

.card:is(:hover,:focus-within)>.image{
  background:radial-gradient(ellipse at 45% 66%,#e5b57c 0%,#c5b39c 48%,#9c9182 100%)}

dialog .detail-photo .photo-link{
  padding:0}

dialog .detail-photo .product-photo{
  width:100%;
  height:100%;
  transform:scale(var(--detail-product-scale,1));
  transform-origin:center}

@media(prefers-reduced-motion:reduce){
  .card{
  transition:none}
.card:is(:hover,:focus-within){
  transform:none}
}


/* The selected card opens with the same permanent highlighted finish. */
#modal:has(:is(.detail-photo,.about-content)){
  background:#26231f;
  color:#fff;
  border:1px solid #ff8e25;
  box-shadow:0 30px 100px #0008;
  border-radius:var(--ui-radius)}

#modal:has(:is(.detail-photo,.about-content)) h2{
  color:#fff}

#modal:has(:is(.detail-photo,.about-content)) :is(.eyebrow,.model-label){
  color:#ffac60}

#modal:has(:is(.detail-photo,.about-content)) :is(p,ul,.qty-label,.catalog-note,.datasheet-options){
  color:#e4d9cb}

#modal:has(:is(.detail-photo,.about-content)) .modal-category{
  color:#e4d9cb!important}

#modal:has(:is(.detail-photo,.about-content)) :is(.catalog-note a,.datasheet-options a,.datasheet-options summary){
  color:#ffac60}

#modal:has(:is(.detail-photo,.about-content)) .detail-photo{
  background:radial-gradient(ellipse at 45% 66%,#e5b57c 0%,#c5b39c 48%,#9c9182 100%);
  border:0;
  border-radius:var(--ui-radius)}

#modal:has(:is(.detail-photo,.about-content)) .add-order-row{
  border-top-color:#ffffff30}

#modal:has(:is(.detail-photo,.about-content)) :is(.detail,.primary){
  background:#ff8e25;
  color:#26231f;
  border-color:#ff8e25}

#modal:has(:is(.detail-photo,.about-content)) :is(.detail,.primary):hover{
  background:#ffac60;
  border-color:#ffac60}

#modal:has(:is(.detail-photo,.about-content)) .close{
  background:#fff;
  color:#26231f;
  border:1px solid #ff8e25;
  border-radius:var(--ui-radius)}

#modal:has(:is(.detail-photo,.about-content)) :is(button,a,input):focus-visible{
  outline:1px solid #ffac60;
  outline-offset:3px}

#modal:has(:is(.detail-photo,.about-content)) .official-link:disabled{
  background:#484139;
  color:#d5c6b5;
  border-color:#655745;
  cursor:not-allowed}


/* Header actions share the catalog filter chip design. */
header nav{
  gap:8px}

header :is(nav a,.order-open,.saved){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#fff;
  color:#26231f;
  border:1px solid #e5d9c9;
  border-radius:var(--ui-radius);
  padding:11px 14px;
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:0;
  white-space:nowrap;
  text-decoration:none;
  transition:background .18s,border-color .18s}

header :is(nav a,.order-open,.saved):hover{
  background:#fff0dc;
  border-color:#e3ac73}

header .order-open,header .saved[aria-pressed="true"]{
  background:#26231f!important;
  color:#fff;
  border-color:#26231f;
  box-shadow:inset 0 -1px 0 #ff8e25}

header .order-open:hover,header .saved[aria-pressed="true"]:hover{
  background:#3b332a!important;
  border-color:#ff8e25}

header :is(nav a,.order-open,.saved):focus-visible{
  outline:1px solid #ff8e25;
  outline-offset:3px}

@media(max-width:1100px) and (min-width:651px){
  header{
  gap:12px}
header :is(nav a,.order-open,.saved){
  font-size:11px;
  padding:9px 11px}
header nav{
  gap:6px}
}

@media(max-width:650px){
  header :is(.order-open,.saved){
  font-size:10px;
  padding:9px 10px;
  gap:5px}
}

@media(max-width:370px){
  header :is(.order-open,.saved){
  font-size:9px;
  padding:8px;
  gap:4px}
}


/* Highlighted header actions match the active category filter exactly. */
header :is(nav a,.order-open,.saved):is(:hover,:focus-visible,:active),header .saved[aria-pressed="true"]:hover{
  
 background:#26231f!important;
  color:#fff;
  border-color:#26231f;
  box-shadow:inset 0 -1px 0 #ff8e25;
  
}


header nav a[aria-current="page"],header .order-open[aria-expanded="true"],header .saved[aria-pressed="true"]{
  
 background:#26231f!important;
  color:#fff;
  border-color:#26231f;
  box-shadow:inset 0 -1px 0 #ff8e25;
  
}


/* Larger retina-sharp SVG brand and warm filter-hover finish when idle. */
header{
  height:auto;
  min-height:112px;
  padding-top:6px;
  padding-bottom:6px}

header .logo{
  flex-shrink:0}

header .brand-logo{
  width:195px;
  height:auto}

header nav a:not([aria-current="page"]):not(:hover):not(:focus-visible):not(:active),
header .order-open:not([aria-expanded="true"]):not(:hover):not(:focus-visible):not(:active),
header .saved:not([aria-pressed="true"]):not(:hover):not(:focus-visible):not(:active){
  
 background:#fff0dc!important;
  color:#26231f;
  border-color:#e3ac73;
  box-shadow:none;
  
}

@media(max-width:1100px) and (min-width:651px){
  header{
  flex-wrap:wrap;
  gap:10px}
header nav{
  order:3;
  flex-basis:100%;
  justify-content:center;
  padding-bottom:8px}
}

@media(max-width:650px){
  header{
  flex-wrap:wrap;
  justify-content:center;
  padding-top:8px;
  padding-bottom:14px;
  gap:10px}
header .logo{
  flex-basis:100%}
header .brand-logo{
  width:165px;
  margin:auto}
header .order-open{
  margin-left:0}
header .saved{
  margin-left:0}
}


.showcase-hero .hero-copy .hero-collection-brand{
  display:flex;
  align-items:center;
  gap:10px}

.showcase-hero .hero-copy .hero-collection-brand:before{
  display:none;
  content:none}

.hero-collection-brand img{
  display:block;
  width:100px;
  height:auto;
  flex-shrink:0}

.hero-collection-brand span{
  white-space:nowrap}

@media(max-width:650px){
  .hero-collection-brand img{
  width:85px}
.showcase-hero .hero-copy .hero-collection-brand{
  gap:8px}
}


header .order-open:not([aria-expanded="true"]):not(:hover):not(:focus-visible):not(:active){
  background:#ff8e25!important;
  color:#26231f;
  border-color:#26231f;
  box-shadow:inset 0 -1px 0 #26231f}


header .order-open #order-count{
  font-size:15px;
  font-weight:750;
  line-height:1.2;
  min-width:28px;
  padding:4px 6px;
  text-align:center}

header .order-open:not([aria-expanded="true"]):not(:hover):not(:focus-visible):not(:active) #order-count{
  background:#fff;
  color:#26231f}

@media(max-width:650px){
  header .order-open #order-count{
  font-size:14px;
  min-width:26px}
}


header{
  --header-counter-size:calc(15px - 1pt)}

header .order-open #order-count,header .saved #saved-count,header .saved .saved-heart{
  font-size:var(--header-counter-size);
  line-height:1.2}

header .saved #saved-count{
  font-weight:750}

@media(max-width:650px){
  header{
  --header-counter-size:calc(14px - 1pt)}
}


header .saved .saved-heart{
  color:inherit}

header .order-open{
  font-size:calc(12px - 1pt);
  font-weight:750}

@media(max-width:1100px) and (min-width:651px){
  header .order-open{
  font-size:calc(11px - 1pt)}
}

@media(max-width:650px){
  header .order-open{
  font-size:calc(10px - 1pt)}
}

@media(max-width:370px){
  header .order-open{
  font-size:calc(9px - 1pt)}
}


.sidebar .manufacturer-logo{
  display:block;
  width:130px;
  max-width:100%;
  height:auto}


.card-manufacturer-logo{
  display:block;
  width:82px;
  height:auto;
  flex-shrink:0}

.card:is(:hover,:focus-within) .card-manufacturer-logo{
  filter:brightness(0) invert(1)}

#modal .detail-manufacturer-logo{
  display:block;
  width:110px;
  height:auto}


#modal .specification-unavailable{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:14px}

#modal .specification-unavailable .official-link{
  margin:0;
  flex:0 0 auto;
  max-width:50%;
  white-space:normal;
  text-align:center}

#modal .specification-unavailable .catalog-note{
  margin:0;
  flex:1;
  min-width:0;
  font-size:11px;
  line-height:1.5}

@media(max-width:370px){
  #modal .specification-unavailable{
  gap:10px}
#modal .specification-unavailable .official-link{
  padding:12px 10px;
  font-size:10px}
}


.card :is(.detail,.add-order),#modal:has(:is(.detail-photo,.about-content)) :is(.detail,.add-order){
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px}

#modal:has(:is(.detail-photo,.about-content)) .add-order-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  align-items:stretch}

#modal:has(:is(.detail-photo,.about-content)) .add-order-row .qty-label{
  grid-column:1/-1;
  width:max-content}

#modal:has(:is(.detail-photo,.about-content)) .add-order-row :is(.add-order,.review-order){
  width:100%;
  height:auto;
  min-height:44px;
  margin:0;
  padding:10px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  line-height:1.35}

#modal .page-icon{
  flex-shrink:0;
  width:16px;
  height:16px}


#modal:has(:is(.detail-photo,.about-content)) .add-order-row{
  grid-template-columns:62px minmax(0,1fr) minmax(0,1.2fr);
  align-items:end}

#modal:has(:is(.detail-photo,.about-content)) .add-order-row .qty-label{
  grid-column:auto;
  width:100%;
  min-width:0}

#modal:has(:is(.detail-photo,.about-content)) .add-order-row .product-qty{
  width:100%;
  height:44px}

@media(max-width:400px){
  #modal:has(:is(.detail-photo,.about-content)) .add-order-row{
  grid-template-columns:50px minmax(0,1fr) minmax(0,1.2fr);
  gap:6px}
#modal:has(:is(.detail-photo,.about-content)) .add-order-row :is(.add-order,.review-order){
  padding:8px 5px;
  gap:4px;
  min-height:48px}
#modal:has(:is(.detail-photo,.about-content)) .add-order-row .product-qty{
  height:48px}
#modal .page-icon{
  width:13px;
  height:13px}
}


.card h3{
  font-size:calc(20px - 2pt);
  color:#ff8e25}

.card:is(:hover,:focus-within) h3{
  color:#fff}

#modal:has(:is(.detail-photo,.about-content)) h2{
  font-size:calc(25px - 2pt)}

@media(max-width:650px){
  .card h3{
  font-size:calc(16px - 2pt)}
}


.card{
  --product-card-radius:var(--ui-radius);
  border-radius:var(--ui-radius)}

.card>.image{
  border-radius:var(--ui-radius)}


.card{
  border-width:1px}

.card:is(:hover,:focus-within,:active){
  border-width:1px;
  box-shadow:0 16px 35px #26231f30}

.card .card-body>.brand{
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px solid #eee2d2}

.card:is(:hover,:focus-within,:active) .card-body>.brand{
  border-bottom-color:#ffffff30}


.sidebar .filter-heading,.sidebar .filter-group h3{
  font-size:14px;
  font-weight:700;
  color:#74685c;
  text-transform:uppercase;
  line-height:1.4}

.sidebar .filter-title{
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom:1px solid #e5d9c9;
  align-items:center;
  gap:8px}


.sidebar .filter-title{
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:14px}

.sidebar .family-reset{
  display:flex;
  justify-content:flex-end;
  margin-bottom:9px}


.catalog{
  --catalog-meta-size:12px}

.sidebar .family-reset{
  justify-content:flex-start}

.sidebar #reset,.catalog .toolbar{
  font-size:var(--catalog-meta-size)}

@media(min-width:651px){
  
 .catalog>.sidebar{
  padding-top:0}

 .catalog .toolbar{
  margin-top:0;
  align-items:flex-start;
  line-height:19.6px}

 .catalog .toolbar select{
  padding-top:0;
  padding-bottom:0;
  line-height:19.6px;
  vertical-align:top}

}


.sidebar #family{
  appearance:none;
  -webkit-appearance:none;
  padding-right:36px;
  background-image:url('assets/select-chevron.svg');
  background-repeat:no-repeat;
  background-size:16px 16px;
  background-position:right 12px center}

@media(forced-colors:active){
  .sidebar #family{
  appearance:auto;
  background-image:none}
}


.sidebar .filter-heading,.sidebar .filter-group h3{
  text-transform:none}

#modal .official-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px}

#modal .pdf-icon{
  flex-shrink:0;
  width:22px;
  height:22px}

#modal .pdf-icon-label{
  fill:#ff8e25}

#modal .official-link:hover .pdf-icon-label{
  fill:#ffac60}

#modal .official-link:disabled .pdf-icon-label{
  fill:#484139}


/* Shared spacing rhythm: 4, 8, 12, 16, 24, 32, 48 and 64 pixels. */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-16:64px}

header{
  column-gap:24px}

header nav{
  gap:8px}

.full-width-hero .hero-copy>p{
  margin-top:0;
  margin-bottom:24px}

.full-width-hero .stat-line{
  margin-top:24px;
  padding-top:16px}

.catalog-wrap{
  padding-top:0;
  padding-bottom:0}

.catalog-wrap .intro{
  margin:48px 0 24px;
  gap:24px}

.intro h2{
  margin-top:0;
  margin-bottom:8px}

.categories{
  gap:8px;
  margin-bottom:32px}

.catalog{
  gap:32px;
  align-items:start}

.catalog .toolbar{
  margin-bottom:24px;
  gap:16px}

.grid{
  gap:24px}

.sidebar .filter-title{
  margin-bottom:16px}

.sidebar .family-reset{
  margin-bottom:8px}

.sidebar .filter-group{
  padding-bottom:24px;
  margin-bottom:24px}

.sidebar .filter-group h3{
  margin-top:0;
  margin-bottom:12px}

.sidebar .catalog-note{
  margin:0;
  line-height:1.7}

.card{
  display:flex;
  flex-direction:column}

.card>.image{
  margin:12px 12px 0;
  flex-shrink:0}

.card .card-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  flex:1}

.card .card-body>.brand{
  padding-bottom:12px;
  margin-bottom:12px}

.card h3{
  margin:0 0 8px}

.card .desc{
  margin:0 0 16px}

.card .card-bottom{
  margin-top:auto;
  gap:12px}

.card .add-order-row{
  margin-top:16px;
  padding-top:16px;
  gap:8px}

.pagination{
  gap:16px;
  margin-top:32px}

footer{
  margin-top:64px;
  padding:32px 0;
  gap:24px;
  align-items:center;
  flex-wrap:wrap}

dialog{
  padding:32px}

#modal .detail-photo{
  margin:24px 0}

#modal .model-label{
  margin-bottom:8px}

#modal h2{
  margin:0 0 12px}

#modal .modal-category{
  margin:0 0 16px}

#modal:has(:is(.detail-photo,.about-content)) .add-order-row{
  margin-top:24px;
  padding-top:16px;
  gap:12px}

#modal .official-link{
  margin-top:16px}

#modal .specification-unavailable{
  margin-top:16px;
  gap:16px}

#modal .specification-unavailable .official-link{
  margin:0}

#modal .datasheet-options{
  margin-top:16px}

#modal>.catalog-note{
  margin-top:24px;
  margin-bottom:0}

#order-dialog{
  padding:32px}

.order-intro{
  margin:12px 0 24px!important}

.order-layout{
  gap:32px}

.order-summary{
  padding:24px}

.order-summary-head{
  gap:12px}

.order-fields{
  gap:16px}

.order-fields label{
  gap:8px}

.order-destination{
  margin:24px 0 16px}


@media(max-width:1100px){
  header{
  gap:12px}
.catalog{
  gap:24px}
}

@media(max-width:650px){
  
 header{
  gap:12px;
  padding-top:8px;
  padding-bottom:16px}

 .wrap{
  padding-left:6%;
  padding-right:6%}

 .catalog-wrap .intro{
  margin-top:32px;
  margin-bottom:24px}

 .intro .search{
  margin-top:16px;
  width:100%}

 .categories{
  margin-bottom:24px}

 .catalog{
  gap:24px}

 .catalog .toolbar{
  margin-top:0;
  margin-bottom:16px;
  gap:12px;
  flex-wrap:wrap}

 .sidebar .filter-group{
  padding-bottom:16px;
  margin-bottom:16px}

 .grid{
  gap:16px}

 .card>.image{
  margin:8px 8px 0}

 .card .card-body{
  padding:12px}

 .card .card-body>.brand{
  padding-bottom:8px;
  margin-bottom:12px}

 .pagination{
  gap:12px;
  margin-top:24px}

 footer{
  margin-top:48px;
  padding:24px 0;
  gap:16px}

 dialog,#order-dialog{
  padding:24px 20px}

 #modal .detail-photo{
  margin:16px 0}

 #modal:has(:is(.detail-photo,.about-content)) .add-order-row{
  gap:8px}

 #modal .specification-unavailable{
  gap:12px}

 .order-layout{
  gap:24px}

 .order-summary{
  padding:16px}

 .order-fields{
  gap:12px}

}

@media(max-width:370px){
  .grid{
  gap:12px}
#modal:has(:is(.detail-photo,.about-content)) .add-order-row{
  gap:6px}
}


.catalog .toolbar{
  border-bottom:1px solid #e5d9c9;
  padding-bottom:16px}


footer{
  display:block;
  width:100%;
  background:#806b58;
  color:#fff;
  border:0;
  padding:0;
  margin-top:64px}

footer .footer-inner{
  max-width:1440px;
  margin:0 auto;
  padding:32px 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap}

footer .brand-logo{
  width:108px;
  height:auto}

footer a,footer span{
  color:#fff}

@media(max-width:1100px) and (min-width:651px){
  footer .footer-inner{
  padding-left:40px;
  padding-right:40px}
}

@media(max-width:650px){
  footer{
  margin-top:48px}
footer .footer-inner{
  padding:24px 6%;
  gap:16px}
}


:root{
  --ui-radius:6px}


#modal:has(:is(.detail-photo,.about-content)) .detail-photo{
  margin-bottom:12px}

#modal:has(:is(.detail-photo,.about-content)) .modal-category{
  margin-top:0;
  margin-bottom:16px}

#modal:has(:is(.detail-photo,.about-content)) h2{
  margin-bottom:8px}

#modal:has(:is(.detail-photo,.about-content)) .model-label{
  margin-bottom:16px}


#modal:has(:is(.detail-photo,.about-content)) p.product-description{
  color:#ff8e25;
  margin-top:16px;
  margin-bottom:0}


:root{
  --ui-line-width:1px}

*,*::before,*::after{
  border-width:var(--ui-line-width)}

:focus-visible{
  outline-width:var(--ui-line-width)}


header #order-open{
  border:0!important;
  outline:none!important}


#modal:has(:is(.detail-photo,.about-content)){
  border:1px solid #ff8e25;
  box-shadow:0 30px 100px #0008}

#modal:has(:is(.detail-photo,.about-content)) .close{
  border:0;
  box-shadow:none}


header :is(nav a,.order-open,.saved):is(:hover,:focus-visible,:active),
header nav a[aria-current="page"],header .order-open[aria-expanded="true"],header .saved[aria-pressed="true"],header .saved[aria-pressed="true"]:hover{
  box-shadow:inset 0 -3px 0 #ff8e25}

header .order-open:not([aria-expanded="true"]):not(:hover):not(:focus-visible):not(:active){
  box-shadow:inset 0 -3px 0 #26231f}


.catalog-select{
  position:relative;
  display:inline-block;
  max-width:100%;
  vertical-align:top;
  text-align:left}

.sidebar .catalog-select{
  display:block;
  width:100%}

.catalog-select select[hidden],.select-menu[hidden]{
  display:none!important}

.select-trigger{
  display:flex;
  width:100%;
  min-height:44px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  background:linear-gradient(135deg,#514438,#3b332c);
  color:#fff;
  border:1px solid #806b58;
  border-radius:var(--ui-radius);
  font-size:12px;
  line-height:1.4;
  text-align:left;
  box-shadow:0 4px 12px #26231f0d;
  transition:background .18s,border-color .18s}

.select-trigger>span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap}

.select-trigger svg{
  flex-shrink:0;
  color:#ffac60;
  transition:transform .18s}

.select-trigger:hover,.select-trigger[aria-expanded="true"]{
  background:#5c4938;
  border-color:#ff8e25}

.select-trigger[aria-expanded="true"] svg{
  transform:rotate(180deg)}

.select-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:50;
  display:flex;
  flex-direction:column;
  gap:4px;
  width:max-content;
  min-width:100%;
  max-width:min(340px,80vw);
  max-height:320px;
  overflow-y:auto;
  padding:8px;
  background:linear-gradient(145deg,#665443f5,#42372ff7);
  color:#fff;
  border:1px solid #a68b71;
  border-radius:var(--ui-radius);
  box-shadow:0 16px 36px #26231f30;
  backdrop-filter:blur(16px);
  scrollbar-width:thin;
  scrollbar-color:#c59c73 #42372f}

.select-option{
  display:block;
  flex-shrink:0;
  width:100%;
  border:0;
  border-radius:var(--ui-radius);
  padding:12px 14px;
  background:transparent;
  color:#fff;
  font-size:12px;
  line-height:1.5;
  text-align:left;
  white-space:normal}

.select-option:hover,.select-option:focus-visible{
  background:#9b7754;
  color:#fff;
  outline:none}

.select-option[aria-selected="true"]{
  background:#ff8e25;
  color:#26231f;
  font-weight:700}

.select-trigger:focus-visible{
  outline:1px solid #ff8e25;
  outline-offset:3px}

.catalog .toolbar>label{
  display:flex;
  align-items:center;
  gap:8px}

.toolbar .select-menu{
  left:auto;
  right:0}

@media(max-width:650px){
  .select-menu{
  max-height:260px}
.select-trigger{
  padding:10px 12px;
  gap:12px}
.select-option{
  padding:12px}
}

@media(prefers-reduced-motion:reduce){
  .select-trigger,.select-trigger svg{
  transition:none}
}


.catalog .toolbar{
  align-items:center}

.catalog-toolbar-filters{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  min-width:0;
  margin-left:auto}

.toolbar-family{
  display:block;
  width:210px;
  max-width:100%;
  min-width:0}

.toolbar-family .catalog-select{
  display:block;
  width:100%}

.catalog-toolbar-filters>label{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap}

@media(max-width:1000px){
  .catalog .toolbar{
  flex-wrap:wrap}
.catalog-toolbar-filters{
  flex-wrap:wrap;
  gap:12px}
.toolbar-family{
  width:190px}
}

@media(max-width:650px){
  .catalog-toolbar-filters{
  width:100%;
  margin-left:0;
  justify-content:flex-start}
.toolbar-family{
  flex:1 1 170px}
.catalog-toolbar-filters>label{
  flex:1 1 170px}
.catalog-toolbar-filters>label .catalog-select{
  flex:1}
}


.catalog-toolbar-filters .toolbar-family{
  display:flex;
  align-items:center;
  gap:8px;
  width:auto;
  flex:0 1 auto}

.family-field-label{
  white-space:nowrap}

.toolbar-family .catalog-select{
  width:210px;
  min-width:140px}

.select-option.family-option{
  display:flex;
  align-items:center;
  gap:10px}

.select-checkbox{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  flex-shrink:0;
  border:1px solid currentColor;
  border-radius:var(--ui-radius);
  font-size:12px;
  line-height:1}

.select-option[aria-selected="true"] .select-checkbox:after{
  content:'✓'}

@media(max-width:1000px){
  .catalog-toolbar-filters{
  width:100%;
  justify-content:flex-start}
.toolbar-family .catalog-select{
  width:200px}
}

@media(max-width:650px){
  .catalog-toolbar-filters .toolbar-family{
  flex:1 1 100%}
.toolbar-family .catalog-select{
  flex:1;
  width:auto}
}


.catalog>.sidebar{
  padding-top:0}

.sidebar>.filter-group:first-child{
  margin-top:0}

.sidebar .manufacturer-logo{
  margin-top:0}

@media(min-width:1001px){
  .catalog .toolbar{
  align-items:flex-start}
.catalog-toolbar-filters{
  align-items:flex-start}
}


.categories{
  position:relative;
  isolation:isolate;
  padding-top:16px;
  padding-bottom:16px;
  background:#806b5824;
  box-shadow:0 0 0 100vmax #806b5824;
  clip-path:inset(0 -100vmax)}

header{
  padding-top:16px;
  padding-bottom:16px}

@media(max-width:650px){
  header{
  padding-top:16px;
  padding-bottom:24px}
}


.intro .search{
  font-size:12px;
  line-height:1.4;
  padding:12px 14px;
  min-height:44px;
  width:380px;
  max-width:100%;
  min-width:0;
  flex-shrink:0}

.intro .search::placeholder{
  font-size:inherit;
  line-height:inherit}

@media(max-width:650px){
  .intro .search{
  width:100%;
  padding:10px 12px}
}


.intro .search{
  color:#fff;
  background:linear-gradient(135deg,#514438,#3b332c);
  border-color:#806b58;
  caret-color:#ffac60}

.intro .search::placeholder{
  color:#fff;
  opacity:1}

.intro .search:focus{
  border-color:#ff8e25}


.catalog .toolbar{
  align-items:center}

.catalog #results,.catalog .family-field-label,.catalog-toolbar-filters>label{
  font-size:12px;
  line-height:1.4}

.catalog #results{
  align-self:center}

.catalog #results .result-count{
  font-weight:750;
  color:#ff8e25}

.catalog-toolbar-filters{
  align-items:center}


.sidebar .search{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:44px;
  margin:0 0 24px;
  padding:12px 14px;
  font-size:12px;
  line-height:1.4;
  color:#fff;
  background:linear-gradient(135deg,#514438,#3b332c);
  border:1px solid #806b58;
  border-radius:var(--ui-radius);
  caret-color:#ffac60}

.sidebar .search::placeholder{
  color:#fff;
  opacity:1;
  font-size:inherit}

.sidebar .search:focus{
  border-color:#ff8e25}

.catalog>.sidebar{
  padding-top:0}

@media(max-width:650px){
  .sidebar .search{
  margin-bottom:24px}
}


.catalog-wrap .intro h2{
  color:#26231f;
  font-size:27px;
  font-weight:750;
  line-height:1.07;
  letter-spacing:-.046em}

.catalog-wrap .intro h2 span{
  color:#ff8e25}

.catalog-wrap .intro .muted{
  display:block;
  font-size:14px;
  font-weight:400;
  line-height:1.85;
  color:#74685c}

@media(max-width:1100px){
  .catalog-wrap .intro .muted{
  font-size:13px}
}

@media(max-width:650px){
  .catalog-wrap .intro .muted{
  line-height:1.7}
}


.catalog #results{
  font-size:27px;
  font-weight:750;
  line-height:1.07;
  letter-spacing:-.046em}


footer .footer-inner{
  display:grid;
  grid-template-columns:108px minmax(0,1fr) minmax(0,1fr) auto;
  gap:24px;
  align-items:end}

footer .footer-block{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-left:24px;
  border-left:1px solid #ffffff50;
  min-width:0;
  font-size:11px;
  line-height:1.5}

footer .footer-contact{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0}

footer .footer-contact svg{
  width:15px;
  height:15px;
  flex-shrink:0}

footer .footer-contact span{
  overflow-wrap:anywhere}

footer .footer-copyright{
  max-width:280px;
  font-size:11px;
  line-height:1.5}

@media(max-width:1100px){
  footer .footer-inner{
  grid-template-columns:108px minmax(0,1fr) minmax(0,1fr)}
footer .footer-copyright{
  grid-column:1/-1;
  max-width:none}
}

@media(max-width:650px){
  footer .footer-inner{
  grid-template-columns:108px minmax(0,1fr);
  gap:24px 16px}
footer .footer-block{
  padding-left:16px}
footer .footer-contacts{
  grid-column:2}
footer .footer-copyright{
  grid-column:1/-1}
}


@media(min-width:651px){
  footer .footer-inner{
  grid-template-columns:108px max-content max-content minmax(0,1fr)}
footer .footer-copyright{
  grid-column:auto;
  justify-self:end}
}

@media(min-width:651px) and (max-width:1100px){
  footer .footer-inner{
  grid-template-columns:108px max-content max-content}
footer .footer-copyright{
  grid-column:1/-1;
  justify-self:start}
}


.language-row{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:12px 5%;
  background:#806b5824}

.language-toggle{
  display:inline-flex;
  zoom:.65;
  gap:4px;
  margin:0;
  padding:4px;
  border:1px solid #806b58;
  border-radius:var(--ui-radius);
  background:linear-gradient(135deg,#514438,#3b332c);
  box-shadow:0 4px 12px #26231f0d}

.language-toggle label{
  position:relative;
  cursor:pointer}

.language-toggle input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px}

.language-toggle span{
  display:block;
  min-width:94px;
  padding:9px 16px;
  border-radius:var(--ui-radius);
  color:#fff;
  font-size:12px;
  line-height:1.4;
  text-align:center;
  transition:background .18s,color .18s}

.language-toggle input:checked+span{
  background:#ff8e25;
  color:#26231f;
  font-weight:700}

.language-toggle label:hover span{
  background:#9b7754}

.language-toggle input:checked+span{
  background:#ff8e25}

.language-toggle input:focus-visible+span{
  outline:1px solid #ffac60;
  outline-offset:2px}

footer .footer-inner>a{
  line-height:0}
footer .footer-inner>.footer-block,footer .footer-inner>.footer-copyright{
  align-self:end}

#modal:has(.about-content){
  width:min(820px,92vw);
  padding:clamp(24px,5vw,48px)}
.about-content{
  padding-top:8px}
.about-content h2{
  font-size:clamp(26px,4vw,36px);
  padding-right:24px}
.about-content h3{
  font-size:19px;
  line-height:1.4;
  margin:28px 0 12px;
  color:#ffac60}
.about-content p,.about-content li{
  font-size:14px;
  line-height:1.75}
.about-industries{
  padding-left:20px;
  margin:16px 0}
.about-industries li{
  margin:0 0 12px}
.about-signoff{
  border-top:1px solid #ffffff30;
  padding-top:22px;
  margin-top:26px}

/* Catalog detail actions share the header navigation button's idle finish. */
.card .detail{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#fff0dc;
  color:#26231f;
  border:1px solid #e3ac73;
  border-radius:var(--ui-radius);
  padding:11px 14px;
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:0;
  white-space:nowrap;
  text-decoration:none;
  transition:background .18s,border-color .18s}

@media(max-width:650px){
  .card .detail{
  font-size:11px;
  padding:9px 11px}
}

/* Direct order submission status and spam trap. */
.order-honeypot{
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden}

#order-status[data-state="success"]{
  color:#24763b!important;
  background:#edf8ee;
  padding:12px;
  border:1px solid #b4d9ba;
  border-radius:var(--ui-radius)}

#order-status[data-state="error"]{
  color:#9b3025!important}

/* Temporarily show only email in the former company/address position. */
footer .footer-company[hidden],footer .footer-contact[hidden]{
  display:none}

footer .footer-inner:has(.footer-company[hidden]){
  --footer-divider-height:55px;
  grid-template-columns:108px max-content minmax(0,280px);
  justify-content:center;
  align-items:center}

footer .footer-inner:has(.footer-company[hidden])>*{
  align-self:center}

footer .footer-inner:has(.footer-company[hidden]) .footer-contacts{
  grid-column:2;
  position:relative;
  border-left:0}

footer .footer-inner:has(.footer-company[hidden]) .footer-copyright{
  grid-column:3;
  justify-self:start;
  position:relative;
  padding-left:24px}

footer .footer-inner:has(.footer-company[hidden]) .footer-contacts::before,footer .footer-inner:has(.footer-company[hidden]) .footer-copyright::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  height:var(--footer-divider-height);
  border-left:1px solid #ffffff50;
  transform:translateY(-50%)}

@media(max-width:650px){
  footer .footer-inner:has(.footer-company[hidden]){
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
footer .footer-inner:has(.footer-company[hidden])>a{
  grid-column:1/-1;
  justify-self:center}
footer .footer-inner:has(.footer-company[hidden]) .footer-contacts{
  grid-column:1;
  padding-left:16px}
footer .footer-inner:has(.footer-company[hidden]) .footer-copyright{
  grid-column:2;
  justify-self:start;
  padding-left:16px}
}


/* Responsive and accessibility audit fixes. */
html{
  scroll-padding-top:16px}
body{
  overflow-x:clip}
button,a,input,select,textarea{
  touch-action:manipulation}
img,svg{
  max-width:100%}

.skip-link{
  position:fixed;
  left:16px;
  top:-80px;
  z-index:1000;
  background:#26231f;
  color:#fff;
  padding:12px 16px}
.skip-link:focus{
  top:16px}

header nav a:focus-visible,.select-trigger:focus-visible,.heart:focus-visible{
  outline:1px solid #ff8e25;
  outline-offset:3px}

.catalog>div,.catalog-toolbar-filters,.order-layout>*{
  min-width:0}
.toolbar #results{
  overflow-wrap:anywhere;
  flex:0 1 auto}

.catalog-toolbar-filters{
  flex-wrap:wrap}
.catalog .toolbar{
  flex-wrap:wrap}
.toolbar-family .catalog-select{
  max-width:100%}

header #order-open:focus-visible{
  outline:1px dashed #26231f!important;
  outline-offset:4px}

#modal,#order-dialog{
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 32px)}

@media(max-width:1100px){
  footer .footer-inner{
  grid-template-columns:108px minmax(0,1fr) minmax(0,1fr)}
}

@media(max-width:850px){
  .catalog-toolbar-filters{
  margin-left:0;
  justify-content:flex-start;
  width:100%}
.full-width-hero .hero-copy{
  width:43%}
.catalog-toolbar-filters .toolbar-family{
  flex-wrap:wrap}
.toolbar-family .catalog-select{
  width:100%;
  min-width:0}
.catalog-toolbar-filters>label{
  flex-wrap:wrap}
}

@media(max-width:650px){
  header nav{
  display:flex;
  flex-basis:100%;
  order:4;
  justify-content:center;
  flex-wrap:wrap}
header nav a{
  padding:9px 10px;
  font-size:11px}
header .saved,header .order-open{
  min-height:40px}
.catalog{
  grid-template-columns:minmax(0,1fr)}
.sidebar{
  width:100%;
  border-right:0}
.full-width-hero .hero-copy{
  width:auto}
footer .footer-inner{
  grid-template-columns:108px minmax(0,1fr)}
.catalog-toolbar-filters .toolbar-family{
  flex:1 1 100%}
.catalog .toolbar{
  gap:16px}
.select-menu{
  max-width:calc(100vw - 48px)}
.order-fields{
  grid-template-columns:1fr}
.order-fields .full-field{
  grid-column:1}
footer .footer-copyright{
  overflow-wrap:anywhere}
}

@media(max-width:400px){
  .grid{
  grid-template-columns:minmax(0,1fr)}
.card>.image{
  height:220px}
.full-width-hero h1{
  font-size:34px}
.catalog-toolbar-filters>label{
  white-space:normal}
.catalog-toolbar-filters>label .catalog-select{
  min-width:0}
.hero-collection-brand img{
  width:76px}
.hero-collection-brand span{
  font-size:8px}
}

@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
*{
  animation-duration:.01ms!important;
  transition-duration:.01ms!important}
}