/* ==========================================================
   PBD POREFECT GLOBAL HEADER & FOOTER v1.0.1
========================================================== */

/* IMPORTANT:
   Only hide Nicepage's actual header/footer containers.
   Do NOT hide arbitrary theme <header>/<footer> elements or page wrappers. */
body.pbd-porefect-hf-active .u-header:not(#pbf-header),
body.pbd-porefect-hf-active .u-footer:not(#pbf-footer) {
    display: none !important;
}

/* Fallback wrapper should not create layout space after JS moves its children. */
#pbd-porefect-header-fallback:empty {
    display: none !important;
}

#pbf-header,
#pbf-header *,
#pbf-footer,
#pbf-footer * {
    box-sizing: border-box;
}

#pbf-header {
    --dark: #3C434A;
    --beige: #BEA48A;
    --soft-pink: #D8B3B0;
    --soft-pink-bg: #F4E8E7;
    width: 100%;
    position: relative;
    z-index: 99999;
    background: #fff;
    color: var(--dark);
    font-family: "Open Sans", Arial, sans-serif;
    overflow: visible;
}

#pbf-header .pbf-header-inner {
    width: 100%;
    height: 250px;
    min-height: 250px;
    display: grid;
    grid-template-columns: minmax(430px,510px) minmax(0,1fr) 105px;
    align-items: center;
    column-gap: 26px;
    padding: 0 28px;
    overflow: visible;
}

#pbf-header .pbf-logo-wrap {
    display:flex;align-items:center;justify-content:flex-start;height:100%;transform:translateY(27px);
}
#pbf-header .pbf-logo-link {display:block;width:470px;max-width:100%;text-decoration:none;}
#pbf-header .pbf-logo-visual {
    display:block;width:470px;max-width:100%;height:150px;
    background-image:url("https://porefectbeauty.co.za/wp-content/themes/Porefect7/images/newporefectlogonobackground.png");
    background-repeat:no-repeat;background-size:100% auto;background-position:center center;
}
#pbf-header .pbf-desktop-nav {
    display:flex;justify-content:center;align-items:center;width:100%;transform:translateY(28px);overflow:visible;
}
#pbf-header .pbf-menu {
    display:flex;justify-content:center;align-items:center;gap:clamp(20px,2vw,39px);
    width:100%;margin:0;padding:0;list-style:none;overflow:visible;
}
#pbf-header .pbf-menu>li {position:relative;margin:0;padding:0;list-style:none;overflow:visible;}
#pbf-header .pbf-menu>li>a {
    display:block;padding:16px 0;font-family:"Open Sans",Arial,sans-serif!important;
    font-size:clamp(16px,1.18vw,20px)!important;line-height:1.2!important;font-weight:400!important;
    color:#3C434A!important;text-decoration:none!important;white-space:nowrap;transition:color .15s ease;
}
html body #pbf-header .pbf-menu>li>a:hover,
html body #pbf-header .pbf-menu>li>a.pbf-active {color:#D8B3B0!important;}

#pbf-header .pbf-submenu {
    position:absolute;z-index:999999;top:calc(100% - 1px);left:50%;min-width:185px;margin:0;padding:0;
    list-style:none;background:#fff;border:0;box-shadow:0 7px 18px rgba(0,0,0,.07);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%);
    transition:opacity .12s ease,visibility .12s ease;overflow:visible;
}
#pbf-header .pbf-submenu::before {content:"";position:absolute;left:0;right:0;top:-15px;height:15px;}
#pbf-header .pbf-menu>li:hover>.pbf-submenu,
#pbf-header .pbf-menu>li:focus-within>.pbf-submenu {opacity:1;visibility:visible;pointer-events:auto;}
#pbf-header .pbf-submenu li {margin:0;padding:0;list-style:none;}
#pbf-header .pbf-submenu a {
    display:block;min-width:185px;padding:9px 18px;background:#fff!important;color:#3C434A!important;
    font-family:"Open Sans",Arial,sans-serif!important;font-size:16px!important;line-height:1.35!important;
    text-decoration:none!important;white-space:nowrap;
}
html body #pbf-header .pbf-submenu a:hover {background:#F4E8E7!important;color:#D8B3B0!important;}

#pbf-header .pbf-actions {
    display:flex;justify-content:flex-end;align-items:center;gap:13px;height:100%;transform:translateY(28px);
}
#pbf-header .pbf-action-link {
    position:relative;display:inline-flex;justify-content:center;align-items:center;width:31px;height:31px;
    color:#55595D!important;text-decoration:none!important;
}
#pbf-header .pbf-cart-icon {width:25px;height:25px;fill:#55595D!important;}
#pbf-header .pbf-account-icon {
    width:31px!important;height:31px!important;fill:none!important;stroke:#55595D!important;stroke-width:1.5;
}
#pbf-header .pbf-cart-count {
    position:absolute;top:-7px;right:-4px;min-width:17px;height:17px;display:inline-flex;justify-content:center;
    align-items:center;padding:0 4px;border-radius:50%;background:#BEA48A!important;color:#fff!important;
    font-family:Arial,sans-serif;font-size:10px;line-height:1;font-weight:600;
}

#pbf-header .pbf-mobile-menu-button {
    display:none;margin:0;padding:4px;border:0;background:transparent;color:#3C434A;cursor:pointer;
}
#pbf-header .pbf-mobile-menu-button svg {display:block;width:25px;height:25px;}

.pbf-mobile-overlay {
    position:fixed;z-index:999998;inset:0;background:rgba(0,0,0,.35);opacity:0;visibility:hidden;
    pointer-events:none;transition:opacity .2s ease,visibility .2s ease;
}
.pbf-mobile-overlay.pbf-open {opacity:1;visibility:visible;pointer-events:auto;}
.pbf-mobile-drawer {
    position:fixed;z-index:999999;top:0;left:0;width:min(360px,88vw);height:100vh;padding:75px 30px 35px;
    overflow-y:auto;background:#fff;box-shadow:8px 0 30px rgba(0,0,0,.12);
    transform:translateX(-105%);transition:transform .28s ease;
}
.pbf-mobile-drawer.pbf-open {transform:translateX(0);}
.pbf-mobile-close {
    position:absolute;top:20px;right:22px;width:35px;height:35px;display:flex;justify-content:center;align-items:center;
    padding:0;border:0;background:transparent;color:#3C434A;font-size:32px;cursor:pointer;
}
.pbf-mobile-menu {margin:0;padding:0;list-style:none;text-align:center;}
.pbf-mobile-menu>li {margin:0;padding:0;list-style:none;border-bottom:1px solid #eee;}
.pbf-mobile-menu>li>a,.pbf-mobile-parent>a {
    display:block;padding:14px 8px;color:#3C434A!important;font-size:17px;text-decoration:none!important;
}
.pbf-mobile-parent {position:relative;display:flex;align-items:center;}
.pbf-mobile-parent>a {flex:1;padding-left:38px;}
.pbf-mobile-toggle {
    position:absolute;right:0;width:38px;height:38px;padding:0;border:0;background:transparent;color:#D8B3B0;font-size:18px;
}
.pbf-mobile-submenu {display:none;margin:0;padding:4px 0 10px;list-style:none;background:#faf8f6;}
.pbf-mobile-submenu.pbf-open {display:block;}
.pbf-mobile-submenu a {display:block;padding:8px 10px;color:#3C434A!important;font-size:14px;text-decoration:none!important;}

/* Footer */
#pbf-footer {
    width:100%;margin:0;padding:0;background:#fff;color:#3C434A;font-family:"Open Sans",Arial,sans-serif;
}
#pbf-footer .pbf-footer-main {
    width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;padding:27px 10.45% 14px 10.45%;
}
#pbf-footer .pbf-footer-left {text-align:left;}
#pbf-footer .pbf-footer-centre {text-align:center;}
#pbf-footer .pbf-footer-right {text-align:right;}
#pbf-footer .pbf-footer-title {
    margin:0 0 10px;padding:0;color:#3C434A!important;
    font-family:"Playfair Display",Georgia,"Times New Roman",serif!important;font-size:27px!important;
    line-height:1.15!important;font-weight:400!important;
}
#pbf-footer .pbf-footer-links {margin:0;padding:0;list-style:none;}
#pbf-footer .pbf-footer-links li {
    position:relative;margin:0;padding-left:14px;color:#3C434A!important;font-size:18px!important;line-height:1.38!important;
}
#pbf-footer .pbf-footer-links li::before {content:"•";position:absolute;left:0;color:#714626;}
#pbf-footer .pbf-footer-links a,#pbf-footer .pbf-footer-contact a {color:#3C434A!important;text-decoration:underline!important;}
#pbf-footer .pbf-footer-links a:hover,#pbf-footer .pbf-footer-contact a:hover {color:#D8B3B0!important;}
#pbf-footer .pbf-footer-contact {margin:0;color:#3C434A!important;font-size:18px!important;line-height:1.48!important;}
#pbf-footer .pbf-socials {display:flex;justify-content:flex-end;align-items:center;gap:7px;margin-top:9px;}
#pbf-footer .pbf-social-link {
    display:inline-flex;justify-content:center;align-items:center;width:27px;height:27px;color:#D8B3B0!important;text-decoration:none!important;
}
#pbf-footer .pbf-social-link svg,#pbf-footer .pbf-social-link svg path {
    width:26px;height:26px;color:#D8B3B0!important;fill:#D8B3B0!important;
}
#pbf-footer .pbf-footer-copyright {
    width:100%;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin:0;padding:9px 20px 15px;
    color:#3C434A!important;text-align:center;font-size:16px!important;line-height:1.4!important;
}
#pbf-footer .pbf-footer-copyright a {
    margin-left:4px;color:#EC7272!important;font-size:inherit!important;line-height:inherit!important;text-decoration:underline!important;
}

/* Responsive */
@media (max-width:1599px) and (min-width:1280px) {
    #pbf-header .pbf-header-inner {grid-template-columns:410px minmax(0,1fr) 85px;column-gap:18px;padding-left:18px;padding-right:22px;}
    #pbf-header .pbf-logo-link,#pbf-header .pbf-logo-visual {width:410px;}
    #pbf-header .pbf-logo-visual {height:145px;}
    #pbf-header .pbf-menu {gap:23px;}
    #pbf-header .pbf-menu>li>a {font-size:17px!important;}
}
@media (max-width:1279px) and (min-width:1100px) {
    #pbf-header .pbf-header-inner {grid-template-columns:340px minmax(0,1fr) 78px;column-gap:13px;padding-left:15px;padding-right:15px;}
    #pbf-header .pbf-logo-link,#pbf-header .pbf-logo-visual {width:340px;}
    #pbf-header .pbf-logo-visual {height:135px;}
    #pbf-header .pbf-menu {gap:14px;}
    #pbf-header .pbf-menu>li>a {font-size:14px!important;}
    #pbf-header .pbf-actions {gap:7px;}
    #pbf-header .pbf-action-link {width:27px;}
    #pbf-header .pbf-account-icon {width:27px!important;height:27px!important;}
}
@media (max-width:1099px) {
    #pbf-header .pbf-header-inner {
        width:100%;height:245px;min-height:245px;display:flex;flex-direction:column;
        justify-content:flex-start;align-items:center;padding:12px 15px 14px;
    }
    #pbf-header .pbf-logo-wrap {width:100%;height:auto;justify-content:center;transform:none;}
    #pbf-header .pbf-logo-link,#pbf-header .pbf-logo-visual {width:305px;max-width:94%;}
    #pbf-header .pbf-logo-visual {height:115px;background-size:305px auto;background-position:center center;}
    #pbf-header .pbf-desktop-nav {display:none;}
    #pbf-header .pbf-mobile-menu-button {display:block;margin-top:5px;}
    #pbf-header .pbf-actions {height:auto;margin-top:7px;justify-content:center;gap:8px;transform:none;}
    #pbf-header .pbf-action-link {width:22px;height:23px;}
    #pbf-header .pbf-cart-icon {width:19px;height:19px;}
    #pbf-header .pbf-account-icon {width:21px!important;height:21px!important;}
    #pbf-header .pbf-cart-count {top:-7px;right:-7px;min-width:14px;height:14px;font-size:8px;}
}
@media (max-width:768px) {
    #pbf-footer .pbf-footer-main {display:block;padding:45px 20px 8px;}
    #pbf-footer .pbf-footer-left,#pbf-footer .pbf-footer-centre,#pbf-footer .pbf-footer-right {text-align:center;}
    #pbf-footer .pbf-footer-centre {margin-top:13px;}
    #pbf-footer .pbf-footer-right {margin-top:14px;}
    #pbf-footer .pbf-footer-title {font-size:20px!important;}
    #pbf-footer .pbf-footer-links {display:inline-block;text-align:left;}
    #pbf-footer .pbf-footer-links li {font-size:12px!important;line-height:1.45!important;}
    #pbf-footer .pbf-footer-contact {font-size:11px!important;line-height:1.6!important;}
    #pbf-footer .pbf-socials {justify-content:center;}
    #pbf-footer .pbf-social-link,#pbf-footer .pbf-social-link svg {width:19px;height:19px;}
    #pbf-footer .pbf-footer-copyright {display:block;padding:18px 24px;font-size:10px!important;line-height:1.5!important;}
    #pbf-footer .pbf-footer-copyright a {display:inline!important;margin-left:2px!important;font-size:10px!important;line-height:1.5!important;}
}
@media (max-width:390px) {
    #pbf-header .pbf-logo-link,#pbf-header .pbf-logo-visual {width:285px;}
    #pbf-header .pbf-logo-visual {height:110px;background-size:285px auto;}
    #pbf-header .pbf-header-inner {height:235px;min-height:235px;}
}
