/*
Theme Name: Dermaline
Theme URI: https://dermaline.lt
Author: Dermaline
Description: Custom theme for Dermaline — dermacosmetics for skin recovery. Fixed left sidebar navigation with full-bleed Elementor content, mirroring en.dermaline.co.kr.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dermaline
*/

:root{
  --dl-dark:#1A1A1A;
  --dl-muted:#6B6B6B;
  --dl-bg:#F5F2EE;
  --dl-accent:#B08D57;
  --dl-line:#ECECEC;
  --dl-sb:260px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Montserrat',Arial,Helvetica,sans-serif;color:var(--dl-dark);line-height:1.6;background:#fff;-webkit-font-smoothing:antialiased;font-size:17px;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}

/* ===== Fixed left sidebar ===== */
.dl-sidebar{position:fixed;top:0;left:0;width:var(--dl-sb);height:100vh;background:#fff;border-right:1px solid var(--dl-line);display:flex;flex-direction:column;padding:42px 34px;z-index:1000;overflow-y:auto;}
.dl-sidebar-top{display:flex;align-items:center;justify-content:space-between;}
.dl-logo{display:inline-block;margin-bottom:46px;}
.dl-logo img{height:30px;width:auto;}
.dl-logo .dl-wordmark{font-size:24px;font-weight:700;letter-spacing:5px;}
.dl-nav .dl-menu{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin:0;padding:0;}
.dl-nav .dl-menu a{font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--dl-dark);font-weight:500;transition:color .2s ease;}
.dl-nav .dl-menu a:hover{color:var(--dl-accent);}
.dl-nav .dl-menu li.current-menu-item a{color:var(--dl-accent);}
.dl-sidebar-social{margin-top:auto;display:flex;flex-direction:column;gap:11px;padding-top:40px;}
.dl-sidebar-social a{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dl-muted);}
.dl-sidebar-social a:hover{color:var(--dl-dark);}
.dl-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;}
.dl-burger span{width:26px;height:2px;background:var(--dl-dark);display:block;}
#dl-nav-toggle{position:absolute;}

/* ===== Main column ===== */
.dl-main{margin-left:var(--dl-sb);min-height:100vh;}
.dl-page-default{max-width:1000px;margin:0 auto;padding:70px 30px;}
.dl-page-default h1.dl-page-title{font-size:40px;font-weight:700;margin-bottom:28px;}

/* ===== Footer ===== */
.dl-footer{margin-left:var(--dl-sb);background:#161616;color:#9a9a9a;padding:72px 0 30px;}
.dl-footer-inner{max-width:1100px;margin:0 auto;padding:0 40px;}
.dl-footer-cols{display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between;}
.dl-footer-brand{flex:1.4;min-width:240px;}
.dl-footer-brand .dl-wordmark{font-size:24px;font-weight:700;letter-spacing:5px;color:#fff;}
.dl-footer-brand p{margin-top:16px;font-size:14px;line-height:1.8;color:#9a9a9a;max-width:320px;}
.dl-footer-col{min-width:160px;}
.dl-footer-col h4{color:#fff;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin:0 0 18px;font-weight:600;}
.dl-footer-col a{display:block;color:#9a9a9a;margin-bottom:10px;font-size:14px;transition:color .2s ease;}
.dl-footer-col a:hover{color:#fff;}
.dl-footer-col p{font-size:14px;line-height:1.9;color:#9a9a9a;margin:0;}
.dl-footer-bottom{border-top:1px solid #2a2a2a;margin-top:44px;padding-top:22px;font-size:12px;color:#777;text-align:center;}

/* ===== Shop banner ===== */
.dl-shop-banner{background-size:cover;background-position:center;margin-bottom:0;}
.dl-shop-banner-overlay{background:rgba(20,20,20,0.45);padding:120px 24px;text-align:center;color:#fff;}
.dl-shop-banner .dl-eyebrow{display:block;letter-spacing:4px;font-size:13px;color:#E7Cfa0;margin-bottom:12px;font-weight:600;}
.dl-shop-banner h1{font-size:52px;font-weight:700;margin:0 0 12px;color:#fff;}
.dl-shop-banner p{margin:0;font-size:16px;color:#eee;}
.woocommerce .dl-page-default{padding-top:50px;}

/* ===== Responsive: collapse sidebar to top bar ===== */
@media(max-width:1024px){
  :root{--dl-sb:0px;}
  .dl-sidebar{position:sticky;top:0;width:100%;height:auto;flex-direction:row;align-items:center;justify-content:space-between;padding:16px 22px;border-right:none;border-bottom:1px solid var(--dl-line);flex-wrap:wrap;}
  .dl-sidebar-top{flex:1;margin:0;}
  .dl-logo{margin-bottom:0;}
  .dl-logo img{height:26px;}
  .dl-burger{display:flex;}
  .dl-nav{flex-basis:100%;max-height:0;overflow:hidden;transition:max-height .3s ease;}
  #dl-nav-toggle:checked ~ .dl-sidebar .dl-nav{max-height:480px;}
  .dl-nav .dl-menu{flex-direction:column;gap:16px;padding:18px 0 6px;}
  .dl-sidebar-social{flex-direction:row;gap:18px;margin:0;padding:0;flex-basis:100%;}
  .dl-sidebar-social{display:none;}
  .dl-main,.dl-footer{margin-left:0;}
  .dl-shop-banner h1{font-size:36px;}
}

/* ===== Sidebar icons ===== */
.dl-icons{display:flex;gap:20px;margin-bottom:30px;align-items:center;}
.dl-icons .dl-ico{background:none;border:0;padding:0;margin:0;cursor:pointer;color:var(--dl-dark);display:inline-flex;line-height:0;}
.dl-icons .dl-ico svg{width:21px;height:21px;}
.dl-icons .dl-ico:hover{color:var(--dl-accent);}
/* ===== Sidebar search (FiboSearch) ===== */
.dl-search{display:none;margin-bottom:26px;}
.dl-search.open{display:block;}
.dl-search .dgwt-wcas-search-wrapp{max-width:100%!important;width:100%!important;}
/* ===== Accordion submenus ===== */
.dl-nav .dl-menu li{width:100%;}
.dl-nav .dl-menu li.menu-item-has-children > a{display:flex;align-items:center;justify-content:space-between;width:100%;}
.dl-nav .dl-menu li.menu-item-has-children > a:after{content:'+';margin-left:10px;font-size:16px;font-weight:400;color:var(--dl-muted);}
.dl-nav .dl-menu li.menu-item-has-children.open > a:after{content:'\2212';}
.dl-nav .dl-menu .sub-menu{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease;display:flex;flex-direction:column;gap:13px;}
.dl-nav .dl-menu li.menu-item-has-children.open > .sub-menu{max-height:460px;margin:16px 0 4px;}
.dl-nav .dl-menu .sub-menu a{font-size:13px;letter-spacing:.5px;text-transform:none;color:var(--dl-muted);font-weight:400;}
.dl-nav .dl-menu .sub-menu a:hover{color:var(--dl-dark);}