@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//morkedi.co.uk/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=7.6.0") format("woff2");
}

:root {
	--wd-text-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 14px;
	--wd-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: rgb(255,255,255);
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-primary-color: rgba(106,60,151,0.8);
	--wd-alternative-color: #fbbc34;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(100,20,137);
	--btn-accented-bgcolor-hover: rgb(100,20,137);
	--wd-form-brd-width: 2px;
	--notices-success-bg: rgb(100,20,137);
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 223px;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: url(https://morkedi.co.uk/wp-content/uploads/2021/08/promo-popup-2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	--wd-popup-width: 800px;
	--wd-popup-padding: 15px;
}
.page-title-default {
	background-color: #0a0a0a;
	background-image: none;
	background-size: cover;
	background-position: center center;
}
.footer-container {
	background-color: rgb(61,13,99);
	background-image: none;
}
html .product-image-summary-wrap .product_title, html .wd-single-title .product_title {
	font-weight: 600;
}
.page .main-page-wrapper {
	background-color: rgb(255,255,255);
	background-image: none;
}
.product-labels .product-label.out-of-stock {
	background-color: rgb(130,36,227);
	color: rgb(0,0,0);
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}
:root{
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}



/* =========================================================
   MORKEDI — FINAL PREMIUM HERO
   ONLY HERO — DO NOT AFFECT OTHER SECTIONS
========================================================= */


/* =========================================================
   1. HERO MAIN
========================================================= */
/* =========================================
   MORKEDI — SERVICES GLOBAL BASE
========================================= */

.mk-services-page, .mk-services-page * { box-sizing: border-box; } .mk-services-page { width: 100%; max-width: 100%; margin: 0; padding: 0; overflow: hidden; /* MORKEDI BRAND COLOURS */ --mk-purple: #7c3aed; --mk-purple-light: #c084fc; --mk-purple-bright: #d8b4fe; --mk-dark: #08050c; --mk-dark-two: #100717; --mk-dark-three: #21102e; --mk-surface: #241536; --mk-white: #ffffff; --mk-text: #d2c8d7; --mk-muted: #9d91a5; --mk-light-bg: #faf7fc; --mk-light-border: #eadbee; --mk-light-tag: #efe7f2; font-family: Arial, Helvetica, sans-serif !important; color: var(--mk-text); background: var(--mk-dark); } .mk-services-page h1, .mk-services-page h2, .mk-services-page h3, .mk-services-page h4, .mk-services-page p { margin: 0; padding: 0; } .mk-services-page a { text-decoration: none !important; } .mk-services-page img { max-width: 100%; height: auto; display: block; }

body .mk-hero {
    position: relative !important;

    width: 100% !important;

    overflow: hidden !important;

    padding: 46px 0 26px !important;

    min-height: 0 !important;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(104, 68, 155, 0.18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #08050c 0%,
            #100717 52%,
            #1b0d27 100%
        ) !important;
}


/* =========================================================
   2. HERO CONTAINER
========================================================= */

body .mk-hero > .mk-container {
    position: relative !important;

    width: min(
        1180px,
        calc(100% - 40px)
    ) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    z-index: 3 !important;
}


/* =========================================================
   3. HERO GRID
   LEFT = TEXT
   RIGHT = VISUAL
========================================================= */

@media (min-width: 1025px) {

    body .mk-hero-grid {
        display: grid !important;

        grid-template-columns:
            minmax(0, 43%)
            minmax(0, 57%) !important;

        align-items: center !important;

        gap: 24px !important;

        width: 100% !important;
    }

}


/* =========================================================
   4. LEFT CONTENT
========================================================= */

body .mk-hero-content {
    position: relative !important;

    z-index: 10 !important;

    width: 100% !important;

    max-width: 570px !important;

    min-width: 0 !important;
}


/* =========================================================
   5. EYEBROW
========================================================= */

body .mk-hero .mk-eyebrow {
    margin-bottom: 18px !important;

    font-size: 10px !important;

    line-height: 1.3 !important;
}


/* =========================================================
   6. HERO TITLE
========================================================= */

body .mk-hero .mk-hero-title {

    margin: 0 0 18px !important;

    width: 100% !important;

    max-width: 570px !important;

    font-size: clamp(
        48px,
        4.35vw,
        62px
    ) !important;

    line-height: 1.03 !important;

    letter-spacing: -0.045em !important;

    font-weight: 900 !important;

    color: #ffffff !important;
}


/* Purple title line */

body .mk-hero .mk-purple-title {

    display: block !important;

    margin-top: 6px !important;

    white-space: normal !important;
	  
	color: #68449B !important;
}


/* =========================================================
   7. DESCRIPTION
========================================================= */

body .mk-hero .mk-hero-description {

    max-width: 535px !important;

    margin: 0 !important;

    font-size: 15px !important;

    line-height: 1.7 !important;

    color: #d2c8d7 !important;
}


/* =========================================================
   8. BUTTONS
========================================================= */

body .mk-hero .mk-hero-buttons {

    display: flex !important;

    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 12px !important;

    margin-top: 27px !important;
}


/* =========================================================
   9. RIGHT VISUAL AREA
   IMPORTANT:
   We create a controlled window for the image.
========================================================= */

@media (min-width: 1025px) {

    body .mk-hero .mk-hero-visual {

        position: relative !important;

        width: 100% !important;

        height: 430px !important;

        min-height: 430px !important;

        max-height: 430px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        overflow: hidden !important;

        z-index: 2 !important;

        margin: 0 !important;

        padding: 0 !important;
    }

/* =====================================================
   10. HERO IMAGE — NO BOX / SEAMLESS BLEND
===================================================== */

body .mk-hero .mk-hero-visual {
    position: relative !important;
    overflow: hidden !important;

    background:
        radial-gradient(
            ellipse at 45% 50%,
            #241536 0%,
            #190D22 45%,
            #100717 100%
        ) !important;
}
	body .mk-hero .mk-hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgb(42, 14, 55) 0%,
            rgba(57, 18, 75, 0.42) 22%,
            rgba(111, 36, 168, 0.12) 55%,
            rgba(73, 24, 96, 0.32) 100%
        );

    mix-blend-mode: color !important;
    opacity: 0.78;
}
/* GÖRSEL */
body .mk-hero .mk-hero-image {
    display: block !important;

    width: 122% !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 100% !important;

    object-fit: cover !important;
    object-position: 58% center !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: scale(1.02) !important;
    transform-origin: center center !important;

    filter:
        brightness(.96)
        contrast(1.02)
        saturate(1.02) !important;

    /*
     * KUTU GÖRÜNÜMÜNÜ KALDIR
     */
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            #000 8%,
            #000 88%,
            transparent 100%
        ) !important;

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            #000 8%,
            #000 88%,
            transparent 100%
        ) !important;
}


/*
 * FOTOĞRAFIN ALT KENARINI MOR ZEMİNE YEDİR
 */
body .mk-hero .mk-hero-visual::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    pointer-events: none !important;

    z-index: 5 !important;

    background:

     /* SAĞ KENAR */
linear-gradient(
    to left,
    #241536 0%,
    rgba(36,21,54,.92) 4%,
    rgba(36,21,54,.55) 10%,
    transparent 19%
),

/* SOL KENAR */
linear-gradient(
    to right,
    rgba(16,7,23,.95) 0%,
    rgba(16,7,23,.55) 5%,
    transparent 15%
),

        /* ALT KENAR — EN ÖNEMLİ KISIM */
        linear-gradient(
            to top,
            #241536 0%,
            rgba(36,21,54,.96) 8%,
            rgba(36,21,54,.75) 16%,
            rgba(36,21,54,.35) 25%,
            transparent 38%
        ),

        /* ÜST KENAR */
        linear-gradient(
            to bottom,
            rgba(16,7,23,.85) 0%,
            rgba(16,7,23,.35) 7%,
            transparent 17%
        ) !important;
}
/*
 * FOTOĞRAFIN SİYAH KENARLARINI
 * HERO'NUN MORUNA YEDİR
 */
body .mk-hero .mk-hero-visual::after {

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    pointer-events: none !important;

    z-index: 5 !important;

    background:

        /* SOL */
        linear-gradient(
            to right,
            rgba(16,7,23,0.95) 0%,
            rgba(16,7,23,0.55) 5%,
            rgba(16,7,23,0) 14%
        ),

        /* SAĞ */
        linear-gradient(
            to left,
            rgba(16,7,23,0.95) 0%,
            rgba(16,7,23,0.55) 5%,
            rgba(16,7,23,0) 14%
        ),

        /* ÜST */
        linear-gradient(
            to bottom,
            rgba(16,7,23,0.90) 0%,
            rgba(16,7,23,0) 14%
        ),

        /* ALT */
        linear-gradient(
            to top,
            rgba(16,7,23,0.90) 0%,
            rgba(16,7,23,0) 14%
        ) !important;
}

} /* end desktop hero visual */

/* =========================================================
   11. TRUST BAR
   Keep it compact so HERO doesn't become too tall.
========================================================= */

body .mk-hero .mk-trust {

    position: relative !important;

    z-index: 5 !important;

    margin-top: 30px !important;

    padding-top: 18px !important;

    width: 100% !important;
}


body .mk-hero .mk-trust-item {

    font-size: 11px !important;

    line-height: 1.35 !important;
}


/* =========================================================
   12. LAPTOP / SMALL DESKTOP
========================================================= */

@media (min-width: 768px) and (max-width: 1200px) {

    body .mk-hero {
        padding-top: 40px !important;
        padding-bottom: 24px !important;
    }


    body .mk-hero > .mk-container {
        width: calc(100% - 36px) !important;
    }


    body .mk-hero-grid {

        grid-template-columns:
            44%
            56% !important;

        gap: 18px !important;
    }


    body .mk-hero .mk-hero-title {

        font-size: 48px !important;

        line-height: 1.04 !important;
    }


    body .mk-hero .mk-hero-visual {

        height: 390px !important;

        min-height: 390px !important;

        max-height: 390px !important;
    }


    body .mk-hero .mk-hero-image {

        width: 124% !important;

        object-position: 58% center !important;
    }

}


/* =========================================================
   13. TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    body .mk-hero {

        padding: 40px 0 25px !important;
    }


    body .mk-hero-grid {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 22px !important;
    }


    body .mk-hero .mk-hero-title {

        font-size: 44px !important;
    }


    body .mk-hero .mk-hero-description {

        font-size: 14px !important;
    }


    body .mk-hero .mk-hero-visual {

        height: 350px !important;

        min-height: 350px !important;

        max-height: 350px !important;

        overflow: hidden !important;
    }


    body .mk-hero .mk-hero-image {

        width: 125% !important;

        object-position: 58% center !important;
    }

}


/* =========================================================
   14. MOBILE
   Completely separate from desktop crop.
========================================================= */

@media (max-width: 767px) {

    body .mk-hero {

        padding: 38px 0 24px !important;

        overflow: hidden !important;
    }


    body .mk-hero > .mk-container {

        width: calc(100% - 28px) !important;
    }


    body .mk-hero-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 24px !important;
    }


    body .mk-hero-content {

        width: 100% !important;

        max-width: 100% !important;
    }


    body .mk-hero .mk-hero-title {

        max-width: 100% !important;

        font-size: 40px !important;

        line-height: 1.04 !important;

        letter-spacing: -0.04em !important;
    }


    body .mk-hero .mk-hero-description {

        max-width: 100% !important;

        font-size: 15px !important;

        line-height: 1.65 !important;
    }


    body .mk-hero .mk-hero-buttons {

        display: grid !important;

        grid-template-columns: 1fr !important;

        width: 100% !important;

        gap: 10px !important;
    }


    body .mk-hero .mk-button {

        width: 100% !important;
    }


    /* Mobile image */

    body .mk-hero .mk-hero-visual {

        position: relative !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        overflow: hidden !important;

        display: block !important;

        margin: 0 !important;
    }


    body .mk-hero .mk-hero-image {

        display: block !important;

        width: 115% !important;

        max-width: none !important;

        height: auto !important;

        min-height: 0 !important;

        object-fit: cover !important;

        object-position: center center !important;

        margin-left: -7.5% !important;

        transform: none !important;

        filter:
            drop-shadow(
                0 20px 30px rgba(0,0,0,.35)
            ) !important;
    }


    body .mk-hero .mk-trust {

        margin-top: 26px !important;

        padding-top: 14px !important;
    }


    body .mk-hero .mk-trust-item {

        font-size: 10px !important;
    }

}


/* =========================================================
   15. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    body .mk-hero {

        padding-top: 32px !important;
    }


    body .mk-hero .mk-hero-title {

        font-size: 35px !important;
    }


    body .mk-hero .mk-hero-visual {

        margin-top: 2px !important;
    }


    body .mk-hero .mk-hero-image {

        width: 120% !important;

        margin-left: -10% !important;
    }


    body .mk-hero .mk-trust {

        grid-template-columns: 1fr !important;

        gap: 12px !important;
    }

}
/* =========================================
   MORKEDI — HERO IMAGE SEAMLESS BLEND
========================================= */

.mk-hero-blended {
    position: relative !important;
    overflow: hidden !important;
}

.mk-hero-blended .mk-hero-image {
    width: 112% !important;
    max-width: none !important;
    margin-left: -6% !important;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 55%,
            rgba(0,0,0,.85) 72%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            black 55%,
            rgba(0,0,0,.85) 72%,
            transparent 100%
        );
}
	/* =========================================
   ABOUT MORKEDI — VISUAL
========================================= */

.mk-about-v2 .mk-about-image {
    position: relative !important;
    width: 100% !important;
    min-height: 520px !important;
    overflow: hidden !important;
}

.mk-about-v2 .mk-about-image > .mk-about-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 1 !important;
}

.mk-about-v2 .mk-about-image > .mk-about-product {
    position: absolute !important;
    right: -2% !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 650px !important;
    height: auto !important;
    z-index: 2 !important;
}
	/* =========================================
   MORKEDI — GLOBAL BUTTON STYLE
========================================= */

.mk-about-v2 a,
.mk-about-v2 button,
.mk-about-v2 .mk-btn,
.mk-about-v2 .button {
    background: #68449B !important;
    border-color: #68449B !important;
    color: #FFFFFF !important;
}

.mk-about-v2 a:hover,
.mk-about-v2 button:hover,
.mk-about-v2 .mk-btn:hover,
.mk-about-v2 .button:hover {
    background: #563582 !important;
    border-color: #563582 !important;
    color: #FFFFFF !important;
}
/* =========================================================
   MORKEDI — FINAL COLOUR OVERRIDE
   Main brand colour: RGB(61, 13, 99) / #3D0D63
========================================================= */

.mk-services-page {
    --mk-purple: #3D0D63;
    --mk-purple-light: #6B289B;
    --mk-purple-bright: #B966E8;

    --mk-dark: #1B062A;
    --mk-dark-two: #27083E;
    --mk-dark-three: #320B50;
    --mk-surface: #3D0D63;
}


/* HERO ANA ARKA PLAN */

body .mk-hero {
    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(97, 26, 148, 0.55),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            rgb(27, 6, 42) 0%,
            rgb(45, 10, 70) 48%,
            rgb(61, 13, 99) 100%
        ) !important;
}


/* HERO GÖRSELİNİN ARKASINDAKİ ALAN */

body .mk-hero .mk-hero-visual {
    background:
        radial-gradient(
            ellipse at 50% 48%,
            rgb(83, 20, 128) 0%,
            rgb(61, 13, 99) 48%,
            rgb(35, 7, 54) 100%
        ) !important;
}


/* GÖRSELİN KENARLARINI MÜRDÜM ZEMİNE YEDİR */

body .mk-hero .mk-hero-visual::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            to right,
            rgb(45, 10, 70) 0%,
            rgba(45, 10, 70, 0.80) 5%,
            transparent 18%
        ),
        linear-gradient(
            to left,
            rgb(61, 13, 99) 0%,
            rgba(61, 13, 99, 0.70) 5%,
            transparent 18%
        ),
        linear-gradient(
            to bottom,
            rgba(39, 8, 62, 0.88) 0%,
            transparent 18%
        ),
        linear-gradient(
            to top,
            rgba(45, 10, 70, 0.95) 0%,
            rgba(45, 10, 70, 0.55) 10%,
            transparent 26%
        ),
        linear-gradient(
            90deg,
            rgba(61, 13, 99, 0.20),
            rgba(97, 26, 148, 0.16)
        ) !important;
}


/* HERO GÖRSEL TONU */

body .mk-hero .mk-hero-image {
    filter:
        brightness(1.03)
        contrast(0.98)
        saturate(1.10) !important;
}


/* BUTONLAR */

.mk-about-v2 a,
.mk-about-v2 button,
.mk-about-v2 .mk-btn,
.mk-about-v2 .button {
    background: rgb(61, 13, 99) !important;
    border-color: rgb(61, 13, 99) !important;
    color: #FFFFFF !important;
}


/* BUTON HOVER */

.mk-about-v2 a:hover,
.mk-about-v2 button:hover,
.mk-about-v2 .mk-btn:hover,
.mk-about-v2 .button:hover {
    background: rgb(79, 20, 125) !important;
    border-color: rgb(79, 20, 125) !important;
    color: #FFFFFF !important;
}


/* MORKEDI HERO FULL-BLEED IMAGE — 2026-09-06 */
@media (min-width:1025px){
  body .mk-home .mk-hero-grid{position:relative!important;grid-template-columns:43% 57%!important;overflow:hidden!important;isolation:isolate!important}
  body .mk-home .mk-hero-content{position:relative!important;z-index:3!important;padding-right:24px!important}
  body .mk-home .mk-hero .mk-hero-visual{position:absolute!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;min-height:100%!important;margin:0!important;background:transparent!important;overflow:hidden!important;z-index:0!important}
  body .mk-home .mk-hero .mk-hero-image{display:block!important;width:100%!important;max-width:none!important;height:100%!important;min-height:100%!important;margin:0!important;object-fit:cover!important;object-position:center center!important;transform:none!important;filter:none!important;opacity:1!important;mask-image:none!important;-webkit-mask-image:none!important}
  body .mk-home .mk-hero-grid:after{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:2!important;pointer-events:none!important;background:linear-gradient(90deg,rgba(34,7,54,.99) 0%,rgba(38,8,61,.96) 29%,rgba(48,10,77,.82) 43%,rgba(61,13,99,.25) 64%,rgba(61,13,99,0) 82%)!important}
}