:root {
  --primary-0: #FEF3C7; /* amber-100 */
  --primary-1: #FBBF24; /* amber-400 */
  --primary-2: #FCD34D; /* amber-300 */
  --primary-3: #F59E0B; /* amber-500 */
  --primary-4: #D97706; /* amber-600 */
  --primary-5: #78350F; /* amber-900 */
  --secondary-1: #7E22CE; /* purple-700 */
  --secondary-2: #581C87; /* purple-900 */
  --secondary-3: #A855F7; /* purple-500 */
  --secondary-5: #C084FC; /* purple-400 */
  --sblue-1: #38BDF8; /* sky-400 */
  --sblue-2: #BAE6FD; /* sky-200 */
  --sblue-3: #E0F2FE; /* sky-100 */
  --sblue-5: #7DD3FC; /* sky-300 */
  --sblue-6: #06B6D4; /* cyan-500 */
  --sgreen-2: #65A30D; /* lime-600 */
  --sred-1: #EF4444; /* red-500 */
  --screen-red: #E11D48; /* rose-600 */
  --screen-green: #22C55E; /* green-500 */
  --screen-muted: #94A3B8; /* slate-400 */
  --screen-address: #F1F5F9; /* slate-100 */
  --contrast-max: #0F172A; /* slate-900 */
  --contrast-lg: #475569; /* slate-600 */
  --contrast-none: var(--color-white);
  --border-default: #E2E8F0; /* slate-200 */
  --soller-phone-shadow:
    0 0 10px color-mix(in srgb, var(--color-black) 7%, transparent),
    0 20px 25px -5px color-mix(in srgb, var(--color-black) 10%, transparent);
  --soller-floating-card-shadow:
    0 0 15px color-mix(in srgb, var(--color-black) 7%, transparent),
    0 25px 50px -12px color-mix(in srgb, var(--color-black) 25%, transparent);
  --soller-button-shadow:
    0 0 2px color-mix(in srgb, var(--color-black) 7%, transparent),
    0 1px 3px color-mix(in srgb, var(--color-black) 10%, transparent);
  --soller-macbook-shadow:
    drop-shadow(0 0 7.5px color-mix(in srgb, var(--color-black) 7%, transparent))
    drop-shadow(0 25px 25px color-mix(in srgb, var(--color-black) 25%, transparent));
}

:root{
  --admin-bar: var(--wp-admin--admin-bar--height, 0px);
  --header-height-mobile:48px;
  /* --header-height-desktop:48px; */
  --header-bg-top:transparent;
  --header-color-top:var(--contrast-none);
  --header-bg-top-act:var(--header-bg-top);
  --header-color-top-act:var(--header-color-top);
  --header-bg:var(--bg-primary);
  --header-color:var(--contrast-max);
  --header-transition-duration:200ms;
  --header-transition-easing:ease-in;
  --cnav-open-delay: 100ms;
  --cnav-close-delay: 150ms;
}

.tdark{
  /* Project palette */
  --accent-1: var(--color-olive-400) ;
  --accent-2: var(--color-olive-800);
  --accent-3: var(--color-slate-200);
  --contrast-max:#fff; 
  --contrast-lg: var(--color-gray-200);
  --contrast-md: var(--color-gray-300);
  --contrast-sm: var(--color-zinc-500);
  --contrast-xs: var(--color-zinc-900);
  --contrast-none: #000;
  --bg-primary: var(--color-zinc-950);
  --bg-secondary: var(--contrast-xs);
  --bg-tertiary: hsl(42 38% 95%);
  --bg-quaternary: hsl(45 40% 98%);

  --hover-accent1: var(--color-olive-300);
  --hover-accent2:var(--color-olive-700);
  --hover-conmax: var(--contrast-md);
  --hover-connone: var(--contrast-xs);
  --hover-consm: var(--contrast-xs);
}

: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.wp-element-button,
.button-conmax button,
.button-conmax a{
  background-color: var(--contrast-max);
  color: var(--contrast-none);
  /* font-size: calc(1.285rem + .2625vw); */
}
.button-conmax.wp-element-button:hover,
.button-conmax button:hover,
.button-conmax a:hover{
  background-color: var(--hover-conmax);
}
/* 
button-conmax [&_button]:py-3.25! [&_button]:text-sm!*/

.button-conlg.wp-element-button,
.button-conlg button{
  background-color: var(--contrast-lg);
  color: var(--contrast-none);
  /* font-size: calc(1.285rem + .2625vw); */
}
.button-conlg.wp-element-button:hover,
.button-conlg button:hover{
  background-color: var(--hover-md);
}

.button-consm button,
.button-consm a{
  background-color: var(--contrast-sm);
  color: var(--contrast-lg-a80);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.button-consm button:hover,
.button-consm a:hover{
  background-color: var(--contrast-xs);
}
.button-consm button:disabled:hover {
  background-color: var(--contrast-sm);
}

.button-accent1 button,
.button-accent1 a{
  background-color: var(--accent-1);
  color: var(--contrast-none);
  /* font-size: calc(1.285rem + .2625vw);
  [&>a]:text-(--contrast-none) [&>a]:  [&>a]:bg-(--accent-1) [&>a]:hover:bg-(--hover-conmax)/30*/
}
.button-accent1 button:hover,
.button-accent1 a:hover{
  background-color: var(--hover-accent1);
}

.button-accent2 button,
.button-accent2 a{
  background-color: var(--accent-2);
  color: var(--contrast-max);
}
.button-accent2 button:hover,
.button-accent2 a:hover{
  background-color: var(--hover-accent2);
}

.buttono-conmax button,
.buttono-conmax a{
  border: 0px;
  box-shadow: inset 0 0 0 1px var(--contrast-max);
  color: var(--contrast-max);
  background-color: transparent;
}

.buttono-conmax button:hover,
.buttono-conmax a:hover{
  box-shadow: none;
  background-color: var(--hover-conmax);
  color: var(--contrast-none);
}

.buttono-connone button,
.buttono-connone a{
  border: 0px;
  box-shadow: inset 0 0 0 1px var(--contrast-none);
  color: var(--contrast-none);
  /* background-color: ; */
}

.buttono-connone button:hover,
.buttono-connone a:hover{
  /* box-shadow: none; */
  background-color: var(--contrast-lg-a40);
}

.buttono-connoner button,
.buttono-connoner a{
  border: 0px;
  box-shadow: inset 0 0 0 1px var(--contrast-none);
  color: var(--contrast-none);
  /* background-color: ; */
}

.buttono-connoner button:hover,
.buttono-connoner a:hover{
  /* box-shadow: none; */
  background-color: var(--contrast-none-a50);
  color: var(--contrast-max);
}

.buttono-accent1 button,
.buttono-accent1 a{
  border: 0px;
  box-shadow: inset 0 0 0 1px var(--accent-1);
  color: var(--accent-1);
  /* background-color: ; */
}

.buttono-accent1 button:hover,
.buttono-accent1 a:hover{
  /* box-shadow: none; */
  background-color: var(--accent-2-a50);
}

/* Shared closed visual state */
:where(
    .expand-basic:not([role]),
    .expand-cnav:not([role])) {
    opacity: 0;
    pointer-events: none;
}

:where( .expand-basic:not([role])) {
    visibility: hidden;
}

:where(
    .expand-basic[aria-hidden="false"]:not([role]),
    .expand-cnav[data-state="open"]:not([role])
) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* outline
[&_button]:hover:bg-(--hover-conmax)/30! [&_button]:outline [&_button]:px-7! [&_button]:py-3!  [&_button]:rounded-none!   

accent-1
[&_button]:rounded-[60px]! [&_button]:bg-(--accent-1)! [&_button]:transition-colors [&_button]:duration-150 [&_button]:text-(--contrast-none)! [&_button]:hover:bg-(--hover-accent1)! [&_button]:px-7! [&_button]:py-3! */


/* 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
*/