:root{
  --color-taupe-50:  #faf8f6;
  --color-taupe-100: #f1ede9;
  --color-taupe-200: #e4deda;
  --color-taupe-300: #d3cbc6;
  --color-taupe-400: #b8aaa2;
  --color-taupe-500: #9d8b81;
  --color-taupe-600: #7f6f66;
  --color-taupe-700: #62554e;
  --color-taupe-800: #463d38;
  --color-taupe-900: #2f2926;
  --color-taupe-950: #1b1715;

  /* Project palette */
  --accent-1: var(--color-taupe-500) ;
  --accent-2: var(--color-taupe-300);
  --accent-3: var(--color-taupe-950);
  --contrast-max: #000;
  --contrast-lg: var(--color-zinc-800);
  --contrast-md: var(--color-zinc-500);
  --contrast-sm: var(--color-gray-300);
  --contrast-xs: var(--accent-2);
  --contrast-none: #fff;
  --bg-primary: #fff;
  --bg-secondary: #e6eae3;
  --bg-tertiary: var(--color-zinc-950);



  --hover-accent1: var(--color-taupe-600);
  --hover-accent2:var(--color-taupe-300);
  --hover-conmax: var(--contrast-lg);
  --hover-connone: var(--contrast-xs);
  --hover-consm: var(--contrast-md);
}


:root{
  /* notice */
  --discount: #eb0010;

  --drawer-overlay: lab(0 0 0/0.6);
}

:where(.wp-site-blocks :focus) {
    outline-width: 0px;
}

:where(.wp-site-blocks :focus-visible) {
    outline-width: 1px;
}

/* enlarge button */
.button-enlarge button,
.button-enlarge a,
.button-enlarge .wc-block-components-button:not(.is-link){
  transition: transform 0.2s cubic-bezier(.235, 0, .05, .95);
  display: inline-block;
}

.button-enlarge button:hover,
.button-enlarge a:hover,
.button-enlarge .wc-block-components-button:not(.is-link):hover {
  transform: scale(1.04);
}

/* button */
.button-conmax button{
  background-color: var(--contrast-max);
  color: var(--contrast-none);
  /* font-size: calc(1.285rem + .2625vw); */
}
.button-conmax button:hover{
  background-color: var(--hover-conmax);
}

/* button accent1 outline*/
.baccent1-o-lt button,
.baccent1-o-lt a{
  border: 1px solid color-mix(in srgb,var(--accent-1) 15%,transparent);
  color: lab(100 0 0);
}

.baccent1-o-lt button:hover,
.baccent1-o-lt a:hover{
  border: 1px solid transparent;
  background-color: color-mix(in srgb,var(--accent-1) 5%,transparent);
}

/* button light outline */
.blight-o-lt button,
.blight-o-lt a{
  border: 1px solid lab(100 0 0 / 0.15);
  color: lab(100 0 0);
}

.blight-o-lt button:hover,
.blight-o-lt a:hover{
  border: 1px solid transparent;
  background-color: lab(100 0 0 / .05);
}

/* button white outline*/
.bwhite-o-dt button,
.bwhite-o-dt a{
  border: 1px solid  lab(100 0 0);
  color: lab(100 0 0);
}

.bwhite-o-dt button:hover,
.bwhite-o-dt a:hover{
  border: 1px solid transparent;
  color: var(--contrast-lg);
  background-color: lab(100 0 0);
}

/* enlarge dark button */
.button-dark-enlarge button,
.button-dark-enlarge .wc-block-components-button:not(.is-link){
  background-color: var(--contrast-lg);
  color: lab(100 0 0);
  transition: transform 0.2s cubic-bezier(.235, 0, .05, .95)  ;
}
.button-dark-enlarge button:hover {
  transform: scale(1.04);
}



/* h-[clamp(400px,calc(400px+(250*(100vw-567px)/533)),650px)]! 
[clamp(32px,calc(32px+(32*(100vw-320px)/704)),64px)]
[clamp(24px,calc(24px+(24*(100vw-320px)/704)),48px)]

[clamp(40px,calc(40px+24*((100vw-640px)/384)),64px)]
*/
/* hover text

button color:hover
button:focus/:focus within outline
text:hover
*/