/*
 * Mehedi Site Kit – base styles and hook classes.
 *
 * Elementor builds the layout; this file only adds what its V4 style panel
 * cannot express. Hook classes (mhj-*) are attached to elements as Elementor
 * global classes, so they stay visible and removable in the editor.
 */

/* ---- Base (matches the Next.js build) ---------------------------------- */
:root {
  --mhj-contain: max(3vw, 15px);
  --mhj-section: 80px;
  --mhj-header: 4.5rem;
}
@media (max-width: 767.98px) {
  :root {
    --mhj-section: 40px;
  }
}
html {
  font-size: 16px;
  background-color: #fafafa;
  color: #121212;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}
body {
  margin: 0;
  background-color: #fafafa;
  color: #121212;
  font-family: "Ease Standard", Arial, "Helvetica Neue", sans-serif;
  overscroll-behavior: none;
}

/* ---- Typography classes -------------------------------------------------
 * Elementor stores size / weight / line-height for these global classes but
 * drops a font family it does not know, so the families are set here.
 * (.elementor prefix: same specificity as Elementor's own class rules.)
 */
.elementor .t-h-1,
.elementor .t-h-2,
.elementor .t-h-3,
.elementor .t-h-4 {
  font-family: "Reckless Standard", Arial, "Helvetica Neue", sans-serif;
}
.elementor .t-b-1,
.elementor .t-b-2,
.elementor .t-b-3 {
  font-family: "Ease Standard", Arial, "Helvetica Neue", sans-serif;
}
.elementor .t-tag {
  font-family: "FG Futurist", Arial, "Helvetica Neue", sans-serif;
}

/* ---- Hook classes ------------------------------------------------------- */

/* Dotted section backgrounds: 15px lattice, 2px dots at 8% (black on gray, white on offblack). */
.elementor .mhj-dots-gray,
.elementor .mhj-dots-black {
  background-size: 15px 15px;
  background-repeat: repeat;
}
.elementor .mhj-dots-gray {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Crect x='6.5' y='6.5' width='2' height='2' rx='1' ry='1' fill='rgb(0,0,0)' fill-opacity='0.08'/%3E%3C/svg%3E");
}
.elementor .mhj-dots-black {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Crect x='6.5' y='6.5' width='2' height='2' rx='1' ry='1' fill='rgb(255,255,255)' fill-opacity='0.08'/%3E%3C/svg%3E");
}

/* Once the islands script has mounted the live dots layer (aligned lattice + pointer
   glow), the static tile is dropped so the two never overlap. */
.elementor .mhj-dots-ready {
  background-image: none;
}
.mhj-dots-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Island placeholders are plain blocks: no Elementor container padding. */
.elementor [class*="island-"] {
  padding: 0;
  min-width: 0;
}

/* Text helpers Elementor has no control for. */
.elementor .mhj-balance {
  text-wrap: balance;
}
.elementor .mhj-pretty {
  text-wrap: pretty;
}
.elementor .mhj-nowrap {
  white-space: nowrap;
}

/* Decorative layers: never selectable or clickable. */
.elementor .mhj-ghost {
  pointer-events: none;
  user-select: none;
}

/* Single dashed rule (Elementor only sets all four border sides at once). */
.elementor .mhj-dashed-top {
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
}

/*
 * Stroke icons (Tabler): Elementor forces fill="currentColor" on the <svg>,
 * which would fill outline icons. With this class the icon stays an outline
 * and takes its stroke width from the widget's "stroke-width" style.
 */
.elementor .mhj-icon svg {
  fill: none;
  stroke-width: inherit;
}

/* Line breaks that only apply from tablet up (<br> inside a heading). */
@media (max-width: 767.98px) {
  .elementor .mhj-br-desktop br {
    display: none;
  }
}

/* In the Elementor editor an island container is empty: show where it sits. */
.elementor-editor-active [class*="island-"]:empty {
	min-height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(135deg, #f4f3f0 0 12px, #ecebe6 12px 24px);
	outline: 1px dashed #b9b6ad;
	outline-offset: -1px;
}
.elementor-editor-active [class*="island-"]:empty::after {
	content: "Interactive section · Mehedi Site Kit";
	font: 500 13px/1 system-ui, sans-serif;
	color: #6b6860;
}

/* A slot is a placeholder only: the interactive part rendered into it takes its place in the layout. */
.elementor .mhj-slot {
	display: contents;
}
.elementor-editor-active .mhj-slot:empty {
	display: flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(135deg, #f4f3f0 0 12px, #ecebe6 12px 24px);
	outline: 1px dashed #b9b6ad;
	outline-offset: -1px;
}
.elementor-editor-active .mhj-slot:empty::after {
	content: "Interactive part · Mehedi Site Kit";
	font: 500 12px/1 system-ui, sans-serif;
	color: #6b6860;
}

/* Theme Builder header: stays at the top of the page, above the content (the bar itself floats). */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* ---- WooCommerce ----------------------------------------------------------- */

/* Prices printed into the native shop / product templates take the look of their element. */
.elementor .woocommerce-Price-amount,
.elementor .woocommerce-Price-amount bdi {
	font: inherit;
	color: inherit;
}
.elementor del:has(.woocommerce-Price-amount) {
	margin-right: 0.35em;
	opacity: 0.45;
}
.elementor ins:has(.woocommerce-Price-amount) {
	background: none;
	text-decoration: none;
}

/* Cart, checkout and account pages (WooCommerce draws them): the page frame, type and controls of the site. */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
	background-color: #e3e3e3;
}
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main.site-main {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(1280px + 2 * var(--mhj-contain));
	margin: 0 auto;
	/* the header bar floats over the page: the content starts below it */
	padding: calc(var(--mhj-header) + 48px) var(--mhj-contain) var(--mhj-section);
	font-family: "Ease Standard", Arial, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: #121212;
}
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main.site-main :is(h1, h2, h3) {
	font-family: "Reckless Standard", Arial, "Helvetica Neue", sans-serif;
	font-weight: 400;
	line-height: 1.05;
	color: #202020;
}
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main.site-main .entry-title {
	max-width: none;
	margin: 0 0 40px;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	text-align: center;
}
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main.site-main :is(.alignwide, .alignfull) {
	margin-right: 0;
	margin-left: 0;
}
body.woocommerce-account:not(.logged-in) main.site-main .woocommerce > h2 {
	margin: 0 0 20px;
	text-align: center;
}
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main.site-main a:not(.button, .wc-block-components-button, .wp-element-button) {
	color: #121212;
	text-decoration: underline;
	text-underline-offset: 3px;
}
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main.site-main a:not(.button, .wc-block-components-button, .wp-element-button):hover {
	color: #ff6d00;
}
body.woocommerce-page main.site-main :is(.button, button.button, .wc-block-components-button:not(.is-link), .wp-element-button, .woocommerce-button) {
	padding: 13px 20px;
	border: 0;
	border-radius: 8px;
	background-color: #ff6d00;
	color: #121212;
	font: 500 0.875rem/1.2 "Ease Standard", Arial, sans-serif;
	text-decoration: none;
	transition: background-color 0.15s;
}
body.woocommerce-page main.site-main :is(.button, button.button, .wc-block-components-button:not(.is-link), .wp-element-button, .woocommerce-button):hover {
	background-color: rgba(255, 109, 0, 0.8);
	color: #121212;
}
body.woocommerce-page main.site-main :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea, select) {
	border: 1px solid #cfcfcf;
	border-radius: 8px;
	background-color: #fff;
	color: #121212;
	font: inherit;
}
body.woocommerce-page main.site-main :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea, select):focus {
	border-color: #121212;
	outline: none;
}
body.woocommerce-page main.site-main :is(form.login, form.register, form.checkout_coupon, form.lost_reset_password) {
	margin: 0 auto;
	max-width: 560px;
	padding: 32px;
	border: 0;
	border-radius: 16px;
	background-color: #fafafa;
}
body.woocommerce-page main.site-main :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) {
	border-top-color: #ff6d00;
	border-radius: 8px;
	background-color: #fafafa;
	color: #121212;
}
body.woocommerce-page main.site-main :is(.woocommerce-info, .woocommerce-message)::before {
	color: #ff6d00;
}

/* Notices on the native shop / product templates ("… has been added to your cart"): a toast at the bottom instead of a strip under the floating header. */
body>.woocommerce-notices-wrapper{position:fixed;left:50%;bottom:24px;z-index:200;width:min(92vw,560px);transform:translateX(-50%);pointer-events:none}
body>.woocommerce-notices-wrapper>*{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 8px;padding:14px 16px 14px 20px;border:0;border-radius:12px;background:#121212;color:#fafafa;font:500 .9375rem/1.3 "Ease Standard",Arial,sans-serif;box-shadow:0 12px 32px rgba(0,0,0,.25);list-style:none;outline:0}
body>.woocommerce-notices-wrapper>*::before,body>.woocommerce-notices-wrapper>*::after{display:none}
body>.woocommerce-notices-wrapper .button{flex:none;float:none;margin:0;padding:10px 14px;border:0;border-radius:8px;background:#ff6d00;color:#121212;font:500 .8125rem/1.2 "Ease Standard",Arial,sans-serif;text-decoration:none}
/* The wrapper around a post's / product's body only scopes the typography: the card inside carries the background. */
.mhj-island.mhj-island.mhj-island.mhj-post-body{background:transparent}
/* A product without a description leaves no empty card behind. */
.mhj-island.mhj-island.mhj-island.mhj-post-body>div:empty{display:none}