/* Euphoria Hair Studio: decorative layer for the eup-* classes set in Elementor (Advanced > CSS Classes).
   Colors and fonts come from Site Settings. Selectors carry body/element specificity so they beat Kit and
   theme defaults but stay below each widget's own style controls. */

/* Eyebrow labels: the circumflex from the EUPHÔRIA wordmark, drawn before the text. */
body .eup-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:.85em}
body .eup-eyebrow .elementor-heading-title::before{content:"";flex:none;width:.5em;height:.5em;border-top:1.5px solid currentColor;border-left:1.5px solid currentColor;transform:translateY(.18em) rotate(45deg)}
body .eup-eyebrow--center .elementor-heading-title{justify-content:center}
body .eup-display .elementor-heading-title em{font-style:italic;color:var(--e-global-color-secondary)}
.ehs-on-dark .eup-display .elementor-heading-title em{color:var(--e-global-color-eupbronzelt)}
body .eup-center{margin-inline:auto}
body .eup-normalcase .elementor-heading-title{text-transform:lowercase}
body .eup-normalcase .elementor-heading-title::first-letter{text-transform:uppercase}

/* Hero: arched photo with a small offset inset (desktop and tablet). */
.e-con.eup-hero-stack{position:relative}
@media (min-width:768px){
	.e-con.eup-hero-inset{position:absolute;left:-14%;bottom:-9%;width:44%;padding:10px 10px 6px;background:var(--e-global-color-ehsbg);box-shadow:0 24px 48px -28px rgb(23 33 28/.45);z-index:2}
}
@media (min-width:768px) and (max-width:1024px){.e-con.eup-hero-inset{left:-6%;width:46%}}
body .eup-caption p{margin:6px 2px 0;font-size:13px;letter-spacing:.04em}
body .eup-hero-facts .elementor-icon-list-text{font-size:14.5px}

/* Icon panel used where the salon has no photo of a service yet. */
.e-con.eup-icon-panel{border-radius:2px;position:relative;color:var(--e-global-color-secondary)}
.e-con.eup-icon-panel::after{content:"";position:absolute;inset:14px;border:1px solid currentColor;border-radius:inherit;opacity:.35;pointer-events:none;--position:absolute}

/* Photos: hairline-square corners; cards with one stretched link. */
body .eup-frame img{border-radius:2px}
.e-con.eup-card{position:relative;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.e-con.eup-card>.elementor-element{position:static}
body .eup-card .eup-stretch a::after{content:"";position:absolute;inset:0;z-index:1}
body .eup-card .eup-stretch a:focus-visible{outline:none}
.e-con.eup-card:has(.eup-stretch a:focus-visible){outline:2px solid var(--e-global-color-accent);outline-offset:3px}
.e-con.eup-svc-card:hover,.e-con.eup-svc-card:focus-within{border-color:var(--e-global-color-secondary)!important}
body .eup-more{margin:0;display:inline-flex;gap:.4em}
body .eup-more span{transition:transform .3s ease}
.e-con.eup-card:hover .eup-more span{transform:translateX(4px)}
body .eup-num p{margin:0;font-variant-numeric:tabular-nums;letter-spacing:.12em}

/* Stroke icons in Icon Lists take the list's icon color (Elementor colors SVG icons through fill only). */
body .ehs-icon-stroke .elementor-icon-list-icon svg{color:var(--e-global-color-secondary)}
.ehs-on-dark .ehs-icon-stroke .elementor-icon-list-icon svg{color:var(--e-global-color-eupbronzelt)}
/* Icons inside cards and quotes line up with the text. */
.e-con.eup-card .elementor-widget-icon .elementor-icon-wrapper,.e-con.eup-quote .elementor-widget-icon .elementor-icon-wrapper,.e-con.eup-note .elementor-widget-icon .elementor-icon-wrapper{text-align:start}

/* Link-style buttons: arrow after the label. */
body .eup-link .elementor-button{padding-inline:0;white-space:nowrap}
@media (max-width:767px){body .eup-link .elementor-button{white-space:normal;text-align:start}}
body .eup-link .elementor-button-icon svg{width:1.05em;height:auto}

/* Team cards. */
body .eup-person .elementor-heading-title a{color:inherit}
body .eup-person p{margin:0}

/* Reviews. */
body .eup-quote blockquote{margin:0;padding:0;border:0}
body .eup-quote blockquote p,body .eup-pull blockquote p{margin:0}
.e-con.eup-reviews-feed{border-radius:2px}
/* Without the Trustindex plugin the shortcode prints nothing: hide the empty box. */
.e-con.eup-reviews-feed:has(.elementor-shortcode:empty){display:none}
body .eup-pull blockquote{margin:0;padding:0;border:0}

/* Price lists (text editor <dl class="eup-price">): dotted leaders between item and price. */
body .eup-price{margin:0}
body .eup-price>div{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid var(--e-global-color-ehsline)}
body .eup-price dt{display:flex;flex:1;align-items:baseline;gap:14px;font-weight:500}
body .eup-price dt::after{content:"";flex:1;border-bottom:1px dotted currentColor;opacity:.35;transform:translateY(-4px)}
body .eup-price dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.ehs-on-dark .eup-price>div{border-bottom-color:rgb(238 231 218/.18)}

/* Opening hours and notes. */
body .eup-hours{margin:0}
body .eup-hours__day{display:inline-block;min-width:9.5em}
.e-con.eup-note{border-left:2px solid var(--e-global-color-secondary)}
body .eup-note p{margin:0}

/* Header and footer details. */
body .eup-topnote p{margin:0;letter-spacing:.06em;font-size:13px}
body .eup-legal-links p,body .eup-footer p{margin:0}
body .eup-legal-links a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ehs-on-dark .elementor-widget-text-editor a{color:var(--e-global-color-eupbronzelt)}

/* Buttons keep their label on one line beside other content (desktop and tablet). */
@media (min-width:768px){body .e-con>.elementor-widget-button{flex-shrink:0}}
/* Contact form: Hello's reset paints submit-button borders pink; collection cards follow the square card style. */
body .e-con .ehs-form button.ehs-form__submit,body .e-con .ehs-form button.ehs-form__submit:hover,body .e-con .ehs-form button.ehs-form__submit:focus{border:1px solid transparent}
body .e-con .ehs-form button.ehs-form__submit:focus-visible{outline:2px solid var(--e-global-color-accent);outline-offset:3px}
body .ehs-posts .ehs-card{border-radius:2px}

/* Gallery captions (Media Library caption, shown under each photo). */
body .eup-gallery figcaption{margin-top:8px;font-size:13.5px;color:var(--e-global-color-ehsmuted)}

@media (prefers-reduced-motion:reduce){
	.e-con.eup-card,body .eup-more span{transition:none}
	.e-con.eup-card:hover .eup-more span{transform:none}
}