/* "Havuzunu Tasarla" header button: placed right of the desktop header search; pixel transition reveals a bird's-eye pool render. */
.mrpool-design-btn {
  --mdb-bg: rgb(12, 69, 129);
  --mdb-pixel: #dff3fb;
  --mdb-w: 200px;
  --mdb-h: 46px;
  --mdb-gap: 12px;
  position: relative;
  isolation: isolate;
  flex: 0 0 var(--mdb-w);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mdb-w);
  height: var(--mdb-h);
  margin-inline-start: var(--mdb-gap);
  border-radius: 30px;
  overflow: hidden;
  background: var(--mdb-bg);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-radius .25s ease; /* replaces the theme's "all" link transition */
}
.mrpool-design-btn[hidden] { display: none; }
a.mrpool-design-btn:hover, a.mrpool-design-btn:focus, a.mrpool-design-btn:visited { color: #fff; text-decoration: none; }
a.mrpool-design-btn:focus-visible { outline: 3px solid var(--mdb-bg); outline-offset: 3px; }
.mrpool-design-btn__img, .mrpool-design-btn__pixels { position: absolute; inset: 0; pointer-events: none; }
.mrpool-design-btn__img {
  z-index: 1;
  opacity: 0;
  background: url(../images/design-button-pool.webp) center / 100% 100% no-repeat;
}
/* Covered by pixels at the swap moment, the button becomes a rectangular pool with its coping. */
.mrpool-design-btn.is-on { border-radius: 6px; }
.mrpool-design-btn.is-on .mrpool-design-btn__img { opacity: 1; }
.mrpool-design-btn__pixels { z-index: 2; display: grid; }
.mrpool-design-btn__pixels > span { background: var(--mdb-pixel); opacity: 0; }
.mrpool-design-btn__pixels > span.is-px { opacity: 1; }
.mrpool-design-btn__label { position: relative; z-index: 3; transition: text-shadow .2s; }
.mrpool-design-btn.is-on .mrpool-design-btn__label { text-shadow: 0 1px 2px rgba(0, 30, 60, .8), 0 0 8px rgba(0, 30, 60, .45); }

/* Below 1200px the search (with its category picker) has no room to share, so the button stays out. */
@media (max-width: 1199.98px) {
  .mrpool-design-btn { display: none; }
}
/* Desktop header: the search shrinks with the window instead of pushing the account/cart icons off screen
   (Woodmart's fixed search width did that on narrow desktops even without the button). */
@media (min-width: 1025px) {
  .whb-col-center:has(> .wd-header-search-form.wd-display-form) { min-width: 0; }
  .whb-col-center:has(> .wd-header-search-form.wd-display-form) > .whb-space-element { flex-shrink: 0; }
  .whb-col-center:has(> .wd-header-search-form.wd-display-form) > .wd-header-search-form.wd-display-form { flex: 1 1 auto; min-width: 0; }
  /* Woodmart pins the text field to the configured form width; let it follow the narrower form instead. */
  .whb-col-center:has(> .wd-header-search-form.wd-display-form) > .wd-header-search-form.wd-display-form input[type="text"] { min-width: 0; }
}
@media (min-width: 1200px) {
  /* Keep the slot free from first paint so the search box does not jump when the button is inserted. */
  .whb-col-center:has(> .wd-header-search-form.wd-display-form):not(.has-mrpool-design-btn)::after { content: ""; flex: 0 0 calc(200px + 12px); }
}
@media (prefers-reduced-motion: reduce) {
  .mrpool-design-btn__img { transition: opacity .25s; }
  .mrpool-design-btn { transition: none; }
}
/* Mobile off-canvas menu item (last row): a wave icon in place of the theme's icon-font glyph. */
.wd-nav-mobile .menu-item-mrpool-design > a:before {
  content: "";
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v9M16 3v9M8 6h8M8 9.5h8'/%3E%3Cpath d='M2 15c1.7 0 1.7 1.2 3.3 1.2S7 15 8.7 15s1.6 1.2 3.3 1.2S13.7 15 15.3 15s1.7 1.2 3.4 1.2S20.3 15 22 15M2 19.5c1.7 0 1.7 1.2 3.3 1.2S7 19.5 8.7 19.5s1.6 1.2 3.3 1.2 1.7-1.2 3.3-1.2 1.7 1.2 3.4 1.2 1.6-1.2 3.3-1.2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v9M16 3v9M8 6h8M8 9.5h8'/%3E%3Cpath d='M2 15c1.7 0 1.7 1.2 3.3 1.2S7 15 8.7 15s1.6 1.2 3.3 1.2S13.7 15 15.3 15s1.7 1.2 3.4 1.2S20.3 15 22 15M2 19.5c1.7 0 1.7 1.2 3.3 1.2S7 19.5 8.7 19.5s1.6 1.2 3.3 1.2 1.7-1.2 3.3-1.2 1.7 1.2 3.4 1.2 1.6-1.2 3.3-1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}